Merge pull request #49 from storybookjs/feat/overall-improvements

Feat/overall improvements
storybookjs · Jun 12, 2023 · 12818b4 · 12818b4
2 parents da2499e + bf4ea29
commit 12818b4
Show file tree

Hide file tree

Showing 30 changed files with 391 additions and 231 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, FC } from "react";
+import React, { ComponentProps, FC, forwardRef } from "react";
 import { styled } from "@storybook/theming";
 
 export interface ButtonProps extends ComponentProps<"button"> {
@@ -61,15 +61,13 @@ const StyledButton = styled.button<{ variant: ButtonProps["variant"] }>`
   }
 `;
 
-export const Button: FC<ButtonProps> = ({
-  children,
-  onClick,
-  variant = "primary",
-  ...rest
-}) => {
-  return (
-    <StyledButton onClick={onClick} variant={variant} {...rest}>
-      {children}
-    </StyledButton>
-  );
-};
+export const Button: FC<ButtonProps> = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, onClick, variant = 'primary', ...rest }, ref) => {
+    return (
+      <StyledButton ref={ref} onClick={onClick} variant={variant} {...rest}>
+        {children}
+      </StyledButton>
+    );
+  }
+);
+
diff --git a/src/components/SyntaxHighlighter/SyntaxHighlighter.stories.tsx b/src/components/SyntaxHighlighter/SyntaxHighlighter.stories.tsx
@@ -58,8 +58,9 @@ export default meta;`,
 
 export const Warning: Story = {
   args: {
+    primary: true,
+    label: 'Delete now',
     backgroundColor: 'red',
-    label: 'Delete now'
   }
 };`,
     },

diff --git a/src/features/GuidedTour/GuidedTour.tsx b/src/features/GuidedTour/GuidedTour.tsx
@@ -34,7 +34,10 @@ export function GuidedTour({
           target: "#example-button--warning",
           title: "Congratulations!",
           content:
-            "You just created your first story. You nailed the basics. Continue setting up your project and start writing stories for your components.",
+            <>
+              You just created your first story. You nailed the basics. <br/>
+              Continue setting up your project and start writing stories for your components.
+            </>,
           placement: "right",
           disableOverlay: true,
           disableBeacon: true,
@@ -95,8 +98,8 @@ export function GuidedTour({
           title: "Congratulations!",
           content: (
             <>
-              You've learned how to control your stories interactively. Now:
-              let's explore how to write your first story.
+              You've learned how to control your stories interactively.<br/>
+              Now: let's explore how to write your first story.
               <Confetti
                 numberOfPieces={800}
                 recycle={false}

diff --git a/src/features/WelcomeModal/WelcomeModal.tsx b/src/features/WelcomeModal/WelcomeModal.tsx
@@ -33,7 +33,7 @@ export const WelcomeModal: FC<WelcomeModalProps> = ({
             <StorybookLogo />
             <Title>Welcome to Storybook</Title>
             <Description>
-              Storybook helps you develop UI components. Learn the basics in a
+              Storybook helps you develop UI components faster. Learn the basics in a
               few simple steps.
             </Description>
             <Button style={{ marginTop: 4 }} onClick={onProceed}>

diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
@@ -146,7 +146,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                     <div>
                       <h3>Imports</h3>
                       <p>
-                        First, import Meta and StoryObj for type safety and
+                        First, import <SpanHighlight>Meta</SpanHighlight> and <SpanHighlight>StoryObj</SpanHighlight> for type safety and
                         autocompletion in TypeScript stories.
                       </p>
                       <p>
@@ -224,7 +224,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                         Args are inputs that are passed to the component, which
                         Storybook uses to render the component in different
                         states. In React, args = props. They also specify the
-                        initial control settings for the story.
+                        initial control values for the story.
                       </p>
                       <Image
                         alt="Args mapped to their controls in Storybook"
@@ -279,7 +279,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                             isCompleted={warningButtonStatus?.data}
                             index={3}
                           >
-                            Paste it at the bottom of the file
+                            Paste it at the bottom of the file and save
                           </ListItem>
                         </List>
                       </div>

diff --git a/src/features/WriteStoriesModal/code/javascript.tsx b/src/features/WriteStoriesModal/code/javascript.tsx
@@ -36,8 +36,8 @@ export default [
 export const Warning = {
   args: {
     primary: true,
+    label: 'Delete now',
     backgroundColor: 'red',
-    label: 'Delete now'
   }
 };`,
     },

diff --git a/src/features/WriteStoriesModal/code/nextjs-typescript.tsx b/src/features/WriteStoriesModal/code/nextjs-typescript.tsx
@@ -40,8 +40,8 @@ export default [
 export const Warning: Story = {
   args: {
     primary: true,
+    label: 'Delete now',
     backgroundColor: 'red',
-    label: 'Delete now'
   }
 };`,
     },

diff --git a/src/features/WriteStoriesModal/code/typescript.tsx b/src/features/WriteStoriesModal/code/typescript.tsx
@@ -40,8 +40,8 @@ export default [
 export const Warning: Story = {
   args: {
     primary: true,
+    label: 'Delete now',
     backgroundColor: 'red',
-    label: 'Delete now'
   }
 };`,
     },