@mrshmllw/smores-react 13.3.4 → 13.3.6
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/Row/Row.js
CHANGED
|
@@ -3,7 +3,6 @@ import styled, { css } from 'styled-components';
|
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { Icon } from '../Icon';
|
|
5
5
|
import { Text } from '../Text';
|
|
6
|
-
import { theme } from '../theme';
|
|
7
6
|
export const Row = ({ iconLeft, iconLeftColor = 'liquorice', iconRight, iconRightColor = 'marzipan', handleClick, heading, subHeading, type, borderTop = true, borderBottom = true, boldHeading, ...marginProps }) => {
|
|
8
7
|
const windowWidth = screen.width;
|
|
9
8
|
return (React.createElement(Container, { "$type": type, "$iconLeft": iconLeft, "$borderTop": borderTop, "$borderBottom": borderBottom, "$iconRight": iconRight, onClick: handleClick, "$boldHeading": boldHeading, ...marginProps },
|
|
@@ -13,20 +12,20 @@ export const Row = ({ iconLeft, iconLeftColor = 'liquorice', iconRight, iconRigh
|
|
|
13
12
|
React.createElement(Text, { tag: "p", typo: "body-small", color: "sesame" }, subHeading)),
|
|
14
13
|
iconRight && (React.createElement(Icon, { className: "iconRight", render: iconRight, size: 24, rotate: iconRight === 'caret' ? -90 : 0, color: iconRightColor }))));
|
|
15
14
|
};
|
|
16
|
-
const Container = styled(Box)(({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading }) => css `
|
|
15
|
+
const Container = styled(Box)(({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading, theme }) => css `
|
|
17
16
|
border-radius: ${($type === 'first' && `16px 16px 0 0`) ||
|
|
18
17
|
($type === 'curved' && `16px`) ||
|
|
19
18
|
($type === 'last' && `0 0 16px 16px`) ||
|
|
20
19
|
0};
|
|
21
20
|
|
|
22
21
|
border-top: ${$borderTop && $type !== 'curved' && $type !== 'first'
|
|
23
|
-
? `1px solid ${theme.
|
|
22
|
+
? `1px solid ${theme.color.border.subtle}`
|
|
24
23
|
: 'none'};
|
|
25
24
|
border-bottom: ${$borderBottom && $type !== 'curved' && $type !== 'last'
|
|
26
|
-
? `1px solid ${theme.
|
|
25
|
+
? `1px solid ${theme.color.border.subtle}`
|
|
27
26
|
: 'none'};
|
|
28
27
|
|
|
29
|
-
background-color: ${theme.
|
|
28
|
+
background-color: ${theme.color.surface.base[300]};
|
|
30
29
|
display: grid;
|
|
31
30
|
grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};
|
|
32
31
|
padding: 16px;
|
package/dist/Row/Row.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Row/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,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;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Row/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,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;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAkB9B,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,QAAQ,EACR,aAAa,GAAG,WAAW,EAC3B,SAAS,EACT,cAAc,GAAG,UAAU,EAC3B,WAAW,EACX,OAAO,EACP,UAAU,EACV,IAAI,EACJ,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,EACX,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAEhC,OAAO,CACL,oBAAC,SAAS,aACD,IAAI,eACA,QAAQ,gBACP,SAAS,mBACN,YAAY,gBACf,SAAS,EACrB,OAAO,EAAE,WAAW,kBACN,WAAW,KACrB,WAAW;QAEd,QAAQ,IAAI,CACX,oBAAC,IAAI,IACH,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACjC,KAAK,EAAE,aAAa,GACpB,CACH;QACD,oBAAC,GAAG;YACF,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,IAC/B,OAAO,CACH;YACP,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,IAC3C,UAAU,CACN,CACH;QACL,SAAS,IAAI,CACZ,oBAAC,IAAI,IACH,SAAS,EAAC,WAAW,EACrB,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACvC,KAAK,EAAE,cAAc,GACrB,CACH,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBAC1D,CAAC,KAAK,KAAK,OAAO,IAAI,eAAe,CAAC;IACvD,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC;IAC9B,CAAC,KAAK,KAAK,MAAM,IAAI,eAAe,CAAC;IACrC,CAAC;;kBAEa,UAAU,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,OAAO;IACjE,CAAC,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;IAC1C,CAAC,CAAC,MAAM;qBACO,aAAa,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,MAAM;IACtE,CAAC,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE;IAC1C,CAAC,CAAC,MAAM;;wBAEU,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;6BAExB,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;;;;;;;;qBAQlD,YAAY,IAAI,GAAG;;;;;;;;;;GAUrC,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\nimport { Text } from '../Text'\nimport { Color } from '../theme'\nimport { MarginProps } from '../utils/space'\n\nexport type RowProps = {\n iconLeft?: Icons\n iconLeftColor?: Color\n iconRight?: Icons\n iconRightColor?: Color\n handleClick?: () => void\n heading: string\n subHeading?: string\n type?: 'first' | 'last' | 'curved'\n borderTop?: boolean\n borderBottom?: boolean\n boldHeading?: boolean\n} & MarginProps\n\nexport const Row: FC<RowProps> = ({\n iconLeft,\n iconLeftColor = 'liquorice',\n iconRight,\n iconRightColor = 'marzipan',\n handleClick,\n heading,\n subHeading,\n type,\n borderTop = true,\n borderBottom = true,\n boldHeading,\n ...marginProps\n}) => {\n const windowWidth = screen.width\n\n return (\n <Container\n $type={type}\n $iconLeft={iconLeft}\n $borderTop={borderTop}\n $borderBottom={borderBottom}\n $iconRight={iconRight}\n onClick={handleClick}\n $boldHeading={boldHeading}\n {...marginProps}\n >\n {iconLeft && (\n <Icon\n render={iconLeft}\n size={windowWidth > 768 ? 24 : 18}\n color={iconLeftColor}\n />\n )}\n <Box>\n <Text tag=\"h1\" typo=\"body-regular\">\n {heading}\n </Text>\n <Text tag=\"p\" typo=\"body-small\" color=\"sesame\">\n {subHeading}\n </Text>\n </Box>\n {iconRight && (\n <Icon\n className=\"iconRight\"\n render={iconRight}\n size={24}\n rotate={iconRight === 'caret' ? -90 : 0}\n color={iconRightColor}\n />\n )}\n </Container>\n )\n}\n\ninterface IContainer {\n $type?: 'first' | 'last' | 'curved'\n $iconLeft?: string\n $iconRight?: string\n $borderTop: boolean\n $borderBottom: boolean\n $boldHeading?: boolean\n}\n\nconst Container = styled(Box)<IContainer>(\n ({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading, theme }) => css`\n border-radius: ${($type === 'first' && `16px 16px 0 0`) ||\n ($type === 'curved' && `16px`) ||\n ($type === 'last' && `0 0 16px 16px`) ||\n 0};\n\n border-top: ${$borderTop && $type !== 'curved' && $type !== 'first'\n ? `1px solid ${theme.color.border.subtle}`\n : 'none'};\n border-bottom: ${$borderBottom && $type !== 'curved' && $type !== 'last'\n ? `1px solid ${theme.color.border.subtle}`\n : 'none'};\n\n background-color: ${theme.color.surface.base[300]};\n display: grid;\n grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};\n padding: 16px;\n grid-gap: 16px;\n align-items: center;\n\n cursor: pointer;\n\n h1 {\n font-weight: ${$boldHeading && 500};\n }\n\n .iconRight {\n justify-self: end;\n }\n\n @media (min-width: 768px) {\n grid-gap: 24px;\n }\n `,\n)\n"]}
|
|
@@ -4,7 +4,6 @@ import { Box } from '../Box';
|
|
|
4
4
|
import { useTimeout } from '../hooks';
|
|
5
5
|
import { Icon } from '../Icon';
|
|
6
6
|
import { Text } from '../Text';
|
|
7
|
-
import { theme } from '../theme';
|
|
8
7
|
export const SnackbarItem = ({ autoCloseTime = 4, id, message, leadingIcon, canManuallyClose, showCloseIcon, deleteSnack, }) => {
|
|
9
8
|
useTimeout(() => deleteSnack(id), autoCloseTime * 1000);
|
|
10
9
|
return (React.createElement(SnackItem, { p: "16px", key: id, mt: "16px", flex: true, justifyContent: "space-between" },
|
|
@@ -15,7 +14,7 @@ export const SnackbarItem = ({ autoCloseTime = 4, id, message, leadingIcon, canM
|
|
|
15
14
|
};
|
|
16
15
|
const SnackItem = styled(Box) `
|
|
17
16
|
border-radius: 16px;
|
|
18
|
-
background-color: ${theme.
|
|
17
|
+
background-color: ${({ theme }) => theme.color.surface.base[900]};
|
|
19
18
|
`;
|
|
20
19
|
const CloseButton = styled.button `
|
|
21
20
|
cursor: pointer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAO9B,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,aAAa,GAAG,CAAC,EACjB,EAAE,EACF,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,WAAW,GACZ,EAAE,EAAE;IACH,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC,CAAA;IAEvD,OAAO,CACL,oBAAC,SAAS,IAAC,CAAC,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAC,MAAM,EAAC,IAAI,QAAC,cAAc,EAAC,eAAe;QACxE,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;YAC1B,WAAW,IAAI,CACd,oBAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,GAAG,CACrE;YACD,oBAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,OAAO,CACH,CACH;QACL,gBAAgB,IAAI,CACnB,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,gBAClB,kBAAkB,OAAO,EAAE,IAEtC,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,GAAG,CACrD,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,YAAY,cAElD,CAClB,CACW,CACf,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;sBAEP,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;CACjE,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;CAEhC,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAElC,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { useTimeout } from '../hooks'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { Snackbar } from './types'\n\ninterface Props extends Snackbar {\n deleteSnack: (id: string) => void\n}\n\nexport const SnackbarItem: FC<Props> = ({\n autoCloseTime = 4,\n id,\n message,\n leadingIcon,\n canManuallyClose,\n showCloseIcon,\n deleteSnack,\n}) => {\n useTimeout(() => deleteSnack(id), autoCloseTime * 1000)\n\n return (\n <SnackItem p=\"16px\" key={id} mt=\"16px\" flex justifyContent=\"space-between\">\n <Box flex alignItems=\"center\">\n {leadingIcon && (\n <Icon mr=\"12px\" render={leadingIcon} size={24} color=\"mascarpone\" />\n )}\n <Text typo=\"body-small\" color=\"mascarpone\">\n {message}\n </Text>\n </Box>\n {canManuallyClose && (\n <CloseButton\n onClick={() => deleteSnack(id)}\n aria-label={`close snackbar ${message}`}\n >\n {showCloseIcon ? (\n <Icon render=\"cross\" size={16} color=\"mascarpone\" />\n ) : (\n <UnderlinedText tag=\"span\" typo=\"headline-small\" color=\"mascarpone\">\n Dismiss\n </UnderlinedText>\n )}\n </CloseButton>\n )}\n </SnackItem>\n )\n}\n\nconst SnackItem = styled(Box)`\n border-radius: 16px;\n background-color: ${({ theme }) => theme.color.surface.base[900]};\n`\n\nconst CloseButton = styled.button`\n cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n text-decoration: underline;\n`\n"]}
|