chore: fix typos and modal story

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

Hide file tree

Showing 6 changed files with 20 additions and 20 deletions.
diff --git a/src/plugins/components/breadcrumb/breadcrumb.component.ts b/src/plugins/components/breadcrumb/breadcrumb.component.ts
@@ -30,7 +30,7 @@ export const Breadcrumb = ({
       <ul class="nui-breadcrumb-list">
         <li class="nui-breadcrumb-item-mobile">
           ${Dropdown({
-            flavor: 'context',
+            variant: 'context',
             size: 'md',
             children: html`
               ${items?.slice(0, -1).map(

diff --git a/src/plugins/components/button/button.docs.mdx b/src/plugins/components/button/button.docs.mdx
@@ -60,7 +60,7 @@ Size allows you to change the size of the button.
 
 ### Variants: solid
 
-Variantss represent the visual styles applied to a button. Below are examples of the solid flavor.
+Variantss represent the visual styles applied to a button. Below are examples of the solid variant.
 
 <div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.SolidDefault} />
@@ -79,7 +79,7 @@ Variantss represent the visual styles applied to a button. Below are examples of
 
 ### Variants: pastel
 
-Variantss represent the visual styles applied to a button. Below are examples of the pastel flavor.
+Variantss represent the visual styles applied to a button. Below are examples of the pastel variant.
 
 <div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.PastelDefault} />
@@ -98,7 +98,7 @@ Variantss represent the visual styles applied to a button. Below are examples of
 
 ### Variants: outline
 
-Variantss represent the visual styles applied to a button. Below are examples of the outline flavor.
+Variantss represent the visual styles applied to a button. Below are examples of the outline variant.
 
 <div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.OutlineDefault} />

diff --git a/src/plugins/components/button/button.stories.ts b/src/plugins/components/button/button.stories.ts
@@ -193,7 +193,7 @@ export const Lg: Story = {
 }
 // #endregion
 
-// #region Flavors:solid
+// #region Variants:solid
 export const SolidDefault: Story = {
   name: 'Solid: default',
   args: {
@@ -339,7 +339,7 @@ export const SolidBlack: Story = {
 }
 // #endregion
 
-// #region Flavors:pastel
+// #region Variants:pastel
 export const PastelDefault: Story = {
   name: 'Pastel: default',
   args: {
@@ -461,7 +461,7 @@ export const PastelBlack: Story = {
 }
 // #endregion
 
-// #region Flavors:outline
+// #region Variants:outline
 export const OutlineDefault: Story = {
   name: 'Outline: default',
   args: {

diff --git a/src/plugins/components/dropdown/dropdown.stories.ts b/src/plugins/components/dropdown/dropdown.stories.ts
@@ -133,7 +133,7 @@ export const Main: Story = {
 }
 // #endregion
 
-// #region Flavor: Button
+// #region Variant: Button
 export const ButtonEnd: Story = {
   name: 'Main example',
   args: {
@@ -179,7 +179,7 @@ export const ButtonEnd: Story = {
 }
 // #endregion
 
-// #region Flavor: context
+// #region Variant: context
 export const ContextStart: Story = {
   name: 'Context: start',
   args: {
@@ -269,7 +269,7 @@ export const ContextEnd: Story = {
 }
 // #endregion
 
-// #region Flavor: text
+// #region Variant: text
 export const TextStart: Story = {
   name: 'Text: start',
   args: {

diff --git a/src/plugins/components/icon-box/icon-box.doc.mdx b/src/plugins/components/icon-box/icon-box.doc.mdx
@@ -80,7 +80,7 @@ Icon boxes can have different sizes, colors and shapes. The following example sh
 
 ### Color: solid
 
-Icon boxes can have different sizes, colors and shapes. The following example shows colors for the solid flavor.
+Icon boxes can have different sizes, colors and shapes. The following example shows colors for the solid variant.
 
 <div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
   <Story of={IconBoxStories.ColorSolidDefault} />
@@ -97,7 +97,7 @@ Icon boxes can have different sizes, colors and shapes. The following example sh
 
 ### Color: pastel
 
-Icon boxes can have different sizes, colors and shapes. The following example shows colors for the pastel flavor.
+Icon boxes can have different sizes, colors and shapes. The following example shows colors for the pastel variant.
 
 <div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
   <Story of={IconBoxStories.ColorPastelDefault} />
@@ -114,7 +114,7 @@ Icon boxes can have different sizes, colors and shapes. The following example sh
 
 ### Color: outline
 
-Icon boxes can have different sizes, colors and shapes. The following example shows colors for the outline flavor.
+Icon boxes can have different sizes, colors and shapes. The following example shows colors for the outline variant.
 
 <div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
   <Story of={IconBoxStories.ColorOutlineDefault} />
@@ -131,7 +131,7 @@ Icon boxes can have different sizes, colors and shapes. The following example sh
 
 ### Svg masks
 
-Icon boxes can be clipped with Svg masks. Svg masks only work when the icon box shape is set to 'straight'. Svg mask do not work with the 'outline' flavor.
+Icon boxes can be clipped with Svg masks. Svg masks only work when the icon box shape is set to 'straight'. Svg mask do not work with the 'outline' variant.
 
 <div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
   <Story of={IconBoxStories.MaskSolidPrimary} />

diff --git a/src/plugins/components/modal/modal.stories.ts b/src/plugins/components/modal/modal.stories.ts
@@ -41,7 +41,7 @@ export const Solid: Story = {
         shape: 'smooth',
         children: html`
           <!-- Header -->
-          <div class="flex items-center justify-between p-4 md:p-6">
+          <div class="flex items-center justify-between p-4">
             ${Heading({
               as: 'h3',
               size: 'lg',
@@ -85,17 +85,17 @@ export const Solid: Story = {
             </div>
           </div>
           <!-- Footer -->
-          <div class="p-4 md:p-6 ">
+          <div class="p-4">
             <div class="flex justify-end w-full gap-x-2">
               ${Button({
                 size: 'md',
-                flavor: 'solid',
+                variant: 'solid',
                 rounded: 'md',
                 children: 'Cancel',
               })}
               ${Button({
                 size: 'md',
-                flavor: 'solid',
+                variant: 'solid',
                 rounded: 'md',
                 color: 'primary',
                 children: 'Confirm',
@@ -169,13 +169,13 @@ export const SizeSm: Story = {
             <div class="flex justify-end w-full gap-x-2">
               ${Button({
                 size: 'md',
-                flavor: 'solid',
+                variant: 'solid',
                 shape: 'smooth',
                 children: 'Cancel',
               })}
               ${Button({
                 size: 'md',
-                flavor: 'solid',
+                variant: 'solid',
                 shape: 'smooth',
                 color: 'primary',
                 children: 'Confirm',