@teamturing/react-kit 2.65.1 → 2.66.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,16 +1,22 @@
1
- import { PropsWithChildren } from 'react';
1
+ import { ComponentType, PropsWithChildren, SVGProps } from 'react';
2
2
  import { ResponsiveValue } from 'styled-system';
3
+ type ToastVariantType = 'success' | 'warning';
3
4
  type Props = {
4
5
  /**
5
6
  * 변주에 대해 정의합니다.
6
7
  */
7
- variant?: 'success' | 'warning';
8
+ variant?: ToastVariantType;
9
+ /**
10
+ * 아이콘을 정의합니다.
11
+ * 기본값은 variant에 따라 결정됩니다.
12
+ */
13
+ icon?: ComponentType<SVGProps<SVGSVGElement>>;
8
14
  /**
9
15
  * 크기 변화에 대한 행동을 정의합니다.
10
16
  * 반응형 디자인이 적용됩니다.
11
17
  */
12
18
  resizing?: ResponsiveValue<'hug' | 'fill'>;
13
19
  };
14
- declare const Toast: ({ variant, resizing, children }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
20
+ declare const Toast: ({ variant, icon: Icon, resizing, children, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
15
21
  export default Toast;
16
22
  export type { Props as ToastProps };
package/dist/index.js CHANGED
@@ -7432,17 +7432,16 @@ const ThemeProvider = ({
7432
7432
 
7433
7433
  const Toast = ({
7434
7434
  variant = 'success',
7435
+ icon: Icon = variant === 'success' ? icons.CheckInCircleIcon : icons.ExclamationPointInCircleIcon,
7435
7436
  resizing = 'hug',
7436
7437
  children
7437
7438
  }) => {
7438
- const IconByVariant = {
7439
- success: icons.CheckInCircleIcon,
7440
- warning: icons.ExclamationPointInCircleIcon
7441
- }[variant];
7442
7439
  return /*#__PURE__*/jsxRuntime.jsxs(BaseToast, {
7443
7440
  variant: variant,
7444
7441
  resizing: resizing,
7445
- children: [/*#__PURE__*/jsxRuntime.jsx(IconByVariant, {}), children]
7442
+ children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
7443
+ className: 'toast__leading_icon'
7444
+ }), children]
7446
7445
  });
7447
7446
  };
7448
7447
  const BaseToast = /*#__PURE__*/styled__default.default.div.withConfig({
@@ -7462,11 +7461,7 @@ const BaseToast = /*#__PURE__*/styled__default.default.div.withConfig({
7462
7461
  'fontSize': theme.fontSizes.s,
7463
7462
  'fontWeight': theme.fontWeights.medium,
7464
7463
  'lineHeight': theme.lineHeights[2],
7465
- '& div': {
7466
- margin: 0,
7467
- display: 'inline-block'
7468
- },
7469
- '& svg': {
7464
+ '& .toast__leading_icon': {
7470
7465
  width: 24,
7471
7466
  minWidth: 24,
7472
7467
  height: 24,
@@ -7478,12 +7473,12 @@ const BaseToast = /*#__PURE__*/styled__default.default.div.withConfig({
7478
7473
  prop: 'variant',
7479
7474
  variants: {
7480
7475
  success: {
7481
- '& svg': {
7476
+ '& .toast__leading_icon': {
7482
7477
  color: theme.colors['icon/success']
7483
7478
  }
7484
7479
  },
7485
7480
  warning: {
7486
- '& svg': {
7481
+ '& .toast__leading_icon': {
7487
7482
  color: theme.colors['icon/warning']
7488
7483
  }
7489
7484
  }
@@ -6,17 +6,16 @@ import { variant } from '../../node_modules/@styled-system/variant/dist/index.es
6
6
 
7
7
  const Toast = ({
8
8
  variant = 'success',
9
+ icon: Icon = variant === 'success' ? CheckInCircleIcon : ExclamationPointInCircleIcon,
9
10
  resizing = 'hug',
10
11
  children
11
12
  }) => {
12
- const IconByVariant = {
13
- success: CheckInCircleIcon,
14
- warning: ExclamationPointInCircleIcon
15
- }[variant];
16
13
  return /*#__PURE__*/jsxs(BaseToast, {
17
14
  variant: variant,
18
15
  resizing: resizing,
19
- children: [/*#__PURE__*/jsx(IconByVariant, {}), children]
16
+ children: [/*#__PURE__*/jsx(Icon, {
17
+ className: 'toast__leading_icon'
18
+ }), children]
20
19
  });
21
20
  };
22
21
  const BaseToast = /*#__PURE__*/styled.div.withConfig({
@@ -36,11 +35,7 @@ const BaseToast = /*#__PURE__*/styled.div.withConfig({
36
35
  'fontSize': theme.fontSizes.s,
37
36
  'fontWeight': theme.fontWeights.medium,
38
37
  'lineHeight': theme.lineHeights[2],
39
- '& div': {
40
- margin: 0,
41
- display: 'inline-block'
42
- },
43
- '& svg': {
38
+ '& .toast__leading_icon': {
44
39
  width: 24,
45
40
  minWidth: 24,
46
41
  height: 24,
@@ -52,12 +47,12 @@ const BaseToast = /*#__PURE__*/styled.div.withConfig({
52
47
  prop: 'variant',
53
48
  variants: {
54
49
  success: {
55
- '& svg': {
50
+ '& .toast__leading_icon': {
56
51
  color: theme.colors['icon/success']
57
52
  }
58
53
  },
59
54
  warning: {
60
- '& svg': {
55
+ '& .toast__leading_icon': {
61
56
  color: theme.colors['icon/warning']
62
57
  }
63
58
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.65.1",
3
+ "version": "2.66.0",
4
4
  "description": "React components, hooks for create teamturing web application",
5
5
  "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
6
6
  "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -65,5 +65,5 @@
65
65
  "react-textarea-autosize": "^8.5.3",
66
66
  "styled-system": "^5.1.5"
67
67
  },
68
- "gitHead": "9fae1892c2d8231b05ec646230e468f4f0263428"
68
+ "gitHead": "41e122dba2061e6ccd79e36a744a3092fa80f1c5"
69
69
  }