feat(accordion): add appearance and size to accordion group

Endava · Mar 2, 2024 · ff64603 · ff64603
1 parent 3729da0
commit ff64603
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 9 deletions.
diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts
@@ -79,6 +79,10 @@ export namespace Components {
         "size": TAccordionSize;
     }
     interface BqAccordionGroup {
+        /**
+          * The appearance style of accordion to be applied to all accordions
+         */
+        "appearance": TAccordionAppearance;
         /**
           * If true all accordions are expanded
          */
@@ -87,6 +91,10 @@ export namespace Components {
           * If true multiple accordions can be expanded at the same time
          */
         "multiple": boolean;
+        /**
+          * The size of accordion to be applied to all accordions
+         */
+        "size": TAccordionSize;
     }
     interface BqAlert {
         /**
@@ -1997,6 +2005,10 @@ declare namespace LocalJSX {
         "size"?: TAccordionSize;
     }
     interface BqAccordionGroup {
+        /**
+          * The appearance style of accordion to be applied to all accordions
+         */
+        "appearance"?: TAccordionAppearance;
         /**
           * If true all accordions are expanded
          */
@@ -2005,6 +2017,10 @@ declare namespace LocalJSX {
           * If true multiple accordions can be expanded at the same time
          */
         "multiple"?: boolean;
+        /**
+          * The size of accordion to be applied to all accordions
+         */
+        "size"?: TAccordionSize;
     }
     interface BqAlert {
         /**

diff --git a/packages/beeq/src/components/accordion-group/__tests__/bq-accordion-group.e2e.ts b/packages/beeq/src/components/accordion-group/__tests__/bq-accordion-group.e2e.ts
@@ -67,6 +67,46 @@ describe('bq-accordion-group', () => {
     expect(elements).toHaveLength(0);
   });
 
+  it('should change appearance to all accordions', async () => {
+    const page = await newE2EPage({
+      html: `
+      <bq-accordion-group>
+        <bq-accordion></bq-accordion>
+        <bq-accordion></bq-accordion>
+        <bq-accordion></bq-accordion>
+      </bq-accordion-group>
+      `,
+    });
+
+    expect(await page.findAll('bq-accordion[appearance="ghost"]')).toHaveLength(0);
+
+    const element = await page.find('bq-accordion-group');
+    element.setProperty('appearance', 'ghost');
+    await page.waitForChanges();
+
+    expect(await page.findAll('bq-accordion[appearance="ghost"]')).toHaveLength(3);
+  });
+
+  it('should change size to all accordions', async () => {
+    const page = await newE2EPage({
+      html: `
+      <bq-accordion-group>
+        <bq-accordion></bq-accordion>
+        <bq-accordion></bq-accordion>
+        <bq-accordion></bq-accordion>
+      </bq-accordion-group>
+      `,
+    });
+
+    expect(await page.findAll('bq-accordion[size="small"]')).toHaveLength(0);
+
+    const element = await page.find('bq-accordion-group');
+    element.setProperty('size', 'small');
+    await page.waitForChanges();
+
+    expect(await page.findAll('bq-accordion[size="small"]')).toHaveLength(3);
+  });
+
   it('should emit bqClick on accordion click', async () => {
     const page = await newE2EPage({
       html: `

diff --git a/packages/beeq/src/components/accordion-group/_storybook/bq-accordion-group.stories.tsx b/packages/beeq/src/components/accordion-group/_storybook/bq-accordion-group.stories.tsx
@@ -33,32 +33,37 @@ type Story = StoryObj;
 
 export const Group: Story = {
   render: (args: Args) => html`
-    <bq-accordion-group ?expand-all=${args['expand-all']} ?multiple=${args.multiple}>
-      <bq-accordion size=${args.size} appearance=${args.appearance}>
+    <bq-accordion-group
+      ?expand-all=${args['expand-all']}
+      ?multiple=${args.multiple}
+      size=${args.size}
+      appearance=${args.appearance}
+    >
+      <bq-accordion size=${args.size}>
         <span slot="header">${args.text}</span>
         <div>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque magnam corporis perferendis, architecto vel
           ullam officia officiis necessitatibus optio nam soluta labore libero debitis? Delectus enim quaerat laboriosam
           consequatur ea.
         </div>
       </bq-accordion>
-      <bq-accordion size=${args.size} appearance=${args.appearance} expanded>
+      <bq-accordion expanded>
         <span slot="header">${args.text}</span>
         <div>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque magnam corporis perferendis, architecto vel
           ullam officia officiis necessitatibus optio nam soluta labore libero debitis? Delectus enim quaerat laboriosam
           consequatur ea.
         </div>
       </bq-accordion>
-      <bq-accordion size=${args.size} appearance=${args.appearance} disabled>
+      <bq-accordion disabled>
         <span slot="header">${args.text}</span>
         <div>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque magnam corporis perferendis, architecto vel
           ullam officia officiis necessitatibus optio nam soluta labore libero debitis? Delectus enim quaerat laboriosam
           consequatur ea.
         </div>
       </bq-accordion>
-      <bq-accordion size=${args.size} appearance=${args.appearance}>
+      <bq-accordion>
         <span slot="header">${args.text}</span>
         <div>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque magnam corporis perferendis, architecto vel

diff --git a/packages/beeq/src/components/accordion-group/bq-accordion-group.tsx b/packages/beeq/src/components/accordion-group/bq-accordion-group.tsx
@@ -1,6 +1,7 @@
 import { Component, Element, h, Listen, Prop, Watch } from '@stencil/core';
 
 import { isNil } from '../../shared/utils';
+import { TAccordionAppearance, TAccordionSize } from '../accordion/bq-accordion.types';
 
 /**
  * @part base - The component's base wrapper.
@@ -32,16 +33,26 @@ export class BqAccordionGroup {
   /** If true multiple accordions can be expanded at the same time */
   @Prop({ reflect: true }) multiple: boolean = false;
 
+  /** The appearance style of accordion to be applied to all accordions */
+  @Prop({ reflect: true, mutable: true }) appearance: TAccordionAppearance = 'filled';
+
+  /** The size of accordion to be applied to all accordions */
+  @Prop({ reflect: true, mutable: true }) size: TAccordionSize = 'medium';
+
   // Prop lifecycle events
   // =======================
 
   @Watch('expandAll')
+  @Watch('appearance')
+  @Watch('size')
   checkPropValues() {
     this.bqAccordionElements.forEach((bqAccordionElement) => {
       // NOTE: if expandAll is nil we will keep accordion default state
       if (!isNil(this.expandAll)) {
         bqAccordionElement.expanded = this.expandAll;
       }
+      bqAccordionElement.appearance = this.appearance;
+      bqAccordionElement.size = this.size;
     });
   }
 

diff --git a/packages/beeq/src/components/accordion-group/readme.md b/packages/beeq/src/components/accordion-group/readme.md
@@ -7,10 +7,12 @@
 
 ## Properties
 
-| Property    | Attribute    | Description                                                  | Type      | Default     |
-| ----------- | ------------ | ------------------------------------------------------------ | --------- | ----------- |
-| `expandAll` | `expand-all` | If true all accordions are expanded                          | `boolean` | `undefined` |
-| `multiple`  | `multiple`   | If true multiple accordions can be expanded at the same time | `boolean` | `false`     |
+| Property     | Attribute    | Description                                                       | Type                  | Default     |
+| ------------ | ------------ | ----------------------------------------------------------------- | --------------------- | ----------- |
+| `appearance` | `appearance` | The appearance style of accordion to be applied to all accordions | `"filled" \| "ghost"` | `'filled'`  |
+| `expandAll`  | `expand-all` | If true all accordions are expanded                               | `boolean`             | `undefined` |
+| `multiple`   | `multiple`   | If true multiple accordions can be expanded at the same time      | `boolean`             | `false`     |
+| `size`       | `size`       | The size of accordion to be applied to all accordions             | `"medium" \| "small"` | `'medium'`  |
 
 
 ## Shadow Parts