@mrshmllw/smores-react 13.3.7 → 13.4.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.spec.d.ts +1 -1
- package/dist/Tag/Tag.spec.js +0 -1
- package/dist/Tag/Tag.spec.js.map +1 -1
- package/dist/Text/Text.d.ts +2 -2
- package/dist/Text/Text.js +9 -4
- package/dist/Text/Text.js.map +1 -1
- package/dist/ThemeProvider/utils/colourMap.d.ts +11 -0
- package/dist/ThemeProvider/utils/colourMap.js +83 -0
- package/dist/ThemeProvider/utils/colourMap.js.map +1 -0
- package/dist/testUtils/index.d.ts +1 -0
- package/dist/testUtils/index.js +1 -0
- package/dist/testUtils/index.js.map +1 -1
- package/dist/utils/storybookHelpers/colourOptions.d.ts +1 -0
- package/dist/utils/storybookHelpers/colourOptions.js +3 -0
- package/dist/utils/storybookHelpers/colourOptions.js.map +1 -0
- package/package.json +2 -1
package/dist/Tag/Tag.spec.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export {};
|
package/dist/Tag/Tag.spec.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { render, screen } from '../testUtils';
|
|
3
3
|
import { it, expect } from 'vitest';
|
|
4
|
-
import '@testing-library/jest-dom';
|
|
5
4
|
import { Tag } from '../Tag';
|
|
6
5
|
describe('Tag Component', () => {
|
|
7
6
|
it('renders snapshot test correctly', () => {
|
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,
|
|
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;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 { 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"]}
|
package/dist/Text/Text.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC, LabelHTMLAttributes, ReactNode } 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 Typo = 'hero-alternate' | 'hero' | 'heading-alternate' | 'heading-large' | 'heading-medium' | 'heading-small' | 'headline-regular' | 'headline-small' | 'body-standfirst' | 'body-regular' | 'body-small' | 'caption' | 'label';
|
|
5
5
|
type Props = {
|
|
6
6
|
children: ReactNode;
|
|
@@ -8,7 +8,7 @@ type Props = {
|
|
|
8
8
|
className?: string;
|
|
9
9
|
typo?: Typo;
|
|
10
10
|
align?: string;
|
|
11
|
-
color?:
|
|
11
|
+
color?: ColorTypes;
|
|
12
12
|
cursor?: string;
|
|
13
13
|
title?: string;
|
|
14
14
|
} & MarginProps;
|
package/dist/Text/Text.js
CHANGED
|
@@ -2,9 +2,14 @@ import React, { forwardRef } from 'react';
|
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { linkStyleOverride } from '../Link/Link';
|
|
5
|
-
import { theme } from '../theme';
|
|
6
5
|
import { fontStyleMapping } from './fontMapping';
|
|
7
|
-
|
|
6
|
+
import { getThemeColor, legacyColorMap, } from '../ThemeProvider/utils/colourMap';
|
|
7
|
+
export const Text = forwardRef(({ children, typo = 'body-regular', className = '', tag = 'p', align = 'left', color = 'color.text.base', cursor = 'inherit', title = '', ...props }, ref) => {
|
|
8
|
+
const resolvedColor = color in legacyColorMap
|
|
9
|
+
? getThemeColor(legacyColorMap[color])
|
|
10
|
+
: getThemeColor(color);
|
|
11
|
+
return (React.createElement(Container, { forwardedAs: tag, className: className, "$typo": typo, "$align": align, "$color": resolvedColor, cursor: cursor, title: title, ...props, ref: ref }, children));
|
|
12
|
+
});
|
|
8
13
|
Text.displayName = 'Text';
|
|
9
14
|
const isTypo = (value) => {
|
|
10
15
|
return Object.keys(fontStyleMapping).includes(value);
|
|
@@ -16,7 +21,7 @@ const Container = styled(Box)(({ $align, $color, $cursor, $typo }) => css `
|
|
|
16
21
|
|
|
17
22
|
text-align: ${$align};
|
|
18
23
|
cursor: ${$cursor};
|
|
19
|
-
color: ${
|
|
20
|
-
${linkStyleOverride({ color:
|
|
24
|
+
color: ${$color};
|
|
25
|
+
${linkStyleOverride({ color: $color })}
|
|
21
26
|
`);
|
|
22
27
|
//# sourceMappingURL=Text.js.map
|
package/dist/Text/Text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAA;AAC7E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAA;AAC7E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAGL,aAAa,EACb,cAAc,GACf,MAAM,kCAAkC,CAAA;AAuCzC,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAC3C,CACE,EACE,QAAQ,EACR,IAAI,GAAG,cAAc,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,MAAM,EACd,KAAK,GAAG,iBAAiB,EACzB,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GACjB,KAAK,IAAI,cAAc;QACrB,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,KAAoC,CAAC,CAAC;QACrE,CAAC,CAAC,aAAa,CAAC,KAAiB,CAAC,CAAA;IACtC,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,GAAG,EAChB,SAAS,EAAE,SAAS,WACb,IAAI,YACH,KAAK,YACL,aAAa,EACrB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,KAAK,EACT,GAAG,EAAE,GAAG,IAEP,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,MAAM,MAAM,GAAG,CAAC,KAAa,EAAiB,EAAE;IAC9C,OAAO,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGvC,MAAM,CAAC,KAAK,CAAC,IAAI,gBAAgB,CAAC,KAAK,CAAC;;kBAE5B,MAAM;cACV,OAAO;aACR,MAAM;MACb,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;GACvC,CACF,CAAA","sourcesContent":["import React, { FC, forwardRef, LabelHTMLAttributes, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { linkStyleOverride } from '../Link/Link'\nimport { MarginProps } from '../utils/space'\nimport { fontStyleMapping } from './fontMapping'\nimport {\n ColorTypes,\n NewColor,\n getThemeColor,\n legacyColorMap,\n} from '../ThemeProvider/utils/colourMap'\ninterface IText {\n /** typography class name to apply predefined styles */\n $typo: string\n /** text-align */\n $align: string\n /** color from the theme */\n $color: ColorTypes\n $cursor: string\n}\n\nexport type Typo =\n | 'hero-alternate'\n | 'hero'\n | 'heading-alternate'\n | 'heading-large'\n | 'heading-medium'\n | 'heading-small'\n | 'headline-regular'\n | 'headline-small'\n | 'body-standfirst'\n | 'body-regular'\n | 'body-small'\n | 'caption'\n | 'label'\n\ntype Props = {\n children: ReactNode\n tag?: any\n className?: string\n typo?: Typo\n align?: string\n color?: ColorTypes\n cursor?: string\n title?: string\n} & MarginProps\n\nexport type TextProps = Props & Omit<LabelHTMLAttributes<HTMLElement>, 'color'>\n\nexport const Text: FC<TextProps> = forwardRef<HTMLElement, TextProps>(\n (\n {\n children,\n typo = 'body-regular',\n className = '',\n tag = 'p',\n align = 'left',\n color = 'color.text.base',\n cursor = 'inherit',\n title = '',\n ...props\n },\n ref,\n ) => {\n const resolvedColor =\n color in legacyColorMap\n ? getThemeColor(legacyColorMap[color as keyof typeof legacyColorMap])\n : getThemeColor(color as NewColor)\n return (\n <Container\n forwardedAs={tag}\n className={className}\n $typo={typo}\n $align={align}\n $color={resolvedColor}\n cursor={cursor}\n title={title}\n {...props}\n ref={ref}\n >\n {children}\n </Container>\n )\n },\n)\n\nText.displayName = 'Text'\n\nconst isTypo = (value: string): value is Typo => {\n return Object.keys(fontStyleMapping).includes(value)\n}\n\nconst Container = styled(Box)<IText>(\n ({ $align, $color, $cursor, $typo }) => css`\n /** TYPOGRAPHY STYLES */\n\n ${isTypo($typo) && fontStyleMapping[$typo]}\n\n text-align: ${$align};\n cursor: ${$cursor};\n color: ${$color};\n ${linkStyleOverride({ color: $color })}\n `,\n)\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json';
|
|
2
|
+
import { Color } from 'theme';
|
|
3
|
+
type Flatten<T, Prefix extends string = ''> = {
|
|
4
|
+
[K in keyof T & string]: T[K] extends Record<string, any> ? Flatten<T[K], `${Prefix}${K}.`> : `${Prefix}${K}`;
|
|
5
|
+
}[keyof T & string];
|
|
6
|
+
export type NewColor = Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>;
|
|
7
|
+
export type ColorTypes = Color | NewColor;
|
|
8
|
+
export declare const getThemeColor: (path: NewColor) => string;
|
|
9
|
+
export declare const formatDesignTokenColor: () => string;
|
|
10
|
+
export declare const legacyColorMap: Record<Color, NewColor>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json';
|
|
2
|
+
// we currently access numerical colours like `theme.color.neutral[100]` or in the case of 000 colours, `theme.color.neutral['000']`
|
|
3
|
+
export const getThemeColor = (path) => {
|
|
4
|
+
return path
|
|
5
|
+
.split('.')
|
|
6
|
+
.reduce((acc, key) => acc?.[key], designTokens);
|
|
7
|
+
};
|
|
8
|
+
// a function that returns a flattened dot notation string path to access the color value
|
|
9
|
+
export const formatDesignTokenColor = () => {
|
|
10
|
+
const { color, extended1, thirdParty } = designTokens;
|
|
11
|
+
const colors = { color, extended1, thirdParty };
|
|
12
|
+
if (colors === null) {
|
|
13
|
+
return '';
|
|
14
|
+
}
|
|
15
|
+
const result = [];
|
|
16
|
+
const destructureNestedObject = (obj, currentPath) => {
|
|
17
|
+
for (const key in obj) {
|
|
18
|
+
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
19
|
+
const value = obj[key];
|
|
20
|
+
const newPath = currentPath ? `${currentPath}.${key}` : key;
|
|
21
|
+
if (typeof value === 'object' && value !== null) {
|
|
22
|
+
destructureNestedObject(value, newPath);
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
result.push(newPath);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
destructureNestedObject(colors, '');
|
|
31
|
+
return result.join(', ');
|
|
32
|
+
};
|
|
33
|
+
// old colour name → new colour path // base token value
|
|
34
|
+
export const legacyColorMap = {
|
|
35
|
+
fairyFloss: 'color.surface.brand.100', // palette.primary.040
|
|
36
|
+
bubblegum: 'color.surface.brand.200', // palette.primary.060
|
|
37
|
+
marshmallowPink: 'color.surface.brand.300', // palette.primary.100
|
|
38
|
+
lollipop: 'color.surface.brand.400', // palatte.primary.120
|
|
39
|
+
// Core Secondary
|
|
40
|
+
chia: 'color.feedback.inactive.100', // palette.secondary.040
|
|
41
|
+
sesame: 'color.text.subtle', // palette.secondary.060
|
|
42
|
+
liquorice: 'color.text.base', // palette.secondary.100
|
|
43
|
+
boba: 'color.text.contrast', // palette.secondary.120
|
|
44
|
+
// Core Tertiary
|
|
45
|
+
cream: `color.surface.base.000`, // palette.neutral.000
|
|
46
|
+
coconut: 'color.surface.base.100', // palette.neutral.010
|
|
47
|
+
mascarpone: 'color.surface.base.200', // palette.neutral.020
|
|
48
|
+
custard: 'color.surface.base.300', // palette.neutral.040
|
|
49
|
+
// Brand Secondary
|
|
50
|
+
feijoa: 'color.illustration.accent1.100', // palette.brand1.060
|
|
51
|
+
spearmint: 'color.illustration.accent1.200', // palette.brand1.100
|
|
52
|
+
macaroon: 'color.illustration.accent2.100', // palette.brand2.060
|
|
53
|
+
blueberry: 'color.illustration.accent2.200', // palette.brand2.100
|
|
54
|
+
pistachio: 'color.illustration.accent3.200', // palette.brand3.100
|
|
55
|
+
matcha: 'color.illustration.accent3.100', // palette.brand3.060
|
|
56
|
+
caramel: 'color.illustration.accent4.200', // palette.brand4.100
|
|
57
|
+
peanut: 'color.illustration.accent4.100', // palette.brand4.060
|
|
58
|
+
marzipan: 'color.illustration.neutral.400', // palette.neutral.100
|
|
59
|
+
oatmeal: 'color.illustration.neutral.300', // palette.neutral.060
|
|
60
|
+
satsuma: 'extended1.20', // extended1.020
|
|
61
|
+
// Traffic light
|
|
62
|
+
watermelon: 'color.feedback.negative.100', // palette.negative.020
|
|
63
|
+
strawberry: 'color.feedback.negative.200', // palette.negative.100
|
|
64
|
+
apple: 'color.feedback.positive.200', // palette.positive.100
|
|
65
|
+
mint: 'color.feedback.positive.100', // palette.positive.020
|
|
66
|
+
lemon: 'color.feedback.notice.200', // palette.notice.100
|
|
67
|
+
sherbert: 'color.feedback.notice.100', // palette.notice.020
|
|
68
|
+
tangerine: 'extended1.100', // extended1.100
|
|
69
|
+
// Third-party brand colours
|
|
70
|
+
compareTheMarket: 'thirdParty.compareTheMarket',
|
|
71
|
+
confused: 'thirdParty.confusedCom',
|
|
72
|
+
onfido: 'thirdParty.onfido',
|
|
73
|
+
x: 'thirdParty.twitter', // x rebrand not yet reflected in foundations
|
|
74
|
+
premfina: 'thirdParty.premfina',
|
|
75
|
+
checkout: 'thirdParty.checkout',
|
|
76
|
+
meta: 'thirdParty.facebook', // Meta rebrand not yet reflected in foundations
|
|
77
|
+
stripe: 'thirdParty.stripe',
|
|
78
|
+
intercom: 'thirdParty.intercom',
|
|
79
|
+
ravelin: 'thirdParty.ravelin',
|
|
80
|
+
rac: 'thirdParty.rac',
|
|
81
|
+
hometree: 'thirdParty.hometree',
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=colourMap.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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'\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\nexport type NewColor = Flatten<\n Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>\n>\n\nexport type ColorTypes = Color | NewColor\n\n// we currently access numerical colours like `theme.color.neutral[100]` or in the case of 000 colours, `theme.color.neutral['000']`\nexport const getThemeColor = (path: NewColor): string => {\n return path\n .split('.')\n .reduce((acc, key) => acc?.[key], designTokens as any) as string\n}\n\n// a function that returns a flattened dot notation string path to access the color value\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"]}
|
|
@@ -2,4 +2,5 @@ import { ReactElement } from 'react';
|
|
|
2
2
|
import { RenderOptions } from '@testing-library/react';
|
|
3
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
4
|
export * from '@testing-library/react';
|
|
5
|
+
export * from '@testing-library/jest-dom/vitest';
|
|
5
6
|
export { customRender as render };
|
package/dist/testUtils/index.js
CHANGED
|
@@ -6,5 +6,6 @@ const Providers = ({ children }) => {
|
|
|
6
6
|
};
|
|
7
7
|
const customRender = (ui, options) => render(ui, { wrapper: Providers, ...options });
|
|
8
8
|
export * from '@testing-library/react';
|
|
9
|
+
export * from '@testing-library/jest-dom/vitest';
|
|
9
10
|
export { customRender as render };
|
|
10
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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
|
+
{"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,cAAc,kCAAkC,CAAA;AAEhD,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 * from '@testing-library/jest-dom/vitest'\n\nexport { customRender as render }\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const colourOptions: string[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colourOptions.js","sourceRoot":"","sources":["../../../src/utils/storybookHelpers/colourOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAA;AAE5E,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CACrC,IAAI,GAAG,CAAC,sBAAsB,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAC9C,CAAA","sourcesContent":["import { formatDesignTokenColor } from '../../ThemeProvider/utils/colourMap'\n\nexport const colourOptions = Array.from(\n new Set(formatDesignTokenColor().split(', ')),\n)\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.4.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
"@storybook/react-vite": "^8.6.14",
|
|
49
49
|
"@storybook/test": "^8.2.1",
|
|
50
50
|
"@storybook/test-runner": "^0.23.0",
|
|
51
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
51
52
|
"@testing-library/react": "^16.3.0",
|
|
52
53
|
"@types/body-scroll-lock": "^3.1.0",
|
|
53
54
|
"@types/node": "^24.0.3",
|