@flightlesslabs/dodo-ui 0.1.1 → 0.1.3

package/src/lib/stories/components/Form/Button/Button.svelte

@@ -1,5 +1,19 @@
+<script lang="ts" module>
+  export type ButtonColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
+  export type ButtonRoundness = ComponentRoundness | false | ComponentRoundnessFull;
+  export type ButtonLinkTarget =
+    | '_self'
+    | '_blank'
+    | '_parent'
+    | '_top'
+    | (string & {})
+    | undefined
+    | null;
+  export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
+</script>
+
 <script lang="ts">
-  import type { ComponentSize } from '$lib/types.js';
+  import type { ComponentRoundness, ComponentRoundnessFull, ComponentSize } from '$lib/types.js';
   import type { Snippet } from 'svelte';
 
   interface ButtonProps {
@@ -10,7 +24,9 @@
     /** How large should the button be? */
     size?: ComponentSize;
     /** What color to use? */
-    color?: 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
+    color?: ButtonColor;
+    /** How round should the border radius be? */
+    roundness?: ButtonRoundness;
     /** How should the button appear? */
     variant?: 'text' | 'solid';
     /** Add a border around the button */
@@ -34,8 +50,9 @@
     /** The onclick event handler */
     onclick?: (e: MouseEvent) => void;
     /** Turn Button into link */
-    href?: string | undefined | null;
+    href?: string;
     /** Link button: download  */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     download?: any;
     /** Link button: hreflang  */
     hreflang?: string | undefined | null;
@@ -46,18 +63,21 @@
     /** Link button: rel  */
     rel?: string | undefined | null;
     /** Link button: target  */
-    target?: '_self' | '_blank' | '_parent' | '_top' | (string & {}) | undefined | null;
+    target?: ButtonLinkTarget;
     /** Link button: Type  */
     anchorMediaType?: string | undefined | null;
     /** Link button: referrerpolicy  */
-    referrerpolicy?: ReferrerPolicy | undefined | null;
+    referrerpolicy?: ButtonLinkReferrerpolicy;
+    /** Test: ⚠️ Unsafe Children String. Do Not use*/
+    _unsafeChildrenStringForTesting?: string;
   }
 
   const {
     children,
     type = 'button',
     size = 'normal',
-    color = 'primary',
+    color = 'default',
+    roundness = 1,
     variant = 'text',
     outline = false,
     compact = false,
@@ -78,6 +98,7 @@
     target,
     anchorMediaType,
     referrerpolicy,
+    _unsafeChildrenStringForTesting,
   }: ButtonProps = $props();
 </script>
 
@@ -90,6 +111,8 @@
 
   {#if children}
     {@render children()}
+  {:else if _unsafeChildrenStringForTesting}
+    {_unsafeChildrenStringForTesting}
   {/if}
 
   {#if after}
@@ -116,10 +139,11 @@
     class:compact
     class:disabled
     class={[
-      'dodo-button',
+      'dodo-ui-button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
+      `roundness--${roundness}`,
       className,
     ].join(' ')}
   >
@@ -130,10 +154,11 @@
     class:outline
     class:compact
     class={[
-      'dodo-button',
+      'dodo-ui-button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
+      `roundness--${roundness}`,
       className,
     ].join(' ')}
     {type}
@@ -148,4 +173,168 @@
 {/if}
 
 <style lang="scss">
+  @use 'utils/scss/mixins.scss' as *;
+
+  :global(:root) {
+    --dodo-ui-button-disabled-color: var(--dodo-color-default-400);
+    --dodo-ui-button-disabled-bg: var(--dodo-color-default-200);
+
+    @include generate-dodo-ui-button-colors(default);
+    @include generate-dodo-ui-button-colors(primary);
+    @include generate-dodo-ui-button-colors(safe);
+    @include generate-dodo-ui-button-colors(warning);
+    @include generate-dodo-ui-button-colors(danger);
+    @include generate-dodo-ui-button-colors(info);
+  }
+
+  :global(.dodo-theme--dark) {
+    --dodo-ui-button-disabled-bg: var(--dodo-color-default-100);
+    --dodo-ui-button-disabled-color: var(--dodo-color-default-500);
+
+    @include generate-dodo-ui-button-colors-dark(default);
+    @include generate-dodo-ui-button-colors-dark(primary);
+    @include generate-dodo-ui-button-colors-dark(safe);
+    @include generate-dodo-ui-button-colors-dark(warning);
+    @include generate-dodo-ui-button-colors-dark(danger);
+    @include generate-dodo-ui-button-colors-dark(info);
+  }
+
+  .dodo-ui-button {
+    cursor: pointer;
+    outline: none;
+    transition: all 150ms;
+    text-decoration: none;
+    margin: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-family: inherit;
+    font-weight: 500;
+    background-color: transparent;
+    border: 1px solid;
+    border-color: transparent;
+    outline: 0;
+    color: inherit;
+    letter-spacing: 0.3px;
+
+    &.size {
+      &--normal {
+        height: var(--dodo-ui-element-height-normal);
+        font-size: 1rem;
+        padding: 0 12px;
+        min-width: 45px;
+      }
+
+      &--small {
+        height: var(--dodo-ui-element-height-small);
+        padding: 0 8px;
+        font-size: 0.9rem;
+        min-width: 35px;
+      }
+
+      &--large {
+        height: var(--dodo-ui-element-height-large);
+        font-size: 1.1rem;
+        padding: 0 16px;
+        min-width: 85px;
+      }
+    }
+
+    &.roundness {
+      &--1 {
+        border-radius: var(--dodo-ui-element-roundness-1);
+      }
+
+      &--2 {
+        border-radius: var(--dodo-ui-element-roundness-2);
+      }
+
+      &--3 {
+        border-radius: var(--dodo-ui-element-roundness-3);
+      }
+
+      &--4 {
+        border-radius: var(--dodo-ui-element-roundness-4);
+      }
+
+      &--full {
+        border-radius: 50%;
+      }
+    }
+
+    &.color {
+      @include generate-dodo-ui-button-color(default);
+      @include generate-dodo-ui-button-color(primary);
+      @include generate-dodo-ui-button-color(safe);
+      @include generate-dodo-ui-button-color(warning);
+      @include generate-dodo-ui-button-color(danger);
+      @include generate-dodo-ui-button-color(info);
+    }
+
+    &[disabled] {
+      cursor: initial;
+
+      &.variant {
+        &--text,
+        &--solid {
+          background-color: var(--dodo-ui-button-disabled-bg);
+          color: var(--dodo-ui-button-disabled-color);
+
+          &:hover {
+            background-color: var(--dodo-ui-button-disabled-bg);
+            color: var(--dodo-ui-button-disabled-color);
+          }
+
+          &:active {
+            background-color: var(--dodo-ui-button-disabled-bg);
+            color: var(--dodo-ui-button-disabled-color);
+          }
+
+          &.outline {
+            border-color: transparent;
+          }
+        }
+      }
+    }
+
+    &.compact {
+      &.size {
+        &--normal,
+        &--small,
+        &--large {
+          min-width: initial;
+          padding: 0;
+        }
+
+        &--normal {
+          width: var(--dodo-ui-element-height-normal);
+        }
+
+        &--small {
+          width: var(--dodo-ui-element-height-small);
+        }
+
+        &--large {
+          width: var(--dodo-ui-element-height-large);
+        }
+      }
+    }
+
+    .button-content {
+      &--after,
+      &--before {
+        display: inline-flex;
+        height: 100%;
+        align-items: center;
+      }
+
+      &--before {
+        margin-right: 6px;
+      }
+
+      &--after {
+        margin-left: 6px;
+      }
+    }
+  }
 </style>

package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte

@@ -8,10 +8,7 @@
   const { Story } = defineMeta({
     component: Button,
     tags: ['autodocs'],
-    // @ts-ignore
-    argTypes: {
-      ...storyButtonArgTypes,
-    },
+    argTypes: storyButtonArgTypes,
     args: {
       onclick: fn(),
     },
@@ -26,3 +23,44 @@
 <Story name="Warning" args={{ color: 'warning' }}><Button color="warning">Click me!</Button></Story>
 <Story name="Danger" args={{ color: 'danger' }}><Button color="danger">Click me!</Button></Story>
 <Story name="Info" args={{ color: 'info' }}><Button color="info">Click me!</Button></Story>
+
+<Story
+  name="Default Solid"
+  args={{ outline: false, disabled: false, compact: false, variant: 'solid' }}
+>
+  <Button variant="solid">Click me!</Button>
+</Story>
+<Story name="Primary Solid" args={{ color: 'primary', variant: 'solid' }}>
+  <Button color="primary" variant="solid">Click me!</Button>
+</Story>
+<Story name="Safe Solid" args={{ color: 'safe', variant: 'solid' }}>
+  <Button color="safe" variant="solid">Click me!</Button>
+</Story>
+<Story name="Warning Solid" args={{ color: 'warning', variant: 'solid' }}>
+  <Button color="warning" variant="solid">Click me!</Button>
+</Story>
+<Story name="Danger Solid" args={{ color: 'danger', variant: 'solid' }}>
+  <Button color="danger" variant="solid">Click me!</Button>
+</Story>
+<Story name="Info Solid" args={{ color: 'info', variant: 'solid' }}>
+  <Button color="info" variant="solid">Click me!</Button>
+</Story>
+
+<Story name="Default Outline" args={{ outline: true, disabled: false, compact: false }}>
+  <Button outline>Click me!</Button>
+</Story>
+<Story name="Primary Outline" args={{ outline: true, color: 'primary' }}>
+  <Button color="primary" outline>Click me!</Button>
+</Story>
+<Story name="Safe Outline" args={{ outline: true, color: 'safe' }}>
+  <Button color="safe" outline>Click me!</Button>
+</Story>
+<Story name="Warning Outline" args={{ outline: true, color: 'warning' }}>
+  <Button color="warning" outline>Click me!</Button>
+</Story>
+<Story name="Danger Outline" args={{ outline: true, color: 'danger' }}>
+  <Button color="danger" outline>Click me!</Button>
+</Story>
+<Story name="Info Outline" args={{ outline: true, color: 'info' }}>
+  <Button color="info" outline>Click me!</Button>
+</Story>

package/src/lib/stories/components/Form/Button/IconButton/IconButton.stories.svelte

@@ -9,10 +9,7 @@
   const { Story } = defineMeta({
     component: Button,
     tags: ['autodocs'],
-    // @ts-ignore
-    argTypes: {
-      ...storyButtonArgTypes,
-    },
+    argTypes: storyButtonArgTypes,
     args: {
       onclick: fn(),
     },
@@ -21,7 +18,16 @@
 
 <!-- Compact button with paddings stripped out and fixed size. We are using this icon library https://iconify.design/docs/icon-components/svelte/ -->
 <Story name="Icon Button" args={{ compact: true }}>
-  <Button compact><Icon icon="material-symbols:app-badging" width="24" height="24" /></Button>
+  <Button compact>
+    <Icon icon="material-symbols:app-badging" width="18" height="18" />
+  </Button>
+</Story>
+
+<!-- Circualr Icon button. -->
+<Story name="Icon Button Circular" args={{ compact: true, roundness: 'full' }}>
+  <Button roundness="full" compact>
+    <Icon icon="material-symbols:app-badging" width="18" height="18" />
+  </Button>
 </Story>
 
 <!-- Button with an icon in front. -->

package/src/lib/stories/components/Form/Button/Roundness/Roundness.stories.svelte

@@ -0,0 +1,46 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { fn } from '@storybook/test';
+  import Button from '../Button.svelte';
+  import { storyButtonArgTypes } from '../Button.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+    args: {
+      onclick: fn(),
+    },
+  });
+</script>
+
+<Story
+  name="Roundness1"
+  args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
+>
+  <Button roundness="full">Click me!</Button>
+</Story>
+
+<Story name="Roundness2" args={{ outline: false, disabled: false, compact: false, roundness: 2 }}>
+  <Button roundness={2}>Click me!</Button>
+</Story>
+
+<Story name="Roundness3" args={{ outline: false, disabled: false, compact: false, roundness: 3 }}>
+  <Button roundness={3}>Click me!</Button>
+</Story>
+
+<Story
+  name="RoundnessFalse"
+  args={{ outline: false, disabled: false, compact: false, roundness: false }}
+>
+  <Button roundness={false}>Click me!</Button>
+</Story>
+
+<!-- Button with 50% roundness usefull for icon (Compact) buttons -->
+<Story
+  name="RoundnessFull"
+  args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
+>
+  <Button roundness="full">C</Button>
+</Story>

package/src/lib/stories/components/Form/Button/Size/Size.stories.svelte

@@ -8,10 +8,7 @@
   const { Story } = defineMeta({
     component: Button,
     tags: ['autodocs'],
-    // @ts-ignore
-    argTypes: {
-      ...storyButtonArgTypes,
-    },
+    argTypes: storyButtonArgTypes,
     args: {
       onclick: fn(),
     },

package/src/lib/stories/components/Form/Button/Variant/Variant.stories.svelte

@@ -8,10 +8,7 @@
   const { Story } = defineMeta({
     component: Button,
     tags: ['autodocs'],
-    // @ts-ignore
-    argTypes: {
-      ...storyButtonArgTypes,
-    },
+    argTypes: storyButtonArgTypes,
     args: {
       onclick: fn(),
     },

package/src/lib/stories/components/Form/Button/utils/scss/mixins.scss

@@ -0,0 +1,70 @@
+/// Mixin: generate-dodo-ui-button-colors
+/// Generates CSS custom properties for Dodo UI button styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-button-colors($color-name) {
+  --dodo-ui-button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-400);
+
+  --dodo-ui-button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-300);
+
+  --dodo-ui-button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+  --dodo-ui-button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
+  --dodo-ui-button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-700);
+}
+
+/// Mixin: generate-dodo-ui-button-colors
+/// Generates CSS custom properties for Dodo UI button styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-button-colors-dark($color-name) {
+  --dodo-ui-button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
+
+  --dodo-ui-button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
+  --dodo-ui-button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+
+  --dodo-ui-button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-100);
+}
+
+/// Mixin: generate-dodo-ui-button-color
+/// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
+/// @param {String} $theme - e.g., default, safe, danger, etc.
+@mixin generate-dodo-ui-button-color($theme) {
+  &--#{$theme} {
+    &.variant {
+      &--text {
+        color: var(--dodo-color-#{$theme}-800);
+        background-color: var(--dodo-ui-button-text-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-button-text-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-button-text-#{$theme}-active-bg);
+        }
+
+        &.outline {
+          border-color: var(--dodo-ui-button-outline-#{$theme});
+        }
+      }
+
+      &--solid {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-button-solid-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-button-solid-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-button-solid-#{$theme}-active-bg);
+        }
+      }
+    }
+  }
+}

package/src/lib/storybook-types.ts

@@ -0,0 +1,182 @@
+type ControlType =
+  | 'object'
+  | 'boolean'
+  | 'check'
+  | 'inline-check'
+  | 'radio'
+  | 'inline-radio'
+  | 'select'
+  | 'multi-select'
+  | 'number'
+  | 'range'
+  | 'file'
+  | 'color'
+  | 'date'
+  | 'text';
+
+interface ControlBase {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+  /** @see https://storybook.js.org/docs/api/arg-types#controltype */
+  type?: ControlType;
+  disable?: boolean;
+}
+
+type Control =
+  | ControlType
+  | false
+  | (ControlBase &
+      (
+        | ControlBase
+        | {
+            type: 'color';
+            /** @see https://storybook.js.org/docs/api/arg-types#controlpresetcolors */
+            presetColors?: string[];
+          }
+        | {
+            type: 'file';
+            /** @see https://storybook.js.org/docs/api/arg-types#controlaccept */
+            accept?: string;
+          }
+        | {
+            type: 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select';
+            /** @see https://storybook.js.org/docs/api/arg-types#controllabels */
+            labels?: {
+              [options: string]: string;
+            };
+          }
+        | {
+            type: 'number' | 'range';
+            /** @see https://storybook.js.org/docs/api/arg-types#controlmax */
+            max?: number;
+            /** @see https://storybook.js.org/docs/api/arg-types#controlmin */
+            min?: number;
+            /** @see https://storybook.js.org/docs/api/arg-types#controlstep */
+            step?: number;
+          }
+      ));
+
+type ConditionalTest =
+  | {
+      truthy?: boolean;
+    }
+  | {
+      exists: boolean;
+    }
+  | {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      eq: any;
+    }
+  | {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      neq: any;
+    };
+type ConditionalValue =
+  | {
+      arg: string;
+    }
+  | {
+      global: string;
+    };
+type Conditional = ConditionalValue & ConditionalTest;
+
+interface Args {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [name: string]: any;
+}
+
+interface SBBaseType {
+  required?: boolean;
+  raw?: string;
+}
+type SBScalarType = SBBaseType & {
+  name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
+};
+type SBArrayType = SBBaseType & {
+  name: 'array';
+  value: SBType;
+};
+type SBObjectType = SBBaseType & {
+  name: 'object';
+  value: Record<string, SBType>;
+};
+type SBEnumType = SBBaseType & {
+  name: 'enum';
+  value: (string | number)[];
+};
+type SBIntersectionType = SBBaseType & {
+  name: 'intersection';
+  value: SBType[];
+};
+type SBUnionType = SBBaseType & {
+  name: 'union';
+  value: SBType[];
+};
+type SBOtherType = SBBaseType & {
+  name: 'other';
+  value: string;
+};
+
+type SBType =
+  | SBScalarType
+  | SBEnumType
+  | SBArrayType
+  | SBObjectType
+  | SBIntersectionType
+  | SBUnionType
+  | SBOtherType;
+
+interface InputType {
+  /** @see https://storybook.js.org/docs/api/arg-types#control */
+  control?: Control;
+  /** @see https://storybook.js.org/docs/api/arg-types#description */
+  description?: string;
+  /** @see https://storybook.js.org/docs/api/arg-types#if */
+  if?: Conditional;
+  /** @see https://storybook.js.org/docs/api/arg-types#mapping */
+  mapping?: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+  };
+  /** @see https://storybook.js.org/docs/api/arg-types#name */
+  name?: string;
+  /** @see https://storybook.js.org/docs/api/arg-types#options */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  options?: readonly any[];
+  /** @see https://storybook.js.org/docs/api/arg-types#table */
+  table?: {
+    [key: string]: unknown;
+    /** @see https://storybook.js.org/docs/api/arg-types#tablecategory */
+    category?: string;
+    /** @see https://storybook.js.org/docs/api/arg-types#tabledefaultvalue */
+    defaultValue?: {
+      summary?: string;
+      detail?: string;
+    };
+    /** @see https://storybook.js.org/docs/api/arg-types#tabledisable */
+    disable?: boolean;
+    /** @see https://storybook.js.org/docs/api/arg-types#tablesubcategory */
+    subcategory?: string;
+    /** @see https://storybook.js.org/docs/api/arg-types#tabletype */
+    type?: {
+      summary?: string;
+      detail?: string;
+    };
+  };
+  /** @see https://storybook.js.org/docs/api/arg-types#type */
+  type?: SBType | SBScalarType['name'];
+  /**
+   * @deprecated Use `table.defaultValue.summary` instead.
+   * @see https://storybook.js.org/docs/api/arg-types#defaultvalue
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defaultValue?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+export type ArgTypes<TArgs = Args> = {
+  [name in keyof TArgs]: InputType;
+};
+
+export type StoryBookArgTypes = Partial<ArgTypes<Args>>;