feat(sbb-file-selector): split file-selector variants in separate com…

…ponents (#3198)

BREAKING CHANGE: The `sbb-file-selector` has been split into two components based on the values of the `variant` property. The `files` property has now `Readonly<File>[]` type instead than `File[]` to not allow the direct modification of the inner `File` properties.
Changes:
- the `variant` property has been removed from the `sbb-file-selector` component;
- the `sbb-file-selector` now corresponds to the old `default` variant;
- a new component named `sbb-file-selector-dropzone` has been created; it corresponds to the old `dropzone` variant;
- the 'titleContent' property has been removed from the `sbb-file-selector` (since it refers only to dropzone case);
- the `files` property now returns a `Readonly<File>[]`;
- the deprecated `getFiles()` method has been removed.

src/elements/button/common/common-stories.ts

@@ -107,6 +107,11 @@ export const commonDefaultArgTypes: ArgTypes = {
   'icon-name': iconName,
 };
 
+/**
+ * NOTE
+ * The tag is the tagName of the component to display in stories,
+ * so it must be overridden before use.
+ */
 export const commonDefaultArgs: Args = {
   tag: 'TBD',
   text: 'Button',

src/elements/file-selector.ts

@@ -1 +1,3 @@
+export * from './file-selector/common.js';
+export * from './file-selector/file-selector-dropzone.js';
 export * from './file-selector/file-selector.js';

src/elements/file-selector/common.ts

@@ -0,0 +1,3 @@
+export * from './common/file-selector-common.js';
+
+export { default as fileSelectorCommonStyle } from './common/file-selector-common.scss?lit&inline';

src/elements/file-selector/common/file-selector-common-stories.ts

@@ -0,0 +1,147 @@
+import type { InputType } from '@storybook/types';
+import type { Args, ArgTypes, StoryObj } from '@storybook/web-components';
+import { type TemplateResult } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
+
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import type { SbbFormErrorElement } from '../../form-error.js';
+import type { SbbFileSelectorDropzoneElement } from '../file-selector-dropzone.js';
+import type { SbbFileSelectorElement } from '../file-selector.js';
+
+/* eslint-disable lit/binding-positions, @typescript-eslint/naming-convention */
+export const FileSelectorTemplate = ({ tag, ...args }: Args): TemplateResult =>
+  html`<${unsafeStatic(tag)} ${sbbSpread(args)}></${unsafeStatic(tag)}>`;
+
+export const FileSelectorTemplateWithError = ({ tag, ...args }: Args): TemplateResult => {
+  const sbbFormError: SbbFormErrorElement = document.createElement('sbb-form-error');
+  sbbFormError.setAttribute('slot', 'error');
+  sbbFormError.textContent = 'There has been an error.';
+
+  return html`
+    <${unsafeStatic(tag)}
+      ${sbbSpread(args)}
+      id="sbb-file-selector"
+      @fileChanged=${(event: CustomEvent<File[]>) => {
+        if (event.detail && event.detail.length > 0) {
+          (event.target as SbbFileSelectorElement | SbbFileSelectorDropzoneElement)!.append(
+            sbbFormError,
+          );
+        } else {
+          sbbFormError.remove();
+        }
+      }}
+    ></${unsafeStatic(tag)}>
+  `;
+};
+/* eslint-enable lit/binding-positions, @typescript-eslint/naming-convention */
+
+const size: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['m', 's'],
+};
+
+const disabled: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const multiple: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const multipleMode: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['default', 'persistent'],
+};
+
+const accept: InputType = {
+  control: {
+    type: 'text',
+  },
+};
+
+const accessibilityLabel: InputType = {
+  control: {
+    type: 'text',
+  },
+};
+
+const tag: InputType = {
+  control: {
+    type: 'text',
+  },
+  table: {
+    disable: true,
+  },
+};
+
+export const fileSelectorDefaultArgTypes: ArgTypes = {
+  tag,
+  size,
+  disabled,
+  multiple,
+  'multiple-mode': multipleMode,
+  accept,
+  'accessibility-label': accessibilityLabel,
+};
+
+/**
+ * NOTE
+ * The tag is the tagName of the component to display in stories,
+ * so it must be overridden before use.
+ */
+export const fileSelectorDefaultArgs: Args = {
+  tag: 'TBD',
+  size: size.options![0],
+  disabled: false,
+  multiple: false,
+  'multiple-mode': multipleMode.options![0],
+  accept: undefined,
+  'accessibility-label': 'Select from hard disk',
+};
+
+export const fileSelectorMultipleDefaultArgs: Args = {
+  ...fileSelectorDefaultArgs,
+  multiple: true,
+  'accessibility-label': 'Select from hard disk - multiple files allowed',
+};
+
+export const defaultFileSelector: StoryObj = {
+  render: FileSelectorTemplate,
+};
+
+export const defaultDisabled: StoryObj = {
+  render: FileSelectorTemplate,
+  args: { disabled: true },
+};
+
+export const defaultMulti: StoryObj = {
+  render: FileSelectorTemplate,
+  args: fileSelectorMultipleDefaultArgs,
+};
+
+export const defaultMultiPersistent: StoryObj = {
+  render: FileSelectorTemplate,
+  args: { ...fileSelectorMultipleDefaultArgs, 'multiple-mode': 'persistent' },
+};
+
+export const defaultWithError: StoryObj = {
+  render: FileSelectorTemplateWithError,
+};
+
+export const defaultOnlyPDF: StoryObj = {
+  render: FileSelectorTemplate,
+  args: { accept: '.pdf' },
+};
+
+export const defaultMultiSizeS: StoryObj = {
+  render: FileSelectorTemplate,
+  args: { ...fileSelectorMultipleDefaultArgs, size: 's' },
+};

src/elements/file-selector/file-selector.scss → src/elements/file-selector/common/file-selector-common.scss

@@ -1,4 +1,4 @@
-@use '../core/styles' as sbb;
+@use '../../core/styles' as sbb;
 
 // Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
 @include sbb.box-sizing;
@@ -44,40 +44,6 @@
   @include sbb.screen-reader-only;
 }
 
-.sbb-file-selector__dropzone-area {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: var(--sbb-spacing-responsive-s);
-  background-color: var(--sbb-file-selector-background-color);
-  border: var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);
-  border-radius: var(--sbb-border-radius-4x);
-  transition-duration: var(--sbb-file-selector-transition-duration);
-  transition-timing-function: var(--sbb-file-selector-transition-easing-function);
-  transition-property: background-color, border-color;
-}
-
-.sbb-file-selector__dropzone-area--icon {
-  color: var(--sbb-file-selector-color);
-  line-height: 0;
-}
-
-.sbb-file-selector__dropzone-area--title {
-  @include sbb.text--bold;
-  @include sbb.title-6($exclude-spacing: true);
-
-  text-align: center;
-  color: var(--sbb-file-selector-color);
-}
-
-.sbb-file-selector__dropzone-area--subtitle {
-  @include sbb.text-xs--regular;
-
-  text-align: center;
-  color: var(--sbb-file-selector-subtitle-color);
-  margin-block-end: var(--sbb-spacing-fixed-4x);
-}
-
 .sbb-file-selector__file-list {
   display: flex;
   flex-direction: column;