Skip to content

Commit

Permalink
feat: automated display of badges (#3538)
Browse files Browse the repository at this point in the history 
* feat: automated dispaly of badges

* chore: remove deprecated GENERATOR_ADD

* Add badge version support for wip and updated

* Fix for prev commit

* chore: move navigation badge logic outside of navigation config

* chore: rename extensions into integration sidebar menu

---------

Co-authored-by: Maksim Nedoshev <[email protected]>
  • Loading branch information
@thesheppard @m0ksem
thesheppard and m0ksem authored Jun 27, 2023
1 parent 9b9e7e9 commit ec89a28
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 116 deletions.
8 changes: 6 additions & 2 deletions packages/docs/components/layout/Sidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
{{ childRoute.category }}
</va-list-label>
<va-sidebar-item
:to="`/${route.name}/${childRoute.name}`"
:to="childRoute.path ? childRoute.path : `/${route.name}/${childRoute.name}`"
:active="isActiveChildRoute(childRoute, route)"
:active-color="activeColor"
:hover-color="hoverColor"
Expand All @@ -50,7 +50,7 @@
placement="right-center"
size="small"
offset="-5px"
:text="childRoute.meta && childRoute.meta.badge.text"
:text="childRoute.meta?.badge?.text"
:color="childRoute.meta && childRoute.meta.badge && badgeColors[childRoute.meta.badge.type]"
:visible-empty="false"
>
Expand Down Expand Up @@ -117,6 +117,10 @@ export default defineComponent({
})
const isActiveChildRoute = (child: NavigationRoute, parent: NavigationRoute) => {
if (child.path) {
return route.path === child.path
}
const path = `/${String(parent.name)}/${String(child.name)}`
return path === route.path
Expand Down
155 changes: 42 additions & 113 deletions packages/docs/page-config/navigationRoutes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import { navigationBadge, type NavigationBadge } from "../utils/navigation/badge";

export type NavigationRoute = {
name: string;
category?: string;
displayName: string;
meta?: {
iconClass?: string;
badge?: {
type: "wip" | "new" | "updated";
text: string;
title: string;
};
badge?: NavigationBadge;
};
disabled?: boolean;
children?: NavigationRoute[];
Expand All @@ -19,9 +17,6 @@ export const navigationRoutes: NavigationRoute[] = [
{
name: "introduction",
displayName: "Introduction",
meta: {
iconClass: "vuestic-iconset-image",
},
disabled: true,
children: [
{
Expand All @@ -44,15 +39,11 @@ export const navigationRoutes: NavigationRoute[] = [
name: "accessibility-guide",
displayName: "Accessibility Guide",
},
// GENERATOR_ADD - introduction
],
},
{
name: "getting-started",
displayName: "Getting Started",
meta: {
iconClass: "vuestic-iconset-image",
},
disabled: true,
children: [
{
Expand Down Expand Up @@ -83,33 +74,21 @@ export const navigationRoutes: NavigationRoute[] = [
name: 'web-components',
displayName: 'Web Components',
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge: navigationBadge.new('1.6.0'),
},
},
{
name: 'testing',
displayName: 'Testing',
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge: navigationBadge.new('1.6.0'),
},
},
// GENERATOR_ADD - gettingStarted
],
},
{
name: "styles",
displayName: "Styles",
meta: {
iconClass: "vuestic-iconset-image",
},
disabled: true,
children: [
{
Expand All @@ -132,11 +111,7 @@ export const navigationRoutes: NavigationRoute[] = [
name: 'tailwind',
displayName: 'Tailwind Integration',
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge: navigationBadge.new('1.6.0'),
},
},
{
Expand All @@ -147,15 +122,11 @@ export const navigationRoutes: NavigationRoute[] = [
name: "reset",
displayName: "CSS Reset",
},
// GENERATOR_ADD - styles
],
},
{
name: "ui-elements",
displayName: "UI Elements",
meta: {
iconClass: "vuestic-iconset-ui-elements",
},
disabled: true,
children: [
{
Expand Down Expand Up @@ -191,11 +162,7 @@ export const navigationRoutes: NavigationRoute[] = [
name: "image",
displayName: "Image",
meta: {
badge: {
type: 'updated',
text: 'updated',
title: 'Recently updated',
},
badge : navigationBadge.updated('1.6.0'),
}
},
{
Expand Down Expand Up @@ -227,11 +194,7 @@ export const navigationRoutes: NavigationRoute[] = [
name: "form",
displayName: "Form",
meta: {
badge: {
type: 'updated',
text: 'updated',
title: 'Recently updated',
},
badge: navigationBadge.updated('1.6.5'),
}
},
{
Expand Down Expand Up @@ -266,11 +229,7 @@ export const navigationRoutes: NavigationRoute[] = [
name: "select",
displayName: "Select",
meta: {
badge: {
type: 'updated',
text: 'updated',
title: 'Recently updated',
},
badge : navigationBadge.updated('1.7.0'),
}
},
{
Expand Down Expand Up @@ -311,22 +270,14 @@ export const navigationRoutes: NavigationRoute[] = [
name: 'aspect-ratio',
displayName: 'Aspect Ratio',
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge : navigationBadge.new('1.6.0'),
},
},
{
name: "skeleton",
displayName: "Skeleton",
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge : navigationBadge.new('1.6.0'),
}
},
{
Expand All @@ -348,10 +299,16 @@ export const navigationRoutes: NavigationRoute[] = [
{
name: "collapse",
displayName: "Collapse",
meta: {
badge: navigationBadge.updated('1.7.0'),
}
},
{
name: "accordion",
displayName: "Accordion",
meta: {
badge: navigationBadge.updated('1.7.0'),
}
},
{
name: "scroll-container",
Expand Down Expand Up @@ -386,34 +343,22 @@ export const navigationRoutes: NavigationRoute[] = [
name: 'stepper',
displayName: 'Stepper',
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge : navigationBadge.new('1.6.0'),
}
},
{
category: "Utility",
name: "value",
displayName: "Value",
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge : navigationBadge.new('1.6.0'),
}
},
{
name: "config",
displayName: "Config",
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge : navigationBadge.new('1.6.0 '),
}
},
{
Expand All @@ -423,6 +368,9 @@ export const navigationRoutes: NavigationRoute[] = [
{
name: "dropdown",
displayName: "Dropdown",
meta: {
badge : navigationBadge.updated('1.7.0'),
}
},
{
name: "spacer",
Expand Down Expand Up @@ -470,22 +418,14 @@ export const navigationRoutes: NavigationRoute[] = [
name: "confirm",
displayName: "Confirm",
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge : navigationBadge.new('1.6.0'),
}
},
{
name: "virtual-scroller",
displayName: "Virtual Scroller",
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge : navigationBadge.new('1.6.0'),
},
},
// TODO: Color components not released yet
Expand All @@ -507,7 +447,6 @@ export const navigationRoutes: NavigationRoute[] = [
name: "tree-view",
displayName: "Tree view",
},
// GENERATOR_ADD - uiElements
],
},
{
Expand All @@ -534,7 +473,6 @@ export const navigationRoutes: NavigationRoute[] = [
name: "tree-shaking-requirements",
displayName: "Tree Shaking Requirements",
},
// GENERATOR_ADD - contribution
],
},
{
Expand All @@ -553,11 +491,6 @@ export const navigationRoutes: NavigationRoute[] = [
name: "icons-config",
displayName: "Icons Config",
},
// TODO: next
// {
// name: 'advanced-icons-config',
// displayName: 'Advanced Icons Config',
// },
{
name: "colors-config",
displayName: "Colors Config",
Expand All @@ -566,11 +499,7 @@ export const navigationRoutes: NavigationRoute[] = [
name: "colors-classes",
displayName: "Colors Classes",
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge: navigationBadge.new('1.6.0'),
}
},
{
Expand All @@ -581,40 +510,40 @@ export const navigationRoutes: NavigationRoute[] = [
name: "i18n",
displayName: "I18n",
},
// GENERATOR_ADD - services
],
},
{
name: "extensions",
displayName: "Extensions",
meta: {
iconClass: "vuestic-iconset-image",
},
displayName: "Integrations",
disabled: true,
children: [
{
name: "nuxt",
displayName: "Nuxt",
path: "/getting-started/nuxt"
},
{
name: "ag-grid",
displayName: "AG Grid Theme",
meta: {
badge: {
type: 'updated',
text: 'updated',
title: 'Recently updated',
},
badge: navigationBadge.updated('1.6.0'),
}
},
{
name: 'tailwind',
displayName: 'Tailwind Integration',
meta: {
badge: navigationBadge.new('1.6.0'),
},
path: '/styles/tailwind'
},
{
name: "unocss",
displayName: "UnoCSS Integration",
meta: {
badge: {
type: 'new',
text: 'new',
title: 'Recently added',
},
badge: navigationBadge.new('1.6.0'),
}
},
// GENERATOR_ADD - extensions
],
},
];
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/accordion/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default definePageConfig({
}),

block.subtitle("Accessibility"),
block.paragraph("Expand/collapse of accordion item in focus is dependent on `mutilple` prop, for other accessbility information see [VaCollapse accessibility section](ui-elements/collapse#all-accessibility)[[target=_blank]]."),
block.paragraph("Expand/collapse of accordion item in focus is dependent on `mutilple` prop, for other accessbility information see [VaCollapse accessibility section](/ui-elements/collapse#all-accessibility)[[target=_blank]]."),

block.subtitle("API"),
block.api("VaAccordion", apiDescription, apiOptions),
Expand Down
Loading

0 comments on commit ec89a28

Please sign in to comment.