@fountain-ui/core 2.0.0-beta.92 → 2.0.0-beta.94

package/src/SnackbarContent/LegacySnackbarContent.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { lightTheme, darkTheme } from '@fountain-ui/styles';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { rgb } from '@fountain-ui/utils';
+import { createFontStyle, css, useTheme } from '../styles';
+import ButtonBase from '../ButtonBase';
+import Column from '../Column';
+import Paper from '../Paper';
+import Spacer from '../Spacer';
+import Typography from '../Typography';
+import type SnackbarContentProps from './LegacySnackbarContentProps';
+
+type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;
+
+const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {
+    const theme = useTheme();
+
+    const backgroundColor = theme.palette.primary.main;
+    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);
+
+    return {
+        root: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,
+            borderRadius: theme.shape.roundness,
+            paddingHorizontal: theme.spacing(4),
+            paddingVertical: theme.spacing(3),
+        },
+        action: {
+            paddingVertical: theme.spacing(2),
+        },
+    };
+};
+
+export default function SnackbarContent(props: SnackbarContentProps) {
+    const {
+        actionLabel,
+        message,
+        title,
+        onActionPress,
+        style,
+        startIcon,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const theme = useTheme();
+
+    const titleFontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.subtitle2,
+        color: theme.mode === 'light'
+            ? lightTheme.palette.primary.contrastTextColor
+            : lightTheme.palette.primary.main,
+    });
+
+    const messageFontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.body2,
+        color: title
+            ? theme.mode === 'light'
+                ? darkTheme.palette.text.secondary
+                : lightTheme.palette.text.secondary
+            : theme.palette.primary.contrastTextColor,
+    });
+
+    const labelFontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.button2,
+        color: theme.palette.primary.contrastTextColor,
+    });
+
+    const labelStyle = css([
+        labelFontStyle,
+        { padding: theme.spacing(2) },
+    ]);
+
+    return (
+        <Paper
+            elevation={0}
+            style={css([
+                styles.root,
+                actionLabel ? styles.action : undefined,
+                style,
+            ])}
+            {...otherProps}
+        >
+            {startIcon ? (
+                <React.Fragment>
+                    {startIcon}
+
+                    <Spacer size={3}/>
+                </React.Fragment>
+            ) : null}
+
+            <Column>
+                {title ? (
+                    <Typography
+                        children={title}
+                        style={css([titleFontStyle])}
+                    />
+                ) : null}
+
+                <Text
+                    children={message}
+                    style={css([messageFontStyle])}
+                />
+            </Column>
+
+            {actionLabel ? (
+                <React.Fragment>
+                    <Spacer flex={1}/>
+
+                    <Spacer size={1}/>
+
+                    <ButtonBase
+                        onPress={onActionPress}
+                        pressEffect={'none'}
+                    >
+                        <Text
+                            children={actionLabel}
+                            style={labelStyle}
+                        />
+                    </ButtonBase>
+                </React.Fragment>
+            ) : null}
+        </Paper>
+    );
+};

package/src/SnackbarContent/LegacySnackbarContentProps.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { OverridableComponentProps } from '../types';
+import type { PaperProps } from '../Paper';
+
+export default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {
+    /**
+     * The text to use for the action component.
+     */
+    actionLabel?: string;
+
+    /**
+     * The message to display.
+     */
+    message?: string;
+
+    /**
+     * Callback fired when the action component pressed.
+     */
+    onActionPress?: () => void;
+
+    /**
+     * Element placed before the title and message.
+     */
+    startIcon?: React.ReactElement;
+
+    /**
+     * The title to display.
+     */
+    title?: string;
+}> {}

package/src/SnackbarContent/SnackbarContent.tsx

@@ -1,46 +1,41 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { lightTheme, darkTheme } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { rgb } from '@fountain-ui/utils';
 import { createFontStyle, css, useTheme } from '../styles';
-import ButtonBase from '../ButtonBase';
+import ButtonBase from '../ButtonBase/ButtonBase';
 import Column from '../Column';
-import Paper from '../Paper';
 import Spacer from '../Spacer';
 import Typography from '../Typography';
 import type SnackbarContentProps from './SnackbarContentProps';
+import StatusIcon from './StatusIcon';
 
-type SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;
+type SnackBarContentStyles = NamedStylesStringUnion<'root'>;
 
 const useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {
     const theme = useTheme();
 
-    const backgroundColor = theme.palette.primary.main;
-    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);
-
     return {
         root: {
             flexDirection: 'row',
             alignItems: 'center',
-            backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,
-            borderRadius: theme.shape.roundness,
+            backgroundColor: theme.palette.surface.accent,
+            borderRadius: 22,
+            paddingBottom: theme.spacing(2.25),
             paddingHorizontal: theme.spacing(4),
-            paddingVertical: theme.spacing(3),
-        },
-        action: {
-            paddingVertical: theme.spacing(2),
+            paddingTop: theme.spacing(2),
         },
     };
 };
 
 export default function SnackbarContent(props: SnackbarContentProps) {
     const {
-        actionLabel,
+        actionContent,
         message,
         title,
-        onActionPress,
-        style,
+        onPress,
+        style: styleProp,
+        status = 'info',
         startIcon,
         ...otherProps
     } = props;
@@ -50,39 +45,46 @@ export default function SnackbarContent(props: SnackbarContentProps) {
     const theme = useTheme();
 
     const titleFontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.subtitle2,
-        color: theme.mode === 'light'
-            ? lightTheme.palette.primary.contrastTextColor
-            : lightTheme.palette.primary.main,
+        selector: (_) => typographyOf({
+            fontSize: 14,
+            lineHeight: 18.2,
+            fontFamily: 'Pretendard-SemiBold',
+            letterSpacing: 0,
+        }),
+        color: theme.palette.text.strongInverse,
     });
 
     const messageFontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.body2,
-        color: title
-            ? theme.mode === 'light'
-                ? darkTheme.palette.text.secondary
-                : lightTheme.palette.text.secondary
-            : theme.palette.primary.contrastTextColor,
+        selector: (_) => typographyOf({
+            fontSize: 13,
+            lineHeight: 16.9,
+            fontFamily: 'Pretendard-Regular',
+            letterSpacing: 0,
+        }),
+        color: theme.palette.text.strongInverse,
     });
 
     const labelFontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.button2,
-        color: theme.palette.primary.contrastTextColor,
+        selector: (_) => typographyOf({
+            fontSize: 13,
+            lineHeight: 16.25,
+            fontFamily: 'LexendDeca-SemiBold',
+            letterSpacing: -0.26,
+        }),
+        color: theme.palette.text.accent,
     });
 
-    const labelStyle = css([
-        labelFontStyle,
-        { padding: theme.spacing(2) },
+    const rootStyle = css([
+        styles.root,
+        startIcon ? { borderRadius: theme.shape.radius.xl } : undefined,
+        styleProp,
     ]);
 
     return (
-        <Paper
-            elevation={0}
-            style={css([
-                styles.root,
-                actionLabel ? styles.action : undefined,
-                style,
-            ])}
+        <ButtonBase
+            disabled={!onPress}
+            onPress={onPress}
+            style={rootStyle}
             {...otherProps}
         >
             {startIcon ? (
@@ -91,6 +93,12 @@ export default function SnackbarContent(props: SnackbarContentProps) {
 
                     <Spacer size={3}/>
                 </React.Fragment>
+            ) : status !== 'info' ? (
+                <React.Fragment>
+                    <StatusIcon status={status}/>
+
+                    <Spacer size={1.5}/>
+                </React.Fragment>
             ) : null}
 
             <Column>
@@ -107,23 +115,20 @@ export default function SnackbarContent(props: SnackbarContentProps) {
                 />
             </Column>
 
-            {actionLabel ? (
+            {actionContent ? (
                 <React.Fragment>
                     <Spacer flex={1}/>
 
                     <Spacer size={1}/>
 
-                    <ButtonBase
-                        onPress={onActionPress}
-                        pressEffect={'none'}
-                    >
+                    {typeof actionContent === 'string' ? (
                         <Text
-                            children={actionLabel}
-                            style={labelStyle}
+                            children={actionContent}
+                            style={labelFontStyle}
                         />
-                    </ButtonBase>
+                    ) : (actionContent)}
                 </React.Fragment>
             ) : null}
-        </Paper>
+        </ButtonBase>
     );
 };

package/src/SnackbarContent/SnackbarContentProps.ts

@@ -1,30 +1,13 @@
-import React from 'react';
+import type { ButtonBaseProps } from '../ButtonBase';
+import type SnackbarProps from '../Snackbar/SnackbarProps';
 import type { OverridableComponentProps } from '../types';
-import type { PaperProps } from '../Paper';
 
-export default interface SnackbarContentProps extends OverridableComponentProps<PaperProps, {
-    /**
-     * The text to use for the action component.
-     */
-    actionLabel?: string;
+type SnackbarContentBaseProps = Pick<SnackbarProps,
+    | 'actionContent'
+    | 'message'
+    | 'onPress'
+    | 'startIcon'
+    | 'status'
+    | 'title'>
 
-    /**
-     * The message to display.
-     */
-    message?: string;
-
-    /**
-     * Callback fired when the action component pressed.
-     */
-    onActionPress?: () => void;
-
-    /**
-     * Element placed before the title and message.
-     */
-    startIcon?: React.ReactElement;
-
-    /**
-     * The title to display.
-     */
-    title?: string;
-}> {}
+export default interface SnackbarContentProps extends OverridableComponentProps<Omit<ButtonBaseProps, 'children'>, SnackbarContentBaseProps> {}

package/src/SnackbarContent/StatusIcon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { CheckCircle, InfoCircle } from '../internal/icons';
+import { useTheme } from '../styles';
+import type SnackbarContentProps from './SnackbarContentProps';
+
+interface StatusIconProps {
+    status: SnackbarContentProps['status'];
+}
+
+export default function StatusIcon(props: StatusIconProps) {
+    const { status } = props;
+
+    const theme = useTheme();
+
+    switch (status) {
+        case 'success':
+            return (
+                <CheckCircle
+                    color={'accent'}
+                    enableV2={true}
+                    height={17}
+                    width={14}
+                />
+            );
+        case 'fail':
+            return (
+                <InfoCircle
+                    enableV2={true}
+                    fill={theme.palette.status.danger}
+                    height={17}
+                    width={14}
+                />
+            );
+        default:
+            return null;
+    }
+}

package/src/SnackbarContent/index.ts

@@ -1,2 +1,2 @@
-export { default } from './SnackbarContent';
-export type { default as SnackbarContentProps } from './SnackbarContentProps';
+export { default } from './LegacySnackbarContent';
+export type { default as SnackbarContentProps } from './LegacySnackbarContentProps';

package/src/SvgIcon/LegacySvgIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Svg from 'react-native-svg';
+import { css, useTheme } from '../styles';
+import type SvgIconProps from './LegacySvgIconProps';
+
+export default function SvgIcon(props: SvgIconProps) {
+    const {
+        color: colorProp = 'primary',
+        height = 24,
+        style: styleProp,
+        viewBox = '0 0 24 24',
+        width = 24,
+        ...otherProps
+    }: SvgIconProps = props;
+
+    const theme = useTheme();
+
+    const color = theme.palette[colorProp].main;
+
+    const style = css([
+        { flexShrink: 0 },
+        styleProp,
+    ]);
+
+    return (
+        <Svg
+            color={color}
+            fill={'currentColor'}
+            height={height}
+            style={style}
+            viewBox={viewBox}
+            width={width}
+            {...otherProps}
+        />
+    );
+};

package/src/SvgIcon/LegacySvgIconProps.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { SvgProps } from 'react-native-svg';
+import type { CommonComponentColor, OverridableComponentProps } from '../types';
+
+export type SvgIconColor = CommonComponentColor;
+
+export default interface SvgIconProps extends OverridableComponentProps<SvgProps, {
+    /**
+     * Node passed into the SVG element.
+     */
+    children: React.ReactNode;
+
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
+     */
+    color?: SvgIconColor;
+
+    /**
+     * The color of the component. It is treated as higher priority than `color` prop if provided.
+     */
+    fill?: SvgProps['fill'];
+
+    /**
+     * The height applied to the icon.
+     * @default 24
+     */
+    height?: SvgProps['height'];
+
+    /**
+     * Allows you to redefine what the coordinates without units mean inside an SVG element.
+     * @default '0 0 20 20'
+     */
+    viewBox?: SvgProps['viewBox'];
+
+    /**
+     * The width applied to the icon.
+     * @default 24
+     */
+    width?: SvgProps['width'];
+}> {}

package/src/SvgIcon/SvgIcon.tsx

@@ -2,20 +2,31 @@ import React from 'react';
 import Svg from 'react-native-svg';
 import { css, useTheme } from '../styles';
 import type SvgIconProps from './SvgIconProps';
+import type { SvgIconColor, SvgIconSize } from './SvgIconProps';
+import { svgIconSizeMap } from './SvgIconProps';
 
 export default function SvgIcon(props: SvgIconProps) {
     const {
-        color: colorProp = 'primary',
-        height = 24,
+        color: colorProp = 'strong' as SvgIconColor,
+        height: heightProp,
+        scale = 1,
+        size = 'medium' as SvgIconSize,
         style: styleProp,
+        translateX = 0,
+        translateY = 0,
         viewBox = '0 0 24 24',
-        width = 24,
+        width: widthProp,
         ...otherProps
-    }: SvgIconProps = props;
+    } = props;
 
     const theme = useTheme();
 
-    const color = theme.palette[colorProp].main;
+    const color = theme.palette.icon[colorProp];
+
+    const iconSize = svgIconSizeMap[size];
+
+    const height = heightProp ?? iconSize;
+    const width = widthProp ?? iconSize;
 
     const style = css([
         { flexShrink: 0 },
@@ -27,7 +38,10 @@ export default function SvgIcon(props: SvgIconProps) {
             color={color}
             fill={'currentColor'}
             height={height}
+            scale={scale}
             style={style}
+            translateX={translateX}
+            translateY={translateY}
             viewBox={viewBox}
             width={width}
             {...otherProps}

package/src/SvgIcon/SvgIconProps.ts

@@ -1,8 +1,31 @@
 import React from 'react';
 import type { SvgProps } from 'react-native-svg';
-import type { CommonComponentColor, OverridableComponentProps } from '../types';
+import type { OverridableComponentProps } from '../types';
 
-export type SvgIconColor = CommonComponentColor;
+export const svgIconColors = [
+    'strong',
+    'strongInverse',
+    'base',
+    'baseInverse',
+    'baseOpacity',
+    'baseOpacityInverse',
+    'weak',
+    'weakInverse',
+    'weakOpacity',
+    'weakOpacityInverse',
+    'accent',
+    'accentAlt',
+] as const;
+export type SvgIconColor = typeof svgIconColors[number];
+
+export const svgIconSizeMap = {
+    small: 16,
+    medium: 20,
+    large: 24,
+} as const;
+
+export type SvgIconSize = keyof typeof svgIconSizeMap;
+export const svgIconSizes = Object.keys(svgIconSizeMap) as SvgIconSize[];
 
 export default interface SvgIconProps extends OverridableComponentProps<SvgProps, {
     /**
@@ -12,7 +35,7 @@ export default interface SvgIconProps extends OverridableComponentProps<SvgProps
 
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
+     * @default 'strong'
      */
     color?: SvgIconColor;
 
@@ -23,19 +46,23 @@ export default interface SvgIconProps extends OverridableComponentProps<SvgProps
 
     /**
      * The height applied to the icon.
-     * @default 24
      */
     height?: SvgProps['height'];
 
+    /**
+     * Determines the size of the viewport.
+     * @default 'medium'
+     */
+    size?: SvgIconSize;
+
     /**
      * Allows you to redefine what the coordinates without units mean inside an SVG element.
-     * @default '0 0 20 20'
+     * @default '0 0 24 24'
      */
     viewBox?: SvgProps['viewBox'];
 
     /**
      * The width applied to the icon.
-     * @default 24
      */
     width?: SvgProps['width'];
 }> {}

package/src/SvgIcon/index.ts

@@ -1,2 +1,2 @@
-export { default } from './SvgIcon';
-export type { default as SvgIconProps } from './SvgIconProps';
+export { default } from './LegacySvgIcon';
+export type { default as SvgIconProps } from './LegacySvgIconProps';