From 1cbdaba84b86dae4667196b8caa6080c6a9e43b4 Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Thu, 19 Oct 2023 10:51:19 +0930
Subject: [PATCH 1/2] feat(StaticChip): add height prop, improve defaults
 styles, width expands with content. styles overridable

---
 components/custom/StaticChip/StaticChip.svelte | 15 +++++++++++----
 index.d.ts                                     |  1 +
 stories/StaticChip.stories.svelte              | 15 +++++++++++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/components/custom/StaticChip/StaticChip.svelte b/components/custom/StaticChip/StaticChip.svelte
index 4f780634..2cd5f71a 100644
--- a/components/custom/StaticChip/StaticChip.svelte
+++ b/components/custom/StaticChip/StaticChip.svelte
@@ -1,25 +1,32 @@
 <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;
 }
 
 .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}"
+  class="mdc-typography chip br-16px {$$props.class || ''}"
+  style="--theme-color: {bgColor}; --theme-height: {height}"
 >
-  <div class="chip-content flex align-items-center">
+  <div class="chip-content">
     <slot />
   </div>
 </div>
diff --git a/index.d.ts b/index.d.ts
index 3b37abdb..19616f75 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -375,6 +375,7 @@ declare module '@silintl/ui-components' {
 
   interface StaticChipProps {
     bgColor?: string
+    height?: string
     class?: string
   }
   export class StaticChip extends SvelteComponentTyped<StaticChipProps> {}
diff --git a/stories/StaticChip.stories.svelte b/stories/StaticChip.stories.svelte
index 013c6629..92619dbe 100644
--- a/stories/StaticChip.stories.svelte
+++ b/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' })} />

From 1b307678b5c548578cfeb84550edd21bb72b4356 Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Thu, 18 Jan 2024 15:52:04 +0930
Subject: [PATCH 2/2] set margin and border radius in chip

---
 components/custom/StaticChip/StaticChip.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/custom/StaticChip/StaticChip.svelte b/components/custom/StaticChip/StaticChip.svelte
index 2cd5f71a..f9b283e6 100644
--- a/components/custom/StaticChip/StaticChip.svelte
+++ b/components/custom/StaticChip/StaticChip.svelte
@@ -10,6 +10,8 @@ export let height = '36px'
   background-color: var(--theme-color);
   height: var(--theme-height);
   display: inline-flex;
+  margin: 0 2rem 1rem 0;
+  border-radius: 16px;
 }
 
 .chip-content {
@@ -22,10 +24,7 @@ export let height = '36px'
 }
 </style>
 
-<div
-  class="mdc-typography chip br-16px {$$props.class || ''}"
-  style="--theme-color: {bgColor}; --theme-height: {height}"
->
+<div class="mdc-typography chip {$$props.class || ''}" style="--theme-color: {bgColor}; --theme-height: {height}">
   <div class="chip-content">
     <slot />
   </div>