Add docs for Switch

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/src/content/components/switch.mdx

@@ -0,0 +1,41 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { SwitchSnippet } from '@/snippets/stories-snippets';
+import { switchPropDefs, snippetUsage } from './switch.props';
+import { ComponentInfos } from '@/components/ComponentInfos';
+
+# Switch
+
+A control that indicates whether a setting is on or off.
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<SwitchSnippet story="Default" />}
+  code={`<Switch />`}
+/>
+
+<ComponentInfos
+  component="switch"
+  usageCode={snippetUsage}
+  classNames={['canon-Switch', 'canon-SwitchIndicator']}
+/>
+
+## API reference
+
+<PropsTable data={switchPropDefs} />
+
+## Examples
+
+### Disabled
+
+A switch can be disabled using the `isDisabled` prop.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<SwitchSnippet story="Disabled" />}
+  code={`<Switch isDisabled />`}
+/>

canon-docs/src/content/components/switch.props.ts

@@ -0,0 +1,71 @@
+import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs';
+import type { PropDef } from '@/utils/propDefs';
+
+export const switchPropDefs: Record<string, PropDef> = {
+  autoFocus: {
+    type: 'boolean',
+  },
+  defaultSelected: {
+    type: 'boolean',
+  },
+  ...classNamePropDefs,
+  isDisabled: {
+    type: 'boolean',
+  },
+  isReadOnly: {
+    type: 'boolean',
+  },
+  isSelected: {
+    type: 'boolean',
+  },
+  label: {
+    type: 'string',
+  },
+  name: {
+    type: 'string',
+  },
+  onChange: {
+    type: 'enum',
+    values: ['(isSelected: boolean) => void'],
+  },
+  onFocus: {
+    type: 'enum',
+    values: ['(e: FocusEvent<Target>) => void'],
+  },
+  onBlur: {
+    type: 'enum',
+    values: ['(e: FocusEvent<Target>) => void'],
+  },
+  onFocusChange: {
+    type: 'enum',
+    values: ['(isFocused: boolean) => void'],
+  },
+  onKeyDown: {
+    type: 'enum',
+    values: ['(e: KeyboardEvent) => void'],
+  },
+  onKeyUp: {
+    type: 'enum',
+    values: ['(e: KeyboardEvent) => void'],
+  },
+  onHoverStart: {
+    type: 'enum',
+    values: ['(e: HoverEvent) => void'],
+  },
+  onHoverEnd: {
+    type: 'enum',
+    values: ['(e: HoverEvent) => void'],
+  },
+  onHoverChange: {
+    type: 'enum',
+    values: ['(isHovered: boolean) => void'],
+  },
+  ...stylePropDefs,
+  value: {
+    type: 'string',
+  },
+};
+
+export const snippetUsage = `import { Switch } from '@backstage/canon';
+
+<Switch />`;

canon-docs/src/snippets/stories-snippets.tsx

@@ -18,6 +18,7 @@ import * as LinkStories from '../../../packages/canon/src/components/Link/Link.s
 import * as AvatarStories from '../../../packages/canon/src/components/Avatar/Avatar.stories';
 import * as CollapsibleStories from '../../../packages/canon/src/components/Collapsible/Collapsible.stories';
 import * as TabsStories from '../../../packages/canon/src/components/Tabs/Tabs.stories';
+import * as SwitchStories from '../../../packages/canon/src/components/Switch/Switch.stories';
 
 export const BoxSnippet = ({ story }: { story: keyof typeof BoxStories }) => {
   const stories = composeStories(BoxStories);
@@ -173,3 +174,14 @@ export const TabsSnippet = ({ story }: { story: keyof typeof TabsStories }) => {
 
   return StoryComponent ? <StoryComponent /> : null;
 };
+
+export const SwitchSnippet = ({
+  story,
+}: {
+  story: keyof typeof SwitchStories;
+}) => {
+  const stories = composeStories(SwitchStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};

canon-docs/src/utils/changelog.ts

@@ -17,7 +17,8 @@ export type Component =
   | 'link'
   | 'tooltip'
   | 'scrollarea'
-  | 'flex';
+  | 'flex'
+  | 'switch';
 
 export type Version = `${number}.${number}.${number}`;
 
@@ -30,6 +31,13 @@ export interface ChangelogProps {
 }
 
 export const changelog: ChangelogProps[] = [
+  {
+    components: ['switch'],
+    version: '0.5.0',
+    description: '✨ Add new `Switch` component',
+    platform: 'portal',
+    prs: ['30251'],
+  },
   {
     components: ['tabs'],
     version: '0.4.0',

canon-docs/src/utils/data.ts

@@ -116,6 +116,11 @@ export const components: Page[] = [
     slug: 'select',
     status: 'alpha',
   },
+  {
+    title: 'Switch',
+    slug: 'switch',
+    status: 'alpha',
+  },
   {
     title: 'Table',
     slug: 'table',

packages/canon/src/components/Switch/Switch.stories.tsx

@@ -30,3 +30,10 @@ export const Default: Story = {
     label: 'Switch',
   },
 };
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+};