reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,388 +1,412 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.animated = exports.className = exports.onClick = exports.truncation = exports.hrefDismissible = exports.href = exports.container = exports.highlighted = exports.empty = exports.rounded = exports.onDismiss = exports.icon = exports.size = exports.color = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Avatar_1 = __importDefault(require("../../../components/Avatar"));
-const Badge_1 = __importDefault(require("../../../components/Badge"));
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Icon_1 = __importDefault(require("../../../components/Icon"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-const Checkmark_1 = __importDefault(require("../../../icons/Checkmark"));
-const Plus_1 = __importDefault(require("../../../icons/Plus"));
-exports.default = {
+import React from "react";
+import { expect, fn, userEvent, waitFor } from "storybook/test";
+import Avatar from "../../../components/Avatar/index.js";
+import Badge from "../../../components/Badge/index.js";
+import Button from "../../../components/Button/index.js";
+import Icon from "../../../components/Icon/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+import IconCheckmark from "../../../icons/Checkmark.js";
+import IconPlus from "../../../icons/Plus.js";
+export default {
     title: "Components/Badge",
-    component: Badge_1.default,
+    component: Badge,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/badge",
         },
     },
 };
-exports.color = {
+export const color = {
     name: "variant, color",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="color: neutral">
-				<View_1.default direction="row" gap={3}>
-					<Badge_1.default>Badge</Badge_1.default>
-					<Badge_1.default variant="faded">Badge</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="color: neutral">
+				<View direction="row" gap={3}>
+					<Badge>Badge</Badge>
+					<Badge variant="faded">Badge</Badge>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="color: primary">
-				<View_1.default direction="row" gap={3}>
-					<Badge_1.default color="primary">Badge</Badge_1.default>
-					<Badge_1.default variant="faded" color="primary">
+			<Example.Item title="color: primary">
+				<View direction="row" gap={3}>
+					<Badge color="primary">Badge</Badge>
+					<Badge variant="faded" color="primary">
 						Badge
-					</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+					</Badge>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="color: positive">
-				<View_1.default direction="row" gap={3}>
-					<Badge_1.default color="positive">Badge</Badge_1.default>
-					<Badge_1.default variant="faded" color="positive">
+			<Example.Item title="color: positive">
+				<View direction="row" gap={3}>
+					<Badge color="positive">Badge</Badge>
+					<Badge variant="faded" color="positive">
 						Badge
-					</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+					</Badge>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="color: critical">
-				<View_1.default direction="row" gap={3}>
-					<Badge_1.default color="critical">Badge</Badge_1.default>
-					<Badge_1.default variant="faded" color="critical">
+			<Example.Item title="color: critical">
+				<View direction="row" gap={3}>
+					<Badge color="critical">Badge</Badge>
+					<Badge variant="faded" color="critical">
 						Badge
-					</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+					</Badge>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="color: warning">
-				<View_1.default direction="row" gap={3}>
-					<Badge_1.default color="warning">Badge</Badge_1.default>
-					<Badge_1.default variant="faded" color="warning">
+			<Example.Item title="color: warning">
+				<View direction="row" gap={3}>
+					<Badge color="warning">Badge</Badge>
+					<Badge variant="faded" color="warning">
 						Badge
-					</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Badge>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: small, not rounded and rounded">
-				<View_1.default gap={3} direction="row">
-					<Badge_1.default size="small">Badge</Badge_1.default>
-					<Badge_1.default rounded size="small">
+    render: () => (<Example>
+			<Example.Item title="size: small, not rounded and rounded">
+				<View gap={3} direction="row">
+					<Badge size="small">Badge</Badge>
+					<Badge rounded size="small">
 						Badge
-					</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: medium, not rounded and rounded">
-				<View_1.default gap={3} direction="row">
-					<Badge_1.default>Badge</Badge_1.default>
-					<Badge_1.default rounded>Badge</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: large, not rounded and rounded">
-				<View_1.default gap={3} direction="row">
-					<Badge_1.default size="large">Badge</Badge_1.default>
-					<Badge_1.default rounded size="large">
+					</Badge>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: medium, not rounded and rounded">
+				<View gap={3} direction="row">
+					<Badge>Badge</Badge>
+					<Badge rounded>Badge</Badge>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: large, not rounded and rounded">
+				<View gap={3} direction="row">
+					<Badge size="large">Badge</Badge>
+					<Badge rounded size="large">
 						Badge
-					</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Badge>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.icon = {
+export const icon = {
     name: "icon",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: small">
-				<View_1.default gap={3} direction="row">
-					<Badge_1.default size="small" icon={Plus_1.default}>
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<View gap={3} direction="row">
+					<Badge size="small" icon={IconPlus}>
 						Badge
-					</Badge_1.default>
-					<Badge_1.default size="small" endIcon={Plus_1.default}>
+					</Badge>
+					<Badge size="small" endIcon={IconPlus}>
 						Badge
-					</Badge_1.default>
-					<Badge_1.default icon={Plus_1.default} size="small"/>
+					</Badge>
+					<Badge icon={IconPlus} size="small"/>
 					{/* Test with touch hitbox */}
-					<Badge_1.default icon={Plus_1.default} size="small" rounded onClick={() => { }}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: medium">
-				<View_1.default gap={3} direction="row">
-					<Badge_1.default icon={Plus_1.default}>Badge</Badge_1.default>
-					<Badge_1.default endIcon={Plus_1.default}>Badge</Badge_1.default>
-					<Badge_1.default icon={Plus_1.default}/>
-					<Badge_1.default icon={Plus_1.default} rounded onClick={() => { }}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: large">
-				<View_1.default gap={3} direction="row">
-					<Badge_1.default size="large" icon={Plus_1.default}>
+					<Badge icon={IconPlus} size="small" rounded onClick={() => { }}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: medium">
+				<View gap={3} direction="row">
+					<Badge icon={IconPlus}>Badge</Badge>
+					<Badge endIcon={IconPlus}>Badge</Badge>
+					<Badge icon={IconPlus}/>
+					<Badge icon={IconPlus} rounded onClick={() => { }}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: large">
+				<View gap={3} direction="row">
+					<Badge size="large" icon={IconPlus}>
 						Badge
-					</Badge_1.default>
-					<Badge_1.default size="large" endIcon={Plus_1.default}>
+					</Badge>
+					<Badge size="large" endIcon={IconPlus}>
 						Badge
-					</Badge_1.default>
-					<Badge_1.default icon={Plus_1.default} size="large"/>
-					<Badge_1.default icon={Plus_1.default} size="large" rounded onClick={() => { }}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Badge>
+					<Badge icon={IconPlus} size="large"/>
+					<Badge icon={IconPlus} size="large" rounded onClick={() => { }}/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.onDismiss = {
+export const onDismiss = {
     name: "onDismiss, dismissAriaLabel",
     args: {
-        handleDismiss: (0, test_1.fn)(),
+        handleDismiss: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="onDismiss">
-				<View_1.default direction="row" gap={3}>
-					<Badge_1.default onDismiss={args.handleDismiss} dismissAriaLabel="Dismiss" size="small">
+    render: (args) => (<Example>
+			<Example.Item title="onDismiss">
+				<View direction="row" gap={3}>
+					<Badge onDismiss={args.handleDismiss} dismissAriaLabel="Dismiss" size="small">
 						Badge
-					</Badge_1.default>
+					</Badge>
 
-					<Badge_1.default onDismiss={args.handleDismiss} dismissAriaLabel="Dismiss" size="medium">
+					<Badge onDismiss={args.handleDismiss} dismissAriaLabel="Dismiss" size="medium">
 						Badge
-					</Badge_1.default>
+					</Badge>
 
-					<Badge_1.default onDismiss={args.handleDismiss} dismissAriaLabel="Dismiss" size="large">
+					<Badge onDismiss={args.handleDismiss} dismissAriaLabel="Dismiss" size="large">
 						Badge
-					</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Badge>
+				</View>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas, args }) => {
         const dismissTrigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(dismissTrigger);
-        (0, test_1.expect)(dismissTrigger).toHaveAccessibleName("Dismiss");
-        (0, test_1.expect)(args.handleDismiss).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleDismiss).toHaveBeenCalledWith();
+        await userEvent.click(dismissTrigger);
+        expect(dismissTrigger).toHaveAccessibleName("Dismiss");
+        expect(args.handleDismiss).toHaveBeenCalledTimes(1);
+        expect(args.handleDismiss).toHaveBeenCalledWith();
     },
 };
-exports.rounded = {
+export const rounded = {
     name: "rounded",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="rounded, all variants">
-				<View_1.default direction="row" gap={3}>
-					<Badge_1.default rounded>Badge</Badge_1.default>
-					<Badge_1.default rounded variant="faded">
+    render: () => (<Example>
+			<Example.Item title="rounded, all variants">
+				<View direction="row" gap={3}>
+					<Badge rounded>Badge</Badge>
+					<Badge rounded variant="faded">
 						Badge
-					</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["rounded, all sizes, color: critical", "one character, renders as circle"]}>
-				<View_1.default direction="row" gap={3}>
-					<Badge_1.default rounded color="critical" size="small">
+					</Badge>
+				</View>
+			</Example.Item>
+			<Example.Item title={["rounded, all sizes, color: critical", "one character, renders as circle"]}>
+				<View direction="row" gap={3}>
+					<Badge rounded color="critical" size="small">
 						2
-					</Badge_1.default>
-					<Badge_1.default rounded color="critical">
+					</Badge>
+					<Badge rounded color="critical">
 						2
-					</Badge_1.default>
-					<Badge_1.default rounded color="critical" size="large">
+					</Badge>
+					<Badge rounded color="critical" size="large">
 						2
-					</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Badge>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.empty = {
+export const empty = {
     name: "empty",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="empty, not rounded, all sizes, color: critical">
-				<View_1.default direction="row" gap={3}>
-					<Badge_1.default size="small" color="critical"/>
-					<Badge_1.default color="critical"/>
-					<Badge_1.default size="large" color="critical"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="empty, rounded, all sizes, color: critical">
-				<View_1.default direction="row" gap={3}>
-					<Badge_1.default rounded size="small" color="critical"/>
-					<Badge_1.default rounded color="critical"/>
-					<Badge_1.default rounded size="large" color="critical"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="empty, rounded, all sizes, color: neutral">
-				<View_1.default direction="row" gap={3}>
-					<Badge_1.default rounded size="small" color="neutral"/>
-					<Badge_1.default rounded/>
-					<Badge_1.default rounded size="large"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="empty, not rounded, all sizes, color: critical">
+				<View direction="row" gap={3}>
+					<Badge size="small" color="critical"/>
+					<Badge color="critical"/>
+					<Badge size="large" color="critical"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="empty, rounded, all sizes, color: critical">
+				<View direction="row" gap={3}>
+					<Badge rounded size="small" color="critical"/>
+					<Badge rounded color="critical"/>
+					<Badge rounded size="large" color="critical"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="empty, rounded, all sizes, color: neutral">
+				<View direction="row" gap={3}>
+					<Badge rounded size="small" color="neutral"/>
+					<Badge rounded/>
+					<Badge rounded size="large"/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.highlighted = {
+export const highlighted = {
     name: "highlighted",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="highlighted, color: neutral">
-				<View_1.default gap={3} direction="row">
-					<Badge_1.default highlighted color="primary">
+    render: () => (<Example>
+			<Example.Item title="highlighted, color: neutral">
+				<View gap={3} direction="row">
+					<Badge highlighted color="primary">
 						Badge
-					</Badge_1.default>
-					<Badge_1.default highlighted>Badge</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Badge>
+					<Badge highlighted>Badge</Badge>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.container = {
+export const container = {
     name: "container",
     render: () => {
-        const [hidden, setHidden] = react_1.default.useState(false);
-        return (<storybook_1.Example title={<Button_1.default onClick={() => setHidden(!hidden)}>Toggle badges</Button_1.default>}>
-				<storybook_1.Example.Item title="position: top-end">
-					<Badge_1.default.Container>
-						<Badge_1.default color="primary" hidden={hidden}>
+        const [hidden, setHidden] = React.useState(false);
+        return (<Example title={<Button onClick={() => setHidden(!hidden)}>Toggle badges</Button>}>
+				<Example.Item title="position: top-end">
+					<Badge.Container>
+						<Badge color="primary" hidden={hidden}>
 							5
-						</Badge_1.default>
-						<Avatar_1.default initials="A" squared/>
-					</Badge_1.default.Container>
-				</storybook_1.Example.Item>
+						</Badge>
+						<Avatar initials="A" squared/>
+					</Badge.Container>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="position: bottom-end">
-					<Badge_1.default.Container position="bottom-end">
-						<Badge_1.default color="primary" hidden={hidden}>
+				<Example.Item title="position: bottom-end">
+					<Badge.Container position="bottom-end">
+						<Badge color="primary" hidden={hidden}>
 							5
-						</Badge_1.default>
-						<Avatar_1.default initials="A" squared/>
-					</Badge_1.default.Container>
-				</storybook_1.Example.Item>
+						</Badge>
+						<Avatar initials="A" squared/>
+					</Badge.Container>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="position: top-end, rounded, multiple digits">
-					<Badge_1.default.Container>
-						<Badge_1.default size="small" color="primary" rounded hidden={hidden}>
+				<Example.Item title="position: top-end, rounded, multiple digits">
+					<Badge.Container>
+						<Badge size="small" color="primary" rounded hidden={hidden}>
 							123
-						</Badge_1.default>
-						<Avatar_1.default initials="A" squared/>
-					</Badge_1.default.Container>
-				</storybook_1.Example.Item>
+						</Badge>
+						<Avatar initials="A" squared/>
+					</Badge.Container>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="position: top-end, rounded, empty">
-					<Badge_1.default.Container>
-						<Badge_1.default color="primary" rounded hidden={hidden}/>
-						<Avatar_1.default initials="A" squared/>
-					</Badge_1.default.Container>
-				</storybook_1.Example.Item>
+				<Example.Item title="position: top-end, rounded, empty">
+					<Badge.Container>
+						<Badge color="primary" rounded hidden={hidden}/>
+						<Avatar initials="A" squared/>
+					</Badge.Container>
+				</Example.Item>
 
-				<storybook_1.Example.Item title={["position: top-end, overlap", "should cover the circular avatar"]}>
-					<Badge_1.default.Container overlap>
-						<Badge_1.default size="small" color="primary" rounded hidden={hidden}>
+				<Example.Item title={["position: top-end, overlap", "should cover the circular avatar"]}>
+					<Badge.Container overlap>
+						<Badge size="small" color="primary" rounded hidden={hidden}>
 							2
-						</Badge_1.default>
-						<Avatar_1.default initials="A"/>
-					</Badge_1.default.Container>
-				</storybook_1.Example.Item>
+						</Badge>
+						<Avatar initials="A"/>
+					</Badge.Container>
+				</Example.Item>
 
-				<storybook_1.Example.Item title={["position: bottom-end, overlap", "should cover the circular avatar"]}>
-					<Badge_1.default.Container overlap position="bottom-end">
-						<Badge_1.default size="small" color="primary" rounded hidden={hidden}>
+				<Example.Item title={["position: bottom-end, overlap", "should cover the circular avatar"]}>
+					<Badge.Container overlap position="bottom-end">
+						<Badge size="small" color="primary" rounded hidden={hidden}>
 							2
-						</Badge_1.default>
-						<Avatar_1.default initials="A"/>
-					</Badge_1.default.Container>
-				</storybook_1.Example.Item>
+						</Badge>
+						<Avatar initials="A"/>
+					</Badge.Container>
+				</Example.Item>
 
-				<storybook_1.Example.Item title={["position: top-end, overlap", "should cover the icon"]}>
-					<Badge_1.default.Container overlap position="top-end">
-						<Badge_1.default size="small" color="primary" rounded hidden={hidden}/>
-						<Icon_1.default svg={Checkmark_1.default} size={5}/>
-					</Badge_1.default.Container>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+				<Example.Item title={["position: top-end, overlap", "should cover the icon"]}>
+					<Badge.Container overlap position="top-end">
+						<Badge size="small" color="primary" rounded hidden={hidden}/>
+						<Icon svg={IconCheckmark} size={5}/>
+					</Badge.Container>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const cutout = {
+    name: "container, cutout",
+    render: () => {
+        const [hidden, setHidden] = React.useState(false);
+        const [count, setCount] = React.useState(5);
+        return (<Example title={<View direction="row" gap={2}>
+						<Button onClick={() => setHidden(!hidden)}>Toggle badge</Button>
+						<Button onClick={() => setCount(count === 5 ? 128 : 5)}>Toggle count</Button>
+					</View>}>
+				<Example.Item title="cutout, on a colored background">
+					<View backgroundColor="primary-faded" padding={6} align="start">
+						<Badge.Container overlap attributes={{ "data-testid": "container" }}>
+							<Badge color="primary" rounded hidden={hidden}>
+								{count}
+							</Badge>
+							<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" size={16}/>
+						</Badge.Container>
+					</View>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvas }) => {
+        const container = canvas.getByTestId("container");
+        const content = container.lastElementChild;
+        await waitFor(() => {
+            expect(container.style.getPropertyValue("--rs-badge-width")).not.toBe("");
+        });
+        expect(getComputedStyle(content).maskImage).toContain("gradient");
     },
 };
-exports.href = {
+export const href = {
     name: "href",
-    render: () => (<Badge_1.default href="https://reshaped.so" dismissAriaLabel="Dismiss">
+    render: () => (<Badge href="https://reshaped.so" dismissAriaLabel="Dismiss">
 			Badge
-		</Badge_1.default>),
+		</Badge>),
     play: async ({ canvas }) => {
         const link = canvas.getByRole("link");
-        (0, test_1.expect)(link).toHaveAttribute("href", "https://reshaped.so");
+        expect(link).toHaveAttribute("href", "https://reshaped.so");
     },
 };
-exports.hrefDismissible = {
+export const hrefDismissible = {
     name: "test: href, onDismiss",
     args: {
-        handleDismiss: (0, test_1.fn)(),
+        handleDismiss: fn(),
     },
-    render: (args) => (<Badge_1.default href="#badge-dismiss" onDismiss={args.handleDismiss} dismissAriaLabel="Dismiss">
+    render: (args) => (<Badge href="#badge-dismiss" onDismiss={args.handleDismiss} dismissAriaLabel="Dismiss">
 			Badge
-		</Badge_1.default>),
+		</Badge>),
     play: async ({ canvas, args }) => {
         const initialHash = window.location.hash;
         const dismissTrigger = canvas.getByRole("button", { name: "Dismiss" });
-        (0, test_1.expect)(canvas.getByRole("link")).toHaveAttribute("href", "#badge-dismiss");
-        await test_1.userEvent.click(dismissTrigger);
-        (0, test_1.expect)(args.handleDismiss).toHaveBeenCalledTimes(1);
+        expect(canvas.getByRole("link")).toHaveAttribute("href", "#badge-dismiss");
+        await userEvent.click(dismissTrigger);
+        expect(args.handleDismiss).toHaveBeenCalledTimes(1);
         // Dismissing the badge shouldn't follow the link
-        (0, test_1.expect)(window.location.hash).toBe(initialHash);
+        expect(window.location.hash).toBe(initialHash);
     },
 };
-exports.truncation = {
+export const truncation = {
     name: "test: truncation",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title={["truncation", "text is truncated, badge is not wider than 200px"]}>
-				<View_1.default width="200px" align="start" gap={3} attributes={{ "data-testid": "root" }}>
-					<Badge_1.default attributes={{ "data-testid": "badge" }}>
+    render: () => (<Example>
+			<Example.Item title={["truncation", "text is truncated, badge is not wider than 200px"]}>
+				<View width="200px" align="start" gap={3} attributes={{ "data-testid": "root" }}>
+					<Badge attributes={{ "data-testid": "badge" }}>
 						Badge with a very long text that should get truncated
-					</Badge_1.default>
-					<Badge_1.default icon={Plus_1.default} endIcon={Plus_1.default} attributes={{ "data-testid": "badge" }}>
+					</Badge>
+					<Badge icon={IconPlus} endIcon={IconPlus} attributes={{ "data-testid": "badge" }}>
 						Badge with a very long text that should get truncated
-					</Badge_1.default>
-					<Badge_1.default onDismiss={() => { }} dismissAriaLabel="Dismiss" attributes={{ "data-testid": "badge" }}>
+					</Badge>
+					<Badge onDismiss={() => { }} dismissAriaLabel="Dismiss" attributes={{ "data-testid": "badge" }}>
 						Badge with a very long text that should get truncated
-					</Badge_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Badge>
+				</View>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
         const badges = canvas.getAllByTestId("badge");
         badges.forEach((badge) => {
             // Badge is not growing wider than its parent
-            (0, test_1.expect)(badge.getBoundingClientRect().width).toBeLessThanOrEqual(200);
+            expect(badge.getBoundingClientRect().width).toBeLessThanOrEqual(200);
             // Badge text is rendered on a single line and gets clipped
             const text = badge.querySelector("div");
-            (0, test_1.expect)(text.scrollWidth).toBeGreaterThan(text.clientWidth);
-            (0, test_1.expect)(getComputedStyle(text).textOverflow).toBe("ellipsis");
+            expect(text.scrollWidth).toBeGreaterThan(text.clientWidth);
+            expect(getComputedStyle(text).textOverflow).toBe("ellipsis");
         });
     },
 };
-exports.onClick = {
+export const onClick = {
     name: "onClick",
     args: {
-        handleClick: (0, test_1.fn)(),
+        handleClick: fn(),
     },
-    render: (args) => <Badge_1.default onClick={args.handleClick}>Badge</Badge_1.default>,
+    render: (args) => <Badge onClick={args.handleClick}>Badge</Badge>,
     play: async ({ canvas, args }) => {
         const button = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: button }));
+        await userEvent.click(button);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: button }));
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Badge_1.default color="primary" className="test-classname" attributes={{ id: "test-id" }}/>
+			<Badge color="primary" className="test-classname" attributes={{ id: "test-id" }}/>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };
-exports.animated = {
+export const animated = {
     name: "test: animated",
     render: () => {
-        const [active, setActive] = react_1.default.useState(false);
-        return (<Badge_1.default onClick={() => setActive(!active)} color={active ? "primary" : "neutral"}>
+        const [active, setActive] = React.useState(false);
+        return (<Badge onClick={() => setActive(!active)} color={active ? "primary" : "neutral"}>
 				Badge
-			</Badge_1.default>);
+			</Badge>);
     },
 };