diff --git a/src/components/Tag/index.js b/src/components/Tag/index.js index c1bdfbb..6b17c7d 100755 --- 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 = ({ > {label || children} diff --git a/src/components/Tag/index.stories.js b/src/components/Tag/index.stories.js index e16ba13..7e054cf 100755 --- 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 index 76af3f4..43c7cba 100755 --- 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 index 982cf26..a013cb9 100644 --- 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' +