feat(sbb-toggle-check): add size 'xs' (#2724)

sbb-design-systems · Jun 13, 2024 · 7415aeb · 7415aeb
1 parent 861f98d
commit 7415aeb
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 9 deletions.
diff --git a/src/elements/toggle-check/__snapshots__/toggle-check.snapshot.spec.snap.js b/src/elements/toggle-check/__snapshots__/toggle-check.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-toggle-check should render DOM"] = 
+snapshots["sbb-toggle-check renders DOM"] = 
 `<sbb-toggle-check
   checked=""
   data-checked=""
@@ -11,9 +11,9 @@ snapshots["sbb-toggle-check should render DOM"] =
 >
 </sbb-toggle-check>
 `;
-/* end snapshot sbb-toggle-check should render DOM */
+/* end snapshot sbb-toggle-check renders DOM */
 
-snapshots["sbb-toggle-check should render Shadow DOM"] = 
+snapshots["sbb-toggle-check renders Shadow DOM"] = 
 `<span class="sbb-toggle-check">
   <span class="sbb-toggle-check__container">
     <span class="sbb-toggle-check__label">
@@ -38,7 +38,7 @@ snapshots["sbb-toggle-check should render Shadow DOM"] =
   </span>
 </span>
 `;
-/* end snapshot sbb-toggle-check should render Shadow DOM */
+/* end snapshot sbb-toggle-check renders Shadow DOM */
 
 snapshots["sbb-toggle-check A11y tree Chrome"] = 
 `<p>

diff --git a/src/elements/toggle-check/readme.md b/src/elements/toggle-check/readme.md
@@ -31,6 +31,17 @@ The component can be displayed in `checked` or `disabled` states using the self-
 <sbb-toggle-check name="other" value="Value" disabled>Option</sbb-toggle-check>
 ```
 
+## Style
+
+The component has three different sizes (`xs`, `s`, which is the default, and `m`),
+which can be changed using the `size` property.
+
+```html
+<sbb-toggle-check size="m" value="single-checkbox"> Example in m size</sbb-toggle-check>
+
+<sbb-toggle-check size="xs" value="single-checkbox"> Example in xs size </sbb-toggle-check>
+```
+
 ## Events
 
 Consumers can listen to the native `change` event on the `sbb-toggle-check` component to intercept the input's change;

diff --git a/src/elements/toggle-check/toggle-check.scss b/src/elements/toggle-check/toggle-check.scss
@@ -113,6 +113,10 @@
   :host([size='m']) & {
     @include sbb.text-m--regular;
   }
+
+  :host([size='xs']) & {
+    @include sbb.text-xs--regular;
+  }
 }
 
 .sbb-toggle-check__label {

diff --git a/src/elements/toggle-check/toggle-check.snapshot.spec.ts b/src/elements/toggle-check/toggle-check.snapshot.spec.ts
@@ -8,7 +8,7 @@ import type { SbbToggleCheckElement } from './toggle-check.js';
 import './toggle-check.js';
 
 describe(`sbb-toggle-check`, () => {
-  describe('should render', async () => {
+  describe('renders', async () => {
     let element: SbbToggleCheckElement;
 
     beforeEach(async () => {

diff --git a/src/elements/toggle-check/toggle-check.stories.ts b/src/elements/toggle-check/toggle-check.stories.ts
@@ -24,7 +24,7 @@ const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['s', 'm'],
+  options: ['xs', 's', 'm'],
 };
 
 const checked: InputType = {
@@ -89,7 +89,7 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  size: size.options![0],
+  size: size.options![1],
   checked: false,
   disabled: false,
   label: 'Label',
@@ -178,7 +178,16 @@ export const SbbToggleCheckDefaultSizeM: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    size: size.options![1],
+    size: size.options![2],
+  },
+};
+
+export const SbbToggleCheckDefaultSizeXS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: {
+    ...defaultArgs,
+    size: size.options![0],
   },
 };
 
@@ -206,7 +215,17 @@ export const SbbToggleCheckDefaultLongLabelSizeM: StoryObj = {
   args: {
     ...defaultArgs,
     label: longLabel,
-    size: size.options![1],
+    size: size.options![2],
+  },
+};
+
+export const SbbToggleCheckDefaultLongLabelSizeXS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: {
+    ...defaultArgs,
+    label: longLabel,
+    size: size.options![0],
   },
 };