feat: step and step-group xs variant

.changeset/every-beans-search.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/docs': minor
+---
+
+Added new documentation for `xs` size variant in `sd-step` and `sd-step-group`, including new template for `sd-step-group` using `xs` size variant.

.changeset/sparkly-wombats-dig.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/tokens': minor
+---
+
+Added new ` --sd-color-border-neutral-700` variable.

.changeset/thirty-carpets-joke.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/components': minor
+---
+
+Added new `xs` size variant for `sd-step` and `sd-step-group`. This variant is only available with vertical `orientation` and if this attribute is not set, the component will not be rendered.

packages/components/src/components/step-group/step-group.ts

@@ -1,4 +1,4 @@
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement } from '../../internal/register-custom-element';
 import { property, query } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
@@ -25,7 +25,7 @@ export default class SdStepGroup extends SolidElement {
   @query('[part=body]') body: HTMLSlotElement;
 
   /** The step-groups's size. */
-  @property({ type: String, reflect: true }) size: 'lg' | 'sm' = 'lg';
+  @property({ type: String, reflect: true }) size: 'lg' | 'sm' | 'xs' = 'lg';
 
   /** Determines the orientation of the step-group. */
   @property({ type: String, reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
@@ -133,6 +133,11 @@ export default class SdStepGroup extends SolidElement {
   }
 
   render() {
+    if (this.size === 'xs' && this.orientation !== 'vertical') {
+      console.warn('Size "xs" is only supported when orientation is "vertical". The element will not be rendered.');
+      return nothing;
+    }
+
     return html`
       <div role="${!this.notInteractive ? 'navigation' : 'group'}" class="h-full" aria-label="${this.label}">
         <div role="list" part="base" class=${cx('flex', this.orientation === 'vertical' && 'flex-col h-full')}>

packages/components/src/components/step/step.ts

@@ -1,5 +1,5 @@
 import '../icon/icon';
-import { css } from 'lit';
+import { css, nothing } from 'lit';
 import { customElement } from '../../internal/register-custom-element';
 import { HasSlotController } from '../../internal/slot';
 import { html, literal } from 'lit/static-html.js';
@@ -41,7 +41,7 @@ export default class SdStep extends SolidElement {
   private readonly hasSlotController = new HasSlotController(this, 'label', '[default]');
 
   /** The step's size. */
-  @property({ type: String, reflect: true }) size: 'lg' | 'sm' = 'lg';
+  @property({ type: String, reflect: true }) size: 'lg' | 'sm' | 'xs' = 'lg';
 
   /** Determines the orientation of the step. */
   @property({ type: String, reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
@@ -126,6 +126,11 @@ export default class SdStep extends SolidElement {
   }
 
   render() {
+    if (this.size === 'xs' && this.orientation !== 'vertical') {
+      console.warn('Size "xs" is only supported when orientation is "vertical". The element will not be rendered.');
+      return nothing;
+    }
+
     const isLink = this.isLink();
     const tag = this.notInteractive || this.waiting ? literal`div` : isLink ? literal`a` : literal`button`;
     const hasLabelSlot = this.hasSlotController.test('label');
@@ -143,7 +148,7 @@ export default class SdStep extends SolidElement {
         ? this.size === 'lg'
           ? 'translateLg'
           : 'translateSm'
-        : this.size === 'lg'
+        : this.size === 'lg' || this.size === 'xs'
           ? 'mt-1'
           : 'mt-3'
     );
@@ -155,18 +160,31 @@ export default class SdStep extends SolidElement {
         : !this.notInteractive && !this.waiting
           ? 'focus-visible:focus-outline hover:cursor-pointer'
           : '',
-      this.notInteractive ? (this.size === 'lg' ? 'not-interactive-lg' : 'w-12') : this.size === 'lg' ? 'w-12' : 'w-8',
+      this.notInteractive
+        ? this.size === 'lg'
+          ? 'not-interactive-lg'
+          : this.size === 'xs'
+            ? 'w-2'
+            : 'w-12'
+        : this.size === 'lg'
+          ? 'w-12'
+          : this.size === 'xs'
+            ? 'w-2'
+            : 'w-8',
       this.disabled && 'border-neutral-500 text-neutral-500',
       this.waiting && 'border-neutral-400 text-neutral-700',
+      this.waiting && this.size === 'xs' && 'border-neutral-700',
       !this.disabled &&
         !this.current &&
         !this.notInteractive &&
         !this.waiting &&
         'border-primary hover:bg-primary-100 hover:border-primary-500',
-      this.notInteractive && 'border-neutral-400',
+      this.notInteractive && (this.size === 'xs' ? 'border-primary' : 'border-neutral-400'),
       this.current && 'bg-accent border-none text-white'
     );
 
+    const listItemClasses = 'flex-row items-stretch h-full w-full overflow-hidden';
+
     /* eslint-disable lit/no-invalid-html */
     /* eslint-disable lit/binding-positions */
     return html`
@@ -177,7 +195,9 @@ export default class SdStep extends SolidElement {
           'flex pt-1',
           this.orientation === 'horizontal'
             ? 'flex-col w-full'
-            : 'flex-row gap-4 items-stretch h-full w-full overflow-hidden',
+            : this.size === 'xs'
+              ? `${listItemClasses} gap-2`
+              : `${listItemClasses} gap-4`,
           !this.disabled && !this.current && !this.notInteractive && !this.waiting && 'group'
         )}
         @focus=${this.handleFocus}
@@ -209,13 +229,15 @@ export default class SdStep extends SolidElement {
               )}
             >
               ${
-                !this.disabled && !this.current && !this.notInteractive && !this.waiting
+                !this.disabled && !this.current && !this.notInteractive && !this.waiting && this.size !== 'xs'
                   ? html` <sd-icon
                       name="status-check"
                       library="_internal"
                       class="${cx(this.size === 'sm' && 'text-sm')}"
                     ></sd-icon>`
-                  : html`${this.index}`
+                  : this.size === 'xs'
+                    ? ''
+                    : html`${this.index}`
               }
             </slot>
           </${tag}>
@@ -265,7 +287,7 @@ export default class SdStep extends SolidElement {
                           part="description"
                           id="description"
                           class=${cx(
-                            'sd-paragraph sd-paragraph--size-sm break-words',
+                            'sd-paragraph sd-paragraph--size-sm wrap-break-word',
                             hasDescription ? 'flex-1' : 'w-0 h-0 overflow-hidden',
                             hasDescription && !this.noTail && 'pr-4',
                             (this.disabled || this.waiting) && '!text-neutral-700'
@@ -284,7 +306,7 @@ export default class SdStep extends SolidElement {
                       class=${cx(
                         this.orientation === 'horizontal'
                           ? 'border-t w-full my-auto mr-2'
-                          : 'border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto',
+                          : 'border-l grow shrink-0 basis-auto h-full w-[1px] mx-auto',
                         !this.disabled && !this.current && !this.notInteractive && !this.waiting
                           ? 'border-primary group-hover:border-primary-500'
                           : 'border-neutral-400'
@@ -299,11 +321,12 @@ export default class SdStep extends SolidElement {
                 <div
                   part="text-container"
                   class=${cx(
-                    'mt-4 break-words flex flex-col gap-2',
+                    'wrap-break-word flex flex-col gap-2',
+                    this.size === 'xs' ? '-mt-1 mb-4' : 'mt-4',
                     this.orientation === 'horizontal' ? 'text-center w-40' : 'text-left',
                     this.disabled && 'text-neutral-500',
                     this.waiting && 'text-neutral-700',
-                    this.notInteractive ? 'ml-2' : 'mr-4'
+                    this.notInteractive ? (this.size === 'xs' ? 'ml-0' : 'ml-2') : 'mr-4'
                   )}
                 >
                   <div
@@ -352,7 +375,7 @@ export default class SdStep extends SolidElement {
       }
 
       :host([no-tail]) {
-        @apply flex-grow-0;
+        @apply grow-0;
       }
 
       :host(:not([current])) (:not([notInteractive])) slot[name='circle-content'] {

packages/docs/src/stories/components/step-group.stories.ts

@@ -55,6 +55,7 @@ export const Default = {
  *
  * - `lg`(default)
  * - `sm`
+ * - `xs` (only available with vertical orientation)
  */
 export const Size = {
   name: 'Size',
@@ -87,6 +88,22 @@ export const Size = {
           <p slot="label">Step 3</p>
         </sd-step>
       </sd-step-group>
+
+      <div class="h-[20em] pl-[56px]">
+        <sd-step-group size="xs" orientation="vertical" active-step="1" label="Extra Small">
+          <sd-step size="xs" orientation="vertical">
+            <p slot="label">Step 1</p>
+          </sd-step>
+
+          <sd-step size="xs" orientation="vertical" current>
+            <p slot="label">Step 2</p>
+          </sd-step>
+
+          <sd-step size="xs" orientation="vertical" waiting>
+            <p slot="label">Step 3</p>
+          </sd-step>
+        </sd-step-group>
+      </div>
     </div>
   `
 };

packages/docs/src/stories/components/step-group.test.stories.ts

@@ -118,7 +118,7 @@ export const notInteractive = {
     return generateTemplate({
       axis: {
         x: { type: 'attribute', name: 'not-interactive' },
-        y: { type: 'attribute', name: 'size' }
+        y: { type: 'attribute', name: 'size', values: ['lg', 'sm', 'xs'] }
       },
       args,
       options: {
@@ -127,6 +127,21 @@ export const notInteractive = {
             .map(([attr, value]) => `${attr}='${value}'`)
             .join(' ');
 
+          if (attributes.size === 'xs') {
+            const xsSlots = `
+              <sd-step size="xs" orientation="vertical">
+                <p slot="label">Lorem ipsum dolor sit</p>
+              </sd-step>
+              <sd-step size="xs" orientation="vertical" current>
+                <p slot="label">Exercitation ullamco laboris</p>
+              </sd-step>
+              <sd-step size="xs" orientation="vertical" waiting>
+                <p slot="label">Reprehenderit qui in e name</p>
+              </sd-step>`;
+
+            return `<div class="h-[20em]"><sd-step-group orientation="vertical" ${attrs} label="${attributes.size}-${attributes['not-interactive']}">${xsSlots}</sd-step-group></div>`;
+          }
+
           const slotted = Object.entries(slots ?? {})
             .map(([, slot]) => slot)
             .join('\n');
@@ -140,7 +155,7 @@ export const notInteractive = {
     (story: () => typeof html) => html`
       <style>
         td.template {
-          width: 100%;
+          width: fit-content;
         }
       </style>
       ${story()}

packages/docs/src/stories/components/step.stories.ts

@@ -64,18 +64,22 @@ export const Default = {
  *
  * - `lg`(default)
  * - `sm`
+ * - `xs` (only available with vertical orientation)
  */
 
 export const Size = {
   name: 'Size',
   render: () => html`
-    <div class="flex gap-12 w-min">
+    <div class="flex gap-12 w-min-content">
       <sd-step size="lg">
         <span slot="label">Large</span>
       </sd-step>
       <sd-step size="sm">
         <span slot="label">Small</span>
       </sd-step>
+      <sd-step size="xs" orientation="vertical" class="pl-16">
+        <span slot="label">Extra Small</span>
+      </sd-step>
     </div>
   `
 };
@@ -252,12 +256,18 @@ export const Description = {
         <p class="sd-paragraph">Description lorem ipsum sic semper</p>
       </sd-step>
     </div>
-    <div class="w-[293px]">
+    <div class="mb-8 w-[293px]">
       <sd-step orientation="horizontal">
         <span slot="label">Step name</span>
         <p class="sd-paragraph">Description lorem ipsum sic semper</p>
       </sd-step>
     </div>
+    <div class="mb-8 h-[7em]">
+      <sd-step size="xs" orientation="vertical" class="pl-8">
+        <span slot="label">Step name</span>
+        <p class="sd-paragraph">Description lorem ipsum sic semper</p>
+      </sd-step>
+    </div>
   `
 };
 

packages/docs/src/stories/components/step.test.stories.ts

@@ -79,6 +79,47 @@ export const Orientation = {
   ]
 };
 
+export const Sizes = {
+  name: 'Sizes',
+  render: () => {
+    return generateTemplate({
+      axis: {
+        y: {
+          type: 'attribute',
+          name: 'size',
+          values: ['lg', 'sm', 'xs'].map(size => {
+            return { title: size, value: size };
+          })
+        }
+      },
+      args: overrideArgs([
+        {
+          type: 'slot',
+          name: 'label',
+          value: `<span slot="label">Step name</span>`
+        }
+      ]),
+      options: {
+        templateRenderer: ({ attributes, slots }) => {
+          const attrs = Object.entries(attributes)
+            .map(([attr, value]) => `${attr}='${value}'`)
+            .join(' ');
+
+          if (attributes.size === 'xs') {
+            return `<div class="h-[5em]"><sd-step ${attrs} orientation="vertical"><span slot="label">Step name</span></sd-step></div>`;
+          }
+
+          const slotted = Object.entries(slots ?? {})
+            .map(([, slot]) => slot)
+            .join('\n');
+
+          return `<sd-step ${attrs}>${slotted}</sd-step>`;
+        }
+      }
+    });
+  }
+};
+
 export const HorizontalInline = {
   name: 'Horizontal Inline',
   render: () => {
@@ -325,6 +366,7 @@ export const Mouseless = {
 export const Combination = generateScreenshotStory([
   Default,
   Orientation,
+  Sizes,
   HorizontalInline,
   Waiting,
   Disabled,