@flightlesslabs/dodo-ui 0.1.5 → 0.3.0

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

@@ -15,6 +15,7 @@
 <script lang="ts">
   import type { ComponentRoundness, ComponentRoundnessFull, ComponentSize } from '$lib/types.js';
   import type { Snippet } from 'svelte';
+  import type { MouseEventHandler } from 'svelte/elements';
 
   interface ButtonProps {
     /** Button contents goes here*/
@@ -23,6 +24,8 @@
     type?: 'button' | 'submit';
     /** How large should the button be? */
     size?: ComponentSize;
+    /** Full width button? */
+    fullWidth?: boolean;
     /** What color to use? */
     color?: ButtonColor;
     /** How round should the border radius be? */
@@ -48,7 +51,7 @@
     /** Custom css class*/
     class?: string;
     /** The onclick event handler */
-    onclick?: (e: MouseEvent) => void;
+    onclick?: MouseEventHandler<HTMLButtonElement>;
     /** Turn Button into link */
     href?: string;
     /** Link button: download  */
@@ -77,10 +80,11 @@
     type = 'button',
     size = 'normal',
     color = 'default',
-    roundness = 1,
+    roundness = '1x',
     variant = 'text',
     outline = false,
     compact = false,
+    fullWidth = false,
     name,
     id,
     title,
@@ -104,7 +108,7 @@
 
 {#snippet buttonContent()}
   {#if before}
-    <span class="button-content--before">
+    <span class="content--before">
       {@render before()}
     </span>
   {/if}
@@ -116,7 +120,7 @@
   {/if}
 
   {#if after}
-    <span class="button-content--after">
+    <span class="content--after">
       {@render after()}
     </span>
   {/if}
@@ -138,8 +142,9 @@
     class:outline
     class:compact
     class:disabled
+    class:fullWidth
     class={[
-      'dodo-ui-button',
+      'dodo-ui-Button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
@@ -153,8 +158,9 @@
   <button
     class:outline
     class:compact
+    class:fullWidth
     class={[
-      'dodo-ui-button',
+      'dodo-ui-Button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
@@ -176,8 +182,8 @@
   @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);
+    --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);
@@ -188,8 +194,8 @@
   }
 
   :global(.dodo-theme--dark) {
-    --dodo-ui-button-disabled-bg: var(--dodo-color-default-100);
-    --dodo-ui-button-disabled-color: var(--dodo-color-default-500);
+    --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);
@@ -199,7 +205,7 @@
     @include generate-dodo-ui-button-colors-dark(info);
   }
 
-  .dodo-ui-button {
+  .dodo-ui-Button {
     cursor: pointer;
     outline: none;
     transition: all 150ms;
@@ -209,9 +215,9 @@
     justify-content: center;
     align-items: center;
     font-family: inherit;
-    font-weight: 500;
     background-color: transparent;
-    border: 1px solid;
+    border-style: solid;
+    border-width: var(--dodo-ui-element-border-width);
     border-color: transparent;
     outline: 0;
     color: inherit;
@@ -241,20 +247,16 @@
     }
 
     &.roundness {
-      &--1 {
-        border-radius: var(--dodo-ui-element-roundness-1);
+      &--1x {
+        border-radius: var(--dodo-ui-element-roundness-1x);
       }
 
-      &--2 {
-        border-radius: var(--dodo-ui-element-roundness-2);
+      &--2x {
+        border-radius: var(--dodo-ui-element-roundness-2x);
       }
 
-      &--3 {
-        border-radius: var(--dodo-ui-element-roundness-3);
-      }
-
-      &--4 {
-        border-radius: var(--dodo-ui-element-roundness-4);
+      &--3x {
+        border-radius: var(--dodo-ui-element-roundness-3x);
       }
 
       &--full {
@@ -277,17 +279,17 @@
       &.variant {
         &--text,
         &--solid {
-          background-color: var(--dodo-ui-button-disabled-bg);
-          color: var(--dodo-ui-button-disabled-color);
+          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);
+            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);
+            background-color: var(--dodo-ui-Button-disabled-bg);
+            color: var(--dodo-ui-Button-disabled-color);
           }
 
           &.outline {
@@ -320,7 +322,11 @@
       }
     }
 
-    .button-content {
+    &.fullWidth {
+      width: 100%;
+    }
+
+    .content {
       &--after,
       &--before {
         display: inline-flex;

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

@@ -0,0 +1,42 @@
+<script module lang="ts">
+  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="Click"
+  args={{
+    outline: false,
+    disabled: false,
+    compact: false,
+    onclick: (e: Event) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+>
+  <Button
+    onclick={(e: Event) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    }}
+  >
+    Click me!
+  </Button>
+</Story>

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

@@ -15,23 +15,26 @@
   });
 </script>
 
-<Story
-  name="Roundness1"
-  args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
->
-  <Button roundness="full">Click me!</Button>
+<Story name="Roundness 1x" args={{ outline: false, disabled: false, compact: false }}>
+  <Button>Click me!</Button>
 </Story>
 
-<Story name="Roundness2" args={{ outline: false, disabled: false, compact: false, roundness: 2 }}>
-  <Button roundness={2}>Click me!</Button>
+<Story
+  name="Roundness 2x"
+  args={{ outline: false, disabled: false, compact: false, roundness: '2x' }}
+>
+  <Button roundness="2x">Click me!</Button>
 </Story>
 
-<Story name="Roundness3" args={{ outline: false, disabled: false, compact: false, roundness: 3 }}>
-  <Button roundness={3}>Click me!</Button>
+<Story
+  name="Roundness 3x"
+  args={{ outline: false, disabled: false, compact: false, roundness: '3x' }}
+>
+  <Button roundness="3x">Click me!</Button>
 </Story>
 
 <Story
-  name="RoundnessFalse"
+  name="Roundness False"
   args={{ outline: false, disabled: false, compact: false, roundness: false }}
 >
   <Button roundness={false}>Click me!</Button>
@@ -39,7 +42,7 @@
 
 <!-- Button with 50% roundness usefull for icon (Compact) buttons -->
 <Story
-  name="RoundnessFull"
+  name="Roundness Full"
   args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
 >
   <Button roundness="full">C</Button>

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

@@ -3,15 +3,15 @@
 /// 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-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-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);
+  --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
@@ -19,15 +19,15 @@
 /// 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-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-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);
+  --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
@@ -38,31 +38,31 @@
     &.variant {
       &--text {
         color: var(--dodo-color-#{$theme}-800);
-        background-color: var(--dodo-ui-button-text-#{$theme}-bg);
+        background-color: var(--dodo-ui-Button-text-#{$theme}-bg);
 
         &:hover {
-          background-color: var(--dodo-ui-button-text-#{$theme}-hover-bg);
+          background-color: var(--dodo-ui-Button-text-#{$theme}-hover-bg);
         }
 
         &:active {
-          background-color: var(--dodo-ui-button-text-#{$theme}-active-bg);
+          background-color: var(--dodo-ui-Button-text-#{$theme}-active-bg);
         }
 
         &.outline {
-          border-color: var(--dodo-ui-button-outline-#{$theme});
+          border-color: var(--dodo-ui-Button-outline-#{$theme});
         }
       }
 
       &--solid {
         color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-button-solid-#{$theme}-bg);
+        background-color: var(--dodo-ui-Button-solid-#{$theme}-bg);
 
         &:hover {
-          background-color: var(--dodo-ui-button-solid-#{$theme}-hover-bg);
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-hover-bg);
         }
 
         &:active {
-          background-color: var(--dodo-ui-button-solid-#{$theme}-active-bg);
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-active-bg);
         }
       }
     }

package/src/lib/stories/components/Form/PasswordInput/Events/Events.stories.svelte

@@ -0,0 +1,174 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { storyPasswordInputArgTypes } from '../PasswordInput.stories.svelte';
+  import PasswordInput, { type PasswordInputToggleEvent } from '../PasswordInput.svelte';
+  import type {
+    TextInputFocusEvent,
+    TextInputClipboardEvent,
+  } from '../../TextInput/TextInput.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: PasswordInput,
+    tags: ['autodocs'],
+    argTypes: storyPasswordInputArgTypes,
+  });
+</script>
+
+<Story
+  name="Input"
+  args={{
+    oninput: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('Input Event', target.value);
+    },
+  }}
+>
+  <PasswordInput
+    oninput={(e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('Input Event', target.value);
+    }}
+  />
+</Story>
+
+<Story
+  name="Change"
+  args={{
+    onchange: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onChange Event', target.value);
+    },
+  }}
+>
+  <PasswordInput
+    onchange={(e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onchange Event', target.value);
+    }}
+  />
+</Story>
+
+<!-- `e: PasswordInputToggleEvent` -->
+<Story
+  name="Toggle"
+  args={{
+    ontoggle: (e: PasswordInputToggleEvent) => {
+      const target = e.event.target as HTMLButtonElement;
+
+      console.log('ontoggle Event', e, target);
+    },
+  }}
+>
+  <PasswordInput
+    ontoggle={(e: PasswordInputToggleEvent) => {
+      const target = e.event.target as HTMLButtonElement;
+
+      console.log('ontoggle Event', e, target);
+    }}
+  />
+</Story>
+
+<!-- `e: TextInputFocusEvent` -->
+<Story
+  name="Focus"
+  args={{
+    onfocus: (e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onfocus Event', target);
+    },
+  }}
+>
+  <PasswordInput
+    onfocus={(e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onfocus Event', target);
+    }}
+  />
+</Story>
+
+<!-- `e: TextInputFocusEvent` -->
+<Story
+  name="Blur"
+  args={{
+    onblur: (e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onblur Event', target);
+    },
+  }}
+>
+  <PasswordInput
+    onblur={(e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onblur Event', target);
+    }}
+  />
+</Story>
+
+<!-- `e: TextInputClipboardEvent` -->
+<Story
+  name="Copy"
+  args={{
+    oncopy: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncopy Event', target);
+    },
+  }}
+>
+  <PasswordInput
+    oncopy={(e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncopy Event', target);
+    }}
+  />
+</Story>
+
+<!-- `e: TextInputClipboardEvent` -->
+<Story
+  name="Cut"
+  args={{
+    oncut: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncut Event', target);
+    },
+  }}
+>
+  <PasswordInput
+    oncut={(e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncut Event', target);
+    }}
+  />
+</Story>
+
+<!-- `e: TextInputClipboardEvent` -->
+<Story
+  name="Paste"
+  args={{
+    onpaste: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onpaste Event', target);
+    },
+  }}
+>
+  <PasswordInput
+    onpaste={(e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onpaste Event', target);
+    }}
+  />
+</Story>

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

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PasswordInput from './PasswordInput.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+
+  export const storyPasswordInputArgTypes: StoryBookArgTypes = {
+    roundness: {
+      control: { type: 'select' },
+      options: [false, '1x', '2x', '3x'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'small', 'large'],
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: PasswordInput,
+    tags: ['autodocs'],
+    argTypes: storyPasswordInputArgTypes,
+    args: { value: 'Hello world!' },
+  });
+</script>
+
+<!-- PasswordInput with default style -->
+<Story name="Default" />
+
+<Story name="Placeholder" args={{ value: '', placeholder: 'Type something...' }} />
+
+<Story name="No Outline" args={{ outline: false }} />
+
+<Story name="Error" args={{ error: true }} />
+
+<Story name="Disabled" args={{ disabled: true }} />
+
+<!-- Disable password toggle -->
+<Story name="No toggle" args={{ passwordToggle: false }} />
+
+<!-- Show Password by default -->
+<Story name="Show Password" args={{ defaultPasswordToggleState: true }} />