Merge pull request #2443 from coingaming/develop

Moon 10.10.2

docs/CHANGELOG.md

@@ -1,5 +1,16 @@
 # docs
 
+## 10.10.2
+
+### Patch Changes
+
+- Deploy 10.10.2
+- Updated dependencies
+  - @heathmont/moon-themes-tw@10.10.2
+  - @heathmont/moon-base-tw@10.10.2
+  - @heathmont/moon-cmdk-tw@10.10.2
+  - @heathmont/moon-core-tw@10.10.2
+
 ## 10.10.1
 
 ### Patch Changes

docs/app/components/server/accordion/page.tsx

@@ -3,15 +3,18 @@ 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 QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
 
 export default async function Home() {
   const { server } = await getExamples();
+  const examplesList = Object.keys(server.accordion.examples);
   return (
-    <div className="max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full 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} />
+      <QuickNav items={examplesList} />
       <ExampleSection
         title="Default"
         component={<Default />}

docs/app/components/server/button/description.md

@@ -0,0 +1,8 @@
+Buttons allow users to take actions, and make choices, with a single tap.
+
+Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
+
+Modal windows
+Forms
+Cards
+Toolbars

docs/app/components/server/button/examples/Animations.tsx

@@ -0,0 +1,18 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Animations = () => (
+  <>
+    <Button animation="progress" variant="outline">
+      Progress
+    </Button>
+    <Button animation="success" variant="outline">
+      Success
+    </Button>
+    <Button animation="error" variant="outline">
+      Error
+    </Button>
+    <Button animation="pulse" variant="outline">
+      Pulse
+    </Button>
+  </>
+);

docs/app/components/server/button/examples/Default.tsx

@@ -0,0 +1,3 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Default = () => <Button>Default</Button>;

docs/app/components/server/button/examples/Disabled.tsx

@@ -0,0 +1,3 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Disabled = () => <Button disabled>Disabled</Button>;

docs/app/components/server/button/examples/FullWidth.tsx

@@ -0,0 +1,8 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+export const FullWidth = () => (
+  <Button iconRight={<OtherFrame />} fullWidth>
+    Full width
+  </Button>
+);

docs/app/components/server/button/examples/Icons.tsx

@@ -0,0 +1,9 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+export const Icons = () => (
+  <>
+    <Button iconLeft={<OtherFrame />}>IconLeft</Button>
+    <Button iconRight={<OtherFrame />}>IconRight</Button>
+  </>
+);

docs/app/components/server/button/examples/Multiline.tsx

@@ -0,0 +1,12 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Multiline = () => (
+  <Button size="xl" className="py-3">
+    <span className="flex flex-col gap-1">
+      <span className="leading-none">Button text</span>
+      <span className="text-moon-9 font-normal leading-[12px]">
+        Placeholder text
+      </span>
+    </span>
+  </Button>
+);

docs/app/components/server/button/examples/Sizes.tsx

@@ -0,0 +1,11 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Sizes = () => (
+  <>
+    <Button size="xs">Size XS</Button>
+    <Button size="sm">Size SM</Button>
+    <Button>Default size MD</Button>
+    <Button size="lg">Size LG</Button>
+    <Button size="xl">Size XL</Button>
+  </>
+);

docs/app/components/server/button/examples/Variants.tsx

@@ -0,0 +1,9 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Variants = () => (
+  <>
+    <Button>Default is Fill</Button>
+    <Button variant="outline">Outline</Button>
+    <Button variant="ghost">Ghost</Button>
+  </>
+);

docs/app/components/server/button/page.tsx

@@ -0,0 +1,64 @@
+import { Animations } from '@/app/components/server/button/examples/Animations';
+import { Default } from '@/app/components/server/button/examples/Default';
+import { Disabled } from '@/app/components/server/button/examples/Disabled';
+import { FullWidth } from '@/app/components/server/button/examples/FullWidth';
+import { Icons } from '@/app/components/server/button/examples/Icons';
+import { Multiline } from '@/app/components/server/button/examples/Multiline';
+import { Sizes } from '@/app/components/server/button/examples/Sizes';
+import { Variants } from '@/app/components/server/button/examples/Variants';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.button.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Button</h1>
+      <MDX markdown={server.button.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.button.examples.Default}
+      />
+      <ExampleSection
+        title="Sizes"
+        component={<Sizes />}
+        code={server.button.examples.Sizes}
+      />
+      <ExampleSection
+        title="Variants"
+        component={<Variants />}
+        code={server.button.examples.Variants}
+      />
+      <ExampleSection
+        title="Icons"
+        component={<Icons />}
+        code={server.button.examples.Icons}
+      />
+      <ExampleSection
+        title="FullWidth"
+        component={<FullWidth />}
+        code={server.button.examples.FullWidth}
+      />
+      <ExampleSection
+        title="Disabled"
+        component={<Disabled />}
+        code={server.button.examples.Disabled}
+      />
+      <ExampleSection
+        title="Animations"
+        component={<Animations />}
+        code={server.button.examples.Animations}
+      />
+      <ExampleSection
+        title="Multiline"
+        component={<Multiline />}
+        code={server.button.examples.Multiline}
+      />
+    </div>
+  );
+}

docs/app/components/server/checkbox/description.md

@@ -0,0 +1,3 @@
+The checkbox is shown as a square box that is ticked (checked) when activated.
+
+Checkboxes are used to let a user select one or more options of a limited number of choices.

docs/app/components/server/checkbox/examples/Default.tsx

@@ -0,0 +1,5 @@
+import Checkbox from '@heathmont/moon-base-tw/lib/checkbox/Checkbox';
+
+export const Default = () => <Checkbox />;
+
+export default Default;

docs/app/components/server/checkbox/page.tsx

@@ -0,0 +1,22 @@
+import { Default } from '@/app/components/server/checkbox/examples/Default';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.checkbox.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Checkbox</h1>
+      <MDX markdown={server.checkbox.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.checkbox.examples.Default}
+      />
+    </div>
+  );
+}

docs/app/components/shared/ExampleSection.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 const ExampleSection = async ({ title, component, code }: Props) => (
   <div className="space-y-2">
-    <h2 className="text-moon-24 font-medium">{title}</h2>
+    <h2 id={title} className="text-moon-24 font-medium">{title}</h2>
     <ComponentPreview component={component} />
     <CodePreview code={code} />
   </div>

docs/app/components/shared/QuickNav.tsx

@@ -0,0 +1,11 @@
+const QuickNav = ({ items }: { items: string[] }) => (
+  <ul>
+    {items.map((item) => (
+      <li key={item}>
+        <a href={`#${item}`}>{item}</a>
+      </li>
+    ))}
+  </ul>
+);
+
+export default QuickNav;

docs/app/components/types.ts

@@ -17,16 +17,28 @@ export interface Examples {
     accordion: {
       description: 'string';
       examples: {
+        ContentOutsideSizes: 'string';
         Default: 'string';
         Disabled: 'string';
         Sizes: 'string';
-        ContentOutsideSizes: 'string';
       };
     };
-    avatar: {
+    button: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+        Sizes: 'string';
+        Variants: 'string';
+        Icons: 'string';
+        FullWidth: 'string';
+        Disabled: 'string';
+        Animations: 'string';
+        Multiline: 'string';
+      };
+    };
+    checkbox: {
       description: 'string';
       examples: {
-        Active: 'string';
         Default: 'string';
       };
     };
@@ -37,4 +49,10 @@ export interface Examples {
       };
     };
   };
+  shared: {
+    fonts: {
+      'DMSans-Regular': 'string';
+      'DMSans-Semibold': 'string';
+    };
+  };
 }