Merge pull request #227 from silinternational/develop

Release 10.5.0

.prettierrc

@@ -5,6 +5,8 @@
   "singleQuote": true,
   "useTabs": false,
 
+  "plugins": ["prettier-plugin-svelte"],
+
   "svelteSortOrder": "options-scripts-styles-markup",
   "svelteAllowShorthand": true,
   "svelteIndentScriptAndStyle": false

README.md

@@ -131,7 +131,7 @@ A list of all components and their props can be found in our running instance of
 
 After installation and bundler configuration all of the components are ready to be imported.
 
-Just include `import { Button } from '@silintl/ui-components'` (~~Sveltekit/~~Vite only projects will need the full url: 	`import { Button } from '../../node_modules/@silintl/ui-components/index.mjs`
+Just include `import { Button } from '@silintl/ui-components'` (~~Sveltekit/~~Vite only projects will need the full url: `import { Button } from '../../node_modules/@silintl/ui-components/index.mjs`
 ) in your script section to import Button and any other components you want to use.
 
 ## overriding default sass variables
@@ -230,19 +230,19 @@ All commit messages must follow the format defined in our [release.config.js fil
 
 - `remove(Card): Removed secondary text padding` (major release)
 
-	`<BLANK LINE>`
+  `<BLANK LINE>`
 
-	`BREAKING CHANGE: The secondary text padding is now 0 by default. Use the secondary-text class to adjust padding as desired.`
+  `BREAKING CHANGE: The secondary text padding is now 0 by default. Use the secondary-text class to adjust padding as desired.`
 
 - `change(dependencies): updated to sass 1.58` (major release)
 
-	`<BLANK LINE>`
+  `<BLANK LINE>`
 
-	`BREAKING: update sass to match this version if installed`
+  `BREAKING: update sass to match this version if installed`
 
 - `security(dependencies): updated deps with npm update` (patch release)
 
--  `deprecate(CustomCard): Deprecated CustomCard as it will be removed` (minor release)
+- `deprecate(CustomCard): Deprecated CustomCard as it will be removed` (minor release)
 
 These will trigger a patch or minor release depending on the config. A major release can be triggered by including 'BREAKING CHANGE', 'BREAKING CHANGES', 'BREAKING' in the footer section followed by ': <description/instructions>' where <description/instructions> details what the breaking change is and/or how to migrate. If this is not done, an empty commit with the proper format can be pushed to trigger the release or by using `git rebase -i` to rewrite the commit messages. commits that contains '[skip release]' or '[release skip]' in their message will be excluded from the commit analysis and won't participate in the release type determination. See https://github.com/semantic-release/semantic-release, https://semantic-release.gitbook.io/semantic-release/support/faq and https://www.conventionalcommits.org/en/v1.0.0/#specification for more details.
 

components/custom/Badge/index.js

@@ -1,3 +1,3 @@
 import Badge from './Badge.svelte'
 
-export default Badge
+export default Badge

components/custom/FileDropArea/_index.scss

@@ -1,8 +1,8 @@
 @use '@material/button/styles';
-@use "@material/button";
+@use '@material/button';
 
 label.custom-text-button {
   --mdc-theme-primary: var(--mdc-theme-upload-button-color, hsla(214, 11%, 37%, 1));
 
-  @include button.ink-color(var(--mdc-theme-upload-button-ink-color, hsla(0,0%, 100%, 1)));
-}
+  @include button.ink-color(var(--mdc-theme-upload-button-ink-color, hsla(0, 0%, 100%, 1)));
+}

components/custom/Form/index.js

@@ -1,3 +1,3 @@
 import Form from './Form.svelte'
 
-export default Form
+export default Form

components/custom/SearchableSelect/SearchableSelect.svelte

@@ -12,14 +12,12 @@ export let disabled = false
 export let required = false
 
 let element = {}
-
 let randomId = generateRandomID('dataList-')
 
-$: internalChoice = choice
-
 const dispatch = createEventDispatcher()
 
-const onChange = () => {
+const onChange = (e) => {
+  const internalChoice = e.target.value
   options[internalChoice] && dispatch('chosen', options[internalChoice])
   choice = internalChoice
   element.blur()
@@ -78,10 +76,10 @@ const onChange = () => {
     list={randomId}
     placeholder=" "
     bind:this={element}
-    bind:value={internalChoice}
+    value={choice}
     on:change={onChange}
-    on:blur={() => dispatch('check', internalChoice)}
-    on:focus={() => (internalChoice = '')}
+    on:blur={(e) => dispatch('check', e.target.value)}
+    on:focus
   />
   <span class="placeholder">{placeholder}</span>
 </label>

components/custom/SearchableSelect/index.js

@@ -1,3 +1,3 @@
 import SearchableSelect from './SearchableSelect.svelte'
 
-export default SearchableSelect
+export default SearchableSelect

components/custom/StaticChip/index.js

@@ -1,3 +1,3 @@
 import StaticChip from './StaticChip.svelte'
 
-export default StaticChip
+export default StaticChip

components/global.scss

@@ -144,7 +144,7 @@ $dimensions: (
   margin-left: 0.25rem !important;
 }
 .mb-quarter {
-  margin-bottom: .25rem !important;
+  margin-bottom: 0.25rem !important;
 }
 .mt-quarter {
   margin-top: 0.25rem !important;

components/mdc/CustomCard/index.js

@@ -1,3 +1,3 @@
 import CustomCard from './CustomCard.svelte'
 
-export default CustomCard
+export default CustomCard

components/mdc/Datatable/_index.scss

@@ -1,5 +1,5 @@
-@use "@material/checkbox"; // Required only for data table with row selection.
-@use "@material/data-table/data-table";
+@use '@material/checkbox'; // Required only for data table with row selection.
+@use '@material/data-table/data-table';
 
 @include checkbox.core-styles;
 @include data-table.core-styles;

components/mdc/IconButton/_index.scss

@@ -1 +1 @@
-@use '@material/icon-button/styles';
+@use '@material/icon-button/styles';

components/mdc/Select/_index.scss

@@ -4,6 +4,6 @@
 @use '@material/select/styles';
 
 /* MDC select floating label */
-.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{
+.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
   color: var(--mdc-theme-primary);
-}
+}

components/mdc/TextInput/MoneyInput.svelte

@@ -112,17 +112,24 @@ const focus = (node) => autofocus && node.focus()
   </span>
 </label>
 <div class="mdc-text-field-helper-line" style="width: {width};">
-  <div class="mdc-text-field-helper-text" class:opacity1={required} id="{labelID}-helper-id" aria-hidden="true">
-    {#if required && !internalValue}
-      <span class="required" class:error={hasFocused}>*Required</span>
+  <div
+    class="mdc-text-field-helper-text
+      mdc-text-field-helper-text--{error ? 'validation-msg' : 'persistent'}"
+    id="{labelID}-helper-id"
+    aria-hidden="true"
+  >
+    {#if !error && description}
+      {description}
+    {:else if required && !internalValue}
+      ✴Required
     {:else if hasExceededMaxValue}
-      <span class="error">Maximum value allowed is {maxValue}</span>
+      Maximum value allowed is {maxValue}
     {:else if isLowerThanMinValue}
-      <span class="error">Minimun value allowed is ({minValue})</span>
+      Minimun value allowed is ({minValue})
     {:else if valueNotDivisibleByStep}
-      <span class="error">{internalValue} is not divisible by {step}</span>
+      {internalValue} is not divisible by {step}
     {:else if hasExceededMaxLength}
-      <span class="error">Maximum {maxlength} characters</span>
+      Maximum {maxlength} characters
     {/if}
   </div>
   {#if showCounter}
@@ -131,6 +138,3 @@ const focus = (node) => autofocus && node.focus()
     </div>
   {/if}
 </div>
-{#if description}
-  <span class="d-block mdc-theme--neutral">{description}</span>
-{/if}

components/mdc/Tour/index.js

@@ -1,3 +1,3 @@
 import Tour from './Tour.svelte'
 
-export default Tour
+export default Tour

index.d.ts

@@ -289,6 +289,7 @@ declare module '@silintl/ui-components' {
     label?: string
     value?: string
     name?: string
+    icon?: string
     placeholder?: string
     maxlength?: number
     autofocus?: boolean

package.json

@@ -50,8 +50,8 @@
     "conventional-changelog": "^3.1.25",
     "css-loader": "^6.7.3",
     "material-components-web": "^14.0.0",
-    "prettier": "^2.8.5",
-    "prettier-plugin-svelte": "^2.9.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-svelte": "^3.0.3",
     "sass": "1.55.x",
     "sass-loader": "^12.6.0",
     "semantic-release": "^19.0.5",

stories/MoneyInput.stories.svelte

@@ -36,10 +36,9 @@ function setValues(max, step) {
 </script>
 
 <style>
-  .d-none {
+.d-none {
   display: none;
 }
-
 </style>
 
 <Meta title="Atoms/MoneyInput" component={MoneyInput} />
@@ -85,4 +84,3 @@ function setValues(max, step) {
 <Story name="Test step" args={{ ...args, label: '' }} />
 
 <Story name="Name" args={copyAndModifyArgs(args, { name: 'money' })} />
-

stories/SearchableSelect.stories.svelte

@@ -1,8 +1,11 @@
 <script>
-import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
-import { SearchableSelect } from '../components/custom'
-import { Button } from '../components/mdc'
+import { SearchableSelect, Form } from '../components/custom'
+import { Button, Progress, Snackbar, setNotice } from '../components/mdc'
 import { copyAndModifyArgs } from './helpers.js'
+import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+
+let choice
+let loading = true
 
 const args = {
   options: {
@@ -14,24 +17,34 @@ const args = {
   placeholder: 'choice 1',
   padding: '12px',
   required: false,
-  choice: 'choice 1',
   width: '232px',
   maxlength: 255,
-  'on:chosen': (e) => alert(e.detail + ' chosen (accessed by event.detail)'),
+  'on:chosen': (e) => setNotice(e.detail + ' chosen (accessed by event.detail)'),
   'on:check': (e) => {
-    !args.options[e.detail] && alert(e.detail + ' not available')
+    !args.options[e.detail] && setNotice(e.detail + ' not available')
   },
   class: '', //only works for global classes
 }
+
+setTimeout(() => {
+  choice = 'choice 2'
+  loading = false
+}, 1500)
 </script>
 
 <Meta title="Atoms/SearchableSelect" component={SearchableSelect} />
 
 <Template let:args>
-  <form on:submit={() => console.log('submitted')}>
-    <SearchableSelect {...args} on:chosen={args['on:chosen']} on:check={args['on:check']} />
+  <Form on:submit={() => setNotice('submitted')}>
+    <SearchableSelect {choice} {...args} on:chosen={args['on:chosen']} on:check={args['on:check']} />
     <Button>Submit</Button>
-  </form>
+  </Form>
+
+  {#if loading}
+    <Progress.Circular />
+  {/if}
+
+  <Snackbar />
 </Template>
 
 <Story name="Default" {args} />

stories/_index.scss

@@ -19,4 +19,4 @@
 }
 .material-icons.md-48 {
   font-size: 48px;
-}
+}