Update component list

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

microsite-canon/components/ComponentStatus/ComponentStatus.tsx

@@ -17,7 +17,57 @@
 import React from 'react';
 import styles from './styles.module.css';
 
-export const ComponentStatus = ({
+export const ComponentStatus = () => {
+  return (
+    <div className={styles.container}>
+      <Component
+        name="Box"
+        status="alpha"
+        link="/?path=/docs/components-box--docs"
+      />
+      <Component
+        name="Button"
+        status="inProgress"
+        link="/?path=/docs/components-button--docs"
+      />
+      <Component name="Checkbox" status="inProgress" />
+      <Component
+        name="Container"
+        status="alpha"
+        link="/?path=/docs/components-container--docs"
+      />
+      <Component
+        name="Grid"
+        status="alpha"
+        link="/?path=/story/components-grid--docs"
+      />
+      <Component name="Header" status="notStarted" />
+      <Component
+        name="Icon"
+        status="alpha"
+        link="/?path=/docs/components-icon--docs"
+      />
+      <Component
+        name="Inline"
+        status="alpha"
+        link="/?path=/story/components-inline--default"
+      />
+      <Component name="Input" status="inProgress" />
+      <Component name="Radio" status="notStarted" />
+      <Component name="Select" status="notStarted" />
+      <Component
+        name="Stack"
+        status="alpha"
+        link="/?path=/docs/components-stack--default"
+      />
+      <Component name="Switch" status="notStarted" />
+      <Component name="Tabs" status="notStarted" />
+      <Component name="Tooltip" status="notStarted" />
+    </div>
+  );
+};
+
+export const Component = ({
   name,
   status = 'notStarted',
   style,

microsite-canon/components/ComponentStatus/styles.module.css

@@ -14,6 +14,12 @@
  * limitations under the License.
  */
 
+.container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0px 64px;
+}
+
 .componentStatus {
   display: flex;
   align-items: center;

microsite-canon/components/Tabs/Tabs.module.css

@@ -67,8 +67,7 @@
   height: 1.8rem;
   border-radius: 0.25rem;
   background-color: var(--canon-surface-1);
-  transition-property: translate, width;
+  transition-property: translate, width, background-color;
   transition-duration: 200ms;
   transition-timing-function: ease-in-out;
-  transition: background-color 0.2s ease-in-out;
 }

microsite-canon/content/home.mdx

@@ -1,7 +1,7 @@
 import { Banner } from '@/components/Banner';
 import { ComponentStatus } from '@/components/ComponentStatus';
 
-<img src="header.png" style={{ width: '100%', marginBottom: '64px' }} />
+<img src="header.png" style={{ width: '100%', marginBottom: '32px' }} />
 
 Welcome to the Canon, the new design library for Backstage plugins. This
 project is still under active development but we will make sure to document
@@ -21,54 +21,4 @@ components. You can use the statuses below to see what is ready and what is
 coming soon. If there is a component missing that you need, please let us know
 by opening an issue on GitHub.
 
-<div
-  style={{
-    display: 'grid',
-    gridTemplateColumns: 'repeat(2, 1fr)',
-    gap: '0px 64px',
-  }}
->
-  <ComponentStatus
-    name="Box"
-    status="alpha"
-    link="/?path=/docs/components-box--docs"
-  />
-  <ComponentStatus
-    name="Button"
-    status="inProgress"
-    link="/?path=/docs/components-button--docs"
-  />
-  <ComponentStatus name="Checkbox" status="notStarted" />
-  <ComponentStatus
-    name="Container"
-    status="alpha"
-    link="/?path=/docs/components-container--docs"
-  />
-  <ComponentStatus
-    name="Grid"
-    status="alpha"
-    link="/?path=/story/components-grid--docs"
-  />
-  <ComponentStatus name="Header" status="notStarted" />
-  <ComponentStatus
-    name="Icon"
-    status="alpha"
-    link="/?path=/docs/components-icon--docs"
-  />
-  <ComponentStatus
-    name="Inline"
-    status="alpha"
-    link="/?path=/story/components-inline--default"
-  />
-  <ComponentStatus name="Input" status="notStarted" />
-  <ComponentStatus name="Radio" status="notStarted" />
-  <ComponentStatus name="Select" status="notStarted" />
-  <ComponentStatus
-    name="Stack"
-    status="alpha"
-    link="/?path=/docs/components-stack--default"
-  />
-  <ComponentStatus name="Switch" status="notStarted" />
-  <ComponentStatus name="Tabs" status="notStarted" />
-  <ComponentStatus name="Tooltip" status="notStarted" />
-</div>
+<ComponentStatus />

microsite-canon/content/theming.mdx

@@ -157,7 +157,6 @@ values from `xxs` to `xxl`. We use the values on padding and margin in our
 layout components mostly. If you prefer to use a different spacing system, you
 can do that by changing the values below.
 
-{' '}
 <Table.Root>
   <Table.Header>
     <Table.HeaderRow>