@mrshmllw/smores-react 13.6.0 → 13.7.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/Tag/Tag.d.ts +4 -3
- package/dist/Tag/Tag.js +10 -6
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tag/Tag.spec.js +70 -12
- package/dist/Tag/Tag.spec.js.map +1 -1
- package/dist/ThemeProvider/utils/colourMap.d.ts +3 -2
- package/dist/ThemeProvider/utils/colourMap.js +9 -3
- package/dist/ThemeProvider/utils/colourMap.js.map +1 -1
- package/package.json +1 -1
package/dist/Tag/Tag.d.ts
CHANGED
|
@@ -2,11 +2,12 @@ import { FC } from 'react';
|
|
|
2
2
|
import { MarginProps } from '../utils/space';
|
|
3
3
|
import { Color } from '../theme';
|
|
4
4
|
import { Icons } from 'Icon/iconsList';
|
|
5
|
+
import { ColorTypes } from '../ThemeProvider/utils/colourMap';
|
|
5
6
|
export type TagProps = {
|
|
6
7
|
label: string;
|
|
7
|
-
color:
|
|
8
|
-
bgColor:
|
|
9
|
-
borderColor?:
|
|
8
|
+
color: ColorTypes;
|
|
9
|
+
bgColor: ColorTypes;
|
|
10
|
+
borderColor?: ColorTypes;
|
|
10
11
|
className?: string;
|
|
11
12
|
icon?: Icons;
|
|
12
13
|
iconColor?: Color;
|
package/dist/Tag/Tag.js
CHANGED
|
@@ -2,14 +2,18 @@ import React from 'react';
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { Text } from '../Text';
|
|
5
|
-
import { theme } from '../theme';
|
|
6
5
|
import { Icon } from '../Icon';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
import { getColorPath, resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
|
|
7
|
+
export const Tag = ({ label, color, borderColor, bgColor, className, icon, iconColor, onClick, ...marginProps }) => {
|
|
8
|
+
const resolvedBGColor = resolveToThemeColor(bgColor);
|
|
9
|
+
const resolvedBorderColor = borderColor && resolveToThemeColor(borderColor);
|
|
10
|
+
return (React.createElement(Wrapper, { "$bgColor": resolvedBGColor, className: className, "$borderColor": resolvedBorderColor, ...marginProps, alignContent: "center", justifyContent: "center", onClick: onClick },
|
|
11
|
+
icon && (React.createElement(TagIcon, { render: icon, color: iconColor, size: 16, "data-testid": `tag-icon-${icon}` })),
|
|
12
|
+
React.createElement(TagText, { tag: "span", typo: "label", color: getColorPath(color) }, label)));
|
|
13
|
+
};
|
|
10
14
|
const Wrapper = styled(Box) `
|
|
11
|
-
background-color: ${({ $bgColor }) => $bgColor
|
|
12
|
-
border: ${({ $borderColor }) => $borderColor && `1px solid ${
|
|
15
|
+
background-color: ${({ $bgColor }) => $bgColor};
|
|
16
|
+
border: ${({ $borderColor }) => $borderColor && `1px solid ${$borderColor}`};
|
|
13
17
|
|
|
14
18
|
border-radius: 6px;
|
|
15
19
|
padding: 4px 8px;
|
package/dist/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAItC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAItC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAEL,YAAY,EACZ,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAazC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,SAAS,EACT,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAA;IAEpD,MAAM,mBAAmB,GAAG,WAAW,IAAI,mBAAmB,CAAC,WAAW,CAAC,CAAA;IAE3E,OAAO,CACL,oBAAC,OAAO,gBACI,eAAe,EACzB,SAAS,EAAE,SAAS,kBACN,mBAAmB,KAC7B,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ,EACvB,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,oBAAC,OAAO,IACN,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,iBACK,YAAY,IAAI,EAAE,GAC/B,CACH;QACD,oBAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,IACxD,KAAK,CACE,CACF,CACX,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;YACpC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,IAAI,aAAa,YAAY,EAAE;;;;;;;;;CAS5E,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE3B,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Color } from '../theme'\nimport { Icon } from '../Icon'\nimport { Icons } from 'Icon/iconsList'\nimport {\n ColorTypes,\n getColorPath,\n resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type TagProps = {\n label: string\n color: ColorTypes\n bgColor: ColorTypes\n borderColor?: ColorTypes\n className?: string\n icon?: Icons\n iconColor?: Color\n onClick?: () => void\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n label,\n color,\n borderColor,\n bgColor,\n className,\n icon,\n iconColor,\n onClick,\n ...marginProps\n}) => {\n const resolvedBGColor = resolveToThemeColor(bgColor)\n\n const resolvedBorderColor = borderColor && resolveToThemeColor(borderColor)\n\n return (\n <Wrapper\n $bgColor={resolvedBGColor}\n className={className}\n $borderColor={resolvedBorderColor}\n {...marginProps}\n alignContent=\"center\"\n justifyContent=\"center\"\n onClick={onClick}\n >\n {icon && (\n <TagIcon\n render={icon}\n color={iconColor}\n size={16}\n data-testid={`tag-icon-${icon}`}\n />\n )}\n <TagText tag=\"span\" typo=\"label\" color={getColorPath(color)}>\n {label}\n </TagText>\n </Wrapper>\n )\n}\n\ntype WrapperProps = TransientProps<{\n bgColor: string\n borderColor?: string\n}>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n background-color: ${({ $bgColor }) => $bgColor};\n border: ${({ $borderColor }) => $borderColor && `1px solid ${$borderColor}`};\n\n border-radius: 6px;\n padding: 4px 8px;\n\n height: 22px;\n\n box-sizing: border-box;\n display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n display: flex;\n align-items: center;\n font-size: 10px;\n font-weight: 500;\n line-height: 12px;\n text-transform: uppercase;\n`\n\nconst TagIcon = styled(Icon)`\n padding-right: 4px;\n`\n"]}
|
package/dist/Tag/Tag.spec.js
CHANGED
|
@@ -7,18 +7,38 @@ describe('Tag Component', () => {
|
|
|
7
7
|
const { container } = render(React.createElement(Tag, { label: "Snapshot Test Tag", color: "marzipan", bgColor: "satsuma" }));
|
|
8
8
|
expect(container).toMatchSnapshot();
|
|
9
9
|
});
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
describe('old colour name', () => {
|
|
11
|
+
testCases.forEach(({ description, props }) => {
|
|
12
|
+
test(description, () => {
|
|
13
|
+
const { container } = render(React.createElement(Tag, { ...props }));
|
|
14
|
+
expect(screen.getByText(props.label)).toBeInTheDocument();
|
|
15
|
+
if (props.icon) {
|
|
16
|
+
const iconElement = screen.getByTestId(`tag-icon-${props.icon}`);
|
|
17
|
+
expect(iconElement).toBeInTheDocument();
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`);
|
|
21
|
+
expect(iconElement).not.toBeInTheDocument();
|
|
22
|
+
}
|
|
23
|
+
expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2');
|
|
24
|
+
});
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
describe('new colour name', () => {
|
|
28
|
+
testCasesWithNewColourNames.forEach(({ description, props }) => {
|
|
29
|
+
test(description, () => {
|
|
30
|
+
const { container } = render(React.createElement(Tag, { ...props }));
|
|
31
|
+
expect(screen.getByText(props.label)).toBeInTheDocument();
|
|
32
|
+
if (props.icon) {
|
|
33
|
+
const iconElement = screen.getByTestId(`tag-icon-${props.icon}`);
|
|
34
|
+
expect(iconElement).toBeInTheDocument();
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`);
|
|
38
|
+
expect(iconElement).not.toBeInTheDocument();
|
|
39
|
+
}
|
|
40
|
+
expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2');
|
|
41
|
+
});
|
|
22
42
|
});
|
|
23
43
|
});
|
|
24
44
|
});
|
|
@@ -60,4 +80,42 @@ const testCases = [
|
|
|
60
80
|
},
|
|
61
81
|
},
|
|
62
82
|
];
|
|
83
|
+
const testCasesWithNewColourNames = [
|
|
84
|
+
{
|
|
85
|
+
description: 'Renders Tag with label Test Tag 0001',
|
|
86
|
+
props: {
|
|
87
|
+
label: 'Test Tag 0001',
|
|
88
|
+
color: 'color.feedback.positive.200',
|
|
89
|
+
bgColor: 'color.feedback.inactive.100',
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
description: 'Renders Tag with label Test Tag 0002 and flag icon',
|
|
94
|
+
props: {
|
|
95
|
+
label: 'Test Tag 0002',
|
|
96
|
+
color: 'color.feedback.positive.200',
|
|
97
|
+
bgColor: 'color.feedback.inactive.100',
|
|
98
|
+
icon: 'flag',
|
|
99
|
+
iconColor: 'blueberry',
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
description: 'Renders Tag with label Test Tag 0003 and no icon if iconColor: blueberry, icon: undefined',
|
|
104
|
+
props: {
|
|
105
|
+
label: 'Test Tag 0003',
|
|
106
|
+
color: 'color.feedback.positive.200',
|
|
107
|
+
bgColor: 'color.feedback.inactive.100',
|
|
108
|
+
iconColor: 'blueberry',
|
|
109
|
+
},
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
description: 'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',
|
|
113
|
+
props: {
|
|
114
|
+
label: 'Test Tag 0004',
|
|
115
|
+
color: 'color.feedback.positive.200',
|
|
116
|
+
bgColor: 'color.feedback.inactive.100',
|
|
117
|
+
icon: 'flagFilled',
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
|
+
];
|
|
63
121
|
//# sourceMappingURL=Tag.spec.js.map
|
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,cAAc,CAAA;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACnC,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;
|
|
1
|
+
{"version":3,"file":"Tag.spec.js","sourceRoot":"","sources":["../../src/Tag/Tag.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { render, screen } from '../testUtils'\nimport { it, expect } from 'vitest'\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 describe('old colour name', () => {\n testCases.forEach(({ description, props }) => {\n test(description, () => {\n const { container } = 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 expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2')\n })\n })\n })\n describe('new colour name', () => {\n testCasesWithNewColourNames.forEach(({ description, props }) => {\n test(description, () => {\n const { container } = 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 expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2')\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\nconst testCasesWithNewColourNames = [\n {\n description: 'Renders Tag with label Test Tag 0001',\n props: {\n label: 'Test Tag 0001',\n color: 'color.feedback.positive.200',\n bgColor: 'color.feedback.inactive.100',\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: 'color.feedback.positive.200',\n bgColor: 'color.feedback.inactive.100',\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: 'color.feedback.positive.200',\n bgColor: 'color.feedback.inactive.100',\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: 'color.feedback.positive.200',\n bgColor: 'color.feedback.inactive.100',\n icon: 'flagFilled',\n } as TagProps,\n },\n]\n"]}
|
|
@@ -8,8 +8,9 @@ type Prettify<T> = {
|
|
|
8
8
|
} & {};
|
|
9
9
|
export type NewColor = Prettify<Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>>;
|
|
10
10
|
export type ColorTypes = Color | NewColor;
|
|
11
|
-
export declare const getThemeColor: (path:
|
|
12
|
-
export declare const resolveToThemeColor: (color:
|
|
11
|
+
export declare const getThemeColor: (path: ColorTypes) => string;
|
|
12
|
+
export declare const resolveToThemeColor: (color: ColorTypes) => string;
|
|
13
|
+
export declare const getColorPath: (color: ColorTypes) => "meta" | "onfido" | "rac" | "checkout" | "confused" | "intercom" | "premfina" | "ravelin" | "stripe" | "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" | "compareTheMarket" | "x" | "hometree" | "color.text.base" | "color.text.subtle" | "color.text.contrast" | "color.text.on-dark" | "color.text.nonEssential" | "color.icon.base" | "color.icon.subtle" | "color.icon.contrast" | "color.icon.on-dark" | "color.icon.nonEssential" | "color.border.base" | "color.border.subtle" | "color.border.contrast" | "color.interactive.primary.base" | "color.interactive.primary.active" | "color.interactive.primary.hover" | "color.interactive.primary.pressed" | "color.interactive.secondary.base" | "color.interactive.secondary.active" | "color.interactive.secondary.hover" | "color.interactive.secondary.pressed" | "color.interactive.tertiary.base" | "color.interactive.tertiary.active" | "color.interactive.tertiary.hover" | "color.interactive.tertiary.pressed" | "color.background.100" | "color.background.200" | "color.background.000" | "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.inactive.100" | "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.focus.onLight" | "color.focus.onDark" | "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" | "thirdParty.onfido" | "thirdParty.rac" | "thirdParty.checkout" | "thirdParty.facebook" | "thirdParty.intercom" | "thirdParty.premfina" | "thirdParty.ravelin" | "thirdParty.stripe" | "thirdParty.twitter" | "thirdParty.compareTheMarket" | "thirdParty.hometree" | "thirdParty.confusedCom";
|
|
13
14
|
export declare const formatDesignTokenColor: () => string;
|
|
14
15
|
export declare const legacyColorMap: Record<Color, NewColor>;
|
|
15
16
|
export {};
|
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json';
|
|
2
|
+
// a function that takes a dot notation string path and returns the corresponding hex color value from design tokens
|
|
2
3
|
export const getThemeColor = (path) => {
|
|
3
4
|
return path.split('.').reduce((acc, key) => acc?.[key], designTokens);
|
|
4
5
|
};
|
|
5
6
|
export const resolveToThemeColor = (color) => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
: getThemeColor(color);
|
|
7
|
+
const colourPath = getColorPath(color);
|
|
8
|
+
return getThemeColor(colourPath);
|
|
9
9
|
};
|
|
10
10
|
// a function that returns a flattened dot notation string path to access the color value
|
|
11
|
+
export const getColorPath = (color) => {
|
|
12
|
+
return color in legacyColorMap
|
|
13
|
+
? legacyColorMap[color]
|
|
14
|
+
: color;
|
|
15
|
+
};
|
|
16
|
+
// a function that returns the design token color paths as a comma-separated string
|
|
11
17
|
export const formatDesignTokenColor = () => {
|
|
12
18
|
const { color, extended1, thirdParty } = designTokens;
|
|
13
19
|
const colors = { color, extended1, thirdParty };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colourMap.js","sourceRoot":"","sources":["../../../src/ThemeProvider/utils/colourMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,uDAAuD,CAAA;AAmBrF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"colourMap.js","sourceRoot":"","sources":["../../../src/ThemeProvider/utils/colourMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,uDAAuD,CAAA;AAmBrF,oHAAoH;AACpH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAgB,EAAU,EAAE;IACxD,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,YAAmB,CAAC,CAAA;AAC9E,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAiB,EAAU,EAAE;IAC/D,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,CAAC,CAAA;IACtC,OAAO,aAAa,CAAC,UAAU,CAAC,CAAA;AAClC,CAAC,CAAA;AAED,yFAAyF;AACzF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;IAChD,OAAO,KAAK,IAAI,cAAc;QAC5B,CAAC,CAAC,cAAc,CAAC,KAAoC,CAAC;QACtD,CAAC,CAAC,KAAK,CAAA;AACX,CAAC,CAAA;AAED,mFAAmF;AACnF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAW,EAAE;IACjD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,YAAY,CAAA;IACrD,MAAM,MAAM,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;IAE/C,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QACpB,OAAO,EAAE,CAAA;IACX,CAAC;IAED,MAAM,MAAM,GAAa,EAAE,CAAA;IAC3B,MAAM,uBAAuB,GAAG,CAAC,GAAQ,EAAE,WAAmB,EAAE,EAAE;QAChE,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;YACtB,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;gBACnD,MAAM,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA;gBACtB,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAA;gBAC3D,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;oBAChD,uBAAuB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;gBACzC,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;gBACtB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,CAAA;IACD,uBAAuB,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IACnC,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAC1B,CAAC,CAAA;AAED,wDAAwD;AACxD,MAAM,CAAC,MAAM,cAAc,GAA4B;IACrD,UAAU,EAAE,yBAAyB,EAAE,sBAAsB;IAC7D,SAAS,EAAE,yBAAyB,EAAE,sBAAsB;IAC5D,eAAe,EAAE,yBAAyB,EAAE,sBAAsB;IAClE,QAAQ,EAAE,yBAAyB,EAAE,sBAAsB;IAE3D,iBAAiB;IACjB,IAAI,EAAE,6BAA6B,EAAE,wBAAwB;IAC7D,MAAM,EAAE,mBAAmB,EAAE,wBAAwB;IACrD,SAAS,EAAE,iBAAiB,EAAE,wBAAwB;IACtD,IAAI,EAAE,qBAAqB,EAAE,wBAAwB;IAErD,gBAAgB;IAChB,KAAK,EAAE,wBAAwB,EAAE,sBAAsB;IACvD,OAAO,EAAE,wBAAwB,EAAE,sBAAsB;IACzD,UAAU,EAAE,wBAAwB,EAAE,sBAAsB;IAC5D,OAAO,EAAE,wBAAwB,EAAE,sBAAsB;IAEzD,kBAAkB;IAClB,MAAM,EAAE,gCAAgC,EAAE,qBAAqB;IAC/D,SAAS,EAAE,gCAAgC,EAAE,qBAAqB;IAClE,QAAQ,EAAE,gCAAgC,EAAE,qBAAqB;IACjE,SAAS,EAAE,gCAAgC,EAAE,qBAAqB;IAClE,SAAS,EAAE,gCAAgC,EAAE,qBAAqB;IAClE,MAAM,EAAE,gCAAgC,EAAE,qBAAqB;IAC/D,OAAO,EAAE,gCAAgC,EAAE,qBAAqB;IAChE,MAAM,EAAE,gCAAgC,EAAE,qBAAqB;IAC/D,QAAQ,EAAE,gCAAgC,EAAE,sBAAsB;IAClE,OAAO,EAAE,gCAAgC,EAAE,sBAAsB;IACjE,OAAO,EAAE,cAAc,EAAE,gBAAgB;IAEzC,gBAAgB;IAChB,UAAU,EAAE,6BAA6B,EAAE,uBAAuB;IAClE,UAAU,EAAE,6BAA6B,EAAE,uBAAuB;IAClE,KAAK,EAAE,6BAA6B,EAAE,uBAAuB;IAC7D,IAAI,EAAE,6BAA6B,EAAE,uBAAuB;IAC5D,KAAK,EAAE,2BAA2B,EAAE,qBAAqB;IACzD,QAAQ,EAAE,2BAA2B,EAAE,qBAAqB;IAC5D,SAAS,EAAE,eAAe,EAAE,gBAAgB;IAE5C,4BAA4B;IAC5B,gBAAgB,EAAE,6BAA6B;IAC/C,QAAQ,EAAE,wBAAwB;IAClC,MAAM,EAAE,mBAAmB;IAC3B,CAAC,EAAE,oBAAoB,EAAE,6CAA6C;IACtE,QAAQ,EAAE,qBAAqB;IAC/B,QAAQ,EAAE,qBAAqB;IAC/B,IAAI,EAAE,qBAAqB,EAAE,gDAAgD;IAC7E,MAAM,EAAE,mBAAmB;IAC3B,QAAQ,EAAE,qBAAqB;IAC/B,OAAO,EAAE,oBAAoB;IAC7B,GAAG,EAAE,gBAAgB;IACrB,QAAQ,EAAE,qBAAqB;CACvB,CAAA","sourcesContent":["import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json'\nimport { Color } from '../../theme'\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\n// a function that takes a dot notation string path and returns the corresponding hex color value from design tokens\nexport const getThemeColor = (path: ColorTypes): string => {\n return path.split('.').reduce((acc, key) => acc?.[key], designTokens as any)\n}\n\nexport const resolveToThemeColor = (color: ColorTypes): string => {\n const colourPath = getColorPath(color)\n return getThemeColor(colourPath)\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"]}
|