@dotss/ui 1.0.3 → 1.0.5

package/components/Tooltip/Tooltip.stories.tsx

@@ -1,205 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Icon from '@components/Icon';
-
-import Tooltip from './Tooltip';
-
-const meta = {
-  title: 'Component/Tooltip',
-  component: Tooltip,
-  parameters: {
-    layout: 'centered'
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: 'text'
-      }
-    },
-    placement: {
-      options: [
-        'bottom-left',
-        'bottom-center',
-        'bottom-right',
-        'left-top',
-        'left-middle',
-        'left-bottom',
-        'top-left',
-        'top-center',
-        'top-right',
-        'right-top',
-        'right-middle',
-        'right-bottom'
-      ],
-      control: {
-        type: 'select'
-      }
-    },
-    color: {
-      options: ['primary', 'secondary'],
-      control: {
-        type: 'radio'
-      }
-    }
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Tooltip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const WithTitleBody: Story = {
-  render: (props) => {
-    const [open, setOpen] = useState(false);
-    const handleOpen = () => {
-      setOpen((prev) => !prev);
-    };
-
-    useEffect(() => {
-      setOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <Tooltip
-        open={open}
-        onClose={handleOpen}
-        title={props.title}
-        body={props.body}
-        closer={props.closer}
-        color={props.color}
-        placement={props.placement}
-        endAdornment={props.endAdornment}
-      >
-        <Icon name="TooltipFill" size="medium" onClick={handleOpen} />
-      </Tooltip>
-    );
-  },
-  args: {
-    title: 'Tooltip Title',
-    body: 'Tooltip Body',
-    open: false,
-    closer: true,
-    color: 'primary',
-    placement: 'bottom-right',
-    endAdornment: ''
-  }
-};
-
-export const WithBody: Story = {
-  render: (props) => {
-    const [open, setOpen] = useState(false);
-    const handleOpen = () => {
-      setOpen((prev) => !prev);
-    };
-
-    useEffect(() => {
-      setOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <Tooltip
-        open={open}
-        onClose={handleOpen}
-        title={props.title}
-        body={props.body}
-        closer={props.closer}
-        color={props.color}
-        placement={props.placement}
-        endAdornment={props.endAdornment}
-      >
-        <Icon name="TooltipFill" size="medium" onClick={handleOpen} />
-      </Tooltip>
-    );
-  },
-  args: {
-    title: '',
-    body: 'Tooltip Body',
-    open: true,
-    closer: true,
-    color: 'primary',
-    placement: 'left-middle',
-    endAdornment: ''
-  }
-};
-
-export const EndAdornment: Story = {
-  render: (props) => {
-    const [open, setOpen] = useState(false);
-    const handleOpen = () => {
-      setOpen((prev) => !prev);
-    };
-
-    useEffect(() => {
-      setOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <Tooltip
-        title={props.title}
-        body={props.body}
-        open={open}
-        closer={props.closer}
-        onClose={handleOpen}
-        color={props.color}
-        placement={props.placement}
-        endAdornment={props.endAdornment}
-      >
-        <Icon name="TooltipFill" size="medium" onClick={handleOpen} />
-      </Tooltip>
-    );
-  },
-  args: {
-    title: 'Lorem ipsum',
-    body: 'dolor sit amet, consectetur adipiscing',
-    open: true,
-    closer: true,
-    color: 'primary',
-    placement: 'top-right',
-    endAdornment: '🥳'
-  }
-};
-
-export const CustomOffset: Story = {
-  render: (props) => {
-    const [open, setOpen] = useState(false);
-    const handleOpen = () => {
-      setOpen((prev) => !prev);
-    };
-
-    useEffect(() => {
-      setOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <Tooltip
-        title={props.title}
-        body={props.body}
-        open={open}
-        closer={props.closer}
-        onClose={handleOpen}
-        color={props.color}
-        placement={props.placement}
-        endAdornment={props.endAdornment}
-        offset={props.offset}
-        arrowOffset={props.arrowOffset}
-      >
-        <Icon name="TooltipFill" size="medium" onClick={handleOpen} />
-      </Tooltip>
-    );
-  },
-  args: {
-    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    open: true,
-    color: 'primary',
-    placement: 'bottom-center',
-    offset: {
-      x: 60,
-      y: -15
-    },
-    arrowOffset: {
-      x: -60
-    }
-  }
-};

package/components/Tooltip/Tooltip.styles.ts

@@ -1,288 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { TooltipProps } from './Tooltip';
-
-export const StyledTooltipContainer = styled.div<{ open: boolean }>`
-  position: relative;
-  display: inline-block;
-  &[open] > .tooltip {
-    display: flex;
-  }
-`;
-
-export const StyledTooltip = styled.div<
-  Pick<TooltipProps, 'placement' | 'color' | 'closer' | 'offset' | 'arrowOffset'>
->`
-  position: absolute;
-  display: none;
-  flex-direction: column;
-  gap: ${({ theme: { spacing } }) => `${spacing.content(1)}px`};
-  padding: ${({ theme: { spacing } }) => `${spacing.content(3)}px`};
-  border-radius: 8px;
-  width: auto;
-  height: auto;
-  max-width: 300px;
-  max-height: calc(136px - 8px);
-  z-index: 100003;
-  white-space: nowrap;
-  word-break: break-all;
-
-  ${({
-    theme: {
-      palette: { brand, grey }
-    },
-    color
-  }): CSSObject => {
-    let cssObject = {};
-    if (color === 'primary') {
-      cssObject = {
-        backgroundColor: brand.primary.tooltip,
-        color: grey['100']
-      };
-    }
-    if (color === 'secondary') {
-      cssObject = {
-        backgroundColor: grey['80'],
-        color: grey.white
-      };
-    }
-    return cssObject;
-  }}
-
-  ${({ theme: { typography } }): CSSObject => {
-    return {
-      fontSize: typography.b4R.size,
-      fontWeight: typography.b4R.weight,
-      lineHeight: typography.b4R.lineHeight,
-      letterSpacing: typography.b4R.letterSpacing,
-      '& svg:not(.tooltip-closer)': {
-        width: 24,
-        height: 24
-      }
-    };
-  }};
-
-  ${({
-    theme: {
-      palette: { brand, grey }
-    },
-    placement,
-    color,
-    offset,
-    arrowOffset
-  }): CSSObject => {
-    let cssObject = {};
-    const offsetX = offset?.x || 0;
-    const offsetY = offset?.y || 0;
-    const arrowOffsetX = arrowOffset?.x || 0;
-    const arrowOffsetY = arrowOffset?.y || 0;
-
-    switch (placement) {
-      case 'bottom-left':
-        cssObject = {
-          top: `calc(-12px + ${offsetY}px)`,
-          left: `calc(-6px + ${offsetX}px)`,
-          transform: 'translateY(-100%)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: '100%',
-            left: `calc(12px + ${arrowOffsetX}px)`,
-            borderTop: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderRight: '6px solid transparent',
-            borderBottom: '8px solid transparent',
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'bottom-center':
-        cssObject = {
-          top: `calc(-12px + ${offsetY}px)`,
-          left: '50%',
-          transform: `translate(calc(-50% + ${offsetX}px), -100%)`,
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: '100%',
-            left: `calc(50% + ${arrowOffsetX}px)`,
-            transform: 'translateX(-50%)',
-            borderTop: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderRight: '6px solid transparent',
-            borderBottom: '8px solid transparent',
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'bottom-right':
-        cssObject = {
-          top: `calc(-12px + ${offsetY}px)`,
-          right: `calc(-6px - ${offsetX}px)`,
-          transform: 'translateY(-100%)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: '100%',
-            right: `calc(12px - ${arrowOffsetX}px)`,
-            borderTop: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderRight: '6px solid transparent',
-            borderBottom: '8px solid transparent',
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'left-top':
-        cssObject = {
-          top: `calc(-6px + ${offsetY}px)`,
-          left: `calc(100% + 12px + ${offsetX}px)`,
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: `calc(12px + ${arrowOffsetY}px)`,
-            right: '100%',
-            borderTop: '6px solid transparent',
-            borderRight: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderBottom: '6px solid transparent',
-            borderLeft: '8px solid transparent'
-          }
-        };
-        break;
-      case 'left-middle':
-        cssObject = {
-          top: '50%',
-          left: `calc(100% + 12px + ${offsetX}px)`,
-          transform: `translateY(calc(-50% + ${offsetY}px))`,
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: `calc(50% + ${arrowOffsetY}px)`,
-            right: '100%',
-            transform: 'translateY(-50%)',
-            borderTop: '6px solid transparent',
-            borderRight: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderBottom: '6px solid transparent',
-            borderLeft: '8px solid transparent'
-          }
-        };
-        break;
-      case 'left-bottom':
-        cssObject = {
-          bottom: `calc(-6px - ${offsetY}px)`,
-          left: `calc(100% + 12px + ${offsetX}px)`,
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            bottom: `calc(12px - ${arrowOffsetY}px)`,
-            right: '100%',
-            borderTop: '6px solid transparent',
-            borderRight: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderBottom: '6px solid transparent',
-            borderLeft: '8px solid transparent'
-          }
-        };
-        break;
-      case 'top-left':
-        cssObject = {
-          left: `calc(-6px + ${offsetX}px)`,
-          transform: `translate(0, calc(12px + ${offsetY}px))`,
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            bottom: '100%',
-            left: `calc(12px + ${arrowOffsetX}px)`,
-            borderTop: '8px solid transparent',
-            borderRight: '6px solid transparent',
-            borderBottom: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'top-center':
-        cssObject = {
-          right: '50%',
-          transform: `translate(calc(50% + ${offsetX}px), calc(12px + ${offsetY}px))`,
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            bottom: '100%',
-            left: `calc(50% + ${arrowOffsetX}px)`,
-            transform: 'translateX(-50%)',
-            borderTop: '8px solid transparent',
-            borderRight: '6px solid transparent',
-            borderBottom: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'top-right':
-        cssObject = {
-          right: `calc(-6px - ${offsetX}px)`,
-          transform: `translate(0, calc(12px + ${offsetY}px))`,
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            bottom: '100%',
-            right: `calc(12px - ${arrowOffsetX}px)`,
-            borderTop: '8px solid transparent',
-            borderRight: '6px solid transparent',
-            borderBottom: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'right-top':
-        cssObject = {
-          top: `calc(-6px + ${offsetY}px)`,
-          right: `calc(100% + 12px + ${offsetX}px)`,
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: `calc(12px + ${arrowOffsetY}px)`,
-            left: '100%',
-            borderTop: '6px solid transparent',
-            borderRight: '8px solid transparent',
-            borderBottom: '6px solid transparent',
-            borderLeft: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`
-          }
-        };
-        break;
-      case 'right-middle':
-        cssObject = {
-          top: '50%',
-          right: `calc(100% + 12px + ${offsetX}px)`,
-          transform: `translateY(calc(-50% + ${offsetY}px))`,
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: `calc(50% + ${arrowOffsetY}px)`,
-            left: '100%',
-            transform: 'translateY(-50%)',
-            borderTop: '6px solid transparent',
-            borderRight: '8px solid transparent',
-            borderBottom: '6px solid transparent',
-            borderLeft: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`
-          }
-        };
-        break;
-      case 'right-bottom':
-        cssObject = {
-          bottom: `calc(-6px - ${offsetY}px)`,
-          right: `calc(100% + 12px + ${offsetX}px)`,
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            bottom: `calc(12px - ${arrowOffsetY}px)`,
-            left: '100%',
-            borderTop: '6px solid transparent',
-            borderRight: '8px solid transparent',
-            borderBottom: '6px solid transparent',
-            borderLeft: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`
-          }
-        };
-        break;
-      default:
-        break;
-    }
-    return cssObject;
-  }};
-`;