@mrshmllw/smores-react 15.1.24 → 15.1.25
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.
|
@@ -41,14 +41,14 @@ export const SupportMessage = ({ className, description, onClick, rightSideCompo
|
|
|
41
41
|
const theme = useTheme();
|
|
42
42
|
const resolveBackgroundColor = resolveToThemeColor(styles[type].backgroundColor, theme);
|
|
43
43
|
const resolvedIconColor = resolveToThemeColor(styles[type].iconColor, theme);
|
|
44
|
-
return (_jsxs(Wrapper, { className: className, "$backgroundColor": resolveBackgroundColor, onClick: onClick, ...marginProps, children: [_jsx(IconContainer, { "$size": 20, style: { alignSelf: 'flex-start' }, children: _jsx(FontAwesomeIcon, { icon: styles[type].icon, color: resolvedIconColor }) }), _jsxs(Box, { flex: true, direction: "column", mx: "
|
|
44
|
+
return (_jsxs(Wrapper, { className: className, "$backgroundColor": resolveBackgroundColor, onClick: onClick, ...marginProps, children: [_jsx(IconContainer, { "$size": 20, style: { alignSelf: 'flex-start' }, children: _jsx(FontAwesomeIcon, { icon: styles[type].icon, color: resolvedIconColor }) }), _jsxs(Box, { flex: true, direction: "column", mx: "space.100", children: [title && _jsx(Title, { children: title }), isReactElement(description) ? (_jsx(DescriptionBox, { children: description })) : (_jsx(Description, { tag: "p", children: description }))] }), rightSideComponent, onClick && rightSideComponent === undefined && (_jsx(Box, { ml: { custom: 'auto' }, children: _jsx(IconContainer, { "$size": 16, children: _jsx(FontAwesomeIcon, { icon: faChevronRight, color: theme.color.illustration.neutral[400] }) }) }))] }));
|
|
45
45
|
};
|
|
46
46
|
const Wrapper = styled(Box)(({ $backgroundColor, onClick }) => css `
|
|
47
47
|
align-items: center;
|
|
48
48
|
background-color: ${$backgroundColor};
|
|
49
49
|
border-radius: 16px;
|
|
50
50
|
${onClick && `cursor: pointer`};
|
|
51
|
-
padding:
|
|
51
|
+
padding: ${({ theme }) => theme.space[150]};
|
|
52
52
|
display: flex;
|
|
53
53
|
width: 100%;
|
|
54
54
|
|
|
@@ -62,7 +62,7 @@ const Title = styled.p `
|
|
|
62
62
|
font-weight: ${oldTheme.font.weight.medium};
|
|
63
63
|
color: ${({ theme }) => theme.color.text.base};
|
|
64
64
|
line-height: 20.8px;
|
|
65
|
-
margin-bottom:
|
|
65
|
+
margin-bottom: ${({ theme }) => theme.space['050']};
|
|
66
66
|
`;
|
|
67
67
|
const DescriptionBox = styled(Box) `
|
|
68
68
|
font-size: 14px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAExD,OAAO,EAAY,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAEhF,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,YAAY,EACZ,qBAAqB,GACtB,MAAM,kDAAkD,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAA;AAQ/E,MAAM,MAAM,GAA2C;IACrD,IAAI,EAAE;QACJ,SAAS,EAAE,iBAAiB;QAC5B,eAAe,EAAE,gCAAgC;QACjD,IAAI,EAAE,YAAY;KACnB;IACD,aAAa,EAAE;QACb,SAAS,EAAE,iBAAiB;QAC5B,eAAe,EAAE,wBAAwB;QACzC,IAAI,EAAE,YAAY;KACnB;IACD,KAAK,EAAE;QACL,SAAS,EAAE,eAAe;QAC1B,eAAe,EAAE,2BAA2B;QAC5C,IAAI,EAAE,qBAAqB;KAC5B;IACD,OAAO,EAAE;QACP,SAAS,EAAE,6BAA6B;QACxC,eAAe,EAAE,6BAA6B;QAC9C,IAAI,EAAE,mBAAmB;KAC1B;IACD,OAAO,EAAE;QACP,SAAS,EAAE,6BAA6B;QACxC,eAAe,EAAE,6BAA6B;QAC9C,IAAI,EAAE,aAAa;KACpB;CACF,CAAA;AAqBD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,SAAS,EACT,WAAW,EACX,OAAO,EACP,kBAAkB,EAClB,IAAI,EACJ,KAAK,EACL,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,sBAAsB,GAAG,mBAAmB,CAChD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAC5B,KAAK,CACN,CAAA;IAED,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAE5E,OAAO,CACL,MAAC,OAAO,IACN,SAAS,EAAE,SAAS,sBACF,sBAAsB,EACxC,OAAO,EAAE,OAAO,KACZ,WAAW,aAEf,KAAC,aAAa,aAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,YAC1D,KAAC,eAAe,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,iBAAiB,GAAI,GACxD,EAChB,MAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAC,
|
|
1
|
+
{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactElement } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\n\nimport { Text } from '../Text'\nimport { theme as oldTheme } from '../theme'\nimport { isReactElement } from '../utils/isReactElement'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport {\n faCircleCheck,\n faCircleExclamation,\n faCircleInfo,\n faTriangleExclamation,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronRight } from '@awesome.me/kit-46ca99185c/icons/classic/solid'\n\ntype StylesItem = {\n iconColor: NewColor\n backgroundColor: NewColor\n icon: IconDefinition\n}\n\nconst styles: Record<SupportMessageType, StylesItem> = {\n info: {\n iconColor: 'color.icon.base',\n backgroundColor: 'color.illustration.neutral.300',\n icon: faCircleInfo,\n },\n fallbackStyle: {\n iconColor: 'color.icon.base',\n backgroundColor: 'color.surface.base.100',\n icon: faCircleInfo,\n },\n alert: {\n iconColor: 'extended1.100',\n backgroundColor: 'color.feedback.notice.100',\n icon: faTriangleExclamation,\n },\n warning: {\n iconColor: 'color.feedback.negative.200',\n backgroundColor: 'color.feedback.negative.100',\n icon: faCircleExclamation,\n },\n success: {\n iconColor: 'color.feedback.positive.200',\n backgroundColor: 'color.feedback.positive.100',\n icon: faCircleCheck,\n },\n}\n\ntype SupportMessageType =\n | 'info'\n | 'fallbackStyle'\n | 'alert'\n | 'warning'\n | 'success'\n\nexport type SupportMessageProps = {\n className?: string\n description: string | ReactElement<any>\n onClick?: MouseEventHandler\n /**\n * Right side content, usually an icon or a button\n */\n rightSideComponent?: ReactElement<any>\n type: SupportMessageType\n title?: string\n} & MarginProps\n\nexport const SupportMessage: FC<SupportMessageProps> = ({\n className,\n description,\n onClick,\n rightSideComponent,\n type,\n title,\n ...marginProps\n}) => {\n const theme = useTheme()\n const resolveBackgroundColor = resolveToThemeColor(\n styles[type].backgroundColor,\n theme,\n )\n\n const resolvedIconColor = resolveToThemeColor(styles[type].iconColor, theme)\n\n return (\n <Wrapper\n className={className}\n $backgroundColor={resolveBackgroundColor}\n onClick={onClick}\n {...marginProps}\n >\n <IconContainer $size={20} style={{ alignSelf: 'flex-start' }}>\n <FontAwesomeIcon icon={styles[type].icon} color={resolvedIconColor} />\n </IconContainer>\n <Box flex direction=\"column\" mx=\"space.100\">\n {title && <Title>{title}</Title>}\n {isReactElement(description) ? (\n <DescriptionBox>{description}</DescriptionBox>\n ) : (\n <Description tag=\"p\">{description}</Description>\n )}\n </Box>\n {rightSideComponent}\n {onClick && rightSideComponent === undefined && (\n <Box ml={{ custom: 'auto' }}>\n <IconContainer $size={16}>\n <FontAwesomeIcon\n icon={faChevronRight}\n color={theme.color.illustration.neutral[400]}\n />\n </IconContainer>\n </Box>\n )}\n </Wrapper>\n )\n}\n\ninterface IWrapper {\n $backgroundColor: string\n onClick?: MouseEventHandler\n}\n\nconst Wrapper = styled(Box)<IWrapper>(\n ({ $backgroundColor, onClick }) => css`\n align-items: center;\n background-color: ${$backgroundColor};\n border-radius: 16px;\n ${onClick && `cursor: pointer`};\n padding: ${({ theme }) => theme.space[150]};\n display: flex;\n width: 100%;\n\n &:hover,\n &:active {\n ${onClick && `background-color: ${darken(0.1, $backgroundColor)};`};\n }\n `,\n)\n\nconst Title = styled.p`\n font-size: 16px;\n font-weight: ${oldTheme.font.weight.medium};\n color: ${({ theme }) => theme.color.text.base};\n line-height: 20.8px;\n margin-bottom: ${({ theme }) => theme.space['050']};\n`\n\nconst DescriptionBox = styled(Box)`\n font-size: 14px;\n line-height: 20px;\n`\n\nconst Description = styled(Text)`\n font-size: 14px;\n line-height: 20px;\n`\n"]}
|