feat(components): add MoneyInput and story

Author: hobbitronics

components/mdc/TextInput/MoneyInput.svelte

@@ -0,0 +1,89 @@
+<!-- https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield -->
+<script>
+import { MDCTextField } from '@material/textfield'
+import { generateRandomID } from '../../../random'
+import { onMount } from 'svelte'
+
+export let label = ''
+export let value = ''
+export let placeholder = ''
+export let maxlength = undefined
+export let autofocus = false
+export let disabled = false
+export let required = false
+
+const labelID = generateRandomID('text-label-')
+
+let element = {}
+let mdcTextField = {}
+
+$: mdcTextField.value = value
+
+onMount(() => {
+  mdcTextField = new MDCTextField(element)
+  return () => mdcTextField.destroy()
+})
+
+const focus = (node) => autofocus && node.focus()
+</script>
+
+<style>
+.material-icons {
+  color: rgb(133, 140, 148);
+  position: relative;
+  top: 0.4rem;
+  right: 0.6rem;
+}
+.required {
+  color: var(--mdc-required-input, var(--mdc-theme-status-error));
+  font-size: small;
+  margin-left: 1rem;
+  margin-top: 0.2rem;
+}
+.label-margin {
+  margin-left: 1.1rem;
+}
+.mdc-text-field--label-floating .mdc-floating-label {
+  margin-left: 0;
+}
+</style>
+
+<label
+  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}
+  bind:this={element}
+>
+  <i class="material-icons" aria-hidden="true">attach_money</i>
+  <input
+    step="0.01"
+    type="number"
+    min="0"
+    class="mdc-text-field__input"
+    aria-labelledby={labelID}
+    bind:value
+    use:focus
+    on:blur
+    on:keydown
+    on:keypress
+    on:keyup
+    {required}
+    {maxlength}
+    {disabled}
+    {placeholder}
+  />
+  <span class="mdc-notched-outline">
+    <span class="mdc-notched-outline__leading" />
+    {#if label}
+      <span class="mdc-notched-outline__notch">
+        <span class="mdc-floating-label label-margin" id={labelID}>
+          {label}
+        </span>
+      </span>
+    {/if}
+    <span class="mdc-notched-outline__trailing" />
+  </span>
+</label>
+{#if required && !value}
+  <div class="required">*Required</div>
+{/if}

components/mdc/TextInput/index.js

@@ -1,5 +1,6 @@
 import './_index.scss'
 import TextArea from './TextArea.svelte'
 import TextField from './TextField.svelte'
+import MoneyInput from './MoneyInput.svelte'
 
-export { TextArea, TextField }
+export { TextArea, TextField, MoneyInput }

components/mdc/index.js

@@ -21,7 +21,7 @@ import Progress from './Progress'
 import Select from './Select'
 import Snackbar from './Snackbar'
 import TabBar from './TabBar'
-import { TextArea, TextField } from './TextInput'
+import { TextArea, TextField, MoneyInput } from './TextInput'
 import Tooltip from './Tooltip'
 import TopAppBar from './TopAppBar'
 import { setNotice } from './Snackbar/notice'
@@ -40,6 +40,7 @@ export {
   isAboveTablet,
   List,
   Menu,
+  MoneyInput,
   Progress,
   TabBar,
   TextArea,

stories/MoneyInput.stories.svelte

@@ -0,0 +1,40 @@
+<script>
+import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+import { MoneyInput } from '../components/mdc'
+import { copyAndModifyArgs } from './helpers.js'
+
+let title = 'MoneyInput'
+
+const args = {
+  label: title,
+  'on:keydown': (event) => console.log('keydown', event),
+  'on:keypress': (event) => (lastKey = event.key),
+  'on:keyup': (event) => console.log('keyup', event),
+  class: '', //will only work with global class
+}
+
+let lastKey = ''
+</script>
+
+<Meta title="Atoms/MoneyInput" component={MoneyInput} />
+
+<Template let:args>
+  <MoneyInput {...args} on:keydown={args['on:keydown']} on:keypress={args['on:keypress']} on:keyup={args['on:keyup']} />
+  {#if lastKey}
+    <p>Last key pressed: {lastKey}</p>
+  {/if}
+</Template>
+
+<Story name="Default" {args} />
+
+<Story name="Required" args={copyAndModifyArgs(args, { required: true })} />
+
+<Story name="Placeholder" args={copyAndModifyArgs(args, { placeholder: 'Placeholder' })} />
+
+<Story name="Label" args={copyAndModifyArgs(args, { label: 'label' })} />
+
+<Story name="Autofocus" args={copyAndModifyArgs(args, { autofocus: true })} />
+
+<Story name="Disabled" args={copyAndModifyArgs(args, { disabled: true })} />
+
+<Story name="maxlength" args={copyAndModifyArgs(args, { maxlength: 255 })} />