@dotss/ui 0.0.6 → 0.0.8

package/components/IconButton/IconButton.styles.ts

@@ -1,354 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { IconButtonProps } from '@components/IconButton/IconButton';
-import getContrastingTextColor from '@utils/getContrastingTextColor/getContrastingTextColor';
-
-export const StyledIconButton = styled.button<
-  Pick<IconButtonProps, 'variant' | 'size' | 'color'> & { isHoverPossible: boolean }
->`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100px;
-
-  ${({ theme: { spacing }, size }): CSSObject => {
-    let cssObject: CSSObject = {
-      width: 40,
-      height: 40,
-      padding: spacing.content(1)
-    };
-
-    switch (size) {
-      case '2xLarge':
-        cssObject = {
-          width: 80,
-          height: 80,
-          padding: 0
-        };
-        break;
-      case 'xLarge':
-        cssObject = {
-          width: 56,
-          height: 56,
-          padding: spacing.content(0.5)
-        };
-        break;
-      case 'large':
-        cssObject = {
-          width: 48,
-          height: 48,
-          padding: spacing.content(1)
-        };
-        break;
-      case 'small':
-        cssObject = {
-          width: 32,
-          height: 32,
-          padding: spacing.content(1)
-        };
-        break;
-      case 'xSmall':
-        cssObject = {
-          width: 24,
-          height: 24,
-          padding: spacing.content(0.5)
-        };
-        break;
-      default:
-        break;
-    }
-
-    return cssObject;
-  }};
-
-  ${({
-    theme: {
-      palette: { yellow, grey }
-    },
-    variant,
-    color,
-    isHoverPossible
-  }): CSSObject => {
-    let cssObject: CSSObject = {
-      '&:not([aria-disabled="true"]):active > div': { backgroundColor: grey['10'] },
-      ...(isHoverPossible
-        ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: grey['10'] } }
-        : {})
-    };
-
-    switch (variant) {
-      case 'standard':
-        if (color === 'tertiary') {
-          cssObject = {
-            '&:not([aria-disabled="true"]):active > div': { backgroundColor: grey['80'] },
-            ...(isHoverPossible
-              ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: grey['80'] } }
-              : {})
-          };
-        }
-        break;
-      case 'filled':
-        if (color === 'primary') {
-          cssObject = {
-            '&:not([aria-disabled="true"]):active > div': { backgroundColor: yellow['80'] },
-            ...(isHoverPossible
-              ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: yellow['80'] } }
-              : {})
-          };
-        }
-        if (color === 'secondary') {
-          cssObject = {
-            '&:not([aria-disabled="true"]):active > div': { backgroundColor: grey['100'] },
-            ...(isHoverPossible
-              ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: grey['100'] } }
-              : {})
-          };
-        }
-        break;
-      case 'outlined':
-        if (color === 'primary') {
-          cssObject = {
-            '&:not([aria-disabled="true"]):active > div': { backgroundColor: grey['10'] },
-            ...(isHoverPossible
-              ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: grey['10'] } }
-              : {})
-          };
-        }
-        if (color === 'tertiary') {
-          cssObject = {
-            '&:not([aria-disabled="true"]):active > div': { backgroundColor: grey['100'] },
-            ...(isHoverPossible
-              ? { '&:not([aria-disabled="true"]):hover > div': { backgroundColor: grey['100'] } }
-              : {})
-          };
-        }
-        break;
-      default:
-        break;
-    }
-
-    return cssObject;
-  }};
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-
-    & > div {
-      ${({
-        theme: {
-          palette: { brand, grey }
-        },
-        variant,
-        color
-      }): CSSObject => {
-        let cssObject: CSSObject = {
-          backgroundColor: 'transparent',
-          '& svg': {
-            color: grey['30']
-          }
-        };
-
-        switch (variant) {
-          case 'standard':
-            if (color === 'tertiary') {
-              cssObject = {
-                backgroundColor: 'transparent',
-                '& svg': {
-                  color: grey['80']
-                }
-              };
-            }
-            break;
-          case 'filled':
-            if (color === 'primary') {
-              cssObject = {
-                backgroundColor: brand.primary.disable,
-                '& svg': {
-                  color: grey['30']
-                }
-              };
-            }
-            if (color === 'secondary') {
-              cssObject = {
-                backgroundColor: grey['10'],
-                '& svg': {
-                  color: grey['30']
-                }
-              };
-            }
-            break;
-          case 'outlined':
-            if (color === 'secondary') {
-              cssObject = {
-                backgroundColor: grey['10'],
-                borderColor: grey['30'],
-                '& svg': {
-                  color: grey['30']
-                }
-              };
-            }
-            if (color === 'tertiary') {
-              cssObject = {
-                backgroundColor: grey['80'],
-                borderColor: grey['70'],
-                '& svg': {
-                  color: grey['70']
-                }
-              };
-            }
-            break;
-          default:
-            break;
-        }
-
-        return cssObject;
-      }};
-    }
-  }
-`;
-
-export const Inner = styled.div<Pick<IconButtonProps, 'variant' | 'size' | 'color'>>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border: 1px solid transparent;
-  border-radius: 100px;
-
-  ${({
-    theme: {
-      palette: { brand, grey }
-    },
-    variant,
-    color
-  }): CSSObject => {
-    let cssObject: CSSObject = {
-      backgroundColor: 'transparent'
-    };
-
-    switch (variant) {
-      case 'standard':
-        if (color === 'tertiary') {
-          cssObject = {
-            backgroundColor: 'transparent',
-            '& svg': {
-              color: grey.white
-            }
-          };
-        }
-        break;
-      case 'filled':
-        if (color === 'primary') {
-          cssObject = {
-            backgroundColor: brand.primary.main,
-            color: getContrastingTextColor(brand.primary.main, [grey.white, grey['100']]),
-            '& svg': {
-              color: 'inherit'
-            }
-          };
-        }
-        if (color === 'secondary') {
-          cssObject = {
-            backgroundColor: brand.secondary,
-            color: grey.white,
-            '& svg': {
-              color: 'inherit'
-            }
-          };
-        }
-        break;
-      case 'outlined':
-        if (color === 'primary') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: grey['50']
-          };
-        }
-        if (color === 'tertiary') {
-          cssObject = {
-            backgroundColor: 'transparent',
-            borderColor: grey['50'],
-            '& svg': {
-              color: grey['50']
-            }
-          };
-        }
-        break;
-      default:
-        break;
-    }
-
-    return cssObject;
-  }};
-
-  ${({ size }): CSSObject => {
-    let cssObject: CSSObject = {
-      minWidth: 32,
-      minHeight: 32,
-      '& svg': {
-        width: 24,
-        height: 24
-      }
-    };
-
-    switch (size) {
-      case '2xLarge':
-        cssObject = {
-          minWidth: 80,
-          minHeight: 80,
-          borderWidth: 2,
-          '& svg': {
-            width: 48,
-            height: 48
-          }
-        };
-        break;
-      case 'xLarge':
-        cssObject = {
-          minWidth: 52,
-          minHeight: 52,
-          '& svg': {
-            width: 36,
-            height: 36
-          }
-        };
-        break;
-      case 'large':
-        cssObject = {
-          minWidth: 40,
-          minHeight: 40,
-          '& svg': {
-            width: 32,
-            height: 32
-          }
-        };
-        break;
-      case 'small':
-        cssObject = {
-          minWidth: 24,
-          minHeight: 24,
-          '& svg': {
-            width: 16,
-            height: 16
-          }
-        };
-        break;
-      case 'xSmall':
-        cssObject = {
-          minWidth: 20,
-          minHeight: 20,
-          '& svg': {
-            width: 16,
-            height: 16
-          }
-        };
-        break;
-      default:
-        break;
-    }
-
-    return cssObject;
-  }};
-`;

package/components/IconButton/IconButton.tsx

@@ -1,54 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import Icon from '@components/Icon';
-import useCheckHoverPossible from '@hooks/useCheckHoverPossible/useCheckHoverPossible';
-import type { BrandColorKey } from '@typings/color';
-import type { GeneralComponentProps, IconName, Size, Variant } from '@typings/component';
-
-import getIconLabel from '@utils/getIconLabel/getIconLabel';
-
-import { Inner, StyledIconButton } from './IconButton.styles';
-
-export interface IconButtonProps
-  extends GeneralComponentProps<ButtonHTMLAttributes<HTMLButtonElement>> {
-  name: IconName;
-  variant?: Extract<Variant, 'standard' | 'filled' | 'outlined'>;
-  size?: Size;
-  color?: BrandColorKey;
-}
-
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
-  {
-    name,
-    variant = 'standard',
-    size = 'medium',
-    color = 'primary',
-    inlineCSS,
-    disabled = false,
-    ...props
-  },
-  ref
-) {
-  const { isHoverPossible } = useCheckHoverPossible();
-  return (
-    <StyledIconButton
-      ref={ref}
-      variant={variant}
-      size={size}
-      color={color}
-      aria-disabled={disabled}
-      aria-label={getIconLabel(name)}
-      isHoverPossible={isHoverPossible}
-      disabled={disabled}
-      {...props}
-      css={inlineCSS}
-    >
-      <Inner variant={variant} size={size} color={color}>
-        <Icon name={name} focusable={false} />
-      </Inner>
-    </StyledIconButton>
-  );
-});
-
-export default IconButton;

package/components/IconButton/index.ts

@@ -1,3 +0,0 @@
-import IconButton from './IconButton';
-
-export default IconButton;

package/components/Label/Label.stories.tsx

@@ -1,87 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Icon from '@components/Icon';
-
-import Label from './Label';
-
-const meta = {
-  title: 'Component/Label',
-  component: Label,
-  parameters: {
-    layout: 'centered'
-  },
-  argTypes: {
-    startAdornment: {
-      control: {
-        disable: true
-      }
-    },
-    endAdornment: {
-      control: {
-        disable: true
-      }
-    }
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Label>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Solid: Story = {
-  args: {
-    children: 'LABEL',
-    variant: 'solid',
-    size: 'medium',
-    color: 'yellow'
-  }
-};
-
-export const Ghost: Story = {
-  args: {
-    children: 'LABEL',
-    variant: 'ghost',
-    size: 'medium',
-    color: 'yellow'
-  }
-};
-
-export const Outlined: Story = {
-  args: {
-    children: 'LABEL',
-    variant: 'outlined',
-    size: 'medium',
-    color: 'yellow'
-  }
-};
-
-export const StartAdornment: Story = {
-  args: {
-    children: 'LABEL',
-    variant: 'solid',
-    size: 'medium',
-    color: 'yellow',
-    startAdornment: <Icon name="InfoFill" />
-  }
-};
-
-export const EndAdornment: Story = {
-  args: {
-    children: 'LABEL',
-    variant: 'solid',
-    size: 'medium',
-    color: 'yellow',
-    endAdornment: <Icon name="InfoFill" />
-  }
-};
-
-export const BothAdornment: Story = {
-  args: {
-    children: 'LABEL',
-    variant: 'solid',
-    size: 'medium',
-    color: 'yellow',
-    startAdornment: <Icon name="PlusLine" />,
-    endAdornment: <Icon name="MinusLine" />
-  }
-};