Merge pull request #243 from silinternational/develop

Release v10.7.0

.github/workflows/deepfactor.yml

@@ -0,0 +1,16 @@
+name: deepfactor-scan
+on:
+  push:
+    branches: [ main, develop, feature/deepfactor ]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container:
+      image: public.ecr.aws/deepfactor/df/runtime:3.3.3-2346
+      env:
+        DF_RUN_TOKEN: ${{ secrets.DF_RUN_TOKEN }}
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+    - name: Scan with Deepfactor
+      run: dfctl scan -s fs -a ${{ github.event.repository.name }} -c ${{ github.event.repository.name }} -V ${{ github.ref_name }} .

README.md

@@ -4,7 +4,7 @@ Reusable Svelte components for some internal applications
 
 ## installation
 
-To install to your Svelte project, open your project's root directory in a terminal. Type or paste `npm i -D @silintl/ui-components` and press enter. Sass and-material-components web are required to develop additional material web components in your app, but it may depend on your version of npm if they are necessary even if you don't (I haven't figured out which versions require them). Paste in `npm i -D [email protected] material-components-web@14.0.0` and hit enter (versions will vary if you use an older release of this repo). You should already have svelte@3 installed if you are using this library.
+To install to your Svelte project, open your project's root directory in a terminal. Type or paste `npm i -D @silintl/ui-components` and press enter. Sass (depending on your bundler and plugins) and material-components-web are required to develop additional material web components in your app, but it may depend on your version of npm if they are necessary even if you don't (I haven't figured out which versions require them). Enter the commands `npm i -D material-components-web@14` and `npm i -D sass@1` (versions will vary if you use an older release of this library). You should already have svelte@3 installed if you are using this library.
 
 If you are using typescript you will need to run `npm i -D tslib` to avoid a material-components-web type error. This will already be installed if you have set up SvelteKit with typescript using `npm create svelte@latest app-name`.
 

components/custom/StaticChip/StaticChip.svelte

@@ -1,25 +1,31 @@
 <script>
 /** @type {string} the background color of the chip */
 export let bgColor = '#e5e5e5'
+/** @type {string} sets the height of the component not including margin*/
+export let height = '36px'
 </script>
 
 <style>
 .chip {
   background-color: var(--theme-color);
-  height: 36px;
+  height: var(--theme-height);
+  display: inline-flex;
+  margin: 0 2rem 1rem 0;
+  border-radius: 16px;
 }
 
 .chip-content {
+  display: flex;
   padding-left: 12px;
   padding-right: 12px;
+  vertical-align: middle;
+  align-items: center;
+  font-size: 14px;
 }
 </style>
 
-<div
-  class="mdc-typography chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class || ''}"
-  style="--theme-color: {bgColor}"
->
-  <div class="chip-content flex align-items-center">
+<div class="mdc-typography chip {$$props.class || ''}" style="--theme-color: {bgColor}; --theme-height: {height}">
+  <div class="chip-content">
     <slot />
   </div>
 </div>

components/mdc/Checkbox/Checkbox.svelte

@@ -15,13 +15,13 @@ export let checked = false
 export let disabled = false
 /** @type {boolean} if the label should be uppercase or not */
 export let uppercase = false
+/** @type {string} random id prefixed with checkbox- for the input id*/
+export let inputID = generateRandomID('checkbox-')
 
 let checkboxElement = {}
 let formFieldElement = {}
 let checkbox
 
-const inputID = generateRandomID('checkbox-')
-
 $: if (checkbox) checkbox.checked = checked
 
 onMount(() => {

index.d.ts

@@ -36,6 +36,7 @@ declare module '@silintl/ui-components' {
     disabled?: boolean
     uppercase?: boolean
     class?: string
+    inputID?: string
   }
   export class Checkbox extends SvelteComponentTyped<CheckboxProps> {}
 
@@ -375,6 +376,7 @@ declare module '@silintl/ui-components' {
 
   interface StaticChipProps {
     bgColor?: string
+    height?: string
     class?: string
   }
   export class StaticChip extends SvelteComponentTyped<StaticChipProps> {}