diff --git a/package.json b/package.json index 49c44c3..dab4a86 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ }, "dependencies": { "@storybook/telemetry": "next", + "@storybook/icons": "^1.2.3", "react-confetti": "^6.1.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c4bf4fe..b77ebc3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@storybook/icons': + specifier: ^1.2.3 + version: 1.2.3(react-dom@18.2.0)(react@18.2.0) '@storybook/telemetry': specifier: next version: 8.0.0-alpha.14 @@ -3207,7 +3210,6 @@ packages: dependencies: react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - dev: true /@storybook/jest@0.2.3: resolution: {integrity: sha512-ov5izrmbAFObzKeh9AOC5MlmFxAcf0o5i6YFGae9sDx6DGh6alXsRM+chIbucVkUwVHVlSzdfbLDEFGY/ShaYw==} @@ -7102,7 +7104,6 @@ packages: loose-envify: 1.4.0 react: 18.2.0 scheduler: 0.23.0 - dev: true /react-element-to-jsx-string@15.0.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==} @@ -7542,7 +7543,6 @@ packages: resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} dependencies: loose-envify: 1.4.0 - dev: true /scroll@3.0.1: resolution: {integrity: sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg==} diff --git a/src/components/List/ListItem/ListItem.tsx b/src/components/List/ListItem/ListItem.tsx index 16f4ceb..6293211 100644 --- a/src/components/List/ListItem/ListItem.tsx +++ b/src/components/List/ListItem/ListItem.tsx @@ -1,10 +1,10 @@ import React from "react"; -import { Icons } from "@storybook/components"; import { ListItemContentWrapper, ListItemIndexWrapper, ListItemWrapper, } from "./ListItem.styled"; +import { CheckIcon } from "@storybook/icons"; interface ListItemProps { children: React.ReactNode; @@ -20,7 +20,7 @@ export const ListItem = ({ children, index, isCompleted }: ListItemProps) => { isCompleted={isCompleted} > {isCompleted ? ( - + ) : ( index )} diff --git a/src/features/WelcomeModal/WelcomeModal.styled.tsx b/src/features/WelcomeModal/WelcomeModal.styled.tsx index 432e212..2152741 100644 --- a/src/features/WelcomeModal/WelcomeModal.styled.tsx +++ b/src/features/WelcomeModal/WelcomeModal.styled.tsx @@ -1,4 +1,4 @@ -import { Icons } from "@storybook/components"; +import { ArrowRightIcon } from "@storybook/icons"; import { keyframes, styled } from "@storybook/theming"; export const ModalContentWrapper = styled.div` @@ -51,7 +51,7 @@ export const SkipButton = styled.button` } `; -export const StyledIcon = styled(Icons)` +export const StyledIcon = styled(ArrowRightIcon)` margin-left: 2px; height: 10px; `; diff --git a/src/features/WelcomeModal/WelcomeModal.tsx b/src/features/WelcomeModal/WelcomeModal.tsx index c2c1236..5e69e1d 100644 --- a/src/features/WelcomeModal/WelcomeModal.tsx +++ b/src/features/WelcomeModal/WelcomeModal.tsx @@ -43,7 +43,7 @@ export const WelcomeModal: FC = ({ Skip tour - + diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.tsx index 82c7451..c54850f 100644 --- a/src/features/WriteStoriesModal/WriteStoriesModal.tsx +++ b/src/features/WriteStoriesModal/WriteStoriesModal.tsx @@ -1,7 +1,6 @@ import React, { useCallback, useState, type FC } from "react"; import { Button } from "../../components/Button/Button"; import { Modal } from "../../components/Modal/Modal"; -import { Icons } from "@storybook/components"; import useMeasure from "react-use-measure"; import { Background, @@ -31,6 +30,7 @@ import { API, AddonStore } from "@storybook/manager-api"; import { STORYBOOK_ADDON_ONBOARDING_CHANNEL } from "../../constants"; import { useTheme } from "@storybook/theming"; import { CodeSnippets } from "./code/types"; +import { BookmarkHollowIcon, CrossIcon } from "@storybook/icons"; // TODO: Add warning if backdropBoundary && !warningButtonStatus?.data is not true. // backdropBoundary && !warningButtonStatus?.data @@ -71,19 +71,19 @@ export const WriteStoriesModal: FC = ({ const warningButtonStatus = useGetWarningButtonStatus( step === "customStory", api, - addonsStore + addonsStore, ); const backdropBoundary = useGetBackdropBoundary( "syntax-highlighter-backdrop", - step === "customStory" + step === "customStory", ); - const isJavascript = codeSnippets?.language === 'javascript' + const isJavascript = codeSnippets?.language === "javascript"; const copyWarningStory = () => { const warningContent = codeSnippets.code[3][0].snippet; navigator.clipboard.writeText( - warningContent.replace("// Copy the code below", "") + warningContent.replace("// Copy the code below", ""), ); setWarningStoryCopied(true); }; @@ -133,14 +133,13 @@ export const WriteStoriesModal: FC = ({
<ModalTitle> - <Icons icon="bookmarkhollow" width={13} /> + <BookmarkHollowIcon width={13} /> <span>How to write a story</span> </ModalTitle> - = ({ <>

Imports

- {isJavascript ? (

- Import a component. In this case, the Button - component. -

) : <>

- First, import Meta and{" "} - StoryObj for type safety - and autocompletion in TypeScript stories. -

+ {isJavascript ? (

- Next, import a component. In this case, the Button + Import a component. In this case, the Button component. -

} +

+ ) : ( + <> +

+ First, import Meta{" "} + and StoryObj for type + safety and autocompletion in TypeScript stories. +

+

+ Next, import a component. In this case, the Button + component. +

+ + )}