chore: update component card data (#1856)

Relates to #1783 - Update the implementation status of the component overview on the main page according to #1783. - Require `href` of `ComponentCardProps` to be defined when the component state is `implemented`.
SchwarzIT · Sep 12, 2024 · e68890d · e68890d
1 parent cc2c19e
commit e68890d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git a/apps/docs/src/.vitepress/components/ComponentCard.vue b/apps/docs/src/.vitepress/components/ComponentCard.vue
@@ -6,10 +6,6 @@ import ComponentStatusBadge from "./ComponentStatusBadge.vue";
 export type ComponentCardProps = {
   /** Component name. */
   name: string;
-  /** Component status. */
-  status: ComponentStatus;
-  /** Link to the component. */
-  href?: string;
   /**
    * Due date when the component will be implemented.
    * Will only be shown if status is not "implemented".
@@ -18,7 +14,21 @@ export type ComponentCardProps = {
    * @example "Q2 2024"
    */
   dueDate?: string;
-};
+} & (
+  | {
+      /** Component status. */
+      status: Exclude<ComponentStatus, "implemented">;
+      /** Link to the components storybook. */
+      href?: string;
+    }
+  | {
+      status: Extract<ComponentStatus, "implemented">;
+      /**
+       * Require `href`, when status is "implemented".
+       */
+      href: string;
+    }
+);
 
 const props = defineProps<ComponentCardProps>();
 </script>

diff --git a/apps/docs/src/.vitepress/components/ComponentRoadmap.vue b/apps/docs/src/.vitepress/components/ComponentRoadmap.vue
@@ -40,7 +40,7 @@ const usedStatus = computed(() => {
  * Components that should be displayed (considers the show all button).
  */
 const displayedComponents = computed(() => {
-  return sortedComponents.value.slice(0, showAll.value ? undefined : 12);
+  return sortedComponents.value.slice(0, showAll.value ? undefined : 24);
 });
 
 /**

diff --git a/apps/docs/src/index.data.ts b/apps/docs/src/index.data.ts
@@ -91,27 +91,32 @@ export default defineLoader({
       },
       {
         name: "Table",
-        dueDate: basicComponentsDueDate,
+        dueDate: "11/2024",
         status: getImplementedStatus("OnyxTable"),
         href: "https://storybook.onyx.schwarz/?path=/docs/data-table--docs",
       },
+      {
+        name: "DataGrid",
+        dueDate: "12/2024",
+        status: "in-progress",
+      },
       {
         name: "Headline",
-        dueDate: basicComponentsDueDate,
+        dueDate: "10/2024",
         status: getImplementedStatus("OnyxHeadline"),
         href: "https://storybook.onyx.schwarz/?path=/docs/basic-headline--docs",
       },
 
       {
         name: "Nav bar",
         dueDate: basicComponentsDueDate,
-        status: getImplementedStatus("OnyxNavBar"),
+        status: "implemented",
         href: "https://storybook.onyx.schwarz/?path=/docs/navigation-navbar--docs",
       },
       {
         name: "Select",
         dueDate: basicComponentsDueDate,
-        status: getImplementedStatus("OnyxSelect"),
+        status: "implemented",
         href: "https://storybook.onyx.schwarz/?path=/docs/form-select--docs",
       },
       {
@@ -153,7 +158,7 @@ export default defineLoader({
       {
         name: "Tooltip",
         dueDate: basicComponentsDueDate,
-        status: getImplementedStatus("OnyxTooltip"),
+        status: "implemented",
         href: "https://storybook.onyx.schwarz/?path=/docs/feedback-tooltip--docs",
       },
       {
@@ -184,6 +189,7 @@ export default defineLoader({
         name: "Dialog",
         status: getImplementedStatus("OnyxDialog"),
         href: "https://storybook.onyx.schwarz/?path=/docs/feedback-dialog--docs",
+        dueDate: "01/2025",
       },
       {
         name: "Toast",
@@ -193,21 +199,32 @@ export default defineLoader({
       { name: "Footer", status: getImplementedStatus("OnyxFooter") },
       { name: "Data grid", status: getImplementedStatus("OnyxDataGrid") },
       { name: "Filter", status: getImplementedStatus("OnyxFilter") },
-      { name: "Sidebar", status: getImplementedStatus("OnyxSidebar") },
+      { name: "Sidebar", status: "in-progress", dueDate: "12/2024" },
       { name: "Card", status: getImplementedStatus("OnyxCard") },
       { name: "Popover", status: getImplementedStatus("OnyxPopover") },
-      { name: "Pagination", status: getImplementedStatus("OnyxPagination") },
-      { name: "Datepicker", status: getImplementedStatus("OnyxDatepicker") },
-      { name: "Timepicker", status: getImplementedStatus("OnyxTimepicker") },
+      {
+        dueDate: "10/2024",
+        name: "Pagination",
+        status: getImplementedStatus("OnyxPagination"),
+        href: "https://storybook.onyx.schwarz/?path=/docs/data-pagination--docs",
+      },
+      { name: "Datepicker", status: getImplementedStatus("OnyxDatepicker"), dueDate: "01/2025" },
+      { name: "Timepicker", status: getImplementedStatus("OnyxTimepicker"), dueDate: "01/2025" },
       { name: "Calendar", status: getImplementedStatus("OnyxCalendar") },
       { name: "Accordion", status: getImplementedStatus("OnyxAccordion") },
       { name: "Slider", status: getImplementedStatus("OnyxSlider") },
-      { name: "Stepper", status: getImplementedStatus("OnyxStepper") },
+      {
+        name: "Stepper",
+        status: "implemented",
+        href: "https://storybook.onyx.schwarz/?path=/docs/form-stepper--docs",
+      },
       { name: "Upload", status: getImplementedStatus("OnyxUpload") },
       { name: "Breadcrumb", status: getImplementedStatus("OnyxBreadcrumb") },
       { name: "Table of Content", status: getImplementedStatus("OnyxTableOfContent") },
       { name: "Wizard", status: getImplementedStatus("OnyxWizard") },
       { name: "Tabs", status: getImplementedStatus("OnyxTabs") },
+      { name: "Search", status: "in-progress", dueDate: "11/2024" },
+      { name: "Filters", status: "in-progress", dueDate: "11/2024" },
     ];
 
     return {