refactor(badges): remove Planned components for better aesthetic

maiieul · maiieul · commit 67ecd1414430 · 2024-01-12T19:57:50.000+01:00
diff --git a/apps/website/src/_state/component-status.type.ts b/apps/website/src/_state/component-status.type.ts
@@ -1,6 +1,4 @@
 export enum ComponentStatus {
-  Ready = 'Ready',
   Beta = 'Beta',
   Draft = 'Draft',
-  Planned = 'Planned',
 }
diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts
@@ -11,47 +11,20 @@ export type ComponentKitsStatuses = {
 
 export const statusByComponent: ComponentKitsStatuses = {
   fluffy: {
-    Accordion: ComponentStatus.Planned,
-    Alert: ComponentStatus.Planned,
-    Badge: ComponentStatus.Planned,
-    Breadcrumb: ComponentStatus.Planned,
+    Badge: ComponentStatus.Beta,
     Button: ComponentStatus.Beta,
-    'Button Group': ComponentStatus.Planned,
-    Card: ComponentStatus.Planned,
-    Carousel: ComponentStatus.Planned,
-    Checkbox: ComponentStatus.Planned,
-    Combobox: ComponentStatus.Planned,
-    Drawer: ComponentStatus.Planned,
-    Input: ComponentStatus.Planned,
-    'Input Phone': ComponentStatus.Planned,
-    'Navigation Bar': ComponentStatus.Planned,
-    Modal: ComponentStatus.Planned,
     Pagination: ComponentStatus.Draft,
-    Popover: ComponentStatus.Planned,
-    Progress: ComponentStatus.Planned,
-    Radio: ComponentStatus.Planned,
-    Rating: ComponentStatus.Planned,
-    Select: ComponentStatus.Planned,
-    Slider: ComponentStatus.Planned,
-    Spinner: ComponentStatus.Planned,
-    Tabs: ComponentStatus.Planned,
-    Toast: ComponentStatus.Planned,
-    Toggle: ComponentStatus.Planned,
-    Tooltip: ComponentStatus.Planned,
   },
   headless: {
     Accordion: ComponentStatus.Beta,
-    Carousel: ComponentStatus.Planned,
     Collapsible: ComponentStatus.Draft,
     Combobox: ComponentStatus.Beta,
-    Dialog: ComponentStatus.Planned,
     Modal: ComponentStatus.Beta,
     Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Beta,
     Select: ComponentStatus.Draft,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
-    Toggle: ComponentStatus.Planned,
     Tooltip: ComponentStatus.Draft,
   },
 };
diff --git a/apps/website/src/components/anatomy-table/anatomy-table.tsx b/apps/website/src/components/anatomy-table/anatomy-table.tsx
@@ -28,9 +28,11 @@ export const AnatomyTable = component$(
               return (
                 <tr key={propDescriptor.name}>
                   <td class="align-center py-3 pl-2 pr-2 sm:pl-0 md:align-baseline">
-                    <code class="border-primary text-accent-foreground mr-6 rounded border border-b-2">
-                      {propDescriptor.name}
-                    </code>
+                    <div class="flex items-center gap-2">
+                      <code class="border-primary text-accent-foreground mr-6 rounded border border-b-2 px-2">
+                        {propDescriptor.name}
+                      </code>
+                    </div>
                   </td>
                   <td class="py-3 align-baseline">
                     <div class="prose-docs-table">
diff --git a/apps/website/src/components/api-table/api-table.tsx b/apps/website/src/components/api-table/api-table.tsx
@@ -26,10 +26,12 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
           {propDescriptors?.map((propDescriptor) => {
             return (
               <tr key={propDescriptor.name}>
-                <td class="prose prose-sm py-3 pl-4 sm:pl-0 ">
-                  <code class="border-primary mr-6 rounded-md border border-b-[2px]">
-                    {propDescriptor.name}
-                  </code>
+                <td class="py-3 pl-4 sm:pl-0">
+                  <div class="flex items-center gap-2">
+                    <code class="border-primary mr-6 rounded-md border border-b-[2px] px-2">
+                      {propDescriptor.name}
+                    </code>
+                  </div>
                 </td>
                 <td class="py-3">
                   <div class="flex items-center gap-2">
diff --git a/apps/website/src/components/component-status-badge/component-status-badge.tsx b/apps/website/src/components/component-status-badge/component-status-badge.tsx
@@ -6,19 +6,17 @@ export interface StatusBadgeProps {
   status: ComponentStatus;
 }
 
-export function getClassByStatus(status: ComponentStatus) {
+export function getVariantByStatus(status: ComponentStatus) {
   switch (status) {
     case ComponentStatus.Beta:
-      return 'secondary';
-    case ComponentStatus.Draft:
       return 'primary';
-    case ComponentStatus.Planned:
+    case ComponentStatus.Draft:
       return 'outline';
     default:
       return null;
   }
 }
 
 export const StatusBadge = component$<StatusBadgeProps>(({ status }) => {
-  return <Badge variant={getClassByStatus(status)}>{status}</Badge>;
+  return <Badge variant={getVariantByStatus(status)}>{status}</Badge>;
 });
diff --git a/apps/website/src/components/preview-code-example/preview-code-example-tabs-deprecated.tsx b/apps/website/src/components/preview-code-example/preview-code-example-tabs-deprecated.tsx
diff --git a/apps/website/src/components/status-banner/status-banner.tsx b/apps/website/src/components/status-banner/status-banner.tsx
@@ -1,7 +1,8 @@
 import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
 import { ComponentStatus } from '~/_state/component-status.type';
-import { getClassByStatus } from '../component-status-badge/component-status-badge';
+import { getVariantByStatus } from '../component-status-badge/component-status-badge';
 import { Badge } from '@qwik-ui/fluffy';
+import { cn } from '@qwik-ui/utils';
 
 export interface StatusBannerProps {
   status?: ComponentStatus;
@@ -13,47 +14,39 @@ function getMessageByStatus(status?: ComponentStatus) {
       return (
         <>
           <strong>DISCLAIMER:</strong> This component is in{' '}
-          <Badge variant={getClassByStatus(status)}>{status}</Badge> status. That means
-          that it is ready for production, but the API might change.
+          <Badge variant={getVariantByStatus(status)} class="text-sm">
+            {status}
+          </Badge>{' '}
+          status. That means that it is ready for production, but the API might change.
         </>
       );
     case ComponentStatus.Draft:
       return (
         <>
           <strong>WARNING:</strong> This component is in{' '}
-          <Badge variant={getClassByStatus(status)}>{status}</Badge> status. This means
-          that it is still in development and may have bugs or missing features. It is not
-          intended to be used in production. You may use it for testing purposes.
-        </>
-      );
-    case ComponentStatus.Planned:
-    default:
-      return (
-        <>
-          <strong>WARNING:</strong> This component is in{' '}
-          <Badge variant={getClassByStatus(status || ComponentStatus.Planned)}>
+          <Badge variant={getVariantByStatus(status)} class="text-sm">
             {status}
           </Badge>{' '}
-          status. That means that it is in our backlog and we might have started working
-          on it, but it is not under active development.
+          status. This means that it is still in development and may have bugs or missing
+          features. It is not intended to be used in production. You may use it for
+          testing purposes.
         </>
       );
+    default:
+      return <></>;
   }
 }
 
 function getBackgroundByStatus(status?: ComponentStatus) {
   switch (status) {
     case ComponentStatus.Beta:
-      return 'border border-secondary';
-    case ComponentStatus.Draft:
       return 'border border-primary';
-    case ComponentStatus.Planned:
-    default:
-      return 'border border-foreground';
+    case ComponentStatus.Draft:
+      return 'border';
   }
 }
 
-export const StatusBanner = component$((props: StatusBannerProps) => {
+export const StatusBanner = component$(({ status }: StatusBannerProps) => {
   const ref = useSignal<HTMLElement | undefined>();
   const isBannerClosedSig = useSignal(false);
   const marginBottom = 64;
@@ -85,12 +78,13 @@ export const StatusBanner = component$((props: StatusBannerProps) => {
         ref={ref}
         hidden={isBannerClosedSig.value}
         onAnimationEnd$={() => (isBannerClosedSig.value = true)}
-        class={`${getBackgroundByStatus(
-          props.status,
-        )} normal-state shadow-light-medium dark:shadow-dark-medium relative mx-[-24px] rounded-xl border-2 px-8 py-6 md:flex-row md:items-center lg:mx-[-32px]`}
+        class={cn(
+          getBackgroundByStatus(status),
+          'normal-state shadow-light-medium dark:shadow-dark-medium relative mx-[-24px] rounded-xl border-2 px-8 py-6 md:flex-row md:items-center lg:mx-[-32px]',
+        )}
         style={{ marginBottom: `${marginBottom}px` }}
       >
-        <span class="pr-2">{getMessageByStatus(props.status)}</span>
+        <span class="pr-2">{getMessageByStatus(status)}</span>
         <button
           aria-label="close status banner"
           onClick$={() => {
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
@@ -33,10 +33,10 @@
     --card-foreground: 210 40% 98%;
     --popover: 222 47% 11%;
     --popover-foreground: 210 40% 98%;
-    --primary: 263 50% 55%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 199 100% 41%;
-    --secondary-foreground: 210 40% 100%;
+    --primary: 199 90% 35%;
+    --primary-foreground: 210 40% 100%;
+    --secondary: 263 50% 55%;
+    --secondary-foreground: 0 0% 100%;
     --muted: 222 22% 23%;
     --muted-foreground: 255 5% 80%;
     --accent: 222 22% 23%;
diff --git a/apps/website/src/routes/docs/fluffy/menu.md b/apps/website/src/routes/docs/fluffy/menu.md
@@ -8,25 +8,6 @@
 
 ## Components
 
-- [Accordion](/docs/fluffy/accordion)
-- [Alert](/docs/fluffy/alert)
 - [Badge](/docs/fluffy/badge)
-- [Breadcrumb](/docs/fluffy/breadcrumb)
 - [Button](/docs/fluffy/button)
-- [Button Group](/docs/fluffy/button-group)
-- [Card](/docs/fluffy/card)
-- [Carousel](/docs/fluffy/carousel)
-- [Checkbox](/docs/fluffy/checkbox)
-- [Drawer](/docs/fluffy/drawer)
-- [Input](/docs/fluffy/input)
 - [Pagination](/docs/fluffy/pagination)
-- [Popover](/docs/fluffy/popover)
-- [Progress](/docs/fluffy/progress)
-- [Radio](/docs/fluffy/radio)
-- [Rating](/docs/fluffy/rating)
-- [Slider](/docs/fluffy/slider)
-- [Select](/docs/fluffy/select)
-- [Tabs](/docs/fluffy/tabs)
-- [Toast](/docs/fluffy/toast)
-- [Toggle](/docs/fluffy/toggle)
-- [Tooltip](/docs/fluffy/tooltip)
diff --git a/apps/website/src/routes/docs/headless/collapsible/index.mdx b/apps/website/src/routes/docs/headless/collapsible/index.mdx
@@ -2,7 +2,7 @@ import { statusByComponent } from '~/_state/component-statuses';
 import { FeatureList } from '~/components/feature-list/feature-list';
 import { Note } from '~/components/note/note';
 
-<StatusBanner status={statusByComponent.headless.Accordion} />
+<StatusBanner status={statusByComponent.headless.Collapsible} />
 
 # Collapsible
 
diff --git a/apps/website/src/routes/docs/headless/menu.md b/apps/website/src/routes/docs/headless/menu.md
@@ -17,5 +17,4 @@
 - [Select](/docs/headless/select)
 - [Separator](/docs/headless/separator)
 - [Tabs](/docs/headless/tabs)
-- [Toggle](/docs/headless/toggle)
 - [Tooltip](/docs/headless/tooltip)

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,4 @@`
`1`	`1`	`export enum ComponentStatus {`
`2`		`- Ready = 'Ready',`
`3`	`2`	`Beta = 'Beta',`
`4`	`3`	`Draft = 'Draft',`
`5`		`- Planned = 'Planned',`
`6`	`4`	`}`