@workday/canvas-kit-docs 7.2.9 → 7.3.0-next.0

package/dist/commonjs/lib/specs.js

@@ -1225,6 +1225,68 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "ExpandableContainer.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "ExpandableContainer",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Labs/Expandable/React, Long Title] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-expanded set to false"
+              },
+              {
+                "type": "it",
+                "name": "should not show expanded content"
+              },
+              {
+                "type": "describe",
+                "name": "when the container is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should set aria-expanded to true"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should show expanded content"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should have an aria-controls attribute pointing to the id of content"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the container is clicked again",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should hide expanded content"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should have aria-expanded set to false"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "FormField.spec.ts",

package/dist/es6/lib/specs.js

@@ -1225,6 +1225,68 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "ExpandableContainer.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "ExpandableContainer",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Labs/Expandable/React, Long Title] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-expanded set to false"
+              },
+              {
+                "type": "it",
+                "name": "should not show expanded content"
+              },
+              {
+                "type": "describe",
+                "name": "when the container is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should set aria-expanded to true"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should show expanded content"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should have an aria-controls attribute pointing to the id of content"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the container is clicked again",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should hide expanded content"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should have aria-expanded set to false"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "FormField.spec.ts",

package/dist/mdx/labs-react/expandable/Expandable.mdx

@@ -0,0 +1,152 @@
+import {Specifications} from '@workday/canvas-kit-docs';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+
+import StartIcon from './examples/StartIcon';
+import EndIcon from './examples/EndIcon';
+import Avatar from './examples/Avatar';
+import Depth from './examples/Depth';
+import RTL from './examples/RTL';
+import LongTitle from './examples/LongTitle';
+
+
+# Canvas Kit Expandable
+
+`Expandable` is a compound component that creates a header to expand or collapse related content.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-labs-react
+```
+
+## Usage
+
+### Start Icon
+
+For a basic expandable container with a chevron icon before the title, place`Expandable.Icon`
+before `Expandable.Title` as children of `Expandable.Target` and pass the `iconPosition` prop to
+`Expandable.Icon` with a value of `start`. `Expandable.Icon` will use a right chevron icon
+when collapsed and a down chevron icon when expanded.
+
+<ExampleCodeBlock code={StartIcon} />
+
+### End Icon
+
+For an expandable container with a chevron icon after the title, place `Expandable.Title`
+before `Expandable.Icon` as children of `Expandable.Target` and pass the `iconPosition` prop to
+`Expandable.Icon` with a value of `end`. `Expandable.Icon` will use a down chevron icon
+when collapsed and an up chevron icon when expanded.
+
+<ExampleCodeBlock code={EndIcon} />
+
+### With Avatar
+
+To include an avatar image, `Expandable.Avatar` should be placed between `Expandable.Icon` and
+`Expandable.Title`. An `iconPosition` prop with a value of either `start` or `end` should be
+passed to `Expandable.Icon` depending on whether the `Expandable.Icon` is placed before or after
+`Expandable.Title`.
+
+<ExampleCodeBlock code={Avatar} />
+
+### Right to Left (RTL)
+
+Expandable container has bidirectional support and should function as expected with RTL languages
+as long as the content direction is set in your Canvas theme.
+
+<ExampleCodeBlock code={RTL} />
+
+### Depth
+
+The `depth` prop passed to `Expandable` allows you to adjust the visual elevation of a component
+using our depth tokens.
+
+<ExampleCodeBlock code={Depth} />
+
+### Title Wrap
+
+Long titles will wrap to the next line and increase the height of the container.
+
+<ExampleCodeBlock code={LongTitle} />
+
+## Components
+
+### Expandable
+
+#### Usage
+
+`Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a
+`DisclosureModel` for its sub components. Alternatively, a model may be passed in using the hoisted
+model pattern.
+
+#### Props
+
+<!-- <ArgsTable of={Expandable} /> -->
+
+### Expandable.Target
+
+#### Usage
+
+`Expandable.Target` creates a heading and a button. The heading is a semantic heading to describe
+the associated content. The button provides users the ability to toggle the associated content.
+
+As according to the
+[W3 disclosure specification](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure), the button
+has `aria-expanded` and `aria-controls` attributes set by default
+
+This component should hold an `Expandable.Icon`, an optional `Expandable.Avatar`, and an
+`Expandable.Title`.
+
+#### Props
+
+`headingLevel` is the only prop spread to the underlying heading. All other props are spread to the
+button.
+
+<!-- <ArgsTable of={Expandable.Target} /> -->
+
+### Expandable.Title
+
+#### Usage
+
+`Expandable.Title` styles the target text that describes the content.
+
+#### Props
+
+<!-- <ArgsTable of={Expandable.Title} /> -->
+
+### Expandable.Icon
+
+#### Usage
+
+`Expandable.Icon` creates an icon to visually indicate the state of the content. It takes an
+`iconPosition` prop to determine which chevron icon to use.
+
+#### Props
+
+`iconPosition` takes a value of either `start` or `end`. If no value is provided, it will default to
+`start`. Given a value of `start` it will use a chevron that points down when the container is
+expanded and right when the container is collapsed. Given a value of `end`, it will use a chevron
+that points up when the container is expanded and down when the container is collapsed.
+
+<!-- <ArgsTable of={Expandable.Icon} /> -->
+
+### Expandable.Avatar
+
+#### Usage
+
+`Expandable.Avatar` is an optional component that creates an `Avatar` to display a decorative image.
+
+#### Props
+
+<!-- <ArgsTable of={Expandable.Avatar} /> -->
+
+### Expandable.Content
+
+#### Usage
+
+`Expandable.Content` holds the content that will be conditionally expanded and collapsed. It has an
+`id` to ensure the `Expandable.Target` properly set it to the `aria-controls` attribute.
+
+#### Props
+
+<!-- <ArgsTable of={Expandable.Content} /> -->

package/dist/mdx/labs-react/expandable/examples/Avatar.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+// @ts-ignore: Cannot find module error
+import testAvatar from './test-avatar.png';
+
+export default () => (
+  <>
+    <Expandable>
+      <Expandable.Target headingLevel="h4">
+        <Expandable.Icon iconPosition="start" />
+        <Expandable.Avatar url={testAvatar} />
+        <Expandable.Title>Title</Expandable.Title>
+      </Expandable.Target>
+
+      <Expandable.Content>Content</Expandable.Content>
+    </Expandable>
+    <Expandable>
+      <Expandable.Target headingLevel="h4">
+        <Expandable.Avatar url={testAvatar} />
+        <Expandable.Title>Title</Expandable.Title>
+        <Expandable.Icon iconPosition="end" />
+      </Expandable.Target>
+
+      <Expandable.Content>Content</Expandable.Content>
+    </Expandable>
+  </>
+);

package/dist/mdx/labs-react/expandable/examples/Depth.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  return (
+    <Expandable borderRadius="l" depth={3} margin="xxxs" padding="xs">
+      <Expandable.Target headingLevel="h4">
+        <Expandable.Title>Additional Information</Expandable.Title>
+        <Expandable.Icon iconPosition="end" />
+      </Expandable.Target>
+
+      <Expandable.Content>This Expandable Container has a depth of 3.</Expandable.Content>
+    </Expandable>
+  );
+};

package/dist/mdx/labs-react/expandable/examples/EndIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+
+export default () => (
+  <Expandable>
+    <Expandable.Target headingLevel="h4">
+      <Expandable.Title>Title</Expandable.Title>
+      <Expandable.Icon iconPosition="end" />
+    </Expandable.Target>
+
+    <Expandable.Content>Content</Expandable.Content>
+  </Expandable>
+);

package/dist/mdx/labs-react/expandable/examples/LongTitle.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+// @ts-ignore: Cannot find module error
+import testAvatar from './test-avatar.png';
+
+export default () => (
+  <Expandable>
+    <Expandable.Target aria-label="expand container" headingLevel="h4">
+      <Expandable.Icon iconPosition="start" />
+      <Expandable.Avatar url={testAvatar} />
+      <Expandable.Title>
+        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
+        onions, and oregano.
+      </Expandable.Title>
+    </Expandable.Target>
+
+    <Expandable.Content>Content</Expandable.Content>
+  </Expandable>
+);

package/dist/mdx/labs-react/expandable/examples/RTL.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <Expandable>
+        <Expandable.Target headingLevel="h4">
+          <Expandable.Icon iconPosition="start" />
+          <Expandable.Avatar />
+          <Expandable.Title>Title</Expandable.Title>
+        </Expandable.Target>
+
+        <Expandable.Content>Content</Expandable.Content>
+      </Expandable>
+      <Expandable>
+        <Expandable.Target headingLevel="h4">
+          <Expandable.Avatar />
+          <Expandable.Title>Title</Expandable.Title>
+          <Expandable.Icon iconPosition="end" />
+        </Expandable.Target>
+
+        <Expandable.Content>Content</Expandable.Content>
+      </Expandable>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/labs-react/expandable/examples/StartIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+
+export default () => (
+  <Expandable>
+    <Expandable.Target headingLevel="h4">
+      <Expandable.Icon iconPosition="start" />
+      <Expandable.Title>Title</Expandable.Title>
+    </Expandable.Target>
+
+    <Expandable.Content>Content</Expandable.Content>
+  </Expandable>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.2.9",
+  "version": "7.3.0-next.0+0ec455ac",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.2.9"
+    "@workday/canvas-kit-react": "^7.3.0-next.0+0ec455ac"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "10fdd8aac753193953d6a7c9ea9756286032e2f9"
+  "gitHead": "0ec455ac3784594025a176e8f569b97deab5e0d4"
 }