Merge pull request #456 from AppQuality/update-stories

Update stories

src/stories/buttons/button-group/index.stories.tsx

@@ -2,7 +2,7 @@ import { Meta as ComponentMeta, StoryFn as Story } from "@storybook/react";
 import { IButtonGroupProps } from "@zendeskgarden/react-buttons";
 import { ButtonGroup } from ".";
 import { Button } from "../button";
-import { Basic, Default } from "../button/index.stories";
+import { Default as Basic, Primary as Default } from "../button/index.stories";
 
 const Template: Story<IButtonGroupProps & { items: any[] }> = ({
   items,

src/stories/notifications/global-alert/index.stories.tsx

@@ -1,38 +1,56 @@
-import { Meta as ComponentMeta, StoryFn as Story } from "@storybook/react";
-import {
-  GlobalAlert as UgGlobalAlert,
-  GlobalAlertProps
-} from ".";
-import { Anchor } from "../../buttons/anchor";
-
-const GlobalAlertTemplate: Story<GlobalAlertProps> = ({ ...props }) => (
-  <UgGlobalAlert {...props}>
-  </UgGlobalAlert>
-);
-
-export const GlobalAlert = GlobalAlertTemplate.bind({});
-GlobalAlert.args = {
-  type: "info",
-  title: "Account update",
-  dismissable: true,
-  onClose: () => {alert('dismissed')},
-  cta: {
-    label: "Find out more",
-    onClick: () => {alert('clicked')}
-  },
-  message: <>
-    Your account will automatically update in 5 days.{' '}
-    <Anchor href="#" isExternal>
-      Find out more
-    </Anchor>
-  </>
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { GlobalAlert } from ".";
+import { Placeholder } from "../../placeholder";
+
+type Args = React.ComponentProps<typeof GlobalAlert> & {
+  messageContent?: "accountupdate" | "placeholder";
 };
 
-export default {
-  title: "Molecules/Notification",
-  component: UgGlobalAlert,
-  parameters: {
-    // Sets a delay for the component's stories
-    chromatic: { delay: 300 },
+const meta = {
+  title: "Molecules/Notification/GlobalAlert",
+  component: GlobalAlert,
+
+  render: ({ messageContent, ...args }) => {
+    const message =
+      messageContent === "accountupdate" ? (
+        <>
+          Your account will automatically update in 5 days.{" "}
+          <a href="#" target="_blank">
+            Find out more
+          </a>
+        </>
+      ) : (
+        <Placeholder />
+      );
+    return <GlobalAlert {...args} message={message} />;
+  },
+
+  args: {
+    type: "info",
+    title: "Account update",
+    dismissable: true,
+    onClose: () => {
+      alert("dismissed");
+    },
+    cta: {
+      label: "Find out more",
+      onClick: () => {
+        alert("clicked");
+      },
+    },
   },
-} as ComponentMeta<typeof UgGlobalAlert>;
+} satisfies Meta<Args>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AccountUpdate: Story = {
+  args: {
+    messageContent: "accountupdate",
+  },
+};
+
+export const Generic: Story = {
+  args: {},
+};

src/stories/placeholder/index.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta } from "@storybook/react";
+
+import { Placeholder } from ".";
+
+type Args = React.ComponentProps<typeof Placeholder> & {};
+
+const meta = {
+  title: "Utils/Placeholder",
+  component: Placeholder,
+
+  args: {},
+} satisfies Meta<Args>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+};

src/stories/placeholder/index.tsx

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  padding: 10px;
+  background-color: #ccc;
+  .content {
+    padding: 10px;
+    background-color: #fff;
+  }
+`;
+
+const Placeholder = () => {
+  return (
+    <Wrapper>
+      <div className="content">PLACEHOLDER</div>
+    </Wrapper>
+  );
+};
+
+export { Placeholder };

src/stories/transcript/index.stories.tsx

@@ -23,7 +23,7 @@ type StoryArgs = {
   translations?: SentenceType[];
   onAddObservation?: (editor: Editor) => void;
   onSetCurrentTime?: (
-    setCurrentTime: (time: number) => void
+    setCurrentTime: (time: number) => void,
   ) => (time: number) => void;
   showSearch?: boolean;
   themeExtension?: typeof Theme;
@@ -248,9 +248,6 @@ WithCustomTheme.args = {
         <span style={{ background: "blue", color: "white" }}>{children}</span>
       );
     },
-    wordWrapper: ({ children }) => {
-      return <span style={{ textDecoration: "underline" }}>{children}</span>;
-    },
     observationWrapper: ({ title, color, children, observations }) => {
       const background = color + "50";
       return (