tycho-storybook 0.2.3 → 0.2.5

package/dist/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import './styles.scss';
+import "./styles.scss";
 export declare const TooltipModes: readonly ["simple", "confirmation", "delete"];
 type TooltipModes = (typeof TooltipModes)[number];
 export type Props = {
@@ -6,7 +6,7 @@ export type Props = {
     triggerOpen?: boolean;
     className?: string;
     mode?: TooltipModes;
-    placement?: 'auto-end' | 'auto-start' | 'auto' | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
+    placement?: "auto-end" | "auto-start" | "auto" | "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" | "top";
     title: string;
     desc?: string;
     cancel?: {

package/dist/Tooltip/Tooltip.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tooltip } from '@mui/material';
-import Button from '../Button';
-import Icon from '../Icon';
-import './styles.scss';
-export const TooltipModes = ['simple', 'confirmation', 'delete'];
-export default function TooltipComponent({ children, mode = 'simple', placement = 'bottom', title, desc, cancel, confirm, triggerOpen, }) {
-    const renderSimple = () => (_jsx(Tooltip, { title: title, placement: placement, arrow: true, classes: {
-            tooltip: 'ds-tooltip-simple',
-            popper: 'ds-tooltip-popper',
+import { Tooltip } from "@mui/material";
+import Button from "../Button";
+import Icon from "../Icon";
+import "./styles.scss";
+export const TooltipModes = ["simple", "confirmation", "delete"];
+export default function TooltipComponent({ children, mode = "simple", placement = "bottom", title, desc, cancel, confirm, triggerOpen, }) {
+    const renderSimple = () => (_jsx(Tooltip, { title: title, placement: placement, open: triggerOpen !== undefined ? triggerOpen : undefined, arrow: true, classes: {
+            tooltip: "ds-tooltip-simple",
+            popper: "ds-tooltip-popper",
         }, children: children }));
-    const renderInnerComplex = () => (_jsxs("div", { className: "tooltip-box", children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: mode === 'delete' ? 'delete' : 'help_center', size: "small", className: mode, filled: mode === 'confirmation' }), _jsxs("div", { className: "texts", children: [_jsx("div", { className: "title", children: title }), _jsx("div", { className: "desc", children: desc || '' })] })] }), _jsxs("div", { className: "footer", children: [cancel && (_jsx(Button, { text: cancel.label, size: "x-small", mode: "ghost", onClick: cancel.onClick, color: mode === 'delete' ? 'danger' : 'white', icon: cancel.icon })), confirm && (_jsx(Button, { text: confirm.label, size: "x-small", mode: "filled", onClick: confirm.onClick, color: mode === 'delete' ? 'danger' : 'white', icon: confirm.icon }))] })] }));
+    const renderInnerComplex = () => (_jsxs("div", { className: "tooltip-box", children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: mode === "delete" ? "delete" : "help_center", size: "small", className: mode, filled: mode === "confirmation" }), _jsxs("div", { className: "texts", children: [_jsx("div", { className: "title", children: title }), _jsx("div", { className: "desc", children: desc || "" })] })] }), _jsxs("div", { className: "footer", children: [cancel && (_jsx(Button, { text: cancel.label, size: "x-small", mode: "ghost", onClick: cancel.onClick, color: mode === "delete" ? "danger" : "white", icon: cancel.icon })), confirm && (_jsx(Button, { text: confirm.label, size: "x-small", mode: "filled", onClick: confirm.onClick, color: mode === "delete" ? "danger" : "white", icon: confirm.icon }))] })] }));
     const renderComplex = () => (_jsx(Tooltip, { classes: {
-            tooltip: 'ds-tooltip',
-            popper: 'ds-tooltip-popper',
+            tooltip: "ds-tooltip",
+            popper: "ds-tooltip-popper",
         }, title: renderInnerComplex(), placement: placement, arrow: true, open: triggerOpen !== undefined ? triggerOpen : undefined, disableFocusListener: triggerOpen !== undefined, disableHoverListener: triggerOpen !== undefined, disableTouchListener: triggerOpen !== undefined, children: children }));
-    return mode === 'simple' ? renderSimple() : renderComplex();
+    return mode === "simple" ? renderSimple() : renderComplex();
 }

package/dist/Tooltip/Tooltip.stories.d.ts

@@ -24,3 +24,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
 export declare const Complex: Story;
+export declare const SimpleWithIcon: Story;

package/dist/Tooltip/Tooltip.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import TooltipComponent, { TooltipModes } from './Tooltip';
+import Icon from '../Icon';
 const meta = {
     title: 'Components/Tooltip',
     component: TooltipComponent,
@@ -38,3 +39,10 @@ export const Complex = {
         },
     },
 };
+export const SimpleWithIcon = {
+    args: {
+        mode: 'simple',
+        title: 'Simple tooltip title',
+        children: (_jsx("span", { children: _jsx(Icon, { name: "help" }) })),
+    },
+};

package/dist/Tooltip/styles.scss

@@ -8,7 +8,6 @@
   padding: var(--spacing-100) var(--spacing-150);
   border-radius: var(--radius-100);
   @include body-medium-1;
-  margin-top: 0px !important;
 }
 
 // Arrow styles scoped to our tooltip component

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "tycho-storybook",
   "private": false,
-  "version": "0.2.3",
+  "version": "0.2.5",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/index.d.ts",  
   "exports": {
     ".": {
       "import": "./dist/index.js",