Merge pull request #242 from silinternational/feature/improve-StaticChip

feat(StaticChip): add height prop, improve defaults styles, width exp…

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>

index.d.ts

@@ -376,6 +376,7 @@ declare module '@silintl/ui-components' {
 
   interface StaticChipProps {
     bgColor?: string
+    height?: string
     class?: string
   }
   export class StaticChip extends SvelteComponentTyped<StaticChipProps> {}

stories/StaticChip.stories.svelte

@@ -1,16 +1,27 @@
 <script>
-import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+import { copyAndModifyArgs } from './helpers.js'
 import { StaticChip } from '../components/custom'
+import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
 
 const args = {
   class: '', //only works for global classes
+  bgColor: '#e5e5e5',
+  height: '36px',
 }
+
+const chips = ['chip 1', 'CHIP TWO', 'chip three is longer...................']
 </script>
 
 <Meta title="Atoms/StaticChip" component={StaticChip} />
 
 <Template let:args>
-  <StaticChip {...args}>A Chip</StaticChip>
+  <div>
+    {#each chips as chip}
+      <StaticChip {...args}>{chip}</StaticChip>
+    {/each}
+  </div>
 </Template>
 
 <Story name="Default" {args} />
+<Story name="bgColor" args={copyAndModifyArgs(args, { bgColor: 'green' })} />
+<Story name="height" args={copyAndModifyArgs(args, { height: '28px' })} />