fix: review pt.8 - apply icon-name mixin in the whole project

sbb-design-systems · Jan 30, 2024 · 98d2e7a · 98d2e7a
1 parent 866a8c0
commit 98d2e7a
Show file tree

Hide file tree

Showing 16 changed files with 72 additions and 130 deletions.
diff --git a/src/components/checkbox/checkbox/checkbox.ts b/src/components/checkbox/checkbox/checkbox.ts
@@ -6,6 +6,7 @@ import { ref } from 'lit/directives/ref.js';
 import {
   LanguageController,
   NamedSlotStateController,
+  SbbIconNameMixin,
   UpdateScheduler,
 } from '../../core/common-behaviors';
 import { setAttributes } from '../../core/dom';
@@ -48,7 +49,7 @@ export type SbbCheckboxSize = 's' | 'm';
  * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  */
 @customElement('sbb-checkbox')
-export class SbbCheckboxElement extends UpdateScheduler(LitElement) {
+export class SbbCheckboxElement extends UpdateScheduler(SbbIconNameMixin(LitElement)) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     didChange: 'didChange',
@@ -88,12 +89,6 @@ export class SbbCheckboxElement extends UpdateScheduler(LitElement) {
   /** Whether the checkbox is indeterminate. */
   @property({ reflect: true, type: Boolean }) public indeterminate = false;
 
-  /**
-   * The icon name we want to use, choose from the small icon variants from the ui-icons category
-   * from https://icons.app.sbb.ch (optional).
-   */
-  @property({ attribute: 'icon-name', reflect: true }) public iconName?: string;
-
   /** The label position relative to the labelIcon. Defaults to end */
   @property({ attribute: 'icon-placement', reflect: true })
   public iconPlacement: SbbIconPlacement = 'end';
@@ -300,11 +295,7 @@ export class SbbCheckboxElement extends UpdateScheduler(LitElement) {
             </span>
             <span class="sbb-checkbox__label">
               <slot></slot>
-              <span class="sbb-checkbox__label--icon">
-                <slot name="icon">
-                  ${this.iconName ? html`<sbb-icon name="${this.iconName}"></sbb-icon>` : nothing}
-                </slot>
-              </span>
+              <span class="sbb-checkbox__label--icon"> ${this.renderIconSlot()} </span>
               ${this._selectionPanelElement ? html`<slot name="suffix"></slot>` : nothing}
             </span>
           </span>

diff --git a/src/components/checkbox/checkbox/readme.md b/src/components/checkbox/checkbox/readme.md
@@ -72,17 +72,17 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la
 
 ## Properties
 
-| Name            | Attribute        | Privacy | Type                              | Default | Description                                                                                                                            |
-| --------------- | ---------------- | ------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`         | `value`          | public  | `string \| undefined`             |         | Value of checkbox.                                                                                                                     |
-| `disabled`      | `disabled`       | public  | `boolean`                         | `false` | Whether the checkbox is disabled.                                                                                                      |
-| `required`      | `required`       | public  | `boolean`                         | `false` | Whether the checkbox is required.                                                                                                      |
-| `group`         | -                | public  | `SbbCheckboxGroupElement \| null` | `null`  | Reference to the connected checkbox group.                                                                                             |
-| `indeterminate` | `indeterminate`  | public  | `boolean`                         | `false` | Whether the checkbox is indeterminate.                                                                                                 |
-| `iconName`      | `icon-name`      | public  | `string \| undefined`             |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from https://icons.app.sbb.ch (optional). |
-| `iconPlacement` | `icon-placement` | public  | `SbbIconPlacement`                | `'end'` | The label position relative to the labelIcon. Defaults to end                                                                          |
-| `checked`       | `checked`        | public  | `boolean`                         | `false` | Whether the checkbox is checked.                                                                                                       |
-| `size`          | `size`           | public  | `SbbCheckboxSize`                 | `'m'`   | Label size variant, either m or s.                                                                                                     |
+| Name            | Attribute        | Privacy | Type                              | Default | Description                                                                                                                      |
+| --------------- | ---------------- | ------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `value`         | `value`          | public  | `string \| undefined`             |         | Value of checkbox.                                                                                                               |
+| `disabled`      | `disabled`       | public  | `boolean`                         | `false` | Whether the checkbox is disabled.                                                                                                |
+| `required`      | `required`       | public  | `boolean`                         | `false` | Whether the checkbox is required.                                                                                                |
+| `group`         | -                | public  | `SbbCheckboxGroupElement \| null` | `null`  | Reference to the connected checkbox group.                                                                                       |
+| `indeterminate` | `indeterminate`  | public  | `boolean`                         | `false` | Whether the checkbox is indeterminate.                                                                                           |
+| `iconPlacement` | `icon-placement` | public  | `SbbIconPlacement`                | `'end'` | The label position relative to the labelIcon. Defaults to end                                                                    |
+| `checked`       | `checked`        | public  | `boolean`                         | `false` | Whether the checkbox is checked.                                                                                                 |
+| `size`          | `size`           | public  | `SbbCheckboxSize`                 | `'m'`   | Label size variant, either m or s.                                                                                               |
+| `iconName`      | `icon-name`      | public  | `string \| undefined`             |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
 
 ## Events
 

diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts
@@ -1,11 +1,12 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
 
 import {
   NamedSlotStateController,
   resolveButtonRenderVariables,
   SbbDisabledMixin,
+  SbbIconNameMixin,
 } from '../../core/common-behaviors';
 import { setAttribute, setAttributes, toggleDatasetEntry } from '../../core/dom';
 import {
@@ -27,19 +28,12 @@ import '../../icon';
  * @event {CustomEvent<void>} toggleExpanded - Notifies that the `sbb-expansion-panel` has to expand.
  */
 @customElement('sbb-expansion-panel-header')
-export class SbbExpansionPanelHeaderElement extends SbbDisabledMixin(LitElement) {
+export class SbbExpansionPanelHeaderElement extends SbbDisabledMixin(SbbIconNameMixin(LitElement)) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     toggleExpanded: 'toggleExpanded',
   } as const;
 
-  /**
-   * The icon name we want to use, choose from the small icon variants
-   * from the ui-icons category from here
-   * https://icons.app.sbb.ch.
-   */
-  @property({ attribute: 'icon-name', reflect: true }) public iconName?: string;
-
   /** Notifies that the `sbb-expansion-panel` has to expand. */
   private _toggleExpanded: EventEmitter = new EventEmitter(
     this,
@@ -98,11 +92,7 @@ export class SbbExpansionPanelHeaderElement extends SbbDisabledMixin(LitElement)
     return html`
       <span class="sbb-expansion-panel-header">
         <span class="sbb-expansion-panel-header__title">
-          <span class="sbb-expansion-panel-header__icon">
-            <slot name="icon"
-              >${this.iconName ? html`<sbb-icon name=${this.iconName}></sbb-icon>` : nothing}
-            </slot>
-          </span>
+          <span class="sbb-expansion-panel-header__icon"> ${this.renderIconSlot()} </span>
           <slot></slot>
         </span>
         ${!this.disabled

diff --git a/src/components/expansion-panel/expansion-panel-header/readme.md b/src/components/expansion-panel/expansion-panel-header/readme.md
@@ -37,8 +37,8 @@ When the element is clicked, the `toggleExpanded` event is emitted.
 
 | Name       | Attribute   | Privacy | Type                  | Default | Description                                                                                                                      |
 | ---------- | ----------- | ------- | --------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `iconName` | `icon-name` | public  | `string \| undefined` |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
 | `disabled` | `disabled`  | public  | `boolean`             | `false` | Whether the component is disabled.                                                                                               |
+| `iconName` | `icon-name` | public  | `string \| undefined` |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
 
 ## Events
 

diff --git a/src/components/option/option/option.ts b/src/components/option/option/option.ts
@@ -3,7 +3,11 @@ import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import { assignId } from '../../core/a11y';
-import { NamedSlotStateController, SbbDisabledMixin } from '../../core/common-behaviors';
+import {
+  NamedSlotStateController,
+  SbbDisabledMixin,
+  SbbIconNameMixin,
+} from '../../core/common-behaviors';
 import {
   isSafari,
   isValidAttribute,
@@ -36,7 +40,7 @@ export type SbbOptionVariant = 'autocomplete' | 'select';
  * @event {CustomEvent<void>} optionSelected - Emits when an option was selected by user.
  */
 @customElement('sbb-option')
-export class SbbOptionElement extends SbbDisabledMixin(LitElement) {
+export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitElement)) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     selectionChange: 'optionSelectionChange',
@@ -46,13 +50,6 @@ export class SbbOptionElement extends SbbDisabledMixin(LitElement) {
   /** Value of the option. */
   @property() public value?: string;
 
-  /**
-   * The icon name we want to use, choose from the small icon variants
-   * from the ui-icons category from here
-   * https://icons.app.sbb.ch.
-   */
-  @property({ attribute: 'icon-name', reflect: true }) public iconName?: string;
-
   /** Whether the option is currently active. */
   @property({ reflect: true, type: Boolean }) public active?: boolean;
 
@@ -267,11 +264,7 @@ export class SbbOptionElement extends SbbDisabledMixin(LitElement) {
         <div class="sbb-option">
           <!-- Icon -->
           ${!isMultiple
-            ? html` <span class="sbb-option__icon">
-                <slot name="icon">
-                  ${this.iconName ? html`<sbb-icon name=${this.iconName}></sbb-icon>` : nothing}
-                </slot>
-              </span>`
+            ? html` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`
             : nothing}
 
           <!-- Checkbox -->

diff --git a/src/components/option/option/readme.md b/src/components/option/option/readme.md
@@ -62,10 +62,10 @@ If the label slot contains only a **text node**, it is possible to search for te
 | Name       | Attribute   | Privacy | Type                   | Default | Description                                                                                                                      |
 | ---------- | ----------- | ------- | ---------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | `value`    | `value`     | public  | `string \| undefined`  |         | Value of the option.                                                                                                             |
-| `iconName` | `icon-name` | public  | `string \| undefined`  |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
 | `active`   | `active`    | public  | `boolean \| undefined` |         | Whether the option is currently active.                                                                                          |
 | `selected` | `selected`  | public  | `boolean`              | `false` | Whether the option is selected.                                                                                                  |
 | `disabled` | `disabled`  | public  | `boolean`              | `false` | Whether the component is disabled.                                                                                               |
+| `iconName` | `icon-name` | public  | `string \| undefined`  |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
 
 ## Methods
 

diff --git a/src/components/tabs/tab-title/readme.md b/src/components/tabs/tab-title/readme.md
@@ -41,9 +41,9 @@ It is possible to display the component in `disabled` state by using the self-na
 | ---------- | ----------- | ------- | ------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `level`    | `level`     | public  | `TitleLevel \| undefined` | `'1'`   | The level will correspond to the heading tag generated in the title. Use this property to generate the appropriate header tag, taking SEO into consideration. |
 | `active`   | `active`    | public  | `boolean \| undefined`    |         | Active tab state                                                                                                                                              |
-| `iconName` | `icon-name` | public  | `string \| undefined`     |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch.                              |
 | `amount`   | `amount`    | public  | `string \| undefined`     |         | Amount displayed inside the tab.                                                                                                                              |
 | `disabled` | `disabled`  | public  | `boolean`                 | `false` | Whether the component is disabled.                                                                                                                            |
+| `iconName` | `icon-name` | public  | `string \| undefined`     |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch.                              |
 
 ## Slots
 

diff --git a/src/components/tabs/tab-title/tab-title.ts b/src/components/tabs/tab-title/tab-title.ts
@@ -1,9 +1,13 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
-import { LitElement, nothing } from 'lit';
+import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { NamedSlotStateController, SbbDisabledMixin } from '../../core/common-behaviors';
+import {
+  NamedSlotStateController,
+  SbbDisabledMixin,
+  SbbIconNameMixin,
+} from '../../core/common-behaviors';
 import type { TitleLevel } from '../../title';
 
 import style from './tab-title.scss?lit&inline';
@@ -17,7 +21,7 @@ import '../../icon';
  * @slot amount - Provide a number to show an amount to the right of the title.
  */
 @customElement('sbb-tab-title')
-export class SbbTabTitleElement extends SbbDisabledMixin(LitElement) {
+export class SbbTabTitleElement extends SbbDisabledMixin(SbbIconNameMixin(LitElement)) {
   public static override styles: CSSResultGroup = style;
 
   /**
@@ -29,13 +33,6 @@ export class SbbTabTitleElement extends SbbDisabledMixin(LitElement) {
   /** Active tab state */
   @property({ reflect: true, type: Boolean }) public active?: boolean;
 
-  /**
-   * The icon name we want to use, choose from the small icon variants
-   * from the ui-icons category from here
-   * https://icons.app.sbb.ch.
-   */
-  @property({ attribute: 'icon-name', reflect: true }) public iconName?: string;
-
   /** Amount displayed inside the tab. */
   @property({ reflect: true }) public amount?: string;
 
@@ -52,9 +49,7 @@ export class SbbTabTitleElement extends SbbDisabledMixin(LitElement) {
       <div class="sbb-tab-title__wrapper">
         <${unsafeStatic(TAGNAME)} class="sbb-tab-title">
           <span class="sbb-tab-title__icon">
-            <slot name="icon">
-              ${this.iconName ? html`<sbb-icon name=${this.iconName}></sbb-icon>` : nothing}
-            </slot>
+            ${this.renderIconSlot()}
           </span>
           <span class="sbb-tab-title__text">
             <slot></slot>