docs([DST-485]): Create reusable component for Do's and Don'ts (#3968)

Co-authored-by: Sebastian Sebald <[email protected]>

.changeset/thin-suits-complain.md

@@ -0,0 +1,5 @@
+---
+'@marigold/docs': minor
+---
+
+Adding AdviceCard component

docs/ui/DosAndDonts.tsx

@@ -0,0 +1,58 @@
+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"
+  >
+    <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>
+);
+
+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"
+  >
+    <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>
+);
+
+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',
+        })}
+      >
+        <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>
+  );
+};

docs/ui/mdx.tsx

@@ -24,6 +24,7 @@ import { AppearanceTable } from './AppearanceTable';
 import { ColorTokenTable } from './ColorTokens';
 import { ComponentDemo } from './ComponentDemo';
 import { CopyButton } from './CopyButton';
+import { DosAndDonts } from './DosAndDonts';
 import { FullsizeView } from './FullsizeViewDemo';
 import { Image } from './Image';
 import { PropsTable } from './PropsTable';
@@ -130,6 +131,8 @@ const typography = {
 const components = {
   ...typography,
   Image,
+  DosAndDonts,
+  Link,
   // Docs Components
   AlignmentsX,
   AlignmentsY,

themes/theme-docs/src/tokens.ts

@@ -34,6 +34,20 @@ const blue = {
   950: '#172554',
 };
 
+const green = {
+  50: '#f0fdf4',
+  100: '#ecfccb',
+  200: '#d9f99d',
+  300: '#bef264',
+  400: '#a3e635',
+  500: '#84cc16',
+  600: '#65a30d',
+  700: '#4d7c0f',
+  800: '#3f6212',
+  900: '#365314',
+  950: '#1a2e05',
+};
+
 const neutral = {
   50: '#fafafa',
   100: '#f5f5f5',
@@ -48,6 +62,20 @@ const neutral = {
   950: '#0a0a0a',
 };
 
+const red = {
+  50: '#fef2f2',
+  100: '#fee2e2',
+  200: '#fecaca',
+  300: '#fca5a5',
+  400: '#f87171',
+  500: '#ef4444',
+  600: '#dc2626',
+  700: '#b91c1c',
+  800: '#991b1b',
+  900: '#7f1d1d',
+  950: '#450a0a',
+};
+
 const slate = {
   50: '#f8fafc',
   100: '#f1f5f9',
@@ -132,7 +160,9 @@ export const colors = {
     },
 
     // Status
-    info: blue[100],
+    success: green[100],
+    error: red[50],
+    info: blue[50],
     warning: amber[50],
   },
 
@@ -141,5 +171,9 @@ export const colors = {
   border: {
     DEFAULT: slate[300],
     primary: slate[950],
+
+    // status
+    success: green[600],
+    error: red[600],
   },
 };