@mrshmllw/smores-react 13.7.1 → 13.8.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.
|
@@ -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"]}
|