tycho-storybook 0.2.2 → 0.2.4

package/dist/SelectField/SelectField.d.ts

@@ -1,5 +1,5 @@
-import { UseFormReturn } from 'react-hook-form';
-import './styles.scss';
+import { UseFormReturn } from "react-hook-form";
+import "./styles.scss";
 export type SelectItem = {
     label: string;
     value: string | number;

package/dist/SelectField/SelectField.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
-import { FormControl, InputAdornment, InputLabel, MenuItem, Select, } from '@mui/material';
-import { ThemeProvider, useTheme } from '@mui/material/styles';
-import cx from 'classnames';
-import { useEffect, useState } from 'react';
-import { Controller } from 'react-hook-form';
-import Icon from '../Icon';
-import { selectFieldTheme } from './SelectFieldTheme';
-import './styles.scss';
+import { FormControl, InputAdornment, InputLabel, MenuItem, Select, } from "@mui/material";
+import { ThemeProvider, useTheme } from "@mui/material/styles";
+import cx from "classnames";
+import { useEffect, useState } from "react";
+import { Controller } from "react-hook-form";
+import Icon from "../Icon";
+import { selectFieldTheme } from "./SelectFieldTheme";
+import "./styles.scss";
 export default function SelectField({ className, attr, label, createdForm, disabled, title, placeholder, options = [], required, showEndAdornment = true, onChange, maxHeight = 400, multiple = false, }) {
     const outerTheme = useTheme();
     const [active, setActive] = useState(false);
     const [focus, setFocus] = useState(false);
     const [mouseOver, setMouseOver] = useState(false);
     const hasError = () => createdForm.formState.errors[attr];
-    const getClassNames = cx('ds-select-text', className, {
+    const getClassNames = cx("ds-select-text", className, {
         disabled: disabled,
     });
     useEffect(() => {
@@ -27,28 +27,28 @@ export default function SelectField({ className, attr, label, createdForm, disab
     }, [focus, mouseOver]);
     return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: attr, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: selectFieldTheme(outerTheme), children: [_jsxs(FormControl, { fullWidth: true, variant: "filled", disabled: disabled, children: [_jsx(InputLabel, { shrink: true, sx: {
                                     color: disabled
-                                        ? '#BEBFC1'
+                                        ? "#BEBFC1"
                                         : hasError()
-                                            ? '#C6080A'
+                                            ? "#C6080A"
                                             : active
-                                                ? '#1C83F4'
-                                                : '#000000',
-                                }, children: `${label}${required ? ' *' : ''}` }), _jsxs(Select, { ...field, value: multiple
+                                                ? "#1C83F4"
+                                                : "#000000",
+                                }, children: `${label}${required ? " *" : ""}` }), _jsxs(Select, { ...field, value: multiple
                                     ? Array.isArray(field.value)
                                         ? field.value
                                         : []
-                                    : (field.value ?? ''), multiple: multiple, fullWidth: true, displayEmpty: true, required: required, disabled: disabled, variant: "filled", color: "primary", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
+                                    : (field.value ?? ""), multiple: multiple, fullWidth: true, displayEmpty: true, required: required, disabled: disabled, variant: "filled", color: "primary", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
                                     let value = event.target.value;
                                     if (multiple) {
                                         // If empty option is chosen, clear the array
-                                        if (Array.isArray(value) && value.includes('')) {
+                                        if (Array.isArray(value) && value.includes("")) {
                                             value = [];
                                         }
                                     }
                                     else {
                                         // For single-select, empty string means clear
-                                        if (value === '') {
-                                            value = '';
+                                        if (value === "") {
+                                            value = "";
                                         }
                                     }
                                     field.onChange(value);
@@ -61,17 +61,17 @@ export default function SelectField({ className, attr, label, createdForm, disab
                                     },
                                 }, sx: {
                                     borderColor: disabled
-                                        ? '#BEBFC1'
+                                        ? "#BEBFC1"
                                         : hasError()
-                                            ? '#C6080A!important'
+                                            ? "#C6080A!important"
                                             : active
-                                                ? '#1C83F4!important'
-                                                : '#BEBFC1!important',
+                                                ? "#1C83F4!important"
+                                                : "#BEBFC1!important",
                                     backgroundColor: disabled
-                                        ? '#BEBFC1!important'
-                                        : '#FFFFFF!important',
-                                }, endAdornment: showEndAdornment && (_jsx(InputAdornment, { position: "end", children: field.value ? (_jsx(Icon, { name: "close", size: "small", className: disabled ? 'd-none' : '', onClick: () => {
-                                            field.onChange('');
+                                        ? "#BEBFC1!important"
+                                        : "#FFFFFF!important",
+                                }, endAdornment: showEndAdornment && (_jsx(InputAdornment, { position: "end", children: field.value ? (_jsx(Icon, { name: "close", size: "small", className: disabled ? "d-none" : "", onClick: () => {
+                                            field.onChange("");
                                             onChange && onChange(attr, null);
-                                        } })) : (_jsx(Icon, { name: "info", size: "small", className: `icon-info ${disabled ? 'd-none' : ''}` })) })), children: [_jsx(MenuItem, { value: "", children: placeholder }), options.map((option, idx) => (_jsx(MenuItem, { value: option.value, children: option.label }, idx.valueOf())))] })] }), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] })) }) }));
+                                        } })) : (_jsx(Icon, { name: "info", size: "small", className: `icon-info ${disabled ? "d-none" : ""}` })) })), children: [_jsx(MenuItem, { value: "", children: placeholder }), options.map((option, idx) => (_jsx(MenuItem, { value: option.value, children: option.label }, idx.valueOf())))] })] }), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] })) }) }));
 }

package/dist/Tooltip/Tooltip.js

@@ -7,10 +7,12 @@ 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',
         }, 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 renderComplex = () => (_jsx(Tooltip, { classes: {
             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();
 }

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

@@ -1,3 +1,20 @@
+// Scoped MUI Tooltip styles - only applied to tooltips with our custom classes
+.ds-tooltip-popper .MuiTooltip-tooltip {
+  display: flex;
+  align-items: center;
+  background-color: var(--layer-tooltip) !important;
+  height: 40px;
+  max-width: 280px;
+  padding: var(--spacing-100) var(--spacing-150);
+  border-radius: var(--radius-100);
+  @include body-medium-1;
+}
+
+// Arrow styles scoped to our tooltip component
+.ds-tooltip-popper .MuiTooltip-arrow {
+  color: var(--layer-tooltip) !important;
+}
+
 .ds-tooltip {
   display: flex;
   align-items: center;

package/dist/styles/main.scss

@@ -6,27 +6,6 @@
 @import 'base/spacing';
 @import 'base/tokens';
 
-html,
-body,
-#root {
-  font-family: 'Work Sans', sans-serif;
-}
-
-.MuiTooltip-tooltip {
-  display: flex;
-  align-items: center;
-  background-color: var(--layer-tooltip) !important;
-  height: 40px;
-  max-width: 280px;
-  padding: var(--spacing-100) var(--spacing-150);
-  border-radius: var(--radius-100);
-  @include body-medium-1;
-}
-
-.MuiTooltip-arrow {
-  color: var(--layer-tooltip) !important;
-}
-
 .pointer {
   cursor: pointer;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-storybook",
   "private": false,
-  "version": "0.2.2",
+  "version": "0.2.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {