@mrshmllw/smores-react 15.1.5 → 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.
|
@@ -52,7 +52,7 @@ const OuterContainer = styled.div(({ open }) => css `
|
|
|
52
52
|
position: absolute;
|
|
53
53
|
width: 100%;
|
|
54
54
|
border-radius: 12px;
|
|
55
|
-
margin-top:
|
|
55
|
+
margin-top: ${({ theme }) => theme.space[100]};
|
|
56
56
|
display: ${open ? 'block' : 'none'};
|
|
57
57
|
max-height: ${open ? '235px' : '48px'};
|
|
58
58
|
background-color: ${({ theme }) => theme.color.surface.base[300]};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAkB,IAAI,EAAE,MAAM,QAAQ,CAAA;AAG7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAA;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAe7D,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,EAAE,EACF,SAAS,GAAG,EAAE,EACd,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CACzC,KAAK,CAAC,OAAO,IAAI,sBAAsB,EACvC,KAAK,CACN,CAAA;IACD,MAAM,iBAAiB,GAAG,mBAAmB,CAC3C,KAAK,CAAC,SAAS,IAAI,iBAAiB,EACpC,KAAK,CACN,CAAA;IAED,OAAO,CACL,MAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,KACjD,WAAW,aAEd,KAAK,IAAI,CACR,KAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAC1C,KAAK,GACD,CACR,EAED,MAAC,KAAK,aAAQ,iBAAiB,SAAO,eAAe,aACnD,KAAC,cAAc,cAAE,KAAK,CAAC,KAAK,GAAkB,EAC9C,KAAC,aAAa,aACL,EAAE,EACT,KAAK,EAAE;4BACL,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;yBACjC,YAED,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,iBAAiB,GAAI,GACpD,IACV,EACR,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,YACxB,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,GAAI,GAChC,IACP,CACb,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACZ,KAAK;wBACM,GAAG;;;;;;;;;;;;GAYxB,CACF,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKjC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;CAS5B,CAAA;AAMD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { ActionListItem, List } from './List'\n\nimport { MarginProps } from '../utils/space'\nimport { resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport type ActionDropdownProps = {\n id?: string\n className?: string\n /** label displayed above the dropdown */\n label?: string\n /** value */\n value: ActionListItem\n /** list of items for the dropdown list */\n list: ActionListItem[]\n /** onSelect handler */\n onSelect: (action: ActionListItem) => void\n} & MarginProps\n\nexport const ActionDropdown: FC<ActionDropdownProps> = ({\n id,\n className = '',\n label,\n value,\n list,\n onSelect,\n ...marginProps\n}) => {\n const [open, setOpen] = useState(false)\n\n const theme = useTheme()\n\n const resolvedBgColor = resolveToThemeColor(\n value.bgColor ?? 'color.background.100',\n theme,\n )\n const resolvedTextColor = resolveToThemeColor(\n value.textColor ?? 'color.text.base',\n theme,\n )\n\n return (\n <Container\n id={id}\n className={className}\n onClick={() => setOpen((currentOpen) => !currentOpen)}\n {...marginProps}\n >\n {label && (\n <Text tag=\"label\" color=\"sesame\" typo=\"label\">\n {label}\n </Text>\n )}\n\n <Label $text={resolvedTextColor} $bg={resolvedBgColor}>\n <SelectedOption>{value.label}</SelectedOption>\n <IconContainer\n $size={20}\n style={{\n rotate: open ? '180deg' : '0deg',\n }}\n >\n <FontAwesomeIcon icon={faChevronDown} color={resolvedTextColor} />\n </IconContainer>\n </Label>\n <OuterContainer open={open}>\n <List options={list} selectOption={onSelect} />\n </OuterContainer>\n </Container>\n )\n}\n\ninterface ISelected {\n $text: string\n $bg: string\n}\n\nconst Label = styled.div<ISelected>(\n ({ $text, $bg }) => css`\n color: ${$text};\n background-color: ${$bg};\n position: relative;\n width: 100%;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: center;\n border-radius: 100px;\n padding: 16px 16px 14px;\n box-sizing: border-box;\n user-select: none;\n `,\n)\n\nconst SelectedOption = styled.span`\n font-size: 14px;\n font-weight: bold;\n white-space: nowrap;\n text-overflow: ellipsis;\n`\n\nconst Container = styled(Box)`\n position: relative;\n display: block;\n width: 210px;\n height: 48px;\n text-align: center;\n cursor: pointer;\n outline: none;\n border-radius: 8px;\n`\n\ninterface IOpen {\n open: boolean\n}\n\nconst OuterContainer = styled.div<IOpen>(\n ({ open }) => css`\n position: absolute;\n width: 100%;\n border-radius: 12px;\n margin-top: ${({ theme }) => theme.space[100]};\n display: ${open ? 'block' : 'none'};\n max-height: ${open ? '235px' : '48px'};\n background-color: ${({ theme }) => theme.color.surface.base[300]};\n overflow-y: ${open ? 'auto' : 'hidden'};\n z-index: 4;\n transition: all 0.2s ease-in-out;\n `,\n)\n"]}
|
|
@@ -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"]}
|