Merge pull request #261 from silinternational/feature/textinputs-add-…

…showWarn-showError

CVR-93  feat(TextInputs): add showError, showWarn props to MoneyInput, TextAr…

components/mdc/TextInput/MoneyInput.svelte

@@ -1,7 +1,7 @@
 <!-- https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield -->
 <script>
 /** A Svelte component that represents a text input for money values. */
-import { getDecimalPlacesLength } from './helpers'
+import { addOrRemoveInvalidClass, getDecimalPlacesLength } from './helpers'
 import { generateRandomID } from '../../../random'
 import { MDCTextField } from '@material/textfield'
 import { afterUpdate, onMount } from 'svelte'
@@ -28,6 +28,10 @@ export let disabled = false
 export let required = false
 /** @type {string} The description to display below the input. */
 export let description = ''
+/** @type {boolean} lets the component know to use error class. */
+export let showError = false
+/** @type {boolean} lets the component know to use warn class. */
+export let showWarn = false
 
 const labelID = generateRandomID('text-label-')
 
@@ -49,6 +53,8 @@ $: valueHasTooManyDecPlaces = getDecimalPlacesLength(internalValue) > getDecimal
 $: valueNotDivisibleByStep =
   (internalValue && (internalValue / Number(step)).toFixed(2) % 1 !== 0) || valueHasTooManyDecPlaces
 $: internalValue = Number(value) || 0
+$: warn = showWarn
+$: addOrRemoveInvalidClass(showError || showWarn, element)
 
 onMount(() => {
   mdcTextField = new MDCTextField(element)
@@ -80,9 +86,11 @@ const focus = (node) => autofocus && node.focus()
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--disabled={disabled}
   class:mdc-text-field--invalid={error}
+  class:warn
+  class:showError
   bind:this={element}
 >
-  <i class="material-icons" class:error aria-hidden="true">attach_money</i>
+  <i class="material-icons mdc-text-field__icon--leading" class:error aria-hidden="true">attach_money</i>
   <input
     {step}
     type="number"

components/mdc/TextInput/TextArea.svelte

@@ -25,6 +25,10 @@ export let required = false
 export let description = ''
 /** @type {string} The name of the textarea field. */
 export let name = ''
+/** @type {boolean} lets the component know to use error class. */
+export let showError = false
+/** @type {boolean} lets the component know to use warn class. */
+export let showWarn = false
 
 const labelID = generateRandomID('textarea-label-')
 
@@ -37,7 +41,9 @@ let hasBlurred = false
 $: hasExceededMaxLength = maxlength && value.length > maxlength
 $: error = hasExceededMaxLength || (hasFocused && hasBlurred && required && valueIsEmpty)
 $: valueIsEmpty = value === ' ' || !value
+$: warn = showWarn
 $: !valueIsEmpty && addOrRemoveInvalidClass(error, element)
+$: addOrRemoveInvalidClass(showError || showWarn, element)
 
 onMount(() => {
   resize()
@@ -78,6 +84,8 @@ label {
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--label-floating={label}
   class:mdc-text-field--with-internal-counter={maxlength}
+  class:warn
+  class:showError
   bind:this={element}
 >
   <textarea

components/mdc/TextInput/TextField.svelte

@@ -25,6 +25,10 @@ export let icon = ''
 export let description = ''
 /** @type {string} The name of the text input field. */
 export let name = ''
+/** @type {boolean} lets the component know to use error class. */
+export let showError = false
+/** @type {boolean} lets the component know to use warn class. */
+export let showWarn = false
 
 const labelID = generateRandomID('text-label-')
 
@@ -37,8 +41,10 @@ let hasBlurred = false
 $: mdcTextField.value = value
 $: hasExceededMaxLength = maxlength && value.length > maxlength
 $: error = hasExceededMaxLength || (hasFocused && hasBlurred && required && !value)
+$: warn = showWarn
 $: showCounter = maxlength && value.length / maxlength > 0.85
 $: value && addOrRemoveInvalidClass(error, element)
+$: addOrRemoveInvalidClass(showError || showWarn, element)
 
 onMount(() => {
   mdcTextField = new MDCTextField(element)
@@ -71,9 +77,11 @@ const focus = (node) => autofocus && node.focus()
   class="mdc-text-field mdc-text-field--outlined {$$props.class || ''} textfield-radius"
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--disabled={disabled}
+  class:warn
+  class:showError
   bind:this={element}
 >
-  <i class="material-icons" class:error aria-hidden="true">{icon}</i>
+  <i class="material-icons mdc-text-field__icon--leading" class:error aria-hidden="true"> {icon}</i>
   <input
     type="text"
     class="mdc-text-field__input"
@@ -97,7 +105,7 @@ const focus = (node) => autofocus && node.focus()
   />
   {#if hasExceededMaxLength}
     <span class="mdc-text-field__affix mdc-text-field__affix--suffix"
-      ><i class="material-icons error" aria-hidden="true">error</i></span
+      ><i class="material-icons mdc-text-field__icon--trailing error" aria-hidden="true">error</i></span
     >
   {/if}
 

components/mdc/TextInput/_index.scss

@@ -2,10 +2,19 @@
 //@use "@material/line-ripple/mdc-line-ripple"; // Only needed if using ripple.
 @use '@material/notched-outline/mdc-notched-outline';
 @use '@material/textfield';
+@use '@material/textfield/icon';
 
 @include textfield.core-styles;
+@include icon.icon-core-styles;
+
+:root {
+  --mdc-theme-error: #c30000;
+  --mdc-theme-warn: #f48c03;
+}
 
 $radius: 8px !default;
+$error: var(--mdc-theme-status-error, var(--mdc-theme-error)) !default;
+$warn: var(--mdc-theme-status-warn, var(--mdc-theme-warn)) !default;
 
 /* TODO should be cleaned up later, this code is in multiple files but only needs to be in the master css*/
 
@@ -20,6 +29,30 @@ $radius: 8px !default;
 .error {
   color: var(--mdc-theme-status-error, var(--mdc-theme-error)) !important;
 }
+.showError.mdc-text-field--invalid {
+  @include textfield.outline-color($error);
+  @include textfield.hover-outline-color($error);
+  @include textfield.ink-color($error);
+  @include textfield.placeholder-color($error);
+  @include textfield.label-color($error);
+  @include icon.leading-icon-color($error);
+  @include icon.trailing-icon-color($error);
+  @include textfield.caret-color($error);
+  @include textfield.prefix-color($error);
+  @include textfield.suffix-color($error);
+}
+.warn.mdc-text-field--invalid {
+  @include textfield.outline-color($warn);
+  @include textfield.hover-outline-color($warn);
+  @include textfield.ink-color($warn);
+  @include textfield.placeholder-color($warn);
+  @include textfield.label-color($warn);
+  @include icon.leading-icon-color($warn);
+  @include icon.trailing-icon-color($warn);
+  @include textfield.caret-color($warn);
+  @include textfield.prefix-color($warn);
+  @include textfield.suffix-color($warn);
+}
 .required {
   color: var(--mdc-required-input, rgba(0, 0, 0, 0.6));
 }

stories/MoneyInput.stories.svelte

@@ -84,3 +84,7 @@ function setValues(max, step) {
 <Story name="Test step" args={{ ...args, label: '' }} />
 
 <Story name="Name" args={copyAndModifyArgs(args, { name: 'money' })} />
+
+<Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />
+
+<Story name="showWarn" args={copyAndModifyArgs(args, { showWarn: true })} />

stories/TextArea.stories.svelte

@@ -38,3 +38,7 @@ const args = {
 <Story name="Description" args={copyAndModifyArgs(args, { description: 'a description' })} />
 
 <Story name="Name" args={copyAndModifyArgs(args, { name: 'area' })} />
+
+<Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />
+
+<Story name="showWarn" args={copyAndModifyArgs(args, { showWarn: true })} />

stories/TextField.stories.svelte

@@ -51,3 +51,7 @@ let lastKey = ''
 <Story name="Description" args={copyAndModifyArgs(args, { description: 'a description' })} />
 
 <Story name="Name" args={copyAndModifyArgs(args, { name: 'field' })} />
+
+<Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />
+
+<Story name="showWarn" args={copyAndModifyArgs(args, { showWarn: true })} />

stories/_theme.scss

@@ -5,6 +5,7 @@
   --mdc-theme-primary-variant: #0078af;
   --mdc-theme-secondary: #ff4800;
   --mdc-theme-error: #c30000;
+  --mdc-theme-warn: #f48c03;
   --mdc-theme-neutral: #6d7580;
   --mdc-required-input: gray;
   --progress-bar-color: #005cb9;