- );
+ if (story === 'Primary') return ;
+ if (story === 'Sizes') return ;
+
+ return null;
};
diff --git a/canon-docs/src/snippets/text.tsx b/canon-docs/src/snippets/text.tsx
index 4d39cbf6dd..e721dcc094 100644
--- a/canon-docs/src/snippets/text.tsx
+++ b/canon-docs/src/snippets/text.tsx
@@ -1,94 +1,24 @@
'use client';
-import { Flex, Text } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
-export const TextPreview = () => {
- 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 in
- the painting?
-
- );
-};
+export const TextSnippet = ({ story }: { story: string }) => {
+ const stories = composeStories(TextStories);
+ const [isReady, setIsReady] = useState(false);
-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
- 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?
-
-
- );
-};
+ useEffect(() => {
+ setIsReady(true);
+ }, [story]);
-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
- 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?
-
-
- );
-};
+ if (!isReady) return null;
-export const TextResponsive = () => {
- return (
- Responsive text
- );
-};
+ if (story === 'Default') return ;
+ if (story === 'AllVariants') return ;
+ if (story === 'AllWeights') return ;
+ if (story === 'Responsive') return ;
+ if (story === 'Playground') return ;
-export const TextPlayground = () => {
- return (
-
- Subtitle
-
- 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?
-
- Body
-
- 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?
-
- Caption
-
- 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?
-
- Label
-
- 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?
-
-
- );
+ return null;
};
diff --git a/packages/canon/src/components/Heading/Heading.stories.tsx b/packages/canon/src/components/Heading/Heading.stories.tsx
index 1357bde877..b4c0ab7546 100644
--- a/packages/canon/src/components/Heading/Heading.stories.tsx
+++ b/packages/canon/src/components/Heading/Heading.stories.tsx
@@ -42,7 +42,7 @@ export const Title1: Story = {
export const AllVariants: Story = {
render: () => (
-
+ DisplayTitle 1Title 2
@@ -70,8 +70,7 @@ export const CustomTag: Story = {
export const Playground: Story = {
render: () => (
-
- All variants
+ DisplayTitle 1Title 2
diff --git a/packages/canon/src/components/Icon/icons.ts b/packages/canon/src/components/Icon/icons.ts
index 8cc862459c..615c918db7 100644
--- a/packages/canon/src/components/Icon/icons.ts
+++ b/packages/canon/src/components/Icon/icons.ts
@@ -130,4 +130,4 @@ export const icons: IconMap = {
youtube: RiYoutubeLine,
'zoom-in': RiZoomInLine,
'zoom-out': RiZoomOutLine,
-};
+} as const;
diff --git a/packages/canon/src/components/Icon/types.ts b/packages/canon/src/components/Icon/types.ts
index 5cbdb8e147..4870a1afc4 100644
--- a/packages/canon/src/components/Icon/types.ts
+++ b/packages/canon/src/components/Icon/types.ts
@@ -15,6 +15,7 @@
*/
import { ReactNode } from 'react';
+import type { RemixiconComponentType } from '@remixicon/react';
/** @public */
export type IconNames =
@@ -74,7 +75,7 @@ export type IconNames =
| 'zoom-out';
/** @public */
-export type IconMap = Partial>;
+export type IconMap = Partial>;
/** @public */
export type IconProps = {
@@ -92,5 +93,5 @@ export interface IconContextProps {
/** @public */
export interface IconProviderProps {
children?: ReactNode;
- overrides?: Partial>;
+ overrides?: Partial>;
}