feat(search-bar): add searchbar molecule

components/Molecules/SearchBar/SearchBar.stories.js

@@ -0,0 +1,26 @@
+import SearchBar from './SearchBar.twig';
+
+export default {
+  title: 'Design System/Molecules/SearchBar'
+};
+
+export const base = {
+  render: (args) => SearchBar(args),
+  args: {
+    placeholder: 'Search...',
+    value: '',
+    size: 'lg'
+  },
+  argTypes: {
+    placeholder: {
+      control: { type: 'text' }
+    },
+    value: {
+      control: { type: 'text' }
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'lg']
+    }
+  }
+};

components/Molecules/SearchBar/SearchBar.twig

@@ -0,0 +1,6 @@
+<label class="SearchBar SearchBar--{{ size }} {{ classes }}" aria-label="Recherche">
+  <input type="text" name="query" placeholder="Je recherche..." autocomplete='off' value="{{ value }}"/>
+  <div class="SearchBar-icon">
+    {{ source('/icons/search.svg') }}
+  </div>
+</label>

components/Molecules/SearchBar/searchBar.css

@@ -0,0 +1,58 @@
+.SearchBar {
+  display: flex;
+  align-items: center;
+  color: var(--grey-dark);
+  outline: 1px solid var(--grey-lighter);
+  border-radius: rem-convert(8px);
+  font-size: var(--font-size-paragraph-2);
+  line-height: var(--line-height-paragraph-2);
+  font-weight: 400;
+
+  &--lg {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    padding-left: 24px;
+    padding-right: 15px;
+  }
+
+  &--sm {
+    padding-top: 7px;
+    padding-bottom: 7px;
+    padding-left: 15px;
+    padding-right: 7px;
+  }
+
+  &-icon {
+    color: var(--grey-dark);
+    width: 32px;
+    height: 32px;
+  }
+
+  &,
+  input {
+    flex-grow: 1;
+    background: var(--white);
+  }
+
+  input {
+    &::placeholder {
+      @apply text-grey-dark/75;
+      font-weight: 300;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &:hover {
+    &,
+    input {
+      background: var(--grey-lightest);
+    }
+  }
+
+  &:focus-within {
+    outline: 2px solid var(--vermillon-medium);
+  }
+}