release 20241216

src/index.tsx

@@ -6,7 +6,7 @@ import { GlobalStyle } from "./stories/shared/globalStyle";
 export * from "./stories/accordions";
 
 // --- Alerts ---
-export * from "./stories/alerts";
+export * from "./stories/notifications/alerts";
 
 // --- Avatar ---
 export * from "./stories/avatar";

src/stories/modals/header.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta } from "@storybook/react";
+import { ComponentProps } from "react";
+import { Modal } from ".";
+import { Placeholder } from "../placeholder";
+
+type Args = ComponentProps<typeof Modal.Header> & {};
+
+const meta = {
+  title: "Molecules/Modals/Header",
+  component: Modal,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/BSagFENAXxMy2UpnQVa0mI/UNGUESS-%7C-Garden?node-id=102%3A124",
+    },
+  },
+  render: (args) => {
+    return (
+      <Modal>
+        <Modal.Header {...args}>
+          {args.title ? args.title : <Placeholder />}
+        </Modal.Header>
+      </Modal>
+    );
+  },
+  argTypes: {
+    title: {
+      control: {
+        type: "text",
+      },
+    },
+    isDanger: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  args: {
+    title: undefined,
+    isDanger: false,
+  },
+} satisfies Meta<Args>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+};
+
+export const Danger = {
+  args: {
+    title: "Cool title",
+    isDanger: true,
+  },
+};

src/stories/modals/index.stories.tsx

@@ -1,18 +1,38 @@
-import { Meta as ComponentMeta, StoryFn as Story } from "@storybook/react";
-import { FooterItem, Modal, ModalClose } from ".";
+import { Meta } from "@storybook/react";
+import { FooterItem, Modal } from ".";
 import { Button } from "../buttons/button";
+import { Placeholder } from "../placeholder";
 import { ModalArgs } from "./_types";
 
 interface ModalStoryArgs extends ModalArgs {
-  content: string | any;
-  title: string;
-  isDanger?: boolean;
+  content?: string | any;
+  title?: string;
+  footer?: string;
 }
 const longContent =
   "The tang of the untainted, fresh and free sea air was like a cool, " +
   "quieting thought, and the shells and pebbles and the seaweed with tiny living " +
   "creatures attached to it never lost their fascination for me.";
 
+const Footer = () => {
+  return (
+    <>
+      <FooterItem>
+        <Button isBasic>Secondary</Button>
+      </FooterItem>
+      <FooterItem>
+        <Button
+          isPrimary
+          onClick={() => {
+            alert("Ahoy!");
+          }}
+        >
+          Primary
+        </Button>
+      </FooterItem>
+    </>
+  );
+};
 const customContent = [
   "ELEMENT 1",
   "ELEMENT 2",
@@ -21,91 +41,67 @@ const customContent = [
   "ELEMENT 5",
 ].map((el) => <li>{el}</li>);
 
-const design = {
-  type: "figma",
-  url: "https://www.figma.com/file/BSagFENAXxMy2UpnQVa0mI/UNGUESS-%7C-Garden?node-id=102%3A124",
-};
-
 const defaultArgs: ModalStoryArgs = {
-  isDanger: false,
-  title: "Cool title",
   isLarge: false,
   isExtraLarge: false,
-  content: longContent,
   onClose: (e) => {
     alert("Close clicked");
     console.log(e);
   },
 };
 
-const Template: Story<ModalStoryArgs> = (args) => {
-  const { isDanger } = args;
+type Args = ModalStoryArgs & {};
 
-  return (
-    <Modal {...args}>
-      <Modal.Header isDanger={isDanger}>{args.title}</Modal.Header>
-      <Modal.Body>{args.content}</Modal.Body>
-      <Modal.Footer>
-        <FooterItem>
-          <Button isBasic onClick={args.onClose}>
-            Secondary
-          </Button>
-        </FooterItem>
-        <FooterItem>
-          <Button
-            isPrimary
-            {...(isDanger && { isDanger: true })}
-            onClick={() => {
-              alert("Ahoy!");
-            }}
-          >
-            Primary
-          </Button>
-        </FooterItem>
-      </Modal.Footer>
-      <ModalClose aria-label="Close modal" />
-    </Modal>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  ...defaultArgs,
-};
-Default.parameters = {
-  design,
-};
-
-export const Danger = Template.bind({});
-Danger.args = {
-  ...defaultArgs,
-  isDanger: true,
-};
+const meta = {
+  title: "Molecules/Modals",
+  component: Modal,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/BSagFENAXxMy2UpnQVa0mI/UNGUESS-%7C-Garden?node-id=102%3A124",
+    },
+  },
+  render: (args) => {
+    return (
+      <Modal {...args}>
+        <Modal.Header>
+          {args.title ? args.title : <Placeholder display="block" />}
+        </Modal.Header>
+        <Modal.Body>
+          {args.content ? args.content : <Placeholder display="block" />}
+        </Modal.Body>
+        <Modal.Footer>
+          {args.footer ? args.footer : <Placeholder display="block" />}
+        </Modal.Footer>
+      </Modal>
+    );
+  },
+  args: {},
+} satisfies Meta<Args>;
 
-Danger.parameters = {
-  design,
-};
+export default meta;
 
-export const Large = Template.bind({});
-Large.args = {
-  ...defaultArgs,
-  isLarge: true,
-};
-Large.parameters = {
-  design,
+export const Default = {
+  args: {
+    ...defaultArgs,
+  },
 };
 
-export const WithCustomContent = Template.bind({});
-WithCustomContent.args = {
-  ...defaultArgs,
-  content: <ul>{customContent}</ul>,
+export const Large = {
+  args: {
+    ...defaultArgs,
+    title: "Cool title",
+    content: longContent,
+    footer: <Footer />,
+    isLarge: true,
+  },
 };
 
-export default {
-  title: "Molecules/Modals",
-  component: Modal,
-  parameters: {
-    // Sets a delay for the component's stories
-    chromatic: { delay: 300 },
+export const WithCustomContent = {
+  args: {
+    ...defaultArgs,
+    title: "Cool title",
+    content: <ul>{customContent}</ul>,
+    footer: <Footer />,
   },
-} as ComponentMeta<typeof Modal>;
+};

src/stories/alerts/index.stories.tsx → src/stories/notifications/alerts/index.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta as ComponentMeta, StoryFn as Story } from "@storybook/react";
-import { Alert } from ".";
-import { AlertArgs } from "./_types";
+import { Alert, AlertArgs } from ".";
 
 const Template: Story<AlertArgs> = (args) => {
   return (
@@ -25,7 +24,7 @@ Default.parameters = {
 };
 
 export default {
-  title: "Atoms/Alerts",
+  title: "Molecules/Notification/Alerts",
   component: Alert,
   parameters: {
     // Sets a delay for the component's stories

src/stories/notifications/alerts/index.tsx

@@ -0,0 +1,11 @@
+import { Alert as ZendeskAlert, Title as ZendeskTitle, Close as ZendeskClose } from '@zendeskgarden/react-notifications';
+import { IAlertProps } from '@zendeskgarden/react-notifications';
+
+
+export interface AlertArgs extends IAlertProps {}
+
+const Alert = (props: AlertArgs) => <ZendeskAlert {...props}/>;
+Alert.Title = ZendeskTitle;
+Alert.Close = ZendeskClose;
+
+export { Alert };

src/stories/placeholder/index.tsx

@@ -1,22 +1,21 @@
 import styled from "styled-components";
 
-const Wrapper = styled.span`
-  display: inline-block;
+const Wrapper = styled.span<{
+  display: NonNullable<React.CSSProperties["display"]>;
+}>`
+  display: ${(props) => props.display};
   padding: 10px;
-  background-color: #ccc;
-  .content {
-    display: inline-block;
-    padding: 10px;
-    background-color: #fff;
-  }
+  border: 10px solid #e0e0e0;
+  background-color: #fff;
+  width: ${(props) => (["block"].includes(props.display) ? "100%" : "auto")};
 `;
 
-const Placeholder = () => {
-  return (
-    <Wrapper>
-      <span className="content">PLACEHOLDER</span>
-    </Wrapper>
-  );
+const Placeholder = ({
+  display = "inline-block",
+}: {
+  display?: React.CSSProperties["display"];
+}) => {
+  return <Wrapper display={display}>PLACEHOLDER</Wrapper>;
 };
 
 export { Placeholder };

src/stories/theme/components.ts

@@ -5,6 +5,7 @@ import { colors } from "./colors";
 import { fontWeights } from "./fontWeights";
 import { palette } from "./palette";
 import { getColor } from "./utils";
+import { AlertArgs } from "../notifications/alerts";
 
 export const components = {
   ...DEFAULT_THEME.components,
@@ -41,6 +42,13 @@ export const components = {
       }),
     };
   },
+  "notifications.alert": ({ type }: AlertArgs) => {
+    return {
+      ...(type === "success" && {
+        backgroundColor: getColor(colors.successHue, 10),
+      }),
+    };
+  },
   "text.primary": () => ({
     color: getColor(colors.primaryHue, 600),
   }),

src/stories/theme/palette.ts

@@ -64,6 +64,7 @@ export const palette = {
     "900": "#734A15",
   },
   "green": {
+    "10": "#EBF5F2",
     "50": "#B3E8D9",
     "100": "#80D9C0",
     "200": "#66D1B3",