@wireapp/react-ui-kit 9.32.0 → 9.33.1

package/lib/Text/Paragraph.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LeadParagraph = exports.TruncatedParagraph = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Paragraph_1 = require("./Paragraph");
+const meta = {
+    title: 'Typography/Paragraph',
+    component: Paragraph_1.Paragraph,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const LOREM_IPSUM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
+exports.Default = {
+    args: {
+        children: LOREM_IPSUM,
+    },
+};
+exports.TruncatedParagraph = {
+    args: {
+        children: LOREM_IPSUM,
+        noWrap: true,
+        truncate: true,
+    },
+};
+exports.LeadParagraph = {
+    render: () => (0, jsx_runtime_1.jsx)(Paragraph_1.Lead, { children: LOREM_IPSUM }),
+};

package/lib/Text/Text.stories.d.ts

@@ -0,0 +1,32 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./Text").TextProps<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        color: {
+            control: "color";
+        };
+        fontSize: {
+            control: "text";
+        };
+        textTransform: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const BoldText: Story;
+export declare const SmallText: Story;
+export declare const MutedText: Story;
+export declare const UppercaseText: Story;
+export declare const LargeText: Story;
+export declare const ColoredText: Story;
+export declare const CustomFontSize: Story;
+//# sourceMappingURL=Text.stories.d.ts.map

package/lib/Text/Text.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.stories.d.ts","sourceRoot":"","sources":["../../src/Text/Text.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAMrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;CAmBmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC"}

package/lib/Text/Text.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFontSize = exports.ColoredText = exports.LargeText = exports.UppercaseText = exports.MutedText = exports.SmallText = exports.BoldText = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Text_1 = require("./Text");
+const Identity_1 = require("../Identity");
+const meta = {
+    title: 'Typography/Text',
+    component: Text_1.Text,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'color',
+        },
+        fontSize: {
+            control: 'text',
+        },
+        textTransform: {
+            control: 'select',
+            options: ['none', 'uppercase', 'lowercase', 'capitalize'],
+        },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: 'Default Text',
+    },
+};
+exports.BoldText = {
+    render: () => (0, jsx_runtime_1.jsx)(Text_1.Bold, { children: "Bold Text" }),
+};
+exports.SmallText = {
+    render: () => (0, jsx_runtime_1.jsx)(Text_1.Small, { children: "Small Text" }),
+};
+exports.MutedText = {
+    render: () => (0, jsx_runtime_1.jsx)(Text_1.Muted, { children: "Muted Text" }),
+};
+exports.UppercaseText = {
+    render: () => (0, jsx_runtime_1.jsx)(Text_1.Uppercase, { children: "Uppercase Text" }),
+};
+exports.LargeText = {
+    render: () => (0, jsx_runtime_1.jsx)(Text_1.Large, { children: "Large Text" }),
+};
+exports.ColoredText = {
+    args: {
+        children: 'Colored Text',
+        color: Identity_1.COLOR.RED,
+    },
+};
+exports.CustomFontSize = {
+    args: {
+        children: 'Custom Size Text',
+        fontSize: '24px',
+    },
+};

package/lib/Text/TextLink.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("./TextLink").TextLinkProps<HTMLAnchorElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        color: {
+            control: "color";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InText: Story;
+export declare const CustomColor: Story;
+//# sourceMappingURL=TextLink.stories.d.ts.map

package/lib/Text/TextLink.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextLink.stories.d.ts","sourceRoot":"","sources":["../../src/Text/TextLink.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAOrD,QAAA,MAAM,IAAI;;;;;;;;;;;;CAYuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC"}

package/lib/Text/TextLink.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomColor = exports.InText = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Text_1 = require("./Text");
+const TextLink_1 = require("./TextLink");
+const colors_v2_1 = require("../Identity/colors-v2");
+const meta = {
+    title: 'Typography/TextLink',
+    component: TextLink_1.TextLink,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'color',
+        },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: 'Default TextLink',
+        href: '#',
+    },
+};
+exports.InText = {
+    render: () => ((0, jsx_runtime_1.jsxs)(Text_1.Text, { children: ["This is a paragraph with a ", (0, jsx_runtime_1.jsx)(TextLink_1.TextLink, { href: "#", children: "text link" }), " inside."] })),
+};
+exports.CustomColor = {
+    args: {
+        children: 'Custom Color Link',
+        color: colors_v2_1.COLOR_V2.RED,
+        href: '#',
+    },
+};

package/lib/Text/Title.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("./Title").TitleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        color: {
+            control: "color";
+        };
+        fontSize: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const CustomColor: Story;
+export declare const CustomSize: Story;
+export declare const NotCentered: Story;
+//# sourceMappingURL=Title.stories.d.ts.map

package/lib/Text/Title.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.stories.d.ts","sourceRoot":"","sources":["../../src/Text/Title.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAMrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAeoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC"}

package/lib/Text/Title.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotCentered = exports.CustomSize = exports.CustomColor = exports.Default = void 0;
+const Title_1 = require("./Title");
+const Identity_1 = require("../Identity");
+const meta = {
+    title: 'Typography/Title',
+    component: Title_1.Title,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'color',
+        },
+        fontSize: {
+            control: 'text',
+        },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        children: 'Default Title',
+    },
+};
+exports.CustomColor = {
+    args: {
+        children: 'Colored Title',
+        color: Identity_1.COLOR.RED,
+    },
+};
+exports.CustomSize = {
+    args: {
+        children: 'Custom Size Title',
+        fontSize: '3rem',
+    },
+};
+exports.NotCentered = {
+    args: {
+        children: 'Left-aligned Title',
+        center: false,
+    },
+};

package/package.json

@@ -20,10 +20,19 @@
     "@babel/preset-env": "7.26.7",
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
-    "@emotion/babel-preset-css-prop": "^11.10.0",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@emotion/babel-preset-css-prop": "^11.12.0",
     "@emotion/jest": "11.13.0",
     "@emotion/react": "^11.10.4",
-    "@hot-loader/react-dom": "17.0.2",
+    "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/addon-interactions": "^8.5.2",
+    "@storybook/addon-onboarding": "^8.5.2",
+    "@storybook/addon-themes": "^8.5.2",
+    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
+    "@storybook/blocks": "^8.5.2",
+    "@storybook/react": "^8.5.2",
+    "@storybook/react-webpack5": "^8.5.2",
+    "@storybook/test": "^8.5.2",
     "@swc/core": "^1.3.10",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "6.6.3",
@@ -33,17 +42,16 @@
     "@types/node": "^22.0.0",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
-    "@types/webpack-env": "1.18.6",
+    "@types/webpack-env": "1.18.8",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "jest": "^29.2.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-helmet": "6.1.0",
-    "react-hot-loader": "4.13.1",
-    "react-styleguidist": "13.1.4",
     "react-test-renderer": "18.3.1",
     "rimraf": "6.0.1",
+    "storybook": "^8.5.2",
     "typescript": "^5.0.4",
     "webpack": "^5.74.0"
   },
@@ -60,15 +68,15 @@
   },
   "scripts": {
     "build": "yarn clean && tsc",
-    "build:styleguide": "styleguidist build",
+    "build:storybook": "storybook build",
     "clean": "rimraf lib",
     "dist": "yarn build",
-    "start": "styleguidist server",
+    "start": "storybook dev -p 6006",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.32.0",
-  "gitHead": "cc81dc2eb1fd226a538b2025c37e4f9e3dfc6c56"
+  "version": "9.33.1",
+  "gitHead": "dbcc1b8a380b1efb3d7abd19cf6859f58f796d38"
 }