feat(pie-divider): DSW-2286 add label to pie-divider (#1746)

* feat(pie-divider): DSW-2286 add label to pie-divider * Update changeset file * feat(pie-divider): DSW-2286 rewrite label logic from slot to prop * fix(pie-divider): DSW-2286 adress review comments * feat(pie-divider): DSW-2286 add props for screen readers * fix(pie-divider): DSW-2286 fix comments after review * fix(pie-divider): DSW-2286 fix styles * fix(pie-divider): DSW-2286 update visual tests and styles
justeattakeaway · Sep 2, 2024 · 8566e90 · 8566e90
1 parent 1108446
commit 8566e90
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 28 deletions.
diff --git a/.changeset/chatty-waves-retire.md b/.changeset/chatty-waves-retire.md
@@ -0,0 +1,5 @@
+---
+"pie-storybook": minor
+---
+
+[Added] - `Labelled` story and a storybook control for the `label` property
diff --git a/.changeset/itchy-dragons-try.md b/.changeset/itchy-dragons-try.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-divider": minor
+---
+
+[Added] - `label` property to `pie-divider`
diff --git a/apps/pie-storybook/stories/pie-divider-docs/variants.mdx b/apps/pie-storybook/stories/pie-divider-docs/variants.mdx
@@ -13,3 +13,11 @@ import { ComponentStatus } from '../../docblocks/component-status.jsx';
 ### Inverse
 
 <Canvas of={DividerStories.Inverse} />
+
+### Labelled
+
+<Canvas of={DividerStories.Labelled} />
+
+### Large Text Content
+
+<Canvas of={DividerStories.LargeTextContent} />
diff --git a/apps/pie-storybook/stories/pie-divider.stories.ts b/apps/pie-storybook/stories/pie-divider.stories.ts
@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 /* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-divider';
 import {
-    DividerProps, variants, orientations, defaultProps,
+    type DividerProps, variants, orientations, defaultProps,
 } from '@justeattakeaway/pie-divider';
 /* eslint-enable import/no-duplicates */
 
@@ -27,6 +27,15 @@ const dividerStoryMeta: DividerStoryMeta = {
                 summary: defaultProps.variant,
             },
         },
+        label: {
+            description: 'The label text for the divider.',
+            control: {
+                type: 'text',
+                defaultValue: {
+                    summary: 'Label',
+                },
+            },
+        },
         orientation: {
             description: 'Set the orientation of the divider.',
             control: 'select',
@@ -40,20 +49,23 @@ const dividerStoryMeta: DividerStoryMeta = {
     parameters: {
         design: {
             type: 'figma',
-            url: '',
+            url: 'https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%5BCore%5D-Components-%E2%9A%AA%EF%B8%8F-%5BPIE-2.0%5D?node-id=876-1227&node-type=CANVAS&t=v6qypWzZqWE6lPxm-0',
         },
     },
 };
 
 export default dividerStoryMeta;
 
-const Template : TemplateFunction<DividerProps> = ({ variant, orientation }) => html`
+const Template : TemplateFunction<DividerProps> = ({ variant, label, orientation }) => html`
             <div style="${orientation === 'horizontal' ? 'width' : 'height'}: 400px">
-                <pie-divider variant="${ifDefined(variant)}" orientation="${ifDefined(orientation)}"></pie-divider>
+                <pie-divider variant="${ifDefined(variant)}" orientation="${ifDefined(orientation)}" label="${ifDefined(label)}"></pie-divider>
             </div>
         `;
 
 const createDividerStory = createStory<DividerProps>(Template, defaultArgs);
 
 export const Default = createDividerStory();
 export const Inverse = createDividerStory({ variant: 'inverse' }, { bgColor: 'dark (container-dark)' });
+export const Labelled = createDividerStory({ label: 'Label' });
+export const LargeTextContent = createDividerStory({ label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quas inventore quasi ullam, sed ab odio dicta, tempore' });
+
diff --git a/packages/components/pie-divider/src/defs.ts b/packages/components/pie-divider/src/defs.ts
@@ -12,11 +12,16 @@ export interface DividerProps {
      * What orientation the divider should be such as horizontal or vertical.
      */
    orientation?: typeof orientations[number];
+    /**
+     * The label text for the divider.
+     */
+    label?: string;
 }
 
 export type DefaultProps = ComponentDefaultProps<DividerProps>;
 
 export const defaultProps: DefaultProps = {
     variant: 'default',
     orientation: 'horizontal',
+    label: '',
 };
diff --git a/packages/components/pie-divider/src/divider.scss b/packages/components/pie-divider/src/divider.scss
@@ -1,22 +1,54 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
 .c-divider {
-    --divider-bg-color: var(--dt-color-divider-default);
-    --divider-width: 100%;
-    --divider-height: 1px;
+  --divider-bg-color: var(--dt-color-divider-default);
+  --divider-width: 100%;
+  --divider-min-width: 16px;
+  --divider-height: 1px;
+  --divider-label-max-width: 90%;
 
+  width: var(--divider-width);
+
+  &,
+  hr {
     margin: 0;
     border: 0;
-    width: var(--divider-width);
-    height: var(--divider-height);
     background-color: var(--divider-bg-color);
+  }
 
-    &.c-divider--inverse {
-        --divider-bg-color: var(--dt-color-divider-inverse);
+  &:not(.c-divider--labelled) {
+    height: var(--divider-height);
+  }
+
+  &.c-divider--labelled {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    gap: var(--dt-spacing-b);
+    background-color: transparent;
+
+    .c-divider-label {
+      max-width: var(--divider-label-max-width);
+      word-wrap: break-word;
     }
 
-    &.c-divider--vertical {
-        --divider-width: 1px;
-        --divider-height: 100%;
+    hr {
+      flex-grow: 1;
+      height: var(--divider-height);
+      min-width: var(--divider-min-width);
     }
+
+    &.c-divider--inverse {
+      color: var(--dt-color-content-inverse);
+    }
+  }
+
+  &.c-divider--inverse {
+    --divider-bg-color: var(--dt-color-divider-inverse);
+  }
+
+  &.c-divider--vertical {
+    --divider-width: 1px;
+    --divider-height: 100%;
+  }
 }
diff --git a/packages/components/pie-divider/src/index.ts b/packages/components/pie-divider/src/index.ts
@@ -1,4 +1,6 @@
-import { LitElement, html, unsafeCSS } from 'lit';
+import {
+    html, LitElement, unsafeCSS,
+} from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
@@ -24,20 +26,38 @@ export class PieDivider extends LitElement implements DividerProps {
     @validPropertyValues(componentSelector, orientations, defaultProps.orientation)
     public orientation = defaultProps.orientation;
 
+    @property({ type: String })
+    public label = defaultProps.label;
+
     render () {
-        const { variant, orientation } = this;
+        const { variant, orientation, label } = this;
 
+        const showLabel = label.length > 0 && orientation === 'horizontal';
         const classes = {
             'c-divider': true,
             'c-divider--inverse': variant === 'inverse',
             'c-divider--vertical': orientation === 'vertical',
+            'c-divider--labelled': showLabel,
         };
 
         return html`
-            <hr
-                data-test-id="pie-divider"
-                aria-hidden="true"
-                class="${classMap(classes)}" />`;
+            ${showLabel ? html`
+                <div
+                    id="${componentSelector}"
+                    data-test-id="${componentSelector}"
+                    class="${classMap(classes)}"
+                    aria-labelledby="${componentSelector}-label">
+                        <hr aria-hidden="true"/>
+                        <span id="${componentSelector}-label" class="c-divider-label">${label}</span>
+                        <hr aria-hidden="true"/>
+                </div>`
+            : html`
+                <hr id="${componentSelector}"
+                    data-test-id="${componentSelector}"
+                    class="${classMap(classes)}"
+                    aria-hidden="true"
+                />`
+            }`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

diff --git a/packages/components/pie-divider/test/component/pie-divider.spec.ts b/packages/components/pie-divider/test/component/pie-divider.spec.ts
@@ -1,6 +1,6 @@
 
 import { test, expect } from '@sand4rt/experimental-ct-web';
-import { PieDivider } from '../../src/index.ts';
+import { PieDivider, type DividerProps } from '../../src/index.ts';
 
 const componentSelector = '[data-test-id="pie-divider"]';
 
@@ -15,4 +15,37 @@ test.describe('PieDivider - Component tests', () => {
         // Assert
         expect(divider).toBeVisible();
     });
+
+    test('should render the `label` if it is provided', async ({ mount }) => {
+        // Arrange
+        const component = await mount(PieDivider, {
+            props: {
+                label: 'foo label',
+                orientation: 'horizontal',
+            } as DividerProps,
+        });
+
+        // Act
+        const label = component.getByText('foo label');
+
+        // Assert
+        expect(label).toBeVisible();
+    });
+
+    test('should NOT render the `label` if divider orientation is vertical', async ({ mount }) => {
+        // Arrange
+        const component = await mount(PieDivider, {
+            props: {
+                label: 'foo label',
+                orientation: 'vertical',
+            } as DividerProps,
+        });
+
+        // Act
+        const label = component.getByText('foo label');
+
+        // Assert
+        expect(label).not.toBeVisible();
+    });
 });
+
diff --git a/packages/components/pie-divider/test/visual/pie-divider.spec.ts b/packages/components/pie-divider/test/visual/pie-divider.spec.ts
@@ -20,18 +20,19 @@ import { PieDivider } from '../../src/index.ts';
 const props: PropObject<DividerProps> = {
     variant: variants,
     orientation: orientations,
+    label: ['', 'Label', 'Lorem ipsum dolor sit amet consectetur'],
 };
 
 const renderTestPieDivider = (propVals: WebComponentPropValues) => {
-    const { variant, orientation } = propVals;
+    const { variant, orientation, label } = propVals;
     if (orientation === 'vertical') {
         return `
             <div style="height: 250px">
-                <pie-divider variant="${variant}" orientation="${orientation}" />
+                <pie-divider variant="${variant}" orientation="${orientation}" label="${label}"></pie-divider>
             </div>
         `;
     }
-    return `<pie-divider variant="${variant}" orientation="${orientation}"></pie-divider>`;
+    return `<pie-divider variant="${variant}" orientation="${orientation}" label="${label}"></pie-divider>`;
 };
 
 const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
@@ -43,10 +44,13 @@ test.beforeEach(async ({ mount }) => {
     await component.unmount();
 });
 
-componentVariants.forEach((variant) => test(`should render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
+componentVariants.forEach((variant) => test(`should render all prop variations for variant: ${variant} `, async ({
+    page,
+    mount,
+}) => {
     for (const combo of componentPropsMatrixByVariant[variant]) {
         const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieDivider);
-        const propKeyValues = `orientation: ${testComponent.propValues.orientation}`;
+        const propKeyValues = `orientation: ${testComponent.propValues.orientation}, label: ${testComponent.propValues.label || '-'}`;
 
         await mount(
             WebComponentTestWrapper,
@@ -56,9 +60,8 @@ componentVariants.forEach((variant) => test(`should render all prop variations f
                     component: testComponent.renderedString.trim(),
                 },
             },
-
         );
     }
 
-    await percySnapshot(page, `PIE Divider - Variant: ${variant}`, percyWidths);
+    await percySnapshot(page, `PIE Divider - variant: ${variant}`, percyWidths);
 }));