Adds Divider page content

utilities/docs/arbutus-prop-docs.config.json

@@ -1,7 +1,8 @@
 {
   "componentPaths": [
     "../../components/badge/src/badge/badge.tsx",
-    "../../components/button/src/button/button.tsx"
+    "../../components/button/src/button/button.tsx",
+    "../../components/divider/src/divider/divider.tsx"
   ],
   "outputDir": "src/__prop-docs__"
 }

utilities/docs/gatsby-config.ts

@@ -22,7 +22,6 @@ const config: GatsbyConfig = {
     'gatsby-plugin-sitemap',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
-    // gatsby-transformer-remark is used to parse rich text fields in Strapi.
     'gatsby-transformer-remark',
     {
       resolve: 'gatsby-plugin-manifest',

utilities/docs/src/__prop-docs__/divider.props.ts

@@ -0,0 +1,31 @@
+/**
+ * THIS IS AN AUTOGENERATED FILE. ALL CHANGES WILL BE LOST.
+ */
+import type { PropsDoc } from '@microsoft/arbutus.prop-docs-cli';
+
+const propsDoc: PropsDoc = {
+  tags: {},
+  filePath: '../../components/divider/src/divider/divider.tsx',
+  description: '',
+  displayName: 'Divider',
+  methods: [],
+  props: {
+    className: {
+      defaultValue: null,
+      description: '',
+      name: 'className',
+      declarations: [
+        {
+          fileName: 'arbutus/components/divider/src/divider/divider.types.ts',
+          name: 'TypeLiteral',
+        },
+      ],
+      required: false,
+      type: {
+        name: 'string',
+      },
+    },
+  },
+};
+
+export default propsDoc;

utilities/docs/src/__prop-docs__/index.ts

@@ -4669,6 +4669,28 @@ const manifest: Manifest = {
       },
     },
   },
+  Divider: {
+    tags: {},
+    filePath: '../../components/divider/src/divider/divider.tsx',
+    description: '',
+    displayName: 'Divider',
+    methods: [],
+    props: {
+      className: {
+        defaultValue: null,
+        description: '',
+        name: 'className',
+        declarations: [
+          {
+            fileName: 'arbutus/components/divider/src/divider/divider.types.ts',
+            name: 'TypeLiteral',
+          },
+        ],
+        required: false,
+        type: { name: 'string' },
+      },
+    },
+  },
 };
 
 export default manifest;

utilities/docs/src/code-examples/__raw__/divider-basic.raw.ts

@@ -0,0 +1,19 @@
+export default `import { Divider } from '@microsoft/arbutus.divider';
+import { useSpaceStyles } from '@microsoft/arbutus.use-space-styles';
+import * as React from 'react';
+
+const ExampleComponent = () => {
+  /**
+   * [optional] Use the \`useSpaceStyles\` hook to easily apply spacing to any component. In this case, we will use \`my\`,
+   * which will translate to margin top and bottom. \`my6\` will apply a margin of 6 vertical units or
+   * \`tokens.spacingHorizontalM\`.
+   *
+   * @see https://microsoft.github.io/blueprints/utilities/hooks/use-space-styles/
+   */
+  const space = useSpaceStyles();
+
+  return <Divider className={space.my6} />;
+};
+
+export default ExampleComponent;
+`;

utilities/docs/src/code-examples/divider-basic.example.tsx

@@ -0,0 +1,18 @@
+import { Divider } from '@microsoft/arbutus.divider';
+import { useSpaceStyles } from '@microsoft/arbutus.use-space-styles';
+import * as React from 'react';
+
+const ExampleComponent = () => {
+  /**
+   * [optional] Use the `useSpaceStyles` hook to easily apply spacing to any component. In this case, we will use `my`,
+   * which will translate to margin top and bottom. `my6` will apply a margin of 6 vertical units or
+   * `tokens.spacingHorizontalM`.
+   *
+   * @see https://microsoft.github.io/blueprints/utilities/hooks/use-space-styles/
+   */
+  const space = useSpaceStyles();
+
+  return <Divider className={space.my6} />;
+};
+
+export default ExampleComponent;

utilities/docs/src/components/quick-resource/index.ts

@@ -0,0 +1,6 @@
+export type {
+  QuickResourceProps,
+  QuickResourceCopyTextProps,
+  QuickResourceLinkProps,
+} from './quick-resource.types';
+export { QuickResource, isCopyResource, isLinkResource } from './quick-resource';

utilities/docs/src/components/quick-resource/quick-resource.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import type { FC } from 'react';
+import { ResourceChip } from '@microsoft/arbutus.resource-chip';
+import { useCopyToClipboard } from '@microsoft/arbutus.use-copy-to-clipboard';
+
+import type {
+  QuickResourceCopyTextProps,
+  QuickResourceLinkProps,
+  QuickResourceProps,
+} from './quick-resource.types';
+
+export const isCopyResource = (
+  resource: QuickResourceProps['data'],
+): resource is { copyText: string } => {
+  return 'copyText' in resource;
+};
+
+export const isLinkResource = (
+  resource: QuickResourceProps['data'],
+): resource is { label: string; url: string; type: 'figma' | 'storybook' } => {
+  return 'label' in resource && 'url' in resource && 'type' in resource;
+};
+
+const QuickResourceCopyText: FC<QuickResourceCopyTextProps> = ({
+  copyText,
+  className,
+}) => {
+  const { copy: copyPackageName, status } = useCopyToClipboard();
+
+  const handleCopyPackageName = () => copyPackageName(copyText ?? '');
+  console.log('QuickResourceCopyText', copyText);
+  return (
+    <ResourceChip
+      text={copyText}
+      actionIconName={status === 'ready' ? 'copy' : 'check'}
+      onClick={handleCopyPackageName}
+      className={className}
+    />
+  );
+};
+
+const QuickResourceLink: FC<QuickResourceLinkProps> = ({
+  label,
+  url,
+  type,
+  className,
+}) => {
+  const handleClick = () => window.open(url, '_blank');
+
+  return (
+    <ResourceChip
+      text={label}
+      actionIconName="link"
+      onClick={handleClick}
+      logoName={type}
+      logoLabel={type}
+      className={className}
+    />
+  );
+};
+
+export const QuickResource: FC<QuickResourceProps> = ({ data, className }) => {
+  isCopyResource(data) && console.log('isCopyResource', data);
+  isLinkResource(data) && console.log('isLinkResource', data);
+  if (isCopyResource(data)) {
+    return <QuickResourceCopyText copyText={data.copyText} className={className} />;
+  }
+
+  if (isLinkResource(data)) {
+    return (
+      <QuickResourceLink
+        label={data.label}
+        url={data.url}
+        type={data.type}
+        className={className}
+      />
+    );
+  }
+
+  return null;
+};

utilities/docs/src/components/quick-resource/quick-resource.types.ts

@@ -0,0 +1,16 @@
+export type QuickResourceCopyTextProps = {
+  copyText: string;
+  className?: string;
+};
+
+export type QuickResourceLinkProps = {
+  label: string;
+  url: string;
+  type: 'figma' | 'storybook';
+  className?: string;
+};
+
+export type QuickResourceProps = {
+  data: QuickResourceLinkProps | QuickResourceCopyTextProps;
+  className?: string;
+};

utilities/docs/src/content/pages/components.atoms.badge.json

@@ -3,8 +3,16 @@
   "_path": "/components/atoms/badge",
   "title": "Badge",
   "definition": "Badge is a small, circular component that aids in visualizing status or metadata.  They serve as a visual indicator that attracts the user’s attention to new or important items, like warnings or updates. Badge’s appearance can be customized to match its semantic context.",
-  "packageName": "@microsoft/blueprints.badge",
-  "figmaLink": "https://www.figma.com/file/V2bt7PbLPJEDXCEIcUwrEa/Fluent-Blueprints-UI-Kit?type=design&node-id=1014%3A3408&mode=design&t=2XPOSCIx96AOt7qn-1",
+  "quickResources": [
+    {
+      "label": "FigmaToolkit",
+      "url": "https://www.figma.com/file/V2bt7PbLPJEDXCEIcUwrEa/Fluent-Blueprints-UI-Kit?type=design&node-id=1014%3A3408&mode=design&t=2XPOSCIx96AOt7qn-1",
+      "type": "figma"
+    },
+    {
+      "copyText": "@microsoft/blueprints.badge"
+    }
+  ],
   "owners": [
     {
       "firstName": "Ria",

utilities/docs/src/content/pages/components.atoms.button.json

@@ -3,8 +3,16 @@
   "_path": "/components/atoms/button",
   "title": "Button",
   "definition": "A button triggers a single action or event. Use buttons for important actions like submitting a response, committing a change, or moving to the next step. For navigating to another place, try a link instead.",
-  "packageName": "@microsoft/blueprints.button",
-  "figmaLink": "https://www.figma.com/file/V2bt7PbLPJEDXCEIcUwrEa/Fluent-Blueprints-UI-Kit?type=design&node-id=1015%3A4009&mode=design&t=6bKJpme0RA4u7J7O-1",
+  "quickResources": [
+    {
+      "label": "FigmaToolkit",
+      "url": "https://www.figma.com/file/V2bt7PbLPJEDXCEIcUwrEa/Fluent-Blueprints-UI-Kit?type=design&node-id=1015%3A4009&mode=design&t=6bKJpme0RA4u7J7O-1",
+      "type": "figma"
+    },
+    {
+      "copyText": "@microsoft/blueprints.button"
+    }
+  ],
   "owners": [
     {
       "firstName": "Eric",

utilities/docs/src/content/pages/components.atoms.divider.json

@@ -1,8 +1,18 @@
 {
-  "_layout": "work-in-progress",
+  "_layout": "reference",
   "_path": "/components/atoms/divider",
   "title": "Divider",
-  "definition": "This is a reference page.",
+  "definition": "A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.",
+  "quickResources": [
+    {
+      "label": "FigmaToolkit",
+      "url": "https://www.figma.com/file/V2bt7PbLPJEDXCEIcUwrEa/Fluent-Blueprints-UI-Kit?type=design&node-id=1015%3A4238&mode=design&t=3rGg7nFlwugHKss7-1",
+      "type": "figma"
+    },
+    {
+      "copyText": "@microsoft/blueprints.divider"
+    }
+  ],
   "owners": [
     {
       "firstName": "Eric",
@@ -23,12 +33,42 @@
       "content": [
         {
           "contentComponentId": "blocks.heading",
-          "as": "h1",
-          "title": "Usage",
-          "leading": " Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+          "as": "h2",
           "size": "title",
+          "title": "Anatomy",
+          "withCopyLink": false,
+          "withDivider": false
+        },
+        {
+          "contentComponentId": "blocks.anatomy",
+          "embedUrl": "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F64ExCVDx6H3T3jgqKsyzaj%2FAnatomy%3Ftype%3Ddesign%26node-id%3D201%253A25%26mode%3Ddesign%26t%3DZ2NIXNmWWsLoRC8O-1",
+          "listItems": [
+            {
+              "headline": "Separator line",
+              "text": "A horizontal line that separates content. It uses the theme’s neutral stroke 1 color."
+            }
+          ]
+        },
+        {
+          "contentComponentId": "blocks.heading",
+          "as": "h2",
+          "size": "title",
+          "title": "Variants and Examples",
+          "withCopyLink": false,
+          "withDivider": false
+        },
+        {
+          "contentComponentId": "blocks.heading",
+          "as": "h3",
+          "size": "headline",
+          "title": "Base Example",
           "withCopyLink": false,
           "withDivider": false
+        },
+        {
+          "contentComponentId": "blocks.component-preview",
+          "exampleFile": "divider-basic.example.tsx",
+          "withMenu": true
         }
       ]
     },
@@ -37,12 +77,18 @@
       "content": [
         {
           "contentComponentId": "blocks.heading",
-          "as": "h1",
-          "title": "Design",
-          "leading": " Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+          "as": "h2",
           "size": "title",
+          "title": "Guidance",
           "withCopyLink": false,
           "withDivider": false
+        },
+        {
+          "contentComponentId": "blocks.embed",
+          "type": "figma",
+          "size": "large",
+          "title": "Divider UI kit",
+          "url": "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FV2bt7PbLPJEDXCEIcUwrEa%2FFluent-Blueprints-UI-Kit%3Ftype%3Ddesign%26node-id%3D1015%253A4238%26mode%3Ddesign%26t%3D3rGg7nFlwugHKss7-1"
         }
       ]
     },
@@ -51,17 +97,32 @@
       "content": [
         {
           "contentComponentId": "blocks.heading",
-          "as": "h1",
-          "title": "Develop",
-          "leading": " Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+          "as": "h2",
+          "size": "title",
+          "title": "Sandbox",
+          "withCopyLink": false,
+          "withDivider": false
+        },
+        {
+          "contentComponentId": "blocks.sandbox",
+          "codeFile": "divider-basic.example.tsx",
+          "dependencies": [
+            "@microsoft/arbutus.divider",
+            "@microsoft/arbutus.use-space-styles"
+          ]
+        },
+        {
+          "contentComponentId": "blocks.heading",
+          "as": "h2",
           "size": "title",
+          "title": "Properties",
           "withCopyLink": false,
           "withDivider": false
         },
         {
           "contentComponentId": "blocks.prop-table",
-          "componentName": "DemoComponent",
-          "componentPropType": "DemoComponentProps"
+          "componentName": "Divider",
+          "componentPropType": "DividerProps"
         }
       ]
     }