feat: update Accordion styles, improve docs [MDS-717] (#2428)

coingaming · Oct 11, 2023 · 591a925 · 591a925
1 parent 76c5ac0
commit 591a925
Show file tree

Hide file tree

Showing 30 changed files with 458 additions and 286 deletions.
diff --git a/docs/app/components/client/accordion/examples/Default.tsx b/docs/app/components/client/accordion/examples/Default.tsx
@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import React from 'react';
 import Accordion from '@heathmont/moon-core-tw/lib/es/accordion/Accordion';

diff --git a/docs/app/components/client/accordion/page.tsx b/docs/app/components/client/accordion/page.tsx
@@ -1,9 +1,9 @@
-import { Default } from "./examples/Default";
-import { getExamples } from "@/app/utils/getExamples";
-import { MDX } from "@/components/MDX";
+import { Default } from './examples/Default';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
 
 export default async function Home() {
-  const { client } = await getExamples()
+  const { client } = await getExamples();
   return (
     <div className="flex flex-col gap-4 text-moon-14">
       <h1>Accordion</h1>
@@ -12,11 +12,17 @@ export default async function Home() {
 
       <div className="space-y-2">
         <h2>Default</h2>
-        <div className={'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-goku rounded-moon-s-sm'}>
+        <div
+          className={
+            'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-gohan rounded-moon-s-sm'
+          }
+        >
           <Default />
         </div>
-        <pre className="bg-goku rounded-moon-s-sm p-4">{client.accordion.examples.Default}</pre>
+        <pre className="bg-gohan rounded-moon-s-sm p-4">
+          {client.accordion.examples.Default}
+        </pre>
       </div>
     </div>
-  )
+  );
 }
diff --git a/docs/app/components/server/accordion/description.md b/docs/app/components/server/accordion/description.md
@@ -0,0 +1 @@
+An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.
diff --git a/docs/app/components/server/accordion/examples/ContentOutsideSizes.tsx b/docs/app/components/server/accordion/examples/ContentOutsideSizes.tsx
@@ -0,0 +1,67 @@
+import Accordion from '@heathmont/moon-base-tw/lib/accordion/Accordion';
+import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
+
+export const ContentOutsideSizes = () => (
+  <>
+    <Accordion size="sm">
+      <Accordion.Summary>
+        Size SM
+        <ControlsChevronDownSmall />
+      </Accordion.Summary>
+      <Accordion.ContentOutside>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion.ContentOutside>
+    </Accordion>
+    <Accordion>
+      <Accordion.Summary>
+        Default size MD
+        <ControlsChevronDownSmall />
+      </Accordion.Summary>
+      <Accordion.ContentOutside>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion.ContentOutside>
+    </Accordion>
+    <Accordion size="lg">
+      <Accordion.Summary>
+        Size LG
+        <ControlsChevronDownSmall />
+      </Accordion.Summary>
+      <Accordion.ContentOutside>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion.ContentOutside>
+    </Accordion>
+    <Accordion size="xl">
+      <Accordion.Summary>
+        Size XL
+        <ControlsChevronDownSmall />
+      </Accordion.Summary>
+      <Accordion.ContentOutside>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion.ContentOutside>
+    </Accordion>
+  </>
+);
diff --git a/docs/app/components/server/accordion/examples/Default.tsx b/docs/app/components/server/accordion/examples/Default.tsx
@@ -0,0 +1,20 @@
+import Accordion from '@heathmont/moon-base-tw/lib/accordion/Accordion';
+import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
+
+export const Default = () => (
+  <Accordion>
+    <Accordion.Summary>
+      Default
+      <ControlsChevronDownSmall />
+    </Accordion.Summary>
+    <Accordion.Content>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </Accordion.Content>
+  </Accordion>
+);
diff --git a/docs/app/components/server/accordion/examples/Disabled.tsx b/docs/app/components/server/accordion/examples/Disabled.tsx
@@ -0,0 +1,20 @@
+import Accordion from '@heathmont/moon-base-tw/lib/accordion/Accordion';
+import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
+
+export const Disabled = () => (
+  <Accordion disabled>
+    <Accordion.Summary>
+      Disabled
+      <ControlsChevronDownSmall />
+    </Accordion.Summary>
+    <Accordion.Content>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </Accordion.Content>
+  </Accordion>
+);
diff --git a/docs/app/components/server/accordion/examples/Sizes.tsx b/docs/app/components/server/accordion/examples/Sizes.tsx
@@ -0,0 +1,67 @@
+import Accordion from '@heathmont/moon-base-tw/lib/accordion/Accordion';
+import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
+
+export const Sizes = () => (
+  <>
+    <Accordion size="sm">
+      <Accordion.Summary>
+        Size SM
+        <ControlsChevronDownSmall />
+      </Accordion.Summary>
+      <Accordion.Content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion.Content>
+    </Accordion>
+    <Accordion>
+      <Accordion.Summary>
+        Default size MD
+        <ControlsChevronDownSmall />
+      </Accordion.Summary>
+      <Accordion.Content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion.Content>
+    </Accordion>
+    <Accordion size="lg">
+      <Accordion.Summary>
+        Size LG
+        <ControlsChevronDownSmall />
+      </Accordion.Summary>
+      <Accordion.Content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion.Content>
+    </Accordion>
+    <Accordion size="xl">
+      <Accordion.Summary>
+        Size XL
+        <ControlsChevronDownSmall />
+      </Accordion.Summary>
+      <Accordion.Content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Accordion.Content>
+    </Accordion>
+  </>
+);
diff --git a/docs/app/components/server/accordion/page.tsx b/docs/app/components/server/accordion/page.tsx
@@ -0,0 +1,37 @@
+import { ContentOutsideSizes } from '@/app/components/server/accordion/examples/ContentOutsideSizes';
+import { Default } from '@/app/components/server/accordion/examples/Default';
+import { Disabled } from '@/app/components/server/accordion/examples/Disabled';
+import { Sizes } from '@/app/components/server/accordion/examples/Sizes';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+  const { server } = await getExamples();
+  return (
+    <div className="max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Accordion</h1>
+      <MDX markdown={server.accordion.description} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.accordion.examples.Default}
+      />
+      <ExampleSection
+        title="Disabled"
+        component={<Disabled />}
+        code={server.accordion.examples.Disabled}
+      />
+      <ExampleSection
+        title="Sizes"
+        component={<Sizes />}
+        code={server.accordion.examples.Sizes}
+      />
+      <ExampleSection
+        title="ContentOutsideSizes"
+        component={<ContentOutsideSizes />}
+        code={server.accordion.examples.ContentOutsideSizes}
+      />
+    </div>
+  );
+}
diff --git a/docs/app/components/shared/CodePreview.tsx b/docs/app/components/shared/CodePreview.tsx
@@ -0,0 +1,7 @@
+const CodePreview = ({ code }: { code: string }) => (
+  <pre className="theme-moon-dark bg-gohan text-bulma rounded-moon-s-sm p-4">
+    {code}
+  </pre>
+);
+
+export default CodePreview;
diff --git a/docs/app/components/shared/ComponentPreview.tsx b/docs/app/components/shared/ComponentPreview.tsx
@@ -0,0 +1,11 @@
+const ComponentPreview = ({ component }: { component: JSX.Element }) => (
+  <div
+    className={
+      'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-gohan rounded-moon-s-sm'
+    }
+  >
+    {component}
+  </div>
+);
+
+export default ComponentPreview;
diff --git a/docs/app/components/shared/ExampleSection.tsx b/docs/app/components/shared/ExampleSection.tsx
@@ -0,0 +1,18 @@
+import CodePreview from './CodePreview';
+import ComponentPreview from './ComponentPreview';
+
+type Props = {
+  title: string;
+  component: JSX.Element;
+  code: string;
+};
+
+const ExampleSection = async ({ title, component, code }: Props) => (
+  <div className="space-y-2">
+    <h2 className="text-moon-24 font-medium">{title}</h2>
+    <ComponentPreview component={component} />
+    <CodePreview code={code} />
+  </div>
+);
+
+export default ExampleSection;
diff --git a/docs/app/components/shared/fonts/DMSans-Regular.woff2 b/docs/app/components/shared/fonts/DMSans-Regular.woff2
diff --git a/docs/app/components/shared/fonts/DMSans-Semibold.woff2 b/docs/app/components/shared/fonts/DMSans-Semibold.woff2
diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
@@ -1,31 +1,40 @@
 export interface Examples {
-  "client": {
-    "accordion": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    },
-    "button": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    }
-  },
-  "server": {
-    "avatar": {
-      "description": "string",
-      "examples": {
-        "Active": "string",
-        "Default": "string"
-      }
-    },
-    "tag": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    }
-  }
-};
+  client: {
+    accordion: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+    button: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+  };
+  server: {
+    accordion: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+        Disabled: 'string';
+        Sizes: 'string';
+        ContentOutsideSizes: 'string';
+      };
+    };
+    avatar: {
+      description: 'string';
+      examples: {
+        Active: 'string';
+        Default: 'string';
+      };
+    };
+    tag: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+  };
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.