feat(Divider): responsive prop (#375)

daisyui · Jun 27, 2023 · fd2f903 · fd2f903
1 parent bd346a2
commit fd2f903
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 16 deletions.
diff --git a/src/Divider/Divider.stories.tsx b/src/Divider/Divider.stories.tsx
@@ -2,40 +2,78 @@ import React from 'react'
 import { StoryFn as Story, Meta } from '@storybook/react'
 
 import Divider, { DividerProps } from '.'
+import Card from '../Card'
 
 export default {
   title: 'Layout/Divider',
   component: Divider,
+  args: {
+    children: 'OR',
+  },
 } as Meta
 
-export const Default: Story<DividerProps> = (args) => {
+export const Default: Story<DividerProps> = ({ children, ...args }) => {
   return (
-    <div className="flex flex-col w-full">
-      <div className="grid h-20 card bg-base-300 rounded-box place-items-center">
+    <div className="flex flex-col w-full border-opacity-50">
+      <Card className="grid h-20 bg-base-300 rounded-box place-items-center">
         content
-      </div>
-      <Divider {...args}>{args.children}</Divider>
-      <div className="grid h-20 card bg-base-300 rounded-box place-items-center">
+      </Card>
+      <Divider {...args}>{children}</Divider>
+      <Card className="grid h-20 bg-base-300 rounded-box place-items-center">
         content
-      </div>
+      </Card>
     </div>
   )
 }
 Default.args = {}
 
-export const Vertical: Story<DividerProps> = (args) => {
+export const Horizontal: Story<DividerProps> = ({ children, ...args }) => {
+  return (
+    <div className="flex w-full ">
+      <Card className="grid h-20 flex-grow bg-base-300 rounded-box place-items-center">
+        content
+      </Card>
+      <Divider {...args}>{children}</Divider>
+      <Card className="grid h-20 flex-grow bg-base-300 rounded-box place-items-center">
+        content
+      </Card>
+    </div>
+  )
+}
+Horizontal.args = {
+  horizontal: true,
+}
+
+export const NoText: Story<DividerProps> = ({ children, ...args }) => {
+  return (
+    <div className="flex flex-col w-full">
+      <Card className="grid h-20 bg-base-300 rounded-box place-items-center">
+        content
+      </Card>
+      <Divider {...args}>{children}</Divider>
+      <Card className="grid h-20 bg-base-300 rounded-box place-items-center">
+        content
+      </Card>
+    </div>
+  )
+}
+NoText.args = {
+  children: '',
+}
+
+export const Responsive: Story<DividerProps> = ({ children, ...args }) => {
   return (
-    <div className="flex flex-row w-full">
-      <div className="grid flex-grow h-32 card bg-base-300 rounded-box place-items-center">
+    <div className="flex flex-col w-full lg:flex-row">
+      <Card className="grid flex-grow h-32 bg-base-300 rounded-box place-items-center">
         content
-      </div>
-      <Divider {...args}>{args.children}</Divider>
-      <div className="grid flex-grow h-32 card bg-base-300 rounded-box place-items-center">
+      </Card>
+      <Divider {...args}>{children}</Divider>
+      <Card className="grid flex-grow h-32 bg-base-300 rounded-box place-items-center">
         content
-      </div>
+      </Card>
     </div>
   )
 }
-Vertical.args = {
-  vertical: true,
+Responsive.args = {
+  responsive: true,
 }
diff --git a/src/Divider/Divider.tsx b/src/Divider/Divider.tsx
@@ -8,12 +8,14 @@ export type DividerProps = React.HTMLAttributes<HTMLDivElement> &
   IComponentBaseProps & {
     vertical?: boolean
     horizontal?: boolean
+    responsive?: boolean
   }
 
 const Divider = ({
   children,
   vertical,
   horizontal,
+  responsive,
   dataTheme,
   className,
   ...props
@@ -24,6 +26,7 @@ const Divider = ({
     clsx({
       'divider-vertical': vertical,
       'divider-horizontal': horizontal,
+      'lg:divider-horizontal': responsive,
     })
   )