@mrshmllw/smores-react 15.1.6 → 15.1.7
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.
|
@@ -45,8 +45,8 @@ export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, ex
|
|
|
45
45
|
const textColor = styles[type].textColor;
|
|
46
46
|
const iconColor = styles[type].iconColor;
|
|
47
47
|
const resolvedIconColor = resolveToThemeColor(iconColor, theme);
|
|
48
|
-
const iconToRender = iconComponent ? (_jsx(IconContainer, { "$size": 24, "$iconColor": resolvedIconColor, style: { marginRight: '12px' }, children: iconComponent })) : leadingIcon ? (_jsx(Icon, { mr: "
|
|
49
|
-
return (_jsxs(BannerWrapper, { p: "
|
|
48
|
+
const iconToRender = iconComponent ? (_jsx(IconContainer, { "$size": 24, "$iconColor": resolvedIconColor, style: { marginRight: '12px' }, children: iconComponent })) : leadingIcon ? (_jsx(Icon, { mr: "space.150", render: leadingIcon, size: 24, color: iconColor })) : null;
|
|
49
|
+
return (_jsxs(BannerWrapper, { p: "space.300", mt: { custom: topOffset }, flex: true, justifyContent: "space-between", "$backgroundColour": styles[type].backgroundColor, children: [_jsxs(Box, { flex: true, alignItems: "center", children: [iconToRender, _jsx(Text, { typo: "headline-small", color: textColor, children: message })] }), _jsxs(Box, { flex: true, alignItems: "center", children: [canManuallyClose && (_jsx(GenericButton, { onClick: () => deleteBanner(id), "aria-label": `close banner ${message}`, children: showCloseIcon ? (_jsx(IconContainer, { "$size": 16, children: _jsx(FontAwesomeIcon, { icon: faXmark, color: resolveToThemeColor(iconColor, theme) }) })) : (_jsx(UnderlinedText, { tag: "span", typo: "headline-small", color: textColor, children: "Dismiss" })) })), exploreAction && (_jsx(GenericButton, { onClick: exploreAction, "aria-label": `cta ${message}`, children: _jsxs(Box, { flex: true, alignItems: "center", children: [showExploreText && (_jsx(UnderlinedText, { ml: "space.150", tag: "span", typo: "headline-small", color: textColor, children: "Explore" })), showExploreIcon && (_jsx(IconContainer, { "$size": 24, style: { marginLeft: '12px' }, children: _jsx(FontAwesomeIcon, { color: resolvedIconColor, icon: faArrowRight }) }))] }) }))] })] }, id));
|
|
50
50
|
};
|
|
51
51
|
const BannerWrapper = styled(Box)(({ $backgroundColour }) => css `
|
|
52
52
|
border-radius: 0px 0px 16px 16px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,OAAO,EAAY,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EACL,YAAY,EACZ,OAAO,GACR,MAAM,kDAAkD,CAAA;AAczD,MAAM,CAAC,MAAM,UAAU,GAAc,CAAC,EACpC,IAAI,EACJ,aAAa,GAAG,CAAC,EACjB,EAAE,EACF,OAAO,EACP,SAAS,EACT,aAAa,EACb,eAAe,EACf,eAAe,EACf,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,SAAS,GACV,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,MAAM,GAAmC;QAC7C,MAAM,EAAE;YACN,SAAS,EAAE,iBAAiB;YAC5B,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;YAC/C,SAAS,EAAE,iBAAiB;SAC7B;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,oBAAoB;YAC/B,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;YACnD,SAAS,EAAE,oBAAoB;SAChC;QACD,OAAO,EAAE;YACP,SAAS,EAAE,oBAAoB;YAC/B,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;YAC9C,SAAS,EAAE,oBAAoB;SAChC;QACD,OAAO,EAAE;YACP,SAAS,EAAE,oBAAoB;YAC/B,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;YACnD,SAAS,EAAE,oBAAoB;SAChC;KACF,CAAA;IACD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,SAAS;YAAE,OAAM;QACrB,IAAI,IAAI,KAAK,UAAU;YAAE,OAAO,YAAY,CAAC,EAAE,CAAC,CAAA;aAC3C,CAAC;YACJ,OAAM;QACR,CAAC;IACH,CAAC,CAAA;IACD,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,CAAA;IAExD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAA;IACxC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAA;IACxC,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAE/D,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,aACL,EAAE,gBACG,iBAAiB,EAC7B,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,YAE7B,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,KAAC,IAAI,IAAC,EAAE,EAAC,
|
|
1
|
+
{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { useTimeout } from '../hooks'\nimport { Banner } from './types'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faArrowRight,\n faXmark,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\ntype StylesItem = {\n iconColor: NewColor\n backgroundColor: string\n textColor: NewColor\n}\n\ntype BannerType = 'upsell' | 'critical' | 'general' | 'success'\n\ninterface Props extends Banner {\n deleteBanner: (id: string) => void\n}\n\nexport const BannerItem: FC<Props> = ({\n type,\n autoCloseTime = 4,\n id,\n message,\n topOffset,\n exploreAction,\n showExploreText,\n showExploreIcon,\n leadingIcon,\n iconComponent,\n canManuallyClose,\n showCloseIcon,\n deleteBanner,\n noTimeout,\n}) => {\n const theme = useTheme()\n\n const styles: Record<BannerType, StylesItem> = {\n upsell: {\n iconColor: 'color.icon.base',\n backgroundColor: theme.color.surface.brand[300],\n textColor: 'color.text.base',\n },\n critical: {\n iconColor: 'color.icon.inverse',\n backgroundColor: theme.color.feedback.negative[200],\n textColor: 'color.text.inverse',\n },\n general: {\n iconColor: 'color.icon.inverse',\n backgroundColor: theme.color.surface.base[900],\n textColor: 'color.text.inverse',\n },\n success: {\n iconColor: 'color.icon.inverse',\n backgroundColor: theme.color.feedback.positive[200],\n textColor: 'color.text.inverse',\n },\n }\n const autoCloseBaner = () => {\n if (noTimeout) return\n if (type !== 'critical') return deleteBanner(id)\n else {\n return\n }\n }\n useTimeout(() => autoCloseBaner(), autoCloseTime * 1000)\n\n const textColor = styles[type].textColor\n const iconColor = styles[type].iconColor\n const resolvedIconColor = resolveToThemeColor(iconColor, theme)\n\n const iconToRender = iconComponent ? (\n <IconContainer\n $size={24}\n $iconColor={resolvedIconColor}\n style={{ marginRight: '12px' }}\n >\n {iconComponent}\n </IconContainer>\n ) : leadingIcon ? (\n <Icon mr=\"space.150\" render={leadingIcon} size={24} color={iconColor} />\n ) : null\n\n return (\n <BannerWrapper\n p=\"space.300\"\n mt={{ custom: topOffset }}\n key={id}\n flex\n justifyContent=\"space-between\"\n $backgroundColour={styles[type].backgroundColor}\n >\n <Box flex alignItems=\"center\">\n {iconToRender}\n <Text typo=\"headline-small\" color={textColor}>\n {message}\n </Text>\n </Box>\n <Box flex alignItems=\"center\">\n {canManuallyClose && (\n <GenericButton\n onClick={() => deleteBanner(id)}\n aria-label={`close banner ${message}`}\n >\n {showCloseIcon ? (\n <IconContainer $size={16}>\n <FontAwesomeIcon\n icon={faXmark}\n color={resolveToThemeColor(iconColor, theme)}\n />\n </IconContainer>\n ) : (\n <UnderlinedText\n tag=\"span\"\n typo=\"headline-small\"\n color={textColor}\n >\n Dismiss\n </UnderlinedText>\n )}\n </GenericButton>\n )}\n {exploreAction && (\n <GenericButton onClick={exploreAction} aria-label={`cta ${message}`}>\n <Box flex alignItems=\"center\">\n {showExploreText && (\n <UnderlinedText\n ml=\"space.150\"\n tag=\"span\"\n typo=\"headline-small\"\n color={textColor}\n >\n Explore\n </UnderlinedText>\n )}\n {showExploreIcon && (\n <IconContainer $size={24} style={{ marginLeft: '12px' }}>\n <FontAwesomeIcon\n color={resolvedIconColor}\n icon={faArrowRight}\n />\n </IconContainer>\n )}\n </Box>\n </GenericButton>\n )}\n </Box>\n </BannerWrapper>\n )\n}\n\nconst BannerWrapper = styled(Box)<{ $backgroundColour: string }>(\n ({ $backgroundColour }) => css`\n border-radius: 0px 0px 16px 16px;\n background-color: ${$backgroundColour};\n `,\n)\n\nconst GenericButton = styled.button`\n cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n text-decoration: underline;\n`\n"]}
|