@mrshmllw/smores-react 13.3.4 → 13.3.5
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 +4 -5
- package/dist/Row/Row.js.map +1 -1
- package/package.json +1 -1
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"]}
|