feat: Vertical divider variant

modules/preview-react/divider/lib/Divider.tsx

@@ -13,24 +13,55 @@ export const dividerStencil = createStencil({
   vars: {
     space: '',
   },
-  base: ({space}) => {
-    return {
-      display: 'block',
-      height: px2rem(1),
-      border: 'none',
-      borderBlockStart: `1px solid ${system.legacy.color.border.default}`,
-      margin: `${calc.divide(cssVar(space, system.legacy.gap.xs), 2)} 0`,
-    };
+  base: {
+    border: 'none',
+  },
+  modifiers: {
+    /**
+     * Sets the orientation of the `Divider`.
+     * * `horizontal` - renders a horizontal rule with the `space` prop applied to the top and bottom margins.
+     * * `vertical` - renders a vertical rule with the `space` prop applied to the left and right margins. It
+     *   stretches to fill the height of its container, so it should be placed inside an element with a defined
+     *   height (e.g. a flex or grid container).
+     *
+     * @default 'horizontal'
+     */
+    orientation: {
+      horizontal: ({space}) => ({
+        display: 'block',
+        height: px2rem(1),
+        borderBlockStart: `1px solid ${system.legacy.color.border.default}`,
+        margin: `${calc.divide(cssVar(space, system.legacy.gap.xs), 2)} 0`,
+      }),
+      vertical: ({space}) => ({
+        display: 'inline-block',
+        alignSelf: 'stretch',
+        width: px2rem(1),
+        height: 'auto',
+        borderInlineStart: `1px solid ${system.legacy.color.border.default}`,
+        margin: `0 ${calc.divide(cssVar(space, system.legacy.gap.xs), 2)}`,
+      }),
+    },
   },
 });
 
 export interface DividerProps extends CSProps {
   /**
-   * Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.
-   * E.g. `space="2rem"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.
+   * Applies margin evenly to both ends of the `Divider`. It divides the provided value by two and applies half to each end.
+   * For a `horizontal` `Divider` this is the top and bottom margin, and for a `vertical` `Divider` it is the left and right margin.
+   * E.g. `space="2rem"` would apply `1rem` margin to each end.
    * @default `system.gap.md` (1rem)
    */
   space?: string;
+  /**
+   * Sets the orientation of the `Divider`.
+   * * `horizontal` - renders a horizontal rule to segment stacked content.
+   * * `vertical` - renders a vertical rule to segment content laid out in a row. The `Divider` stretches to fill
+   *   the height of its container, so it should be placed inside an element with a defined height (e.g. a flex or
+   *   grid container).
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
 }
 
 /**
@@ -39,8 +70,8 @@ export interface DividerProps extends CSProps {
  *
  * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)
  *
- * The `space` prop will equally apply top and bottom margin styles.
- * In the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
+ * The `space` prop will equally apply margin styles to both ends of the `Divider`.
+ * In the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom.
  *
  * @example
  * ```tsx
@@ -49,11 +80,18 @@ export interface DividerProps extends CSProps {
  *
  * <Divider space={system.gap.xs} />
  *
+ * // vertical
+ * <Divider orientation="vertical" />
+ *
  * ```
  */
 export const Divider = createComponent('hr')({
   displayName: 'Divider',
-  Component: ({space, ...elemProps}: DividerProps, ref, Element) => (
-    <Element ref={ref} {...handleCsProp(elemProps, dividerStencil({space}))} />
+  Component: ({space, orientation = 'horizontal', ...elemProps}: DividerProps, ref, Element) => (
+    <Element
+      ref={ref}
+      {...handleCsProp(elemProps, dividerStencil({space, orientation}))}
+      aria-orientation={orientation}
+    />
   ),
 });

modules/preview-react/divider/stories/Divider.mdx

@@ -3,6 +3,7 @@ import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-d
 
 import * as Divider from './Divider.stories.ts';
 import {Basic} from './examples/Basic';
+import {Vertical} from './examples/Vertical';
 import {CustomSpace} from './examples/CustomSpace';
 
 <Meta title="Preview/Divider" component={Divider} />
@@ -33,6 +34,10 @@ bottom margin.
 
 <ExampleCodeBlock code={Basic} />
 
+### Vertical Example
+
+<ExampleCodeBlock code={Vertical} />
+
 ### Custom Space
 
 You might also want to apply custom space to `Divider` where the top and bottom margin are not

modules/preview-react/divider/stories/Divider.stories.ts

@@ -5,6 +5,7 @@ import {Divider} from '@workday/canvas-kit-preview-react/divider';
 import mdxDoc from './Divider.mdx';
 import {Basic as BasicExample} from './examples/Basic';
 import {CustomSpace as CustomSpaceExample} from './examples/CustomSpace';
+import {Vertical as VerticalExample} from './examples/Vertical';
 
 export default {
   title: 'Preview/Divider',
@@ -25,3 +26,7 @@ export const Basic: Story = {
 export const CustomSpace: Story = {
   render: CustomSpaceExample,
 };
+
+export const Vertical: Story = {
+  render: VerticalExample,
+};

modules/preview-react/divider/stories/examples/Basic.tsx

@@ -28,40 +28,39 @@ const maintainerList = [
   {
     id: '44883293',
     name: 'Josh Bagwell',
-    bio: 'Software Development Engineer',
+    bio: 'Master of Cocktails and Fast Cars',
   },
   {
     id: '338257',
     name: 'Nicholas Boll',
-    bio: 'Principal Software Development Engineer',
+    bio: 'Principal Potato Engineer',
   },
   {
     id: '7966550',
     name: 'Manuel Carrera',
-    bio: 'Sr. Software Development Engineer',
+    bio: 'Sr. Rock Climber and Artist',
   },
   {
     id: '146020',
     name: 'James Fan',
-    bio: 'Sr. Software Development Engineer',
+    bio: 'Sr. Television Consultant',
   },
   {
     id: '48605821',
     name: 'Raisa Primerova',
-    bio: 'Software Development Engineer',
+    bio: 'Principal Borscht Connoisseur',
   },
   {
     id: '4818182',
     name: 'Alan Smith',
-    bio: 'Principal Software Development Engineer',
+    bio: 'Principal Pizza Tosser',
   },
 ];
 
 const profileCardStyles = createStyles({
-  display: 'grid',
-  gridGap: '0.5rem',
-  gridTemplateColumns: '5rem 1fr',
-  gridTemplateRows: '1fr 1fr',
+  display: 'flex',
+  gap: '0.5rem',
+  flexDirection: 'row',
 });
 
 const profileCardAvatarStyles = createStyles({
@@ -84,6 +83,12 @@ const profileCardBodyStyles = createStyles({
   margin: 0,
 });
 
+const profileCardContentStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.gap.xs,
+});
+
 interface ProfileCardProps {
   id: string;
   name: string;
@@ -93,12 +98,14 @@ interface ProfileCardProps {
 const ProfileCard = ({id, name, bio}: ProfileCardProps) => (
   <div className={profileCardStyles}>
     <Avatar
-      size="extraLarge"
+      size="large"
       url={`https://avatars.githubusercontent.com/u/${id}?v=4`}
       name={`${name}'s avatar`}
       className={profileCardAvatarStyles}
     />
-    <h3 className={profileCardHeadingStyles}>{name}</h3>
-    <p className={profileCardBodyStyles}>{bio}</p>
+    <div className={profileCardContentStyles}>
+      <h3 className={profileCardHeadingStyles}>{name}</h3>
+      <p className={profileCardBodyStyles}>{bio}</p>
+    </div>
   </div>
 );

modules/preview-react/divider/stories/examples/Vertical.tsx

@@ -0,0 +1,50 @@
+import {Divider} from '@workday/canvas-kit-preview-react/divider';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const rowStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  height: system.size.xxl,
+});
+
+const statStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.gap.none,
+});
+
+const labelStyles = createStyles({
+  ...system.type.subtext.medium,
+  color: system.color.fg.default,
+  margin: 0,
+});
+
+const valueStyles = createStyles({
+  ...system.type.body.large,
+  fontWeight: system.fontWeight.bold,
+  margin: 0,
+});
+
+export const Vertical = () => {
+  const lastIndex = stats.length - 1;
+  return (
+    <div className={rowStyles}>
+      {stats.map((stat, index) => (
+        <>
+          <div className={statStyles}>
+            <p className={labelStyles}>{stat.label}</p>
+            <p className={valueStyles}>{stat.value}</p>
+          </div>
+          {index !== lastIndex && <Divider orientation="vertical" space={system.gap.md} />}
+        </>
+      ))}
+    </div>
+  );
+};
+
+const stats = [
+  {label: 'Components', value: '128'},
+  {label: 'Contributors', value: '64'},
+  {label: 'Releases', value: '512'},
+];