diff --git a/microsite-canon/components/DecorativeBox/index.tsx b/microsite-canon/components/DecorativeBox/index.tsx new file mode 100644 index 0000000000..a5c20725bc --- /dev/null +++ b/microsite-canon/components/DecorativeBox/index.tsx @@ -0,0 +1,5 @@ +import styles from './styles.module.css'; + +export const DecorativeBox = () => { + return
; +}; diff --git a/microsite-canon/components/DecorativeBox/styles.module.css b/microsite-canon/components/DecorativeBox/styles.module.css new file mode 100644 index 0000000000..84a6b579a0 --- /dev/null +++ b/microsite-canon/components/DecorativeBox/styles.module.css @@ -0,0 +1,8 @@ +.box { + min-width: 64px; + min-height: 64px; + background-color: #eaf2fd; + border-radius: 4px; + box-shadow: 0 0 0 1px #2563eb; + background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232563eb' fill-opacity='0.3' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); +} diff --git a/microsite-canon/components/HeadlessBanners/BaseUI.tsx b/microsite-canon/components/HeadlessBanners/BaseUI.tsx new file mode 100644 index 0000000000..28620d997d --- /dev/null +++ b/microsite-canon/components/HeadlessBanners/BaseUI.tsx @@ -0,0 +1,42 @@ +import styles from './styles.module.css'; +import { Text, Icon } from '@backstage/canon'; + +interface BaseUIProps { + href: string; +} + +export const BaseUI = ({ href }: BaseUIProps) => { + return ( +
+ + + + +
+ + Base UI + +
+ + This component is using Base UI under the hood. While most of the + original props are available, we have made some changes to the API + to fit our needs. + +
+ {href && ( + + Discover more + + + )} +
+
+ ); +}; diff --git a/microsite-canon/components/HeadlessBanners/styles.module.css b/microsite-canon/components/HeadlessBanners/styles.module.css new file mode 100644 index 0000000000..c8eb2bc68d --- /dev/null +++ b/microsite-canon/components/HeadlessBanners/styles.module.css @@ -0,0 +1,42 @@ +.container { + display: flex; + background-color: var(--canon-surface-1); + padding: var(--canon-spacing-md); + border-radius: var(--canon-border-radius-xs); + border: 1px solid var(--canon-border-base); + margin-bottom: var(--canon-spacing-md); + gap: var(--canon-spacing-md); + transition: background-color 0.2s ease-in-out; +} + +.icon path { + fill: var(--canon-text-primary); +} + +.content { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.description { + max-width: 700px; +} + +.button { + all: unset; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + background-color: var(--canon-surface-2); + border: 1px solid var(--canon-border-base); + border-radius: var(--canon-border-radius-xs); + padding: 0 var(--canon-spacing-xs); + height: 28px; + border-radius: 100px; + margin-top: var(--canon-spacing-xs); + font-size: var(--canon-font-size-body); + color: var(--canon-text-primary); + gap: var(--canon-spacing-2xs); +} diff --git a/microsite-canon/components/Sidebar/Sidebar.module.css b/microsite-canon/components/Sidebar/Sidebar.module.css index 112ef0fe4b..809f1b560b 100644 --- a/microsite-canon/components/Sidebar/Sidebar.module.css +++ b/microsite-canon/components/Sidebar/Sidebar.module.css @@ -55,6 +55,7 @@ height: 28px; padding: 0 12px; border-radius: 4px; + transition: background-color 0.2s ease-in-out; &:hover { background-color: var(--canon-surface-2); diff --git a/microsite-canon/components/Tabs/Tabs.module.css b/microsite-canon/components/Sidebar/Tabs.module.css similarity index 100% rename from microsite-canon/components/Tabs/Tabs.module.css rename to microsite-canon/components/Sidebar/Tabs.module.css diff --git a/microsite-canon/components/Tabs/actions.ts b/microsite-canon/components/Sidebar/actions.ts similarity index 100% rename from microsite-canon/components/Tabs/actions.ts rename to microsite-canon/components/Sidebar/actions.ts diff --git a/microsite-canon/components/Sidebar/index.tsx b/microsite-canon/components/Sidebar/index.tsx index 9bce121760..7acf971560 100644 --- a/microsite-canon/components/Sidebar/index.tsx +++ b/microsite-canon/components/Sidebar/index.tsx @@ -1,5 +1,5 @@ import styles from './Sidebar.module.css'; -import { TabsVersion, TabsPages, TabsTheme } from '../Tabs'; +import { TabsVersion, TabsPages, TabsTheme } from './tabs'; import { Docs } from './docs'; import { Playground } from './playground'; import { cookies } from 'next/headers'; diff --git a/microsite-canon/components/Sidebar/tabs.tsx b/microsite-canon/components/Sidebar/tabs.tsx new file mode 100644 index 0000000000..cb9b46c1fd --- /dev/null +++ b/microsite-canon/components/Sidebar/tabs.tsx @@ -0,0 +1,107 @@ +'use client'; + +import styles from './Tabs.module.css'; +import { Tabs } from '@base-ui-components/react/tabs'; +import { Icon, Text } from '@backstage/canon'; +import { usePathname } from 'next/navigation'; +import { useRouter } from 'next/navigation'; +import { setThemeCookie, setThemeNameCookie } from './actions'; + +export const TabsVersion = ({ + themeName, +}: { + themeName?: { value: string; name: string }; +}) => { + return ( + + + + + Theme 1 + + + + + Theme 2 + + + + + + ); +}; + +export const TabsTheme = ({ + theme, +}: { + theme?: { value: string; name: string }; +}) => { + return ( + + + + + + + + + + + + ); +}; + +export const TabsPages = () => { + const pathname = usePathname(); + const router = useRouter(); + + const onValueChange = (value: string) => { + if (value === 'docs') { + router.push('/'); + } else { + router.push('/playground'); + } + }; + + return ( + + + { + router.push('/'); + }} + > + + Documentation + + + { + router.push('/playground'); + }} + > + + Playground + + + + + + ); +}; diff --git a/microsite-canon/components/Snippet/index.tsx b/microsite-canon/components/Snippet/index.tsx index 0893eed51c..63273e4c87 100644 --- a/microsite-canon/components/Snippet/index.tsx +++ b/microsite-canon/components/Snippet/index.tsx @@ -23,16 +23,18 @@ export const Snippet = ({ }: SnippetProps) => { return ( -
- {preview} +
+
+ {preview} +
View code
- + diff --git a/microsite-canon/components/Snippet/styles.module.css b/microsite-canon/components/Snippet/styles.module.css index ed3faa4dcd..c56627b1e1 100644 --- a/microsite-canon/components/Snippet/styles.module.css +++ b/microsite-canon/components/Snippet/styles.module.css @@ -8,11 +8,17 @@ border-radius: 4px; box-shadow: inset 0 0 0 1px var(--canon-border-base); background-color: var(--canon-background); + transition: all 0.2s ease-in-out; + padding: 1px; + position: relative; +} + +.previewContent { + width: 100%; + height: 100%; background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 0); background-position: calc((8px / 2) * -1) calc((8px / 2) * -1); background-size: 8px 8px; - position: relative; - transition: all 0.2s ease-in-out; } .center { @@ -29,9 +35,28 @@ cursor: pointer; } -[data-theme='dark'] .preview { +[data-theme='dark'] .previewContent { background-image: radial-gradient( rgba(255, 255, 255, 0.1) 1px, transparent 0 ); } + +.panel { + height: var(--collapsible-panel-height); + transition: all 0.2s ease-out; + overflow: hidden; + + &[data-starting-style], + &[data-ending-style] { + height: 0; + } + + &[data-closed] { + opacity: 0; + } + + &[data-open] { + opacity: 1; + } +} diff --git a/microsite-canon/components/Table/styles.module.css b/microsite-canon/components/Table/styles.module.css index a0e8cbc92e..c2244f3014 100644 --- a/microsite-canon/components/Table/styles.module.css +++ b/microsite-canon/components/Table/styles.module.css @@ -15,7 +15,7 @@ */ .wrapper { - border: 1px solid #e7e7e7; + border: 1px solid var(--canon-border-base); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; @@ -33,8 +33,9 @@ padding: 12px 16px !important; border: none !important; text-align: left; - background-color: white !important; + background-color: var(--canon-surface-1) !important; font-size: 16px; + transition: background-color 0.2s ease-in-out; & p { margin: 0; @@ -43,14 +44,14 @@ .tableHeaderCell { /* background-color: #f5f5f5 !important; */ - border-bottom: 1px solid #e7e7e7 !important; + border-bottom: 1px solid var(--canon-border-base) !important; font-weight: 500; font-size: 14px; } .tableRow { border: none; - border-bottom: 1px solid #e7e7e7; + border-bottom: 1px solid var(--canon-border-base); &:last-child { border-bottom: none; } @@ -59,7 +60,7 @@ .tableChip { display: inline-block; font-size: 14px !important; - border: 1px solid #e7e7e7; + border: 1px solid var(--canon-border-base); border-radius: 6px; padding: 0px 6px; height: 24px; diff --git a/microsite-canon/components/Tabs/index.tsx b/microsite-canon/components/Tabs/index.tsx index cb9b46c1fd..06aef76e7f 100644 --- a/microsite-canon/components/Tabs/index.tsx +++ b/microsite-canon/components/Tabs/index.tsx @@ -1,107 +1 @@ -'use client'; - -import styles from './Tabs.module.css'; -import { Tabs } from '@base-ui-components/react/tabs'; -import { Icon, Text } from '@backstage/canon'; -import { usePathname } from 'next/navigation'; -import { useRouter } from 'next/navigation'; -import { setThemeCookie, setThemeNameCookie } from './actions'; - -export const TabsVersion = ({ - themeName, -}: { - themeName?: { value: string; name: string }; -}) => { - return ( - - - - - Theme 1 - - - - - Theme 2 - - - - - - ); -}; - -export const TabsTheme = ({ - theme, -}: { - theme?: { value: string; name: string }; -}) => { - return ( - - - - - - - - - - - - ); -}; - -export const TabsPages = () => { - const pathname = usePathname(); - const router = useRouter(); - - const onValueChange = (value: string) => { - if (value === 'docs') { - router.push('/'); - } else { - router.push('/playground'); - } - }; - - return ( - - - { - router.push('/'); - }} - > - - Documentation - - - { - router.push('/playground'); - }} - > - - Playground - - - - - - ); -}; +export * as Tabs from './parts'; diff --git a/microsite-canon/components/Tabs/parts.tsx b/microsite-canon/components/Tabs/parts.tsx new file mode 100644 index 0000000000..4205e971ea --- /dev/null +++ b/microsite-canon/components/Tabs/parts.tsx @@ -0,0 +1,54 @@ +'use client'; + +import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs'; +import styles from './styles.module.css'; +import { Text } from '@backstage/canon'; + +export const Root = ({ + className, + ...rest +}: React.ComponentProps) => ( + +); + +export const List = ({ + className, + children, + ...rest +}: React.ComponentProps) => ( + + {children} + + +); + +export const Tab = (props: React.ComponentProps) => ( + { + return ( + + ); + }} + /> +); + +export const Panel = ({ + className, + ...rest +}: React.ComponentProps) => ( + +); diff --git a/microsite-canon/components/Tabs/styles.module.css b/microsite-canon/components/Tabs/styles.module.css new file mode 100644 index 0000000000..ba5db73b59 --- /dev/null +++ b/microsite-canon/components/Tabs/styles.module.css @@ -0,0 +1,27 @@ +.root { + margin-top: 40px; +} + +.list { + display: flex; + gap: var(--canon-spacing-md); + border-bottom: 1px solid var(--canon-border-base); + position: relative; + margin-bottom: var(--canon-spacing-md); +} + +.tab { + all: unset; + cursor: pointer; + padding-bottom: 8px; +} + +.indicator { + position: absolute; + bottom: -1px; + left: var(--active-tab-left); + width: var(--active-tab-width); + height: 1px; + background-color: var(--canon-text-primary); + transition: all 0.2s ease-in-out; +} diff --git a/microsite-canon/content/_snippets.ts b/microsite-canon/content/_snippets.ts new file mode 100644 index 0000000000..417ff853b5 --- /dev/null +++ b/microsite-canon/content/_snippets.ts @@ -0,0 +1,45 @@ +// Sometimes codes are not formatted correctly in the docs, so we need to use snippets + +export const grid = `import { Grid } from '@backstage/canon'; + + + + +`; + +export const buttonVariants = ` + + + + +`; + +export const stackFAQ1 = ` + Hello World + Hello World + Hello World +`; + +export const stackSimple = ` + Hello World + Hello World + Hello World +`; + +export const stackResponsive = ` + Hello World + Hello World + Hello World +`; + +export const stackAlign = ` + Hello World + Hello World + Hello World +`; diff --git a/microsite-canon/content/box.mdx b/microsite-canon/content/box.mdx index d0573d9284..a80f0442f1 100644 --- a/microsite-canon/content/box.mdx +++ b/microsite-canon/content/box.mdx @@ -1,17 +1,33 @@ -import { Story } from '../components/Story'; import { CodeBlock } from '../components/CodeBlock'; import { PropsTable } from '../components/PropsTable'; import { spacePropsList } from '../utils/spaceProps'; +import { Tabs } from '../components/Tabs'; +import { Snippet } from '../components/Snippet'; +import { BoxPreview } from '../snippets/box'; # Box -Box is the lowest-level component in Canon. We use it internally to build all -of our components. It provides a consistent API for styling and layout. +Box is the lowest-level component in Canon. It provides a consistent API for styling and layout. -} + code={` + +`} + align="center" +/> -Hello World!`} /> + + + Usage + + + `} /> + + ## API reference @@ -81,10 +97,7 @@ avoid collapsing margins but both are available. A simple example of how to use the Box component. -Hello World`} -/> +Hello World`} /> ### Responsive diff --git a/microsite-canon/content/button.mdx b/microsite-canon/content/button.mdx index bed9477a17..08ebf15b38 100644 --- a/microsite-canon/content/button.mdx +++ b/microsite-canon/content/button.mdx @@ -1,5 +1,7 @@ import { PropsTable } from '../components/PropsTable'; import { Snippet } from '../components/Snippet'; +import { Tabs } from '../components/Tabs'; +import { CodeBlock } from '../components/CodeBlock'; import { Button1, Button2, @@ -8,6 +10,7 @@ import { Button5, Button6, } from '../snippets/button'; +import { buttonVariants } from './_snippets'; # Button @@ -30,6 +33,29 @@ A button component that can be used to trigger actions. `} /> + + + Usage + Theming + + + +`} + /> + + + We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with + your brand. For additional flexibility, you can use the provided class names for each element listed below. + `} + /> + + + + ## API reference } - code={` - - - -`} + code={buttonVariants} /> ### Sizes diff --git a/microsite-canon/content/checkbox.mdx b/microsite-canon/content/checkbox.mdx index 3246cd4b80..f974208708 100644 --- a/microsite-canon/content/checkbox.mdx +++ b/microsite-canon/content/checkbox.mdx @@ -1,21 +1,47 @@ -import { Story } from '../components/Story'; -import { CodeBlock } from '../components/CodeBlock'; import { PropsTable } from '../components/PropsTable'; +import { CheckboxPreview, CheckboxAllVariants } from '../snippets/checkbox'; +import { Snippet } from '../components/Snippet'; +import { Tabs } from '../components/Tabs'; +import { CodeBlock } from '../components/CodeBlock'; +import { BaseUI } from '../components/HeadlessBanners/BaseUI'; # Checkbox A checkbox component that can be used to trigger actions. - +} + code={``} +/> - + + Usage + Theming + + + -`} /> + +`} + /> + + + We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with + your brand. For additional flexibility, you can use the provided class names for each element listed below. + `} + /> + + + ## API reference + + + +## Examples + +### All variants + +Here's a view when checkboxes have different variants. + +} + code={` + + + + + `} +/> diff --git a/microsite-canon/content/container.mdx b/microsite-canon/content/container.mdx index 33d83885ba..28d656b2ad 100644 --- a/microsite-canon/content/container.mdx +++ b/microsite-canon/content/container.mdx @@ -1,17 +1,34 @@ import { CodeBlock } from '../components/CodeBlock'; import { PropsTable } from '../components/PropsTable'; import { spacePropsList } from '../utils/spaceProps'; +import { Tabs } from '../components/Tabs'; +import { Snippet } from '../components/Snippet'; +import { ContainerPreview } from '../snippets/container'; # Container The container component let you use our default max-width and center the content on the page. -} + code={` + +`} +/> + + + + Usage + + + Hello World! `} /> + + ## API reference diff --git a/microsite-canon/content/grid.mdx b/microsite-canon/content/grid.mdx index 0d11bb968f..639b8c7945 100644 --- a/microsite-canon/content/grid.mdx +++ b/microsite-canon/content/grid.mdx @@ -1,19 +1,34 @@ import { CodeBlock } from '../components/CodeBlock'; import { PropsTable } from '../components/PropsTable'; import { spacePropsList } from '../utils/spaceProps'; +import { Tabs } from '../components/Tabs'; +import { grid } from './_snippets'; +import { Snippet } from '../components/Snippet'; +import { GridPreview } from '../snippets/grid'; # Grid A layout component that helps to create simple column-based layouts as well as more complex ones. -} + code={` + + + +`} +/> - - Hello World - -`} /> + + + Usage + + + + + ## API reference diff --git a/microsite-canon/content/heading.mdx b/microsite-canon/content/heading.mdx index ebe8aeb655..4ba833133a 100644 --- a/microsite-canon/content/heading.mdx +++ b/microsite-canon/content/heading.mdx @@ -1,18 +1,45 @@ -import { Story } from '../components/Story'; -import { CodeBlock } from '../components/CodeBlock'; import { PropsTable } from '../components/PropsTable'; +import { + HeadingPreview, + HeadingAllVariants, + HeadingResponsive, +} from '../snippets/heading'; +import { Snippet } from '../components/Snippet'; +import { Tabs } from '../components/Tabs'; +import { CodeBlock } from '../components/CodeBlock'; # Heading Headings are used to structure the content of your page. - +} + code={`Hello World!`} +/> - + + Usage + Theming + + + Hello World! -`} /> + +`} + /> + + + We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with + your brand. For additional flexibility, you can use the provided class names for each element listed below. + `} + /> + + + ## API reference @@ -44,9 +71,10 @@ Headings are used to structure the content of your page. The `Heading` component has a `variant` prop that can be used to change the appearance of the heading. - - -} code={` Display Title 1 @@ -61,6 +89,9 @@ appearance of the heading. You can also use the `variant` prop to change the appearance of the text based on the screen size. -} code={`Responsive`} /> diff --git a/microsite-canon/content/icon.mdx b/microsite-canon/content/icon.mdx index a241bdfd1e..afca89535e 100644 --- a/microsite-canon/content/icon.mdx +++ b/microsite-canon/content/icon.mdx @@ -1,19 +1,43 @@ -import { Story } from '../components/Story'; -import { CodeBlock } from '../components/CodeBlock'; import { PropsTable } from '../components/PropsTable'; import { icons } from '@backstage/canon'; +import { IconPreview } from '../snippets/icon'; +import { Snippet } from '../components/Snippet'; +import { Tabs } from '../components/Tabs'; +import { CodeBlock } from '../components/CodeBlock'; # Icon Icons are used to represent an action or a state. - +} + code={``} +/> - + + Usage + Theming + + + -`} /> + +`} + /> + + + We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with + your brand. For additional flexibility, you can use the provided class names for each element listed below. + `} + /> + + + ## API reference diff --git a/microsite-canon/content/inline.mdx b/microsite-canon/content/inline.mdx index a55cb52616..41b873f2ce 100644 --- a/microsite-canon/content/inline.mdx +++ b/microsite-canon/content/inline.mdx @@ -1,22 +1,37 @@ import { CodeBlock } from '../components/CodeBlock'; import { PropsTable } from '../components/PropsTable'; import { spacePropsList } from '../utils/spaceProps'; +import { Tabs } from '../components/Tabs'; +import { Snippet } from '../components/Snippet'; +import { InlinePreview } from '../snippets/inline'; # Inline -The Inline component is used to create a horizontal layout of elements. By -default it uses flex and flexWrap to make sure that your content always flows -responsively. +The Inline component is used to create a horizontal layout of elements. -} + code={` + + + +`} +/> - - Hello World - Hello World - Hello World - -`} /> + + + Usage + + + +`} + /> + + ## API reference diff --git a/microsite-canon/content/stack.mdx b/microsite-canon/content/stack.mdx index 57059f7468..0a259459cc 100644 --- a/microsite-canon/content/stack.mdx +++ b/microsite-canon/content/stack.mdx @@ -1,6 +1,15 @@ -import { CodeBlock } from '../components/CodeBlock'; import { PropsTable } from '../components/PropsTable'; import { spacePropsList } from '../utils/spaceProps'; +import { Tabs } from '../components/Tabs'; +import { CodeBlock } from '../components/CodeBlock'; +import { + stackFAQ1, + stackSimple, + stackResponsive, + stackAlign, +} from './_snippets'; +import { Snippet } from '../components/Snippet'; +import { StackPreview } from '../snippets/stack'; # Stack @@ -8,15 +17,29 @@ This is the stack container component. It will help to define the number of columns that will be used in the grid. You can also define the gap between the columns. All values are responsive. -} + code={` + + + +`} +/> - - Hello World - Hello World - Hello World - -`} /> + + + Usage + + + +`} + /> + + ## API reference @@ -52,14 +75,7 @@ The grid component also accepts all the spacing props from the Box component. The Stack component only allows for stacking elements vertically. If you want to create a column layout, please use the Grid component. - - Hello World - Hello World - Hello World - -`} -/> + ## Examples @@ -67,36 +83,18 @@ to create a column layout, please use the Grid component. A simple example of how to use the Stack component. - - Hello World - Hello World - Hello World -`} -/> + ### Responsive The Stack component also supports responsive values, making it easy to create responsive designs. - - Hello World - Hello World - Hello World -`} -/> + ### Align The Stack component also supports responsive alignment, making it easy to create responsive designs. - - Hello World - Hello World - Hello World -`} -/> + diff --git a/microsite-canon/content/text.mdx b/microsite-canon/content/text.mdx index e07933530d..00c4b084e5 100644 --- a/microsite-canon/content/text.mdx +++ b/microsite-canon/content/text.mdx @@ -1,17 +1,50 @@ -import { CodeBlock } from '../components/CodeBlock'; import { PropsTable } from '../components/PropsTable'; -import { Story } from '../components/Story'; +import { + TextPreview, + TextAllVariants, + TextResponsive, + TextAllWeights, +} from '../snippets/text'; +import { Snippet } from '../components/Snippet'; +import { Tabs } from '../components/Tabs'; +import { CodeBlock } from '../components/CodeBlock'; # Text The `Text` component is used to display content on your page. - +} + code={` + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is in + the painting? + `} +/> - + + Usage + Theming + + + Hello World!`} /> + +`} + /> + + + We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with + your brand. For additional flexibility, you can use the provided class names for each element listed below. + `} + /> + + + ## API reference @@ -47,13 +80,31 @@ The `Text` component is used to display content on your page. The `Text` component has a `variant` prop that can be used to change the appearance of the text. -} code={` - Subtitle Lorem ipsum dolor sit amet consectetur... - Body Lorem ipsum dolor sit amet consectetur... - Caption Lorem ipsum dolor sit amet consectetur... - Label Lorem ipsum dolor sit amet consectetur... -`} + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + `} /> ### All weights @@ -61,11 +112,21 @@ appearance of the text. The `Text` component has a `weight` prop that can be used to change the appearance of the text. -} code={` - Regular Lorem ipsum dolor sit amet consectetur... - Bold Lorem ipsum dolor sit amet consectetur... -`} + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + `} /> ### Responsive @@ -73,6 +134,8 @@ appearance of the text. You can also use the `variant` prop to change the appearance of the text based on the screen size. -} code={`Responsive`} /> diff --git a/microsite-canon/content/theming.mdx b/microsite-canon/content/theming.mdx index a8256be09a..421b315a7b 100644 --- a/microsite-canon/content/theming.mdx +++ b/microsite-canon/content/theming.mdx @@ -24,6 +24,7 @@ that, create a theme.css file and import it in your application. Here's an example below on how to set your light and dark mode. +} + code={` + Display + Title 1 + Title 2 + Title 3 + Title 4 +`} +/> ## Text @@ -25,4 +38,29 @@ versatile and can be paired with regular and bold of font weights. You can use the [Text component](?path=/docs/components-text--docs) to add text to your page. - +} + code={` + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + + A man looks at a painting in a museum and says, “Brothers and sisters I + have none, but that man's father is my father's son.” Who is + in the painting? + + `} +/> diff --git a/microsite-canon/snippets/box.tsx b/microsite-canon/snippets/box.tsx new file mode 100644 index 0000000000..028518c0a3 --- /dev/null +++ b/microsite-canon/snippets/box.tsx @@ -0,0 +1,10 @@ +import { Box } from '@backstage/canon'; +import { DecorativeBox } from '../components/DecorativeBox'; + +export const BoxPreview = () => { + return ( + + + + ); +}; diff --git a/microsite-canon/snippets/button.tsx b/microsite-canon/snippets/button.tsx index 601e535266..3b0cdf1ef0 100644 --- a/microsite-canon/snippets/button.tsx +++ b/microsite-canon/snippets/button.tsx @@ -63,6 +63,7 @@ export const Button5 = () => { }; export const Button6 = () => { + // TODO: Add responsive button return null; return (