Card: Initial implementation (#14206)

#### Pull request checklist - [ ] Addresses an existing issue: Fixes #0000 - [ ] Include a change request file using `$ yarn change` #### Description of changes This PR contains the first implementation of a `Card` component using our latest stack of technologies. ![image](https://user-images.githubusercontent.com/7798177/88445656-d77aca00-cdd8-11ea-8a50-f0d486a6998e.png) #### Notes - It's using `office-ui-fabric-react` components for the examples. - There are a couple of TODOs regarding some props that I still need to address.
microsoft · Sep 22, 2020 · ed85155 · ed85155
1 parent 10e2cb9
commit ed85155
Show file tree

Hide file tree

Showing 50 changed files with 2,026 additions and 9 deletions.
diff --git a/change/@fluentui-react-button-2020-07-24-18-12-08-card.json b/change/@fluentui-react-button-2020-07-24-18-12-08-card.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Moving SizeValue const from react-button to theme package.",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-07-25T01:11:26.080Z"
+}
diff --git a/change/@fluentui-react-theme-provider-2020-07-24-18-12-08-card.json b/change/@fluentui-react-theme-provider-2020-07-24-18-12-08-card.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Adding Card tokens to theme.",
+  "packageName": "@fluentui/react-theme-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-07-25T01:12:07.950Z"
+}
diff --git a/change/@fluentui-theme-2020-09-14-17-50-32-card.json b/change/@fluentui-theme-2020-09-14-17-50-32-card.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Moving SizeValue const from react-button to theme package.",
+  "packageName": "@fluentui/theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-09-14T01:11:58.698Z"
+}
diff --git a/change/@uifabric-react-cards-2020-07-24-18-12-08-card.json b/change/@uifabric-react-cards-2020-07-24-18-12-08-card.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Card: Adding initial implementation based on latest technology stack - compose, scss, tokens.",
+  "packageName": "@uifabric/react-cards",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-07-25T01:11:58.698Z"
+}
diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md
@@ -10,6 +10,7 @@ import { ComponentProps } from '@fluentui/react-compose/lib/next/index';
 import * as React from 'react';
 import { RecursivePartial } from '@fluentui/theme';
 import { ShorthandProps } from '@fluentui/react-compose/lib/next/index';
+import { SizeValue } from '@fluentui/theme';
 import { SlotProps } from '@fluentui/react-compose';
 
 // @public
@@ -180,9 +181,6 @@ export interface MenuButtonState extends MenuButtonProps, Omit<ButtonState, 'ico
 // @public (undocumented)
 export type MenuButtonTokens = ButtonTokenSet;
 
-// @public (undocumented)
-export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
-
 // @public (undocumented)
 export const SplitButton: React.ForwardRefExoticComponent<Pick<SplitButtonProps, string | number> & React.RefAttributes<HTMLElement>>;
 

diff --git a/packages/react-button/src/components/Button/Button.types.ts b/packages/react-button/src/components/Button/Button.types.ts
@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { BaseSlots, SlotProps } from '@fluentui/react-compose';
 import { ComponentProps, ShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { ColorTokenSet, RecursivePartial } from '@fluentui/theme';
-
-export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
+import { ColorTokenSet, RecursivePartial, SizeValue } from '@fluentui/theme';
 
 export type ButtonProps = ComponentProps &
   React.HTMLAttributes<HTMLElement> & {

diff --git a/packages/react-cards/.storybook/decorators/index.js b/packages/react-cards/.storybook/decorators/index.js
@@ -0,0 +1 @@
+export * from './withThemeProvider';
diff --git a/packages/react-cards/.storybook/decorators/withThemeProvider.js b/packages/react-cards/.storybook/decorators/withThemeProvider.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { ThemeProvider } from '@fluentui/react-theme-provider';
+import { useTheme } from '../knobs/theme';
+
+export const withThemeProvider = storyFn => {
+  const { theme } = useTheme();
+
+  return <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>;
+};
diff --git a/packages/react-cards/.storybook/knobs/theme.js b/packages/react-cards/.storybook/knobs/theme.js
@@ -0,0 +1,51 @@
+import { select } from '@storybook/addon-knobs';
+
+const themeSelectorLabel = 'Theme';
+
+const TeamsTheme = {
+  tokens: {
+    body: {
+      background: 'white',
+      contentColor: 'black',
+    },
+
+    card: {
+      size: {
+        small: {
+          height: '100%',
+          width: '200px',
+        },
+        smaller: {
+          height: '100%',
+          width: '200px',
+        },
+        smallest: {
+          height: '100%',
+          width: '200px',
+        },
+        medium: {
+          height: '100%',
+          width: '300px',
+        },
+        large: {
+          height: '100%',
+          width: '500px',
+        },
+        larger: {
+          height: '100%',
+          width: '500px',
+        },
+        largest: {
+          height: '100%',
+          width: '500px',
+        },
+      },
+    },
+  },
+  stylesheets: [],
+};
+
+const themeOptions = [{ label: 'Teams', theme: TeamsTheme }];
+const defaultThemeOption = themeOptions[0];
+
+export const useTheme = () => select(themeSelectorLabel, themeOptions, defaultThemeOption);
diff --git a/packages/react-cards/.storybook/main.js b/packages/react-cards/.storybook/main.js
@@ -4,5 +4,5 @@ module.exports = {
   webpackFinal: config => {
     return custom({ config });
   },
-  addons: ['@storybook/addon-a11y/register'],
+  addons: ['@storybook/addon-a11y/register', '@storybook/addon-knobs/register'],
 };
diff --git a/packages/react-cards/.storybook/preview.js b/packages/react-cards/.storybook/preview.js
@@ -3,9 +3,13 @@ import generateStoriesFromExamples from '@uifabric/build/storybook/generateStori
 import { configure, addParameters, addDecorator } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import { withA11y } from '@storybook/addon-a11y';
+import { withKnobs } from '@storybook/addon-knobs';
+import { withThemeProvider } from './decorators/withThemeProvider';
 
 addDecorator(withInfo());
 addDecorator(withA11y());
+addDecorator(withKnobs({ escapeHTML: false }));
+addDecorator(withThemeProvider);
 addParameters({
   a11y: {
     manual: true,
@@ -14,7 +18,7 @@ addParameters({
 
 initializeIcons();
 
-const req = require.context('../src/components', true, /\.Example\.tsx$/);
+const req = require.context('../src', true, /\.(Example|stories)\.tsx$/);
 
 function loadStories() {
   const stories = new Map();

diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json
@@ -27,6 +27,7 @@
     "update-snapshots": "just-scripts jest -u"
   },
   "devDependencies": {
+    "@fluentui/common-styles": "^0.2.6",
     "@fluentui/eslint-plugin": "^0.54.1",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -48,10 +49,19 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
+    "@fluentui/keyboard-key": "^0.2.12",
+    "@fluentui/react-compose": "^0.19.4",
+    "@fluentui/react-theme-provider": "^0.13.4",
+    "@fluentui/theme": "^0.4.0",
     "@microsoft/load-themed-styles": "^1.10.26",
+    "@uifabric/example-data": "^7.1.4",
     "@uifabric/file-type-icons": "^7.6.7",
     "@uifabric/foundation": "^7.9.6",
+    "@uifabric/react-hooks": "^7.13.5",
     "@uifabric/set-version": "^7.0.23",
+    "@uifabric/styling": "^7.16.6",
+    "@uifabric/theme-samples": "^7.1.17",
+    "@uifabric/utilities": "^7.32.3",
     "office-ui-fabric-react": "^7.139.1",
     "tslib": "^1.10.0"
   },

diff --git a/packages/react-cards/src/next.ts b/packages/react-cards/src/next.ts
@@ -0,0 +1 @@
+export * from './next/index';
diff --git a/packages/react-cards/src/next/Card.Teams.stories.tsx b/packages/react-cards/src/next/Card.Teams.stories.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { TestImages } from '@uifabric/example-data';
+import {
+  DefaultButton,
+  IconButton,
+  Image,
+  ImageFit,
+  Persona,
+  PersonaPresence,
+  Stack,
+  Text,
+} from 'office-ui-fabric-react';
+import { Card, CardBody, CardFooter, CardHeader } from '@uifabric/react-cards/lib/next';
+
+function onClick() {
+  // eslint-disable-next-line no-alert
+  alert('Card was clicked');
+}
+
+export const TeamsCards = () => (
+  <Stack gap={40}>
+    <div>
+      <Text variant="xLarge">Basic Card</Text>
+      <Card onClick={onClick}>
+        <CardHeader>
+          <Persona
+            imageUrl={TestImages.personaMale}
+            text="Carmen Gaylord"
+            secondaryText="Direct Communications Agent"
+            presence={PersonaPresence.offline}
+          />
+        </CardHeader>
+        <CardBody>
+          Voluptatibus commodi ut. Neque eum odit eius repellat molestiae illo aut ut illum. Nulla vel et odit
+          consequatur dolorem molestias. Rem rerum animi consequatur.
+        </CardBody>
+      </Card>
+    </div>
+    <div>
+      <Text variant="xLarge">Only header</Text>
+      <Card onClick={onClick}>
+        <CardHeader fitted>
+          <Persona
+            imageUrl={TestImages.personaMale}
+            text="Carmen Gaylord"
+            secondaryText="Direct Communications Agent"
+            presence={PersonaPresence.offline}
+          />
+        </CardHeader>
+      </Card>
+    </div>
+    <div>
+      <Text variant="xLarge">Only body</Text>
+      <Card onClick={onClick}>
+        <CardBody fitted>
+          <Stack gap={10}>
+            <Image src="http://placehold.it/500x500" imageFit={ImageFit.cover} height={300} maximizeFrame />
+            <Text>Citizens of distant epochs muse about at theedge of forever hearts of the...</Text>
+          </Stack>
+        </CardBody>
+      </Card>
+    </div>
+    <div>
+      <Text variant="xLarge">Only footer</Text>
+      <Card onClick={onClick}>
+        <CardFooter fitted>
+          <Stack horizontal horizontalAlign="space-between">
+            <DefaultButton text="Action" />
+            <Stack horizontal>
+              <IconButton iconProps={{ iconName: 'FavoriteStar' }} />
+              <IconButton iconProps={{ iconName: 'Download' }} />
+              <IconButton iconProps={{ iconName: 'More' }} />
+            </Stack>
+          </Stack>
+        </CardFooter>
+      </Card>
+    </div>
+  </Stack>
+);