reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/Toast/tests/Toast.stories.js

@@ -1,20 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.edgeCases = exports.className = exports.base = exports.slots = exports.width = exports.timeout = exports.color = exports.position = exports.orientation = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Dismissible_1 = __importDefault(require("../../../components/Dismissible"));
-const Image_1 = __importDefault(require("../../../components/Image"));
-const Text_1 = __importDefault(require("../../../components/Text"));
-const Toast_1 = require("../../../components/Toast");
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-const Zap_1 = __importDefault(require("../../../icons/Zap"));
-exports.default = {
+import React from "react";
+import { expect, userEvent, within } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import Dismissible from "../../../components/Dismissible/index.js";
+import Image from "../../../components/Image/index.js";
+import Text from "../../../components/Text/index.js";
+import { ToastProvider, useToast } from "../../../components/Toast/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
     title: "Components/Toast",
     parameters: {
         iframe: {
@@ -23,255 +17,255 @@ exports.default = {
     },
 };
 const Orientation = () => {
-    const toast = (0, Toast_1.useToast)();
+    const toast = useToast();
     const props = {
-        icon: Zap_1.default,
+        icon: IconZap,
         title: "Hey!",
         text: "Event completed",
-        actionsSlot: <Button_1.default>Action</Button_1.default>,
+        actionsSlot: <Button>Action</Button>,
     };
-    return (<storybook_1.Example>
-			<storybook_1.Example.Item title="orientation: horizontal">
-				<Button_1.default onClick={() => {
+    return (<Example>
+			<Example.Item title="orientation: horizontal">
+				<Button onClick={() => {
             toast.show({ ...props });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="orientation: horizontal, without title">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="orientation: horizontal, without title">
+				<Button onClick={() => {
             toast.show({ ...props, title: undefined, timeout: 0 });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="orientation: vertical">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="orientation: vertical">
+				<Button onClick={() => {
             toast.show({ ...props, orientation: "vertical" });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>);
+				</Button>
+			</Example.Item>
+		</Example>);
 };
-exports.orientation = { name: "orientation", render: () => <Orientation /> };
+export const orientation = { name: "orientation", render: () => <Orientation /> };
 const Position = () => {
-    const toast = (0, Toast_1.useToast)();
-    return (<storybook_1.Example>
-			<storybook_1.Example.Item title="position: bottom-start">
-				<Button_1.default onClick={() => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="position: bottom-start">
+				<Button onClick={() => {
             const id = toast.show({
                 text: "Event completed",
                 position: "bottom-start",
-                actionsSlot: <Button_1.default onClick={() => toast.hide(id)}>Close</Button_1.default>,
+                actionsSlot: <Button onClick={() => toast.hide(id)}>Close</Button>,
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: bottom">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: bottom">
+				<Button onClick={() => {
             toast.show({
                 text: "Event completed",
                 position: "bottom",
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: bottom-end">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: bottom-end">
+				<Button onClick={() => {
             toast.show({
                 text: "Event completed",
                 position: "bottom-end",
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: top-start">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: top-start">
+				<Button onClick={() => {
             toast.show({
                 text: "Event completed",
                 position: "top-start",
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: top">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: top">
+				<Button onClick={() => {
             toast.show({
                 text: "Event completed",
                 position: "top",
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: top-end">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: top-end">
+				<Button onClick={() => {
             toast.show({
                 text: "Event completed",
                 position: "top-end",
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>);
+				</Button>
+			</Example.Item>
+		</Example>);
 };
-exports.position = { name: "position", render: () => <Position /> };
+export const position = { name: "position", render: () => <Position /> };
 const Color = () => {
-    const toast = (0, Toast_1.useToast)();
-    return (<storybook_1.Example>
-			<storybook_1.Example.Item title="color: neutral">
-				<Button_1.default onClick={() => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="color: neutral">
+				<Button onClick={() => {
             const id = toast.show({
                 text: "Event completed",
                 color: "neutral",
                 title: "Hey!",
-                icon: Zap_1.default,
+                icon: IconZap,
                 actionsSlot: [
-                    <Button_1.default key={1} onClick={() => toast.hide(id)}>
+                    <Button key={1} onClick={() => toast.hide(id)}>
 									Undo
-								</Button_1.default>,
-                    <Button_1.default key={2} onClick={() => toast.hide(id)}>
+								</Button>,
+                    <Button key={2} onClick={() => toast.hide(id)}>
 									Hide
-								</Button_1.default>,
+								</Button>,
                 ],
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: primary">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: primary">
+				<Button onClick={() => {
             const id = toast.show({
                 text: "Event completed",
                 color: "primary",
                 title: "Hey!",
-                icon: Zap_1.default,
+                icon: IconZap,
                 actionsSlot: [
-                    <Button_1.default key={1} onClick={() => toast.hide(id)}>
+                    <Button key={1} onClick={() => toast.hide(id)}>
 									Undo
-								</Button_1.default>,
-                    <Button_1.default key={2} onClick={() => toast.hide(id)}>
+								</Button>,
+                    <Button key={2} onClick={() => toast.hide(id)}>
 									Hide
-								</Button_1.default>,
+								</Button>,
                 ],
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: positive">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<Button onClick={() => {
             const id = toast.show({
                 text: "Event completed",
                 color: "positive",
                 title: "Hey!",
-                icon: Zap_1.default,
+                icon: IconZap,
                 actionsSlot: [
-                    <Button_1.default key={1} onClick={() => toast.hide(id)}>
+                    <Button key={1} onClick={() => toast.hide(id)}>
 									Undo
-								</Button_1.default>,
-                    <Button_1.default key={2} onClick={() => toast.hide(id)}>
+								</Button>,
+                    <Button key={2} onClick={() => toast.hide(id)}>
 									Hide
-								</Button_1.default>,
+								</Button>,
                 ],
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: critical">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<Button onClick={() => {
             const id = toast.show({
                 text: "Event completed",
                 color: "critical",
                 title: "Hey!",
-                icon: Zap_1.default,
+                icon: IconZap,
                 actionsSlot: [
-                    <Button_1.default key={1} onClick={() => toast.hide(id)}>
+                    <Button key={1} onClick={() => toast.hide(id)}>
 									Undo
-								</Button_1.default>,
-                    <Button_1.default key={2} onClick={() => toast.hide(id)}>
+								</Button>,
+                    <Button key={2} onClick={() => toast.hide(id)}>
 									Hide
-								</Button_1.default>,
+								</Button>,
                 ],
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: warning">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: warning">
+				<Button onClick={() => {
             const id = toast.show({
                 text: "Event completed",
                 color: "warning",
                 title: "Hey!",
-                icon: Zap_1.default,
+                icon: IconZap,
                 timeout: 0,
                 actionsSlot: [
-                    <Button_1.default key={1} onClick={() => toast.hide(id)}>
+                    <Button key={1} onClick={() => toast.hide(id)}>
 									Undo
-								</Button_1.default>,
-                    <Button_1.default key={2} onClick={() => toast.hide(id)}>
+								</Button>,
+                    <Button key={2} onClick={() => toast.hide(id)}>
 									Hide
-								</Button_1.default>,
+								</Button>,
                 ],
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>);
+				</Button>
+			</Example.Item>
+		</Example>);
 };
-exports.color = { name: "color", render: () => <Color /> };
+export const color = { name: "color", render: () => <Color /> };
 const Timeout = () => {
-    const toast = (0, Toast_1.useToast)();
-    return (<storybook_1.Example>
-			<storybook_1.Example.Item title="timeout: short">
-				<Button_1.default onClick={() => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="timeout: short">
+				<Button onClick={() => {
             toast.show({
                 text: "Event completed",
                 timeout: "short",
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="timeout: long">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="timeout: long">
+				<Button onClick={() => {
             toast.show({
                 text: "Event completed",
                 timeout: "long",
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="timeout: 0">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="timeout: 0">
+				<Button onClick={() => {
             toast.show({
                 text: "Event completed",
                 timeout: 0,
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>);
+				</Button>
+			</Example.Item>
+		</Example>);
 };
-exports.timeout = { name: "timeout", render: () => <Timeout /> };
+export const timeout = { name: "timeout", render: () => <Timeout /> };
 const Width = () => {
-    const toast = (0, Toast_1.useToast)();
-    const counterRef = react_1.default.useRef(0);
+    const toast = useToast();
+    const counterRef = React.useRef(0);
     const widths = ["260px", "360px", "420px"];
-    return (<storybook_1.Example>
-			<storybook_1.Example.Item title="width: literal">
-				<Button_1.default onClick={() => {
+    return (<Example>
+			<Example.Item title="width: literal">
+				<Button onClick={() => {
             const width = widths[counterRef.current % widths.length];
             counterRef.current += 1;
             toast.show({
@@ -281,10 +275,10 @@ const Width = () => {
             });
         }}>
 					Show next width toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="width: short">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="width: short">
+				<Button onClick={() => {
             toast.show({
                 title: "Short preset",
                 text: "Uses default toast width",
@@ -292,10 +286,10 @@ const Width = () => {
             });
         }}>
 					Show short preset
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="width: long">
-				<Button_1.default onClick={() => {
+				</Button>
+			</Example.Item>
+			<Example.Item title="width: long">
+				<Button onClick={() => {
             toast.show({
                 title: "Long preset",
                 text: "Uses wider banner-like toast width",
@@ -303,33 +297,33 @@ const Width = () => {
             });
         }}>
 					Show long preset
-				</Button_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>);
+				</Button>
+			</Example.Item>
+		</Example>);
 };
-exports.width = { name: "width", render: () => <Width /> };
+export const width = { name: "width", render: () => <Width /> };
 const Slots = () => {
-    const toast = (0, Toast_1.useToast)();
-    return (<storybook_1.Example>
-			<storybook_1.Example.Item title="always expanded, promotion banner">
-				<Button_1.default onClick={() => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="always expanded, promotion banner">
+				<Button onClick={() => {
             const id = toast.show({
-                children: (<View_1.default gap={3} direction="row">
-									<Image_1.default height="100px" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" borderRadius="medium" aspectRatio={1}/>
-									<View_1.default.Item grow>
-										<View_1.default gap={1}>
-											<Dismissible_1.default closeAriaLabel="Close notification" onClose={() => toast.hide(id)}>
-												<Text_1.default variant="body-2" weight="bold">
+                children: (<View gap={3} direction="row">
+									<Image height="100px" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" borderRadius="medium" aspectRatio={1}/>
+									<View.Item grow>
+										<View gap={1}>
+											<Dismissible closeAriaLabel="Close notification" onClose={() => toast.hide(id)}>
+												<Text variant="body-2" weight="bold">
 													Look at this gradient!
-												</Text_1.default>
-											</Dismissible_1.default>
-											<Text_1.default variant="body-2">
+												</Text>
+											</Dismissible>
+											<Text variant="body-2">
 												If you start using more gradients, your product will become even more
 												succesful.
-											</Text_1.default>
-										</View_1.default>
-									</View_1.default.Item>
-								</View_1.default>),
+											</Text>
+										</View>
+									</View.Item>
+								</View>),
                 color: "neutral",
                 position: "bottom-start",
                 timeout: 0,
@@ -337,50 +331,50 @@ const Slots = () => {
             });
         }}>
 					Show toast
-				</Button_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>);
+				</Button>
+			</Example.Item>
+		</Example>);
 };
-exports.slots = { name: "slots", render: () => <Slots /> };
-exports.base = {
+export const slots = { name: "slots", render: () => <Slots /> };
+export const base = {
     name: "base",
     render: () => {
-        const toast = (0, Toast_1.useToast)();
-        return (<Button_1.default onClick={() => {
+        const toast = useToast();
+        return (<Button onClick={() => {
                 const id = toast.show({
                     title: "Title",
                     text: "Text",
                     children: "Children",
                     startSlot: "Slot",
-                    actionsSlot: (<Button_1.default attributes={{ "data-testid": "trigger-id" }} onClick={() => toast.hide(id)}>
+                    actionsSlot: (<Button attributes={{ "data-testid": "trigger-id" }} onClick={() => toast.hide(id)}>
 								Trigger
-							</Button_1.default>),
+							</Button>),
                 });
             }}>
 				Show toast
-			</Button_1.default>);
+			</Button>);
     },
     play: async ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const button = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(button);
+        await userEvent.click(button);
         const title = canvas.getByText("Title");
         const text = canvas.getByText("Text");
         const children = canvas.getByText("Children");
         const slot = canvas.getByText("Slot");
         const action = canvas.getByTestId("trigger-id");
-        (0, test_1.expect)(title).toBeInTheDocument();
-        (0, test_1.expect)(text).toBeInTheDocument();
-        (0, test_1.expect)(children).toBeInTheDocument();
-        (0, test_1.expect)(slot).toBeInTheDocument();
-        (0, test_1.expect)(action).toBeInTheDocument();
+        expect(title).toBeInTheDocument();
+        expect(text).toBeInTheDocument();
+        expect(children).toBeInTheDocument();
+        expect(slot).toBeInTheDocument();
+        expect(action).toBeInTheDocument();
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => {
-        const toast = (0, Toast_1.useToast)();
-        return (<Button_1.default onClick={() => {
+        const toast = useToast();
+        return (<Button onClick={() => {
                 toast.show({
                     text: "Content",
                     attributes: { "data-testid": "test-id" },
@@ -388,50 +382,50 @@ exports.className = {
                 });
             }}>
 				Show toast
-			</Button_1.default>);
+			</Button>);
     },
     play: async ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const button = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(button);
+        await userEvent.click(button);
         const toast = canvas.getByTestId("test-id");
-        (0, test_1.expect)(toast).toBeInTheDocument();
-        (0, test_1.expect)(toast).toHaveClass("test-classname");
+        expect(toast).toBeInTheDocument();
+        expect(toast).toHaveClass("test-classname");
     },
 };
 const Multiline = () => {
-    const toast = (0, Toast_1.useToast)();
-    return (<Button_1.default onClick={() => {
+    const toast = useToast();
+    return (<Button onClick={() => {
             toast.show({
                 text: "Very long event completed notification message",
             });
         }}>
 			Show toast
-		</Button_1.default>);
+		</Button>);
 };
 const Nested = () => {
-    const toast = (0, Toast_1.useToast)();
-    return (<View_1.default height="300px" attributes={{ "data-testid": "test-container-id" }}>
-			<Button_1.default onClick={() => {
+    const toast = useToast();
+    return (<View height="300px" attributes={{ "data-testid": "test-container-id" }}>
+			<Button onClick={() => {
             toast.show({
                 text: "Notification sent",
             });
         }}>
 				Show toast
-			</Button_1.default>
-		</View_1.default>);
+			</Button>
+		</View>);
 };
-exports.edgeCases = {
+export const edgeCases = {
     name: "test: edge cases",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="Multiline, should support dynamic height">
+    render: () => (<Example>
+			<Example.Item title="Multiline, should support dynamic height">
 				<Multiline />
-			</storybook_1.Example.Item>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="Nested ToastProvider">
-				<Toast_1.ToastProvider>
+			<Example.Item title="Nested ToastProvider">
+				<ToastProvider>
 					<Nested />
-				</Toast_1.ToastProvider>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</ToastProvider>
+			</Example.Item>
+		</Example>),
 };

package/dist/components/Toast/useToast.d.ts

@@ -1,5 +1,5 @@
 declare const useToast: () => {
-    show: (toast: import("./Toast.types").ShowProps) => string;
+    show: (toast: import("./Toast.types.js").ShowProps) => string;
     hide: (id: string) => void;
     id: string;
 };

package/dist/components/Toast/useToast.js

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import ToastContext from "./Toast.context";
+import ToastContext from "./Toast.context.js";
 const useToast = () => {
     const { add, hide, id } = React.useContext(ToastContext);
     return React.useMemo(() => ({ show: add, hide, id }), [add, hide, id]);

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./ToggleButton.types";
+import type * as T from "./ToggleButton.types.js";
 declare const ToggleButton: React.FC<T.Props>;
 export default ToggleButton;