feat: chip

ibeloyar · Dec 20, 2024 · 50406ef · 50406ef
1 parent ded6357
commit 50406ef
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 13 deletions.
diff --git a/src/components/FirChip/FirChip.stories.ts b/src/components/FirChip/FirChip.stories.ts
@@ -12,8 +12,9 @@ const meta = {
         view: { type: 'string', description: 'Chip view type', control: 'select', options: ['filled', 'outlined', 'double'] },
         color: { type: 'string', description: 'Chip color', control: 'select', options: ['red', 'yellow', 'green', 'blue',  'gray', 'custom'] },
         title: { type: 'string', description: 'Left side title', control: 'text' },
-        bgCustomColor: { type: 'string', description: 'Background chip custom color', control: 'text' },
-        textCustomColor: { type: 'string', description: 'Text chip custom color', control: 'text' },
+        bgCustomColor: { type: 'string', description: 'Background chip custom color', control: 'color' },
+        textCustomColor: { type: 'string', description: 'Text chip custom color', control: 'color' },
+        titleCustomColor: { type: 'string', description: 'Title chip custom color', control: 'color' },
     },
     parameters: {
         slots: {
@@ -45,12 +46,46 @@ export const Double: Story = {
     },
 };
 
-export const Custom: Story = { 
+export const Custom: Story = {
     args: {
-        view: 'filled',
-        default: 'chip',
-        color: 'custom',
-        bgCustomColor: '#ae23b9',
-        textCustomColor: 'white'
+        color: 'blue',
+        default: 'chip'
     },
-};
+    render: () => ({
+        components: { FirChip },
+        template: `
+        <div style="display: flex; gap: 8px;">
+
+        <FirChip 
+            color="custom" 
+            view="filled" 
+            bgCustomColor="#ae23b9"
+            textCustomColor="white"    
+        >
+                chip 1
+        </FirChip>
+        
+        <FirChip 
+            color="custom" 
+            view="outlined" 
+            bgCustomColor="#ae23b9"
+            textCustomColor="#ae23b9"    
+        >
+                chip 2
+        </FirChip>
+
+        <FirChip 
+            view="double"
+            color="custom"
+            title="title"
+            bgCustomColor="#ae23b9"
+            textCustomColor="var(--fir-global-text-color)"
+            titleCustomColor="white"
+        >
+                chip 3
+        </FirChip>
+
+        </div>
+        `
+    })
+};
diff --git a/src/components/FirChip/FirChip.types.ts b/src/components/FirChip/FirChip.types.ts
@@ -3,6 +3,7 @@ export interface FirChipProps {
     color: 'custom' | 'red' | 'yellow' | 'green' | 'blue' | 'gray';
     bgCustomColor?: string; 
     textCustomColor?: string; 
+    titleCustomColor?: string;
     title?: string;
     onClick?: () => void;
 }
diff --git a/src/components/FirChip/FirChip.vue b/src/components/FirChip/FirChip.vue
@@ -7,11 +7,12 @@
             }"
             @click="onAction"
             @keyup.prevent
-            :style="{ ['background-color']: `${props.bgCustomColor}` }"
+            :style="wrapperStyles"
     >
         <span 
             class="fir-chip__title"
             v-if="props.view === 'double'"
+            :style="titleStyles"
         >
             {{ props.title }}
         </span>
@@ -25,17 +26,33 @@
 </template>
 
 <script setup lang="ts">
-import { withDefaults } from 'vue';
+import { reactive, withDefaults } from 'vue';
 import type { FirChipProps } from './FirChip.types';
 
 const props = withDefaults(defineProps<FirChipProps>(), {
-    title: '',
     type: 'default',
     view: 'filled',
 });
 
 const onAction = () => props.onClick && props.onClick();
 
+const wrapperStyles = reactive({ backgroundColor: undefined, border: undefined });
+if (props.view === 'filled' && props.bgCustomColor) {
+    wrapperStyles.backgroundColor = `${props.bgCustomColor}`;
+}
+if (props.view === 'outlined' && props.bgCustomColor) {
+    wrapperStyles.border = `1px solid ${props.bgCustomColor}`;
+}
+if (props.view === 'double' && props.bgCustomColor) {
+    wrapperStyles.border = `2px solid ${props.bgCustomColor}`;
+}
+
+const titleStyles = reactive({ color: undefined, backgroundColor: undefined, border: undefined });
+if (props.view === 'double' && props.bgCustomColor && props.titleCustomColor) {
+    titleStyles.backgroundColor = `${props.bgCustomColor}`;
+    titleStyles.color = `${props.titleCustomColor}`;
+}
+
 </script>
 
 <style>
@@ -51,6 +68,10 @@ const onAction = () => props.onClick && props.onClick();
         overflow: hidden;
         text-overflow: ellipsis;
         border: none;
+        height: 24px;
+    }
+    .fir-chip__content {
+        line-height: 16px;
     }
     .fir-chip__wrapper_clickable {
         cursor: pointer;
@@ -122,7 +143,7 @@ const onAction = () => props.onClick && props.onClick();
         align-items: center;
         min-width: 20px;
         padding: 1px 5px;
-        height: 16px;
+        height: 24px;
         line-height: 16px;
     }
     .fir-chip__double .fir-chip__content {