docs[DST-519]: Clean up Marigold Docs/ Improve Nav

.changeset/sweet-toys-shop.md

@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+docs[DST-519]: Clean up Marigold Docs/ Improve Nav

docs/app/_components/Navigation.tsx

@@ -29,7 +29,7 @@ interface NavigationSection {
 export const useNavigation = (): NavigationSection[] => {
   const navigation = siteConfig.navigation;
 
-  return navigation.map(({ name, slug, subsections = [] }) => {
+  return navigation.map(({ name, slug, subsections = [] }: any) => {
     // Section Page = has a section but NO subsection
     const sectionPages = allContentPages.filter(
       page => page.section === slug && !page.subsection
@@ -44,19 +44,22 @@ export const useNavigation = (): NavigationSection[] => {
         href: `/${page.slug}`,
         badge: page.badge,
       })),
-      subsections: subsections.map(subsection => ({
-        name: subsection.name,
-        links: allContentPages
-          .filter(
-            // Subsection Page = has a section AND a subsection
-            page => page.section === slug && page.subsection === subsection.slug
-          )
-          .map(page => ({
-            name: page.title,
-            href: `/${page.slug}`,
-            badge: page.badge,
-          })),
-      })),
+      subsections: subsections.map(
+        (subsection: { name: string; slug: string }) => ({
+          name: subsection.name,
+          links: allContentPages
+            .filter(
+              // Subsection Page = has a section AND a subsection
+              page =>
+                page.section === slug && page.subsection === subsection.slug
+            )
+            .map(page => ({
+              name: page.title,
+              href: `/${page.slug}`,
+              badge: page.badge,
+            })),
+        })
+      ),
     };
   });
 };

docs/app/_components/SiteHeader.tsx

@@ -14,9 +14,9 @@ export const SiteHeader = () => (
       <SiteLogo />
       <SiteNavigation />
     </div>
-    <div className="hidden md:block">
+    <div className="hidden lg:block">
       <Link href="https://marigold-rapp.vercel.app/" variant="cta">
-        <span className="hidden xl:inline">Discover new </span>Tutorials!
+        <span className="hidden 2xl:inline">Discover new </span>Tutorials!
       </Link>
     </div>
     <div className="flex flex-1 flex-col items-stretch md:block md:flex-initial">

docs/app/_components/SiteNavigation.tsx

@@ -10,10 +10,7 @@ export const SiteNavigation = () => {
   const sections = navigation.map(section => ({
     name: section.name,
     slug: section.slug,
-    link:
-      section.subsections.length > 0
-        ? section.subsections[0].links[0]
-        : section.links[0],
+    link: section.links[0],
   }));
 
   return (

docs/content/components/overview.mdx

@@ -0,0 +1,142 @@
+---
+title: Overview
+caption: Our Marigold Components.
+order: 1
+---
+
+Components are the reusable building blocks of our design system, designed to address specific interaction or UI needs. Each component is crafted to seamlessly integrate with others, forming patterns that deliver intuitive and cohesive user experiences.
+
+We seperate the components into different sections based on their use case. You can find those sections here.
+
+<TeaserList
+  items={[
+    {
+      title: 'Application',
+      href: '/components/application/provider',
+      caption: 'Components need for base setup.',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z" />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M4.867 19.125h.008v.008h-.008v-.008Z" />
+            </svg>
+
+      ),
+    },
+    {
+      title: 'Layout',
+      href: '/components/layout/aside',
+      caption: 'Components for layouting the pages.',
+      icon: (
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  strokeWidth={1.5}
+  stroke="currentColor"
+  className="size-6"
+>
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z"
+  />
+</svg>
+
+      ),
+    },
+    {
+      title: 'Form',
+      href: '/components/form/autocomplete',
+      caption: 'Components which should be used in forms.',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
+</svg>
+
+      ),
+    },
+        {
+      title: 'Collection',
+      href: '/components/collection/accordion',
+      caption: 'Components which uses collection elements.',
+      icon: (
+       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
+</svg>
+
+      ),
+    },
+        {
+      title: 'Navigation',
+      href: '/components/navigation/tabs',
+      caption: 'Components which are used for navigating.',
+      icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
+</svg>
+
+      ),
+    },
+        {
+      title: 'Overlay',
+      href: '/components/overlay/dialog',
+      caption: 'Components which have an overlay.',
+      icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" />
+</svg>
+
+      ),
+    },
+        {
+      title: 'Content',
+      href: '/components/content/badge',
+      caption: 'Components which are used for displaying content.',
+      icon: (
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  strokeWidth={1.5}
+  stroke="currentColor"
+  className="size-6"
+>
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+  />
+</svg>
+
+      ),
+    },
+     {
+      title: 'Formatters',
+      href: '/components/formatters/dateformat',
+      caption: 'Components which help formatting specific data.',
+      icon: (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+</svg>
+      ),
+    },
+     {
+      title: 'Hooks and Utils',
+      href: '/components/hooks-and-utils/cn',
+      caption: 'Hooks and helper functions to make you writing code easier.',
+      icon: (
+       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
+</svg>
+
+      ),
+    },
+
+]} />

docs/content/introduction/design-principles.mdx → docs/content/concepts/design-principles.mdx

@@ -1,7 +1,7 @@
 ---
 title: Design Principles
 caption: Guidelines for the creation of effective and user-friendly interfaces.
-order: 10
+order: 4
 ---
 
 Design principles guide the creation of cohesive, user-friendly software applications. They define and communicate key product characteristics to stakeholders, including clients, colleagues, and team members. By setting clear goals, design principles ensure that all decisions align, keeping the products in harmony and focused.

docs/content/introduction/design-token-guidelines.mdx → docs/content/concepts/design-token-guidelines.mdx

@@ -1,7 +1,7 @@
 ---
 title: Tokens Guidelines
 caption: Learn about the structure and application of our design tokens
-order: 4
+order: 5
 ---
 
 On this page, you'll discover detailed specifications for design tokens — the foundational elements that unify the visual language of your brand or products. Explore how design tokens are constructed and find information on where each token is applied within the design ecosystem.

docs/content/introduction/governance-principles.mdx → docs/content/concepts/governance-principles.mdx

@@ -1,7 +1,7 @@
 ---
 title: Governance Principles
 caption: Our governance values and principles on how we make decisions in the design system.
-order: 7
+order: 3
 ---
 
 “How does the design system team make decisions?”

docs/content/introduction/governance-process.mdx → docs/content/concepts/governance-process.mdx

@@ -1,7 +1,7 @@
 ---
 title: Governance Process
 caption: Making changes and additions to Marigold.
-order: 6
+order: 2
 ---
 
 Product teams are primarily focused on getting the job done. In their quest to achieve this, they sometimes need to take on design debt—improvising styles, crafting unique components, or even bypassing the design system entirely. To help teams avoid unnecessary debt, we've established a governance process that guides both the product teams and us on managing changes and additions within Marigold.

docs/content/concepts/overview.mdx

@@ -0,0 +1,99 @@
+---
+title: Overview
+caption: About why things are done a certain way.
+order: 1
+---
+
+Concepts refer to the underlying principles, philosophies, and approaches that guide the design system. They are high-level ideas that shape how and why components, patterns, or design choices are made. Its focused on guiding the thinking behind design decisions.
+
+<TeaserList
+  items={[
+    {
+      title: 'Governance Process',
+      href: '/concepts/governance-process',
+      caption: 'Guide on how to make changes and additions in Marigold.',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
+      </svg>
+      ),
+    },
+    {
+      title: 'Governance Principles',
+      href: '/concepts/governance-principles',
+      caption: 'Principles we follow for taking changes in Marigold.',
+      icon: (
+     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z" />
+    </svg>
+
+      ),
+    },
+    {
+      title: 'Design Principles',
+      href: '/concepts/design-principles',
+      caption: 'Base for our design decisions.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z"
+          />
+        </svg>
+      ),
+    },
+    {
+      title: 'Token Guidelines',
+      href: '/concepts/design-token-guidelines',
+      caption: 'How our tokens are structured.',
+      icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12" />
+</svg>
+
+      ),
+    },
+     {
+      title: 'Style Props',
+      href: '/concepts/style-props',
+      caption: 'Properties our components use.',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+        <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+      </svg>
+      ),
+    },
+    {
+    title: 'Validation',
+    href: '/concepts/validation',
+    caption: 'Learn how to validate your forms.',
+    icon: (
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  strokeWidth={1.5}
+  stroke="currentColor"
+  className="size-6"
+>
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z"
+  />
+</svg>
+
+    ),
+
+},
+]} />

docs/content/concepts/style-props.mdx

@@ -1,7 +1,7 @@
 ---
 title: Style Props
 caption: Style props are a set of properties that can be used to apply custom styling to a component.
-order: 3
+order: 6
 ---
 
 Style props are a concept used in component to enable easy and consistent styling of components in React applications. They provide a convenient way to apply CSS styling directly to components using JSX syntax. Instead of writing traditional CSS classes or inline styles, you can use these "style props" to define the appearance and layout of your components.