feat(Chip): [BLA-768] added type and label style props for chip

otto-de · May 23, 2024 · 0391ab4 · 0391ab4
1 parent 04470bf
commit 0391ab4
Show file tree

Hide file tree

Showing 11 changed files with 4,363 additions and 2,415 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core-components/package.json b/packages/core-components/package.json
@@ -82,7 +82,7 @@
     "remark-gfm": "^3.0.1",
     "sass": "^1.71.0",
     "sass-loader": "^13.3.2",
-    "storybook": "^7.3.2",
+    "storybook": "^7.6.19",
     "style-loader": "^3.3.2",
     "stylelint": "^15.6.3",
     "stylelint-config-standard": "^34.0.0",

diff --git a/packages/core-components/src/components.d.ts b/packages/core-components/src/components.d.ts
@@ -5,17 +5,17 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
-import { CalendarEventDetail, CheckboxEventDetail, ChipComponentEventDetail, DateSelectedEventDetail, EscapePressed, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, NextMonth, OptionSelectedEventDetail, PreviousMonth, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
+import { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, EscapePressed, NextMonth, PageChangeEventDetail, PreviousMonth, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
+import { CalendarEventDetail, CheckboxEventDetail, ChipComponentEventDetail, DateSelectedEventDetail, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
 import { IconName } from "./components/icon/types";
 import { IconName as IconName1 } from "./components/icon-100/types";
 import { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
 import { ContentAlignment, TableAccordionRowTypes, TableColourOptions, TableRowgroupTypes, TableSizes, TableSortDirections } from "./utils/types/table.types";
 import { CheckboxEventDetail as CheckboxEventDetail1 } from "./components";
 import { TableAccordionSelectedEventDetail } from "./utils/interfaces/content.interface";
 import { WizardStatus, WizardSteps } from "./utils/types/wizard.types";
-export { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
-export { CalendarEventDetail, CheckboxEventDetail, ChipComponentEventDetail, DateSelectedEventDetail, EscapePressed, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, NextMonth, OptionSelectedEventDetail, PreviousMonth, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
+export { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, EscapePressed, NextMonth, PageChangeEventDetail, PreviousMonth, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
+export { CalendarEventDetail, CheckboxEventDetail, ChipComponentEventDetail, DateSelectedEventDetail, InputChangeEvent, InputClear, MultiSelectOptionEventDetail, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
 export { IconName } from "./components/icon/types";
 export { IconName as IconName1 } from "./components/icon-100/types";
 export { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
@@ -287,6 +287,14 @@ export namespace Components {
           * The text content of the chip. It is required.
          */
         "label": string;
+        /**
+          * The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set.
+         */
+        "labelStyle"?: 'bold' | 'italic' | 'underline' | 'strikethrough';
+        /**
+          * The type of chip to represent states like success, info, warn and error. Uses default style if not set.
+         */
+        "type"?: 'success' | 'info' | 'warn' | 'error';
         /**
           * It is only used when the chip component participates in a group
          */
@@ -2436,10 +2444,18 @@ declare namespace LocalJSX {
           * The text content of the chip. It is required.
          */
         "label": string;
+        /**
+          * The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set.
+         */
+        "labelStyle"?: 'bold' | 'italic' | 'underline' | 'strikethrough';
         /**
           * This event will be triggered when the chip element is closed
          */
         "onB2b-close"?: (event: B2bChipComponentCustomEvent<ChipComponentEventDetail>) => void;
+        /**
+          * The type of chip to represent states like success, info, warn and error. Uses default style if not set.
+         */
+        "type"?: 'success' | 'info' | 'warn' | 'error';
         /**
           * It is only used when the chip component participates in a group
          */

diff --git a/packages/core-components/src/components/chip/chip.docs.mdx b/packages/core-components/src/components/chip/chip.docs.mdx
@@ -14,9 +14,7 @@ import * as ChipStories from './chip.stories';
 
 # Chip Component
 
-<Canvas columns={3} withSource="open" withToolbar={false}>
-  <Story id="components-interaction-chip-component--story-010-default" />
-</Canvas>
+<Canvas of={ChipStories.story010Default} sourceState="shown" />
 
 ## Properties
 
@@ -25,6 +23,14 @@ import * as ChipStories from './chip.stories';
 The label of the chip which appears on the component. This is the only
 required property.
 
+### Type
+
+The type of chip to represent states like success, info, warn and error. Uses default style if not set.
+
+### Label Style
+
+The style of the label which decorates the text in bold, italic, underline or strikethrough style. Uses default style if not set.
+
 ### Disabled
 
 Whether or not the chip is disabled. If not specified, it will not be disabled.

diff --git a/packages/core-components/src/components/chip/chip.e2e.tsx b/packages/core-components/src/components/chip/chip.e2e.tsx
@@ -15,6 +15,142 @@ describe('B2B-Chip-Component', () => {
     expect(clearIcon).not.toBeNull();
   });
 
+  it('should render the chip component with success type', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<b2b-chip-component label="chip" type="success"></b2b-chip-component>`,
+    );
+
+    const chip = await page.find({ text: 'chip' });
+    const clearIcon = await page.find(
+      'b2b-chip-component >>> button.b2b-chip__clearIcon',
+    );
+    expect(chip).not.toBeNull();
+    expect(clearIcon).not.toBeNull();
+
+    const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+    expect(chipWrapper).toHaveClass('b2b-chip--success');
+  });
+
+  it('should render the chip component with info type', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<b2b-chip-component label="chip" type="info"></b2b-chip-component>`,
+    );
+
+    const chip = await page.find({ text: 'chip' });
+    const clearIcon = await page.find(
+      'b2b-chip-component >>> button.b2b-chip__clearIcon',
+    );
+    expect(chip).not.toBeNull();
+    expect(clearIcon).not.toBeNull();
+
+    const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+    expect(chipWrapper).toHaveClass('b2b-chip--info');
+  });
+
+  it('should render the chip component with warning type', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<b2b-chip-component label="chip" type="warn"></b2b-chip-component>`,
+    );
+
+    const chip = await page.find({ text: 'chip' });
+    const clearIcon = await page.find(
+      'b2b-chip-component >>> button.b2b-chip__clearIcon',
+    );
+    expect(chip).not.toBeNull();
+    expect(clearIcon).not.toBeNull();
+
+    const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+    expect(chipWrapper).toHaveClass('b2b-chip--warn');
+  });
+
+  it('should render the chip component with error type', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<b2b-chip-component label="chip" type="error"></b2b-chip-component>`,
+    );
+
+    const chip = await page.find({ text: 'chip' });
+    const clearIcon = await page.find(
+      'b2b-chip-component >>> button.b2b-chip__clearIcon',
+    );
+    expect(chip).not.toBeNull();
+    expect(clearIcon).not.toBeNull();
+
+    const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+    expect(chipWrapper).toHaveClass('b2b-chip--error');
+  });
+
+  it('should render the chip component with bold label', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<b2b-chip-component label="chip" label-style="bold"></b2b-chip-component>`,
+    );
+
+    const chip = await page.find({ text: 'chip' });
+    const clearIcon = await page.find(
+      'b2b-chip-component >>> button.b2b-chip__clearIcon',
+    );
+    expect(chip).not.toBeNull();
+    expect(clearIcon).not.toBeNull();
+
+    const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+    expect(label).toHaveClass('b2b-chip__label--bold');
+  });
+
+  it('should render the chip component with italic label', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<b2b-chip-component label="chip" label-style="italic"></b2b-chip-component>`,
+    );
+
+    const chip = await page.find({ text: 'chip' });
+    const clearIcon = await page.find(
+      'b2b-chip-component >>> button.b2b-chip__clearIcon',
+    );
+    expect(chip).not.toBeNull();
+    expect(clearIcon).not.toBeNull();
+
+    const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+    expect(label).toHaveClass('b2b-chip__label--italic');
+  });
+
+  it('should render the chip component with underlined label', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<b2b-chip-component label="chip" label-style="underline"></b2b-chip-component>`,
+    );
+
+    const chip = await page.find({ text: 'chip' });
+    const clearIcon = await page.find(
+      'b2b-chip-component >>> button.b2b-chip__clearIcon',
+    );
+    expect(chip).not.toBeNull();
+    expect(clearIcon).not.toBeNull();
+
+    const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+    expect(label).toHaveClass('b2b-chip__label--underline');
+  });
+
+  it('should render the chip component with strikethrough label', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<b2b-chip-component label="chip" label-style="strikethrough"></b2b-chip-component>`,
+    );
+
+    const chip = await page.find({ text: 'chip' });
+    const clearIcon = await page.find(
+      'b2b-chip-component >>> button.b2b-chip__clearIcon',
+    );
+    expect(chip).not.toBeNull();
+    expect(clearIcon).not.toBeNull();
+
+    const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+    expect(label).toHaveClass('b2b-chip__label--strikethrough');
+  });
+
   it('should emit b2b-close event on clear icon click', async () => {
     const page = await newE2EPage();
     await page.setContent(

diff --git a/packages/core-components/src/components/chip/chip.scss b/packages/core-components/src/components/chip/chip.scss
@@ -21,11 +21,47 @@
     cursor: default;
     margin-left: var(--b2b-size-20);
 
+    &--success {
+      background-color: var(--b2b-color-success-50);
+      border: 1px solid var(--b2b-color-success-100);
+    }
+
+    &--info {
+      background-color: var(--b2b-color-info-50);
+      border: 1px solid var(--b2b-color-info-100);
+    }
+
+    &--warn {
+      background-color: var(--b2b-color-warning-50);
+      border: 1px solid var(--b2b-color-warning-100);
+    }
+
+    &--error {
+      background-color: var(--b2b-color-error-50);
+      border: 1px solid var(--b2b-color-error-100);
+    }
+
     &__label {
       display: inline-block;
       text-overflow: ellipsis;
       overflow: hidden;
 
+      &--bold {
+        font-weight: bold;
+      }
+
+      &--italic {
+        font-style: italic;
+      }
+
+      &--underline {
+        text-decoration: underline;
+      }
+
+      &--strikethrough {
+        text-decoration: line-through;
+      }
+
       &--close-button {
         margin-right: var(--b2b-size-10);
       }