+
+
+
+ );
+};
diff --git a/packages/canon/docs/components/Banner/index.ts b/packages/canon/docs/components/Banner/index.ts
new file mode 100644
index 0000000000..31f4aa88b0
--- /dev/null
+++ b/packages/canon/docs/components/Banner/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { Banner } from './Banner';
diff --git a/packages/canon/docs/components/Banner/styles.css b/packages/canon/docs/components/Banner/styles.css
new file mode 100644
index 0000000000..6fec3345ae
--- /dev/null
+++ b/packages/canon/docs/components/Banner/styles.css
@@ -0,0 +1,38 @@
+.banner {
+ display: flex;
+ align-items: center;
+ font-family: 'Geist', sans-serif;
+ font-size: 16px;
+ line-height: 28px;
+ padding: 16px;
+ border-radius: 6px;
+ margin-bottom: 16px;
+ border: 1px solid #e0e0e0;
+
+ & > p {
+ margin: 0;
+ }
+
+ &.info {
+ background-color: #f2f2f2;
+ border-color: #cdcdcd;
+ color: #888888;
+ }
+
+ &.warning {
+ background-color: #fff2b9;
+ border-color: #ffd000;
+ color: #d79927;
+ }
+
+ & .icon {
+ width: 32px;
+ height: 32px;
+ background-color: rgba(215, 153, 39, 0.2);
+ border-radius: 6px;
+ margin-right: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
diff --git a/packages/canon/docs/components/Chip/Chip.tsx b/packages/canon/docs/components/Chip/Chip.tsx
new file mode 100644
index 0000000000..e6e1d1b1c4
--- /dev/null
+++ b/packages/canon/docs/components/Chip/Chip.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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';
+
+export const Chip = ({
+ children,
+ head = false,
+}: {
+ children: React.ReactNode;
+ head?: boolean;
+}) => {
+ return {children};
+};
diff --git a/packages/canon/docs/components/Chip/index.ts b/packages/canon/docs/components/Chip/index.ts
new file mode 100644
index 0000000000..ff9e4794c5
--- /dev/null
+++ b/packages/canon/docs/components/Chip/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { Chip } from './Chip';
diff --git a/packages/canon/docs/components/Chip/styles.css b/packages/canon/docs/components/Chip/styles.css
new file mode 100644
index 0000000000..ebbaf6645f
--- /dev/null
+++ b/packages/canon/docs/components/Chip/styles.css
@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+.chip {
+ display: inline-flex;
+ align-items: center;
+ font-family: 'Geist Mono', monospace;
+ font-size: 13px;
+ border-radius: 6px;
+ padding: 0px 8px;
+ height: 24px;
+ margin-right: 4px;
+ background-color: #f0f0f0;
+ color: #5d5d5d;
+
+ &.head {
+ background-color: #eaf2fd;
+ color: #2563eb;
+ }
+}
diff --git a/packages/canon/docs/components/Columns/Columns.tsx b/packages/canon/docs/components/Columns/Columns.tsx
new file mode 100644
index 0000000000..115ec50010
--- /dev/null
+++ b/packages/canon/docs/components/Columns/Columns.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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';
+
+export const Columns = ({
+ children,
+ style,
+}: {
+ children: React.ReactNode;
+ style?: React.CSSProperties;
+}) => {
+ return (
+
+
+
+ {children}
+
+ {children}
+
+ );
+};
diff --git a/packages/canon/docs/components/Columns/index.ts b/packages/canon/docs/components/Columns/index.ts
new file mode 100644
index 0000000000..05de0850be
--- /dev/null
+++ b/packages/canon/docs/components/Columns/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { Columns } from './Columns';
diff --git a/packages/canon/docs/components/Columns/styles.css b/packages/canon/docs/components/Columns/styles.css
new file mode 100644
index 0000000000..c34acfc406
--- /dev/null
+++ b/packages/canon/docs/components/Columns/styles.css
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+.columns {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ row-gap: 20px;
+ column-gap: 80px;
+}
diff --git a/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx b/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx
new file mode 100644
index 0000000000..0159e27b32
--- /dev/null
+++ b/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx
@@ -0,0 +1,48 @@
+/*
+ * 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';
+
+export const ComponentStatus = ({
+ name,
+ status = 'notStarted',
+ style,
+ link,
+}: {
+ name: string;
+ status: 'notStarted' | 'inProgress' | 'alpha' | 'beta' | 'stable';
+ style?: React.CSSProperties;
+ link?: string;
+}) => {
+ return (
+
+ {link ? (
+
+ {name}
+
+ ) : (
+ {name}
+ )}
+
+ {status === 'notStarted' && 'Not Started'}
+ {status === 'inProgress' && 'In Progress'}
+ {status === 'alpha' && 'Alpha'}
+ {status === 'beta' && 'Beta'}
+ {status === 'stable' && 'Stable'}
+
+
+ );
+};
diff --git a/packages/canon/docs/components/ComponentStatus/index.ts b/packages/canon/docs/components/ComponentStatus/index.ts
new file mode 100644
index 0000000000..238c001289
--- /dev/null
+++ b/packages/canon/docs/components/ComponentStatus/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { ComponentStatus } from './ComponentStatus';
diff --git a/packages/canon/docs/components/ComponentStatus/styles.css b/packages/canon/docs/components/ComponentStatus/styles.css
new file mode 100644
index 0000000000..f800e659e0
--- /dev/null
+++ b/packages/canon/docs/components/ComponentStatus/styles.css
@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+.component-status {
+ display: flex;
+ justify-content: space-between;
+
+ & .title {
+ color: #3b59ff;
+ font-family: 'Geist', sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ text-decoration: none;
+ }
+
+ & .pill {
+ font-family: 'Geist', sans-serif;
+ display: inline-flex;
+ align-items: center;
+ color: #000;
+ border-radius: 40px;
+ padding: 0px 8px;
+ height: 24px;
+ font-size: 12px;
+ font-weight: 600;
+ border-style: solid;
+ border-width: 1px;
+ margin-left: 8px;
+
+ &.notStarted {
+ background-color: #f2f2f2;
+ border-color: #cdcdcd;
+ color: #888888;
+ }
+
+ &.inProgress {
+ background-color: #fff2b9;
+ border-color: #ffd000;
+ color: #d79927;
+ }
+
+ &.alpha {
+ background-color: #d7f9d7;
+ border-color: #4ed14a;
+ color: #3a9837;
+ }
+
+ &.beta {
+ background-color: #d7f9d7;
+ border-color: #4ed14a;
+ color: #3a9837;
+ }
+
+ &.stable {
+ background-color: #d7f9d7;
+ border-color: #4ed14a;
+ color: #3a9837;
+ }
+ }
+}
diff --git a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
new file mode 100644
index 0000000000..e32f4c08a4
--- /dev/null
+++ b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 { Icon } from '@backstage/canon';
+import type { IconNames } from '@backstage/canon';
+import { defaultIcons } from '../../../src/components/Icon/icons';
+import { Text } from '../Text/Text';
+
+export const IconLibrary = () => {
+ const icons = Object.keys(defaultIcons);
+
+ return (
+
+ {icons.map(icon => (
+
+ );
+};
diff --git a/packages/canon/docs/components/IconLibrary/index.ts b/packages/canon/docs/components/IconLibrary/index.ts
new file mode 100644
index 0000000000..071c80db85
--- /dev/null
+++ b/packages/canon/docs/components/IconLibrary/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { IconLibrary } from './IconLibrary';
diff --git a/packages/canon/docs/components/IconLibrary/styles.css b/packages/canon/docs/components/IconLibrary/styles.css
new file mode 100644
index 0000000000..1a6f63ca79
--- /dev/null
+++ b/packages/canon/docs/components/IconLibrary/styles.css
@@ -0,0 +1,22 @@
+.icon-library {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ gap: 1rem;
+}
+
+.icon-library-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+}
+
+.icon-library-item-icon {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ height: 80px;
+ border: 1px solid #d3d3d3;
+ border-radius: 0.5rem;
+}
diff --git a/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx b/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx
new file mode 100644
index 0000000000..56f389a389
--- /dev/null
+++ b/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 { BoxSvg } from './svgs/box';
+import { StackSvg } from './svgs/stack';
+import { GridSvg } from './svgs/grid';
+import { InlineSvg } from './svgs/inline';
+import { ContainerSvg } from './svgs/container';
+
+export const LayoutComponents = () => {
+ return (
+
+ {icon}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/canon/docs/components/LayoutComponents/index.ts b/packages/canon/docs/components/LayoutComponents/index.ts
new file mode 100644
index 0000000000..55cc9f25ef
--- /dev/null
+++ b/packages/canon/docs/components/LayoutComponents/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { LayoutComponents } from './LayoutComponents';
diff --git a/packages/canon/docs/components/LayoutComponents/styles.css b/packages/canon/docs/components/LayoutComponents/styles.css
new file mode 100644
index 0000000000..c2a819cf6b
--- /dev/null
+++ b/packages/canon/docs/components/LayoutComponents/styles.css
@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+
+.layout-components {
+ display: flex;
+ justify-content: flex-start;
+ gap: 1rem;
+ flex-wrap: wrap;
+
+ & .box {
+ display: flex;
+ flex-direction: column;
+ width: calc(33.33% - 0.67rem);
+ margin-bottom: 1rem;
+ align-items: flex-start;
+ }
+
+ & .content {
+ flex: none;
+ background: linear-gradient(180deg, #f3f3f3 0%, #fff 100%);
+ border-radius: 4px;
+ width: 100%;
+ height: 180px;
+ transition: all 0.2s ease-in-out;
+ margin-bottom: 0.75rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ transform: translateY(-4px);
+ }
+ }
+
+ & .title {
+ font-size: 16px;
+ font-family: 'Geist', sans-serif;
+ transition: color 0.2s ease-in-out;
+ margin-bottom: 0.25rem;
+ }
+
+ & .description {
+ font-size: 16px;
+ font-family: 'Geist', sans-serif;
+ color: #9e9e9e;
+ }
+}
diff --git a/packages/canon/docs/components/LayoutComponents/svgs/box.tsx b/packages/canon/docs/components/LayoutComponents/svgs/box.tsx
new file mode 100644
index 0000000000..1749b38c6f
--- /dev/null
+++ b/packages/canon/docs/components/LayoutComponents/svgs/box.tsx
@@ -0,0 +1,54 @@
+/*
+ * 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';
+
+export const BoxSvg = () => {
+ return (
+
+ );
+};
diff --git a/packages/canon/docs/components/LayoutComponents/svgs/container.tsx b/packages/canon/docs/components/LayoutComponents/svgs/container.tsx
new file mode 100644
index 0000000000..62fe4ce266
--- /dev/null
+++ b/packages/canon/docs/components/LayoutComponents/svgs/container.tsx
@@ -0,0 +1,373 @@
+/*
+ * 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';
+
+export const ContainerSvg = () => {
+ return (
+
+ );
+};
diff --git a/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx b/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx
new file mode 100644
index 0000000000..5527d1f3e2
--- /dev/null
+++ b/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx
@@ -0,0 +1,91 @@
+/*
+ * 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';
+
+export const GridSvg = () => {
+ return (
+
+ );
+};
diff --git a/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx b/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx
new file mode 100644
index 0000000000..fadb9bfc1b
--- /dev/null
+++ b/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx
@@ -0,0 +1,92 @@
+/*
+ * 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';
+
+export const InlineSvg = () => {
+ return (
+
+ );
+};
diff --git a/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx b/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx
new file mode 100644
index 0000000000..aeda998d2e
--- /dev/null
+++ b/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx
@@ -0,0 +1,82 @@
+/*
+ * 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';
+
+export const StackSvg = () => {
+ return (
+
+ );
+};
diff --git a/packages/canon/docs/components/PropsTable/PropsTable.tsx b/packages/canon/docs/components/PropsTable/PropsTable.tsx
new file mode 100644
index 0000000000..a3dc9e271c
--- /dev/null
+++ b/packages/canon/docs/components/PropsTable/PropsTable.tsx
@@ -0,0 +1,57 @@
+/*
+ * 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 * as Table from '..';
+import { Chip } from '..';
+
+// Modify the PropsTable component to accept a generic type
+export const PropsTable =
+ {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 (
+
+
+ );
+};
diff --git a/packages/canon/docs/components/Roadmap/index.ts b/packages/canon/docs/components/Roadmap/index.ts
new file mode 100644
index 0000000000..ac51dfa1ed
--- /dev/null
+++ b/packages/canon/docs/components/Roadmap/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { Roadmap } from './Roadmap';
diff --git a/packages/canon/docs/components/Roadmap/list.ts b/packages/canon/docs/components/Roadmap/list.ts
new file mode 100644
index 0000000000..d5f436281a
--- /dev/null
+++ b/packages/canon/docs/components/Roadmap/list.ts
@@ -0,0 +1,62 @@
+/*
+ * 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: 'Remove Vanilla Extract and use pure CSS instead',
+ status: 'inProgress',
+ },
+ {
+ 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',
+ },
+];
diff --git a/packages/canon/docs/components/Roadmap/styles.css b/packages/canon/docs/components/Roadmap/styles.css
new file mode 100644
index 0000000000..e47aecf7fa
--- /dev/null
+++ b/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;
+}
diff --git a/packages/canon/docs/components/Table/Table.tsx b/packages/canon/docs/components/Table/Table.tsx
new file mode 100644
index 0000000000..4983038724
--- /dev/null
+++ b/packages/canon/docs/components/Table/Table.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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';
+
+export const Root = ({ children }: { children: React.ReactNode }) => {
+ return (
+
+
+
+
+ {status === 'notStarted' && 'Not Started'}
+ {status === 'inProgress' && 'In Progress'}
+ {status === 'inReview' && 'Ready for Review'}
+ {status === 'completed' && 'Completed'}
+
+ {title}
+
+ {children}
+
+ );
+};
+
+export const Header = ({ children }: { children: React.ReactNode }) => {
+ return {children};
+};
+
+export const Body = ({ children }: { children: React.ReactNode }) => {
+ return {children};
+};
+
+export const HeaderRow = ({ children }: { children: React.ReactNode }) => {
+ return
+ {children}
+
+ );
+};
diff --git a/packages/canon/docs/components/Text/index.ts b/packages/canon/docs/components/Text/index.ts
new file mode 100644
index 0000000000..873fca2c76
--- /dev/null
+++ b/packages/canon/docs/components/Text/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { Text } from './Text';
diff --git a/packages/canon/docs/components/Text/styles.css b/packages/canon/docs/components/Text/styles.css
new file mode 100644
index 0000000000..cbb2b88edb
--- /dev/null
+++ b/packages/canon/docs/components/Text/styles.css
@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+.text {
+ font-family: 'Geist', sans-serif;
+ font-size: 16px;
+ line-height: 28px;
+ margin: 0;
+ font-weight: 300;
+ margin-bottom: 16px;
+
+ & p {
+ font-family: 'Geist', sans-serif;
+ font-size: 16px;
+ line-height: 28px;
+ margin: 0;
+ font-weight: 300;
+ }
+}
diff --git a/packages/canon/docs/components/Title/Title.tsx b/packages/canon/docs/components/Title/Title.tsx
new file mode 100644
index 0000000000..056ccfc14d
--- /dev/null
+++ b/packages/canon/docs/components/Title/Title.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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';
+
+export const Title = ({
+ children,
+ style,
+ type = 'h1',
+}: {
+ children: React.ReactNode;
+ style?: React.CSSProperties;
+ type?: 'h1' | 'h2' | 'h3';
+}) => {
+ let Component = 'h1';
+ if (type === 'h1') Component = 'h1';
+ if (type === 'h2') Component = 'h2';
+ if (type === 'h3') Component = 'h3';
+
+ return React.createElement(Component, {
+ className: `title ${type}`,
+ style,
+ children,
+ });
+};
diff --git a/packages/canon/docs/components/Title/index.ts b/packages/canon/docs/components/Title/index.ts
new file mode 100644
index 0000000000..998dc81882
--- /dev/null
+++ b/packages/canon/docs/components/Title/index.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { Title } from './Title';
diff --git a/packages/canon/docs/components/Title/styles.css b/packages/canon/docs/components/Title/styles.css
new file mode 100644
index 0000000000..a8d00e2af5
--- /dev/null
+++ b/packages/canon/docs/components/Title/styles.css
@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+.title {
+ font-family: 'Geist', sans-serif;
+ margin: 0;
+ font-weight: 500;
+ border: none;
+
+ &.h1 {
+ font-size: 36px;
+ line-height: 44px;
+ margin-bottom: 8px;
+ margin-top: 0px;
+ }
+
+ &.h2 {
+ font-size: 24px;
+ line-height: 32px;
+ margin-bottom: 12px;
+ margin-top: 52px;
+ }
+
+ &.h3 {
+ font-size: 20px;
+ line-height: 28px;
+ margin-bottom: 12px;
+ margin-top: 40px;
+ }
+}
diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components/index.ts
new file mode 100644
index 0000000000..0e5ff2e325
--- /dev/null
+++ b/packages/canon/docs/components/index.ts
@@ -0,0 +1,27 @@
+/*
+ * 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 * from './Banner';
+export * from './Chip';
+export * from './Columns';
+export * from './ComponentStatus';
+export * from './IconLibrary';
+export * from './LayoutComponents';
+export * from './PropsTable';
+export * from './Roadmap';
+export * from './Table';
+export * from './Text';
+export * from './Title';
diff --git a/packages/canon/docs/components/styles.css b/packages/canon/docs/components/styles.css
new file mode 100644
index 0000000000..670b0c3046
--- /dev/null
+++ b/packages/canon/docs/components/styles.css
@@ -0,0 +1,10 @@
+@import './Banner/styles.css';
+@import './Chip/styles.css';
+@import './Columns/styles.css';
+@import './ComponentStatus/styles.css';
+@import './IconLibrary/styles.css';
+@import './LayoutComponents/styles.css';
+@import './Roadmap/styles.css';
+@import './Table/styles.css';
+@import './Text/styles.css';
+@import './Title/styles.css';
diff --git a/packages/canon/docs/utils/argTypes.ts b/packages/canon/docs/utils/argTypes.ts
new file mode 100644
index 0000000000..e6a68008f8
--- /dev/null
+++ b/packages/canon/docs/utils/argTypes.ts
@@ -0,0 +1,69 @@
+/*
+ * 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 { boxProperties } from '../../src/components/Box/sprinkles.css';
+import {
+ colorProperties,
+ spacingProperties,
+} from '../../src/layout/sprinkles.css';
+
+export const listResponsiveValues = (
+ value: keyof typeof boxProperties.styles,
+) => {
+ const values = boxProperties.styles[value];
+
+ if (!values) {
+ console.warn(`Value "${value}" not found in boxProperties.styles`);
+ return [];
+ }
+
+ if ('values' in values) {
+ return Object.keys(values.values);
+ }
+
+ return [];
+};
+
+export const listColorValues = (value: keyof typeof colorProperties.styles) => {
+ const values = colorProperties.styles[value];
+
+ if ('values' in values) {
+ return Object.keys(values.values);
+ }
+
+ return [];
+};
+
+export const argTypesSpacing = Object.keys(spacingProperties.styles).reduce<
+ Record
+ {children}
+
+ );
+ },
+);
diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx
new file mode 100644
index 0000000000..d4dcf694da
--- /dev/null
+++ b/packages/canon/src/components/Container/Docs.mdx
@@ -0,0 +1,77 @@
+import { Meta, Unstyled, Source } from '@storybook/blocks';
+import * as ContainerStories from './Container.stories';
+import { Title, Text, PropsTable, getProps } from '../../../docs/components';
+import { spacingProperties } from '../../layout/sprinkles.css';
+import { containerProperties } from './sprinkles.css';
+
+
+
+Custom Icon
}}>
+