@mrshmllw/smores-react 13.1.2 → 13.1.3
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 +7 -4
- package/dist/Card/Card.js.map +1 -1
- package/package.json +1 -1
package/dist/Card/Card.js
CHANGED
|
@@ -4,7 +4,6 @@ import styled, { css } from 'styled-components';
|
|
|
4
4
|
import { Box } from '../Box';
|
|
5
5
|
import { Icon } from '../Icon';
|
|
6
6
|
import { Text } from '../Text';
|
|
7
|
-
import { theme } from '../theme';
|
|
8
7
|
import { focusOutlineStyle } from '../utils/focusOutline';
|
|
9
8
|
export const Card = ({ children, leadingIcon, title, body, visual, tag, cardOnClickAction, rightAction, buttonAction, fallbackStyle = false, visualHeight = '', className = '', maxWidth = '', marginX = '', marginY = '', narrow = false, wide = false, ...otherProps }) => {
|
|
10
9
|
const addChildMargin = (!!leadingIcon || !!title || !!body) && children;
|
|
@@ -25,7 +24,9 @@ export const Card = ({ children, leadingIcon, title, body, visual, tag, cardOnCl
|
|
|
25
24
|
buttonAction && React.createElement(Box, { mt: "16px" }, buttonAction))));
|
|
26
25
|
};
|
|
27
26
|
const Container = styled(Box) `
|
|
28
|
-
background: ${({ $fallbackStyle }) => $fallbackStyle
|
|
27
|
+
background: ${({ $fallbackStyle, theme }) => $fallbackStyle
|
|
28
|
+
? theme.color.surface.base['000']
|
|
29
|
+
: theme.color.surface.base[300]};
|
|
29
30
|
box-sizing: border-box;
|
|
30
31
|
border-radius: 16px;
|
|
31
32
|
|
|
@@ -39,11 +40,13 @@ const Container = styled(Box) `
|
|
|
39
40
|
position: relative;
|
|
40
41
|
overflow: hidden;
|
|
41
42
|
|
|
42
|
-
${({ $isNotClickable, $fallbackStyle }) => !$isNotClickable &&
|
|
43
|
+
${({ $isNotClickable, $fallbackStyle, theme }) => !$isNotClickable &&
|
|
43
44
|
css `
|
|
44
45
|
cursor: pointer;
|
|
45
46
|
&:hover {
|
|
46
|
-
background: ${darken(0.1, $fallbackStyle
|
|
47
|
+
background: ${darken(0.1, $fallbackStyle
|
|
48
|
+
? theme.color.surface.base['000']
|
|
49
|
+
: theme.color.surface.base[300])};
|
|
47
50
|
}
|
|
48
51
|
|
|
49
52
|
${focusOutlineStyle}
|
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;AACjC,OAAO,KAA2C,MAAM,OAAO,CAAA;AAC/D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport React, { FC, MouseEventHandler, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Text } from '../Text'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nexport type CardProps = {\n children?: ReactNode\n /** leading card icon */\n leadingIcon?: Icons\n /** generic card title */\n title?: string\n /** generic card body */\n body?: string\n /** card image */\n visual?: string\n /** height of the image */\n visualHeight?: string\n /** card tag */\n tag?: ReactNode\n /** action for a fully clickable card */\n cardOnClickAction?: MouseEventHandler<HTMLDivElement>\n /** action to the right of the card, chevron, chip or link text */\n rightAction?: ReactNode\n /** primary button */\n buttonAction?: ReactNode\n /** fallback color scheme */\n fallbackStyle?: boolean\n className?: string\n /** margin */\n maxWidth?: string\n /** left-right margin */\n marginX?: string\n /** top-bottom margin */\n marginY?: string\n /** Narrow padding */\n narrow?: boolean\n /** Wide padding */\n wide?: boolean\n} & MarginProps\n\nexport const Card: FC<CardProps> = ({\n children,\n leadingIcon,\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 addChildMargin = (!!leadingIcon || !!title || !!body) && children\n\n const isNotClickable = !cardOnClickAction\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 {leadingIcon && (\n <Icon\n mr=\"12px\"\n render={leadingIcon}\n size={24}\n color=\"liquorice\"\n />\n )}\n <Box>\n {title && (\n <Text typo=\"headline-regular\" color=\"liquorice\">\n {title}\n </Text>\n )}\n {body && (\n <Text typo=\"body-regular\" color=\"sesame\">\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=\"16px\">{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"]}
|