docs: refa DonAndDonts to work without an image (#4023)

* docs: refa `DonAndDonts` to work without an image * Create great-rabbits-join.md * whoops * fix
marigold-ui · Jul 18, 2024 · 918b6c4 · 918b6c4
1 parent 72a0e8e
commit 918b6c4
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 53 deletions.
diff --git a/.changeset/great-rabbits-join.md b/.changeset/great-rabbits-join.md
@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+docs: refa `DonAndDonts` to work without an image
diff --git a/docs/content/__internal__/index.mdx b/docs/content/__internal__/index.mdx
@@ -0,0 +1,64 @@
+---
+title: Internal
+caption: A page to test stuff
+---
+
+## Do's and Don'ts
+
+<Columns columns={[1, 1]} space={4}>
+  <Do>
+    <Do.Figure>
+      <Image
+        className="aspect-square"
+        width={700}
+        height={700}
+        unoptimized
+        src="https://upload.wikimedia.org/wikipedia/commons/1/18/Dog_Breeds.jpg"
+        alt="Don't"
+      />
+    </Do.Figure>
+    <Do.Description>
+      Use one primary call to action to help people to proceed
+    </Do.Description>
+  </Do>
+  <Dont>
+    <Dont.Figure>
+      <Image
+        className="aspect-square"
+        width={700}
+        height={700}
+        unoptimized
+        src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/220px-Cat03.jpg"
+        alt="Don't"
+      />
+    </Dont.Figure>
+    <Dont.Description>
+      Don’t use many calls to action in one page or container.
+    </Dont.Description>
+  </Dont>
+</Columns>
+
+<Columns columns={[1, 1]} space={4}>
+  <Do>
+    <Do.Description>
+      <ul>
+        <li>Cheese</li>
+        <li>Milk</li>
+        <li>Bread</li>
+      </ul>
+    </Do.Description>
+  </Do>
+  <Dont>
+    <Dont.Description>
+      <ul>
+        <li>Cheese</li>
+        <li>Milk</li>
+        <li>Bread</li>
+      </ul>
+    </Dont.Description>
+  </Dont>
+</Columns>
+
+- foo
+- bar
+- baz
diff --git a/docs/ui/AppearanceDemo.tsx b/docs/ui/AppearanceDemo.tsx
@@ -0,0 +1 @@
+export const AppearanceDemo = () => {};
diff --git a/docs/ui/DosAndDonts.tsx b/docs/ui/DosAndDonts.tsx
@@ -1,58 +1,83 @@
-import React, { ReactNode } from 'react';
-
-import { cn } from '../../packages/system/dist';
-
-interface Props {
-  description: string;
-  variant: 'do' | 'dont';
-  children: ReactNode;
-}
-
-const advice = {
-  do: 'DO',
-  dont: "DON'T",
-};
-
-const checkIcon = (
-  <svg
-    width="10px"
-    height="10px"
-    viewBox="0 0 24 24"
-    className="not-prose size-5 flex-none rounded-full bg-green-600 fill-white p-1"
+import type { PropsWithChildren } from 'react';
+
+import { cn } from '@marigold/system';
+
+// Shared Child Components
+// ---------------
+const Container = ({
+  variant,
+  children,
+}: PropsWithChildren<{ variant: 'do' | 'dont' }>) => (
+  <div
+    className="group my-6 grid grid-cols-[1fr] grid-rows-[auto_auto_auto] [grid-template-areas:'figure''title''description']"
+    data-type={variant}
   >
-    <path d="M8.17368 16.6154L3.19528 11.637L1.5 13.3204L8.17368 19.994L22.5 5.66772L20.8167 3.98437L8.17368 16.6154Z"></path>
-  </svg>
+    {children}
+  </div>
 );
 
-const warningIcon = (
-  <svg
-    width="10px"
-    height="10px"
-    viewBox="0 0 24 24"
-    className="size-5 flex-none rounded-full bg-red-600 fill-white p-1"
+const Title = ({ children }: PropsWithChildren) => (
+  <div
+    className={cn(
+      '[grid-area:title]',
+      'group-data-[type=do]:bg-bg-success group-data-[type=do]:border-border-success group-data-[type=dont]:bg-bg-error group-data-[type=dont]:border-border-error',
+      'flex items-center gap-2 border-t-4 px-4 pb-2 pt-4 font-bold uppercase'
+    )}
   >
-    <path d="M19.8281 5.74868L18.2513 4.17188L12 10.4232L5.74868 4.17188L4.17188 5.74868L10.4232 12L4.17188 18.2513L5.74868 19.8281L12 13.5768L18.2513 19.8281L19.8281 18.2513L13.5768 12L19.8281 5.74868Z"></path>
-  </svg>
+    {children}
+  </div>
+);
+
+const Figure = ({ children }: PropsWithChildren) => (
+  <div className="not-prose [grid-area:figure]">{children}</div>
+);
+
+const Description = ({ children }: PropsWithChildren) => (
+  <div className="group-data-[type=do]:bg-bg-success group-data-[type=dont]:bg-bg-error px-4 pb-4 [grid-area:description] *:m-0">
+    {children}
+  </div>
 );
 
-export const DosAndDonts = ({ description, variant, children }: Props) => {
-  const icon = variant === 'do' ? checkIcon : warningIcon;
-
-  return (
-    <div className="not-prose">
-      {children}
-      <div
-        className={cn('flex flex-col gap-2 border-t-4 p-4', {
-          'border-border-error bg-bg-error': variant === 'dont',
-          'border-border-success bg-bg-success': variant === 'do',
-        })}
+// Do
+// ---------------
+export const Do = ({ children }: PropsWithChildren) => (
+  <Container variant="do">
+    <Title>
+      <svg
+        width="10px"
+        height="10px"
+        viewBox="0 0 24 24"
+        className="size-5 flex-none rounded-full bg-green-600 fill-white p-1"
       >
-        <div className="flex items-center gap-2">
-          {icon}
-          <h5 className="m-0 font-bold">{advice[variant]}</h5>
-        </div>
-        <p className="m-0">{description}</p>
-      </div>
-    </div>
-  );
-};
+        <path d="M8.17368 16.6154L3.19528 11.637L1.5 13.3204L8.17368 19.994L22.5 5.66772L20.8167 3.98437L8.17368 16.6154Z"></path>
+      </svg>
+      <h5 className="m-0 font-bold uppercase">Do</h5>
+    </Title>
+    {children}
+  </Container>
+);
+
+Do.Figure = Figure;
+Do.Description = Description;
+
+// Dont
+// ---------------
+export const Dont = ({ children }: PropsWithChildren) => (
+  <Container variant="dont">
+    <Title>
+      <svg
+        width="10px"
+        height="10px"
+        viewBox="0 0 24 24"
+        className="size-5 flex-none rounded-full bg-red-600 fill-white p-1"
+      >
+        <path d="M19.8281 5.74868L18.2513 4.17188L12 10.4232L5.74868 4.17188L4.17188 5.74868L10.4232 12L4.17188 18.2513L5.74868 19.8281L12 13.5768L18.2513 19.8281L19.8281 18.2513L13.5768 12L19.8281 5.74868Z"></path>
+      </svg>
+      <h5 className="m-0 font-bold uppercase">Don't</h5>
+    </Title>
+    {children}
+  </Container>
+);
+
+Dont.Figure = Figure;
+Dont.Description = Description;
diff --git a/docs/ui/mdx.tsx b/docs/ui/mdx.tsx
@@ -12,6 +12,7 @@ import {
   Columns,
   Headline,
   Link,
+  List,
   Scrollable,
   SectionMessage,
   Stack,
@@ -24,7 +25,7 @@ import { AppearanceTable } from './AppearanceTable';
 import { ColorTokenTable } from './ColorTokens';
 import { ComponentDemo } from './ComponentDemo';
 import { CopyButton } from './CopyButton';
-import { DosAndDonts } from './DosAndDonts';
+import { Do, Dont } from './DosAndDonts';
 import { FullsizeView } from './FullsizeViewDemo';
 import { Image } from './Image';
 import { PropsTable } from './PropsTable';
@@ -131,7 +132,6 @@ const typography = {
 const components = {
   ...typography,
   Image,
-  DosAndDonts,
   Link,
   // Docs Components
   AlignmentsX,
@@ -141,6 +141,8 @@ const components = {
   Breakpoints,
   ColorTokenTable,
   ComponentDemo,
+  Do,
+  Dont,
   FontSizes,
   FontStyle,
   FontWeights,
@@ -156,6 +158,7 @@ const components = {
   Card,
   Columns,
   Headline,
+  List,
   SectionMessage,
   Scrollable,
   Stack,