refactor: improve NewsTag

serudda · Nov 26, 2023 · 3ed593a · 3ed593a
1 parent cea8759
commit 3ed593a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/components/NewsTag/NewsTag.stories.tsx b/src/components/NewsTag/NewsTag.stories.tsx
@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { Icon, IconCatalog, IconStyle } from '..';
 import { NewsTag, NewsTagSize, NewsTagVariant } from './NewsTag';
+import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
   title: 'UI Components/NewsTag',
   component: NewsTag,
   tags: ['autodocs'],
   args: {
     size: NewsTagSize.sm,
-    variant: NewsTagVariant.secondary,
+    variant: NewsTagVariant.indigo,
     hasEndIcon: true,
     hasBorder: false,
   },
@@ -22,7 +22,7 @@ export const Default: Story = {
     return (
       <div className="flex flex-col gap-5">
         <div className="inline-flex content-end items-end space-x-3">
-          <NewsTag {...args} size={NewsTagSize.xs} variant={NewsTagVariant.secondary}>
+          <NewsTag {...args} size={NewsTagSize.xs}>
             <span className="flex items-center gap-1">
               <Icon
                 icon={IconCatalog.sparkles}
@@ -32,7 +32,7 @@ export const Default: Story = {
               <span>Last update 2 days ago</span>
             </span>
           </NewsTag>
-          <NewsTag {...args} size={NewsTagSize.sm} variant={NewsTagVariant.secondary}>
+          <NewsTag {...args} size={NewsTagSize.sm}>
             Last updated 2 days ago
           </NewsTag>
         </div>

diff --git a/src/components/NewsTag/NewsTag.tsx b/src/components/NewsTag/NewsTag.tsx
@@ -24,14 +24,18 @@ enum EndIconSize {
 
 export enum NewsTagVariant {
   secondary = 'secondary',
+  indigo = 'indigo',
 }
 
 const Variants: Record<NewsTagVariant, string> = {
   [NewsTagVariant.secondary]: 'bg-secondary-600/50 hover:bg-secondary-600/70 text-secondary-100',
+  [NewsTagVariant.indigo]:
+    'bg-indigo-200 dark:bg-indigo-600/50 hover:bg-indigo-600/20 hover:dark:bg-indigo-600/70 text-indigo-800 dark:text-indigo-100',
 };
 
 const Borders: Record<NewsTagVariant, string> = {
   [NewsTagVariant.secondary]: 'ring-1 ring-inset ring-secondary-300/30',
+  [NewsTagVariant.indigo]: 'ring-1 ring-inset ring-indigo-300/30',
 };
 
 export interface NewsTagProps {
@@ -72,9 +76,9 @@ export interface NewsTagProps {
 export const NewsTag = ({
   children,
   size = NewsTagSize.sm,
-  variant = NewsTagVariant.secondary,
+  variant = NewsTagVariant.indigo,
   hasEndIcon = true,
-  hasBorder = false,
+  hasBorder = true,
   className,
 }: NewsTagProps) => {
   const classes = {