@channel.io/bezier-react 1.5.0 → 1.6.0

package/dist/cjs/components/Banner/Banner.styled.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Text = require('../Text/Text.js');
+var Banner_const = require('./Banner.const.js');
+var LegacyIcon = require('../LegacyIcon/LegacyIcon.js');
+var HStack = require('../Stack/HStack/HStack.js');
+var StackItem$1 = require('../Stack/StackItem/StackItem.js');
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+
+const BannerIcon = /*#__PURE__*/FoundationStyledComponent.styled(LegacyIcon.default).withConfig({
+  displayName: "Bannerstyled__BannerIcon",
+  componentId: "sc-19y8c5b-0"
+})([""]);
+const ContentWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Bannerstyled__ContentWrapper",
+  componentId: "sc-19y8c5b-1"
+})(["color:", ";"], ({
+  foundation,
+  variant
+}) => foundation?.theme?.[Banner_const.TEXT_COLORS[variant]]);
+const Link = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).withConfig({
+  displayName: "Bannerstyled__Link",
+  componentId: "sc-19y8c5b-2"
+})(["margin-left:2px;text-decoration:underline;cursor:pointer;"]);
+const Stack = /*#__PURE__*/FoundationStyledComponent.styled(HStack.HStack).withConfig({
+  displayName: "Bannerstyled__Stack",
+  componentId: "sc-19y8c5b-3"
+})(["width:auto;min-width:200px;height:auto;padding:12px;background-color:", ";", " ", " & + &{margin-top:6px;}"], ({
+  foundation,
+  variant
+}) => foundation?.theme?.[Banner_const.BACKGROUND_COLORS[variant]], ({
+  foundation
+}) => foundation?.rounding?.round12, ({
+  variant
+}) => Banner_const.ELEVATIONS[variant]);
+const StackItem = /*#__PURE__*/FoundationStyledComponent.styled(StackItem$1.StackItem).withConfig({
+  displayName: "Bannerstyled__StackItem",
+  componentId: "sc-19y8c5b-4"
+})(["height:20px;"]);
+var Styled = {
+  BannerIcon,
+  ContentWrapper,
+  Link,
+  Stack,
+  StackItem
+};
+
+exports.default = Styled;
+//# sourceMappingURL=Banner.styled.js.map

package/dist/cjs/components/Banner/Banner.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.styled.js","sources":["../../../../src/components/Banner/Banner.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport type { VariantProps } from '~/src/types/ComponentProps'\n\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport {\n  StackItem as BaseStackItem,\n  HStack,\n} from '~/src/components/Stack'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  BACKGROUND_COLORS,\n  ELEVATIONS,\n  TEXT_COLORS,\n} from './Banner.const'\nimport type { BannerVariant } from './Banner.types'\n\ntype BannerVariantProps = Required<VariantProps<BannerVariant>>\n\nconst BannerIcon = styled(LegacyIcon)``\n\nconst ContentWrapper = styled.div<BannerVariantProps>`\n  color: ${({ foundation, variant }) => foundation?.theme?.[TEXT_COLORS[variant]]};\n`\n\nconst Link = styled(Text)`\n  margin-left: 2px;\n  text-decoration: underline;\n  cursor: pointer;\n`\n\nconst Stack = styled(HStack)<BannerVariantProps>`\n  width: auto;\n  min-width: 200px;\n  height: auto;\n  padding: 12px;\n  background-color: ${({ foundation, variant }) => foundation?.theme?.[BACKGROUND_COLORS[variant]]};\n\n  ${({ foundation }) => foundation?.rounding?.round12}\n  ${({ variant }) => ELEVATIONS[variant]}\n\n  & + & {\n    margin-top: 6px;\n  }\n`\n\nconst StackItem = styled(BaseStackItem)`\n  height: 20px;\n`\n\nexport default {\n  BannerIcon,\n  ContentWrapper,\n  Link,\n  Stack,\n  StackItem,\n}\n"],"names":["BannerIcon","styled","LegacyIcon","withConfig","displayName","componentId","ContentWrapper","div","foundation","variant","theme","TEXT_COLORS","Link","Text","Stack","HStack","BACKGROUND_COLORS","rounding","round12","ELEVATIONS","StackItem","BaseStackItem"],"mappings":";;;;;;;;;;;AAoBA,MAAMA,UAAU,gBAAGC,gCAAM,CAACC,kBAAU,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,0BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;AAEvC,MAAMC,cAAc,gBAAGL,gCAAM,CAACM,GAAG,CAAAJ,UAAA,CAAA;EAAAC,WAAA,EAAA,8BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,QAAA,EAAA,GAAA,CAAA,EACtB,CAAC;EAAEG,UAAU;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKD,UAAU,EAAEE,KAAK,GAAGC,wBAAW,CAACF,OAAO,CAAC,CAAC,CAChF,CAAA;AAED,MAAMG,IAAI,gBAAGX,gCAAM,CAACY,YAAI,CAAC,CAAAV,UAAA,CAAA;EAAAC,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAIxB,CAAA,CAAA,CAAA,2DAAA,CAAA,CAAA,CAAA;AAED,MAAMS,KAAK,gBAAGb,gCAAM,CAACc,aAAM,CAAC,CAAAZ,UAAA,CAAA;EAAAC,WAAA,EAAA,qBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uEAAA,EAAA,GAAA,EAAA,GAAA,EAAA,yBAAA,CAAA,EAKN,CAAC;EAAEG,UAAU;AAAEC,EAAAA,OAAAA;AAAQ,CAAC,KAAKD,UAAU,EAAEE,KAAK,GAAGM,8BAAiB,CAACP,OAAO,CAAC,CAAC,EAE9F,CAAC;AAAED,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAES,QAAQ,EAAEC,OAAO,EACjD,CAAC;AAAET,EAAAA,OAAAA;AAAQ,CAAC,KAAKU,uBAAU,CAACV,OAAO,CAAC,CAKvC,CAAA;AAED,MAAMW,SAAS,gBAAGnB,gCAAM,CAACoB,qBAAa,CAAC,CAAAlB,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAEtC,CAAA,CAAA,CAAA,cAAA,CAAA,CAAA,CAAA;AAED,aAAe;EACbL,UAAU;EACVM,cAAc;EACdM,IAAI;EACJE,KAAK;AACLM,EAAAA,SAAAA;AACF,CAAC;;;;"}

package/dist/cjs/components/Banner/Banner.types.js

@@ -0,0 +1,15 @@
+'use strict';
+
+let BannerVariant = /*#__PURE__*/function (BannerVariant) {
+  BannerVariant["Default"] = "default";
+  BannerVariant["Blue"] = "blue";
+  BannerVariant["Cobalt"] = "cobalt";
+  BannerVariant["Green"] = "green";
+  BannerVariant["Orange"] = "orange";
+  BannerVariant["Red"] = "red";
+  BannerVariant["Alt"] = "alt";
+  return BannerVariant;
+}({});
+
+exports.BannerVariant = BannerVariant;
+//# sourceMappingURL=Banner.types.js.map

package/dist/cjs/components/Banner/Banner.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.types.js","sources":["../../../../src/components/Banner/Banner.types.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { type IconName } from '@channel.io/bezier-icons'\n\nimport type {\n  AdditionalColorProps,\n  BezierComponentProps,\n  ContentProps,\n  VariantProps,\n} from '~/src/types/ComponentProps'\n\nimport type { ButtonProps } from '~/src/components/Button'\n\nexport enum BannerVariant {\n  Default = 'default',\n  Blue = 'blue',\n  Cobalt = 'cobalt',\n  Green = 'green',\n  Orange = 'orange',\n  Red = 'red',\n  Alt = 'alt',\n}\n\nexport type RenderLinkFunc = (props: {\n  content: ReactNode\n  linkTo?: string\n}) => JSX.Element\n\ninterface BannerOptions {\n  /**\n   * The name of icon to display at the top left of the banner.\n   *\n   * If `null` is given, no icon will be displayed.\n   */\n  icon: IconName | null\n\n  /**\n   * Whether to display link at the end of banner content.\n   *\n   * @default false\n   */\n  hasLink?: boolean\n\n  /**\n   * The link content.\n   *\n   * This will be displayed as bold, underline text at the end of content.\n   *\n   * @remarks\n   * `hasLink` props should be given `true` to enable the link.\n   */\n  linkText?: string\n\n  /**\n   * The location (href) of the link.\n   *\n   * By default, the link will be opened in a new tab. (`target=\"_blank\"`)\n   * To specify a different behavior, use `renderLink` prop to render the link as a custom component.\n   *\n   * @remarks\n   * `hasLink` props should be given `true` to enable the link.\n   */\n  linkTo?: string\n\n  /**\n   * Specifies how to render the link.\n   *\n   * @default\n   * renders link as an `<a>` tag with `target=\"_blank\"` attribute.\n   */\n  renderLink?: RenderLinkFunc\n\n  /**\n   * Specifies which icon button to display at the top right of the banner.\n   *\n   * FIXME(@ed): 새로운 아이콘 방식으로 변경\n   */\n  actionIcon?: IconName\n\n  /**\n   * Handler to be executed when the action icon button is clicked.\n   */\n  onClickAction?: ButtonProps['onClick']\n}\n\nexport interface BannerProps extends\n  BezierComponentProps,\n  VariantProps<BannerVariant>,\n  ContentProps<string | ReactNode>,\n  AdditionalColorProps<'icon'>,\n  BannerOptions {}\n"],"names":["BannerVariant"],"mappings":";;AAaYA,IAAAA,aAAa,0BAAbA,aAAa,EAAA;EAAbA,aAAa,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAbA,aAAa,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAbA,aAAa,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAbA,aAAa,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAbA,aAAa,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAbA,aAAa,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAAbA,aAAa,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;AAAA,EAAA,OAAbA,aAAa,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/components/Button/Button.js

@@ -0,0 +1,164 @@
+'use strict';
+
+var React = require('react');
+var arrayUtils = require('../../utils/arrayUtils.js');
+var functionUtils = require('../../utils/functionUtils.js');
+var typeUtils = require('../../utils/typeUtils.js');
+var Spinner = require('../Spinner/Spinner.js');
+var Spinner_types = require('../Spinner/Spinner.types.js');
+var Button_types = require('./Button.types.js');
+var Button_styled = require('./Button.styled.js');
+var Icon_types = require('../Icon/Icon.types.js');
+var utils = require('../LegacyIcon/utils.js');
+var LegacyIcon = require('../LegacyIcon/LegacyIcon.js');
+var Typography = require('../../foundation/Typography.js');
+
+const BUTTON_TEST_ID = 'bezier-react-button';
+const BUTTON_INNER_CONTENT_TEST_ID = 'bezier-react-button-inner-content';
+const BUTTON_TEXT_TEST_ID = 'bezier-react-button-text';
+function tupleKey(...[colorVariant, styleVariant, size]) {
+  return `${colorVariant},${styleVariant},${size}`;
+}
+function combinations(colors, styles, sizes) {
+  function toArray(items) {
+    return typeUtils.isArray(items) ? items : [items];
+  }
+  return arrayUtils.flattenDeep(toArray(colors).map(color => toArray(styles).map(style => toArray(sizes).map(size => tupleKey(color, style, size)))));
+}
+const OVERRIDED_TEXT_DEFAULT_COLORS = {
+  ...Object.fromEntries(combinations(Button_types.ButtonColorVariant.Monochrome, [Button_types.ButtonStyleVariant.Secondary, Button_types.ButtonStyleVariant.Tertiary], [Button_types.ButtonSize.S, Button_types.ButtonSize.XS]).map(key => [key, 'txt-black-darker']))
+};
+const OVERRIDED_ICON_AND_SPINNER_DEFAULT_COLORS = {
+  ...Object.fromEntries(combinations(Button_types.ButtonColorVariant.Monochrome, [Button_types.ButtonStyleVariant.Secondary, Button_types.ButtonStyleVariant.Tertiary], [Button_types.ButtonSize.XL, Button_types.ButtonSize.L, Button_types.ButtonSize.M]).map(key => [key, 'txt-black-darker'])),
+  ...Object.fromEntries(combinations(Button_types.ButtonColorVariant.Monochrome, [Button_types.ButtonStyleVariant.Secondary, Button_types.ButtonStyleVariant.Tertiary], [Button_types.ButtonSize.S, Button_types.ButtonSize.XS]).map(key => [key, 'txt-black-dark'])),
+  ...Object.fromEntries(combinations(Button_types.ButtonColorVariant.MonochromeLight, [Button_types.ButtonStyleVariant.Secondary, Button_types.ButtonStyleVariant.Tertiary, Button_types.ButtonStyleVariant.Floating], Object.values(Button_types.ButtonSize)).map(key => [key, 'txt-black-dark'])),
+  ...Object.fromEntries(combinations(Button_types.ButtonColorVariant.MonochromeDark, [Button_types.ButtonStyleVariant.Secondary, Button_types.ButtonStyleVariant.Tertiary, Button_types.ButtonStyleVariant.Floating], Object.values(Button_types.ButtonSize)).map(key => [key, 'txt-black-darker']))
+};
+const Button = /*#__PURE__*/React.forwardRef(function Button({
+  as,
+  className,
+  style,
+  interpolation,
+  testId = BUTTON_TEST_ID,
+  type = 'button',
+  text,
+  disabled = false,
+  loading = false,
+  active = false,
+  size = Button_types.ButtonSize.M,
+  styleVariant = Button_types.ButtonStyleVariant.Primary,
+  colorVariant = Button_types.ButtonColorVariant.Blue,
+  leftContent,
+  rightContent,
+  onClick = functionUtils.noop,
+  onMouseEnter = functionUtils.noop,
+  onMouseLeave = functionUtils.noop,
+  onBlur = functionUtils.noop,
+  ...rest
+}, forwardedRef) {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const typography = React.useMemo(() => {
+    switch (size) {
+      case Button_types.ButtonSize.XS:
+      case Button_types.ButtonSize.S:
+        return Typography.Typography.Size13;
+      case Button_types.ButtonSize.L:
+        return Typography.Typography.Size15;
+      case Button_types.ButtonSize.XL:
+        return Typography.Typography.Size18;
+      case Button_types.ButtonSize.M:
+      default:
+        return Typography.Typography.Size14;
+    }
+  }, [size]);
+  const ButtonSpinnerSize = React.useMemo(() => {
+    switch (size) {
+      case Button_types.ButtonSize.S:
+      case Button_types.ButtonSize.XS:
+        return Spinner_types.SpinnerSize.XS;
+      case Button_types.ButtonSize.XL:
+      case Button_types.ButtonSize.L:
+      case Button_types.ButtonSize.M:
+      default:
+        return Spinner_types.SpinnerSize.S;
+    }
+  }, [size]);
+  const iconSize = React.useMemo(() => {
+    switch (size) {
+      case Button_types.ButtonSize.XS:
+      case Button_types.ButtonSize.S:
+        return Icon_types.IconSize.XS;
+      case Button_types.ButtonSize.XL:
+        return Icon_types.IconSize.Normal;
+      case Button_types.ButtonSize.M:
+      case Button_types.ButtonSize.L:
+      default:
+        return Icon_types.IconSize.S;
+    }
+  }, [size]);
+  const overridedTextColor = React.useMemo(() => active || isHovered ? undefined : OVERRIDED_TEXT_DEFAULT_COLORS[tupleKey(colorVariant, styleVariant, size)], [colorVariant, styleVariant, size, active, isHovered]);
+  const overridedIconAndSpinnerColor = React.useMemo(() => active || isHovered ? undefined : OVERRIDED_ICON_AND_SPINNER_DEFAULT_COLORS[tupleKey(colorVariant, styleVariant, size)], [colorVariant, styleVariant, size, active, isHovered]);
+  const handleMouseEnter = React.useCallback(event => {
+    setIsHovered(true);
+    onMouseEnter(event);
+  }, [onMouseEnter]);
+  const handleMouseLeave = React.useCallback(event => {
+    setIsHovered(false);
+    onMouseLeave(event);
+  }, [onMouseLeave]);
+  const handleClick = React.useCallback(event => {
+    if (!disabled) {
+      onClick(event);
+    }
+    return null;
+  }, [onClick, disabled]);
+  const renderSideContent = React.useCallback(content => {
+    if (utils.isIconName(content)) {
+      return /*#__PURE__*/React.createElement(LegacyIcon.default, {
+        name: content,
+        size: iconSize,
+        color: overridedIconAndSpinnerColor
+      });
+    }
+    return content;
+  }, [iconSize, overridedIconAndSpinnerColor]);
+  return /*#__PURE__*/React.createElement(Button_styled.ButtonWrapper, Object.assign({
+    as: as,
+    type: type,
+    style: style,
+    className: className,
+    interpolation: interpolation,
+    ref: forwardedRef,
+    size: size,
+    disabled: disabled,
+    active: active,
+    styleVariant: styleVariant,
+    colorVariant: colorVariant,
+    text: text,
+    "data-testid": testId,
+    "data-component": "BezierButton",
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onBlur: onBlur
+  }, rest), /*#__PURE__*/React.createElement(Button_styled.ButtonContents, {
+    "data-testid": BUTTON_INNER_CONTENT_TEST_ID,
+    visible: !loading,
+    buttonSize: size
+  }, renderSideContent(leftContent), text && /*#__PURE__*/React.createElement(Button_styled.ContentText, {
+    testId: BUTTON_TEXT_TEST_ID,
+    typo: typography,
+    bold: true,
+    color: overridedTextColor,
+    buttonSize: size
+  }, text), renderSideContent(rightContent)), loading && /*#__PURE__*/React.createElement(Button_styled.ButtonLoader, null, /*#__PURE__*/React.createElement(Spinner.default, {
+    size: ButtonSpinnerSize,
+    color: overridedIconAndSpinnerColor
+  })));
+});
+
+exports.BUTTON_INNER_CONTENT_TEST_ID = BUTTON_INNER_CONTENT_TEST_ID;
+exports.BUTTON_TEST_ID = BUTTON_TEST_ID;
+exports.BUTTON_TEXT_TEST_ID = BUTTON_TEXT_TEST_ID;
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

package/dist/cjs/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport {\n  type SemanticNames,\n  Typography,\n} from '~/src/foundation'\n\nimport { flattenDeep } from '~/src/utils/arrayUtils'\nimport { noop } from '~/src/utils/functionUtils'\nimport { isArray } from '~/src/utils/typeUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport {\n  LegacyIcon,\n  isIconName,\n} from '~/src/components/LegacyIcon'\nimport {\n  Spinner,\n  SpinnerSize,\n} from '~/src/components/Spinner'\n\nimport type ButtonProps from './Button.types'\nimport {\n  type MouseEventHandler,\n  type SideContent,\n} from './Button.types'\nimport {\n  ButtonColorVariant,\n  ButtonSize,\n  ButtonStyleVariant,\n} from './Button.types'\n\nimport * as Styled from './Button.styled'\n\nexport const BUTTON_TEST_ID = 'bezier-react-button'\nexport const BUTTON_INNER_CONTENT_TEST_ID = 'bezier-react-button-inner-content'\nexport const BUTTON_TEXT_TEST_ID = 'bezier-react-button-text'\n\ntype VariantTuple = `${ButtonColorVariant},${ButtonStyleVariant},${ButtonSize}`\n\nfunction tupleKey(...[colorVariant, styleVariant, size]: [ButtonColorVariant, ButtonStyleVariant, ButtonSize]): VariantTuple {\n  return `${colorVariant},${styleVariant},${size}` as const\n}\n\nfunction combinations(\n  colors: ButtonColorVariant | ButtonColorVariant[],\n  styles: ButtonStyleVariant | ButtonStyleVariant[],\n  sizes: ButtonSize | ButtonSize[],\n) : VariantTuple[] {\n  function toArray<T>(items: T | T[]): T[] {\n    return isArray(items) ? items : [items]\n  }\n\n  return flattenDeep(\n    toArray(colors).map((color) =>\n      toArray(styles).map((style) =>\n        toArray(sizes).map((size) => tupleKey(color, style, size)))),\n  )\n}\n\nconst OVERRIDED_TEXT_DEFAULT_COLORS: { [key in VariantTuple]?: SemanticNames } = {\n  ...Object.fromEntries(\n    combinations(\n      ButtonColorVariant.Monochrome,\n      [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary],\n      [ButtonSize.S, ButtonSize.XS],\n    )\n      .map((key) => [key, 'txt-black-darker']),\n  ),\n}\n\nconst OVERRIDED_ICON_AND_SPINNER_DEFAULT_COLORS: { [key in VariantTuple]?: SemanticNames } = {\n  ...Object.fromEntries(\n    combinations(\n      ButtonColorVariant.Monochrome,\n      [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary],\n      [ButtonSize.XL, ButtonSize.L, ButtonSize.M],\n    )\n      .map((key) => [key, 'txt-black-darker']),\n  ),\n  ...Object.fromEntries(\n    combinations(\n      ButtonColorVariant.Monochrome,\n      [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary],\n      [ButtonSize.S, ButtonSize.XS],\n    )\n      .map((key) => [key, 'txt-black-dark']),\n  ),\n  ...Object.fromEntries(\n    combinations(\n      ButtonColorVariant.MonochromeLight,\n      [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary, ButtonStyleVariant.Floating],\n      Object.values(ButtonSize),\n    )\n      .map((key) => [key, 'txt-black-dark']),\n  ),\n  ...Object.fromEntries(\n    combinations(\n      ButtonColorVariant.MonochromeDark,\n      [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary, ButtonStyleVariant.Floating],\n      Object.values(ButtonSize),\n    )\n      .map((key) => [key, 'txt-black-darker']),\n  ),\n}\n\nexport const Button = forwardRef(function Button(\n  {\n    as,\n    className,\n    style,\n    interpolation,\n    testId = BUTTON_TEST_ID,\n    type = 'button',\n    text,\n    disabled = false,\n    loading = false,\n    active = false,\n    size = ButtonSize.M,\n    styleVariant = ButtonStyleVariant.Primary,\n    colorVariant = ButtonColorVariant.Blue,\n    leftContent,\n    rightContent,\n    onClick = noop,\n    onMouseEnter = noop,\n    onMouseLeave = noop,\n    onBlur = noop,\n    ...rest\n  }: ButtonProps,\n  forwardedRef: React.Ref<HTMLElement>,\n) {\n  const [isHovered, setIsHovered] = useState(false)\n\n  const typography = useMemo(() => {\n    switch (size) {\n      case ButtonSize.XS:\n      case ButtonSize.S:\n        return Typography.Size13\n      case ButtonSize.L:\n        return Typography.Size15\n      case ButtonSize.XL:\n        return Typography.Size18\n      case ButtonSize.M:\n      default:\n        return Typography.Size14\n    }\n  }, [size])\n\n  const ButtonSpinnerSize = useMemo(() => {\n    switch (size) {\n      case ButtonSize.S:\n      case ButtonSize.XS:\n        return SpinnerSize.XS\n      case ButtonSize.XL:\n      case ButtonSize.L:\n      case ButtonSize.M:\n      default:\n        return SpinnerSize.S\n    }\n  }, [size])\n\n  const iconSize = useMemo(() => {\n    switch (size) {\n      case ButtonSize.XS:\n      case ButtonSize.S:\n        return IconSize.XS\n      case ButtonSize.XL:\n        return IconSize.Normal\n      case ButtonSize.M:\n      case ButtonSize.L:\n      default:\n        return IconSize.S\n    }\n  }, [size])\n\n  const overridedTextColor = useMemo(() => (\n    (active || isHovered)\n      ? undefined\n      : OVERRIDED_TEXT_DEFAULT_COLORS[tupleKey(colorVariant, styleVariant, size)]\n  ), [\n    colorVariant,\n    styleVariant,\n    size,\n    active,\n    isHovered,\n  ])\n\n  const overridedIconAndSpinnerColor = useMemo(() => (\n    (active || isHovered)\n      ? undefined\n      : OVERRIDED_ICON_AND_SPINNER_DEFAULT_COLORS[tupleKey(colorVariant, styleVariant, size)]\n  ), [\n    colorVariant,\n    styleVariant,\n    size,\n    active,\n    isHovered,\n  ])\n\n  const handleMouseEnter = useCallback<MouseEventHandler>((event) => {\n    setIsHovered(true)\n    onMouseEnter(event)\n  }, [onMouseEnter])\n\n  const handleMouseLeave = useCallback<MouseEventHandler>((event) => {\n    setIsHovered(false)\n    onMouseLeave(event)\n  }, [onMouseLeave])\n\n  const handleClick = useCallback<MouseEventHandler>((event) => {\n    if (!disabled) { onClick(event) }\n    return null\n  }, [\n    onClick,\n    disabled,\n  ])\n\n  const renderSideContent = useCallback((content?: SideContent) => {\n    if (isIconName(content)) {\n      return (\n        <LegacyIcon\n          name={content}\n          size={iconSize}\n          color={overridedIconAndSpinnerColor}\n        />\n      )\n    }\n\n    return content\n  }, [\n    iconSize,\n    overridedIconAndSpinnerColor,\n  ])\n\n  return (\n    <Styled.ButtonWrapper\n      as={as}\n      type={type}\n      style={style}\n      className={className}\n      interpolation={interpolation}\n      ref={forwardedRef}\n      size={size}\n      disabled={disabled}\n      active={active}\n      styleVariant={styleVariant}\n      colorVariant={colorVariant}\n      text={text}\n      data-testid={testId}\n      data-component=\"BezierButton\"\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onBlur={onBlur}\n      {...rest}\n    >\n      <Styled.ButtonContents\n        data-testid={BUTTON_INNER_CONTENT_TEST_ID}\n        visible={!loading}\n        buttonSize={size}\n      >\n        { renderSideContent(leftContent) }\n\n        { text && (\n          <Styled.ContentText\n            testId={BUTTON_TEXT_TEST_ID}\n            typo={typography}\n            bold\n            color={overridedTextColor}\n            buttonSize={size}\n          >\n            { text }\n          </Styled.ContentText>\n        ) }\n\n        { renderSideContent(rightContent) }\n      </Styled.ButtonContents>\n\n      { loading && (\n        <Styled.ButtonLoader>\n          <Spinner\n            size={ButtonSpinnerSize}\n            color={overridedIconAndSpinnerColor}\n          />\n        </Styled.ButtonLoader>\n      ) }\n    </Styled.ButtonWrapper>\n  )\n})\n"],"names":["BUTTON_TEST_ID","BUTTON_INNER_CONTENT_TEST_ID","BUTTON_TEXT_TEST_ID","tupleKey","colorVariant","styleVariant","size","combinations","colors","styles","sizes","toArray","items","isArray","flattenDeep","map","color","style","OVERRIDED_TEXT_DEFAULT_COLORS","Object","fromEntries","ButtonColorVariant","Monochrome","ButtonStyleVariant","Secondary","Tertiary","ButtonSize","S","XS","key","OVERRIDED_ICON_AND_SPINNER_DEFAULT_COLORS","XL","L","M","MonochromeLight","Floating","values","MonochromeDark","Button","forwardRef","as","className","interpolation","testId","type","text","disabled","loading","active","Primary","Blue","leftContent","rightContent","onClick","noop","onMouseEnter","onMouseLeave","onBlur","rest","forwardedRef","isHovered","setIsHovered","useState","typography","useMemo","Typography","Size13","Size15","Size18","Size14","ButtonSpinnerSize","SpinnerSize","iconSize","IconSize","Normal","overridedTextColor","undefined","overridedIconAndSpinnerColor","handleMouseEnter","useCallback","event","handleMouseLeave","handleClick","renderSideContent","content","isIconName","React","createElement","LegacyIcon","name","Styled","assign","ref","visible","buttonSize","typo","bold","Spinner"],"mappings":"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"}

package/dist/cjs/components/Button/Button.styled.js

@@ -0,0 +1,371 @@
+'use strict';
+
+var DisabledOpacity = require('../../constants/DisabledOpacity.js');
+var styleUtils = require('../../utils/styleUtils.js');
+var typeUtils = require('../../utils/typeUtils.js');
+var Text = require('../Text/Text.js');
+var Button_types = require('./Button.types.js');
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+
+// NOTE: ButtonSize 에 따른 버튼의 min-width, height
+const BUTTON_SIZE_VALUE = {
+  [Button_types.ButtonSize.XS]: 20,
+  [Button_types.ButtonSize.S]: 24,
+  [Button_types.ButtonSize.M]: 36,
+  [Button_types.ButtonSize.L]: 44,
+  [Button_types.ButtonSize.XL]: 54
+};
+function getSizeCSSFromButtonSize({
+  size
+}) {
+  return FoundationStyledComponent.css`
+    min-width: ${BUTTON_SIZE_VALUE[size]}px;
+    height: ${BUTTON_SIZE_VALUE[size]}px;
+  `;
+}
+
+// NOTE: ButtonSize에 따른 버튼 내 텍스트의 margin
+const TEXT_PADDING_VALUE = {
+  [Button_types.ButtonSize.XS]: 3,
+  [Button_types.ButtonSize.S]: 3,
+  [Button_types.ButtonSize.M]: 4,
+  [Button_types.ButtonSize.L]: 4,
+  [Button_types.ButtonSize.XL]: 4
+};
+const BUTTON_CONTENT_GAP_VALUE = {
+  [Button_types.ButtonSize.XS]: 0,
+  [Button_types.ButtonSize.S]: 0,
+  [Button_types.ButtonSize.M]: 2,
+  [Button_types.ButtonSize.L]: 2,
+  [Button_types.ButtonSize.XL]: 2
+};
+
+// NOTE: 버튼의 padding 값을 결정하는 경우 4가지 중 위의 3가지 key
+// 1. 기본
+// 2. styleVariant 가 Floating 인 경우 - floating
+// 3. 버튼에 텍스트 없이 컨텐트만 있을 경우 => buttonSize 에 관계없이 padding 이 0 이라 이 경우만 따로 분기 처리
+// NOTE: floating 은 padding 이 버튼의 size value 의 절반에서 Text padding 값 만큼 빼줘야 스펙과 일치
+const BUTTON_HORIZONTAL_PADDING_VALUE = {
+  [Button_types.ButtonSize.XS]: {
+    default: 2,
+    floating: BUTTON_SIZE_VALUE[Button_types.ButtonSize.XS] / 2 - TEXT_PADDING_VALUE[Button_types.ButtonSize.XS]
+  },
+  [Button_types.ButtonSize.S]: {
+    default: 4,
+    floating: BUTTON_SIZE_VALUE[Button_types.ButtonSize.S] / 2 - TEXT_PADDING_VALUE[Button_types.ButtonSize.S]
+  },
+  [Button_types.ButtonSize.M]: {
+    default: 10,
+    floating: BUTTON_SIZE_VALUE[Button_types.ButtonSize.M] / 2 - TEXT_PADDING_VALUE[Button_types.ButtonSize.M]
+  },
+  [Button_types.ButtonSize.L]: {
+    default: 12,
+    floating: BUTTON_SIZE_VALUE[Button_types.ButtonSize.L] / 2 - TEXT_PADDING_VALUE[Button_types.ButtonSize.L]
+  },
+  [Button_types.ButtonSize.XL]: {
+    default: 20,
+    floating: BUTTON_SIZE_VALUE[Button_types.ButtonSize.XL] / 2 - TEXT_PADDING_VALUE[Button_types.ButtonSize.XL]
+  }
+};
+function getPaddingCSSFromSizeAndContents({
+  styleVariant,
+  text,
+  size
+}) {
+  const hasOnlyContent = typeUtils.isEmpty(text);
+
+  // NOTE: text 가 없는 경우 버튼은 정사각형이기에 padding 이 0
+  if (hasOnlyContent) {
+    return FoundationStyledComponent.css`
+      padding: 0;
+    `;
+  }
+  const paddingVariant = [Button_types.ButtonStyleVariant.Floating, Button_types.ButtonStyleVariant.FloatingAlt].includes(styleVariant) ? 'floating' : 'default';
+  const paddingValue = BUTTON_HORIZONTAL_PADDING_VALUE[size][paddingVariant];
+  return FoundationStyledComponent.css`
+    padding:
+      0
+      ${paddingValue}px
+      0
+      ${paddingValue}px;
+  `;
+}
+function defaultSemanticNames(colorVariant) {
+  if (colorVariant === Button_types.ButtonColorVariant.Monochrome || colorVariant === Button_types.ButtonColorVariant.MonochromeLight || colorVariant === Button_types.ButtonColorVariant.MonochromeDark) {
+    throw new Error('unreached code');
+  }
+  return {
+    [Button_types.ButtonStyleVariant.Primary]: {
+      color: 'bgtxt-absolute-white-dark',
+      backgroundColor: `bgtxt-${colorVariant}-normal`,
+      activeBackgroundColor: `bgtxt-${colorVariant}-dark`
+    },
+    [Button_types.ButtonStyleVariant.Secondary]: {
+      color: `bgtxt-${colorVariant}-normal`,
+      backgroundColor: `bgtxt-${colorVariant}-lightest`,
+      activeBackgroundColor: `bgtxt-${colorVariant}-lighter`
+    },
+    [Button_types.ButtonStyleVariant.Tertiary]: {
+      color: `bgtxt-${colorVariant}-normal`,
+      backgroundColor: 'transparent',
+      activeColor: `bgtxt-${colorVariant}-dark`,
+      activeBackgroundColor: `bgtxt-${colorVariant}-lightest`
+    },
+    [Button_types.ButtonStyleVariant.Floating]: {
+      color: 'bgtxt-absolute-white-dark',
+      backgroundColor: `bgtxt-${colorVariant}-normal`,
+      activeBackgroundColor: `bgtxt-${colorVariant}-dark`
+    },
+    [Button_types.ButtonStyleVariant.FloatingAlt]: {
+      color: 'bgtxt-absolute-white-dark',
+      backgroundColor: `bgtxt-${colorVariant}-normal`,
+      activeBackgroundColor: `bgtxt-${colorVariant}-dark`
+    }
+  };
+}
+const MONOCHROME_SEMANTIC_NAMES = {
+  [Button_types.ButtonStyleVariant.Primary]: {
+    color: 'bgtxt-absolute-white-dark',
+    backgroundColor: 'bgtxt-absolute-black-lightest',
+    activeBackgroundColor: 'bgtxt-absolute-black-lighter'
+  },
+  [Button_types.ButtonStyleVariant.Secondary]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'bg-black-lighter',
+    activeBackgroundColor: 'bg-black-light'
+  },
+  [Button_types.ButtonStyleVariant.Tertiary]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'transparent',
+    activeBackgroundColor: 'bg-black-lightest'
+  },
+  [Button_types.ButtonStyleVariant.Floating]: {
+    color: 'txt-black-darkest'
+  },
+  [Button_types.ButtonStyleVariant.FloatingAlt]: {
+    color: 'txt-black-darkest'
+  }
+};
+const MONOCHROME_LIGHT_SEMANTIC_NAMES = {
+  [Button_types.ButtonStyleVariant.Primary]: {
+    color: 'bgtxt-absolute-white-dark',
+    backgroundColor: 'bg-black-darker'
+  },
+  [Button_types.ButtonStyleVariant.Secondary]: {
+    color: 'txt-black-darker',
+    backgroundColor: 'bg-black-lighter',
+    activeBackgroundColor: 'bg-black-light'
+  },
+  [Button_types.ButtonStyleVariant.Tertiary]: {
+    color: 'txt-black-darker',
+    backgroundColor: 'transparent',
+    activeBackgroundColor: 'bg-black-lighter'
+  },
+  [Button_types.ButtonStyleVariant.Floating]: {
+    color: 'txt-black-darker',
+    backgroundColor: 'bg-white-high'
+  },
+  [Button_types.ButtonStyleVariant.FloatingAlt]: {
+    color: 'txt-black-darker',
+    backgroundColor: 'bg-white-high'
+  }
+};
+const MONOCHROME_DARK_SEMANTIC_NAMES = {
+  [Button_types.ButtonStyleVariant.Primary]: {
+    color: 'bgtxt-absolute-white-dark',
+    backgroundColor: 'bg-grey-darkest'
+  },
+  [Button_types.ButtonStyleVariant.Secondary]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'bg-black-lighter',
+    activeBackgroundColor: 'bg-black-light'
+  },
+  [Button_types.ButtonStyleVariant.Tertiary]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'transparent',
+    activeBackgroundColor: 'bg-black-lighter'
+  },
+  [Button_types.ButtonStyleVariant.Floating]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'bg-white-high'
+  },
+  [Button_types.ButtonStyleVariant.FloatingAlt]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'bg-white-high'
+  }
+};
+function getColorCSS(semanticNames, styleVariant, disabled, active) {
+  const colorCSS = color => {
+    if (!color) {
+      return FoundationStyledComponent.css``;
+    }
+    return FoundationStyledComponent.css`
+      color: ${({
+      foundation
+    }) => foundation?.theme?.[color]};
+    `;
+  };
+  const backgroundColorCSS = backgroundColor => {
+    if (!backgroundColor) {
+      return FoundationStyledComponent.css``;
+    }
+    if (backgroundColor === 'transparent') {
+      return FoundationStyledComponent.css`
+        background-color: transparent;
+      `;
+    }
+    return FoundationStyledComponent.css`
+      background-color: ${({
+      foundation
+    }) => foundation?.theme?.[backgroundColor]};
+    `;
+  };
+  const idleColorCSS = FoundationStyledComponent.css`
+    ${colorCSS(semanticNames[styleVariant].color)}
+    ${backgroundColorCSS(semanticNames[styleVariant].backgroundColor)}
+  `;
+  const activeColorCSS = disabled ? FoundationStyledComponent.css`` : FoundationStyledComponent.css`
+    ${colorCSS(semanticNames[styleVariant].activeColor)}
+    ${backgroundColorCSS(semanticNames[styleVariant].activeBackgroundColor)}
+  `;
+  return FoundationStyledComponent.css`
+    ${idleColorCSS};
+    ${active && activeColorCSS};
+
+    &:hover {
+      ${activeColorCSS};
+    }
+  `;
+}
+function getEffectCSSFromVariant(styleVariant, size) {
+  switch (styleVariant) {
+    case Button_types.ButtonStyleVariant.Floating:
+      return FoundationStyledComponent.css`
+        ${({
+        foundation
+      }) => foundation?.elevation?.ev2()};
+        /* NOTE: height 기반의 100% border-radius 를 사용하기 위해, foundation rounding 을 무시한 hack */
+        overflow: hidden;
+        border-radius: 1000px;
+
+        &:hover {
+          ${({
+        foundation
+      }) => foundation?.elevation?.ev3()};
+        }
+      `;
+    case Button_types.ButtonStyleVariant.FloatingAlt:
+      return FoundationStyledComponent.css`
+        ${({
+        foundation
+      }) => foundation?.elevation?.ev2()};
+        ${({
+        foundation
+      }) => foundation?.rounding?.round8};
+
+        &:hover {
+          ${({
+        foundation
+      }) => foundation?.elevation?.ev3()};
+        }
+      `;
+    case Button_types.ButtonStyleVariant.Tertiary:
+    case Button_types.ButtonStyleVariant.Secondary:
+    case Button_types.ButtonStyleVariant.Primary:
+    default:
+      {
+        switch (size) {
+          case Button_types.ButtonSize.XS:
+            return FoundationStyledComponent.css`
+            ${({
+              foundation
+            }) => foundation?.rounding?.round6};
+          `;
+          case Button_types.ButtonSize.L:
+            return FoundationStyledComponent.css`
+            ${({
+              foundation
+            }) => foundation?.rounding?.round12};
+          `;
+          case Button_types.ButtonSize.XL:
+            return FoundationStyledComponent.css`
+            ${({
+              foundation
+            }) => foundation?.rounding?.round16};
+          `;
+          case Button_types.ButtonSize.S:
+          case Button_types.ButtonSize.M:
+          default:
+            return FoundationStyledComponent.css`
+            ${({
+              foundation
+            }) => foundation?.rounding?.round8};
+          `;
+        }
+      }
+  }
+}
+function getCSSFromVariant({
+  colorVariant,
+  styleVariant,
+  size,
+  disabled,
+  active
+}) {
+  const effectCSS = getEffectCSSFromVariant(styleVariant, size);
+  const semanticNames = (() => {
+    switch (colorVariant) {
+      case Button_types.ButtonColorVariant.Monochrome:
+        return MONOCHROME_SEMANTIC_NAMES;
+      case Button_types.ButtonColorVariant.MonochromeLight:
+        return MONOCHROME_LIGHT_SEMANTIC_NAMES;
+      case Button_types.ButtonColorVariant.MonochromeDark:
+        return MONOCHROME_DARK_SEMANTIC_NAMES;
+      default:
+        return defaultSemanticNames(colorVariant);
+    }
+  })();
+  const colorCSS = getColorCSS(semanticNames, styleVariant, disabled, active);
+  return FoundationStyledComponent.css`
+    ${effectCSS}
+    ${colorCSS}
+  `;
+}
+const ButtonContents = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Buttonstyled__ButtonContents",
+  componentId: "sc-1rgigip-0"
+})(["display:flex;align-items:center;justify-content:center;visibility:", ";", ""], ({
+  visible
+}) => visible ? 'visible' : 'hidden', ({
+  buttonSize
+}) => styleUtils.gap(BUTTON_CONTENT_GAP_VALUE[buttonSize]));
+const ButtonLoader = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "Buttonstyled__ButtonLoader",
+  componentId: "sc-1rgigip-1"
+})(["position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;"]);
+const ButtonWrapper = /*#__PURE__*/FoundationStyledComponent.styled.button.withConfig({
+  displayName: "Buttonstyled__ButtonWrapper",
+  componentId: "sc-1rgigip-2"
+})(["position:relative;box-sizing:border-box;cursor:", ";border:none;outline:none;opacity:", ";&:focus:not(:disabled){box-shadow:0 0 0 3px var(--bgtxt-cobalt-light);}&:focus:not(:focus-visible){box-shadow:none;}", ";", " ", " ", " ", ""], ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  disabled
+}) => disabled ? DisabledOpacity.default : 1, ({
+  foundation
+}) => foundation?.transition?.getTransitionsCSS(['background-color', 'box-shadow']), getSizeCSSFromButtonSize, getPaddingCSSFromSizeAndContents, getCSSFromVariant, ({
+  interpolation
+}) => interpolation);
+const ContentText = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).withConfig({
+  displayName: "Buttonstyled__ContentText",
+  componentId: "sc-1rgigip-3"
+})(["padding:0 ", "px;"], ({
+  buttonSize
+}) => TEXT_PADDING_VALUE[buttonSize]);
+
+exports.BUTTON_HORIZONTAL_PADDING_VALUE = BUTTON_HORIZONTAL_PADDING_VALUE;
+exports.ButtonContents = ButtonContents;
+exports.ButtonLoader = ButtonLoader;
+exports.ButtonWrapper = ButtonWrapper;
+exports.ContentText = ContentText;
+exports.TEXT_PADDING_VALUE = TEXT_PADDING_VALUE;
+//# sourceMappingURL=Button.styled.js.map