feat(sbb-paginator): add disabled property (#3130)

sbb-design-systems · Oct 17, 2024 · d43f64c · d43f64c
1 parent 449ee6d
commit d43f64c
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 9 deletions.
diff --git a/src/elements/paginator/paginator.scss b/src/elements/paginator/paginator.scss
@@ -12,6 +12,7 @@
   --sbb-paginator-page-border-width: 0;
   --sbb-paginator-page-border-style: none;
   --sbb-paginator-page-border-color: none;
+  --sbb-paginator-page-cursor: pointer;
   --sbb-paginator-page-inset: 0;
   --sbb-paginator-animation-easing: var(--sbb-animation-easing);
   --sbb-paginator-animation-duration: var(
@@ -97,7 +98,7 @@
   @include sbb.text-s--regular;
 
   position: relative;
-  cursor: pointer;
+  cursor: var(--sbb-paginator-page-cursor);
   outline: none !important;
   color: var(--sbb-paginator-page-color);
   transition: color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);
@@ -136,8 +137,6 @@
 
     :host([negative]) & {
       --sbb-paginator-page-color: var(--sbb-color-milk);
-      --sbb-paginator-page-border-width: var(--sbb-border-width-2x);
-      --sbb-paginator-page-border-style: solid;
       --sbb-paginator-page-border-color: var(--sbb-color-white);
     }
 
@@ -146,7 +145,30 @@
     }
   }
 
-  &:hover {
+  &:disabled {
+    --sbb-paginator-page-color: var(--sbb-color-smoke);
+    --sbb-paginator-page-border-style: dashed;
+    --sbb-paginator-page-border-color: var(--sbb-color-smoke);
+    --sbb-paginator-page-background-color: var(--sbb-color-milk);
+    --sbb-paginator-page-cursor: default;
+
+    &:not([data-selected]) {
+      --sbb-paginator-page-border-width: var(--sbb-border-width-1x);
+    }
+
+    :host([negative]) & {
+      --sbb-paginator-page-color: var(--sbb-color-aluminium);
+      --sbb-paginator-page-background-color: var(--sbb-color-charcoal);
+    }
+
+    @include sbb.if-forced-colors {
+      --sbb-paginator-page-border-color: GrayText;
+      --sbb-paginator-page-color: GrayText;
+      --sbb-paginator-page-background-color: Canvas;
+    }
+  }
+
+  &:not(:disabled):hover {
     @include sbb.hover-mq($hover: true) {
       --sbb-paginator-page-background-color: var(--sbb-color-milk);
       --sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);
@@ -162,7 +184,7 @@
     }
   }
 
-  &:active {
+  &:not(:disabled):active {
     --sbb-paginator-page-color: var(--sbb-color-charcoal);
     --sbb-paginator-page-background-color: var(--sbb-color-cloud);
     --sbb-paginator-page-inset: 0;

diff --git a/src/elements/paginator/paginator.stories.ts b/src/elements/paginator/paginator.stories.ts
@@ -68,6 +68,12 @@ const negative: InputType = {
   },
 };
 
+const disabled: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const defaultArgTypes: ArgTypes = {
   length,
   'page-size': pageSize,
@@ -76,6 +82,7 @@ const defaultArgTypes: ArgTypes = {
   'pager-position': pagerPosition,
   size,
   negative,
+  disabled,
 };
 
 const defaultArgs: Args = {
@@ -86,6 +93,7 @@ const defaultArgs: Args = {
   'pager-position': pagerPosition.options![0],
   size: size.options![0],
   negative: false,
+  disabled: false,
 };
 
 const Template = ({ pageSizeOptions, ...args }: Args): TemplateResult => {
@@ -108,6 +116,12 @@ export const Negative: StoryObj = {
   args: { ...defaultArgs, negative: true },
 };
 
+export const Disabled: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, disabled: true },
+};
+
 export const SizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
@@ -126,6 +140,17 @@ export const WithPageSizeOptions: StoryObj = {
   args: { ...defaultArgs, length: 1000, pageSizeOptions: pageSizeOptions.options![1] },
 };
 
+export const WithPageSizeOptionsDisabled: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: {
+    ...defaultArgs,
+    length: 1000,
+    disabled: true,
+    pageSizeOptions: pageSizeOptions.options![1],
+  },
+};
+
 export const WithPageSizeOptionsNegative: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,

diff --git a/src/elements/paginator/paginator.ts b/src/elements/paginator/paginator.ts
@@ -20,7 +20,7 @@ import {
   i18nPreviousPage,
   i18nSelectedPage,
 } from '../core/i18n.js';
-import { SbbNegativeMixin } from '../core/mixins.js';
+import { SbbDisabledMixin, SbbNegativeMixin } from '../core/mixins.js';
 import type { SbbSelectElement } from '../select.js';
 
 import style from './paginator.scss?lit&inline';
@@ -53,7 +53,7 @@ let nextId = 0;
 @hostAttributes({
   role: 'group',
 })
-export class SbbPaginatorElement extends SbbNegativeMixin(LitElement) {
+export class SbbPaginatorElement extends SbbNegativeMixin(SbbDisabledMixin(LitElement)) {
   public static override styles: CSSResultGroup = style;
   public static readonly events: Record<string, string> = {
     page: 'page',
@@ -275,15 +275,15 @@ export class SbbPaginatorElement extends SbbNegativeMixin(LitElement) {
           id="sbb-paginator-prev-page"
           aria-label=${i18nPreviousPage[this._language.current]}
           icon-name="chevron-small-left-small"
-          ?disabled=${this.pageIndex === 0}
+          ?disabled=${this.disabled || this.pageIndex === 0}
           @click=${() => this._pageIndexChanged(this._pageIndex - 1)}
         ></sbb-mini-button>
         <sbb-divider orientation="vertical"></sbb-divider>
         <sbb-mini-button
           id="sbb-paginator-next-page"
           aria-label=${i18nNextPage[this._language.current]}
           icon-name="chevron-small-right-small"
-          ?disabled=${this.pageIndex === this._numberOfPages() - 1}
+          ?disabled=${this.disabled || this.pageIndex === this._numberOfPages() - 1}
           @click=${() => this._pageIndexChanged(this._pageIndex + 1)}
         ></sbb-mini-button>
       </sbb-mini-button-group>
@@ -308,6 +308,7 @@ export class SbbPaginatorElement extends SbbNegativeMixin(LitElement) {
                 this.pageSizeOptions![0]}
                 @change=${(e: CustomEvent) =>
                   this._pageSizeChanged(+((e.target as SbbSelectElement).value as string))}
+                ?disabled=${this.disabled}
               >
                 ${repeat(
                   this.pageSizeOptions!,
@@ -336,6 +337,7 @@ export class SbbPaginatorElement extends SbbNegativeMixin(LitElement) {
                   <li class="sbb-paginator__page--number">
                     <button
                       ?data-selected=${this.pageIndex === item}
+                      ?disabled=${this.disabled}
                       class="sbb-paginator__page--number-item"
                       data-index=${item}
                       aria-label="${i18nPage[this._language.current]} ${item + 1}"

diff --git a/src/elements/paginator/paginator.visual.spec.ts b/src/elements/paginator/paginator.visual.spec.ts
@@ -46,6 +46,16 @@ describe('sbb-paginator', () => {
                 }
               });
             }
+
+            it(
+              'disabled=true',
+              visualDiffDefault.with(async (setup) => {
+                await setup.withFixture(
+                  html`<sbb-paginator length="100" disabled ?negative=${negative}></sbb-paginator>`,
+                  { ...wrapperStyle, forcedColors },
+                );
+              }),
+            );
           });
         }
 

diff --git a/src/elements/paginator/readme.md b/src/elements/paginator/readme.md
@@ -29,6 +29,14 @@ The dropdown menu and the previous / next buttons are facing each other with the
 <sbb-paginator length="100" page-size="20" page-size-options="[10, 20, 50]"></sbb-paginator>
 ```
 
+## States
+
+The component can be disabled by using the `disabled` property.
+
+```html
+<sbb-paginator length="100" page-size="20" disabled></sbb-paginator>
+```
+
 ## Style
 
 The component has two `size`, named `s` and `m` (default).
@@ -59,6 +67,7 @@ that describes the content controlled by the paginator.
 
 | Name              | Attribute           | Privacy | Type                    | Default   | Description                                                                                                                                                                      |
 | ----------------- | ------------------- | ------- | ----------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled`        | `disabled`          | public  | `boolean`               | `false`   | Whether the component is disabled.                                                                                                                                               |
 | `length`          | `length`            | public  | `number`                | `0`       | Total number of items.                                                                                                                                                           |
 | `negative`        | `negative`          | public  | `boolean`               | `false`   | Negative coloring variant flag.                                                                                                                                                  |
 | `pageIndex`       | `page-index`        | public  | `number`                | `0`       | Current page index.                                                                                                                                                              |