feat(pattern/inputs): add left icon support (#294)

packages/styles/components/_c.left-icon-input.scss

@@ -0,0 +1,19 @@
+.mc-left-icon-input {
+  position: relative;
+
+  &__icon {
+    position: absolute;
+    z-index: 1;
+    left: $mu075;
+    top: 50%;
+    transform: translateY(-50%);
+    width: $mu150;
+    height: $mu150;
+    fill: $color-input-border;
+    pointer-events: none;
+  }
+
+  &__input {
+    padding-left: $mu300;
+  }
+}

packages/styles/components/_c.text-input.scss

@@ -29,17 +29,17 @@
   &.is-valid,
   &.is-invalid {
     background-repeat: no-repeat;
-    background-size: $mu150 $mu150;
+    background-size: $mu100 $mu100;
     background-position: right $mu050 center;
-    padding-right: $mu300;
+    padding-right: $mu250;
   }
 
   &.is-valid {
     border-color: $color-input-valid-border;
     background-image:
       url(
         inline-icons(
-          'circle-check-24',
+          'checkmark-16',
           $color-input-valid-border
         ));
 
@@ -54,7 +54,7 @@
     background-image:
       url(
         inline-icons(
-          'circle-error-24',
+          'cross-16',
           $color-input-invalid-border
         ));
 

packages/styles/settings-tools/_s.inline-icons.scss

@@ -1,10 +1,6 @@
 @function inline-icons($icon, $fill) {
-  @if $icon == 'circle-error-24' {
-    @return '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$fill}" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path d="M16.21 7.88a1 1 0 0 0-1.42 0l-2.74 2.74-2.84-2.83a1 1 0 1 0-1.42 1.42L10.63 12l-2.77 2.79a1 1 0 0 0 1.41 1.42l2.78-2.77 2.68 2.68a1 1 0 0 0 1.41-1.42L13.46 12l2.75-2.7a1 1 0 0 0 0-1.42z"/></svg>';
-  }
-
-  @if $icon == 'circle-check-24' {
-    @return '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$fill}" viewBox="0 0 24 24"><path d="M12 4a8 8 0 1 1-8 8 8 8 0 0 1 8-8m0-2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/><path d="M10.59 16.12a1 1 0 0 1-.68-.26l-3.84-3.55a1 1 0 0 1 1.36-1.47l3.13 2.89L16 8.17a1 1 0 0 1 1.43 1.41l-6.13 6.25a1 1 0 0 1-.71.29z"/></svg>';
+  @if $icon == 'cross-16' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$fill}" viewBox="0 0 16 16"><path d="M9.41 8l3.3-3.29a1 1 0 1 0-1.42-1.42L8 6.59l-3.29-3.3a1 1 0 0 0-1.42 1.42L6.59 8l-3.3 3.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L8 9.41l3.29 3.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"/></svg>';
   }
 
   @if $icon == 'checkmark-16' {

src/pages/Components/TextInput/code.md

@@ -16,16 +16,14 @@ Import the settings and the text-input `scss` files.
 
 ### Supported input types
 
-<ul>
-    <li><code>text</code></li>
-    <li><code>email</code></li>
-    <li><code>date</code></li>
-    <li><code>password</code></li>
-    <li><code>number</code></li>
-    <li><code>tel</code></li>
-    <li><code>number</code></li>
-    <li><code>search</code></li>
-</ul>
+- `text`
+- `email`
+- `date`
+- `password`
+- `number`
+- `tel`
+- `number`
+- `search`
 
 > Note that **if you try to apply those CSS classes to an unsupported input type**. It could work but you should find something which better suits to your needs in the documentation.
 
@@ -49,21 +47,29 @@ To create an input you have one main class to apply `mc-text-input`.
 
 <preview path="src/pages/Components/TextInput/previews/input-state"></preview>
 
-## Do's and don'ts
+## Using a left icon
 
-<hintitem>
-    You can cumulate states like that :
-</hintitem>
+To add a left icon, you need to import `'components/_c.left-icon-input'` after the `components/_c.text-input`.
+
+```css
+@import 'settings-tools/_all-settings';
+@import 'components/_c.text-input';
+@import 'components/_c.left-icon-input';
+```
+
+Wrap your input and use a 24px icon size :
 
 ```html
-<input
-  type="text"
-  class="mc-text-input is-invalid is-hover"
-  placeholder="Empty"
-  name="example"
-/>
+<div class="mc-left-icon-input">
+  <svg class="mc-left-icon-input__icon">
+    <use xlink:href="#iconS" />
+  </svg>
+  <input type="text" class="mc-left-icon-input__input mc-text-input" />
+</div>
 ```
 
+<preview path="src/pages/Components/TextInput/previews/left-icon-input"></preview>
+
 ## Accessibility and semantic
 
 **Always use a label with an input.**

src/pages/Components/TextInput/index.md

@@ -7,52 +7,53 @@ order: 2
 
 > Inputs are used to **create input fields with text on a single line**. Their states depends on the user interaction or the context.
 
-<preview path="src/pages/Components/TextInput/previews/input-preview"></preview>
+<preview nude="true" path="src/pages/Components/TextInput/previews/input-preview"></preview>
 
 ## Standard input states :
 
 ### Hover
 
 When the input is hovered due to user navigation.
 
-<preview path="src/pages/Components/TextInput/previews/input-hover-state"></preview>
+<preview nude="true" path="src/pages/Components/TextInput/previews/input-hover-state"></preview>
 
 ### Focus
 
 When the input is in focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's "tab" key.
 
-<preview path="src/pages/Components/TextInput/previews/input-focus-state"></preview>
+<preview nude="true" path="src/pages/Components/TextInput/previews/input-focus-state"></preview>
 
 ### Disabled
 
 When the input field is inactive or inaccessible. It is usually used when the input, for some reason, is forbidden or blocked to be edited.
 
-<preview path="src/pages/Components/TextInput/previews/input-disabled-state"></preview>
+<preview nude="true" path="src/pages/Components/TextInput/previews/input-disabled-state"></preview>
 
 ### Valid
 
 When the entry is correct against the criteria determined upstream.
 
-<preview path="src/pages/Components/TextInput/previews/input-valid-state"></preview>
+<preview nude="true" path="src/pages/Components/TextInput/previews/input-valid-state"></preview>
 
 ### Invalid
 
 When the entry is invalid against the criteria determined upstream.
 
-<preview path="src/pages/Components/TextInput/previews/input-invalid-state"></preview>
+<preview nude="true" path="src/pages/Components/TextInput/previews/input-invalid-state"></preview>
 
-## Do's and don'ts
+## Input with icon :
 
-<hintitem>
-You can cumulate différents states like that :
-</hintitem>
-<preview path="src/pages/Components/TextInput/previews/input-invalid-event"></preview>
+Use a left icon to inform about a specific information type or formatting you expect from the user.
+
+<preview nude="true" path="src/pages/Components/TextInput/previews/left-icon-input"></preview>
+
+## Do's and don'ts
 
 <hintitem dont=true>
 when <strong>disabled</strong>, an input field can never display any other state styles.
 </hintitem>
 
-<preview path="src/pages/Components/TextInput/previews/input-default-disabled"></preview>
+<preview nude="true" path="src/pages/Components/TextInput/previews/input-default-disabled"></preview>
 
 ## Accessibility
 

src/pages/Components/TextInput/previews/left-icon-input.preview.html

@@ -0,0 +1,36 @@
+<div class="example">
+  <div class="mc-left-icon-input">
+    <svg class="mc-left-icon-input__icon">
+      <use xlink:href="#iconS" />
+    </svg>
+    <input type="date" class="mc-left-icon-input__input mc-text-input" />
+  </div>
+  <br />
+  <div class="mc-left-icon-input">
+    <svg class="mc-left-icon-input__icon">
+      <use xlink:href="#iconS" />
+    </svg>
+    <input
+      type="date"
+      class="mc-left-icon-input__input mc-text-input is-valid"
+    />
+  </div>
+  <br />
+  <div class="mc-left-icon-input">
+    <svg class="mc-left-icon-input__icon">
+      <use xlink:href="#iconS" />
+    </svg>
+    <input
+      type="date"
+      class="mc-left-icon-input__input mc-text-input is-invalid"
+    />
+  </div>
+</div>
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+  <symbol id="iconS" viewBox="0 0 24 24">
+    <path
+      d="M17.5 4V3a1 1 0 0 0-2 0v1H13V3a1 1 0 0 0-2 0v1H8.5V3a1 1 0 0 0-2 0v1H3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm-11 2v1a1 1 0 0 0 2 0V6H11v1a1 1 0 0 0 2 0V6h2.5v1a1 1 0 0 0 2 0V6H20v3.5H4V6zM4 20v-8.5h16V20z"
+    />
+  </symbol>
+</svg>

src/pages/Components/TextInput/previews/left-icon-input.preview.scss

@@ -0,0 +1,8 @@
+@import 'settings-tools/_all-settings';
+@import 'components/_c.text-input';
+@import 'components/_c.left-icon-input';
+
+.example {
+  margin: $mu200 0;
+  padding: 0 $mu200;
+}