feat(MessageText): refactor message text component, add colors

shuriken-ui · Feb 20, 2024 · b8caef4 · b8caef4
1 parent c3f27f6
commit b8caef4
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 83 deletions.
diff --git a/src/plugins/components/message-text/index.ts b/src/plugins/components/message-text/index.ts
@@ -29,9 +29,6 @@ export default plugin(({ addComponents, theme }) => {
         //Base
         [`@apply inline-block h-${config.dot.size} w-${config.dot.size} rounded-${config.dot.rounded}`]:
           {},
-        //Background
-        [`@apply bg-${config.dot.background.light} dark:bg-${config.dot.background.dark}`]:
-          {},
       },
       //Message:close
       '.nui-message-close': {
@@ -50,40 +47,34 @@ export default plugin(({ addComponents, theme }) => {
       '&.nui-message-curved': {
         [`@apply ${config.rounded.curved}`]: {},
       },
-      //Color:white
-      '&.nui-message-white': {
-        [`@apply bg-${config.color.white.background.light} dark:bg-${config.color.white.background.dark}`]:
+      //Contrast:low
+      '&.nui-message-low-contrast': {
+        //Background
+        [`@apply bg-${config.contrast.lowContrast.background.light} dark:bg-${config.contrast.lowContrast.background.dark}`]:
+          {},
+        //Border
+        [`@apply border border-${config.contrast.lowContrast.border.light} dark:border-${config.contrast.lowContrast.border.dark}`]:
           {},
       },
-      //Color:whiteContrast
-      '&.nui-message-white-contrast': {
-        [`@apply bg-${config.color.whiteContrast.background.light} dark:bg-${config.color.whiteContrast.background.dark}`]:
+      //Contrast:high
+      '&.nui-message-high-contrast': {
+        //Background
+        [`@apply bg-${config.contrast.highContrast.background.light} dark:bg-${config.contrast.highContrast.background.dark}`]:
+          {},
+        //Border
+        [`@apply border border-${config.contrast.highContrast.border.light} dark:border-${config.contrast.highContrast.border.dark}`]:
           {},
       },
-      //Color:default
+      //Color:white
       '&.nui-message-default': {
-        [`@apply border border-${config.color.default.border.light} dark:border-${config.color.default.border.dark}`]:
-          {},
         //Message:dot
         '.nui-message-dot': {
           [`@apply bg-${config.color.default.dot.background.light} dark:bg-${config.color.default.dot.background.dark}`]:
             {},
         },
       },
-      //Color:contrast
-      '&.nui-message-contrast': {
-        [`@apply border border-${config.color.contrast.border.light} dark:border-${config.color.contrast.border.dark}`]:
-          {},
-        //Message:dot
-        '.nui-message-dot': {
-          [`@apply bg-${config.color.contrast.dot.background.light} dark:bg-${config.color.contrast.dot.background.dark}`]:
-            {},
-        },
-      },
       //Color:primary
       '&.nui-message-primary': {
-        [`@apply border border-${config.color.primary.border.light} dark:border-${config.color.primary.border.dark}`]:
-          {},
         //Message:dot
         '.nui-message-dot': {
           [`@apply bg-${config.color.primary.dot.background.light} dark:bg-${config.color.primary.dot.background.dark}`]:
@@ -92,8 +83,6 @@ export default plugin(({ addComponents, theme }) => {
       },
       //Color:info
       '&.nui-message-info': {
-        [`@apply border border-${config.color.info.border.light} dark:border-${config.color.info.border.dark}`]:
-          {},
         //Message:dot
         '.nui-message-dot': {
           [`@apply bg-${config.color.info.dot.background.light} dark:bg-${config.color.info.dot.background.dark}`]:
@@ -102,8 +91,6 @@ export default plugin(({ addComponents, theme }) => {
       },
       //Color:success
       '&.nui-message-success': {
-        [`@apply border border-${config.color.success.border.light} dark:border-${config.color.success.border.dark}`]:
-          {},
         //Message:dot
         '.nui-message-dot': {
           [`@apply bg-${config.color.success.dot.background.light} dark:bg-${config.color.success.dot.background.dark}`]:
@@ -112,8 +99,6 @@ export default plugin(({ addComponents, theme }) => {
       },
       //Color:warning
       '&.nui-message-warning': {
-        [`@apply border border-${config.color.warning.border.light} dark:border-${config.color.warning.border.dark}`]:
-          {},
         //Message:dot
         '.nui-message-dot': {
           [`@apply bg-${config.color.warning.dot.background.light} dark:bg-${config.color.warning.dot.background.dark}`]:
@@ -122,14 +107,28 @@ export default plugin(({ addComponents, theme }) => {
       },
       //Color:danger
       '&.nui-message-danger': {
-        [`@apply border border-${config.color.danger.border.light} dark:border-${config.color.danger.border.dark}`]:
-          {},
         //Message:dot
         '.nui-message-dot': {
           [`@apply bg-${config.color.danger.dot.background.light} dark:bg-${config.color.danger.dot.background.dark}`]:
             {},
         },
       },
+      //Color:dark
+      '&.nui-message-dark': {
+        //Message:dot
+        '.nui-message-dot': {
+          [`@apply bg-${config.color.dark.dot.background.light} dark:bg-${config.color.dark.dot.background.dark}`]:
+            {},
+        },
+      },
+      //Color:black
+      '&.nui-message-black': {
+        //Message:dot
+        '.nui-message-dot': {
+          [`@apply bg-${config.color.black.dot.background.light} dark:bg-${config.color.black.dot.background.dark}`]:
+            {},
+        },
+      },
     },
   })
 }, config)
diff --git a/src/plugins/components/message-text/message-text.component.ts b/src/plugins/components/message-text/message-text.component.ts
@@ -13,7 +13,7 @@ import { Paragraph } from '../paragraph/paragraph.component'
 export const MessageText = ({
   title,
   text,
-  contrast = 'white',
+  contrast = 'low-contrast',
   color = 'default',
   rounded = 'sm',
   classes,
@@ -55,6 +55,7 @@ export const MessageText = ({
       ${ButtonClose({
         rounded: 'full',
         color: 'default',
+        size: 'xs',
         classes: {
           wrapper: 'nui-message-close',
         },

diff --git a/src/plugins/components/message-text/message-text.config.ts b/src/plugins/components/message-text/message-text.config.ts
@@ -1,7 +1,7 @@
 export const key = 'messageText' as const
 
 export const defaultConfig = {
-  padding: '6',
+  padding: '5',
   rounded: {
     default: 'rounded-md',
     smooth: 'rounded-lg',
@@ -11,58 +11,44 @@ export const defaultConfig = {
     gap: '2',
   },
   dot: {
-    size: '3',
+    size: '2',
     rounded: 'full',
-    background: {
-      light: 'muted-200',
-      dark: 'muted-700',
-    },
   },
   close: {
     position: '2',
   },
-  color: {
-    default: {
-      border: {
-        light: 'muted-300',
-        dark: 'muted-700',
-      },
-      dot: {
-        background: {
-          light: 'muted-200',
-          dark: 'muted-700',
-        },
-      },
-    },
-    white: {
+  contrast: {
+    lowContrast: {
       background: {
         light: 'white',
         dark: 'muted-800',
       },
+      border: {
+        light: 'muted-300',
+        dark: 'muted-700',
+      },
     },
-    whiteContrast: {
+    highContrast: {
       background: {
         light: 'white',
         dark: 'muted-950',
       },
-    },
-    contrast: {
       border: {
         light: 'muted-300',
         dark: 'muted-800',
       },
+    },
+  },
+  color: {
+    default: {
       dot: {
         background: {
-          light: 'muted-200',
-          dark: 'muted-800',
+          light: 'muted-300',
+          dark: 'muted-700',
         },
       },
     },
     primary: {
-      border: {
-        light: 'primary-500',
-        dark: 'primary-500',
-      },
       dot: {
         background: {
           light: 'primary-500',
@@ -71,10 +57,6 @@ export const defaultConfig = {
       },
     },
     info: {
-      border: {
-        light: 'info-500',
-        dark: 'info-500',
-      },
       dot: {
         background: {
           light: 'info-500',
@@ -83,10 +65,6 @@ export const defaultConfig = {
       },
     },
     success: {
-      border: {
-        light: 'success-500',
-        dark: 'success-500',
-      },
       dot: {
         background: {
           light: 'success-500',
@@ -95,10 +73,6 @@ export const defaultConfig = {
       },
     },
     warning: {
-      border: {
-        light: 'warning-500',
-        dark: 'warning-500',
-      },
       dot: {
         background: {
           light: 'warning-500',
@@ -107,17 +81,29 @@ export const defaultConfig = {
       },
     },
     danger: {
-      border: {
-        light: 'danger-500',
-        dark: 'danger-500',
-      },
       dot: {
         background: {
           light: 'danger-500',
           dark: 'danger-500',
         },
       },
     },
+    dark: {
+      dot: {
+        background: {
+          light: 'muted-900',
+          dark: 'muted-100',
+        },
+      },
+    },
+    black: {
+      dot: {
+        background: {
+          light: 'black',
+          dark: 'white',
+        },
+      },
+    },
   },
 }
 

diff --git a/src/plugins/components/message-text/message-text.doc.mdx b/src/plugins/components/message-text/message-text.doc.mdx
@@ -45,6 +45,8 @@ Messages can have different colors. The following example shows the available co
     <Story of={MessageTextStories.Success} />
     <Story of={MessageTextStories.Warning} />
     <Story of={MessageTextStories.Danger} />
+    <Story of={MessageTextStories.Dark} />
+    <Story of={MessageTextStories.Black} />
   </div>
 </div>
 

diff --git a/src/plugins/components/message-text/message-text.stories.ts b/src/plugins/components/message-text/message-text.stories.ts
@@ -28,6 +28,8 @@ const meta = {
         'success',
         'warning',
         'danger',
+        'dark',
+        'black',
         'none',
       ],
       defaultValue: 'default',
@@ -39,8 +41,8 @@ const meta = {
     },
     contrast: {
       control: { type: 'select' },
-      options: ['white', 'contrast'],
-      defaultValue: 'white',
+      options: ['low-contrast', 'high-contrast'],
+      defaultValue: 'low-contrast',
     },
   },
 } satisfies Meta<MessageTextAttrs>
@@ -153,4 +155,24 @@ export const Danger: Story = {
     style: 'max-width: 440px;',
   },
 }
+
+export const Dark: Story = {
+  name: 'Color: dark',
+  args: {
+    color: 'dark',
+    title: 'Message title',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec dicuntur inconstantissime. Quamquam te quidem video minime esse deterritum.',
+    style: 'max-width: 440px;',
+  },
+}
+
+export const Black: Story = {
+  name: 'Color: black',
+  args: {
+    color: 'black',
+    title: 'Message title',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec dicuntur inconstantissime. Quamquam te quidem video minime esse deterritum.',
+    style: 'max-width: 440px;',
+  },
+}
 // #endregion
diff --git a/src/plugins/components/message-text/message-text.types.ts b/src/plugins/components/message-text/message-text.types.ts
@@ -11,8 +11,10 @@ export interface MessageTextProps extends Record<string, unknown> {
     | 'success'
     | 'warning'
     | 'danger'
+    | 'dark'
+    | 'black'
     | 'none'
-  contrast?: 'white' | 'contrast'
+  contrast?: 'low-contrast' | 'high-contrast'
   classes?: {
     wrapper?: string | string[]
     title?: string | string[]

diff --git a/src/plugins/components/message-text/message-text.variants.ts b/src/plugins/components/message-text/message-text.variants.ts
@@ -14,10 +14,12 @@ export const color = {
   success: 'nui-message-success',
   warning: 'nui-message-warning',
   danger: 'nui-message-danger',
+  dark: 'nui-message-dark',
+  black: 'nui-message-black',
   none: '',
 } as const satisfies MessageTextVariant<'color'>
 
 export const contrast = {
-  white: 'nui-message-white',
-  contrast: 'nui-message-contrast',
+  'low-contrast': 'nui-message-low-contrast',
+  'high-contrast': 'nui-message-high-contrast',
 } as const satisfies MessageTextVariant<'contrast'>