diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx index e0b0a89f31..b1276157b6 100644 --- a/canon-docs/src/app/(docs)/components/button/page.mdx +++ b/canon-docs/src/app/(docs)/components/button/page.mdx @@ -141,9 +141,9 @@ Here's a view when buttons are full width. py={4} open preview={} - code={` + code={` -`} +`} /> ### Disabled diff --git a/canon-docs/src/app/(docs)/components/stack/page.mdx b/canon-docs/src/app/(docs)/components/flex/page.mdx similarity index 64% rename from canon-docs/src/app/(docs)/components/stack/page.mdx rename to canon-docs/src/app/(docs)/components/flex/page.mdx index 7ef25c00b7..9f2b0bb6ee 100644 --- a/canon-docs/src/app/(docs)/components/stack/page.mdx +++ b/canon-docs/src/app/(docs)/components/flex/page.mdx @@ -3,29 +3,29 @@ import { spacePropsList } from '@/utils/spaceProps'; import { Tabs } from '@/components/Tabs'; import { CodeBlock } from '@/components/CodeBlock'; import { - stackFAQ1, - stackSimple, - stackResponsive, - stackAlign, + flexFAQ1, + flexSimple, + flexResponsive, + flexAlign, } from '@/snippets/_snippets'; import { Snippet } from '@/components/Snippet'; -import { StackPreview } from '@/snippets/stack'; +import { FlexPreview } from '@/snippets/flex'; -# Stack +# Flex -This is the stack container component. It will help to define the number of +This is the flex 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={` + preview={} + code={` -`} +`} /> @@ -34,9 +34,9 @@ columns. All values are responsive. + `} /> @@ -73,29 +73,29 @@ The grid component also accepts all the spacing props from the Box component. ### Can I stack horizontally? -The Stack component only allows for stacking elements vertically. If you want +The Flex component only allows for stacking elements vertically. If you want to create a column layout, please use the Grid component. - + ## Examples ### Simple -A simple example of how to use the Stack component. +A simple example of how to use the Flex component. - + ### Responsive -The Stack component also supports responsive values, making it easy to create +The Flex component also supports responsive values, making it easy to create responsive designs. - + ### Align -The Stack component also supports responsive alignment, making it easy to +The Flex component also supports responsive alignment, making it easy to create responsive designs. - + diff --git a/canon-docs/src/app/(docs)/components/heading/page.mdx b/canon-docs/src/app/(docs)/components/heading/page.mdx index e843e131ce..f2fbe0e929 100644 --- a/canon-docs/src/app/(docs)/components/heading/page.mdx +++ b/canon-docs/src/app/(docs)/components/heading/page.mdx @@ -75,13 +75,13 @@ appearance of the heading. py={2} open preview={} - code={` + code={` Display Title 1 Title 2 Title 3 Title 4 -`} +`} /> ### Responsive diff --git a/canon-docs/src/app/(docs)/components/inline/page.mdx b/canon-docs/src/app/(docs)/components/inline/page.mdx deleted file mode 100644 index ac4d7e0401..0000000000 --- a/canon-docs/src/app/(docs)/components/inline/page.mdx +++ /dev/null @@ -1,118 +0,0 @@ -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. - -} - code={` - - - -`} -/> - - - - Usage - - - -`} - /> - - - -## API reference - - - -The grid component also accepts all the spacing props from the Box component. - - - -## Examples - -### Simple - -A simple example of how to use the Inline component. - - - Hello World - Hello World - Hello World -`} -/> - -### Responsive - -The Inline component also supports responsive values, making it easy to create -responsive designs. - - - Hello World - Hello World - Hello World -`} -/> - -### Align - -The Inline component also supports responsive alignment, making it easy to -create responsive designs. - - - Hello World - Hello World - Hello World -`} -/> - -### Align vertically - -The Inline component also supports responsive vertical alignment, making it -easy to create responsive designs. - - - Hello World - Hello World - Hello World -`} -/> diff --git a/canon-docs/src/app/(docs)/components/text/page.mdx b/canon-docs/src/app/(docs)/components/text/page.mdx index 6d96fc5da3..450de0f79d 100644 --- a/canon-docs/src/app/(docs)/components/text/page.mdx +++ b/canon-docs/src/app/(docs)/components/text/page.mdx @@ -83,7 +83,7 @@ appearance of the text. } - code={` + 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 @@ -104,7 +104,7 @@ appearance of the text. have none, but that man's father is my father's son.” Who is in the painting? - `} + `} /> ### All weights @@ -115,7 +115,7 @@ appearance of the text. } - code={` + 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 @@ -126,7 +126,7 @@ appearance of the text. have none, but that man's father is my father's son.” Who is in the painting? - `} + `} /> ### Responsive diff --git a/canon-docs/src/app/(docs)/page.mdx b/canon-docs/src/app/(docs)/page.mdx index 09d4d83ea3..35fbc482b2 100644 --- a/canon-docs/src/app/(docs)/page.mdx +++ b/canon-docs/src/app/(docs)/page.mdx @@ -45,12 +45,12 @@ import { ThemeProvider } from '@backstage/canon'; Now you can start building your plugin using the new design system. ```tsx -import { Stack, Button } from '@backstage/canon'; +import { Flex, Button, Text } from '@backstage/canon'; - + Hello World -; +; ``` ## Roadmap diff --git a/canon-docs/src/app/(docs)/theme/layout/page.mdx b/canon-docs/src/app/(docs)/theme/layout/page.mdx index dc3a5d4585..b069082b04 100644 --- a/canon-docs/src/app/(docs)/theme/layout/page.mdx +++ b/canon-docs/src/app/(docs)/theme/layout/page.mdx @@ -22,13 +22,13 @@ provide are the ones coming from the theme. + code={` Hello World Project 1 Project 2 - + `} /> diff --git a/canon-docs/src/app/(docs)/theme/typography/page.mdx b/canon-docs/src/app/(docs)/theme/typography/page.mdx index 86be4d2e19..74b3144ef6 100644 --- a/canon-docs/src/app/(docs)/theme/typography/page.mdx +++ b/canon-docs/src/app/(docs)/theme/typography/page.mdx @@ -21,13 +21,13 @@ component](?path=/docs/components-heading--docs). py={2} open preview={} - code={` + code={` Display Title 1 Title 2 Title 3 Title 4 -`} +`} /> ## Text @@ -41,7 +41,7 @@ page. } - code={` + 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 @@ -62,5 +62,5 @@ page. have none, but that man's father is my father's son.” Who is in the painting? - `} + `} /> diff --git a/canon-docs/src/app/(playground)/playground/page.tsx b/canon-docs/src/app/(playground)/playground/page.tsx index 7bbdefcc95..354f07bb25 100644 --- a/canon-docs/src/app/(playground)/playground/page.tsx +++ b/canon-docs/src/app/(playground)/playground/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { ReactNode } from 'react'; -import { Grid, Stack, Text } from '../../../../../packages/canon'; +import { Grid, Flex, Text } from '../../../../../packages/canon'; import { screenSizes } from '@/utils/data'; import { Frame } from '@/components/Frame'; import { usePlayground } from '@/utils/playground-context'; @@ -53,7 +53,7 @@ const Content = () => { const { selectedComponents } = usePlayground(); return ( - + {selectedComponents.find(c => c === 'button') && ( } title="Button" /> )} @@ -69,17 +69,17 @@ const Content = () => { {/* {selectedComponents.find(c => c === 'input') && ( } title="Input" /> )} */} - + ); }; const Line = ({ content, title }: { content: ReactNode; title: string }) => { return ( - - + + {title} - {content} + {content} ); }; diff --git a/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx b/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx index 7262b837b3..05238717f1 100644 --- a/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx +++ b/canon-docs/src/components/LayoutComponents/LayoutComponents.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { BoxSvg } from './svgs/box'; -import { StackSvg } from './svgs/stack'; +import { FlexSvg } from './svgs/flex'; import { GridSvg } from './svgs/grid'; import { InlineSvg } from './svgs/inline'; import { ContainerSvg } from './svgs/container'; @@ -20,10 +20,10 @@ export const LayoutComponents = () => {
- - + + -
Stack
+
Flex
Arrange your components vertically
diff --git a/canon-docs/src/components/LayoutComponents/svgs/stack.tsx b/canon-docs/src/components/LayoutComponents/svgs/flex.tsx similarity index 98% rename from canon-docs/src/components/LayoutComponents/svgs/stack.tsx rename to canon-docs/src/components/LayoutComponents/svgs/flex.tsx index c54cba57cf..7bc3466ce8 100644 --- a/canon-docs/src/components/LayoutComponents/svgs/stack.tsx +++ b/canon-docs/src/components/LayoutComponents/svgs/flex.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -export const StackSvg = () => { +export const FlexSvg = () => { return ( `; -export const stackFAQ1 = ` +export const flexFAQ1 = ` Hello World Hello World Hello World `; -export const stackSimple = ` +export const flexSimple = ` Hello World Hello World Hello World -`; +`; -export const stackResponsive = ` +export const flexResponsive = ` Hello World Hello World Hello World -`; +`; -export const stackAlign = ` +export const flexAlign = ` Hello World Hello World Hello World -`; +`; diff --git a/canon-docs/src/snippets/button.tsx b/canon-docs/src/snippets/button.tsx index 30ed666a6a..2ae2ab0be9 100644 --- a/canon-docs/src/snippets/button.tsx +++ b/canon-docs/src/snippets/button.tsx @@ -1,16 +1,10 @@ 'use client'; -import { - Inline, - Button, - Stack, - ButtonProps, - Text, -} from '../../../packages/canon'; +import { Button, Flex, ButtonProps, Text } from '../../../packages/canon'; export const ButtonPreview = () => { return ( - + @@ -20,40 +14,40 @@ export const ButtonPreview = () => { - + ); }; export const ButtonSizes = () => { return ( - + - + ); }; export const ButtonWithIcons = () => { return ( - + - + ); }; export const ButtonFullWidth = () => { return ( - + - + ); }; @@ -73,12 +67,12 @@ export const ButtonPlayground = () => { const variants: string[] = ['primary', 'secondary', 'tertiary']; return ( - + {variants.map(variant => ( - + {variant} {['small', 'medium'].map(size => ( - + - + ))} - + ))} - + ); }; diff --git a/canon-docs/src/snippets/checkbox.tsx b/canon-docs/src/snippets/checkbox.tsx index 88c6de4a99..fe2a5b0219 100644 --- a/canon-docs/src/snippets/checkbox.tsx +++ b/canon-docs/src/snippets/checkbox.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Inline, Checkbox, Stack, Text } from '../../../packages/canon'; +import { Checkbox, Flex, Text } from '../../../packages/canon'; export const CheckboxPreview = () => { return ; @@ -8,25 +8,25 @@ export const CheckboxPreview = () => { export const CheckboxAllVariants = () => { return ( - + - + ); }; export const CheckboxPlayground = () => { return ( - + All variants - + - - + + ); }; diff --git a/canon-docs/src/snippets/stack.tsx b/canon-docs/src/snippets/flex.tsx similarity index 86% rename from canon-docs/src/snippets/stack.tsx rename to canon-docs/src/snippets/flex.tsx index 4bada6f7ba..8bfab8878e 100644 --- a/canon-docs/src/snippets/stack.tsx +++ b/canon-docs/src/snippets/flex.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Stack } from '../../../packages/canon'; +import { Flex } from '../../../packages/canon'; const DecorativeBox = () => { return ( @@ -18,14 +18,14 @@ const DecorativeBox = () => { ); }; -export const StackPreview = () => { +export const FlexPreview = () => { return (
- + - +
); }; diff --git a/canon-docs/src/snippets/heading.tsx b/canon-docs/src/snippets/heading.tsx index 13eaddff30..484497e7a7 100644 --- a/canon-docs/src/snippets/heading.tsx +++ b/canon-docs/src/snippets/heading.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Heading, Stack, Text } from '../../../packages/canon'; +import { Heading, Flex, Text } from '../../../packages/canon'; export const HeadingPreview = () => { return Look mum, no hands!; @@ -8,35 +8,35 @@ export const HeadingPreview = () => { export const HeadingAllVariants = () => { return ( - + Display Title 1 Title 2 Title 3 Title 4 - + ); }; export const HeadingResponsive = () => { return ( - + Responsive heading - + ); }; export const HeadingPlayground = () => { return ( - + All variants Display Title 1 Title 2 Title 3 Title 4 - + ); }; diff --git a/canon-docs/src/snippets/text.tsx b/canon-docs/src/snippets/text.tsx index d2e2020210..4d39cbf6dd 100644 --- a/canon-docs/src/snippets/text.tsx +++ b/canon-docs/src/snippets/text.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Stack, Text } from '../../../packages/canon'; +import { Flex, Text } from '../../../packages/canon'; export const TextPreview = () => { return ( @@ -14,7 +14,7 @@ export const TextPreview = () => { export const TextAllVariants = () => { return ( - + 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 @@ -35,13 +35,13 @@ export const TextAllVariants = () => { have none, but that man's father is my father's son.” Who is in the painting? - + ); }; export const TextAllWeights = () => { return ( - + 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 @@ -52,7 +52,7 @@ export const TextAllWeights = () => { have none, but that man's father is my father's son.” Who is in the painting? - + ); }; @@ -64,7 +64,7 @@ export const TextResponsive = () => { export const TextPlayground = () => { return ( - + Subtitle A man looks at a painting in a museum and says, “Brothers and sisters I @@ -89,6 +89,6 @@ export const TextPlayground = () => { have none, but that man's father is my father's son.” Who is in the painting? - + ); }; diff --git a/canon-docs/src/utils/data.ts b/canon-docs/src/utils/data.ts index 1109d6fa0a..c454b76d71 100644 --- a/canon-docs/src/utils/data.ts +++ b/canon-docs/src/utils/data.ts @@ -55,13 +55,8 @@ export const layoutComponents: Page[] = [ status: 'alpha', }, { - title: 'Inline', - slug: 'inline', - status: 'alpha', - }, - { - title: 'Stack', - slug: 'stack', + title: 'Flex', + slug: 'flex', status: 'alpha', }, ]; diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts deleted file mode 100644 index 684e633027..0000000000 --- a/packages/canon/src/utils/getClassNames.ts +++ /dev/null @@ -1,206 +0,0 @@ -/* - * 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 type { Breakpoint, UtilityProps } from '../types'; - -const spaceMap = (type: string) => ({ - none: `${type}-none`, - '2xs': `${type}-2xs`, - xs: `${type}-xs`, - sm: `${type}-sm`, - md: `${type}-md`, - lg: `${type}-lg`, - xl: `${type}-xl`, - '2xl': `${type}-2xl`, -}); - -const valueMap: Record> = { - alignItems: { - stretch: 'items-stretch', - start: 'items-start', - center: 'items-center', - end: 'items-end', - }, - border: { - none: 'border-none', - base: 'border-base', - error: 'border-error', - warning: 'border-warning', - selected: 'border-selected', - }, - borderRadius: { - none: 'rounded-none', - '2xs': 'rounded-2xs', - xs: 'rounded-xs', - sm: 'rounded-sm', - md: 'rounded-md', - lg: 'rounded-lg', - xl: 'rounded-xl', - '2xl': 'rounded-2xl', - }, - colEnd: { - 1: 'col-end-1', - 2: 'col-end-2', - 3: 'col-end-3', - 4: 'col-end-4', - 5: 'col-end-5', - 6: 'col-end-6', - 7: 'col-end-7', - 8: 'col-end-8', - 9: 'col-end-9', - 10: 'col-end-10', - 11: 'col-end-11', - 12: 'col-end-12', - auto: 'col-end-auto', - }, - colSpan: { - 1: 'col-span-1', - 2: 'col-span-2', - 3: 'col-span-3', - 4: 'col-span-4', - 5: 'col-span-5', - 6: 'col-span-6', - 7: 'col-span-7', - 8: 'col-span-8', - 9: 'col-span-9', - 10: 'col-span-10', - 11: 'col-span-11', - 12: 'col-span-12', - auto: 'col-span-auto', - }, - colStart: { - 1: 'col-start-1', - 2: 'col-start-2', - 3: 'col-start-3', - 4: 'col-start-4', - 5: 'col-start-5', - 6: 'col-start-6', - 7: 'col-start-7', - 8: 'col-start-8', - 9: 'col-start-9', - 10: 'col-start-10', - 11: 'col-start-11', - 12: 'col-start-12', - auto: 'col-start-auto', - }, - columns: { - 1: 'grid-cols-1', - 2: 'grid-cols-2', - 3: 'grid-cols-3', - 4: 'grid-cols-4', - 5: 'grid-cols-5', - 6: 'grid-cols-6', - 7: 'grid-cols-7', - 8: 'grid-cols-8', - 9: 'grid-cols-9', - 10: 'grid-cols-10', - 11: 'grid-cols-11', - 12: 'grid-cols-12', - auto: 'grid-cols-auto', - }, - display: { - none: 'hidden', - flex: 'flex', - block: 'block', - inline: 'inline', - }, - flexDirection: { - row: 'flex-row', - column: 'flex-col', - }, - flexWrap: { - wrap: 'flex-wrap', - nowrap: 'flex-nowrap', - 'wrap-reverse': 'flex-wrap-reverse', - }, - gap: spaceMap('gap'), - justifyContent: { - stretch: 'justify-stretch', - start: 'justify-start', - center: 'justify-center', - end: 'justify-end', - around: 'justify-around', - between: 'justify-between', - }, - margin: spaceMap('m'), - marginBottom: spaceMap('mb'), - marginLeft: spaceMap('ml'), - marginRight: spaceMap('mr'), - marginTop: spaceMap('mt'), - marginX: spaceMap('mx'), - marginY: spaceMap('my'), - padding: spaceMap('p'), - paddingBottom: spaceMap('pb'), - paddingLeft: spaceMap('pl'), - paddingRight: spaceMap('pr'), - paddingTop: spaceMap('pt'), - paddingX: spaceMap('px'), - paddingY: spaceMap('py'), - rowSpan: { - 1: 'row-span-1', - 2: 'row-span-2', - 3: 'row-span-3', - 4: 'row-span-4', - 5: 'row-span-5', - 6: 'row-span-6', - 7: 'row-span-7', - 8: 'row-span-8', - 9: 'row-span-9', - 10: 'row-span-10', - 11: 'row-span-11', - 12: 'row-span-12', - full: 'row-span-full', - }, -}; - -const generateClassNames = (propName: string, propValue: any) => { - const classNames: string[] = []; - - // If the property name is not in the valueMap, return an empty array - if (!valueMap.hasOwnProperty(propName)) { - return classNames; - } - - if (typeof propValue === 'string' || typeof propValue === 'number') { - // If the property value is a string, map it to the valueMap - const value = valueMap[propName]?.[propValue] || propValue; - classNames.push(`cu-${value}`); - } else if (typeof propValue === 'object') { - // If the property value is an object, map each key-value pair - Object.entries(propValue as Record).forEach( - ([breakpoint, value]) => { - const mappedValue = valueMap[propName]?.[value] || value; - - if (breakpoint === 'xs') { - classNames.push(`cu-${mappedValue}`); - } else { - classNames.push(`cu-${breakpoint}-${mappedValue}`); - } - }, - ); - } - return classNames; -}; - -export const getClassNames = (props: UtilityProps) => { - const classNames: string[] = []; - - Object.entries(props).forEach(([propName, propValue]) => { - classNames.push(...generateClassNames(propName, propValue)); - }); - - return classNames.filter(Boolean).join(' '); -};