Merge pull request backstage#27904 from backstage/canon-improve-box

Update Box component

packages/canon/.storybook/manager.ts

@@ -0,0 +1,14 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming';
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'My custom Storybook',
+  brandUrl: 'https://example.com',
+  brandImage: 'logo.svg',
+  brandTarget: '_self',
+});
+
+addons.setConfig({
+  theme,
+});

packages/canon/.storybook/preview.tsx

@@ -2,6 +2,10 @@ import React from 'react';
 import type { Preview, ReactRenderer } from '@storybook/react';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
+// Storybook specific styles
+import '../docs/components/styles.css';
+
+// Canon specific styles
 import '../src/theme/styles.css';
 
 const preview: Preview = {

packages/canon/docs/Home.mdx

@@ -1,11 +1,11 @@
 import { Unstyled } from '@storybook/blocks';
-import { Columns, Text, ComponentStatus, Banner } from './components';
+import { Columns, Text, ComponentStatus, Banner, Title } from './components';
 
 <Unstyled>
 
 <img src="header.png" style={{ width: '100%', marginTop: '-16px' }} />
 
-<Text style={{ marginTop: '64px' }}>
+<Text style={{ marginTop: '64px', marginBottom: '24px' }}>
   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
   the API as we go. We are aiming to improve the general UI of Backstage and
@@ -18,32 +18,62 @@ import { Columns, Text, ComponentStatus, Banner } from './components';
   will change until we reach a stable release.
 </Banner>
 
-<Columns style={{ marginTop: '64px' }}>
+<Title style={{ marginTop: '48px' }} type="h2">
+  Project Status
+</Title>
+<Text>
+  We are still in the process of documenting the API and building the
+  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.
+</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="Storybook setup" status="inProgress" />
-  <ComponentStatus name="Tokens" status="inProgress" />
   <ComponentStatus
-    name="Box"
+    name="Box component"
     status="inProgress"
     link="/?path=/docs/components-box--docs"
   />
   <ComponentStatus
-    name="Button"
+    name="Inline component"
+    status="inProgress"
+    link="/?path=/story/components-inline--default"
+  />
+  <ComponentStatus
+    name="Stack component"
+    status="inProgress"
+    link="/?path=/docs/components-stack--default"
+  />
+  <ComponentStatus
+    name="Button component"
     status="inProgress"
     link="/?path=/docs/components-button--docs"
   />
-  <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" />
+  <ComponentStatus
+    name="Icon component"
+    status="inProgress"
+    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" />
 </Columns>
 
 </Unstyled>

packages/canon/docs/Iconography.mdx

@@ -0,0 +1,20 @@
+import { Unstyled, Source } from '@storybook/blocks';
+import { Title, Text, IconLibrary } from './components';
+
+<Unstyled>
+
+<Title type="h1">Iconography</Title>
+
+<Text>
+  All our default icons are provided by [Remix Icon](https://remixicon.com/). We
+  don't import all icons to reduce the bundle size but we cherry pick a nice
+  selection for you to use in your application. The list of names is set down
+  below. To use an icon, you can use the `Icon` component and pass the name of
+  the icon you want to use.
+</Text>
+
+<Source code={`<Icon name="heart" />`} language="tsx" dark />
+
+<IconLibrary />
+
+</Unstyled>

packages/canon/docs/components/IconLibrary/index.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';
+
+export const IconLibrary = () => {
+  const icons = Object.keys(defaultIcons);
+
+  return (
+    <div className="icon-library">
+      {icons.map(icon => (
+        <div key={icon} className="icon-library-item">
+          <div className="icon-library-item-icon">
+            <Icon name={icon as IconNames} />
+          </div>
+          <Text>{icon}</Text>
+        </div>
+      ))}
+    </div>
+  );
+};

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;
+}

packages/canon/docs/components/index.ts

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

packages/canon/docs/components/styles.css

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

packages/canon/package.json

@@ -38,11 +38,11 @@
   },
   "dependencies": {
     "@base_ui/react": "^1.0.0-alpha.3",
+    "@remixicon/react": "^4.5.0",
     "@vanilla-extract/css": "^1.16.0",
     "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/recipes": "^0.5.5",
-    "@vanilla-extract/sprinkles": "^1.6.3",
-    "lucide-react": "^0.460.0"
+    "@vanilla-extract/sprinkles": "^1.6.3"
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",