feat(sbb-accordion, sbb-expansion-panel): add size s (#2603)

sbb-design-systems · Apr 25, 2024 · 015201d · 015201d
1 parent 4ee78a5
commit 015201d
Show file tree

Hide file tree

Showing 14 changed files with 230 additions and 15 deletions.
diff --git a/src/components/accordion/__snapshots__/accordion.spec.snap.js b/src/components/accordion/__snapshots__/accordion.spec.snap.js
@@ -2,16 +2,18 @@
 export const snapshots = {};
 
 snapshots["sbb-accordion renders - Dom"] = 
-`<sbb-accordion>
+`<sbb-accordion size="l">
   <sbb-expansion-panel
     data-accordion=""
     data-accordion-first=""
+    size="l"
   >
     <sbb-expansion-panel-header
       aria-controls="sbb-expansion-panel-content-1"
       aria-expanded="false"
       data-action=""
       data-button=""
+      data-size="l"
       data-slot-names="unnamed"
       dir="ltr"
       id="sbb-expansion-panel-header-1"
@@ -24,6 +26,7 @@ snapshots["sbb-accordion renders - Dom"] =
     <sbb-expansion-panel-content
       aria-hidden="true"
       aria-labelledby="sbb-expansion-panel-header-1"
+      data-size="l"
       id="sbb-expansion-panel-content-1"
       role="region"
       slot="content"
@@ -34,12 +37,14 @@ snapshots["sbb-accordion renders - Dom"] =
   <sbb-expansion-panel
     data-accordion=""
     data-accordion-last=""
+    size="l"
   >
     <sbb-expansion-panel-header
       aria-controls="sbb-expansion-panel-content-2"
       aria-expanded="false"
       data-action=""
       data-button=""
+      data-size="l"
       data-slot-names="unnamed"
       dir="ltr"
       id="sbb-expansion-panel-header-2"
@@ -52,6 +57,7 @@ snapshots["sbb-accordion renders - Dom"] =
     <sbb-expansion-panel-content
       aria-hidden="true"
       aria-labelledby="sbb-expansion-panel-header-2"
+      data-size="l"
       id="sbb-expansion-panel-content-2"
       role="region"
       slot="content"

diff --git a/src/components/accordion/accordion.e2e.ts b/src/components/accordion/accordion.e2e.ts
@@ -46,9 +46,15 @@ describe(`sbb-accordion ${fixture.name}`, () => {
 
     expect(panels[0]).to.have.attribute('data-accordion-first');
     expect(panels[0]).to.have.attribute('data-accordion');
+    expect(panels[0]).to.have.attribute('size');
+    expect(panels[0].size).to.be.equal('l');
     expect(panels[1]).to.have.attribute('data-accordion');
+    expect(panels[1]).to.have.attribute('size');
+    expect(panels[1].size).to.be.equal('l');
     expect(panels[2]).to.have.attribute('data-accordion');
     expect(panels[2]).to.have.attribute('data-accordion-last');
+    expect(panels[2]).to.have.attribute('size');
+    expect(panels[2].size).to.be.equal('l');
   });
 
   it('should set accordion context on expansion panel when removing and adding expansion-panels', async () => {
@@ -108,6 +114,16 @@ describe(`sbb-accordion ${fixture.name}`, () => {
     ).to.be.equal('h6');
   });
 
+  it('should dynamically update size prop', async () => {
+    element.size = 's';
+    await waitForLitRender(element);
+    const panels = Array.from(element.querySelectorAll('sbb-expansion-panel'));
+    expect(panels.length).to.be.equal(3);
+    expect(panels[0].size).to.be.equal('s');
+    expect(panels[1].size).to.be.equal('s');
+    expect(panels[2].size).to.be.equal('s');
+  });
+
   it('should close others when expanding and multi = false', async () => {
     const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen);
     const panelOne: SbbExpansionPanelElement =

diff --git a/src/components/accordion/accordion.stories.ts b/src/components/accordion/accordion.stories.ts
@@ -43,6 +43,16 @@ const titleLevel: InputType = {
   },
 };
 
+const size: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['l', 's'],
+  table: {
+    category: 'Accordion',
+  },
+};
+
 const color: InputType = {
   control: {
     type: 'inline-radio',
@@ -111,6 +121,7 @@ const defaultArgTypes: ArgTypes = {
   numberOfPanels,
   multi,
   'title-level': titleLevel,
+  size,
   color,
   expanded,
   borderless,
@@ -124,6 +135,7 @@ const defaultArgs: Args = {
   numberOfPanels: 3,
   multi: false,
   'title-level': titleLevel.options![2],
+  size: size.options![0],
   color: color.options![0],
   expanded: false,
   borderless: false,
@@ -215,6 +227,18 @@ export const Multi: StoryObj = {
   args: { ...defaultArgs, multi: true },
 };
 
+export const SizeS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![1] },
+};
+
+export const SizeSWithIcon: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![1], iconName: 'swisspass-medium' },
+};
+
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {

diff --git a/src/components/accordion/accordion.ts b/src/components/accordion/accordion.ts
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
@@ -44,6 +44,9 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
   }
   private _multi: boolean = false;
 
+  /** Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. `*/
+  @property({ reflect: true }) public size: 's' | 'l' = 'l';
+
   private _abort = new SbbConnectedAbortController(this);
 
   private _closePanels(e: CustomEvent): void {
@@ -87,10 +90,17 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
     );
   }
 
+  protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('size')) {
+      this._expansionPanels.forEach((panel: SbbExpansionPanelElement) => (panel.size = this.size));
+    }
+  }
+
   private _handleSlotchange(): void {
     this._expansionPanels.forEach(
       (panel: SbbExpansionPanelElement, index: number, array: SbbExpansionPanelElement[]) => {
         panel.titleLevel = this.titleLevel;
+        panel.size = this.size;
         panel.toggleAttribute('data-accordion-first', index === 0);
         panel.toggleAttribute('data-accordion-last', index === array.length - 1);
       },

diff --git a/src/components/accordion/readme.md b/src/components/accordion/readme.md
@@ -24,6 +24,13 @@ The `multi` property, if set, allows having more than one `sbb-expansion-panel`
 
 ## Style
 
+The component has two different sizes, `l` (default) and `s`, which can be changed using the `size` property.
+The property overrides the `size` value of any inner `sbb-expansion-panel`.
+
+```html
+<sbb-accordion size="s"> ... </sbb-accordion>
+```
+
 The component has a `titleLevel` property, which is proxied to each inner `sbb-expansion-panel-header`, and can be used
 to wrap the header of each `sbb-expansion-panel` in a heading tag; if the property is unset, a `div` is used.
 
@@ -43,10 +50,11 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped
 
 ## Properties
 
-| Name         | Attribute     | Privacy | Type                    | Default | Description                                                                 |
-| ------------ | ------------- | ------- | ----------------------- | ------- | --------------------------------------------------------------------------- |
-| `titleLevel` | `title-level` | public  | `SbbTitleLevel \| null` | `null`  | The heading level for the sbb-expansion-panel-headers within the component. |
-| `multi`      | `multi`       | public  | `boolean`               | `false` | Whether more than one sbb-expansion-panel can be open at the same time.     |
+| Name         | Attribute     | Privacy | Type                    | Default | Description                                                                               |
+| ------------ | ------------- | ------- | ----------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `titleLevel` | `title-level` | public  | `SbbTitleLevel \| null` | `null`  | The heading level for the sbb-expansion-panel-headers within the component.               |
+| `multi`      | `multi`       | public  | `boolean`               | `false` | Whether more than one sbb-expansion-panel can be open at the same time.                   |
+| `size`       | `size`        | public  | `'s' \| 'l'`            | `'l'`   | Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. ` |
 
 ## Slots
 

diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss
@@ -12,6 +12,10 @@
   display: block;
 }
 
+:host([data-size='s']) {
+  --sbb-expansion-panel-content-padding-inline: var(--sbb-spacing-fixed-5x);
+}
+
 :host([data-icon-space]) {
   @include sbb.mq($from: micro) {
     // The space taken by the icon in the sbb-expansion-panel-header must be considered here to correctly calculate the padding value;

diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss
@@ -17,6 +17,12 @@
   display: block;
 }
 
+:host([data-size='s']) {
+  --sbb-expansion-panel-header-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-expansion-panel-header-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-expansion-panel-header-padding-inline: var(--sbb-spacing-fixed-5x);
+}
+
 :host([disabled]) {
   --sbb-expansion-panel-header-cursor: default;
   --sbb-expansion-panel-header-text-color: var(--sbb-color-granite);

diff --git a/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js b/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js
@@ -2,12 +2,13 @@
 export const snapshots = {};
 
 snapshots["sbb-expansion-panel renders Dom"] = 
-`<sbb-expansion-panel>
+`<sbb-expansion-panel size="l">
   <sbb-expansion-panel-header
     aria-controls="sbb-expansion-panel-content-1"
     aria-expanded="false"
     data-action=""
     data-button=""
+    data-size="l"
     data-slot-names="unnamed"
     dir="ltr"
     id="sbb-expansion-panel-header-1"
@@ -20,6 +21,7 @@ snapshots["sbb-expansion-panel renders Dom"] =
   <sbb-expansion-panel-content
     aria-hidden="true"
     aria-labelledby="sbb-expansion-panel-header-1"
+    data-size="l"
     id="sbb-expansion-panel-content-1"
     role="region"
     slot="content"
@@ -47,15 +49,19 @@ snapshots["sbb-expansion-panel renders ShadowDom"] =
 /* end snapshot sbb-expansion-panel renders ShadowDom */
 
 snapshots["sbb-expansion-panel renders with level set Dom"] = 
-`<sbb-expansion-panel title-level="4">
+`<sbb-expansion-panel
+  size="l"
+  title-level="4"
+>
   <sbb-expansion-panel-header
-    aria-controls="sbb-expansion-panel-content-3"
+    aria-controls="sbb-expansion-panel-content-5"
     aria-expanded="false"
     data-action=""
     data-button=""
+    data-size="l"
     data-slot-names="unnamed"
     dir="ltr"
-    id="sbb-expansion-panel-header-3"
+    id="sbb-expansion-panel-header-5"
     role="button"
     slot="header"
     tabindex="0"
@@ -64,8 +70,9 @@ snapshots["sbb-expansion-panel renders with level set Dom"] =
   </sbb-expansion-panel-header>
   <sbb-expansion-panel-content
     aria-hidden="true"
-    aria-labelledby="sbb-expansion-panel-header-3"
-    id="sbb-expansion-panel-content-3"
+    aria-labelledby="sbb-expansion-panel-header-5"
+    data-size="l"
+    id="sbb-expansion-panel-content-5"
     role="region"
     slot="content"
   >
@@ -123,3 +130,50 @@ snapshots["sbb-expansion-panel renders with level set A11y tree Chrome"] =
 `;
 /* end snapshot sbb-expansion-panel renders with level set A11y tree Chrome */
 
+snapshots["sbb-expansion-panel renders size s Dom"] = 
+`<sbb-expansion-panel size="s">
+  <sbb-expansion-panel-header
+    aria-controls="sbb-expansion-panel-content-3"
+    aria-expanded="false"
+    data-action=""
+    data-button=""
+    data-size="s"
+    data-slot-names="unnamed"
+    dir="ltr"
+    id="sbb-expansion-panel-header-3"
+    role="button"
+    slot="header"
+    tabindex="0"
+  >
+    Header
+  </sbb-expansion-panel-header>
+  <sbb-expansion-panel-content
+    aria-hidden="true"
+    aria-labelledby="sbb-expansion-panel-header-3"
+    data-size="s"
+    id="sbb-expansion-panel-content-3"
+    role="region"
+    slot="content"
+  >
+    Content
+  </sbb-expansion-panel-content>
+</sbb-expansion-panel>
+`;
+/* end snapshot sbb-expansion-panel renders size s Dom */
+
+snapshots["sbb-expansion-panel renders size s ShadowDom"] = 
+`<div class="sbb-expansion-panel">
+  <div class="sbb-expansion-panel__header">
+    <slot name="header">
+    </slot>
+  </div>
+  <div class="sbb-expansion-panel__content-wrapper">
+    <span class="sbb-expansion-panel__content">
+      <slot name="content">
+      </slot>
+    </span>
+  </div>
+</div>
+`;
+/* end snapshot sbb-expansion-panel renders size s ShadowDom */
+
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts
@@ -39,11 +39,13 @@ describe(`sbb-expansion-panel with ${fixture.name}`, () => {
     expect(header).to.have.attribute('id', 'sbb-expansion-panel-header-2');
     expect(header).to.have.attribute('aria-controls', 'sbb-expansion-panel-content-2');
     expect(header).to.have.attribute('data-icon');
+    expect(header).to.have.attribute('data-size', 'l');
 
     const content = element.querySelector('sbb-expansion-panel-content');
     expect(content).to.have.attribute('id', 'sbb-expansion-panel-content-2');
     expect(content).to.have.attribute('aria-labelledby', `sbb-expansion-panel-header-2`);
     expect(content).to.have.attribute('data-icon-space');
+    expect(content).to.have.attribute('data-size', 'l');
   });
 
   it('has slotted elements with the correct properties when id are set', async () => {
@@ -130,4 +132,23 @@ describe(`sbb-expansion-panel with ${fixture.name}`, () => {
     expect(header.disabled).to.be.equal(false);
     expect(header).not.to.have.attribute('aria-disabled');
   });
+
+  it('size property is proxied to children', async () => {
+    const header: SbbExpansionPanelHeaderElement =
+      element.querySelector<SbbExpansionPanelHeaderElement>('sbb-expansion-panel-header')!;
+    const content: SbbExpansionPanelContentElement =
+      element.querySelector<SbbExpansionPanelContentElement>('sbb-expansion-panel-content')!;
+    expect(header).to.have.attribute('data-size', 'l');
+    expect(content).to.have.attribute('data-size', 'l');
+
+    element.size = 's';
+    await waitForLitRender(element);
+    expect(header).to.have.attribute('data-size', 's');
+    expect(content).to.have.attribute('data-size', 's');
+
+    element.size = 'l';
+    await waitForLitRender(element);
+    expect(header).to.have.attribute('data-size', 'l');
+    expect(content).to.have.attribute('data-size', 'l');
+  });
 });
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.scss b/src/components/expansion-panel/expansion-panel/expansion-panel.scss
@@ -33,6 +33,10 @@
   display: block;
 }
 
+:host([size='s']) {
+  --sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-2x);
+}
+
 :host([disabled]) {
   @include sbb.if-forced-colors {
     --sbb-expansion-panel-border-color: GrayText;