@transferwise/components 0.0.0-experimental-1bc0453 → 0.0.0-experimental-9956441

package/build/divider/Divider.js

@@ -5,8 +5,8 @@ require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 const Divider = ({
-  as = 'div',
   className,
+  isContent = false,
   testId,
   variant = 'section',
   ...props
@@ -20,7 +20,7 @@ const Divider = ({
     ...commonProps,
     role: 'presentation'
   };
-  return as === 'hr' ? /*#__PURE__*/jsxRuntime.jsx("hr", {
+  return isContent ? /*#__PURE__*/jsxRuntime.jsx("hr", {
     ...commonProps,
     ...props
   }) : /*#__PURE__*/jsxRuntime.jsx("div", {

package/build/divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /** Option prop to specify if the Divider is an `<hr />` or `<div />` */\n  as?: 'hr' | 'div';\n\n  /** Optional prop to specify classNames onto the Divider */\n  className?: string;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n\n  /** Optional prop to specify the variant of the Divider */\n  variant?: 'content' | 'subsection' | 'section';\n}\n\n/**\n * Divider component\n *\n * The Divider component is used to visually separate different sections of content.\n * It can be rendered as a horizontal line and supports various styles such as\n * section, subsection, and content. Additionally, the Divider can include custom styles.\n *\n * @component\n * @param {boolean} [isContent=false] - Option prop to specify if the Divider is for content or presentation.\n * @param {string} [className] - Optional prop to specify classNames onto the Divider.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n * @param {'section' | 'subsection' | 'content'} [variant='section'] - Optional prop to specify the variant of the Divider.\n *\n * @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  as = 'div',\n  className,\n  testId,\n  variant = 'section',\n  ...props\n}) => {\n  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';\n\n  const commonProps = {\n    className: clsx('wds-Divider', variantClass, className),\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    role: 'presentation',\n  };\n\n  return as === 'hr' ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","as","className","testId","variant","props","variantClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;;;AAiCMA,MAAAA,OAAO,GAAoCA,CAAC;AAChDC,EAAAA,EAAE,GAAG,KAAK;EACVC,SAAS;EACTC,MAAM;AACNC,EAAAA,OAAO,GAAG,SAAS;EACnB,GAAGC,KAAAA;AAAK,CACT,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGF,OAAO,IAAIA,OAAO,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,OAAO,CAAE,CAAA,GAAG,EAAE,CAAA;AAEtF,EAAA,MAAMG,WAAW,GAAG;IAClBL,SAAS,EAAEM,SAAI,CAAC,aAAa,EAAEF,YAAY,EAAEJ,SAAS,CAAC;AACvD,IAAA,aAAa,EAAEC,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE,cAAA;GACP,CAAA;AAED,EAAA,OAAOT,EAAE,KAAK,IAAI,gBAAGU,cAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF,KAAAA;GAAM,CAAG,gBAAGM,cAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ,KAAAA;AAAK,IAAI,CAAA;AAC5F;;;;"}
+{"version":3,"file":"Divider.js","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /**\n   * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.\n   * Otherwise, a non-semantic `<div role=\"presentation\">` is used for purely visual separation.\n   * @default false\n   */\n  isContent?: boolean;\n\n  /**\n   * Appends additional class names to style the `Divider`.\n   */\n  className?: string;\n\n  /**\n   * Provides a `data-testid` attribute for testing.\n   */\n  testId?: string;\n\n  /**\n   * Alters the visual style of the divider, accommodating different types\n   * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.\n   * @default 'section'\n   */\n  variant?: 'section' | 'subsection' | 'content';\n}\n\n/**\n * @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  className,\n  isContent = false,\n  testId,\n  variant = 'section',\n  ...props\n}) => {\n  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';\n\n  const commonProps = {\n    className: clsx('wds-Divider', variantClass, className),\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    role: 'presentation',\n  };\n\n  return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","className","isContent","testId","variant","props","variantClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;;;AAiCMA,MAAAA,OAAO,GAAoCA,CAAC;EAChDC,SAAS;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,MAAM;AACNC,EAAAA,OAAO,GAAG,SAAS;EACnB,GAAGC,KAAAA;AAAK,CACT,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGF,OAAO,IAAIA,OAAO,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,OAAO,CAAE,CAAA,GAAG,EAAE,CAAA;AAEtF,EAAA,MAAMG,WAAW,GAAG;IAClBN,SAAS,EAAEO,SAAI,CAAC,aAAa,EAAEF,YAAY,EAAEL,SAAS,CAAC;AACvD,IAAA,aAAa,EAAEE,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE,cAAA;GACP,CAAA;EAED,OAAOR,SAAS,gBAAGS,cAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF,KAAAA;GAAS,CAAA,gBAAGM,cAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ,KAAAA;AAAK,IAAI,CAAA;AAC1F;;;;"}

package/build/divider/Divider.mjs

@@ -3,8 +3,8 @@ import 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const Divider = ({
-  as = 'div',
   className,
+  isContent = false,
   testId,
   variant = 'section',
   ...props
@@ -18,7 +18,7 @@ const Divider = ({
     ...commonProps,
     role: 'presentation'
   };
-  return as === 'hr' ? /*#__PURE__*/jsx("hr", {
+  return isContent ? /*#__PURE__*/jsx("hr", {
     ...commonProps,
     ...props
   }) : /*#__PURE__*/jsx("div", {

package/build/divider/Divider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.mjs","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /** Option prop to specify if the Divider is an `<hr />` or `<div />` */\n  as?: 'hr' | 'div';\n\n  /** Optional prop to specify classNames onto the Divider */\n  className?: string;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n\n  /** Optional prop to specify the variant of the Divider */\n  variant?: 'content' | 'subsection' | 'section';\n}\n\n/**\n * Divider component\n *\n * The Divider component is used to visually separate different sections of content.\n * It can be rendered as a horizontal line and supports various styles such as\n * section, subsection, and content. Additionally, the Divider can include custom styles.\n *\n * @component\n * @param {boolean} [isContent=false] - Option prop to specify if the Divider is for content or presentation.\n * @param {string} [className] - Optional prop to specify classNames onto the Divider.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n * @param {'section' | 'subsection' | 'content'} [variant='section'] - Optional prop to specify the variant of the Divider.\n *\n * @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  as = 'div',\n  className,\n  testId,\n  variant = 'section',\n  ...props\n}) => {\n  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';\n\n  const commonProps = {\n    className: clsx('wds-Divider', variantClass, className),\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    role: 'presentation',\n  };\n\n  return as === 'hr' ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","as","className","testId","variant","props","variantClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;AAiCMA,MAAAA,OAAO,GAAoCA,CAAC;AAChDC,EAAAA,EAAE,GAAG,KAAK;EACVC,SAAS;EACTC,MAAM;AACNC,EAAAA,OAAO,GAAG,SAAS;EACnB,GAAGC,KAAAA;AAAK,CACT,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGF,OAAO,IAAIA,OAAO,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,OAAO,CAAE,CAAA,GAAG,EAAE,CAAA;AAEtF,EAAA,MAAMG,WAAW,GAAG;IAClBL,SAAS,EAAEM,IAAI,CAAC,aAAa,EAAEF,YAAY,EAAEJ,SAAS,CAAC;AACvD,IAAA,aAAa,EAAEC,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE,cAAA;GACP,CAAA;AAED,EAAA,OAAOT,EAAE,KAAK,IAAI,gBAAGU,GAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF,KAAAA;GAAM,CAAG,gBAAGM,GAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ,KAAAA;AAAK,IAAI,CAAA;AAC5F;;;;"}
+{"version":3,"file":"Divider.mjs","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n  /**\n   * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.\n   * Otherwise, a non-semantic `<div role=\"presentation\">` is used for purely visual separation.\n   * @default false\n   */\n  isContent?: boolean;\n\n  /**\n   * Appends additional class names to style the `Divider`.\n   */\n  className?: string;\n\n  /**\n   * Provides a `data-testid` attribute for testing.\n   */\n  testId?: string;\n\n  /**\n   * Alters the visual style of the divider, accommodating different types\n   * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.\n   * @default 'section'\n   */\n  variant?: 'section' | 'subsection' | 'content';\n}\n\n/**\n * @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n  className,\n  isContent = false,\n  testId,\n  variant = 'section',\n  ...props\n}) => {\n  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';\n\n  const commonProps = {\n    className: clsx('wds-Divider', variantClass, className),\n    'data-testid': testId,\n  };\n\n  const divProps = {\n    ...commonProps,\n    role: 'presentation',\n  };\n\n  return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","className","isContent","testId","variant","props","variantClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;AAiCMA,MAAAA,OAAO,GAAoCA,CAAC;EAChDC,SAAS;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,MAAM;AACNC,EAAAA,OAAO,GAAG,SAAS;EACnB,GAAGC,KAAAA;AAAK,CACT,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGF,OAAO,IAAIA,OAAO,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,OAAO,CAAE,CAAA,GAAG,EAAE,CAAA;AAEtF,EAAA,MAAMG,WAAW,GAAG;IAClBN,SAAS,EAAEO,IAAI,CAAC,aAAa,EAAEF,YAAY,EAAEL,SAAS,CAAC;AACvD,IAAA,aAAa,EAAEE,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE,cAAA;GACP,CAAA;EAED,OAAOR,SAAS,gBAAGS,GAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF,KAAAA;GAAS,CAAA,gBAAGM,GAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ,KAAAA;AAAK,IAAI,CAAA;AAC1F;;;;"}

package/build/types/divider/Divider.d.ts

@@ -1,27 +1,27 @@
 import { FunctionComponent } from 'react';
 export interface DividerProps {
-    /** Option prop to specify if the Divider is an `<hr />` or `<div />` */
-    as?: 'hr' | 'div';
-    /** Optional prop to specify classNames onto the Divider */
+    /**
+     * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.
+     * Otherwise, a non-semantic `<div role="presentation">` is used for purely visual separation.
+     * @default false
+     */
+    isContent?: boolean;
+    /**
+     * Appends additional class names to style the `Divider`.
+     */
     className?: string;
-    /** Optional prop to specify the ID used for testing */
+    /**
+     * Provides a `data-testid` attribute for testing.
+     */
     testId?: string;
-    /** Optional prop to specify the variant of the Divider */
-    variant?: 'content' | 'subsection' | 'section';
+    /**
+     * Alters the visual style of the divider, accommodating different types
+     * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.
+     * @default 'section'
+     */
+    variant?: 'section' | 'subsection' | 'content';
 }
 /**
- * Divider component
- *
- * The Divider component is used to visually separate different sections of content.
- * It can be rendered as a horizontal line and supports various styles such as
- * section, subsection, and content. Additionally, the Divider can include custom styles.
- *
- * @component
- * @param {boolean} [isContent=false] - Option prop to specify if the Divider is for content or presentation.
- * @param {string} [className] - Optional prop to specify classNames onto the Divider.
- * @param {string} [testId] - Optional prop to specify the ID used for testing.
- * @param {'section' | 'subsection' | 'content'} [variant='section'] - Optional prop to specify the variant of the Divider.
- *
  * @see {@link Divider} for further information.
  * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}
  */

package/build/types/divider/Divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC3B,wEAAwE;IACxE,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAElB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;CAChD;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAoB5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;CAChD;AAED;;;GAGG;AACH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAoB5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-1bc0453",
+  "version": "0.0.0-experimental-9956441",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/divider/Divider.accessibility.docs.mdx

@@ -0,0 +1,61 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import { NavigationOption } from '..';
+import { Bulb } from '@transferwise/icons';
+
+<Meta title="Layouts/Divider/Accessibility" />
+
+# Accessibility
+
+A Divider is used to separate sections of content. While it doesn't directly announce anything to screen readers, there are a few considerations:
+
+<NavigationOption
+  media={<Bulb size={24} />}
+  title="Design guidance"
+  content="Before you start, please review the documentation on how separators should be used, announced or hidden from assistive tech."
+  href="https://wise.design/components/divider"
+/>
+
+<br />
+<br />
+
+## Using `<hr />` vs `<div />`
+
+By default, our Divider is rendered as `<div role="presentation" />`. However, you can optionally set `isContent` to true, which many screen readers interpret as a “separator.”
+
+<Source dark code={`
+// By default: non-semantic divider
+<Divider isContent={false} />
+
+// Alternatively, to provide a semantic HR:
+
+<Divider isContent={true} />
+`}/>
+
+Compared to a `<div>`, `<hr>` tells assistive technologies that a thematic break or separation has occurred. However, sometimes you may not want an audible separation. In that case, using `<div>` (which omits semantic meaning) might be preferable.
+
+<br />
+
+## Variants
+
+The Divider supports variants like “section”, “subsection”, or “content” to visually change the separation style:
+
+<Source
+  dark
+  code={`
+// A few variant examples
+<>
+  <Divider variant="section" />
+  <Divider variant="subsection" />
+  <Divider variant="content" />
+</>
+`}
+/>
+
+Screen readers generally ignore these visual styling changes unless you explicitly provide more context (e.g., additional text or heading tags).
+
+<br />
+
+**Additional resources:**
+
+1. [WAI-ARIA Authoring Practices: Separator Role](https://www.w3.org/TR/wai-aria-practices-1.2/#separator)
+2. [MDN Web Docs: &lt;hr /&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)

package/src/divider/Divider.spec.tsx

@@ -11,7 +11,6 @@ describe('Divider', () => {
 
   beforeEach(() => {
     const { rerender } = render(<Divider {...defaultProps} />);
-
     rerenderDivider = (props?: DividerProps) => {
       rerender(<Divider {...defaultProps} {...props} />);
     };
@@ -21,64 +20,46 @@ describe('Divider', () => {
     return render(<Divider {...props} />);
   };
 
-  it('renders', () => {
+  it('should render the Divider component', () => {
     expect(screen.getByTestId('test-divider')).toBeInTheDocument();
     expect(screen.getByTestId('test-divider')).toHaveClass('wds-Divider');
   });
 
-  it('renders as an `hr`', () => {
-    const props: DividerProps = {
-      as: 'hr',
-    };
-
+  it('should render as a semantic <hr> when `isContent` is true', () => {
+    const props: DividerProps = { isContent: true };
     rerenderDivider(props);
 
     expect(screen.getByTestId('test-divider')).not.toHaveAttribute('role', 'presentation');
   });
 
-  it('renders as a `div`', () => {
-    const props: DividerProps = {
-      as: 'div',
-    };
-
+  it('should render as a non-semantic <div> when `isContent` is false', () => {
+    const props: DividerProps = { isContent: false };
     rerenderDivider(props);
 
     expect(screen.getByTestId('test-divider')).toHaveAttribute('role', 'presentation');
   });
 
-  it('renders with a custom class', () => {
-    const props: DividerProps = {
-      className: 'custom-class',
-    };
-
+  it('should apply custom class names when provided', () => {
+    const props: DividerProps = { className: 'custom-class' };
     expect(screen.getByTestId('test-divider')).not.toHaveClass('custom-class');
 
     rerenderDivider(props);
-
     expect(screen.getByTestId('test-divider')).toHaveClass('custom-class');
   });
 
-  it('renders with content variant class', () => {
-    const props: DividerProps = {
-      variant: 'content',
-    };
-
+  it('should apply the "content" variant styling', () => {
+    const props: DividerProps = { variant: 'content' };
     expect(screen.getByTestId('test-divider')).not.toHaveClass('wds-Divider--content');
 
     rerenderDivider(props);
-
     expect(screen.getByTestId('test-divider')).toHaveClass('wds-Divider', 'wds-Divider--content');
   });
 
-  it('renders with subsection variant class', () => {
-    const props: DividerProps = {
-      variant: 'subsection',
-    };
-
+  it('should apply the "subsection" variant styling', () => {
+    const props: DividerProps = { variant: 'subsection' };
     expect(screen.getByTestId('test-divider')).not.toHaveClass('wds-Divider--subsection');
 
     rerenderDivider(props);
-
     expect(screen.getByTestId('test-divider')).toHaveClass(
       'wds-Divider',
       'wds-Divider--subsection',

package/src/divider/Divider.story.tsx

@@ -1,29 +1,132 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import Divider from './Divider';
 
+/**
+ * Wraps stories with a container (e.g., centered or padded).
+ * Adjust styles to your needs.
+ */
+const withContainer = (Story: any) => (
+  <div style={{ padding: '1rem' }}>
+    <Story />
+  </div>
+);
+
+/**
+ * Not all stories need access to all controls as it causes unnecessary UI noise.
+ */
+const hideControls = (args: string[]) => {
+  const hidden = ['variant', 'as', 'className', 'testId', ...args];
+
+  return Object.fromEntries(hidden.map((item) => [item, { table: { disable: true } }]));
+};
+
+/**
+ * The stories below document the `<Divider />` component, which can be rendered as either a semantic `<hr>` or a non-semantic `<div>`.
+ * Variants allow customization for different visual separation needs.
+ *
+ * For more details, please refer to the [design documentation](https://wise.design/components/divider).
+ *
+ *
+ */
 const meta: Meta<typeof Divider> = {
   component: Divider,
   title: 'Layouts/Divider',
   tags: ['autodocs'],
+  decorators: [withContainer],
   parameters: {
     actions: { argTypesRegex: null },
   },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['section', 'subsection', 'content'],
+      description: 'Choose the Divider variant.',
+      table: {
+        category: 'Appearance',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'section' },
+      },
+    },
+    isContent: {
+      control: 'boolean',
+      description: 'Render as a semantic <hr> (true) or non-semantic <div> (false).',
+      table: {
+        category: 'Appearance',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    className: {
+      description: 'Add custom class names to the Divider.',
+      table: {
+        category: 'Appearance',
+        type: { summary: 'string' },
+      },
+    },
+    testId: {
+      description: 'Add a data-testid attribute for testing.',
+      table: {
+        category: 'Testing',
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    isContent: false,
+    className: '',
+    testId: '',
+    variant: 'section',
+  },
 };
-
 export default meta;
+
 type Story = StoryObj<typeof Divider>;
 
-export const Basic: Story = {};
+export const Playground: Story = {
+  args: {
+    variant: 'section',
+  },
+  tags: ['!autodocs'],
+};
 
-export const Subsection: Story = {
+/**
+ * There are three different types of divider – `section`, `subsection`, and `content` –
+ * each designed to visually separate or group content. <br />
+ * [Design documentation](https://wise.design/components/divider)
+ */
+export const Variant: Story = {
+  argTypes: {
+    ...hideControls(['testId', 'className', 'isContent']),
+  },
   args: {
-    variant: 'subsection',
+    variant: 'section',
   },
 };
 
-export const Content: Story = {
+/**
+ * The `isContent` prop determines whether the divider is rendered as a semantic `<hr>` or a non-semantic `<div>`.
+ */
+export const ContentDivider: Story = {
+  argTypes: {
+    ...hideControls(['variant', 'testId', 'className']),
+  },
   args: {
-    variant: 'content',
+    isContent: true,
+  },
+};
+
+export const AllVariants: Story = {
+  render: function Render() {
+    return (
+      <>
+        <Divider variant="section" />
+        <Divider variant="subsection" />
+        <Divider variant="content" />
+      </>
+    );
+  },
+  argTypes: {
+    ...hideControls(['variant', 'testId', 'className', 'isContent']),
   },
+  tags: ['!autodocs'],
 };

package/src/divider/Divider.tsx

@@ -2,38 +2,38 @@ import { clsx } from 'clsx';
 import React, { FunctionComponent } from 'react';
 
 export interface DividerProps {
-  /** Option prop to specify if the Divider is an `<hr />` or `<div />` */
-  as?: 'hr' | 'div';
-
-  /** Optional prop to specify classNames onto the Divider */
+  /**
+   * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.
+   * Otherwise, a non-semantic `<div role="presentation">` is used for purely visual separation.
+   * @default false
+   */
+  isContent?: boolean;
+
+  /**
+   * Appends additional class names to style the `Divider`.
+   */
   className?: string;
 
-  /** Optional prop to specify the ID used for testing */
+  /**
+   * Provides a `data-testid` attribute for testing.
+   */
   testId?: string;
 
-  /** Optional prop to specify the variant of the Divider */
-  variant?: 'content' | 'subsection' | 'section';
+  /**
+   * Alters the visual style of the divider, accommodating different types
+   * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.
+   * @default 'section'
+   */
+  variant?: 'section' | 'subsection' | 'content';
 }
 
 /**
- * Divider component
- *
- * The Divider component is used to visually separate different sections of content.
- * It can be rendered as a horizontal line and supports various styles such as
- * section, subsection, and content. Additionally, the Divider can include custom styles.
- *
- * @component
- * @param {boolean} [isContent=false] - Option prop to specify if the Divider is for content or presentation.
- * @param {string} [className] - Optional prop to specify classNames onto the Divider.
- * @param {string} [testId] - Optional prop to specify the ID used for testing.
- * @param {'section' | 'subsection' | 'content'} [variant='section'] - Optional prop to specify the variant of the Divider.
- *
  * @see {@link Divider} for further information.
  * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}
  */
 const Divider: FunctionComponent<DividerProps> = ({
-  as = 'div',
   className,
+  isContent = false,
   testId,
   variant = 'section',
   ...props
@@ -50,7 +50,7 @@ const Divider: FunctionComponent<DividerProps> = ({
     role: 'presentation',
   };
 
-  return as === 'hr' ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;
+  return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;
 };
 
 export default Divider;