Merge pull request #69 from contacto-io/CNTO-7751-TeamNameTag

CNTO-7751: New component in Tag: 'teamname'
contacto-io · Jan 30, 2024 · a701a5e · a701a5e
2 parents 3231748 + 6f9b973
commit a701a5e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 1 deletion.
diff --git a/src/components/Tag/index.js b/src/components/Tag/index.js
@@ -15,6 +15,7 @@ export const TAG_TYPES = [
   'secondary',
   'select',
   'round',
+  'teamname',
 ]
 /**
  * Tag component that is used to specify status of a task
@@ -42,7 +43,9 @@ export const Tag = ({
     >
       <Text
         type={
-          ['default', 'round'].includes(type) || disableUppercase ? 'caption' : 'caption-capital'
+          ['default', 'round', 'teamname'].includes(type) || disableUppercase
+            ? 'caption'
+            : 'caption-capital'
         }
       >
         {label || children}

diff --git a/src/components/Tag/index.stories.js b/src/components/Tag/index.stories.js
@@ -63,3 +63,9 @@ Round.args = {
   closable: true,
   disableUppercase: true,
 }
+
+export const TeamName = Template.bind({})
+TeamName.args = {
+  label: 'Team Name',
+  type: 'teamname',
+}
diff --git a/src/components/Tag/styles.scss b/src/components/Tag/styles.scss
@@ -53,6 +53,22 @@
             font-size: 14px;
         }
     }
+    &--teamname {
+        width: fit-content;
+        padding: 2px 8px;
+        background-color: var(--gray-6);
+        border-radius: 2px;
+        align-items: center;
+        gap: 10px;
+
+        .ant-typography {
+            font-size: 10px;
+            font-weight: 500;
+            line-height: 16px;
+            letter-spacing: 0; 
+            color: var(--gray-1);
+        }
+    }
     .close-tag-icon {
         display: flex;
         align-items: center;

diff --git a/src/index.js b/src/index.js
@@ -26,3 +26,4 @@ export * from './components/TopBanner/index'
 export * from './components/TimeLeftBar/index'
 export * from './components/PhoneNumberInput/index'
 export * from './components/ChatLoader/index'
+