diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx index fc9736a6ed..bb0c497d2d 100644 --- a/packages/canon/.storybook/preview.tsx +++ b/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 = { diff --git a/packages/canon/docs/Iconography.mdx b/packages/canon/docs/Iconography.mdx new file mode 100644 index 0000000000..48cbd2e431 --- /dev/null +++ b/packages/canon/docs/Iconography.mdx @@ -0,0 +1,20 @@ +import { Unstyled, Source } from '@storybook/blocks'; +import { Title, Text, IconLibrary } from './components'; + + + +Iconography + + + 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. + + +`} language="tsx" dark /> + + + + diff --git a/packages/canon/docs/components/IconLibrary/index.tsx b/packages/canon/docs/components/IconLibrary/index.tsx new file mode 100644 index 0000000000..8485da176e --- /dev/null +++ b/packages/canon/docs/components/IconLibrary/index.tsx @@ -0,0 +1,36 @@ +/* + * 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 '../../../src/components/Icon'; +import type { IconNames } from '../../../src/components/Icon/types'; +import { defaultIcons } from '../../../src/components/Icon/icons'; +import { Text } from '../Text'; +export const IconLibrary = () => { + const icons = Object.keys(defaultIcons); + + return ( +
+ {icons.map(icon => ( +
+
+ +
+ {icon} +
+ ))} +
+ ); +}; 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/index.ts b/packages/canon/docs/components/index.ts index 6acc4910cb..88a8cb0391 100644 --- a/packages/canon/docs/components/index.ts +++ b/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'; diff --git a/packages/canon/docs/components/styles.css b/packages/canon/docs/components/styles.css new file mode 100644 index 0000000000..63df601609 --- /dev/null +++ b/packages/canon/docs/components/styles.css @@ -0,0 +1 @@ +@import './IconLibrary/styles.css'; diff --git a/packages/canon/package.json b/packages/canon/package.json index f1e2e5d759..4ec11b31fb 100644 --- a/packages/canon/package.json +++ b/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:^", diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 3878443bcd..723e08859b 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -9,7 +9,6 @@ import { CSSProperties } from 'react'; import { JSXElementConstructor } from 'react'; import { default as React_2 } from 'react'; import { ReactElement } from 'react'; -import { ReactNode } from 'react'; // @public (undocumented) export type AlignItems = @@ -190,22 +189,18 @@ export type Gap = Space | Partial>; export const Icon: ({ name }: { name: IconNames }) => React_2.JSX.Element; // @public (undocumented) -export type IconNames = - | 'ArrowDown' - | 'ArrowLeft' - | 'ArrowRight' - | 'ArrowUp' - | 'Cloud' - | 'CustomIcon'; +export type IconMap = Partial>; // @public (undocumented) -export const IconProvider: ({ - children, - overrides, -}: { - children: ReactNode; - overrides: Partial>; -}) => React_2.JSX.Element; +export type IconNames = + | 'arrowDown' + | 'arrowLeft' + | 'arrowRight' + | 'arrowUp' + | 'cloud' + | 'heart' + | 'plus' + | 'trash'; // @public (undocumented) export type JustifyContent = diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx index 7359d36f10..7dddbd033b 100644 --- a/packages/canon/src/components/Button/Button.stories.tsx +++ b/packages/canon/src/components/Button/Button.stories.tsx @@ -71,9 +71,9 @@ export const WithIcons: Story = { }, render: args => (
-
), }; @@ -84,9 +84,9 @@ export const FullWidth: Story = { }, render: args => ( -