@mrshmllw/smores-react 13.3.3 → 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
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"]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
import { theme } from '../theme';
|
|
4
3
|
import { margin } from '../utils/space';
|
|
5
4
|
export const SliderInput = forwardRef(function SliderInput({ value, onChange, min, max, step, m, mx, my, ml, mr, mt, mb, ...rest }, ref) {
|
|
6
5
|
return (React.createElement(StyledSlider, { ref: ref, type: "range", min: min, max: max, step: step, value: value, onChange: (event) => {
|
|
@@ -16,7 +15,7 @@ const StyledSlider = styled.input `
|
|
|
16
15
|
//guard rail as we have a hard coded limit on progress bar length
|
|
17
16
|
max-width: 2000px;
|
|
18
17
|
transition: box-shadow 0.2s ease-in-out;
|
|
19
|
-
background: ${theme.
|
|
18
|
+
background: ${({ theme }) => theme.color.background[100]};
|
|
20
19
|
${margin};
|
|
21
20
|
|
|
22
21
|
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
@@ -34,22 +33,22 @@ const StyledSlider = styled.input `
|
|
|
34
33
|
-webkit-appearance: none;
|
|
35
34
|
height: 44px;
|
|
36
35
|
cursor: ew-resize;
|
|
37
|
-
background: ${theme.
|
|
36
|
+
background: ${({ theme }) => theme.color.background[100]};
|
|
38
37
|
box-shadow:
|
|
39
38
|
//handles the progress bar
|
|
40
|
-
-1000px 0 0 980px ${theme.
|
|
39
|
+
-1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},
|
|
41
40
|
//added for the focus anim
|
|
42
|
-
inset 0 0 0 44px ${theme.
|
|
41
|
+
inset 0 0 0 44px ${({ theme }) => theme.color.surface.brand[400]};
|
|
43
42
|
border-radius: 50%;
|
|
44
43
|
transition: box-shadow 0.2s ease-in-out;
|
|
45
44
|
position: relative;
|
|
46
45
|
}
|
|
47
46
|
&:active::-webkit-slider-thumb,
|
|
48
47
|
&:focus::-webkit-slider-thumb {
|
|
49
|
-
background: ${theme.
|
|
48
|
+
background: ${({ theme }) => theme.color.background[100]};
|
|
50
49
|
box-shadow:
|
|
51
|
-
-1000px 0 0 980px ${theme.
|
|
52
|
-
inset 0 0 0 4px ${theme.
|
|
50
|
+
-1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},
|
|
51
|
+
inset 0 0 0 4px ${({ theme }) => theme.color.surface.brand[400]};
|
|
53
52
|
}
|
|
54
53
|
}
|
|
55
54
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderInput.js","sourceRoot":"","sources":["../../src/SliderInput/SliderInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SliderInput.js","sourceRoot":"","sources":["../../src/SliderInput/SliderInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAqC,MAAM,gBAAgB,CAAA;AAc1E,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EACvE,GAAG;IAEH,OAAO,CACL,oBAAC,YAAY,IACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAClB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;QACtC,CAAC,QACG,CAAC,SACA,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,KACH,IAAI,GACR,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAsB;;;;;;;;;gBASvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;IACtD,MAAM;;;;;;;;;;;;;;;;;oBAiBU,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;;;4BAGlC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;2BAE9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;oBAOpD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;;4BAElC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;0BAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;;CAGtE,CAAA","sourcesContent":["import React, { forwardRef } from 'react'\nimport styled from 'styled-components'\nimport { margin, MarginProps, TransientMarginProps } from '../utils/space'\n\ntype SliderProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'value' | 'onChange'\n> &\n MarginProps & {\n onChange: (value: number) => void\n value: number\n min?: number\n max?: number\n step?: number\n }\n\nexport const SliderInput = forwardRef<HTMLInputElement, SliderProps>(\n function SliderInput(\n { value, onChange, min, max, step, m, mx, my, ml, mr, mt, mb, ...rest },\n ref,\n ) {\n return (\n <StyledSlider\n ref={ref}\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={value}\n onChange={(event) => {\n onChange(event.target.valueAsNumber)\n }}\n $m={m}\n $mx={mx}\n $my={my}\n $ml={ml}\n $mr={mr}\n $mt={mt}\n $mb={mb}\n {...rest}\n />\n )\n },\n)\n\nconst StyledSlider = styled.input<TransientMarginProps>`\n outline: 0;\n border: 0;\n padding: 0;\n border-radius: 500px;\n width: 100%;\n //guard rail as we have a hard coded limit on progress bar length\n max-width: 2000px;\n transition: box-shadow 0.2s ease-in-out;\n background: ${({ theme }) => theme.color.background[100]};\n ${margin};\n\n @media screen and (-webkit-min-device-pixel-ratio: 0) {\n overflow: hidden;\n height: 44px;\n -webkit-appearance: none;\n\n &::-webkit-slider-runnable-track {\n height: 44px;\n -webkit-appearance: none;\n transition: box-shadow 0.2s ease-in-out;\n }\n &::-webkit-slider-thumb {\n width: 44px;\n -webkit-appearance: none;\n height: 44px;\n cursor: ew-resize;\n background: ${({ theme }) => theme.color.background[100]};\n box-shadow:\n //handles the progress bar\n -1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},\n //added for the focus anim\n inset 0 0 0 44px ${({ theme }) => theme.color.surface.brand[400]};\n border-radius: 50%;\n transition: box-shadow 0.2s ease-in-out;\n position: relative;\n }\n &:active::-webkit-slider-thumb,\n &:focus::-webkit-slider-thumb {\n background: ${({ theme }) => theme.color.background[100]};\n box-shadow:\n -1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},\n inset 0 0 0 4px ${({ theme }) => theme.color.surface.brand[400]};\n }\n }\n`\n"]}
|