replace text by label

cypress-io · Nov 29, 2023 · cab4339 · cab4339
1 parent 5f104ce
commit cab4339
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 89 deletions.
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/docs/.vitepress/theme/components/SideBar.vue b/docs/.vitepress/theme/components/SideBar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import DocMenu from '@cypress-design/vue-docmenu'
+import DocMenu, { NavGroup } from '@cypress-design/vue-docmenu'
 import { computed } from 'vue'
 import { getDocsPages } from '../utils/docsPages'
 import { getPatternPages } from '../utils/patternPages'
@@ -23,12 +23,12 @@ const rp = computed(() => props.routePath)
 
 const { items: docsPages } = getDocsPages(rp)
 
-const components = computed(() => {
+const components = computed<NavGroup>(() => {
   return {
-    text: 'Components',
+    label: 'Components',
     items: Object.keys(pages[props.framework]).map((p) => {
       return {
-        text: getPageName(p),
+        label: getPageName(p),
         href: p.replace(/\.md$/, ''),
         active:
           props.currentPath.length > 1 &&
@@ -40,9 +40,9 @@ const components = computed(() => {
 
 const { items: patterns } = getPatternPages(rp)
 
-const patternGroup = computed(() => {
+const patternGroup = computed<NavGroup>(() => {
   return {
-    text: 'Patterns',
+    label: 'Patterns',
     items: patterns.value,
   }
 })