added card divider component

ensdomains · Jan 4, 2023 · 0896f7b · 0896f7b
1 parent 7ec98a1
commit 0896f7b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/components/src/components/atoms/Card/Card.tsx b/components/src/components/atoms/Card/Card.tsx
@@ -26,6 +26,20 @@ const Container = styled.div<{ $variant: Props['variant'] }>(
   `,
 )
 
+const Divider = styled.div<{ $variant: Props['variant'] }>(
+  ({ theme, $variant }) => css`
+    width: calc(100% + 2 * ${theme.space['4']});
+    height: 1px;
+    background: ${theme.colors.border};
+    margin: 0 -${theme.space['4']};
+    ${$variant === 'desktop' &&
+    css`
+      margin: 0 -${theme.space['6']};
+      width: calc(100% + 2 * ${theme.space['6']});
+    `}
+  `,
+)
+
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
 export const Card = ({ title, variant, children, ...props }: Props) => {
@@ -38,3 +52,4 @@ export const Card = ({ title, variant, children, ...props }: Props) => {
 }
 
 Card.displayName = 'Card'
+Card.Divider = Divider
diff --git a/docs/src/reference/mdx/atoms/Card.docs.mdx b/docs/src/reference/mdx/atoms/Card.docs.mdx
@@ -56,3 +56,30 @@ import { Card } from '@ensdomains/thorin'
   </Card>
 </DeleteMe>
 ```
+
+## Divider
+
+```tsx live=true
+<DeleteMe>
+  <Card divider title="Heading" variant="desktop">
+    <Card.Divider $variant="desktop" />
+    <Typography>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </Typography>
+    <Card.Divider $variant="desktop" />
+    <Typography>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </Typography>
+  </Card>
+  <Card divider title="Heading" variant="mobile">
+    <Card.Divider />
+    <Typography>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </Typography>
+    <Card.Divider />
+    <Typography>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </Typography>
+  </Card>
+</DeleteMe>
+```