fix: fixed overflowing stories on mobile

daisyui · May 17, 2022 · 2908bcc · 2908bcc
1 parent cf81f9d
commit 2908bcc
Show file tree

Hide file tree

Showing 6 changed files with 318 additions and 284 deletions.
diff --git a/src/Badge/Badge.stories.tsx b/src/Badge/Badge.stories.tsx
@@ -16,8 +16,8 @@ Default.args = {}
 
 export const Colors: Story<BadgeProps> = (args) => {
   return (
-    <div className="flex flex-col gap-2">
-      <div className="flex gap-2">
+    <div>
+      <div>
         <Badge {...args}>neutral</Badge>
         <Badge {...args} color="primary">
           primary
@@ -32,7 +32,7 @@ export const Colors: Story<BadgeProps> = (args) => {
           ghost
         </Badge>
       </div>
-      <div className="flex gap-2">
+      <div>
         <Badge {...args} color="success">
           success
         </Badge>
@@ -49,11 +49,13 @@ export const Colors: Story<BadgeProps> = (args) => {
     </div>
   )
 }
-Colors.args = {}
+Colors.args = {
+  className: 'm-1'
+}
 
 export const Outline: Story<BadgeProps> = (args) => {
   return (
-    <div className="flex gap-2">
+    <div>
       <Badge {...args} variant="outline">
         neutral
       </Badge>
@@ -69,11 +71,13 @@ export const Outline: Story<BadgeProps> = (args) => {
     </div>
   )
 }
-Outline.args = {}
+Outline.args = {
+  className: 'm-1'
+}
 
 export const Sizes: Story<BadgeProps> = (args) => {
   return (
-    <div className="flex gap-2 items-center">
+    <div>
       <Badge {...args} size="lg">
         987,654
       </Badge>
@@ -89,7 +93,9 @@ export const Sizes: Story<BadgeProps> = (args) => {
     </div>
   )
 }
-Sizes.args = {}
+Sizes.args = {
+  className: 'm-1'
+}
 
 export const Empty: Story<BadgeProps> = (args) => {
   return (

diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
@@ -26,8 +26,8 @@ Default.args = {
 
 export const Colors: Story<ButtonProps> = (args) => {
   return (
-    <div className="flex flex-col gap-y-2">
-      <div className="flex gap-x-2">
+    <div>
+      <div>
         <Button {...args}>Default</Button>
         <Button {...args} color="primary">
           Primary
@@ -42,7 +42,7 @@ export const Colors: Story<ButtonProps> = (args) => {
           Ghost
         </Button>
       </div>
-      <div className="flex gap-x-2">
+      <div>
         <Button {...args} color="success">
           Success
         </Button>
@@ -59,6 +59,9 @@ export const Colors: Story<ButtonProps> = (args) => {
     </div>
   )
 }
+Colors.args = {
+  className: "m-1"
+}
 
 export const Variants: Story<ButtonProps> = (args) => {
   return (

diff --git a/src/Footer/Footer.stories.tsx b/src/Footer/Footer.stories.tsx
@@ -8,7 +8,7 @@ export default {
   component: Footer,
 } as Meta
 
-export const Default: Story<FooterProps> = (args) => {
+const Template: Story<FooterProps> = (args) => {
   return (
     <Footer className="p-10 bg-neutral text-neutral-content" {...args}>
       <div>
@@ -35,6 +35,14 @@ export const Default: Story<FooterProps> = (args) => {
   )
 }
 
+export const Default = Template.bind({})
+Default.args = {}
+
+export const Centered = Template.bind({})
+Centered.args = {
+  center: true
+}
+
 export const WithLogo: Story<FooterProps> = (args) => {
   return (
     <Footer className="p-10 bg-neutral text-neutral-content" {...args}>

diff --git a/src/Navbar/Navbar.stories.tsx b/src/Navbar/Navbar.stories.tsx
@@ -13,15 +13,24 @@ export const Default: Story<NavbarProps> = (args) => {
   return (
     <Navbar {...args}>
       <Navbar.Start className="px-2 mx-2">
+        <svg
+          className="block sm:hidden mr-2 fill-current"
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 512 512"
+        >
+          <path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+        </svg>
         <span className="text-lg font-bold">daisyUI</span>
       </Navbar.Start>
 
       <Navbar.Center className="px-2 mx-2">
-        <div className="flex items-stretch">
-          <a className="btn btn-ghost btn-sm rounded-btn">Home</a>
-          <a className="btn btn-ghost btn-sm rounded-btn">Portfolio</a>
-          <a className="btn btn-ghost btn-sm rounded-btn">About</a>
-          <a className="btn btn-ghost btn-sm rounded-btn">Contact</a>
+        <div className="hidden sm:flex items-stretch">
+          <Button size="sm">Home</Button>
+          <Button size="sm">Portfolio</Button>
+          <Button size="sm">About</Button>
+          <Button size="sm">Contact</Button>
         </div>
       </Navbar.Center>