fix: invalid style (design review) (#9)

* fix: invalid style (design review)

* feat: add small variant with icons for toggle

* test: update snapshots

src/liquid/components/ld-toggle/ld-toggle.css

@@ -73,14 +73,27 @@
   --ld-toggle-height: 2.5rem;
   --ld-toggle-width: 4.1875rem;
   --ld-toggle-inner-space: 0.1875rem;
+
+  &.ld-toggle--with-icons {
+    --ld-toggle-width: 6rem;
+
+    .ld-toggle__icon-start,
+    .ld-toggle__icon-end {
+      margin: 0.75rem;
+    }
+  }
 }
 
 .ld-toggle--with-icons {
-  --ld-toggle-width: 6rem;
+  --ld-toggle-width: 4.5rem;
 
   input {
     background-color: var(--ld-col-rblck1) !important;
 
+    &:invalid ~ .ld-toggle__knob {
+      background-color: var(--ld-col-rr-default) !important;
+    }
+
     &:disabled,
     &[aria-disabled='true'] {
       background-color: var(--ld-col-bg-g) !important;
@@ -90,11 +103,15 @@
       }
     }
   }
+
+  .ld-toggle__icon-start,
+  .ld-toggle__icon-end {
+    margin: 0.5rem;
+  }
 }
 
-.ld-toggle input:invalid,
-.ld-toggle--invalid input {
-  box-shadow: inset 0 0 0 0.1rem var(--ld-col-rr-default);
+.ld-toggle input:invalid {
+  background-color: var(--ld-col-rr-default);
 }
 
 /* .ld-theme-ocean -> default */
@@ -121,7 +138,6 @@
 .ld-toggle__icon-end {
   display: flex;
   align-items: center;
-  margin: 0.75rem;
   pointer-events: none;
   position: absolute;
   /* animations triggered by user interactions on single component instances are probably not a performance issue */

src/liquid/components/ld-toggle/ld-toggle.tsx

@@ -1,5 +1,6 @@
-import '../../components' // type definitions for type checks and intelliSense
 import { Component, Element, h, Host, Prop } from '@stencil/core'
+import '../../components' // type definitions for type checks and intelliSense
+import { getClassNames } from '../../utils/getClassNames'
 
 /**
  * @virtualProp ref - reference to component
@@ -26,9 +27,6 @@ export class LdToggle {
   /** The input value. */
   @Prop({ mutable: true, reflect: true }) checked: boolean
 
-  /** Set this property to `true` in order to mark the toggle visually as invalid. */
-  @Prop() invalid: false
-
   /** Set this property to `true` in order to mark the toggle as required. */
   @Prop() required: false
 
@@ -59,30 +57,15 @@ export class LdToggle {
     this.checked = event.target.checked
   }
 
-  // TODO: memoized functions possible? simplify syntax, move to utils
-  private getClassNames = () => {
-    const classNames = ['ld-toggle']
-
-    if (this.mode === 'large') {
-      classNames.push('ld-toggle--large')
-    }
-    if (this.invalid) {
-      classNames.push('ld-toggle--invalid')
-    }
-    if (this.hasIcons) {
-      classNames.push(
-        this.mode === 'large'
-          ? 'ld-toggle--with-icons'
-          : 'ld-toggle--large ld-toggle--with-icons'
-      )
-    }
-
-    return classNames.join(' ')
-  }
-
   render() {
     return (
-      <Host class={this.getClassNames()}>
+      <Host
+        class={getClassNames([
+          'ld-toggle',
+          this.mode === 'large' && 'ld-toggle--large',
+          this.hasIcons && 'ld-toggle--with-icons',
+        ])}
+      >
         <input
           aria-disabled={this.ariaDisabled}
           checked={this.checked}

src/liquid/components/ld-toggle/readme.md

@@ -43,6 +43,26 @@ This component can be used in conjunction with the [`ld-label`](components/ld-la
 </div>
 {% endexample %}
 
+### Invalid
+
+{% example %}
+<ld-toggle required></ld-toggle>
+
+<ld-toggle checked required></ld-toggle>
+
+<!-- CSS component -->
+
+<div class="ld-toggle">
+  <input type="checkbox" required />
+  <span class="ld-toggle__knob"></span>
+</div>
+
+<div class="ld-toggle">
+  <input type="checkbox" checked required />
+  <span class="ld-toggle__knob"></span>
+</div>
+{% endexample %}
+
 ### Disabled
 
 {% example %}
@@ -99,7 +119,7 @@ This component can be used in conjunction with the [`ld-label`](components/ld-la
 ### With icons
 
 {% example %}
-<ld-toggle mode="large">
+<ld-toggle>
   <ld-icon name="placeholder" size="sm" slot="icon-start"></ld-icon>
   <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
 </ld-toggle>
@@ -109,8 +129,44 @@ This component can be used in conjunction with the [`ld-label`](components/ld-la
   <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
 </ld-toggle>
 
+<ld-toggle mode="large">
+  <ld-icon name="placeholder" size="sm" slot="icon-start"></ld-icon>
+  <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
+</ld-toggle>
+
+<ld-toggle mode="large" checked>
+  <ld-icon name="placeholder" size="sm" slot="icon-start"></ld-icon>
+  <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
+</ld-toggle>
+
 <!-- CSS component -->
 
+<div class="ld-toggle ld-toggle--with-icons">
+  <input type="checkbox" />
+  <span class="ld-toggle__knob"></span>
+  <svg class="ld-toggle__icon-start ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+  <svg class="ld-toggle__icon-end ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+</div>
+
+<div class="ld-toggle ld-toggle--with-icons">
+  <input type="checkbox" checked />
+  <span class="ld-toggle__knob"></span>
+  <svg class="ld-toggle__icon-start ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+  <svg class="ld-toggle__icon-end ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+</div>
+
 <div class="ld-toggle ld-toggle--large ld-toggle--with-icons">
   <input type="checkbox" />
   <span class="ld-toggle__knob"></span>
@@ -141,7 +197,7 @@ This component can be used in conjunction with the [`ld-label`](components/ld-la
 ### With icons (disabled)
 
 {% example %}
-<ld-toggle mode="large" disabled>
+<ld-toggle disabled>
   <ld-icon name="placeholder" size="sm" slot="icon-start"></ld-icon>
   <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
 </ld-toggle>
@@ -151,8 +207,44 @@ This component can be used in conjunction with the [`ld-label`](components/ld-la
   <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
 </ld-toggle>
 
+<ld-toggle mode="large" disabled>
+  <ld-icon name="placeholder" size="sm" slot="icon-start"></ld-icon>
+  <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
+</ld-toggle>
+
+<ld-toggle mode="large" checked disabled>
+  <ld-icon name="placeholder" size="sm" slot="icon-start"></ld-icon>
+  <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
+</ld-toggle>
+
 <!-- CSS component -->
 
+<div class="ld-toggle ld-toggle--with-icons">
+  <input type="checkbox" disabled />
+  <span class="ld-toggle__knob"></span>
+  <svg class="ld-toggle__icon-start ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+  <svg class="ld-toggle__icon-end ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+</div>
+
+<div class="ld-toggle ld-toggle--with-icons">
+  <input type="checkbox" checked disabled />
+  <span class="ld-toggle__knob"></span>
+  <svg class="ld-toggle__icon-start ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+  <svg class="ld-toggle__icon-end ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+</div>
+
 <div class="ld-toggle ld-toggle--large ld-toggle--with-icons">
   <input type="checkbox" disabled />
   <span class="ld-toggle__knob"></span>
@@ -180,6 +272,84 @@ This component can be used in conjunction with the [`ld-label`](components/ld-la
 </div>
 {% endexample %}
 
+### With icons (invalid)
+
+{% example %}
+<ld-toggle required>
+  <ld-icon name="placeholder" size="sm" slot="icon-start"></ld-icon>
+  <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
+</ld-toggle>
+
+<ld-toggle checked required>
+  <ld-icon name="placeholder" size="sm" slot="icon-start"></ld-icon>
+  <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
+</ld-toggle>
+
+<ld-toggle mode="large" required>
+  <ld-icon name="placeholder" size="sm" slot="icon-start"></ld-icon>
+  <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
+</ld-toggle>
+
+<ld-toggle mode="large" checked required>
+  <ld-icon name="placeholder" size="sm" slot="icon-start"></ld-icon>
+  <ld-icon name="placeholder" size="sm" slot="icon-end"></ld-icon>
+</ld-toggle>
+
+<!-- CSS component -->
+
+<div class="ld-toggle ld-toggle--with-icons">
+  <input type="checkbox" required />
+  <span class="ld-toggle__knob"></span>
+  <svg class="ld-toggle__icon-start ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+  <svg class="ld-toggle__icon-end ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+</div>
+
+<div class="ld-toggle ld-toggle--with-icons">
+  <input type="checkbox" checked required />
+  <span class="ld-toggle__knob"></span>
+  <svg class="ld-toggle__icon-start ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+  <svg class="ld-toggle__icon-end ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+</div>
+
+<div class="ld-toggle ld-toggle--large ld-toggle--with-icons">
+  <input type="checkbox" required />
+  <span class="ld-toggle__knob"></span>
+  <svg class="ld-toggle__icon-start ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+  <svg class="ld-toggle__icon-end ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+</div>
+
+<div class="ld-toggle ld-toggle--large ld-toggle--with-icons">
+  <input type="checkbox" checked required />
+  <span class="ld-toggle__knob"></span>
+  <svg class="ld-toggle__icon-start ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+  <svg class="ld-toggle__icon-end ld-icon ld-icon--sm" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"></rect>
+    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"></circle>
+  </svg>
+</div>
+{% endexample %}
+
 ### With label
 
 {% example %}
@@ -263,16 +433,15 @@ Please refer to the [ld-label](components/ld-label/) docs for more information o
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                  | Type                 | Default     |
-| -------------- | --------------- | ---------------------------------------------------------------------------- | -------------------- | ----------- |
-| `ariaDisabled` | `aria-disabled` | Alternative disabled state that keeps element focusable                      | `string`             | `undefined` |
-| `checked`      | `checked`       | The input value.                                                             | `boolean`            | `undefined` |
-| `disabled`     | `disabled`      | Disabled state of the toggle.                                                | `boolean`            | `false`     |
-| `invalid`      | `invalid`       | Set this property to `true` in order to mark the toggle visually as invalid. | `boolean`            | `undefined` |
-| `key`          | `key`           | for tracking the node's identity when working with lists                     | `string \| number`   | `undefined` |
-| `mode`         | `mode`          | Display mode.                                                                | `"large" \| "small"` | `undefined` |
-| `ref`          | `ref`           | reference to component                                                       | `any`                | `undefined` |
-| `required`     | `required`      | Set this property to `true` in order to mark the toggle as required.         | `boolean`            | `undefined` |
+| Property       | Attribute       | Description                                                          | Type                 | Default     |
+| -------------- | --------------- | -------------------------------------------------------------------- | -------------------- | ----------- |
+| `ariaDisabled` | `aria-disabled` | Alternative disabled state that keeps element focusable              | `string`             | `undefined` |
+| `checked`      | `checked`       | The input value.                                                     | `boolean`            | `undefined` |
+| `disabled`     | `disabled`      | Disabled state of the toggle.                                        | `boolean`            | `false`     |
+| `key`          | `key`           | for tracking the node's identity when working with lists             | `string \| number`   | `undefined` |
+| `mode`         | `mode`          | Display mode.                                                        | `"large" \| "small"` | `undefined` |
+| `ref`          | `ref`           | reference to component                                               | `any`                | `undefined` |
+| `required`     | `required`      | Set this property to `true` in order to mark the toggle as required. | `boolean`            | `undefined` |
 
 
 ----------------------------------------------

src/liquid/components/ld-toggle/test/__snapshots__/ld-toggle.spec.ts.snap

@@ -32,32 +32,8 @@ exports[`ld-toggle renders large mode 1`] = `
 </ld-toggle>
 `;
 
-exports[`ld-toggle renders large mode, if with icons 1`] = `
-<ld-toggle class="ld-toggle ld-toggle--large ld-toggle--with-icons">
-  <!---->
-  <input type="checkbox">
-  <span class="ld-toggle__knob"></span>
-  <div class="ld-toggle__icon-start">
-    <ld-icon name="placeholder" size="sm" slot="icon-start">
-      <!---->
-      <span class="ld-icon ld-icon--sm" role="presentation">
-        Not Found
-      </span>
-    </ld-icon>
-  </div>
-  <div class="ld-toggle__icon-end">
-    <ld-icon name="placeholder" size="sm" slot="icon-end">
-      <!---->
-      <span class="ld-icon ld-icon--sm" role="presentation">
-        Not Found
-      </span>
-    </ld-icon>
-  </div>
-</ld-toggle>
-`;
-
 exports[`ld-toggle renders with icons 1`] = `
-<ld-toggle class="ld-toggle ld-toggle--large ld-toggle--with-icons" mode="large">
+<ld-toggle class="ld-toggle ld-toggle--with-icons">
   <!---->
   <input type="checkbox">
   <span class="ld-toggle__knob"></span>