feat(react-card): add selectable prop

apps/vr-tests-react-components/src/stories/Card.stories.tsx

@@ -133,9 +133,9 @@ storiesOf('Card Converged', module)
       steps={new Screener.Steps()
         .snapshot('normal', { cropTo: '.testWrapper' })
         .hover('[role="group"]')
-        .snapshot('focused', { cropTo: '.testWrapper' })
+        .snapshot('hover', { cropTo: '.testWrapper' })
         .mouseDown('[role="group"]')
-        .snapshot('clicked', { cropTo: '.testWrapper' })
+        .snapshot('click', { cropTo: '.testWrapper' })
         .end()}
     >
       <div className="testWrapper" style={{ width: '300px' }}>
@@ -151,7 +151,6 @@ storiesOf('Card Converged', module)
       </Card>
     ),
     {
-      includeRtl: true,
       includeHighContrast: true,
       includeDarkMode: true,
     },
@@ -164,7 +163,6 @@ storiesOf('Card Converged', module)
       </Card>
     ),
     {
-      includeRtl: true,
       includeHighContrast: true,
       includeDarkMode: true,
     },
@@ -177,7 +175,6 @@ storiesOf('Card Converged', module)
       </Card>
     ),
     {
-      includeRtl: true,
       includeHighContrast: true,
       includeDarkMode: true,
     },
@@ -190,8 +187,83 @@ storiesOf('Card Converged', module)
       </Card>
     ),
     {
-      includeRtl: true,
       includeHighContrast: true,
       includeDarkMode: true,
     },
   );
+
+storiesOf('Card Converged', module)
+  .addDecorator(story => (
+    <Screener
+      steps={new Screener.Steps()
+        .snapshot('normal', { cropTo: '.testWrapper' })
+        .hover('[role="group"]')
+        .snapshot('hover', { cropTo: '.testWrapper' })
+        .mouseDown('[role="group"]')
+        .snapshot('click', { cropTo: '.testWrapper' })
+        .mouseUp('[role="group"]')
+        .snapshot('selected', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      <div className="testWrapper" style={{ width: '300px' }}>
+        {story()}
+      </div>
+    </Screener>
+  ))
+  .addStory(
+    'appearance selectable - Filled',
+    () => (
+      <Card selectable appearance="filled">
+        <SampleCardContent />
+      </Card>
+    ),
+    {
+      includeRtl: true,
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'appearance selectable - Filled Alternative',
+    () => (
+      <Card selectable appearance="filled-alternative">
+        <SampleCardContent />
+      </Card>
+    ),
+    {
+      includeRtl: true,
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'appearance selectable - Outline',
+    () => (
+      <Card selectable appearance="outline">
+        <SampleCardContent />
+      </Card>
+    ),
+    {
+      includeRtl: true,
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'appearance selectable - Subtle',
+    () => (
+      <Card selectable appearance="subtle">
+        <SampleCardContent />
+      </Card>
+    ),
+    {
+      includeRtl: true,
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory('appearance focusable + selectable', () => (
+    <Card focusMode="no-tab" selectable>
+      <SampleCardContent />
+    </Card>
+  ));

change/@fluentui-react-card-a5510e2b-cbb7-44ca-aec6-20635cf9f85e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: add card selection functionality",
+  "packageName": "@fluentui/react-card",
+  "email": "39736248+andrefcdias@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-card/e2e/Card.e2e.tsx

@@ -4,6 +4,7 @@ import type {} from '@cypress/react';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
 import { Button } from '@fluentui/react-button';
+import { checkboxClassNames } from '@fluentui/react-checkbox';
 import { Card, CardFooter, CardHeader } from '@fluentui/react-card';
 import type { CardProps } from '@fluentui/react-card';
 
@@ -12,7 +13,7 @@ const mountFluent = (element: JSX.Element) => {
 };
 
 const CardSample = (props: CardProps) => {
-  const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-card';
+  const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
 
   const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg';
 
@@ -32,10 +33,10 @@ const CardSample = (props: CardProps) => {
           plum.
         </div>
         <CardFooter>
-          <Button id="open-button" onClick={alert} appearance="primary">
+          <Button id="open-button" onClick={() => console.log('open-button clicked')} appearance="primary">
             Open
           </Button>
-          <Button id="close-button" appearance="outline">
+          <Button id="close-button" onClick={() => console.log('close-button clicked')} appearance="outline">
             Close
           </Button>
         </CardFooter>
@@ -240,4 +241,116 @@ describe('Card', () => {
       });
     });
   });
+
+  describe('selectable', () => {
+    it('should not be selectable by default', () => {
+      mountFluent(<CardSample />);
+
+      cy.get(`.${checkboxClassNames.input}`).should('not.exist');
+    });
+
+    it('should show checkbox when selectable', () => {
+      mountFluent(<CardSample selectable />);
+
+      cy.get(`.${checkboxClassNames.input}`).should('exist').should('not.be.checked');
+    });
+
+    it('should select with a mouse click', () => {
+      mountFluent(<CardSample selectable />);
+
+      cy.get(`.${checkboxClassNames.input}`).realClick();
+
+      cy.get(`.${checkboxClassNames.input}`).should('be.checked');
+    });
+
+    it('should select with the Enter key', () => {
+      mountFluent(<CardSample selectable />);
+
+      cy.get(`.${checkboxClassNames.input}`).focus().realPress('Enter');
+
+      cy.get(`.${checkboxClassNames.input}`).should('be.checked');
+    });
+
+    it('should select with the Space key', () => {
+      mountFluent(<CardSample selectable />);
+
+      cy.get(`.${checkboxClassNames.input}`).focus().realPress('Space');
+
+      cy.get(`.${checkboxClassNames.input}`).should('be.checked');
+    });
+
+    it('should select with a mouse click anywhere on the card', () => {
+      mountFluent(<CardSample selectable />);
+
+      cy.get(`#card`).realClick();
+
+      cy.get(`.${checkboxClassNames.input}`).should('be.checked');
+    });
+
+    it('should select with the Enter key anywhere on the card', () => {
+      mountFluent(<CardSample selectable />);
+
+      cy.get(`#card`).focus().realPress('Enter');
+
+      cy.get(`.${checkboxClassNames.input}`).should('be.checked');
+    });
+
+    it('should select with the Space key anywhere on the card', () => {
+      mountFluent(<CardSample selectable />);
+
+      cy.get(`#card`).focus().realPress('Space');
+
+      cy.get(`.${checkboxClassNames.input}`).should('be.checked');
+    });
+  });
+
+  describe('focusable + selectable', () => {
+    it('should not select on click', () => {
+      mountFluent(<CardSample focusMode="no-tab" selectable />);
+
+      cy.get(`#card`).realClick();
+
+      cy.get(`.${checkboxClassNames.input}`).should('not.be.checked');
+    });
+
+    it('should not select on Enter key', () => {
+      mountFluent(<CardSample focusMode="no-tab" selectable />);
+
+      cy.get(`#card`).focus().realPress('Enter');
+
+      cy.get(`.${checkboxClassNames.input}`).should('not.be.checked');
+    });
+
+    it('should not select on Space key', () => {
+      mountFluent(<CardSample focusMode="no-tab" selectable />);
+
+      cy.get(`#card`).focus().realPress('Space');
+
+      cy.get(`.${checkboxClassNames.input}`).should('not.be.checked');
+    });
+
+    it('should select on checkbox click', () => {
+      mountFluent(<CardSample focusMode="no-tab" selectable />);
+
+      cy.get(`.${checkboxClassNames.input}`).realClick();
+
+      cy.get(`.${checkboxClassNames.input}`).should('be.checked');
+    });
+
+    it('should not select on checkbox Enter key press', () => {
+      mountFluent(<CardSample focusMode="no-tab" selectable />);
+
+      cy.get(`.${checkboxClassNames.input}`).focus().realPress('Enter');
+
+      cy.get(`.${checkboxClassNames.input}`).should('not.be.checked');
+    });
+
+    it('should select on checkbox Space key press', () => {
+      mountFluent(<CardSample focusMode="no-tab" selectable />);
+
+      cy.get(`.${checkboxClassNames.input}`).focus().realPress('Space');
+
+      cy.get(`.${checkboxClassNames.input}`).should('be.checked');
+    });
+  });
 });

packages/react-components/react-card/etc/react-card.api.md

@@ -4,6 +4,9 @@
 
 ```ts
 
+/// <reference types="react" />
+
+import type { Checkbox } from '@fluentui/react-checkbox';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -87,15 +90,20 @@ export type CardProps = ComponentProps<CardSlots> & {
     focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
     orientation?: 'horizontal' | 'vertical';
     size?: 'small' | 'medium' | 'large';
+    selectable?: boolean;
+    selected?: boolean;
+    defaultSelected?: boolean;
+    onCardSelect?: (event: React_2.MouseEvent | React_2.KeyboardEvent | React_2.ChangeEvent, data: CardOnSelectData) => void;
 };
 
 // @public
 export type CardSlots = {
     root: Slot<'div'>;
+    select?: Slot<typeof Checkbox>;
 };
 
 // @public
-export type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'>>;
+export type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'focusMode' | 'orientation' | 'selectable' | 'selected' | 'size'>>;
 
 // @public
 export const renderCard_unstable: (state: CardState) => JSX.Element;

packages/react-components/react-card/package.json

@@ -37,10 +37,12 @@
     "@fluentui/react-button": "9.0.0-rc.13"
   },
   "dependencies": {
-    "@griffel/react": "1.1.0",
+    "@fluentui/keyboard-keys": "9.0.0-rc.6",
+    "@fluentui/react-checkbox": "9.0.0-rc.5",
     "@fluentui/react-utilities": "9.0.0-rc.10",
     "@fluentui/react-tabster": "9.0.0-rc.13",
     "@fluentui/react-theme": "9.0.0-rc.9",
+    "@griffel/react": "1.1.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

packages/react-components/react-card/src/components/Card/Card.test.tsx

@@ -7,6 +7,9 @@ describe('Card', () => {
   isConformant({
     Component: Card,
     displayName: 'Card',
+    requiredProps: {
+      selectable: true,
+    },
     disabledTests: ['component-has-static-classname-exported'],
   });
 

packages/react-components/react-card/src/components/Card/Card.types.ts

@@ -1,4 +1,13 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { Checkbox } from '@fluentui/react-checkbox';
+import * as React from 'react';
+
+/**
+ * Data sent from the selection events on a selectable card.
+ */
+export type CardOnSelectData = {
+  selected: boolean;
+};
 
 /**
  * Slots available in the Card component.
@@ -8,6 +17,11 @@ export type CardSlots = {
    * Root element of the component.
    */
   root: Slot<'div'>;
+
+  /**
+   * Checkbox slot used when `selectable` prop is enabled.
+   */
+  select?: Slot<typeof Checkbox>;
 };
 
 /**
@@ -51,9 +65,36 @@ export type CardProps = ComponentProps<CardSlots> & {
    * @default 'medium'
    */
   size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Enables selection of the card.
+   *
+   * @default false
+   */
+  selectable?: boolean;
+
+  /**
+   * Defines the controlled selected state of the card.
+   *
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Defines whether the card is initially in a selected state or not when rendered.
+   *
+   * @default false
+   */
+  defaultSelected?: boolean;
+
+  /**
+   * Callback to be called when the selected state value changes.
+   */
+  onCardSelect?: (event: React.MouseEvent | React.KeyboardEvent | React.ChangeEvent, data: CardOnSelectData) => void;
 };
 
 /**
  * State used in rendering Card.
  */
-export type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'>>;
+export type CardState = ComponentState<CardSlots> &
+  Required<Pick<CardProps, 'appearance' | 'focusMode' | 'orientation' | 'selectable' | 'selected' | 'size'>>;