@mrshmllw/smores-react 14.3.0 → 14.4.0
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.
- package/dist/Alert/Alert.d.ts +1 -1
- package/dist/Alert/Alert.js.map +1 -1
- package/package.json +1 -1
package/dist/Alert/Alert.d.ts
CHANGED
package/dist/Alert/Alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactElement, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { MarginProps } from 'utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Button } from '../Button'\nimport { Link } from '../Link'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faCircleInfo,\n faTriangleExclamation,\n faCircleExclamation,\n faCircleCheck,\n faXmark,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype AlertType = 'info' | 'fallback' | 'notice' | 'negative' | 'positive'\n\ntype CtaProps =\n | {\n ctaType: 'button'\n ctaAction: () => void\n ctaLabel: string\n }\n | {\n ctaType: 'link'\n ctaAction: string\n ctaLabel: string\n }\n | {\n ctaType?: undefined\n ctaAction?: undefined\n ctaLabel?: undefined\n }\n\
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactElement, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { MarginProps } from 'utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Button } from '../Button'\nimport { Link } from '../Link'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faCircleInfo,\n faTriangleExclamation,\n faCircleExclamation,\n faCircleCheck,\n faXmark,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype AlertType = 'info' | 'fallback' | 'notice' | 'negative' | 'positive'\n\ntype CtaProps =\n | {\n ctaType: 'button'\n ctaAction: () => void\n ctaLabel: string\n }\n | {\n ctaType: 'link'\n ctaAction: string\n ctaLabel: string\n }\n | {\n ctaType?: undefined\n ctaAction?: undefined\n ctaLabel?: undefined\n }\n\nexport type AlertProps = {\n type?: AlertType\n title?: string\n message: string | ReactElement<unknown>\n isDismissible?: boolean\n maxWidth?: string\n} & CtaProps &\n MarginProps\n\ntype AlertTypeConfig = {\n backgroundColor: NewColor\n accentColor: NewColor\n icon: IconDefinition\n}\n\nconst typeConfig: Record<AlertType, AlertTypeConfig> = {\n info: {\n backgroundColor: 'color.feedback.informative.100',\n accentColor: 'color.feedback.informative.200',\n icon: faCircleInfo,\n },\n fallback: {\n backgroundColor: 'color.surface.base.100',\n accentColor: 'color.surface.base.400',\n icon: faCircleInfo,\n },\n notice: {\n backgroundColor: 'color.feedback.notice.100',\n accentColor: 'color.feedback.notice.200',\n icon: faTriangleExclamation,\n },\n negative: {\n backgroundColor: 'color.feedback.negative.100',\n accentColor: 'color.feedback.negative.200',\n icon: faCircleExclamation,\n },\n positive: {\n backgroundColor: 'color.feedback.positive.100',\n accentColor: 'color.feedback.positive.200',\n icon: faCircleCheck,\n },\n}\n\nexport const Alert: FC<AlertProps> = ({\n type = 'info',\n title,\n message,\n isDismissible = false,\n ctaType,\n ctaAction,\n ctaLabel,\n maxWidth = '512px',\n ...marginProps\n}) => {\n const theme = useTheme()\n\n const backgroundColor = resolveToThemeColor(\n typeConfig[type].backgroundColor,\n theme,\n )\n const accentColor = resolveToThemeColor(typeConfig[type].accentColor, theme)\n const [alertClosed, setAlertClosed] = useState(false)\n\n return (\n <StyledAlert\n $backgroundColor={backgroundColor}\n $accentColor={accentColor}\n $alertClosed={alertClosed}\n $maxWidth={maxWidth}\n {...marginProps}\n >\n <IconContainer $size={16} style={{ margin: '2px' }}>\n <FontAwesomeIcon\n icon={typeConfig[type].icon}\n color={theme.color.icon.base}\n />\n </IconContainer>\n <Box\n flex\n direction=\"row\"\n justifyContent=\"space-between\"\n alignItems=\"flex-start\"\n width=\"100%\"\n gap=\"8px\"\n >\n <Box maxWidth=\"512px\">\n {title && (\n <Text mb={{ custom: '4px' }} typo=\"headline-regular\">\n {title}\n </Text>\n )}\n {typeof message === 'string' ? (\n <Text typo=\"body-small\" mb={ctaType && '8px'}>\n {message}\n </Text>\n ) : (\n message\n )}\n {ctaType === 'button' && typeof ctaAction === 'function' && (\n <Button smallButton fallbackStyle onClick={() => ctaAction()}>\n {ctaLabel}\n </Button>\n )}\n {ctaType === 'link' && typeof ctaAction === 'string' && (\n <Link href={ctaAction}>{ctaLabel}</Link>\n )}\n </Box>\n {isDismissible && (\n <IconContainer\n as=\"button\"\n type=\"button\"\n title=\"icon-button\"\n $size={16}\n style={{ cursor: 'pointer' }}\n onClick={() => setAlertClosed(true)}\n >\n <FontAwesomeIcon icon={faXmark} color={theme.color.icon.base} />\n </IconContainer>\n )}\n </Box>\n </StyledAlert>\n )\n}\n\ninterface IStyledAlert {\n $backgroundColor: string\n $accentColor: string\n $alertClosed: boolean\n $maxWidth?: string\n}\n\nconst StyledAlert = styled(Box)<IStyledAlert>(\n ({ $backgroundColor, $accentColor, $alertClosed, $maxWidth }) => css`\n display: flex;\n width: 100%;\n max-width: ${$maxWidth};\n min-width: min-content;\n padding: 12px 12px 12px 20px;\n align-items: flex-start;\n gap: 8px;\n border-radius: 8px 16px 16px 8px;\n background: ${$backgroundColor};\n position: relative;\n display: ${$alertClosed ? 'none' : 'flex'};\n\n &:before {\n width: 8px;\n height: 100%;\n position: absolute;\n background: ${$accentColor};\n content: '';\n top: 0;\n left: 0;\n border-radius: 16px 0 0 16px;\n }\n `,\n)\n"]}
|