oneslash-design-system 1.2.23 → 1.2.25

package/dist/stories/Tooltip.stories.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Tooltip from "../components/tooltip";
+import Button from "../components/button";
+import IconButton from "../components/iconButton";
+var meta = {
+    title: "Components/Tooltip",
+    component: Tooltip,
+    argTypes: {
+        title: { control: "text" },
+    },
+};
+export default meta;
+export var Default = {
+    render: function (args) { return (<div style={{ padding: "50px" }}>
+      <Tooltip {...args}>
+        <Button size="medium" type="primary" state="enabled" label="Hover me" onClickButton={function () { }}/>
+      </Tooltip>
+    </div>); },
+    args: {
+        title: "This is a tooltip",
+    },
+};
+export var OnIconButton = {
+    render: function () { return (<div style={{ padding: "50px" }}>
+      <Tooltip title="Settings">
+        <IconButton color="tertiary" state="enabled" size="medium" iconName="Settings"/>
+      </Tooltip>
+    </div>); },
+};
+export var LongText = {
+    render: function () { return (<div style={{ padding: "50px" }}>
+      <Tooltip title="This is a longer tooltip message that provides more context">
+        <Button size="medium" type="secondary" state="enabled" label="Hover for details" onClickButton={function () { }}/>
+      </Tooltip>
+    </div>); },
+};
+export var MultipleTooltips = {
+    render: function () { return (<div style={{ display: "flex", gap: "16px", padding: "50px" }}>
+      <Tooltip title="Edit">
+        <IconButton color="tertiary" state="enabled" size="medium" iconName="Edit"/>
+      </Tooltip>
+      <Tooltip title="Delete">
+        <IconButton color="tertiary" state="enabled" size="medium" iconName="Trash2"/>
+      </Tooltip>
+      <Tooltip title="Share">
+        <IconButton color="tertiary" state="enabled" size="medium" iconName="Share"/>
+      </Tooltip>
+      <Tooltip title="Download">
+        <IconButton color="tertiary" state="enabled" size="medium" iconName="Download"/>
+      </Tooltip>
+    </div>); },
+};

package/dist/stories/UserImage.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import UserImage from "../components/userImage";
+declare const meta: Meta<typeof UserImage>;
+export default meta;
+type Story = StoryObj<typeof UserImage>;
+export declare const WithInitial: Story;
+export declare const SingleName: Story;
+export declare const WithImage: Story;
+export declare const DifferentUsers: Story;
+export declare const MixedWithImages: Story;

package/dist/stories/UserImage.stories.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import UserImage from "../components/userImage";
+var meta = {
+    title: "Components/UserImage",
+    component: UserImage,
+    argTypes: {
+        userHandle: { control: "text" },
+        userImgUrl: { control: "text" },
+    },
+};
+export default meta;
+export var WithInitial = {
+    args: {
+        userHandle: "John Doe",
+    },
+};
+export var SingleName = {
+    args: {
+        userHandle: "Alice",
+    },
+};
+export var WithImage = {
+    args: {
+        userHandle: "Jane Smith",
+        userImgUrl: "https://i.pravatar.cc/150?img=1",
+    },
+};
+export var DifferentUsers = {
+    render: function () { return (<div style={{ display: "flex", gap: "8px" }}>
+      <UserImage userHandle="Alice Brown"/>
+      <UserImage userHandle="Bob Smith"/>
+      <UserImage userHandle="Carol Davis"/>
+      <UserImage userHandle="David Lee"/>
+      <UserImage userHandle="Emma Wilson"/>
+      <UserImage userHandle="Frank Miller"/>
+    </div>); },
+};
+export var MixedWithImages = {
+    render: function () { return (<div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+      <UserImage userHandle="John Doe" userImgUrl="https://i.pravatar.cc/150?img=1"/>
+      <UserImage userHandle="Alice Brown"/>
+      <UserImage userHandle="Jane Smith" userImgUrl="https://i.pravatar.cc/150?img=5"/>
+      <UserImage userHandle="Bob Wilson"/>
+      <UserImage userHandle="Carol Davis" userImgUrl="https://i.pravatar.cc/150?img=9"/>
+    </div>); },
+};

package/dist/tailwind.config.js

@@ -1,5 +1,6 @@
 var designTokens = require('./designTokens');
 var config = {
+    darkMode: 'class',
     content: [
         "./components/**/*.{js,ts,jsx,tsx,mdx}",
     ],