docs: add examples for loading indicator in button

sbb-design-systems · Nov 19, 2024 · 750c88d · 750c88d
1 parent 212992e
commit 750c88d
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/src/elements/button/button/button.stories.ts b/src/elements/button/button/button.stories.ts
@@ -3,6 +3,8 @@ import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/we
 import {
   buttonDefaultArgs,
   buttonDefaultArgTypes,
+  loading,
+  loading2,
   requestSubmit,
 } from '../common/button-common-stories.js';
 import {
@@ -47,6 +49,8 @@ export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const RequestSubmit: StoryObj = requestSubmit;
+export const Loading: StoryObj = loading;
+export const Loading2: StoryObj = loading2;
 export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {

diff --git a/src/elements/button/common/button-common-stories.ts b/src/elements/button/common/button-common-stories.ts
@@ -9,6 +9,7 @@ import { commonDefaultArgs, commonDefaultArgTypes } from './common-stories.js';
 
 import '../../action-group.js';
 import '../../form-field.js';
+import '../../loading-indicator.js';
 
 /* eslint-disable lit/binding-positions, @typescript-eslint/naming-convention */
 const FormTemplate = ({
@@ -44,6 +45,75 @@ const FormTemplate = ({
   <div id="form-data"></div>
 </form>`;
 
+/* eslint-disable lit/binding-positions, @typescript-eslint/naming-convention */
+const LoadingTemplate = ({
+  tag,
+  type: _type,
+  reset: _reset,
+  'icon-name': _iconName,
+  ...args
+}: Args): TemplateResult => html`
+    <${unsafeStatic(tag)} ${sbbSpread(args)} aria-busy="false"
+                          @click=${(e: PointerEvent) => {
+                            const button = (e.target as HTMLElement)!;
+                            const loadingIndicator =
+                              button.parentElement!.querySelector('sbb-loading-indicator')!;
+
+                            if (button.getAttribute('aria-busy') === 'false') {
+                              button.setAttribute('aria-busy', 'true');
+                              button.setAttribute('aria-disabled', 'true');
+                              button.style.setProperty(
+                                '--sbb-button-color-default-text',
+                                'transparent',
+                              );
+                              button.style.setProperty('pointer-events', 'none');
+                              loadingIndicator.style.removeProperty('display');
+
+                              setTimeout(() => {
+                                button.setAttribute('aria-busy', 'false');
+                                button.setAttribute('aria-disabled', 'false');
+                                button.style.removeProperty('--sbb-button-color-default-text');
+                                button.style.removeProperty('pointer-events');
+                                loadingIndicator.style.setProperty('display', 'none');
+                              }, 5000);
+                            }
+                          }}>
+      Click to submit
+      <sbb-loading-indicator variant="circle" aria-hidden style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display:none"></sbb-loading-indicator>
+    </${unsafeStatic(tag)}>
+   `;
+
+/* eslint-disable lit/binding-positions, @typescript-eslint/naming-convention */
+const LoadingTemplate2 = ({
+  tag,
+  type: _type,
+  reset: _reset,
+  'icon-name': _iconName,
+  ...args
+}: Args): TemplateResult => html`
+    <${unsafeStatic(tag)} ${sbbSpread(args)} aria-busy="false"
+                          @click=${(e: PointerEvent) => {
+                            const button = (e.target as HTMLElement)!;
+                            const loadingIndicator =
+                              button.parentElement!.querySelector('sbb-loading-indicator')!;
+
+                            if (button.getAttribute('aria-busy') === 'false') {
+                              button.setAttribute('aria-busy', 'true');
+                              button.setAttribute('aria-disabled', 'true');
+                              loadingIndicator.style.setProperty('width', '20px');
+
+                              setTimeout(() => {
+                                button.setAttribute('aria-busy', 'false');
+                                button.setAttribute('aria-disabled', 'false');
+                                loadingIndicator.style.setProperty('width', '0px');
+                              }, 5000);
+                            }
+                          }}>
+      <sbb-loading-indicator variant="circle" aria-hidden style="width:0; overflow-x: clip; transition: width var(--sbb-animation-duration-2x) var(--sbb-animation-easing)"></sbb-loading-indicator>
+      Click to submit
+    </${unsafeStatic(tag)}>
+   `;
+
 /* eslint-enable lit/binding-positions, @typescript-eslint/naming-convention */
 
 const type: InputType = {
@@ -133,3 +203,11 @@ export const requestSubmit: StoryObj = {
   render: FormTemplate,
   args: { text: undefined, type: undefined, value: 'submit button' },
 };
+
+export const loading: StoryObj = {
+  render: LoadingTemplate,
+};
+
+export const loading2: StoryObj = {
+  render: LoadingTemplate2,
+};