transcendjs · SasLord · Nov 27, 2023 · Nov 27, 2023 · Dec 15, 2023 · Dec 15, 2023
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -15,13 +15,13 @@ const preview: Preview = {
       values: [
         {
           name: 'light',
-          value: '#f0f2f5',
+          value: '#f0f2f5'
         },
         {
           name: 'dark',
-          value: '#1b2230',
-        },
-      ],
+          value: '#1b2230'
+        }
+      ]
     }
   },
   decorators: [(_, story) => ({ Component: ThemeDecorator, props: { context: story.globals } })]

diff --git a/src/lib/components/Button/Button.svelte b/src/lib/components/Button/Button.svelte
@@ -5,7 +5,6 @@
   //
 
   import type { IconId } from '$lib/icons.js'
-
   import ButtonBase from './ButtonBase.svelte'
 
   export let title: string
@@ -16,4 +15,4 @@
   export let loading: boolean = false
 </script>
 
-<ButtonBase type={'type-button'} {title} {kind} {size} {icon} {loading} {disabled} />
+<ButtonBase type={'type-button'} {title} {kind} {size} {icon} {loading} {disabled} on:click />
diff --git a/src/lib/components/Button/ButtonBase.svelte b/src/lib/components/Button/ButtonBase.svelte
@@ -45,6 +45,10 @@
     border: 1px;
     border-style: solid;
 
+    &:not(:disabled, .loading) {
+      cursor: pointer;
+    }
+
     .icon {
       width: var(--spacing-2_5);
       height: var(--spacing-2_5);

diff --git a/src/lib/components/Button/ButtonIcon.svelte b/src/lib/components/Button/ButtonIcon.svelte
@@ -5,7 +5,6 @@
   //
 
   import type { IconId } from '$lib/icons.js'
-
   import ButtonBase from './ButtonBase.svelte'
 
   export let kind: 'primary' | 'secondary' | 'tertiary' | 'negative' = 'secondary'
@@ -15,4 +14,4 @@
   export let loading: boolean = false
 </script>
 
-<ButtonBase type={'type-button-icon'} {kind} {size} {icon} {disabled} {loading} />
+<ButtonBase type={'type-button-icon'} {kind} {size} {icon} {disabled} {loading} on:click />
diff --git a/src/lib/components/Button/ButtonMenu.svelte b/src/lib/components/Button/ButtonMenu.svelte
@@ -5,7 +5,6 @@
   //
 
   import type { IconId } from '$lib/icons.js'
-
   import ButtonBase from './ButtonBase.svelte'
 
   export let title: string | undefined = undefined

diff --git a/src/lib/components/Editbox/SearchInput.svelte b/src/lib/components/Editbox/SearchInput.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+  //
+  // © 2023 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+
+  import SearchSVG from '$lib/icons/search.svg?raw'
+  import CrossSVG from '$lib/icons/cross.svg?raw'
+
+  export let value: string | undefined = undefined
+  export let placeholder: string
+  export let collapsed: boolean = false
+
+  let input: HTMLInputElement
+</script>
+
+<label class="searchInput-wrapper" class:collapsed class:filled={value && value !== ''}>
+  <div class="searchInput-icon">
+    <div>{@html SearchSVG}</div>
+  </div>
+  <input
+    bind:this={input}
+    type="text"
+    class="font-regular-14"
+    bind:value
+    {placeholder}
+    autocomplete="off"
+    spellcheck="false"
+    on:change
+    on:input
+  />
+  <button
+    class="searchInput-button"
+    on:click={() => {
+      value = ''
+      input.focus()
+    }}
+  >
+    <div>{@html CrossSVG}</div>
+  </button>
+</label>
+
+<style lang="scss">
+  .searchInput-wrapper {
+    display: flex;
+    justify-content: stretch;
+    align-items: center;
+    align-self: stretch;
+    padding: 0 var(--spacing-0_5) 0 0;
+    height: var(--spacing-4);
+    min-width: var(--spacing-4);
+    background-color: var(--input-BackgroundColor);
+    border-radius: var(--small-BorderRadius);
+    box-shadow: inset 0 0 0 1px var(--input-BorderColor);
+    transition: max-width 0.2s;
+    cursor: text;
+
+    .searchInput-icon,
+    .searchInput-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      padding: 0;
+      background-color: transparent;
+      border: none;
+
+      div {
+        width: var(--spacing-2);
+        height: var(--spacing-2);
+      }
+    }
+    .searchInput-icon {
+      margin: 0 var(--spacing-0_5) 0 0;
+      width: var(--spacing-4);
+      height: var(--spacing-4);
+      fill: var(--input-search-IconColor);
+      border-radius: var(--small-BorderRadius);
+      outline: none;
+      cursor: text;
+
+      &:active,
+      &:focus {
+        background-color: transparent;
+      }
+    }
+    .searchInput-button {
+      visibility: hidden;
+      width: var(--spacing-3);
+      height: var(--spacing-3);
+      fill: var(--global-primary-TextColor);
+      border-radius: var(--extra-small-BorderRadius);
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--button-tertiary-hover-BackgroundColor);
+      }
+      &:active {
+        background-color: var(--button-tertiary-active-BackgroundColor);
+        border-color: var(--button-menu-active-BorderColor);
+      }
+      &:focus {
+        outline: 2px solid var(--global-focus-BorderColor);
+        outline-offset: 2px;
+      }
+    }
+
+    input {
+      margin: 0;
+      margin-right: var(--spacing-1_5);
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      color: var(--input-TextColor);
+      caret-color: var(--global-focus-BorderColor);
+      background-color: transparent;
+      border: none;
+      outline: none;
+      appearance: none;
+
+      &::placeholder {
+        color: var(--input-PlaceholderColor);
+      }
+      &:not(:placeholder-shown) + .searchInput-button {
+        visibility: visible;
+      }
+    }
+
+    &:hover {
+      background-color: var(--input-hover-BackgroundColor);
+
+      input::placeholder {
+        color: var(--input-hover-PlaceholderColor);
+      }
+    }
+    &:active,
+    &:focus-within {
+      padding: 0 var(--spacing-0_5) 0 0;
+      max-width: 100%;
+      background-color: var(--input-BackgroundColor);
+      outline: 2px solid var(--global-focus-BorderColor);
+      outline-offset: 2px;
+
+      input::placeholder {
+        color: var(--input-focus-PlaceholderColor);
+      }
+    }
+
+    &.collapsed:not(:focus-within, :active, .filled) {
+      padding: 0;
+      max-width: var(--spacing-4);
+
+      .searchInput-icon {
+        cursor: pointer;
+      }
+      input:not(:placeholder-shown) + .searchInput-button {
+        visibility: hidden;
+      }
+    }
+  }
+</style>
diff --git a/src/lib/components/Theme/Theme.svelte b/src/lib/components/Theme/Theme.svelte
@@ -82,6 +82,7 @@
     --input-focus-PlaceholderColor: #8b97ad;
     --input-HelperColor: #556178;
     --input-error-BorderColor: #e34748;
+    --input-search-IconColor: #0f121a;
 
     /** Checkboxes **/
     --selector-BackgroundColor: #1530720d;
@@ -131,6 +132,7 @@
     --input-focus-PlaceholderColor: #556178;
     --input-HelperColor: #8b97ad;
     --input-error-BorderColor: #fb6863;
+    --input-search-IconColor: #ffffff;
 
     /** Checkboxes **/
     --selector-BackgroundColor: #a5bdff0d;

diff --git a/src/lib/icons/cross.svg b/src/lib/icons/cross.svg
diff --git a/src/lib/icons/search.svg b/src/lib/icons/search.svg
diff --git a/src/lib/styles/styles.css b/src/lib/styles/styles.css
@@ -29,6 +29,7 @@
   --spacing-3: 1.5rem;
   --spacing-3_5: 1.75rem;
   --spacing-4: 2rem;
+  --spacing-4_5: 2.25rem;
   --spacing-5: 2.5rem;
   --spacing-6: 3rem;
   --spacing-6_5: 3.5rem;

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -9,6 +9,7 @@
   import RadioButton from '$lib/components/RadioButton/RadioButton.svelte'
   import SwitcherBase from '$lib/components/Switcher/SwitcherBase.svelte'
   import Toggle from '$lib/components/Toggle/Toggle.svelte'
+  import SearchInput from '$lib/components/Editbox/SearchInput.svelte'
   import type { IconId } from '$lib/icons.js'
 
   interface CheckItems {
@@ -54,6 +55,11 @@
   {#each themes as theme}
     <Theme {theme}>
       <div class="column root">
+        <div class="row header">SearchInput</div>
+        <div class="row" style:max-width={'15rem'}>
+          <SearchInput placeholder={'Search label'} />
+          <SearchInput placeholder={'Search label'} collapsed />
+        </div>
         <div class="row header">Toggle</div>
         <div class="row" style:max-width={'23rem'} style:justify-content={'center'}>
           <Toggle label={'Toggle label'} background />

diff --git a/src/stories/SearchInput.stories.ts b/src/stories/SearchInput.stories.ts
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+
+import SearchInput from '$lib/components/Editbox/SearchInput.svelte'
+
+const meta = {
+  title: 'Components/SearchInput',
+  component: SearchInput,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'text' }
+    },
+    placeholder: {
+      control: { type: 'text' }
+    },
+    collapsed: {
+      control: { type: 'boolean' }
+    }
+  }
+} satisfies Meta<SearchInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SearchInputDefault: Story = {
+  args: {
+    placeholder: 'Search label'
+  }
+}
+export const SearchInputCollapsed: Story = {
+  args: {
+    placeholder: 'Search label',
+    collapsed: true
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,6 @@ @@
       //
       import type { IconId } from '$lib/icons.js'
       import ButtonBase from './ButtonBase.svelte'
       export let title: string | undefined = undefined
@@ Expand Down @@