From adb3e03265aab6ebb3c13aba953f50ab4d13ffc3 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 7 Jan 2025 15:50:35 +0000
Subject: [PATCH] Fixes imports

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../components/IconLibrary/IconLibrary.tsx    |  6 +-
 packages/canon/report.api.md                  | 86 +++++++++++++++++++
 packages/canon/src/components/Button/Docs.mdx |  2 +-
 .../canon/src/components/Checkbox/Docs.mdx    |  2 +-
 packages/canon/src/components/Icon/Docs.mdx   |  6 +-
 packages/canon/src/contexts/canon.tsx         | 12 +--
 packages/canon/src/index.ts                   |  5 ++
 7 files changed, 106 insertions(+), 13 deletions(-)

diff --git a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
index e32f4c08a4..1d517f7a98 100644
--- a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
+++ b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx
@@ -16,15 +16,15 @@
 import React from 'react';
 import { Icon } from '@backstage/canon';
 import type { IconNames } from '@backstage/canon';
-import { defaultIcons } from '../../../src/components/Icon/icons';
+import { icons } from '../../../src/components/Icon/icons';
 import { Text } from '../Text/Text';
 
 export const IconLibrary = () => {
-  const icons = Object.keys(defaultIcons);
+  const iconsList = Object.keys(icons);
 
   return (
     <div className="icon-library">
-      {icons.map(icon => (
+      {iconsList.map(icon => (
         <div key={icon} className="icon-library-item">
           <div className="icon-library-item-icon">
             <Icon name={icon as IconNames} />
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index e725d0ac8b..fc1f773b4b 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -5,9 +5,11 @@
 ```ts
 /// <reference types="react" />
 
+import type { CSSProperties } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { default as React_2 } from 'react';
 import * as React_3 from 'react';
+import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 
 // @public (undocumented)
@@ -84,6 +86,8 @@ export interface ButtonProps {
   // (undocumented)
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
   // (undocumented)
+  style?: React.CSSProperties;
+  // (undocumented)
   variant?:
     | 'primary'
     | 'secondary'
@@ -91,6 +95,29 @@ export interface ButtonProps {
     | Partial<Record<Breakpoint, 'primary' | 'secondary' | 'tertiary'>>;
 }
 
+// @public (undocumented)
+export interface CanonContextProps {
+  // (undocumented)
+  breakpoint: Breakpoint;
+  // (undocumented)
+  getResponsiveValue: (
+    value: string | Partial<Record<Breakpoint, string>>,
+  ) => string;
+  // (undocumented)
+  icons: IconMap;
+}
+
+// @public (undocumented)
+export const CanonProvider: (props: CanonProviderProps) => React_2.JSX.Element;
+
+// @public (undocumented)
+export interface CanonProviderProps {
+  // (undocumented)
+  children?: ReactNode;
+  // (undocumented)
+  overrides?: Partial<Record<IconNames, React_2.ComponentType>>;
+}
+
 // @public (undocumented)
 export const Checkbox: React_2.ForwardRefExoticComponent<
   CheckboxProps & React_2.RefAttributes<HTMLButtonElement>
@@ -200,6 +227,33 @@ export interface GridProps extends SpaceProps {
   style?: React.CSSProperties;
 }
 
+// @public (undocumented)
+export const Heading: React_2.ForwardRefExoticComponent<
+  HeadingProps & React_2.RefAttributes<HTMLHeadingElement>
+>;
+
+// @public (undocumented)
+export interface HeadingProps {
+  // (undocumented)
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  // (undocumented)
+  children: React.ReactNode;
+  // (undocumented)
+  variant?:
+    | 'display'
+    | 'title1'
+    | 'title2'
+    | 'title3'
+    | 'title4'
+    | 'title5'
+    | Partial<
+        Record<
+          Breakpoint,
+          'display' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5'
+        >
+      >;
+}
+
 // @public (undocumented)
 export const Icon: (props: IconProps) => React_2.JSX.Element;
 
@@ -222,8 +276,11 @@ export type IconNames =
   | 'chevronRight'
   | 'chevronUp'
   | 'cloud'
+  | 'externalLink'
   | 'heart'
+  | 'moon'
   | 'plus'
+  | 'sun'
   | 'trash';
 
 // @public (undocumented)
@@ -232,6 +289,9 @@ export type IconProps = {
   size?: number;
 };
 
+// @public (undocumented)
+export const icons: IconMap;
+
 // @public (undocumented)
 export const Inline: ForwardRefExoticComponent<
   InlineProps & RefAttributes<HTMLElement>
@@ -374,6 +434,32 @@ export const TableRow: React_3.ForwardRefExoticComponent<
     React_3.RefAttributes<HTMLTableRowElement>
 >;
 
+// @public (undocumented)
+const Text_2: React_2.ForwardRefExoticComponent<
+  TextProps & React_2.RefAttributes<HTMLParagraphElement>
+>;
+export { Text_2 as Text };
+
+// @public (undocumented)
+export interface TextProps {
+  // (undocumented)
+  children: ReactNode;
+  // (undocumented)
+  style?: CSSProperties;
+  // (undocumented)
+  variant?:
+    | 'subtitle'
+    | 'body'
+    | 'caption'
+    | 'label'
+    | Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
+  // (undocumented)
+  weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
+}
+
+// @public (undocumented)
+export const useCanon: () => CanonContextProps;
+
 // @public (undocumented)
 export interface UtilityProps extends SpaceProps {
   // (undocumented)
diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx
index e4b069cbcd..ae90b5fd80 100644
--- a/packages/canon/src/components/Button/Docs.mdx
+++ b/packages/canon/src/components/Button/Docs.mdx
@@ -10,7 +10,7 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
 <Title type="h1">Button</Title>
 <Text>A button component that can be used to trigger actions.</Text>
 
-<Canvas of={ButtonStories.Primary} />
+<Canvas of={ButtonStories.Variants} />
 
 <Title type="h2">Usage</Title>
 <Source code={`import { Button } from "@backstage/canon";
diff --git a/packages/canon/src/components/Checkbox/Docs.mdx b/packages/canon/src/components/Checkbox/Docs.mdx
index 12e13abf03..9826708888 100644
--- a/packages/canon/src/components/Checkbox/Docs.mdx
+++ b/packages/canon/src/components/Checkbox/Docs.mdx
@@ -10,7 +10,7 @@ import { PropsTable } from '../../../docs/components/PropsTable';
 <Title type="h1">Checkbox</Title>
 <Text>A checkbox component that can be used to trigger actions.</Text>
 
-<Canvas of={CheckboxStories.Primary} />
+<Canvas of={CheckboxStories.Default} />
 
 <Title type="h2">Usage</Title>
 <Source code={`import { Checkbox } from "@backstage/canon";
diff --git a/packages/canon/src/components/Icon/Docs.mdx b/packages/canon/src/components/Icon/Docs.mdx
index 463fe60133..41c296424c 100644
--- a/packages/canon/src/components/Icon/Docs.mdx
+++ b/packages/canon/src/components/Icon/Docs.mdx
@@ -2,7 +2,7 @@ import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
 import * as IconStories from './Icon.stories';
 import { Title, Text } from '../../../docs/components';
 import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
-import { defaultIcons } from './icons';
+import { icons } from './icons';
 
 <Meta of={IconStories} />
 
@@ -12,7 +12,7 @@ import { defaultIcons } from './icons';
 
 <Text>Icons are used to represent an action or a state.</Text>
 
-<Canvas of={IconStories.Primary} />
+<Canvas of={IconStories.Default} />
 
 <Title type="h2">Usage</Title>
 <Source code={`import { Icon } from "@backstage/canon";
@@ -27,7 +27,7 @@ import { defaultIcons } from './icons';
 <PropsTable
   data={{
     name: {
-      type: Object.keys(defaultIcons),
+      type: Object.keys(icons),
       responsive: false,
     },
     size: {
diff --git a/packages/canon/src/contexts/canon.tsx b/packages/canon/src/contexts/canon.tsx
index a8c21e8fa9..5a0e6b4315 100644
--- a/packages/canon/src/contexts/canon.tsx
+++ b/packages/canon/src/contexts/canon.tsx
@@ -16,11 +16,12 @@
 
 import React, { createContext, useContext, ReactNode } from 'react';
 import { IconMap, IconNames } from '../components/Icon/types';
-import { defaultIcons } from '../components/Icon/icons';
+import { icons } from '../components/Icon/icons';
 import { useMediaQuery } from '../hooks/useMediaQuery';
 import type { Breakpoint } from '../types';
 
-interface CanonContextProps {
+/** @public */
+export interface CanonContextProps {
   icons: IconMap;
   breakpoint: Breakpoint;
   getResponsiveValue: (
@@ -29,12 +30,13 @@ interface CanonContextProps {
 }
 
 const CanonContext = createContext<CanonContextProps>({
-  icons: defaultIcons,
+  icons,
   breakpoint: 'md',
   getResponsiveValue: () => '',
 });
 
-interface CanonProviderProps {
+/** @public */
+export interface CanonProviderProps {
   children?: ReactNode;
   overrides?: Partial<Record<IconNames, React.ComponentType>>;
 }
@@ -44,7 +46,7 @@ export const CanonProvider = (props: CanonProviderProps) => {
   const { children, overrides } = props;
 
   // Merge provided overrides with default icons
-  const combinedIcons = { ...defaultIcons, ...overrides };
+  const combinedIcons = { ...icons, ...overrides };
 
   const isBreakpointSm = useMediaQuery(`(min-width: 640px)`);
   const isBreakpointMd = useMediaQuery(`(min-width: 768px)`);
diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts
index 23432295e2..f6cca4bed6 100644
--- a/packages/canon/src/index.ts
+++ b/packages/canon/src/index.ts
@@ -20,12 +20,17 @@
  * @packageDocumentation
  */
 
+// Providers
+export * from './contexts/canon';
+
 // Layout components
 export * from './components/Box';
 export * from './components/Grid';
 export * from './components/Stack';
 export * from './components/Inline';
 export * from './components/Container';
+export * from './components/Text';
+export * from './components/Heading';
 
 // UI components
 export * from './components/Button';