feat: improve message-text demos, improve component design

shuriken-ui · Dec 10, 2023 · ac449df · ac449df
1 parent b5cbf15
commit ac449df
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 80 deletions.
diff --git a/src/plugins/components/message-text/index.ts b/src/plugins/components/message-text/index.ts
@@ -24,7 +24,7 @@ export default plugin.withOptions(
           [`@apply relative p-${config.padding}`]: {},
           //Message:header
           [`.${prefix}message-head`]: {
-            [`@apply flex items-center gap-${config.header.gap} mb-2`]: {},
+            [`@apply flex items-center gap-${config.header.gap} mb-3`]: {},
           },
           //Message:dot
           [`.${prefix}message-dot`]: {

diff --git a/src/plugins/components/message-text/message-text.component.ts b/src/plugins/components/message-text/message-text.component.ts
@@ -36,8 +36,8 @@ export const MessageText = ({
         <span class="nui-message-dot"></span>
         ${Heading({
           as: 'h5',
-          size: 'sm',
-          weight: 'semibold',
+          size: 'md',
+          weight: 'medium',
           lead: 'none',
           classes: {
             wrapper: 'text-muted-800 dark:text-muted-50',

diff --git a/src/plugins/components/message-text/message-text.doc.mdx b/src/plugins/components/message-text/message-text.doc.mdx
@@ -18,92 +18,34 @@ Text messages allow you to display important information users should see.
 
 <br />
 
-### Rounded: none
+### Rounded
 
-Messages can have different shapes. The following example shows the straight shape.
+Messages can have different shapes. The following example shows the available shapes.
 
 <div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={MessageTextStories.Straight} />
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-4xl">
+    <Story of={MessageTextStories.Straight} />
+    <Story of={MessageTextStories.Rounded} />
+    <Story of={MessageTextStories.Smooth} />
+    <Story of={MessageTextStories.Curved} />
+  </div>
 </div>
 
 <br />
 
-### Rounded: sm
+### Colors
 
-Messages can have different shapes. The following example shows the rounded shape.
+Messages can have different colors. The following example shows the available colors.
 
 <div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={MessageTextStories.Rounded} />
-</div>
-
-<br />
-
-### Rounded: md
-
-Messages can have different shapes. The following example shows the smooth shape.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={MessageTextStories.Smooth} />
-</div>
-
-<br />
-
-### Rounded: lg
-
-Messages can have different shapes. The following example shows the curved shape.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={MessageTextStories.Curved} />
-</div>
-
-<br />
-
-### Color: primary
-
-Messages can have different colors. The following example shows the primary color.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={MessageTextStories.Curved} />
-</div>
-
-<br />
-
-### Color: info
-
-Messages can have different colors. The following example shows the info color.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={MessageTextStories.Info} />
-</div>
-
-<br />
-
-### Color: success
-
-Messages can have different colors. The following example shows the success color.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={MessageTextStories.Success} />
-</div>
-
-<br />
-
-### Color: warning
-
-Messages can have different colors. The following example shows the warning color.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={MessageTextStories.Warning} />
-</div>
-
-<br />
-
-### Color: danger
-
-Messages can have different colors. The following example shows the danger color.
-
-<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={MessageTextStories.Danger} />
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-4xl">
+    <Story of={MessageTextStories.Smooth} />
+    <Story of={MessageTextStories.Primary} />
+    <Story of={MessageTextStories.Info} />
+    <Story of={MessageTextStories.Success} />
+    <Story of={MessageTextStories.Warning} />
+    <Story of={MessageTextStories.Danger} />
+  </div>
 </div>
 
 <br />

diff --git a/src/plugins/components/message-text/message-text.stories.ts b/src/plugins/components/message-text/message-text.stories.ts
@@ -69,7 +69,6 @@ export const Straight: Story = {
     rounded: 'none',
     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;',
   },
 }