Add roadmap

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

packages/canon/docs/Home.mdx

@@ -1,5 +1,13 @@
 import { Unstyled } from '@storybook/blocks';
-import { Columns, Text, ComponentStatus, Banner, Title } from './components';
+import {
+  Columns,
+  Text,
+  ComponentStatus,
+  Banner,
+  Title,
+  Roadmap,
+} from './components';
+import { list } from './components/Roadmap/list';
 
 <Unstyled>
 
@@ -19,7 +27,7 @@ import { Columns, Text, ComponentStatus, Banner, Title } from './components';
 </Banner>
 
 <Title style={{ marginTop: '48px' }} type="h2">
-  Project Status
+  Component Status
 </Title>
 <Text>
   We are still in the process of documenting the API and building the
@@ -29,51 +37,45 @@ import { Columns, Text, ComponentStatus, Banner, Title } from './components';
 </Text>
 
 <Columns style={{ marginTop: '32px' }}>
-  <ComponentStatus name="Storybook setup" status="done" />
   <ComponentStatus
-    name="Iconography"
-    status="done"
-    link="/?path=/docs/iconography--docs"
-  />
-  <ComponentStatus name="Global tokens" status="inProgress" />
-  <ComponentStatus
-    name="Theming system"
-    status="inProgress"
-    link="/?path=/docs/theme--docs"
-  />
-  <ComponentStatus
-    name="Box component"
-    status="review"
+    name="Box"
+    status="alpha"
     link="/?path=/docs/components-box--docs"
   />
   <ComponentStatus
-    name="Stack component"
-    status="review"
+    name="Stack"
+    status="alpha"
     link="/?path=/docs/components-stack--default"
   />
   <ComponentStatus
-    name="Inline component"
-    status="inProgress"
+    name="Inline"
+    status="alpha"
     link="/?path=/story/components-inline--default"
   />
   <ComponentStatus
-    name="Button component"
+    name="Button"
     status="inProgress"
     link="/?path=/docs/components-button--docs"
   />
   <ComponentStatus
-    name="Icon component"
-    status="inProgress"
+    name="Icon"
+    status="alpha"
     link="/?path=/docs/components-icon--docs"
   />
-  <ComponentStatus name="Input component" status="notStarted" />
-  <ComponentStatus name="Select component" status="notStarted" />
-  <ComponentStatus name="Checkbox component" status="notStarted" />
-  <ComponentStatus name="Radio component" status="notStarted" />
-  <ComponentStatus name="Switch component" status="notStarted" />
-  <ComponentStatus name="Tooltip component" status="notStarted" />
-  <ComponentStatus name="Header component" status="notStarted" />
-  <ComponentStatus name="Tabs component" status="notStarted" />
+  <ComponentStatus name="Input" status="notStarted" />
+  <ComponentStatus name="Select" status="notStarted" />
+  <ComponentStatus name="Checkbox" status="notStarted" />
+  <ComponentStatus name="Radio" status="notStarted" />
+  <ComponentStatus name="Switch" status="notStarted" />
+  <ComponentStatus name="Tooltip" status="notStarted" />
+  <ComponentStatus name="Header" status="notStarted" />
+  <ComponentStatus name="Tabs" status="notStarted" />
 </Columns>
 
+<Title style={{ marginTop: '48px' }} type="h2">
+  Roadmap
+</Title>
+
+<Roadmap list={list} />
+
 </Unstyled>

packages/canon/docs/components/Columns/columns.css.ts

@@ -18,7 +18,7 @@ import { style } from '@vanilla-extract/css';
 
 export const styles = style({
   display: 'grid',
-  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridTemplateColumns: 'repeat(3, 1fr)',
   rowGap: '20px',
   columnGap: '80px',
 });

packages/canon/docs/components/ComponentStatus/component-status.css.ts

@@ -57,12 +57,17 @@ export const pill = recipe({
         borderColor: '#FFD000',
         color: '#D79927',
       },
-      review: {
+      alpha: {
         backgroundColor: '#D7F9D7',
         borderColor: '#4ED14A',
         color: '#3A9837',
       },
-      done: {
+      beta: {
+        backgroundColor: '#D7F9D7',
+        borderColor: '#4ED14A',
+        color: '#3A9837',
+      },
+      stable: {
         backgroundColor: '#D7F9D7',
         borderColor: '#4ED14A',
         color: '#3A9837',

packages/canon/docs/components/ComponentStatus/index.tsx

@@ -24,7 +24,7 @@ export const ComponentStatus = ({
   link,
 }: {
   name: string;
-  status: 'notStarted' | 'inProgress' | 'review' | 'done';
+  status: 'notStarted' | 'inProgress' | 'alpha' | 'beta' | 'stable';
   style?: React.CSSProperties;
   link?: string;
 }) => {
@@ -40,8 +40,9 @@ export const ComponentStatus = ({
       <span className={pill({ status })}>
         {status === 'notStarted' && 'Not Started'}
         {status === 'inProgress' && 'In Progress'}
-        {status === 'review' && 'Ready for Review'}
-        {status === 'done' && 'Done'}
+        {status === 'alpha' && 'Alpha'}
+        {status === 'beta' && 'Beta'}
+        {status === 'stable' && 'Stable'}
       </span>
     </div>
   );

packages/canon/docs/components/Roadmap/index.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { RoadmapItem } from './list';
+
+export const Roadmap = ({ list }: { list: RoadmapItem[] }) => {
+  const orderList = ['inProgress', 'notStarted', 'completed'];
+  return (
+    <div className="roadmap">
+      {list
+        .sort(
+          (a, b) => orderList.indexOf(a.status) - orderList.indexOf(b.status),
+        )
+        .map(Item)}
+    </div>
+  );
+};
+
+const Item = ({
+  title,
+  status = 'notStarted',
+}: {
+  title: string;
+  status: 'notStarted' | 'inProgress' | 'inReview' | 'completed';
+}) => {
+  return (
+    <div className={['roadmap-item', status].join(' ')}>
+      <div className="left">
+        <div className="dot" />
+        <div className="title">{title}</div>
+      </div>
+      <span className="pill">
+        {status === 'notStarted' && 'Not Started'}
+        {status === 'inProgress' && 'In Progress'}
+        {status === 'inReview' && 'Ready for Review'}
+        {status === 'completed' && 'Completed'}
+      </span>
+    </div>
+  );
+};

packages/canon/docs/components/Roadmap/list.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type RoadmapItem = {
+  title: string;
+  status: 'notStarted' | 'inProgress' | 'inReview' | 'completed';
+};
+
+export const list: RoadmapItem[] = [
+  {
+    title: 'Add collapsing across breakpoints for the Inline component',
+    status: 'notStarted',
+  },
+  {
+    title: 'Add reversing the order for the Inline component',
+    status: 'notStarted',
+  },
+  {
+    title: 'Set up Storybook',
+    status: 'completed',
+  },
+  {
+    title: 'Set up iconography',
+    status: 'completed',
+  },
+  {
+    title: 'Set up global tokens',
+    status: 'inProgress',
+  },
+  {
+    title: 'Set up theming system',
+    status: 'inProgress',
+  },
+  {
+    title: 'Create first pass at box component',
+    status: 'completed',
+  },
+  {
+    title: 'Create first pass at stack component',
+    status: 'completed',
+  },
+  {
+    title: 'Create first pass at inline component',
+    status: 'completed',
+  },
+];

packages/canon/docs/components/Roadmap/styles.css

@@ -0,0 +1,102 @@
+.roadmap {
+  display: flex;
+  flex-direction: column;
+}
+
+.roadmap .roadmap-item {
+  font-family: 'Geist', sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 8px 0px;
+}
+
+.roadmap .roadmap-item .left {
+  display: flex;
+  align-items: center;
+  padding-left: 12px;
+  gap: 12px;
+}
+
+.roadmap .roadmap-item .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #e0e0e0;
+}
+
+.roadmap .roadmap-item.notStarted {
+  color: #000;
+}
+
+.roadmap .roadmap-item.inProgress {
+  color: #000;
+}
+
+.roadmap .roadmap-item.inReview {
+  color: #000;
+}
+
+.roadmap .roadmap-item.completed .title {
+  color: #a2a2a2;
+  text-decoration: line-through;
+}
+
+.roadmap .roadmap-item.notStarted .dot {
+  background-color: #d1d1d1;
+}
+
+.roadmap .roadmap-item.inProgress .dot {
+  background-color: #ffd000;
+}
+
+.roadmap .roadmap-item.inReview .dot {
+  background-color: #4ed14a;
+}
+
+.roadmap .roadmap-item.completed .dot {
+  background-color: #4ed14a;
+}
+
+.roadmap .roadmap-item .title {
+  font-weight: 300;
+  font-size: 16px;
+}
+
+.roadmap .roadmap-item .pill {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0px 8px;
+  border-radius: 40px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-left: 8px;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.roadmap .roadmap-item.notStarted .pill {
+  background-color: #f2f2f2;
+  border-color: #cdcdcd;
+  color: #888888;
+}
+
+.roadmap .roadmap-item.inProgress .pill {
+  background-color: #fff2b9;
+  border-color: #ffd000;
+  color: #d79927;
+}
+
+.roadmap .roadmap-item.inReview .pill {
+  background-color: #d7f9d7;
+  border-color: #4ed14a;
+  color: #3a9837;
+}
+
+.roadmap .roadmap-item.completed .pill {
+  background-color: #d7f9d7;
+  border-color: #4ed14a;
+  color: #3a9837;
+}

packages/canon/docs/components/index.ts

@@ -23,3 +23,4 @@ export * from './ComponentStatus';
 export * from './LayoutComponents';
 export * from './Banner';
 export * from './IconLibrary';
+export * from './Roadmap';

packages/canon/docs/components/styles.css

@@ -1 +1,2 @@
 @import './IconLibrary/styles.css';
+@import './Roadmap/styles.css';