@mrshmllw/smores-react 15.1.8 → 15.1.10
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/Card/Card.js +2 -2
- package/dist/Card/Card.js.map +1 -1
- package/package.json +1 -1
package/dist/Card/Card.js
CHANGED
|
@@ -10,8 +10,8 @@ export const Card = ({ children, leadingIcon, iconComponent, title, body, visual
|
|
|
10
10
|
const theme = useTheme();
|
|
11
11
|
const addChildMargin = (!!iconComponent || !!leadingIcon || !!title || !!body) && children;
|
|
12
12
|
const isNotClickable = !cardOnClickAction;
|
|
13
|
-
const iconToRender = iconComponent ? (_jsx(IconContainer, { style: { marginRight: '12px' }, "$size": 24, "$iconColor": theme.color.icon.base, children: iconComponent })) : leadingIcon ? (_jsx(Icon, { mr: "
|
|
14
|
-
return (_jsxs(Container, { className: className, "$maxWidth": maxWidth, "$marginX": marginX, "$marginY": marginY, "$narrow": narrow, "$wide": wide, "$visual": visual, "$fallbackStyle": fallbackStyle, "$isNotClickable": isNotClickable, onClick: cardOnClickAction, tabIndex: isNotClickable ? undefined : 0, ...otherProps, children: [tag && visual && _jsx(TagWrapper, { children: tag }), visual && (_jsx(VisualWrapper, { "$visualHeight": visualHeight, children: _jsx(Visual, { "$visualUrl": visual, "$visualHeight": visualHeight }) })), _jsxs(Box, { p: visual ? '16px' : { custom: '0px' }, children: [_jsxs(Box, { flex: true, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { flex: true, alignItems: "center", children: [iconToRender, _jsxs(Box, { children: [title && (_jsx(Text, { typo: "headline-regular", color: "color.text.base", children: title })), body && (_jsx(Text, { typo: "body-regular", color: "color.text.subtle", children: body }))] })] }), rightAction && rightAction] }), _jsx(Box, { mt: addChildMargin ? '16px' : { custom: '0px' }, children: children }), buttonAction && _jsx(Box, { mt: "
|
|
13
|
+
const iconToRender = iconComponent ? (_jsx(IconContainer, { style: { marginRight: '12px' }, "$size": 24, "$iconColor": theme.color.icon.base, children: iconComponent })) : leadingIcon ? (_jsx(Icon, { mr: "space.150", render: leadingIcon, size: 24, color: "color.icon.base" })) : null;
|
|
14
|
+
return (_jsxs(Container, { className: className, "$maxWidth": maxWidth, "$marginX": marginX, "$marginY": marginY, "$narrow": narrow, "$wide": wide, "$visual": visual, "$fallbackStyle": fallbackStyle, "$isNotClickable": isNotClickable, onClick: cardOnClickAction, tabIndex: isNotClickable ? undefined : 0, ...otherProps, children: [tag && visual && _jsx(TagWrapper, { children: tag }), visual && (_jsx(VisualWrapper, { "$visualHeight": visualHeight, children: _jsx(Visual, { "$visualUrl": visual, "$visualHeight": visualHeight }) })), _jsxs(Box, { p: visual ? '16px' : { custom: '0px' }, children: [_jsxs(Box, { flex: true, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { flex: true, alignItems: "center", children: [iconToRender, _jsxs(Box, { children: [title && (_jsx(Text, { typo: "headline-regular", color: "color.text.base", children: title })), body && (_jsx(Text, { typo: "body-regular", color: "color.text.subtle", children: body }))] })] }), rightAction && rightAction] }), _jsx(Box, { mt: addChildMargin ? '16px' : { custom: '0px' }, children: children }), buttonAction && _jsx(Box, { mt: "space.200", children: buttonAction })] })] }));
|
|
15
15
|
};
|
|
16
16
|
const Container = styled(Box) `
|
|
17
17
|
background: ${({ $fallbackStyle, theme }) => $fallbackStyle
|
package/dist/Card/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.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;AAC5B,OAAO,EAAE,IAAI,EAAS,MAAM,SAAS,CAAA;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAuB7D,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,QAAQ,EACR,WAAW,EACX,aAAa,EACb,KAAK,EACL,IAAI,EACJ,MAAM,EACN,GAAG,EACH,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,EAAE,EACjB,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,EAAE,EACZ,OAAO,GAAG,EAAE,EACZ,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,KAAK,EACZ,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,cAAc,GAClB,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAA;IAErE,MAAM,cAAc,GAAG,CAAC,iBAAiB,CAAA;IAEzC,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,IACZ,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,WACvB,EAAE,gBACG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,YAEhC,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,KAAC,IAAI,IAAC,EAAE,EAAC,
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactNode } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { Text } from '../Text'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport type CardProps = {\n children?: ReactNode\n leadingIcon?: Icons\n iconComponent?: ReactNode\n title?: string\n body?: string\n visual?: string\n visualHeight?: string\n tag?: ReactNode\n cardOnClickAction?: MouseEventHandler<HTMLDivElement>\n rightAction?: ReactNode\n buttonAction?: ReactNode\n fallbackStyle?: boolean\n className?: string\n maxWidth?: string\n marginX?: string\n marginY?: string\n narrow?: boolean\n wide?: boolean\n} & MarginProps\n\nexport const Card: FC<CardProps> = ({\n children,\n leadingIcon,\n iconComponent,\n title,\n body,\n visual,\n tag,\n cardOnClickAction,\n rightAction,\n buttonAction,\n fallbackStyle = false,\n visualHeight = '',\n className = '',\n maxWidth = '',\n marginX = '',\n marginY = '',\n narrow = false,\n wide = false,\n ...otherProps\n}) => {\n const theme = useTheme()\n const addChildMargin =\n (!!iconComponent || !!leadingIcon || !!title || !!body) && children\n\n const isNotClickable = !cardOnClickAction\n\n const iconToRender = iconComponent ? (\n <IconContainer\n style={{ marginRight: '12px' }}\n $size={24}\n $iconColor={theme.color.icon.base}\n >\n {iconComponent}\n </IconContainer>\n ) : leadingIcon ? (\n <Icon mr=\"space.150\" render={leadingIcon} size={24} color=\"color.icon.base\" />\n ) : null\n\n return (\n <Container\n className={className}\n $maxWidth={maxWidth}\n $marginX={marginX}\n $marginY={marginY}\n $narrow={narrow}\n $wide={wide}\n $visual={visual}\n $fallbackStyle={fallbackStyle}\n $isNotClickable={isNotClickable}\n onClick={cardOnClickAction}\n tabIndex={isNotClickable ? undefined : 0}\n {...otherProps}\n >\n {tag && visual && <TagWrapper>{tag}</TagWrapper>}\n {visual && (\n <VisualWrapper $visualHeight={visualHeight}>\n <Visual $visualUrl={visual} $visualHeight={visualHeight} />\n </VisualWrapper>\n )}\n <Box p={visual ? '16px' : { custom: '0px' }}>\n <Box flex alignItems=\"center\" justifyContent=\"space-between\">\n <Box flex alignItems=\"center\">\n {iconToRender}\n <Box>\n {title && (\n <Text typo=\"headline-regular\" color=\"color.text.base\">\n {title}\n </Text>\n )}\n {body && (\n <Text typo=\"body-regular\" color=\"color.text.subtle\">\n {body}\n </Text>\n )}\n </Box>\n </Box>\n {rightAction && rightAction}\n </Box>\n <Box mt={addChildMargin ? '16px' : { custom: '0px' }}>{children}</Box>\n {buttonAction && <Box mt=\"space.200\">{buttonAction}</Box>}\n </Box>\n </Container>\n )\n}\n\ntype ICard = TransientProps<\n Required<\n Pick<\n CardProps,\n 'maxWidth' | 'marginX' | 'marginY' | 'narrow' | 'wide' | 'fallbackStyle'\n >\n >\n> &\n Partial<TransientProps<Pick<CardProps, 'visual'>>> & {\n $isNotClickable?: boolean\n }\n\nconst Container = styled(Box)<ICard>`\n background: ${({ $fallbackStyle, theme }) =>\n $fallbackStyle\n ? theme.color.surface.base['000']\n : theme.color.surface.base[300]};\n box-sizing: border-box;\n border-radius: 16px;\n\n max-width: ${(p) => p.$maxWidth};\n margin-top: ${(p) => p.$marginY};\n margin-right: ${(p) => p.$marginX};\n margin-bottom: ${(p) => p.$marginY};\n margin-left: ${(p) => p.$marginX};\n\n padding: ${({ $visual }) => ($visual ? '0px' : '16px')};\n position: relative;\n overflow: hidden;\n\n ${({ $isNotClickable, $fallbackStyle, theme }) =>\n !$isNotClickable &&\n css`\n cursor: pointer;\n &:hover {\n background: ${darken(\n 0.1,\n $fallbackStyle\n ? theme.color.surface.base['000']\n : theme.color.surface.base[300],\n )};\n }\n\n ${focusOutlineStyle}\n `};\n`\n\nconst TagWrapper = styled(Box)`\n position: absolute;\n top: 12px;\n right: 12px;\n`\n\nconst VisualWrapper = styled(Box)<{ $visualHeight: string }>`\n width: 100%;\n margin-top: -16px;\n\n ${({ $visualHeight }) => $visualHeight && `height: ${$visualHeight};`}\n`\n\nconst Visual = styled(Box)<{ $visualUrl: string; $visualHeight: string }>`\n width: 100%;\n background-image: url('${(p) => p.$visualUrl}');\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n\n ${({ $visualHeight }) =>\n $visualHeight ? `height: ${$visualHeight};` : 'padding-top: 100%;'}\n`\n"]}
|