fix: minor fixes

sbb-design-systems · Jan 24, 2024 · 9edbcdd · 9edbcdd
1 parent 1a37908
commit 9edbcdd
Show file tree

Hide file tree

Showing 19 changed files with 198 additions and 214 deletions.
diff --git a/src/components/action-group/action-group.ts b/src/components/action-group/action-group.ts
@@ -2,9 +2,9 @@ import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { SbbButtonSize, SbbButtonElement } from '../button';
+import type { SbbButtonElement, SbbButtonSize } from '../button';
 import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces';
-import type { SbbLinkSize, SbbLinkElement } from '../link';
+import type { SbbLinkElement, SbbLinkSize } from '../link';
 
 import style from './action-group.scss?lit&inline';
 

diff --git a/src/components/button/button-link/readme.md b/src/components/button/button-link/readme.md
@@ -80,18 +80,18 @@ Use the accessibility properties in case of an icon-only button to describe the
 
 ## Properties
 
-| Name       | Attribute   | Privacy | Type                                                 | Default     | Description                                                                                                                                            |
-| ---------- | ----------- | ------- | ---------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `variant`  | `variant`   | public  | `SbbButtonVariant`                                   | `'primary'` | Variant of the button, like primary, secondary etc.                                                                                                    |
-| `size`     | `size`      | public  | `SbbButtonSize \| undefined`                         | `'l'`       | Size variant, either l or m.                                                                                                                           |
-| `isStatic` | `is-static` | public  | `boolean`                                            | `false`     | Set this property to true if you want only a visual representation of a button, but no interaction (a span instead of a link/button will be rendered). |
-| `negative` | `negative`  | public  | `boolean`                                            | `false`     | Negative coloring variant flag.                                                                                                                        |
-| `disabled` | `disabled`  | public  | `boolean \| undefined`                               | `false`     | Whether the button 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.                       |
-| `href`     | `href`      | public  | `string \| undefined`                                |             | The href value you want to link to.                                                                                                                    |
-| `target`   | `target`    | public  | `LinkTargetType \| string \| undefined \| undefined` |             | Where to display the linked URL.                                                                                                                       |
-| `rel`      | `rel`       | public  | `string \| undefined \| undefined`                   |             | The relationship of the linked URL as space-separated link types.                                                                                      |
-| `download` | `download`  | public  | `boolean \| undefined`                               |             | Whether the browser will show the download dialog on click.                                                                                            |
+| Name       | Attribute   | Privacy | Type                                    | Default     | Description                                                                                                                                            |
+| ---------- | ----------- | ------- | --------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `variant`  | `variant`   | public  | `SbbButtonVariant`                      | `'primary'` | Variant of the button, like primary, secondary etc.                                                                                                    |
+| `size`     | `size`      | public  | `SbbButtonSize \| undefined`            | `'l'`       | Size variant, either l or m.                                                                                                                           |
+| `isStatic` | `is-static` | public  | `boolean`                               | `false`     | Set this property to true if you want only a visual representation of a button, but no interaction (a span instead of a link/button will be rendered). |
+| `negative` | `negative`  | public  | `boolean`                               | `false`     | Negative coloring variant flag.                                                                                                                        |
+| `disabled` | `disabled`  | public  | `boolean \| undefined`                  | `false`     | Whether the button 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.                       |
+| `href`     | `href`      | public  | `string \| undefined`                   |             | The href value you want to link to.                                                                                                                    |
+| `target`   | `target`    | public  | `LinkTargetType \| string \| undefined` |             | Where to display the linked URL.                                                                                                                       |
+| `rel`      | `rel`       | public  | `string \| undefined`                   |             | The relationship of the linked URL as space-separated link types.                                                                                      |
+| `download` | `download`  | public  | `boolean \| undefined`                  |             | Whether the browser will show the download dialog on click.                                                                                            |
 
 ## Slots
 

diff --git a/src/components/card/card-action/card-link/readme.md b/src/components/card/card-action/card-link/readme.md
@@ -23,13 +23,13 @@ as it is used for search engines and screen-reader users.
 
 ## Properties
 
-| Name       | Attribute  | Privacy | Type                                                 | Default | Description                                                       |
-| ---------- | ---------- | ------- | ---------------------------------------------------- | ------- | ----------------------------------------------------------------- |
-| `active`   | `active`   | public  | `boolean`                                            | `false` | Whether the card is active.                                       |
-| `href`     | `href`     | public  | `string \| undefined`                                |         | The href value you want to link to.                               |
-| `target`   | `target`   | public  | `LinkTargetType \| string \| undefined \| undefined` |         | Where to display the linked URL.                                  |
-| `rel`      | `rel`      | public  | `string \| undefined \| undefined`                   |         | The relationship of the linked URL as space-separated link types. |
-| `download` | `download` | public  | `boolean \| undefined`                               |         | Whether the browser will show the download dialog on click.       |
+| Name       | Attribute  | Privacy | Type                                    | Default | Description                                                       |
+| ---------- | ---------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- |
+| `active`   | `active`   | public  | `boolean`                               | `false` | Whether the card is active.                                       |
+| `href`     | `href`     | public  | `string \| undefined`                   |         | The href value you want to link to.                               |
+| `target`   | `target`   | public  | `LinkTargetType \| string \| undefined` |         | Where to display the linked URL.                                  |
+| `rel`      | `rel`      | public  | `string \| undefined`                   |         | The relationship of the linked URL as space-separated link types. |
+| `download` | `download` | public  | `boolean \| undefined`                  |         | Whether the browser will show the download dialog on click.       |
 
 ## Slots
 

diff --git a/src/components/card/card-action/index.ts b/src/components/card/card-action/index.ts
@@ -1,2 +1,3 @@
 export * from './card-button';
 export * from './card-link';
+export * from './card-action-common';
diff --git a/src/components/core/common-behaviors/button-base-element.ts b/src/components/core/common-behaviors/button-base-element.ts
@@ -10,11 +10,11 @@ export type ButtonType = 'button' | 'reset' | 'submit';
 
 /** The interface contains attributes that can be set on a <button> tag.  */
 export interface ButtonProperties {
-  type?: ButtonType | undefined;
-  name?: string | undefined;
-  value?: string | undefined;
-  form?: string | undefined;
-  disabled?: boolean | undefined;
+  type?: ButtonType;
+  name?: string;
+  value?: string;
+  form?: string;
+  disabled?: boolean;
 }
 
 /** Button base class. */

diff --git a/src/components/core/common-behaviors/link-base-element.ts b/src/components/core/common-behaviors/link-base-element.ts
@@ -11,11 +11,11 @@ export type LinkTargetType = '_blank' | '_self' | '_parent' | '_top';
 
 /** The interface contains attributes that can be set on an <a> tag. */
 export interface LinkProperties {
-  href?: string | undefined;
-  target?: LinkTargetType | string | undefined;
-  rel?: string | undefined;
-  download?: boolean | undefined;
-  disabled?: boolean | undefined;
+  href?: string;
+  target?: LinkTargetType | string;
+  rel?: string;
+  download?: boolean;
+  disabled?: boolean;
 }
 
 function filterUndefined(...objects: Record<string, string | undefined>[]): Record<string, string> {
@@ -101,13 +101,13 @@ export function targetsNewWindow(properties: LinkProperties): boolean {
 /** Link base class. */
 export class SbbLinkBaseElement extends LitElement implements LinkProperties {
   /** The href value you want to link to. */
-  @property() public href: string | undefined;
+  @property() public href?: string;
 
   /** Where to display the linked URL. */
-  @property() public target?: LinkTargetType | string | undefined;
+  @property() public target?: LinkTargetType | string;
 
   /** The relationship of the linked URL as space-separated link types. */
-  @property() public rel?: string | undefined;
+  @property() public rel?: string;
 
   /** Whether the browser will show the download dialog on click. */
   @property({ type: Boolean }) public download?: boolean;

diff --git a/src/components/header/header-action/header-link/header-link.spec.ts b/src/components/header/header-action/header-link/header-link.spec.ts
@@ -19,8 +19,7 @@ describe('sbb-header-link', () => {
 
     await waitForLitRender(root);
 
-    expect(root).dom.to.be.equal(
-      `
+    expect(root).dom.to.be.equal(`
       <sbb-header-link
        data-expanded
        dir="ltr"
@@ -33,26 +32,23 @@ describe('sbb-header-link', () => {
        >
         Action
       </sbb-header-link>
-    `,
-    );
-    expect(root).shadowDom.to.be.equal(
-      `
-          <a class="sbb-header-action" href="https://github.com/lyne-design-system/lyne-components" rel="external noopener nofollow" role="presentation" tabindex="-1" target="_blank">
-            <span class="sbb-header-action__wrapper">
-              <span class="sbb-header-action__icon">
-                <slot name="icon">
-                  <sbb-icon aria-hidden="true" data-namespace="default" name="pie-small" role="img"></sbb-icon>
-                </slot>
-              </span>
-              <span class="sbb-header-action__text">
-                <slot></slot>
-                <span class="sbb-header-action__opens-in-new-window">
-                  . Link target opens in new window.
-                </span>
-              </span>
+    `);
+    expect(root).shadowDom.to.be.equal(`
+      <a class="sbb-header-action" href="https://github.com/lyne-design-system/lyne-components" rel="external noopener nofollow" role="presentation" tabindex="-1" target="_blank">
+        <span class="sbb-header-action__wrapper">
+          <span class="sbb-header-action__icon">
+            <slot name="icon">
+              <sbb-icon aria-hidden="true" data-namespace="default" name="pie-small" role="img"></sbb-icon>
+            </slot>
+          </span>
+          <span class="sbb-header-action__text">
+            <slot></slot>
+            <span class="sbb-header-action__opens-in-new-window">
+              . Link target opens in new window.
             </span>
-          </a>
-        `,
-    );
+          </span>
+        </span>
+      </a>
+    `);
   });
 });
diff --git a/src/components/header/header-action/header-link/readme.md b/src/components/header/header-action/header-link/readme.md
@@ -32,14 +32,14 @@ Please note that if the `href` is not provider it is internally rendered as a sp
 
 ## Properties
 
-| Name         | Attribute     | Privacy | Type                                                 | Default    | Description                                                                                                                                                                              |
-| ------------ | ------------- | ------- | ---------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `expandFrom` | `expand-from` | public  | `SbbHorizontalFrom`                                  | `'medium'` | Used to set the minimum breakpoint from which the text is displayed. E.g. if set to 'large', the text will be visible for breakpoints large, wide, ultra, and hidden for all the others. |
-| `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.                                                         |
-| `href`       | `href`        | public  | `string \| undefined`                                |            | The href value you want to link to.                                                                                                                                                      |
-| `target`     | `target`      | public  | `LinkTargetType \| string \| undefined \| undefined` |            | Where to display the linked URL.                                                                                                                                                         |
-| `rel`        | `rel`         | public  | `string \| undefined \| undefined`                   |            | The relationship of the linked URL as space-separated link types.                                                                                                                        |
-| `download`   | `download`    | public  | `boolean \| undefined`                               |            | Whether the browser will show the download dialog on click.                                                                                                                              |
+| Name         | Attribute     | Privacy | Type                                    | Default    | Description                                                                                                                                                                              |
+| ------------ | ------------- | ------- | --------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `expandFrom` | `expand-from` | public  | `SbbHorizontalFrom`                     | `'medium'` | Used to set the minimum breakpoint from which the text is displayed. E.g. if set to 'large', the text will be visible for breakpoints large, wide, ultra, and hidden for all the others. |
+| `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.                                                         |
+| `href`       | `href`        | public  | `string \| undefined`                   |            | The href value you want to link to.                                                                                                                                                      |
+| `target`     | `target`      | public  | `LinkTargetType \| string \| undefined` |            | Where to display the linked URL.                                                                                                                                                         |
+| `rel`        | `rel`         | public  | `string \| undefined`                   |            | The relationship of the linked URL as space-separated link types.                                                                                                                        |
+| `download`   | `download`    | public  | `boolean \| undefined`                  |            | Whether the browser will show the download dialog on click.                                                                                                                              |
 
 ## Slots
 

diff --git a/src/components/header/header-action/index.ts b/src/components/header/header-action/index.ts
@@ -1,2 +1,3 @@
 export * from './header-button';
 export * from './header-link';
+export * from './header-action-common';
diff --git a/src/components/link-list/link-list.ts b/src/components/link-list/link-list.ts
@@ -5,8 +5,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 
 import { NamedSlotStateController, SlotChildObserver } from '../core/common-behaviors';
 import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces';
-import type { SbbLinkElement } from '../link';
-import type { SbbLinkSize } from '../link/link-common';
+import type { SbbLinkSize, SbbLinkElement } from '../link';
 import type { TitleLevel } from '../title';
 
 import style from './link-list.scss?lit&inline';

diff --git a/src/components/link/link-common.ts b/src/components/link/link-common.ts
@@ -5,7 +5,7 @@ import type { Constructor } from '../core/common-behaviors';
 import { LanguageController, NamedSlotStateController } from '../core/common-behaviors';
 import { ACTION_ELEMENTS, hostContext } from '../core/dom';
 import { actionElementHandlerAspect, HandlerRepository } from '../core/eventing';
-import type { SbbIconPlacement } from '../core/interfaces';
+import type { IsStaticProperty, SbbIconPlacement } from '../core/interfaces';
 
 import '../icon';
 
@@ -24,7 +24,10 @@ export declare class SbbLinkCommonInterface {
 export const SbbLinkCommonElementMixin = <T extends Constructor<LitElement>>(
   superClass: T,
 ): Constructor<SbbLinkCommonInterface> & T => {
-  class SbbLinkCommonElement extends superClass implements Partial<SbbLinkCommonInterface> {
+  class SbbLinkCommonElement
+    extends superClass
+    implements Partial<SbbLinkCommonInterface>, IsStaticProperty
+  {
     public static styles: CSSResultGroup = style;
 
     /** Variant of the link (block or inline). */