diff --git a/packages/canon/docs/Home.mdx b/packages/canon/docs/Home.mdx
index 479834303a..3a00de5d07 100644
--- a/packages/canon/docs/Home.mdx
+++ b/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';
@@ -19,7 +27,7 @@ import { Columns, Text, ComponentStatus, Banner, Title } from './components';
- Project Status
+ Component Status
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';
-
-
-
-
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ Roadmap
+
+
+
+
diff --git a/packages/canon/docs/components/Columns/columns.css.ts b/packages/canon/docs/components/Columns/columns.css.ts
index 6efe97c349..0b5ec18aef 100644
--- a/packages/canon/docs/components/Columns/columns.css.ts
+++ b/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',
});
diff --git a/packages/canon/docs/components/ComponentStatus/component-status.css.ts b/packages/canon/docs/components/ComponentStatus/component-status.css.ts
index eeb58865ff..5cce5adb5d 100644
--- a/packages/canon/docs/components/ComponentStatus/component-status.css.ts
+++ b/packages/canon/docs/components/ComponentStatus/component-status.css.ts
@@ -57,7 +57,17 @@ export const pill = recipe({
borderColor: '#FFD000',
color: '#D79927',
},
- done: {
+ alpha: {
+ backgroundColor: '#D7F9D7',
+ borderColor: '#4ED14A',
+ color: '#3A9837',
+ },
+ beta: {
+ backgroundColor: '#D7F9D7',
+ borderColor: '#4ED14A',
+ color: '#3A9837',
+ },
+ stable: {
backgroundColor: '#D7F9D7',
borderColor: '#4ED14A',
color: '#3A9837',
diff --git a/packages/canon/docs/components/ComponentStatus/index.tsx b/packages/canon/docs/components/ComponentStatus/index.tsx
index 2444fcdc16..64d552ea97 100644
--- a/packages/canon/docs/components/ComponentStatus/index.tsx
+++ b/packages/canon/docs/components/ComponentStatus/index.tsx
@@ -24,7 +24,7 @@ export const ComponentStatus = ({
link,
}: {
name: string;
- status: 'notStarted' | 'inProgress' | 'done';
+ status: 'notStarted' | 'inProgress' | 'alpha' | 'beta' | 'stable';
style?: React.CSSProperties;
link?: string;
}) => {
@@ -40,7 +40,9 @@ export const ComponentStatus = ({
{status === 'notStarted' && 'Not Started'}
{status === 'inProgress' && 'In Progress'}
- {status === 'done' && 'Done'}
+ {status === 'alpha' && 'Alpha'}
+ {status === 'beta' && 'Beta'}
+ {status === 'stable' && 'Stable'}
);
diff --git a/packages/canon/docs/components/Roadmap/index.tsx b/packages/canon/docs/components/Roadmap/index.tsx
new file mode 100644
index 0000000000..2177ea558f
--- /dev/null
+++ b/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 (
+
+ {list
+ .sort(
+ (a, b) => orderList.indexOf(a.status) - orderList.indexOf(b.status),
+ )
+ .map(Item)}
+
+ );
+};
+
+const Item = ({
+ title,
+ status = 'notStarted',
+}: {
+ title: string;
+ status: 'notStarted' | 'inProgress' | 'inReview' | 'completed';
+}) => {
+ return (
+
+
+
+ {status === 'notStarted' && 'Not Started'}
+ {status === 'inProgress' && 'In Progress'}
+ {status === 'inReview' && 'Ready for Review'}
+ {status === 'completed' && 'Completed'}
+
+