346-docmenu-use-the-docusaurus-sidebar-structure (#347)

* update deps * fix shiki update * replace text by label * add changeset
cypress-io · Nov 29, 2023 · de67952 · de67952 · vercel · Nov 29, 2023
1 parent 9a75c8b
commit de67952
Show file tree

Hide file tree

Showing 25 changed files with 1,233 additions and 657 deletions.
diff --git a/.changeset/docmenu-struct.md b/.changeset/docmenu-struct.md
@@ -0,0 +1,7 @@
+---
+"@cypress-design/react-docmenu": patch
+"@cypress-design/vue-docmenu": patch
+"@cypress-design/constants-docmenu": patch
+---
+
+fix: docmenu docusaurus style items structure
diff --git a/components/DocMenu/ReadMe.md b/components/DocMenu/ReadMe.md
@@ -7,19 +7,19 @@ import DocMenu from '@cypress-design/vue-docmenu'
 <DemoWrapper>
 	<DocMenu :items="[
     {
-      text: 'Page',
+      label: 'Page',
       href: '#',
     },
     {
-      text: 'Overview',
+      label: 'Overview',
       items: [
         {
-          text: 'Overview Item 1',
+          label: 'Overview Item 1',
           href: '#',
           active: true,
         },
         {
-          text: 'Overview Item 2',
+          label: 'Overview Item 2',
           href: '#',
         },
       ],

diff --git a/components/DocMenu/assertions.ts b/components/DocMenu/assertions.ts
@@ -4,85 +4,85 @@ import type { NavGroup, NavItemLink } from './constants'
 
 const menuItems = [
   {
-    text: 'Get Started',
+    label: 'Get Started',
     href: '#',
   },
   {
-    text: 'Overview',
+    label: 'Overview',
     items: [
       {
-        text: 'Overview Item 1',
+        label: 'Overview Item 1',
         href: '#',
       },
       {
-        text: 'Overview Item 2',
+        label: 'Overview Item 2',
         href: '#',
       },
     ],
   },
   {
-    text: 'Getting Started',
+    label: 'Getting Started',
     items: [
       {
-        text: 'Item 1',
+        label: 'Item 1',
         href: '#',
       },
       {
-        text: 'Item 2',
+        label: 'Item 2',
         href: '#',
       },
     ],
   },
   {
-    text: 'End-to-End Testing',
+    label: 'End-to-End Testing',
     items: [
       {
-        text: 'Introduction to E2E Testing',
+        label: 'Introduction to E2E Testing',
         items: [
           {
-            text: 'Item 1',
+            label: 'Item 1',
             href: '#',
           },
           {
-            text: 'sub menu',
+            label: 'sub menu',
             items: [
               {
-                text: 'Item 1',
+                label: 'Item 1',
                 href: '#',
                 active: true,
               },
               {
-                text: 'Item 2',
+                label: 'Item 2',
                 href: '#',
               },
             ],
           },
           {
-            text: 'Item 2',
+            label: 'Item 2',
             href: '#',
             active: true,
           },
         ],
       },
       {
-        text: 'AWS Authentication',
+        label: 'AWS Authentication',
         href: '#',
       },
       {
         active: true,
-        text: 'Google Authentication',
+        label: 'Google Authentication',
         href: '#',
       },
       {
-        text: 'Okta Authentication',
+        label: 'Okta Authentication',
         href: '#',
       },
     ],
   },
 ] satisfies (NavItemLink | NavGroup)[]
 
 export default function assertions(
-  mountStory: (options?: (NavItemLink | NavGroup)[]) => void
+  mountStory: (options?: (NavItemLink | NavGroup)[]) => void,
 ): void {
   it('renders', () => {
     mountStory(menuItems)

diff --git a/components/DocMenu/constants/src/index.ts b/components/DocMenu/constants/src/index.ts
@@ -1,5 +1,5 @@
 export interface NavItemBase {
-  text: string
+  label: string
   href?: string
   active?: boolean
 }

diff --git a/components/DocMenu/react/ReadMe.md b/components/DocMenu/react/ReadMe.md
@@ -22,53 +22,53 @@ import DocMenu from '@cypress-design/react-docmenu'
 <DocMenu
   items={[
     {
-      text: 'Get Started',
+      label: 'Get Started',
       href: '#',
     },
     {
-      text: 'Overview',
+      label: 'Overview',
       items: [
         {
-          text: 'Overview Item 1',
+          label: 'Overview Item 1',
           href: '#',
         },
         {
-          text: 'Overview Item 2',
+          label: 'Overview Item 2',
           href: '#',
           active: true,
         },
       ],
     },
     {
-      text: 'Getting Started',
+      label: 'Getting Started',
       items: [
         {
-          text: 'Item 1',
+          label: 'Item 1',
           href: '#',
         },
         {
-          text: 'Group',
+          label: 'Group',
           items: [
             {
-              text: 'Item 1',
+              label: 'Item 1',
               href: '#',
             },
             {
-              text: 'Item 2',
+              label: 'Item 2',
               href: '#',
             },
             {
-              text: 'Item 3',
+              label: 'Item 3',
               href: '#',
             },
             {
-              text: 'Item 4',
+              label: 'Item 4',
               href: '#',
             },
           ],
         },
         {
-          text: 'Item 5',
+          label: 'Item 5',
           href: '#',
           active: true,
         },

diff --git a/components/DocMenu/react/_DocGroup.tsx b/components/DocMenu/react/_DocGroup.tsx
@@ -76,7 +76,7 @@ export const DocGroup: React.FC<DocGroupProps> = ({
             })}
           />
         ) : null}
-        {group.text}
+        {group.label}
       </Head>
       {collapsible &&
       depth >= 0 &&

diff --git a/components/DocMenu/react/_DocLink.tsx b/components/DocMenu/react/_DocLink.tsx
@@ -55,7 +55,7 @@ export const DocLink: React.FC<DocLinkProps> = ({
             }}
           />
         ) : null}
-        {item.text}
+        {item.label}
       </a>
     </li>
   )

diff --git a/components/DocMenu/vue/ReadMe.md b/components/DocMenu/vue/ReadMe.md
@@ -22,53 +22,53 @@ import DocMenu from '@cypress-design/vue-docmenu'
 <DocMenu
   :items="[
     {
-      text: 'Get Started',
+      label: 'Get Started',
       href: '#',
     },
     {
-      text: 'Overview',
+      label: 'Overview',
       items: [
         {
-          text: 'Overview Item 1',
+          label: 'Overview Item 1',
           href: '#',
         },
         {
-          text: 'Overview Item 2',
+          label: 'Overview Item 2',
           href: '#',
           active: true,
         },
       ],
     },
     {
-      text: 'Getting Started',
+      label: 'Getting Started',
       items: [
         {
-          text: 'Item 1',
+          label: 'Item 1',
           href: '#',
         },
         {
-          text: 'Group',
+          label: 'Group',
           items: [
             {
-              text: 'Item 1',
+              label: 'Item 1',
               href: '#',
             },
             {
-              text: 'Item 2',
+              label: 'Item 2',
               href: '#',
             },
             {
-              text: 'Item 3',
+              label: 'Item 3',
               href: '#',
             },
             {
-              text: 'Item 4',
+              label: 'Item 4',
               href: '#',
             },
           ],
         },
         {
-          text: 'Item 5',
+          label: 'Item 5',
           href: '#',
           active: true,
         },

diff --git a/components/DocMenu/vue/_DocGroup.vue b/components/DocMenu/vue/_DocGroup.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
   }>(),
   {
     depth: 0,
-  }
+  },
 )
 
 const open = ref(props.depth === 0)
@@ -24,7 +24,7 @@ const height = computed(() => {
   return $groups.value && open.value
     ? $groups.value.reduce(
         (acc, { height: h }) => acc + h,
-        props.group.items.length
+        props.group.items.length,
       )
     : 0
 })
@@ -37,12 +37,12 @@ defineExpose<{
 
 const activeMarkerTop = computed(() => {
   const activeIndex = props.group.items.findIndex(
-    (item) => 'href' in item && item.active
+    (item) => 'href' in item && item.active,
   )
 
   // how many groups are before the active element?
   let numberOfGroups = props.group.items.filter(
-    (item, index) => !('href' in item) && index < activeIndex
+    (item, index) => !('href' in item) && index < activeIndex,
   ).length
 
   // if there is any open group before the active element
@@ -56,7 +56,7 @@ const activeMarkerTop = computed(() => {
 })
 
 const Head = computed(() =>
-  props.collapsible ? 'button' : props.group.href ? 'a' : 'div'
+  props.collapsible ? 'button' : props.group.href ? 'a' : 'div',
 )
 </script>
 
@@ -91,7 +91,7 @@ const Head = computed(() =>
         'ml-[16px]': depth,
       }"
     />
-    {{ group.text }}
+    {{ group.label }}
   </component>
   <div
     v-if="

diff --git a/components/DocMenu/vue/_DocLink.vue b/components/DocMenu/vue/_DocLink.vue
@@ -9,7 +9,7 @@ withDefaults(
   }>(),
   {
     depth: -1,
-  }
+  },
 )
 </script>
 
@@ -39,7 +39,7 @@ withDefaults(
           left: `-${18.5 + depth * 7.5}px`,
         }"
       />
-      {{ item.text }}
+      {{ item.label }}
     </a>
   </li>
 </template>
diff --git a/components/Icon/react/package.json b/components/Icon/react/package.json
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@cypress-design/rollup-plugin-tailwind-keep": "*",
-    "@types/lodash": "^4.14.200",
+    "@types/lodash": "^4.14.202",
     "lodash": "^4.17.21",
     "dedent": "^1.5.1"
   },

diff --git a/components/Icon/vue/package.json b/components/Icon/vue/package.json
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@cypress-design/rollup-plugin-tailwind-keep": "*",
-    "@types/lodash": "^4.14.200",
+    "@types/lodash": "^4.14.202",
     "lodash": "^4.17.21",
     "dedent": "^1.5.1"
   },

diff --git a/css/package.json b/css/package.json
@@ -40,8 +40,8 @@
     "tailwindcss": "^3.3.5"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.200",
-    "typescript": "5.2.2",
+    "@types/lodash": "^4.14.202",
+    "typescript": "5.3.2",
     "color-string": "1.9.1"
   },
   "license": "MIT"