@mrshmllw/smores-react 13.1.0 → 13.1.2
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/Banner/BannerItem.js +27 -27
- package/dist/Banner/BannerItem.js.map +1 -1
- package/dist/Button/Button.js +14 -16
- package/dist/Button/Button.js.map +1 -1
- package/dist/Tag/Tag.spec.js +1 -1
- package/dist/Tag/Tag.spec.js.map +1 -1
- package/dist/testUtils/index.d.ts +5 -0
- package/dist/testUtils/index.js +10 -0
- package/dist/testUtils/index.js.map +1 -0
- package/dist/utils/focusOutline.js +2 -3
- package/dist/utils/focusOutline.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import styled, { css } from 'styled-components';
|
|
2
|
+
import styled, { css, useTheme } from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { Icon } from '../Icon';
|
|
5
5
|
import { Text } from '../Text';
|
|
6
6
|
import { useTimeout } from '../hooks';
|
|
7
|
-
import { theme } from '../theme';
|
|
8
|
-
const styles = {
|
|
9
|
-
upsell: {
|
|
10
|
-
iconColor: 'liquorice',
|
|
11
|
-
backgroundColor: theme.colors.marshmallowPink,
|
|
12
|
-
textColor: 'liquorice',
|
|
13
|
-
},
|
|
14
|
-
critical: {
|
|
15
|
-
iconColor: 'cream',
|
|
16
|
-
backgroundColor: theme.colors.strawberry,
|
|
17
|
-
textColor: 'cream',
|
|
18
|
-
},
|
|
19
|
-
general: {
|
|
20
|
-
iconColor: 'cream',
|
|
21
|
-
backgroundColor: theme.colors.liquorice,
|
|
22
|
-
textColor: 'cream',
|
|
23
|
-
},
|
|
24
|
-
success: {
|
|
25
|
-
iconColor: 'cream',
|
|
26
|
-
backgroundColor: theme.colors.apple,
|
|
27
|
-
textColor: 'cream',
|
|
28
|
-
},
|
|
29
|
-
};
|
|
30
7
|
export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, exploreAction, showExploreText, showExploreIcon, leadingIcon, canManuallyClose, showCloseIcon, deleteBanner, noTimeout, }) => {
|
|
8
|
+
const theme = useTheme();
|
|
9
|
+
const styles = {
|
|
10
|
+
upsell: {
|
|
11
|
+
iconColor: 'liquorice',
|
|
12
|
+
backgroundColor: theme.color.surface.brand[300],
|
|
13
|
+
textColor: 'liquorice',
|
|
14
|
+
},
|
|
15
|
+
critical: {
|
|
16
|
+
iconColor: 'cream',
|
|
17
|
+
backgroundColor: theme.color.feedback.negative[200],
|
|
18
|
+
textColor: 'cream',
|
|
19
|
+
},
|
|
20
|
+
general: {
|
|
21
|
+
iconColor: 'cream',
|
|
22
|
+
backgroundColor: theme.color.surface.base[900],
|
|
23
|
+
textColor: 'cream',
|
|
24
|
+
},
|
|
25
|
+
success: {
|
|
26
|
+
iconColor: 'cream',
|
|
27
|
+
backgroundColor: theme.color.feedback.positive[200],
|
|
28
|
+
textColor: 'cream',
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
31
|
const autoCloseBaner = () => {
|
|
32
32
|
if (noTimeout)
|
|
33
33
|
return;
|
|
@@ -40,7 +40,7 @@ export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, ex
|
|
|
40
40
|
useTimeout(() => autoCloseBaner(), autoCloseTime * 1000);
|
|
41
41
|
const textColor = styles[type].textColor;
|
|
42
42
|
const iconColor = styles[type].iconColor;
|
|
43
|
-
return (React.createElement(BannerWrapper, { p: "24px", mt: { custom: topOffset }, key: id, flex: true, justifyContent: "space-between", "$
|
|
43
|
+
return (React.createElement(BannerWrapper, { p: "24px", mt: { custom: topOffset }, key: id, flex: true, justifyContent: "space-between", "$backgroundColour": styles[type].backgroundColor },
|
|
44
44
|
React.createElement(Box, { flex: true, alignItems: "center" },
|
|
45
45
|
leadingIcon && (React.createElement(Icon, { mr: "12px", render: leadingIcon, size: 24, color: iconColor })),
|
|
46
46
|
React.createElement(Text, { typo: "headline-small", color: textColor }, message)),
|
|
@@ -51,9 +51,9 @@ export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, ex
|
|
|
51
51
|
showExploreText && (React.createElement(UnderlinedText, { ml: "12px", tag: "span", typo: "headline-small", color: textColor }, "Explore")),
|
|
52
52
|
showExploreIcon && (React.createElement(Icon, { render: "arrow", ml: "12px", size: 24, color: iconColor, rotate: 180 }))))))));
|
|
53
53
|
};
|
|
54
|
-
const BannerWrapper = styled(Box)(({ $
|
|
54
|
+
const BannerWrapper = styled(Box)(({ $backgroundColour }) => css `
|
|
55
55
|
border-radius: 0px 0px 16px 16px;
|
|
56
|
-
background-color: ${
|
|
56
|
+
background-color: ${$backgroundColour};
|
|
57
57
|
`);
|
|
58
58
|
const GenericButton = styled.button `
|
|
59
59
|
cursor: pointer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { useTimeout } from '../hooks'\nimport { Color } from '../theme'\nimport { Banner } from './types'\n\ntype StylesItem = {\n iconColor: Color\n backgroundColor: string\n textColor: Color\n}\n\ntype BannerType = 'upsell' | 'critical' | 'general' | 'success'\n\ninterface Props extends Banner {\n deleteBanner: (id: string) => void\n}\n\nexport const BannerItem: FC<Props> = ({\n type,\n autoCloseTime = 4,\n id,\n message,\n topOffset,\n exploreAction,\n showExploreText,\n showExploreIcon,\n leadingIcon,\n canManuallyClose,\n showCloseIcon,\n deleteBanner,\n noTimeout,\n}) => {\n const theme = useTheme()\n\n const styles: Record<BannerType, StylesItem> = {\n upsell: {\n iconColor: 'liquorice',\n backgroundColor: theme.color.surface.brand[300],\n textColor: 'liquorice',\n },\n critical: {\n iconColor: 'cream',\n backgroundColor: theme.color.feedback.negative[200],\n textColor: 'cream',\n },\n general: {\n iconColor: 'cream',\n backgroundColor: theme.color.surface.base[900],\n textColor: 'cream',\n },\n success: {\n iconColor: 'cream',\n backgroundColor: theme.color.feedback.positive[200],\n textColor: 'cream',\n },\n }\n const autoCloseBaner = () => {\n if (noTimeout) return\n if (type !== 'critical') return deleteBanner(id)\n else {\n return\n }\n }\n useTimeout(() => autoCloseBaner(), autoCloseTime * 1000)\n\n const textColor = styles[type].textColor\n const iconColor = styles[type].iconColor\n\n return (\n <BannerWrapper\n p=\"24px\"\n mt={{ custom: topOffset }}\n key={id}\n flex\n justifyContent=\"space-between\"\n $backgroundColour={styles[type].backgroundColor}\n >\n <Box flex alignItems=\"center\">\n {leadingIcon && (\n <Icon mr=\"12px\" render={leadingIcon} size={24} color={iconColor} />\n )}\n <Text typo=\"headline-small\" color={textColor}>\n {message}\n </Text>\n </Box>\n <Box flex alignItems=\"center\">\n {canManuallyClose && (\n <GenericButton\n onClick={() => deleteBanner(id)}\n aria-label={`close banner ${message}`}\n >\n {showCloseIcon ? (\n <Icon render=\"cross\" size={16} color={iconColor} />\n ) : (\n <UnderlinedText\n tag=\"span\"\n typo=\"headline-small\"\n color={textColor}\n >\n Dismiss\n </UnderlinedText>\n )}\n </GenericButton>\n )}\n {exploreAction && (\n <GenericButton onClick={exploreAction} aria-label={`cta ${message}`}>\n <Box flex alignItems=\"center\">\n {showExploreText && (\n <UnderlinedText\n ml=\"12px\"\n tag=\"span\"\n typo=\"headline-small\"\n color={textColor}\n >\n Explore\n </UnderlinedText>\n )}\n {showExploreIcon && (\n <Icon\n render=\"arrow\"\n ml=\"12px\"\n size={24}\n color={iconColor}\n rotate={180}\n />\n )}\n </Box>\n </GenericButton>\n )}\n </Box>\n </BannerWrapper>\n )\n}\n\nconst BannerWrapper = styled(Box)<{ $backgroundColour: string }>(\n ({ $backgroundColour }) => css`\n border-radius: 0px 0px 16px 16px;\n background-color: ${$backgroundColour};\n `,\n)\n\nconst GenericButton = styled.button`\n cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n text-decoration: underline;\n`\n"]}
|
package/dist/Button/Button.js
CHANGED
|
@@ -3,7 +3,6 @@ import styled, { css } from 'styled-components';
|
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { Icon as IconComponent } from '../Icon';
|
|
5
5
|
import { Loader } from '../Loader';
|
|
6
|
-
import { theme } from '../theme';
|
|
7
6
|
import { focusOutlineStyle } from '../utils/focusOutline';
|
|
8
7
|
export const Button = forwardRef((props, ref) => {
|
|
9
8
|
const { children, id, className = '', disabled = false, handleClick, loading = false, primary = false, secondary = false, fallbackStyle = false, textBtn = false, smallButton = false, icon, trailingIcon = false, forcedWidth = '', form, type, ...otherProps } = props;
|
|
@@ -18,13 +17,13 @@ export const Button = forwardRef((props, ref) => {
|
|
|
18
17
|
Button.displayName = 'Button';
|
|
19
18
|
const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forcedWidth, $fallbackStyle, $textBtn, $smallButton, }) => css `
|
|
20
19
|
position: relative;
|
|
21
|
-
background-color: ${theme.
|
|
20
|
+
background-color: ${({ theme }) => theme.color.interactive.primary.base};
|
|
22
21
|
box-shadow: none;
|
|
23
|
-
color: ${theme.
|
|
22
|
+
color: ${({ theme }) => theme.color.text.base};
|
|
24
23
|
padding: 0 20px;
|
|
25
24
|
outline: none;
|
|
26
25
|
border-radius: 10000px;
|
|
27
|
-
font-weight: ${theme.
|
|
26
|
+
font-weight: ${({ theme }) => theme.fontWeight[500]};
|
|
28
27
|
cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};
|
|
29
28
|
line-height: 100%;
|
|
30
29
|
font-size: 16px;
|
|
@@ -35,35 +34,34 @@ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forc
|
|
|
35
34
|
|
|
36
35
|
${$primary &&
|
|
37
36
|
css `
|
|
38
|
-
color: ${theme.colors.liquorice};
|
|
39
|
-
|
|
40
37
|
&:hover {
|
|
41
|
-
background-color: ${!(disabled || $loading) && theme.
|
|
38
|
+
background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.primary.hover};
|
|
42
39
|
}
|
|
43
40
|
&:active {
|
|
44
|
-
background-color: ${theme.
|
|
41
|
+
background-color: ${({ theme }) => theme.color.interactive.primary.pressed};
|
|
45
42
|
}
|
|
46
43
|
`}
|
|
44
|
+
|
|
47
45
|
${$secondary &&
|
|
48
46
|
css `
|
|
49
|
-
background-color: ${theme.
|
|
47
|
+
background-color: ${({ theme }) => theme.color.interactive.secondary.base};
|
|
50
48
|
|
|
51
49
|
&:hover {
|
|
52
|
-
background-color: ${!(disabled || $loading) && theme.
|
|
50
|
+
background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.secondary.hover};
|
|
53
51
|
}
|
|
54
52
|
&:active {
|
|
55
|
-
background-color: ${theme.
|
|
53
|
+
background-color: ${({ theme }) => theme.color.interactive.secondary.pressed};
|
|
56
54
|
}
|
|
57
55
|
`}
|
|
58
56
|
${$fallbackStyle &&
|
|
59
57
|
css `
|
|
60
|
-
background-color: ${theme.
|
|
58
|
+
background-color: ${({ theme }) => theme.color.interactive.tertiary.base};
|
|
61
59
|
|
|
62
60
|
&:hover {
|
|
63
|
-
background-color: ${!(disabled || $loading) && theme.
|
|
61
|
+
background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.tertiary.hover};
|
|
64
62
|
}
|
|
65
63
|
&:active {
|
|
66
|
-
background-color: ${theme.
|
|
64
|
+
background-color: ${({ theme }) => theme.color.interactive.tertiary.pressed};
|
|
67
65
|
}
|
|
68
66
|
`}
|
|
69
67
|
${$smallButton &&
|
|
@@ -88,11 +86,11 @@ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forc
|
|
|
88
86
|
text-decoration: underline;
|
|
89
87
|
|
|
90
88
|
&:hover {
|
|
91
|
-
background-color: ${!(disabled || $loading) && theme.
|
|
89
|
+
background-color: ${({ theme }) => !(disabled || $loading) && theme.color.interactive.primary.hover};
|
|
92
90
|
}
|
|
93
91
|
&:active {
|
|
94
92
|
background-color: transparent;
|
|
95
|
-
color: ${theme.
|
|
93
|
+
color: ${({ theme }) => theme.color.text.subtle};
|
|
96
94
|
}
|
|
97
95
|
`}
|
|
98
96
|
`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ButtonHTMLAttributes, FC, ReactNode, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon as IconComponent } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Loader } from '../Loader'\nimport { theme } from '../theme'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n children: ReactNode\n id?: string\n className?: string\n disabled?: boolean\n handleClick?: (e: React.FormEvent<HTMLButtonElement>) => void\n loading?: boolean\n primary?: boolean\n secondary?: boolean\n fallbackStyle?: boolean\n textBtn?: boolean\n smallButton?: boolean\n icon?: Icons\n trailingIcon?: boolean\n forcedWidth?: string\n form?: string\n}\n\nexport type ButtonProps = Props &\n MarginProps &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>\n\nexport const Button: FC<ButtonProps> = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>((props, ref) => {\n const {\n children,\n id,\n className = '',\n disabled = false,\n handleClick,\n loading = false,\n primary = false,\n secondary = false,\n fallbackStyle = false,\n textBtn = false,\n smallButton = false,\n icon,\n trailingIcon = false,\n forcedWidth = '',\n form,\n type,\n ...otherProps\n } = props\n\n return (\n <Container\n forwardedAs=\"button\"\n id={id}\n className={className}\n disabled={disabled || loading}\n onClick={handleClick}\n $loading={loading}\n $primary={primary}\n $secondary={secondary}\n $fallbackStyle={fallbackStyle}\n $textBtn={textBtn}\n $smallButton={smallButton}\n $trailingIcon={trailingIcon}\n $forcedWidth={forcedWidth}\n {...(form ? { form } : {})}\n type={type}\n {...otherProps}\n ref={ref}\n >\n {loading && (\n <LoaderContainer>\n <Loader color={'liquorice'} height=\"16\" />\n </LoaderContainer>\n )}\n <ContentContainer $icon={icon} $loading={loading}>\n {!trailingIcon && icon && (\n <IconContainer\n $trailingIcon={trailingIcon}\n render={icon}\n size={smallButton ? 16 : 24}\n color={'liquorice'}\n />\n )}\n <ChildrenContainer className=\"childrenContainer\">\n {children}\n </ChildrenContainer>\n {trailingIcon && icon && textBtn && (\n <IconContainer\n $trailingIcon={trailingIcon}\n render={icon}\n size={smallButton ? 16 : 24}\n color={'liquorice'}\n className=\"iconContainer\"\n />\n )}\n </ContentContainer>\n </Container>\n )\n})\n\nButton.displayName = 'Button'\n\ntype IButton = TransientProps<\n Required<\n Pick<\n ButtonProps,\n | 'primary'\n | 'secondary'\n | 'forcedWidth'\n | 'fallbackStyle'\n | 'textBtn'\n | 'trailingIcon'\n | 'smallButton'\n >\n >\n> & {\n $loading: NonNullable<ButtonProps['loading']>\n disabled: boolean\n}\n\nconst Container = styled(Box)<IButton>(\n ({\n disabled,\n $loading,\n $primary,\n $secondary,\n $forcedWidth,\n $fallbackStyle,\n $textBtn,\n $smallButton,\n }) => css`\n position: relative;\n background-color: ${theme.colors.marshmallowPink};\n box-shadow: none;\n color: ${theme.colors.liquorice};\n padding: 0 20px;\n outline: none;\n border-radius: 10000px;\n font-weight: ${theme.font.weight.medium};\n cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n line-height: 100%;\n font-size: 16px;\n opacity: ${disabled ? '0.5' : '1'};\n width: ${$forcedWidth ? $forcedWidth : 'auto'};\n\n ${focusOutlineStyle}\n\n ${$primary &&\n css`\n color: ${theme.colors.liquorice};\n\n &:hover {\n background-color: ${!(disabled || $loading) && theme.colors.bubblegum};\n }\n &:active {\n background-color: ${theme.colors.lollipop};\n }\n `}\n ${$secondary &&\n css`\n background-color: ${theme.colors.oatmeal};\n\n &:hover {\n background-color: ${!(disabled || $loading) && theme.colors.mascarpone};\n }\n &:active {\n background-color: ${theme.colors.custard};\n }\n `}\n ${$fallbackStyle &&\n css`\n background-color: ${theme.colors.cream};\n\n &:hover {\n background-color: ${!(disabled || $loading) && theme.colors.coconut};\n }\n &:active {\n background-color: ${theme.colors.mascarpone};\n }\n `}\n ${$smallButton &&\n css`\n padding: 0 10px;\n min-width: 54px;\n font-size: 14px;\n\n .childrenContainer {\n padding: 9px 0;\n }\n\n span {\n margin: 0 5px 0 0;\n }\n `}\n ${$textBtn &&\n css`\n background-color: transparent;\n padding: 0;\n border-radius: 0;\n text-decoration: underline;\n\n &:hover {\n background-color: ${!(disabled || $loading) && theme.colors.fairyFloss};\n }\n &:active {\n background-color: transparent;\n color: ${theme.colors.sesame};\n }\n `}\n `,\n)\n\nconst LoaderContainer = styled.div`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst ContentContainer = styled.div<{ $loading: boolean; $icon?: Icons }>`\n display: flex;\n align-items: center;\n justify-content: ${({ $icon }) => ($icon ? 'space-evenly' : 'center')};\n opacity: ${({ $loading }) => ($loading ? '0' : '1')};\n`\n\nconst IconContainer = styled(IconComponent)<\n TransientProps<Pick<ButtonProps, 'trailingIcon'>>\n>(\n ({ $trailingIcon }) => css`\n margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};\n `,\n)\n\nconst ChildrenContainer = styled.div`\n padding: 16px 0;\n flex-grow: 1;\n`\n"]}
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ButtonHTMLAttributes, FC, ReactNode, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon as IconComponent } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Loader } from '../Loader'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n children: ReactNode\n id?: string\n className?: string\n disabled?: boolean\n handleClick?: (e: React.FormEvent<HTMLButtonElement>) => void\n loading?: boolean\n primary?: boolean\n secondary?: boolean\n fallbackStyle?: boolean\n textBtn?: boolean\n smallButton?: boolean\n icon?: Icons\n trailingIcon?: boolean\n forcedWidth?: string\n form?: string\n}\n\nexport type ButtonProps = Props &\n MarginProps &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>\n\nexport const Button: FC<ButtonProps> = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>((props, ref) => {\n const {\n children,\n id,\n className = '',\n disabled = false,\n handleClick,\n loading = false,\n primary = false,\n secondary = false,\n fallbackStyle = false,\n textBtn = false,\n smallButton = false,\n icon,\n trailingIcon = false,\n forcedWidth = '',\n form,\n type,\n ...otherProps\n } = props\n\n return (\n <Container\n forwardedAs=\"button\"\n id={id}\n className={className}\n disabled={disabled || loading}\n onClick={handleClick}\n $loading={loading}\n $primary={primary}\n $secondary={secondary}\n $fallbackStyle={fallbackStyle}\n $textBtn={textBtn}\n $smallButton={smallButton}\n $trailingIcon={trailingIcon}\n $forcedWidth={forcedWidth}\n {...(form ? { form } : {})}\n type={type}\n {...otherProps}\n ref={ref}\n >\n {loading && (\n <LoaderContainer>\n <Loader color={'liquorice'} height=\"16\" />\n </LoaderContainer>\n )}\n <ContentContainer $icon={icon} $loading={loading}>\n {!trailingIcon && icon && (\n <IconContainer\n $trailingIcon={trailingIcon}\n render={icon}\n size={smallButton ? 16 : 24}\n color={'liquorice'}\n />\n )}\n <ChildrenContainer className=\"childrenContainer\">\n {children}\n </ChildrenContainer>\n {trailingIcon && icon && textBtn && (\n <IconContainer\n $trailingIcon={trailingIcon}\n render={icon}\n size={smallButton ? 16 : 24}\n color={'liquorice'}\n className=\"iconContainer\"\n />\n )}\n </ContentContainer>\n </Container>\n )\n})\n\nButton.displayName = 'Button'\n\ntype IButton = TransientProps<\n Required<\n Pick<\n ButtonProps,\n | 'primary'\n | 'secondary'\n | 'forcedWidth'\n | 'fallbackStyle'\n | 'textBtn'\n | 'trailingIcon'\n | 'smallButton'\n >\n >\n> & {\n $loading: NonNullable<ButtonProps['loading']>\n disabled: boolean\n}\n\nconst Container = styled(Box)<IButton>(\n ({\n disabled,\n $loading,\n $primary,\n $secondary,\n $forcedWidth,\n $fallbackStyle,\n $textBtn,\n $smallButton,\n }) => css`\n position: relative;\n background-color: ${({ theme }) => theme.color.interactive.primary.base};\n box-shadow: none;\n color: ${({ theme }) => theme.color.text.base};\n padding: 0 20px;\n outline: none;\n border-radius: 10000px;\n font-weight: ${({ theme }) => theme.fontWeight[500]};\n cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n line-height: 100%;\n font-size: 16px;\n opacity: ${disabled ? '0.5' : '1'};\n width: ${$forcedWidth ? $forcedWidth : 'auto'};\n\n ${focusOutlineStyle}\n\n ${$primary &&\n css`\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.primary.pressed};\n }\n `}\n\n ${$secondary &&\n css`\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.secondary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.pressed};\n }\n `}\n ${$fallbackStyle &&\n css`\n background-color: ${({ theme }) => theme.color.interactive.tertiary.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.tertiary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.tertiary.pressed};\n }\n `}\n ${$smallButton &&\n css`\n padding: 0 10px;\n min-width: 54px;\n font-size: 14px;\n\n .childrenContainer {\n padding: 9px 0;\n }\n\n span {\n margin: 0 5px 0 0;\n }\n `}\n ${$textBtn &&\n css`\n background-color: transparent;\n padding: 0;\n border-radius: 0;\n text-decoration: underline;\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: transparent;\n color: ${({ theme }) => theme.color.text.subtle};\n }\n `}\n `,\n)\n\nconst LoaderContainer = styled.div`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst ContentContainer = styled.div<{ $loading: boolean; $icon?: Icons }>`\n display: flex;\n align-items: center;\n justify-content: ${({ $icon }) => ($icon ? 'space-evenly' : 'center')};\n opacity: ${({ $loading }) => ($loading ? '0' : '1')};\n`\n\nconst IconContainer = styled(IconComponent)<\n TransientProps<Pick<ButtonProps, 'trailingIcon'>>\n>(\n ({ $trailingIcon }) => css`\n margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};\n `,\n)\n\nconst ChildrenContainer = styled.div`\n padding: 16px 0;\n flex-grow: 1;\n`\n"]}
|
package/dist/Tag/Tag.spec.js
CHANGED
package/dist/Tag/Tag.spec.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.spec.js","sourceRoot":"","sources":["../../src/Tag/Tag.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Tag.spec.js","sourceRoot":"","sources":["../../src/Tag/Tag.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,2BAA2B,CAAA;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAG5B,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,GAAG,IAAC,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAC,SAAS,GAAG,CACrE,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,EAAE,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;QAC3C,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE;YACrB,MAAM,CAAC,oBAAC,GAAG,OAAK,KAAK,GAAI,CAAC,CAAA;YAE1B,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAA;YAEzD,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;gBACf,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,YAAY,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;gBAChE,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAA;YACzC,CAAC;iBAAM,CAAC;gBACN,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,YAAY,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;gBAClE,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAA;YAC7C,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,MAAM,SAAS,GAAG;IAChB;QACE,WAAW,EAAE,sCAAsC;QACnD,KAAK,EAAE;YACL,KAAK,EAAE,eAAe;YACtB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,MAAM;SACJ;KACd;IACD;QACE,WAAW,EAAE,oDAAoD;QACjE,KAAK,EAAE;YACL,KAAK,EAAE,eAAe;YACtB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,WAAW;SACX;KACd;IACD;QACE,WAAW,EACT,2FAA2F;QAC7F,KAAK,EAAE;YACL,KAAK,EAAE,eAAe;YACtB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,WAAW;SACX;KACd;IACD;QACE,WAAW,EACT,0FAA0F;QAC5F,KAAK,EAAE;YACL,KAAK,EAAE,eAAe;YACtB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,YAAY;SACP;KACd;CACF,CAAA","sourcesContent":["import React from 'react'\nimport { render, screen } from '../testUtils'\nimport { it, expect } from 'vitest'\nimport '@testing-library/jest-dom'\nimport { Tag } from '../Tag'\nimport { TagProps } from './Tag'\n\ndescribe('Tag Component', () => {\n it('renders snapshot test correctly', () => {\n const { container } = render(\n <Tag label=\"Snapshot Test Tag\" color=\"marzipan\" bgColor=\"satsuma\" />,\n )\n expect(container).toMatchSnapshot()\n })\n\n testCases.forEach(({ description, props }) => {\n test(description, () => {\n render(<Tag {...props} />)\n\n expect(screen.getByText(props.label)).toBeInTheDocument()\n\n if (props.icon) {\n const iconElement = screen.getByTestId(`tag-icon-${props.icon}`)\n expect(iconElement).toBeInTheDocument()\n } else {\n const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`)\n expect(iconElement).not.toBeInTheDocument()\n }\n })\n })\n})\n\nconst testCases = [\n {\n description: 'Renders Tag with label Test Tag 0001',\n props: {\n label: 'Test Tag 0001',\n color: 'apple',\n bgColor: 'chia',\n } as TagProps,\n },\n {\n description: 'Renders Tag with label Test Tag 0002 and flag icon',\n props: {\n label: 'Test Tag 0002',\n color: 'apple',\n bgColor: 'chia',\n icon: 'flag',\n iconColor: 'blueberry',\n } as TagProps,\n },\n {\n description:\n 'Renders Tag with label Test Tag 0003 and no icon if iconColor: blueberry, icon: undefined',\n props: {\n label: 'Test Tag 0003',\n color: 'apple',\n bgColor: 'chia',\n iconColor: 'blueberry',\n } as TagProps,\n },\n {\n description:\n 'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',\n props: {\n label: 'Test Tag 0004',\n color: 'apple',\n bgColor: 'chia',\n icon: 'flagFilled',\n } as TagProps,\n },\n]\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { RenderOptions } from '@testing-library/react';
|
|
3
|
+
declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, "wrapper">) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
|
|
4
|
+
export * from '@testing-library/react';
|
|
5
|
+
export { customRender as render };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render } from '@testing-library/react';
|
|
3
|
+
import { SmoresThemeProvider } from '../ThemeProvider/ThemeProvider';
|
|
4
|
+
const Providers = ({ children }) => {
|
|
5
|
+
return React.createElement(SmoresThemeProvider, null, children);
|
|
6
|
+
};
|
|
7
|
+
const customRender = (ui, options) => render(ui, { wrapper: Providers, ...options });
|
|
8
|
+
export * from '@testing-library/react';
|
|
9
|
+
export { customRender as render };
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/testUtils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAiB,MAAM,wBAAwB,CAAA;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAA;AAEpE,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE;IAChE,OAAO,oBAAC,mBAAmB,QAAE,QAAQ,CAAuB,CAAA;AAC9D,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CACnB,EAAgB,EAChB,OAAwC,EACxC,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC,CAAA;AAEnD,cAAc,wBAAwB,CAAA;AACtC,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,CAAA","sourcesContent":["import React, { ReactElement } from 'react'\nimport { render, RenderOptions } from '@testing-library/react'\nimport { SmoresThemeProvider } from '../ThemeProvider/ThemeProvider'\n\nconst Providers = ({ children }: { children: React.ReactNode }) => {\n return <SmoresThemeProvider>{children}</SmoresThemeProvider>\n}\n\nconst customRender = (\n ui: ReactElement,\n options?: Omit<RenderOptions, 'wrapper'>,\n) => render(ui, { wrapper: Providers, ...options })\n\nexport * from '@testing-library/react'\nexport { customRender as render }\n"]}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import { css } from 'styled-components';
|
|
2
|
-
import { theme } from '../theme';
|
|
3
2
|
export const focusOutline = ({ selector = '&:focus-visible', } = {}) => css `
|
|
4
3
|
outline: 0;
|
|
5
4
|
|
|
6
5
|
${selector} {
|
|
7
|
-
outline: 2px solid ${theme.
|
|
6
|
+
outline: 2px solid ${({ theme }) => theme.color.border.contrast};
|
|
8
7
|
outline-offset: 2px;
|
|
9
8
|
}
|
|
10
9
|
`;
|
|
11
10
|
export const focusOutlineStyle = css `
|
|
12
11
|
&:focus-visible {
|
|
13
|
-
outline: 2px solid ${theme.
|
|
12
|
+
outline: 2px solid ${({ theme }) => theme.color.border.contrast};
|
|
14
13
|
outline-offset: 2px;
|
|
15
14
|
}
|
|
16
15
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusOutline.js","sourceRoot":"","sources":["../../src/utils/focusOutline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"focusOutline.js","sourceRoot":"","sources":["../../src/utils/focusOutline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAEvC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,GAAG,iBAAiB,MACH,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;IAGjC,QAAQ;yBACa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;;CAGlE,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;yBAEX,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;;CAGlE,CAAA","sourcesContent":["import { css } from 'styled-components'\n\nexport const focusOutline = ({\n selector = '&:focus-visible',\n}: { selector?: string } = {}) => css`\n outline: 0;\n\n ${selector} {\n outline: 2px solid ${({ theme }) => theme.color.border.contrast};\n outline-offset: 2px;\n }\n`\n\nexport const focusOutlineStyle = css`\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.color.border.contrast};\n outline-offset: 2px;\n }\n`\n"]}
|