@teamturing/react-kit 2.23.7 → 2.24.0

package/dist/core/Flash/index.d.ts

@@ -1,13 +1,15 @@
-import { ComponentType, HTMLAttributes, SVGProps } from 'react';
+import { ComponentType, HTMLAttributes, HTMLProps, ReactElement, SVGProps } from 'react';
 import { SxProp } from '../../utils/styled-system';
-type FlashVariantType = 'neutral' | 'danger';
+type FlashVariantType = 'neutral' | 'danger' | 'assist';
 type Props = {
     variant?: FlashVariantType;
     icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    buttons?: Array<ReactElement<HTMLProps<HTMLButtonElement>>>;
 } & SxProp & HTMLAttributes<HTMLDivElement>;
 declare const _default: import("react").ForwardRefExoticComponent<{
     variant?: FlashVariantType | undefined;
     icon?: ComponentType<SVGProps<SVGSVGElement>> | undefined;
+    buttons?: ReactElement<HTMLProps<HTMLButtonElement>, string | import("react").JSXElementConstructor<any>>[] | undefined;
 } & SxProp & HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -19076,60 +19076,97 @@ const BaseEmptyState = styled__default.default.div`
 
 const Flash = ({
   variant = 'neutral',
-  icon: Icon = SvgInfoInCircle,
+  icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : SvgInfoInCircle,
+  buttons,
   children,
   ...props
 }, ref) => {
+  const isButtonExist = !isNullable(buttons) && buttons.length > 0;
   return /*#__PURE__*/jsxRuntimeExports.jsxs(BaseFlash, {
     ref: ref,
     variant: variant,
     ...props,
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), children]
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      className: 'flash__content',
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+        className: 'flash__content__children',
+        children: children
+      }), isButtonExist ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        className: 'flash__content__buttons',
+        children: buttons
+      }) : null]
+    })]
   });
 };
 const BaseFlash = styled__default.default.div`
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: ${({
+  theme
+}) => forcePixelValue(theme.space[4])};
   border-radius: ${({
   theme
 }) => forcePixelValue(theme.radii.xs)};
+
+  & .flash__content__children {
+    font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+    font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+    line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+    color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+    word-break: keep-all;
+    white-space: pre-wrap;
+  }
+
+  & .flash__content__buttons {
+    margin-top: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+  }
+
   & > svg {
-    min-width: ${forcePixelValue(16)};
-    height: ${forcePixelValue(16)};
+    min-width: ${forcePixelValue(20)};
+    height: ${forcePixelValue(20)};
     margin-right: ${({
   theme
 }) => forcePixelValue(theme.space[2])};
   }
-  word-break: keep-all;
 
-  ${variant({
+  ${({
+  theme
+}) => variant({
   prop: 'variant',
   variants: {
     neutral: {
-      'display': 'flex',
-      'flexDirection': 'row',
-      'alignItems': 'center',
-      'padding': 4,
-      'fontSize': 'xs',
-      'fontWeight': 'medium',
-      'lineHeight': 2,
-      'color': 'text/neutral',
       'backgroundColor': 'bg/neutral',
       '& > svg': {
         color: 'icon/neutral/bold'
       }
     },
     danger: {
-      'display': 'flex',
-      'flexDirection': 'row',
-      'alignItems': 'center',
-      'padding': 4,
-      'fontSize': 'xs',
-      'fontWeight': 'medium',
-      'lineHeight': 2,
-      'color': 'text/neutral',
       'backgroundColor': 'bg/danger',
       '& > svg': {
         color: 'icon/danger'
       }
+    },
+    assist: {
+      'background': `linear-gradient(${theme.colors['surface/overlay']}, ${theme.colors['surface/overlay']}) padding-box, linear-gradient(${theme.gradients['border/accent/violet']}) border-box`,
+      'borderWidth': 1,
+      'borderStyle': 'solid',
+      'borderColor': 'transparent',
+      '& > svg': {
+        color: 'icon/primary'
+      }
     }
   }
 })}
@@ -36017,7 +36054,8 @@ const FormControl = ({
   disabled,
   required,
   additionalInputComponentCandidates = [],
-  sx
+  sx,
+  ...props
 }, ref) => {
   const [relocatableComponentsObject, restComponents] = useRelocation({
     children: propChildren,
@@ -36044,6 +36082,7 @@ const FormControl = ({
         columnGap: 2,
         ...sx
       },
+      ...props,
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
         display: 'inline-flex',
         children: /*#__PURE__*/React.cloneElement(InputComponent, {
@@ -36072,6 +36111,7 @@ const FormControl = ({
         },
         ...sx
       },
+      ...props,
       children: [relocatableComponentsObject.label, /*#__PURE__*/React.cloneElement(InputComponent, {
         id,
         disabled,

package/esm/core/Flash/index.js

@@ -1,6 +1,9 @@
 import { forwardRef } from 'react';
 import SvgInfoInCircle from '../../packages/icons/esm/InfoInCircle.js';
+import SvgTwinkle from '../../packages/icons/esm/Twinkle.js';
+import SvgWarning from '../../packages/icons/esm/Warning.js';
 import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { isNullable } from '../../packages/utils/esm/isNullable.js';
 import styled from 'styled-components';
 import '../../node_modules/styled-system/dist/index.esm.js';
 import { sx } from '../../utils/styled-system/index.js';
@@ -9,60 +12,97 @@ import { variant } from '../../node_modules/@styled-system/variant/dist/index.es
 
 const Flash = ({
   variant = 'neutral',
-  icon: Icon = SvgInfoInCircle,
+  icon: Icon = variant === 'danger' ? SvgWarning : variant === 'assist' ? SvgTwinkle : SvgInfoInCircle,
+  buttons,
   children,
   ...props
 }, ref) => {
+  const isButtonExist = !isNullable(buttons) && buttons.length > 0;
   return /*#__PURE__*/jsxRuntimeExports.jsxs(BaseFlash, {
     ref: ref,
     variant: variant,
     ...props,
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), children]
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {}), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      className: 'flash__content',
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
+        className: 'flash__content__children',
+        children: children
+      }), isButtonExist ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        className: 'flash__content__buttons',
+        children: buttons
+      }) : null]
+    })]
   });
 };
 const BaseFlash = styled.div`
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: ${({
+  theme
+}) => forcePixelValue(theme.space[4])};
   border-radius: ${({
   theme
 }) => forcePixelValue(theme.radii.xs)};
+
+  & .flash__content__children {
+    font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+    font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+    line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+    color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+    word-break: keep-all;
+    white-space: pre-wrap;
+  }
+
+  & .flash__content__buttons {
+    margin-top: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+  }
+
   & > svg {
-    min-width: ${forcePixelValue(16)};
-    height: ${forcePixelValue(16)};
+    min-width: ${forcePixelValue(20)};
+    height: ${forcePixelValue(20)};
     margin-right: ${({
   theme
 }) => forcePixelValue(theme.space[2])};
   }
-  word-break: keep-all;
 
-  ${variant({
+  ${({
+  theme
+}) => variant({
   prop: 'variant',
   variants: {
     neutral: {
-      'display': 'flex',
-      'flexDirection': 'row',
-      'alignItems': 'center',
-      'padding': 4,
-      'fontSize': 'xs',
-      'fontWeight': 'medium',
-      'lineHeight': 2,
-      'color': 'text/neutral',
       'backgroundColor': 'bg/neutral',
       '& > svg': {
         color: 'icon/neutral/bold'
       }
     },
     danger: {
-      'display': 'flex',
-      'flexDirection': 'row',
-      'alignItems': 'center',
-      'padding': 4,
-      'fontSize': 'xs',
-      'fontWeight': 'medium',
-      'lineHeight': 2,
-      'color': 'text/neutral',
       'backgroundColor': 'bg/danger',
       '& > svg': {
         color: 'icon/danger'
       }
+    },
+    assist: {
+      'background': `linear-gradient(${theme.colors['surface/overlay']}, ${theme.colors['surface/overlay']}) padding-box, linear-gradient(${theme.gradients['border/accent/violet']}) border-box`,
+      'borderWidth': 1,
+      'borderStyle': 'solid',
+      'borderColor': 'transparent',
+      '& > svg': {
+        color: 'icon/primary'
+      }
     }
   }
 })}

package/esm/core/FormControl/index.js

@@ -20,7 +20,8 @@ const FormControl = ({
   disabled,
   required,
   additionalInputComponentCandidates = [],
-  sx
+  sx,
+  ...props
 }, ref) => {
   const [relocatableComponentsObject, restComponents] = useRelocation({
     children: propChildren,
@@ -47,6 +48,7 @@ const FormControl = ({
         columnGap: 2,
         ...sx
       },
+      ...props,
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
         display: 'inline-flex',
         children: /*#__PURE__*/cloneElement(InputComponent, {
@@ -75,6 +77,7 @@ const FormControl = ({
         },
         ...sx
       },
+      ...props,
       children: [relocatableComponentsObject.label, /*#__PURE__*/cloneElement(InputComponent, {
         id,
         disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.23.7",
+  "version": "2.24.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "d3639daaffc362cc5ab07fa2591d74d0ad0091c1"
+  "gitHead": "4552a5ead57814709712fd7c644eddba24b95f6e"
 }