@mrshmllw/smores-react 13.7.1 → 13.9.0
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/Icon/Icon.d.ts +2 -2
- package/dist/Icon/Icon.js +11 -9
- package/dist/Icon/Icon.js.map +1 -1
- package/dist/ThemeProvider/utils/colourMap.d.ts +1 -1
- package/dist/ThemeProvider/utils/colourMap.js +4 -1
- package/dist/ThemeProvider/utils/colourMap.js.map +1 -1
- package/dist/Toggle/Toggle.d.ts +2 -2
- package/dist/Toggle/Toggle.js +11 -7
- package/dist/Toggle/Toggle.js.map +1 -1
- package/dist/fields/components/CommonInput.d.ts +2 -2
- package/package.json +1 -1
package/dist/Icon/Icon.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { MarginProps } from '../utils/space';
|
|
3
|
-
import { Color } from '../theme';
|
|
4
3
|
import { Icons } from './iconsList';
|
|
4
|
+
import { ColorTypes } from '../ThemeProvider/utils/colourMap';
|
|
5
5
|
export type IconProps = {
|
|
6
6
|
/** className attribute to apply classes from props */
|
|
7
7
|
className?: string;
|
|
@@ -10,7 +10,7 @@ export type IconProps = {
|
|
|
10
10
|
/** set size of the Icon */
|
|
11
11
|
size?: number;
|
|
12
12
|
/** set color of the Icon */
|
|
13
|
-
color?:
|
|
13
|
+
color?: ColorTypes;
|
|
14
14
|
/** rotation degrees */
|
|
15
15
|
rotate?: number;
|
|
16
16
|
} & MarginProps;
|
package/dist/Icon/Icon.js
CHANGED
|
@@ -1,25 +1,27 @@
|
|
|
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
|
-
import { theme } from '../theme';
|
|
5
4
|
import { iconList } from './iconsList';
|
|
6
|
-
|
|
5
|
+
import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
|
|
6
|
+
export const Icon = ({ className = '', render, size = 24, color = 'color.icon.base', rotate = 0, ...marginProps }) => {
|
|
7
|
+
const theme = useTheme();
|
|
7
8
|
if (!render || !iconList[render] || render.length === 0)
|
|
8
9
|
return null;
|
|
10
|
+
const resolvedColor = resolveToThemeColor(color, theme);
|
|
9
11
|
const IconComponent = iconList[render];
|
|
10
|
-
return (React.createElement(Container, { forwardedAs: "span", "data-testid": `${render}-container`, className: className, size: size, rotate: rotate, color:
|
|
12
|
+
return (React.createElement(Container, { forwardedAs: "span", "data-testid": `${render}-container`, className: className, "$size": size, "$rotate": rotate, "$color": resolvedColor, ...marginProps },
|
|
11
13
|
React.createElement(IconComponent, null)));
|
|
12
14
|
};
|
|
13
|
-
const Container = styled(Box)(({ size, rotate, color }) => css `
|
|
15
|
+
const Container = styled(Box)(({ $size, $rotate, $color }) => css `
|
|
14
16
|
display: flex;
|
|
15
17
|
align-items: center;
|
|
16
18
|
justify-content: center;
|
|
17
19
|
flex-shrink: 0;
|
|
18
|
-
width: ${size}px;
|
|
19
|
-
height: ${size}px;
|
|
20
|
-
transform: rotate(${rotate}deg);
|
|
20
|
+
width: ${$size}px;
|
|
21
|
+
height: ${$size}px;
|
|
22
|
+
transform: rotate(${$rotate}deg);
|
|
21
23
|
svg {
|
|
22
|
-
color: ${
|
|
24
|
+
color: ${$color} !important;
|
|
23
25
|
}
|
|
24
26
|
`);
|
|
25
27
|
//# sourceMappingURL=Icon.js.map
|
package/dist/Icon/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAS,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAezC,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,SAAS,GAAG,EAAE,EACd,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,iBAAiB,EACzB,MAAM,GAAG,CAAC,EACV,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IACpE,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAEvD,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEtC,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAC,MAAM,iBACL,GAAG,MAAM,YAAY,EAClC,SAAS,EAAE,SAAS,WACb,IAAI,aACF,MAAM,YACP,aAAa,KACjB,WAAW;QAEf,oBAAC,aAAa,OAAG,CACP,CACb,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;aAKxB,KAAK;cACJ,KAAK;wBACK,OAAO;;eAEhB,MAAM;;GAElB,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { Box } from '../Box'\nimport { Icons, iconList } from './iconsList'\nimport {\n ColorTypes,\n resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type IconProps = {\n /** className attribute to apply classes from props */\n className?: string\n /** specify what Icon to render */\n render: Icons\n /** set size of the Icon */\n size?: number\n /** set color of the Icon */\n color?: ColorTypes\n /** rotation degrees */\n rotate?: number\n} & MarginProps\n\nexport const Icon: FC<IconProps> = ({\n className = '',\n render,\n size = 24,\n color = 'color.icon.base',\n rotate = 0,\n ...marginProps\n}) => {\n const theme = useTheme()\n if (!render || !iconList[render] || render.length === 0) return null\n const resolvedColor = resolveToThemeColor(color, theme)\n\n const IconComponent = iconList[render]\n\n return (\n <Container\n forwardedAs=\"span\"\n data-testid={`${render}-container`}\n className={className}\n $size={size}\n $rotate={rotate}\n $color={resolvedColor}\n {...marginProps}\n >\n <IconComponent />\n </Container>\n )\n}\n\ninterface IIcon extends MarginProps {\n $size: number\n $color: string\n $rotate: number\n}\n\nconst Container = styled(Box)<IIcon>(\n ({ $size, $rotate, $color }) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: ${$size}px;\n height: ${$size}px;\n transform: rotate(${$rotate}deg);\n svg {\n color: ${$color} !important;\n }\n `,\n)\n"]}
|
|
@@ -10,7 +10,7 @@ type Prettify<T> = {
|
|
|
10
10
|
export type NewColor = Prettify<Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>>;
|
|
11
11
|
export type ColorTypes = Color | NewColor;
|
|
12
12
|
export declare const resolveToThemeColor: (color: ColorTypes, theme: Theme) => string;
|
|
13
|
-
export declare const getColorPath: (color: ColorTypes) => "meta" | "onfido" | "rac" | "
|
|
13
|
+
export declare const getColorPath: (color: ColorTypes) => "meta" | "onfido" | "rac" | "color.text.base" | "color.text.subtle" | "color.text.contrast" | "color.text.on-dark" | "color.text.nonEssential" | "color.interactive.primary.base" | "color.interactive.primary.hover" | "color.interactive.primary.pressed" | "color.interactive.primary.active" | "color.interactive.secondary.base" | "color.interactive.secondary.hover" | "color.interactive.secondary.pressed" | "color.interactive.secondary.active" | "color.interactive.tertiary.base" | "color.interactive.tertiary.hover" | "color.interactive.tertiary.pressed" | "color.interactive.tertiary.active" | "color.background.100" | "color.background.200" | "color.background.000" | "color.icon.base" | "color.icon.subtle" | "color.icon.contrast" | "color.icon.on-dark" | "color.icon.nonEssential" | "color.surface.base.400" | "color.surface.base.100" | "color.surface.base.200" | "color.surface.base.000" | "color.surface.base.300" | "color.surface.base.900" | "color.surface.brand.400" | "color.surface.brand.100" | "color.surface.brand.200" | "color.surface.brand.300" | "color.surface.brand.accent1" | "color.surface.brand.accent2" | "color.surface.brand.accent3" | "color.surface.brand.accent4" | "color.feedback.negative.100" | "color.feedback.negative.200" | "color.feedback.positive.100" | "color.feedback.positive.200" | "color.feedback.notice.100" | "color.feedback.notice.200" | "color.feedback.informative.100" | "color.feedback.informative.200" | "color.feedback.inactive.100" | "color.focus.onLight" | "color.focus.onDark" | "color.border.base" | "color.border.subtle" | "color.border.contrast" | "color.illustration.accent1.100" | "color.illustration.accent1.200" | "color.illustration.accent2.100" | "color.illustration.accent2.200" | "color.illustration.accent3.100" | "color.illustration.accent3.200" | "color.illustration.accent4.100" | "color.illustration.accent4.200" | "color.illustration.neutral.400" | "color.illustration.neutral.100" | "color.illustration.neutral.200" | "color.illustration.neutral.000" | "color.illustration.neutral.300" | "color.illustration.neutral.900" | "extended1.100" | "extended1.20" | "compareTheMarket" | "ravelin" | "stripe" | "intercom" | "checkout" | "hometree" | "premfina" | "thirdParty.onfido" | "thirdParty.rac" | "thirdParty.compareTheMarket" | "thirdParty.facebook" | "thirdParty.ravelin" | "thirdParty.confusedCom" | "thirdParty.stripe" | "thirdParty.intercom" | "thirdParty.twitter" | "thirdParty.checkout" | "thirdParty.hometree" | "thirdParty.premfina" | "lollipop" | "marshmallowPink" | "bubblegum" | "fairyFloss" | "boba" | "liquorice" | "sesame" | "chia" | "custard" | "mascarpone" | "coconut" | "cream" | "spearmint" | "feijoa" | "blueberry" | "macaroon" | "pistachio" | "matcha" | "caramel" | "peanut" | "marzipan" | "oatmeal" | "satsuma" | "strawberry" | "watermelon" | "apple" | "mint" | "lemon" | "sherbert" | "tangerine" | "confused" | "x";
|
|
14
14
|
export declare const formatDesignTokenColor: () => string;
|
|
15
15
|
export declare const legacyColorMap: Record<Color, NewColor>;
|
|
16
16
|
export {};
|
|
@@ -2,7 +2,10 @@ import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.
|
|
|
2
2
|
import { getFromObject } from '../../utils/getFromObject';
|
|
3
3
|
export const resolveToThemeColor = (color, theme) => {
|
|
4
4
|
const colourPath = getColorPath(color);
|
|
5
|
-
return getFromObject({
|
|
5
|
+
return getFromObject({
|
|
6
|
+
obj: theme,
|
|
7
|
+
path: colourPath,
|
|
8
|
+
});
|
|
6
9
|
};
|
|
7
10
|
// a function that returns a flattened dot notation string path to access the color value
|
|
8
11
|
export const getColorPath = (color) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colourMap.js","sourceRoot":"","sources":["../../../src/ThemeProvider/utils/colourMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,uDAAuD,CAAA;AAGrF,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAkBzD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,KAAiB,EACjB,KAAY,EACJ,EAAE;IACV,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,CAAC,CAAA;IACtC,OAAO,aAAa,CAAC,
|
|
1
|
+
{"version":3,"file":"colourMap.js","sourceRoot":"","sources":["../../../src/ThemeProvider/utils/colourMap.ts"],"names":[],"mappings":"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","sourcesContent":["import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json'\nimport { Color } from '../../theme'\nimport { Theme } from '../ThemeProvider'\nimport { getFromObject } from '../../utils/getFromObject'\n\ntype Flatten<T, Prefix extends string = ''> = {\n [K in keyof T & string]: T[K] extends Record<string, any>\n ? Flatten<T[K], `${Prefix}${K}.`>\n : `${Prefix}${K}`\n}[keyof T & string]\n\ntype Prettify<T> = {\n [K in keyof T]: T[K]\n} & {}\n\nexport type NewColor = Prettify<\n Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>\n>\n\nexport type ColorTypes = Color | NewColor\n\nexport const resolveToThemeColor = (\n color: ColorTypes,\n theme: Theme,\n): string => {\n const colourPath = getColorPath(color)\n return getFromObject({\n obj: theme,\n path: colourPath,\n })\n}\n\n// a function that returns a flattened dot notation string path to access the color value\nexport const getColorPath = (color: ColorTypes) => {\n return color in legacyColorMap\n ? legacyColorMap[color as keyof typeof legacyColorMap]\n : color\n}\n\n// a function that returns the design token color paths as a comma-separated string\nexport const formatDesignTokenColor = (): string => {\n const { color, extended1, thirdParty } = designTokens\n const colors = { color, extended1, thirdParty }\n\n if (colors === null) {\n return ''\n }\n\n const result: string[] = []\n const destructureNestedObject = (obj: any, currentPath: string) => {\n for (const key in obj) {\n if (Object.prototype.hasOwnProperty.call(obj, key)) {\n const value = obj[key]\n const newPath = currentPath ? `${currentPath}.${key}` : key\n if (typeof value === 'object' && value !== null) {\n destructureNestedObject(value, newPath)\n } else {\n result.push(newPath)\n }\n }\n }\n }\n destructureNestedObject(colors, '')\n return result.join(', ')\n}\n\n// old colour name → new colour path // base token value\nexport const legacyColorMap: Record<Color, NewColor> = {\n fairyFloss: 'color.surface.brand.100', // palette.primary.040\n bubblegum: 'color.surface.brand.200', // palette.primary.060\n marshmallowPink: 'color.surface.brand.300', // palette.primary.100\n lollipop: 'color.surface.brand.400', // palatte.primary.120\n\n // Core Secondary\n chia: 'color.feedback.inactive.100', // palette.secondary.040\n sesame: 'color.text.subtle', // palette.secondary.060\n liquorice: 'color.text.base', // palette.secondary.100\n boba: 'color.text.contrast', // palette.secondary.120\n\n // Core Tertiary\n cream: `color.surface.base.000`, // palette.neutral.000\n coconut: 'color.surface.base.100', // palette.neutral.010\n mascarpone: 'color.surface.base.200', // palette.neutral.020\n custard: 'color.surface.base.300', // palette.neutral.040\n\n // Brand Secondary\n feijoa: 'color.illustration.accent1.100', // palette.brand1.060\n spearmint: 'color.illustration.accent1.200', // palette.brand1.100\n macaroon: 'color.illustration.accent2.100', // palette.brand2.060\n blueberry: 'color.illustration.accent2.200', // palette.brand2.100\n pistachio: 'color.illustration.accent3.200', // palette.brand3.100\n matcha: 'color.illustration.accent3.100', // palette.brand3.060\n caramel: 'color.illustration.accent4.200', // palette.brand4.100\n peanut: 'color.illustration.accent4.100', // palette.brand4.060\n marzipan: 'color.illustration.neutral.400', // palette.neutral.100\n oatmeal: 'color.illustration.neutral.300', // palette.neutral.060\n satsuma: 'extended1.20', // extended1.020\n\n // Traffic light\n watermelon: 'color.feedback.negative.100', // palette.negative.020\n strawberry: 'color.feedback.negative.200', // palette.negative.100\n apple: 'color.feedback.positive.200', // palette.positive.100\n mint: 'color.feedback.positive.100', // palette.positive.020\n lemon: 'color.feedback.notice.200', // palette.notice.100\n sherbert: 'color.feedback.notice.100', // palette.notice.020\n tangerine: 'extended1.100', // extended1.100\n\n // Third-party brand colours\n compareTheMarket: 'thirdParty.compareTheMarket',\n confused: 'thirdParty.confusedCom',\n onfido: 'thirdParty.onfido',\n x: 'thirdParty.twitter', // x rebrand not yet reflected in foundations\n premfina: 'thirdParty.premfina',\n checkout: 'thirdParty.checkout',\n meta: 'thirdParty.facebook', // Meta rebrand not yet reflected in foundations\n stripe: 'thirdParty.stripe',\n intercom: 'thirdParty.intercom',\n ravelin: 'thirdParty.ravelin',\n rac: 'thirdParty.rac',\n hometree: 'thirdParty.hometree',\n} as const\n"]}
|
package/dist/Toggle/Toggle.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { Color } from '../theme';
|
|
3
2
|
import { MarginProps } from '../utils/space';
|
|
3
|
+
import { ColorTypes } from '../ThemeProvider/utils/colourMap';
|
|
4
4
|
export type Props = {
|
|
5
5
|
/** unique ID */
|
|
6
6
|
id?: string;
|
|
@@ -9,6 +9,6 @@ export type Props = {
|
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
/** onToggle listener */
|
|
11
11
|
onToggle: () => void;
|
|
12
|
-
bgColor?:
|
|
12
|
+
bgColor?: ColorTypes;
|
|
13
13
|
} & MarginProps;
|
|
14
14
|
export declare const Toggle: FC<Props>;
|
package/dist/Toggle/Toggle.js
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
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
|
-
import { theme } from '../theme';
|
|
5
4
|
import { focusOutline } from '../utils/focusOutline';
|
|
5
|
+
import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
|
|
6
6
|
export const Toggle = ({ id, checked, onToggle, disabled, bgColor, ...marginProps }) => {
|
|
7
|
+
const theme = useTheme();
|
|
8
|
+
const resolvedBgColor = bgColor
|
|
9
|
+
? resolveToThemeColor(bgColor, theme)
|
|
10
|
+
: undefined;
|
|
7
11
|
return (React.createElement(Switch, { forwardedAs: "label", htmlFor: id, ...marginProps },
|
|
8
|
-
React.createElement(Checkbox, { id: id, disabled: disabled, type: "checkbox", checked: checked, onChange: onToggle, "$bgColor":
|
|
12
|
+
React.createElement(Checkbox, { id: id, disabled: disabled, type: "checkbox", checked: checked, onChange: onToggle, "$bgColor": resolvedBgColor, onKeyDown: (e) => {
|
|
9
13
|
if (e.key === 'Enter') {
|
|
10
14
|
onToggle();
|
|
11
15
|
}
|
|
@@ -31,7 +35,7 @@ const Slider = styled.span `
|
|
|
31
35
|
left: 0;
|
|
32
36
|
right: 0;
|
|
33
37
|
bottom: 0;
|
|
34
|
-
background-color: ${theme.
|
|
38
|
+
background-color: ${({ theme }) => theme.color.feedback.inactive[100]};
|
|
35
39
|
border: none;
|
|
36
40
|
border-radius: 28px;
|
|
37
41
|
transition: 0.2s background-color;
|
|
@@ -44,7 +48,7 @@ const Slider = styled.span `
|
|
|
44
48
|
width: 24px;
|
|
45
49
|
left: 4px;
|
|
46
50
|
bottom: 4px;
|
|
47
|
-
background-color: ${theme.
|
|
51
|
+
background-color: ${({ theme }) => theme.color.surface.base[100]};
|
|
48
52
|
transition: 0.2s transform;
|
|
49
53
|
border-radius: 50%;
|
|
50
54
|
}
|
|
@@ -55,7 +59,7 @@ const Slider = styled.span `
|
|
|
55
59
|
`
|
|
56
60
|
: css `
|
|
57
61
|
&:hover {
|
|
58
|
-
background-color: ${theme.
|
|
62
|
+
background-color: ${({ theme }) => theme.color.illustration.neutral[400]};
|
|
59
63
|
}
|
|
60
64
|
`}
|
|
61
65
|
`;
|
|
@@ -63,7 +67,7 @@ const Checkbox = styled.input `
|
|
|
63
67
|
${focusOutline({ selector: `&:focus-visible + ${Slider}` })}
|
|
64
68
|
|
|
65
69
|
&:checked + ${Slider} {
|
|
66
|
-
background-color: ${(
|
|
70
|
+
background-color: ${({ $bgColor, theme }) => $bgColor ? $bgColor : theme.color.feedback.positive[200]};
|
|
67
71
|
border: none;
|
|
68
72
|
}
|
|
69
73
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAazC,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,OAAO;QAC7B,CAAC,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC;QACrC,CAAC,CAAC,SAAS,CAAA;IAEb,OAAO,CACL,oBAAC,MAAM,IAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAE,EAAE,KAAM,WAAW;QACtD,oBAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,cACR,eAAe,EACzB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACtB,QAAQ,EAAE,CAAA;gBACZ,CAAC;YACH,CAAC,gBACU,QAAQ,GACnB;QACF,oBAAC,MAAM,iBAAY,QAAQ,GAAI,CACxB,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAyB;;;;;;;sBAO7B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;;;;;;;;;;wBAa/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;IAKhE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACP,CAAC,CAAC,GAAG,CAAA;;SAEF;IACH,CAAC,CAAC,GAAG,CAAA;;gCAEqB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAChC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC;;SAE1C;CACR,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAuB;IAChD,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,MAAM,EAAE,EAAE,CAAC;;gBAE7C,MAAM;wBACE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;gBAI9C,MAAM;;;CAGrB,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport {\n ColorTypes,\n resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type Props = {\n /** unique ID */\n id?: string\n /** checked flag */\n checked: boolean\n disabled?: boolean\n /** onToggle listener */\n onToggle: () => void\n bgColor?: ColorTypes\n} & MarginProps\n\nexport const Toggle: FC<Props> = ({\n id,\n checked,\n onToggle,\n disabled,\n bgColor,\n ...marginProps\n}) => {\n const theme = useTheme()\n\n const resolvedBgColor = bgColor\n ? resolveToThemeColor(bgColor, theme)\n : undefined\n\n return (\n <Switch forwardedAs=\"label\" htmlFor={id} {...marginProps}>\n <Checkbox\n id={id}\n disabled={disabled}\n type=\"checkbox\"\n checked={checked}\n onChange={onToggle}\n $bgColor={resolvedBgColor}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n onToggle()\n }\n }}\n aria-label=\"toggle\"\n />\n <Slider $disabled={disabled} />\n </Switch>\n )\n}\n\nconst Switch = styled(Box)`\n position: relative;\n display: inline-block;\n width: 56px;\n height: 32px;\n\n input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n`\n\nconst Slider = styled.span<{ $disabled?: boolean }>`\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${({ theme }) => theme.color.feedback.inactive[100]};\n border: none;\n border-radius: 28px;\n transition: 0.2s background-color;\n outline: none;\n\n &:before {\n position: absolute;\n content: '';\n height: 24px;\n width: 24px;\n left: 4px;\n bottom: 4px;\n background-color: ${({ theme }) => theme.color.surface.base[100]};\n transition: 0.2s transform;\n border-radius: 50%;\n }\n\n ${({ $disabled }) =>\n $disabled\n ? css`\n cursor: not-allowed;\n `\n : css`\n &:hover {\n background-color: ${({ theme }) =>\n theme.color.illustration.neutral[400]};\n }\n `}\n`\n\nconst Checkbox = styled.input<{ $bgColor?: string }>`\n ${focusOutline({ selector: `&:focus-visible + ${Slider}` })}\n\n &:checked + ${Slider} {\n background-color: ${({ $bgColor, theme }) =>\n $bgColor ? $bgColor : theme.color.feedback.positive[200]};\n border: none;\n }\n\n &:checked + ${Slider}:before {\n transform: translateX(24px);\n }\n`\n"]}
|
|
@@ -17,14 +17,14 @@ export declare const StyledFrontIcon: import("styled-components/dist/types").ISt
|
|
|
17
17
|
className?: string;
|
|
18
18
|
render: Icons;
|
|
19
19
|
size?: number;
|
|
20
|
-
color?: import("
|
|
20
|
+
color?: import("../../ThemeProvider/utils/colourMap").ColorTypes;
|
|
21
21
|
rotate?: number;
|
|
22
22
|
} & import("../..").MarginProps, SIcon>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
|
|
23
23
|
export declare const StyledTrailingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
|
|
24
24
|
className?: string;
|
|
25
25
|
render: Icons;
|
|
26
26
|
size?: number;
|
|
27
|
-
color?: import("
|
|
27
|
+
color?: import("../../ThemeProvider/utils/colourMap").ColorTypes;
|
|
28
28
|
rotate?: number;
|
|
29
29
|
} & import("../..").MarginProps, SIcon>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
|
|
30
30
|
export {};
|