@mrshmllw/smores-react 13.23.1 → 14.0.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/Banner/BannerItem.js +6 -6
- package/dist/Banner/BannerItem.js.map +1 -1
- package/dist/Chip/Chip.js +2 -2
- package/dist/Chip/Chip.js.map +1 -1
- package/dist/Datepicker/DatesList.js +2 -2
- package/dist/Datepicker/DatesList.js.map +1 -1
- package/dist/Table/components/commonComponents.js +4 -2
- package/dist/Table/components/commonComponents.js.map +1 -1
- package/dist/Text/Text.d.ts +2 -1
- package/dist/Text/Text.js +5 -7
- package/dist/Text/Text.js.map +1 -1
- package/dist/Text/fontMapping.d.ts +3 -0
- package/dist/Text/fontMapping.js +3 -0
- package/dist/Text/fontMapping.js.map +1 -1
- package/dist/ThemeProvider/utils/colourMap.d.ts +3 -4
- package/dist/ThemeProvider/utils/colourMap.js.map +1 -1
- package/dist/ThemeProvider/utils/fontMap.d.ts +35 -0
- package/dist/ThemeProvider/utils/fontMap.js +92 -0
- package/dist/ThemeProvider/utils/fontMap.js.map +1 -0
- package/dist/fontStyle.js +7 -0
- package/dist/fontStyle.js.map +1 -1
- package/dist/utils/storybookHelpers/fontOptions.d.ts +1 -0
- package/dist/utils/storybookHelpers/fontOptions.js +3 -0
- package/dist/utils/storybookHelpers/fontOptions.js.map +1 -0
- package/package.json +5 -5
|
@@ -13,19 +13,19 @@ export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, ex
|
|
|
13
13
|
textColor: 'color.text.base',
|
|
14
14
|
},
|
|
15
15
|
critical: {
|
|
16
|
-
iconColor: 'color.icon.
|
|
16
|
+
iconColor: 'color.icon.inverse',
|
|
17
17
|
backgroundColor: theme.color.feedback.negative[200],
|
|
18
|
-
textColor: 'color.
|
|
18
|
+
textColor: 'color.icon.inverse',
|
|
19
19
|
},
|
|
20
20
|
general: {
|
|
21
|
-
iconColor: 'color.icon.
|
|
21
|
+
iconColor: 'color.icon.inverse',
|
|
22
22
|
backgroundColor: theme.color.surface.base[900],
|
|
23
|
-
textColor: 'color.
|
|
23
|
+
textColor: 'color.icon.inverse',
|
|
24
24
|
},
|
|
25
25
|
success: {
|
|
26
|
-
iconColor: 'color.icon.
|
|
26
|
+
iconColor: 'color.icon.inverse',
|
|
27
27
|
backgroundColor: theme.color.feedback.positive[200],
|
|
28
|
-
textColor: 'color.
|
|
28
|
+
textColor: 'color.icon.inverse',
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
31
|
const autoCloseBaner = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { 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 { Banner } from './types'\nimport { NewColor } from 'ThemeProvider/utils/colourMap'\n\ntype StylesItem = {\n iconColor: NewColor\n backgroundColor: string\n textColor: NewColor\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: 'color.icon.base',\n backgroundColor: theme.color.surface.brand[300],\n textColor: 'color.text.base',\n },\n critical: {\n iconColor: 'color.icon.
|
|
1
|
+
{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAgBrC,MAAM,CAAC,MAAM,UAAU,GAAc,CAAC,EACpC,IAAI,EACJ,aAAa,GAAG,CAAC,EACjB,EAAE,EACF,OAAO,EACP,SAAS,EACT,aAAa,EACb,eAAe,EACf,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,SAAS,GACV,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,MAAM,GAAmC;QAC7C,MAAM,EAAE;YACN,SAAS,EAAE,iBAAiB;YAC5B,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;YAC/C,SAAS,EAAE,iBAAiB;SAC7B;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,oBAAoB;YAC/B,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;YACnD,SAAS,EAAE,oBAAoB;SAChC;QACD,OAAO,EAAE;YACP,SAAS,EAAE,oBAAoB;YAC/B,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;YAC9C,SAAS,EAAE,oBAAoB;SAChC;QACD,OAAO,EAAE;YACP,SAAS,EAAE,oBAAoB;YAC/B,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;YACnD,SAAS,EAAE,oBAAoB;SAChC;KACF,CAAA;IACD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,SAAS;YAAE,OAAM;QACrB,IAAI,IAAI,KAAK,UAAU;YAAE,OAAO,YAAY,CAAC,EAAE,CAAC,CAAA;aAC3C,CAAC;YACJ,OAAM;QACR,CAAC;IACH,CAAC,CAAA;IACD,UAAU,CAAC,GAAG,EAAE,CAAC,cAAc,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,CAAA;IAExD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAA;IACxC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAA;IAExC,OAAO,CACL,MAAC,aAAa,IACZ,CAAC,EAAC,MAAM,EACR,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAEzB,IAAI,QACJ,cAAc,EAAC,eAAe,uBACX,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,aAE/C,MAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,aAC1B,WAAW,IAAI,CACd,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,GAAI,CACpE,EACD,KAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,SAAS,YACzC,OAAO,GACH,IACH,EACN,MAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,aAC1B,gBAAgB,IAAI,CACnB,KAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,gBACnB,gBAAgB,OAAO,EAAE,YAEpC,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,GAAI,CACpD,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IACb,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE,SAAS,wBAGD,CAClB,GACa,CACjB,EACA,aAAa,IAAI,CAChB,KAAC,aAAa,IAAC,OAAO,EAAE,aAAa,gBAAc,OAAO,OAAO,EAAE,YACjE,MAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,aAC1B,eAAe,IAAI,CAClB,KAAC,cAAc,IACb,EAAE,EAAC,MAAM,EACT,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE,SAAS,wBAGD,CAClB,EACA,eAAe,IAAI,CAClB,KAAC,IAAI,IACH,MAAM,EAAC,OAAO,EACd,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,GAAG,GACX,CACH,IACG,GACQ,CACjB,IACG,KAzDD,EAAE,CA0DO,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAC/B,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;wBAER,iBAAiB;GACtC,CACF,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAA;;CAElC,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAElC,CAAA","sourcesContent":["import { 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 { Banner } from './types'\nimport { NewColor } from 'ThemeProvider/utils/colourMap'\n\ntype StylesItem = {\n iconColor: NewColor\n backgroundColor: string\n textColor: NewColor\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: 'color.icon.base',\n backgroundColor: theme.color.surface.brand[300],\n textColor: 'color.text.base',\n },\n critical: {\n iconColor: 'color.icon.inverse',\n backgroundColor: theme.color.feedback.negative[200],\n textColor: 'color.icon.inverse',\n },\n general: {\n iconColor: 'color.icon.inverse',\n backgroundColor: theme.color.surface.base[900],\n textColor: 'color.icon.inverse',\n },\n success: {\n iconColor: 'color.icon.inverse',\n backgroundColor: theme.color.feedback.positive[200],\n textColor: 'color.icon.inverse',\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/Chip/Chip.js
CHANGED
|
@@ -5,7 +5,7 @@ import { Box } from '../Box';
|
|
|
5
5
|
import { Icon as IconComponent } from '../Icon';
|
|
6
6
|
import { Loader } from '../Loader';
|
|
7
7
|
import { focusOutline } from '../utils/focusOutline';
|
|
8
|
-
export const Chip = forwardRef(({ children, handleClick, primary = false, secondary = false, disabled = false, loading = false, icon, ...props }, ref) => (_jsx(Container, { forwardedAs: "button", "$primary": primary, "$secondary": secondary, disabled: disabled || loading, "$loading": loading, onClick: handleClick, "$icon": icon, ...props, ref: ref, "aria-label": "chip-button", children: loading ? (_jsx(Loader, { color: primary ? 'color.icon.base' : 'color.icon.
|
|
8
|
+
export const Chip = forwardRef(({ children, handleClick, primary = false, secondary = false, disabled = false, loading = false, icon, ...props }, ref) => (_jsx(Container, { forwardedAs: "button", "$primary": primary, "$secondary": secondary, disabled: disabled || loading, "$loading": loading, onClick: handleClick, "$icon": icon, ...props, ref: ref, "aria-label": "chip-button", children: loading ? (_jsx(Loader, { color: primary ? 'color.icon.base' : 'color.icon.inverse', height: "16" })) : (_jsxs(_Fragment, { children: [icon && (_jsx(IconComponent, { render: icon, size: 16, color: primary ? 'color.icon.base' : 'color.icon.inverse' })), _jsx(ChildrenContainer, { children: children })] })) })));
|
|
9
9
|
Chip.displayName = 'Chip';
|
|
10
10
|
const Container = styled(Box)(({ $primary, $secondary, $icon, $loading, disabled, theme }) => css `
|
|
11
11
|
${focusOutline()}
|
|
@@ -36,7 +36,7 @@ const Container = styled(Box)(({ $primary, $secondary, $icon, $loading, disabled
|
|
|
36
36
|
`}
|
|
37
37
|
${$secondary &&
|
|
38
38
|
css `
|
|
39
|
-
color: ${theme.color.text
|
|
39
|
+
color: ${theme.color.text.inverse};
|
|
40
40
|
background-color: ${theme.color.surface.base[900]};
|
|
41
41
|
border: 2px solid ${theme.color.surface.base[900]};
|
|
42
42
|
&:hover {
|
package/dist/Chip/Chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/Chip/Chip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAKL,UAAU,GACX,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAuBpD,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAC3C,CACE,EACE,QAAQ,EACR,WAAW,EACX,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,IAAI,EACJ,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE,CAAC,CACH,KAAC,SAAS,IACR,WAAW,EAAC,QAAQ,cACV,OAAO,gBACL,SAAS,EACrB,QAAQ,EAAE,QAAQ,IAAI,OAAO,cACnB,OAAO,EACjB,OAAO,EAAE,WAAW,WACb,IAAI,KACP,KAAK,EACT,GAAG,EAAE,GAAG,gBACG,aAAa,YAEvB,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,MAAM,IACL,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,oBAAoB,EACzD,MAAM,EAAC,IAAI,GACX,CACH,CAAC,CAAC,CAAC,CACF,8BACG,IAAI,IAAI,CACP,KAAC,aAAa,IACZ,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,oBAAoB,GACzD,CACH,EACD,KAAC,iBAAiB,cAAE,QAAQ,GAAqB,IAChD,CACJ,GACS,CACb,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAC/D,YAAY,EAAE;;;wBAGI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;wBAE7B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;aACxC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;;;uBAGX,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;;4BAE5B,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;;;cAGpC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;eAC/C,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;;MAE/B,QAAQ;IACV,GAAG,CAAA;;kBAEW,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;QACjC,aAAa,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;4BACtB,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;QAC3C,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;;KAE9B;MACC,UAAU;IACZ,GAAG,CAAA;eACQ,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/Chip/Chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonHTMLAttributes,\n FC,\n FormEvent,\n ReactNode,\n forwardRef,\n} from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon as IconComponent } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Loader } from '../Loader'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ninterface IButton {\n $primary: boolean\n $secondary: boolean\n $icon?: Icons\n $loading: boolean\n disabled: boolean\n}\n\ntype Props = {\n children: ReactNode\n handleClick: (e: FormEvent<HTMLButtonElement>) => void\n primary?: boolean\n secondary?: boolean\n icon?: Icons\n disabled?: boolean\n loading?: boolean\n} & MarginProps\n\nexport type ChipProps = Props & ButtonHTMLAttributes<HTMLButtonElement>\n\nexport const Chip: FC<ChipProps> = forwardRef<HTMLButtonElement, ChipProps>(\n (\n {\n children,\n handleClick,\n primary = false,\n secondary = false,\n disabled = false,\n loading = false,\n icon,\n ...props\n },\n ref,\n ) => (\n <Container\n forwardedAs=\"button\"\n $primary={primary}\n $secondary={secondary}\n disabled={disabled || loading}\n $loading={loading}\n onClick={handleClick}\n $icon={icon}\n {...props}\n ref={ref}\n aria-label=\"chip-button\"\n >\n {loading ? (\n <Loader\n color={primary ? 'color.icon.base' : 'color.icon.inverse'}\n height=\"16\"\n />\n ) : (\n <>\n {icon && (\n <IconComponent\n render={icon}\n size={16}\n color={primary ? 'color.icon.base' : 'color.icon.inverse'}\n />\n )}\n <ChildrenContainer>{children}</ChildrenContainer>\n </>\n )}\n </Container>\n ),\n)\n\nChip.displayName = 'Chip'\n\nconst Container = styled(Box)<IButton>(\n ({ $primary, $secondary, $icon, $loading, disabled, theme }) => css`\n ${focusOutline()}\n\n align-items: center;\n background-color: ${theme.color.surface.base[300]};\n border-radius: 100px;\n border: 2px solid ${theme.color.surface.base[300]};\n color: ${theme.color.text.base};\n display: flex;\n font-size: 16px;\n justify-content: ${$icon ? 'space-evenly' : 'center'};\n line-height: 100%;\n padding: 8px 16px 8px ${$icon ? '8px' : '16px'};\n min-width: 98px;\n min-height: 40px;\n cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n opacity: ${disabled ? '0.5' : '1'};\n\n ${$primary &&\n css`\n &:hover {\n border: ${!(disabled || $loading) &&\n `2px solid ${theme.color.background[200]}`};\n background-color: ${!(disabled || $loading) &&\n theme.color.background[200]};\n }\n `}\n ${$secondary &&\n css`\n color: ${theme.color.text.inverse};\n background-color: ${theme.color.surface.base[900]};\n border: 2px solid ${theme.color.surface.base[900]};\n &:hover {\n border: ${!(disabled || $loading) &&\n `2px solid ${theme.color.text.subtle}`};\n background-color: ${!(disabled || $loading) && theme.color.text.subtle};\n }\n `};\n `,\n)\n\nconst ChildrenContainer = styled.div`\n flex-grow: 1;\n`\n"]}
|
|
@@ -59,12 +59,12 @@ const ListButton = styled.button `
|
|
|
59
59
|
cursor: pointer;
|
|
60
60
|
|
|
61
61
|
&:hover:not(.active) {
|
|
62
|
-
color: ${({ theme }) => theme.color.text
|
|
62
|
+
color: ${({ theme }) => theme.color.text.inverse};
|
|
63
63
|
background-color: ${({ theme }) => theme.color.surface.base[900]};
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
&.active {
|
|
67
|
-
color: ${({ theme }) => theme.color.text
|
|
67
|
+
color: ${({ theme }) => theme.color.text.inverse};
|
|
68
68
|
background-color: ${({ theme }) => theme.color.surface.base[900]};
|
|
69
69
|
cursor: default;
|
|
70
70
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatesList.js","sourceRoot":"","sources":["../../src/Datepicker/DatesList.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"DatesList.js","sourceRoot":"","sources":["../../src/Datepicker/DatesList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AASzD,MAAM,iBAAiB,GAAG,CAAC,kBAAwB,EAAE,EAAE;IACrD,IAAI,CAAC,kBAAkB;QAAE,OAAM;IAC/B,MAAM,YAAY,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAA;IAClD,OAAO,YAAY,GAAG,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;AAE1E,MAAM,CAAC,MAAM,SAAS,GAAc,CAAC,EACnC,KAAK,EACL,gBAAgB,EAChB,aAAa,GACd,EAAE,EAAE;IACH,OAAO,CACL,MAAC,SAAS,eACP,aAAa;gBACZ,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oBACxB,OAAO,CACL,KAAC,IAAI,IAAW,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,MAAM,YAClD,GAAG,IADK,GAAG,CAEP,CACR,CAAA;gBACH,CAAC,CAAC,EACH,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;iBACtC,IAAI,CAAC,IAAI,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACjB,KAAC,UAAU,kBACG,GAAG,KAAK,oBAAoB,EAExC,QAAQ,UADH,aAAa,KAAK,EAAE,CAEzB,CACH,CAAC,EACH,KAAK,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,KAAC,UAAU,IAET,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,cAAc,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACtD,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1C,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;oBAC7B,CAAC;gBACH,CAAC,iBACY,IAAI,CAAC,KAAK,YAEtB,IAAI,CAAC,KAAK,IAZN,CAAC,CAaK,CACd,CAAC,IACQ,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiB3B,CAAA;AAMD,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAa;;;;;;;;iBAQ5B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;WAG9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;;oBAE3B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;aACjD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;;;;aAI1C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;wBAC5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;;aAIvD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;wBAC5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;;IAIhE,iBAAiB;CACpB,CAAA","sourcesContent":["import { getISODay } from 'date-fns'\nimport { FC } from 'react';\nimport styled from 'styled-components'\n\nimport { theme } from '../theme'\nimport { Text } from '../Text'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { Day } from './types'\n\ntype Props = {\n items: Day[]\n showDayLabels: boolean\n handleDateSelect: (date: Date) => void\n}\n\nconst getBlankDaysCount = (firstDayOfTheMonth: Date) => {\n if (!firstDayOfTheMonth) return\n const dayOfTheWeek = getISODay(firstDayOfTheMonth)\n return dayOfTheWeek - 1\n}\n\nconst daysOfTheWeek = ['mon', 'tues', 'wed', 'thurs', 'fri', 'sat', 'sun']\n\nexport const DatesList: FC<Props> = ({\n items,\n handleDateSelect,\n showDayLabels,\n}) => {\n return (\n <Container>\n {showDayLabels &&\n daysOfTheWeek.map((day) => {\n return (\n <Text key={day} color=\"sesame\" typo=\"label\" mb=\"24px\">\n {day}\n </Text>\n )\n })}\n {Array(getBlankDaysCount(items[0]?.date))\n .fill(null)\n .map((_, index) => (\n <ListButton\n aria-label={`${index}-unselectable-date`}\n key={`blankItem-${index}`}\n disabled\n />\n ))}\n {items.map((item: Day, i) => (\n <ListButton\n key={i}\n type=\"button\"\n disabled={item.disabled}\n className={`ListButton ${item.active ? 'active' : ''}`}\n onClick={() => handleDateSelect(item.date)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleDateSelect(item.date)\n }\n }}\n data-testid={item.label}\n >\n {item.label}\n </ListButton>\n ))}\n </Container>\n )\n}\n\nconst Container = styled.div`\n justify-items: center;\n display: grid;\n grid-column-gap: 4px;\n grid-row-gap: 8px;\n grid-template-columns: repeat(7, 1fr);\n padding: 8px;\n\n @media (min-width: 360px) {\n grid-gap: 8px;\n padding: 16px;\n }\n\n @media (min-width: 768px) {\n grid-column-gap: 16px;\n padding: 32px;\n }\n`\n\ninterface IListButton {\n disabled?: boolean\n}\n\nconst ListButton = styled.button<IListButton>`\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n width: 32px;\n height: 32px;\n border: 1px solid transparent;\n font-weight: ${theme.font.weight.medium};\n font-size: 14px;\n line-height: 15px;\n color: ${({ theme }) => theme.color.text.base};\n background-color: transparent;\n pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};\n opacity: ${({ disabled }) => (disabled ? '0.2' : '1')};\n cursor: pointer;\n\n &:hover:not(.active) {\n color: ${({ theme }) => theme.color.text.inverse};\n background-color: ${({ theme }) => theme.color.surface.base[900]};\n }\n\n &.active {\n color: ${({ theme }) => theme.color.text.inverse};\n background-color: ${({ theme }) => theme.color.surface.base[900]};\n cursor: default;\n }\n\n ${focusOutlineStyle}\n`\n"]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { darken } from 'polished';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
|
-
import { fontStyleMapping } from '../../Text/fontMapping';
|
|
4
3
|
import { focusOutlineStyle } from '../../utils/focusOutline';
|
|
5
4
|
const isString = (value) => typeof value === 'string';
|
|
6
5
|
export const StyledTable = styled.table `
|
|
@@ -25,7 +24,10 @@ export const StyledHeaderCell = styled.th `
|
|
|
25
24
|
z-index: 2;
|
|
26
25
|
text-align: left;
|
|
27
26
|
vertical-align: bottom;
|
|
28
|
-
${
|
|
27
|
+
font-weight: ${({ theme }) => theme.font.label[100].fontWeight};
|
|
28
|
+
line-height: ${({ theme }) => theme.font.label[100].lineHeight};
|
|
29
|
+
font-size: ${({ theme }) => theme.font.label[100].fontSize};
|
|
30
|
+
text-transform: ${({ theme }) => theme.font.label[100].textCase};
|
|
29
31
|
padding-left: 8px;
|
|
30
32
|
padding-right: 8px;
|
|
31
33
|
padding-top: 8px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { TableStylesProps, type TableProps } from '../types'\n\ntype StyledTableProps = {\n $roundedTable: TableProps<unknown>['roundedTable']\n}\n\nconst isString = (value: unknown): value is string => typeof value === 'string'\n\nexport const StyledTable = styled.table<StyledTableProps>`\n width: 100%;\n height: 100%;\n border-collapse: collapse;\n overflow: auto;\n background: ${({ theme }) => theme.color.surface.base[100]};\n border-spacing: 30px;\n\n ${({ $roundedTable }) =>\n $roundedTable &&\n css`\n border-radius: ${isString($roundedTable) ? $roundedTable : '16px'};\n overflow: hidden;\n `}\n`\n\nexport const StyledHeaderCell = styled.th<TransientProps<TableStylesProps>>`\n background: ${({ theme }) => theme.color.surface.base[100]};\n border-bottom: ${({ $hasKeyline, theme }) =>\n $hasKeyline ? `1px solid ${theme.color.surface.base[900]}` : 'none'};\n position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};\n top: 0;\n z-index: 2;\n text-align: left;\n vertical-align: bottom;\n font-weight: ${({ theme }) => theme.font.label[100].fontWeight};\n line-height: ${({ theme }) => theme.font.label[100].lineHeight};\n font-size: ${({ theme }) => theme.font.label[100].fontSize};\n text-transform: ${({ theme }) => theme.font.label[100].textCase};\n padding-left: 8px;\n padding-right: 8px;\n padding-top: 8px;\n padding-bottom: 8px;\n\n ${({ $headerColor }) =>\n $headerColor &&\n css`\n background: ${$headerColor};\n `}\n\n ${({ $headerHeight }) =>\n $headerHeight &&\n css`\n height: ${$headerHeight};\n `}\n\n ${({ $maxWidth }) =>\n $maxWidth &&\n css`\n max-width: ${$maxWidth};\n `}\n\n ${({ $minWidth }) =>\n $minWidth &&\n css`\n min-width: ${$minWidth};\n `}\n \n ${({ $columnPadding }) =>\n $columnPadding &&\n css`\n padding-left: ${$columnPadding};\n padding-right: ${$columnPadding};\n `};\n`\n\nexport const StyledCell = styled.td<TransientProps<TableStylesProps>>`\n vertical-align: middle;\n padding-left: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n padding-right: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n padding-top: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n padding-bottom: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n\n ${({ $hideOverflow }) =>\n $hideOverflow &&\n css`\n overflow: hidden;\n `};\n\n ${({ $noWrapContent }) =>\n $noWrapContent &&\n css`\n white-space: nowrap;\n `};\n\n ${({ $truncateContent }) =>\n $truncateContent &&\n css`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n `};\n\n ${({ $stickyCell }) =>\n $stickyCell &&\n css`\n position: sticky;\n right: 0;\n `};\n\n ${({ $maxWidth }) =>\n $maxWidth &&\n css`\n max-width: ${$maxWidth};\n `}\n\n ${({ $rowActionsBgColor }) =>\n $rowActionsBgColor &&\n css`\n background: ${$rowActionsBgColor};\n `}\n`\n\nexport const StyledRow = styled.tr<TransientProps<TableStylesProps>>`\n background: ${({ theme }) => theme.color.surface.base[300]};\n\n ${({ $rowBorderColor, $noRowBorderColor }) =>\n $rowBorderColor &&\n !$noRowBorderColor &&\n css`\n border-bottom: 1px solid ${$rowBorderColor};\n `}\n\n ${({ $rowColor }) =>\n $rowColor &&\n css`\n background: ${$rowColor};\n `}\n\n ${({ $stripedColor }) =>\n $stripedColor &&\n css`\n &:nth-child(even) {\n background: ${$stripedColor};\n }\n `}\n\n ${({ $clickableRow, $rowColor, theme }) =>\n $clickableRow &&\n css`\n cursor: pointer;\n &:hover {\n background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};\n }\n &:focus-visible {\n ${focusOutlineStyle}\n background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};\n }\n `}\n`\n\ntype StyledSubTableCellProps = {\n $bgColor?: string\n $padding?: string | undefined\n $rowBorderColor?: string\n}\n\ntype StyledSubInnerCellProps = {\n $padding?: string | undefined\n}\n\nexport const StyledSubTableCell = styled.td<StyledSubTableCellProps>`\n padding: ${({ $padding }) => $padding ?? '12px 0'};\n\n ${({ $rowBorderColor }) =>\n $rowBorderColor &&\n css`\n border-bottom: 1px solid ${$rowBorderColor};\n `}\n\n ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`}\n`\n\nexport const StyledSubInnerCell = styled.div<StyledSubInnerCellProps>`\n padding: ${({ $padding }) => $padding ?? '12px 0'};\n`\n"]}
|
package/dist/Text/Text.d.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { FC, LabelHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { MarginProps } from '../utils/space';
|
|
3
3
|
import { ColorTypes } from '../ThemeProvider/utils/colourMap';
|
|
4
|
+
import { TypoTypes } from '../ThemeProvider/utils/fontMap';
|
|
4
5
|
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
6
|
type Props = {
|
|
6
7
|
children: ReactNode;
|
|
7
8
|
tag?: any;
|
|
8
9
|
className?: string;
|
|
9
|
-
typo?:
|
|
10
|
+
typo?: TypoTypes;
|
|
10
11
|
align?: string;
|
|
11
12
|
color?: ColorTypes;
|
|
12
13
|
cursor?: string;
|
package/dist/Text/Text.js
CHANGED
|
@@ -3,21 +3,19 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import styled, { css, useTheme } from 'styled-components';
|
|
4
4
|
import { Box } from '../Box';
|
|
5
5
|
import { linkStyleOverride } from '../Link/Link';
|
|
6
|
-
import { fontStyleMapping } from './fontMapping';
|
|
7
6
|
import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
|
|
8
|
-
|
|
7
|
+
import { resolveToThemeFont, translateFontStyleIntoCss, } from '../ThemeProvider/utils/fontMap';
|
|
8
|
+
export const Text = forwardRef(({ children, typo = 'font.body.200', className = '', tag = 'p', align = 'left', color = 'color.text.base', cursor = 'inherit', title = '', ...props }, ref) => {
|
|
9
9
|
const theme = useTheme();
|
|
10
10
|
const resolvedColor = resolveToThemeColor(color, theme);
|
|
11
|
-
|
|
11
|
+
const resolvedTypography = resolveToThemeFont(typo, theme);
|
|
12
|
+
return (_jsx(Container, { forwardedAs: tag, className: className, "$typo": resolvedTypography, "$align": align, "$color": resolvedColor, cursor: cursor, title: title, ...props, ref: ref, children: children }));
|
|
12
13
|
});
|
|
13
14
|
Text.displayName = 'Text';
|
|
14
|
-
const isTypo = (value) => {
|
|
15
|
-
return Object.keys(fontStyleMapping).includes(value);
|
|
16
|
-
};
|
|
17
15
|
const Container = styled(Box)(({ $align, $color, $cursor, $typo }) => css `
|
|
18
16
|
/** TYPOGRAPHY STYLES */
|
|
19
17
|
|
|
20
|
-
${
|
|
18
|
+
${translateFontStyleIntoCss($typo)}
|
|
21
19
|
|
|
22
20
|
text-align: ${$align};
|
|
23
21
|
cursor: ${$cursor};
|
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,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAC;AACvE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAC;AACvE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAEL,kBAAkB,EAClB,yBAAyB,GAE1B,MAAM,gCAAgC,CAAA;AAuCvC,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAC3C,CACE,EACE,QAAQ,EACR,IAAI,GAAG,eAAe,EACtB,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,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IACvD,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IAE1D,OAAO,CACL,KAAC,SAAS,IACR,WAAW,EAAE,GAAG,EAChB,SAAS,EAAE,SAAS,WACb,kBAAkB,YACjB,KAAK,YACL,aAAa,EACrB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,KAAK,EACT,GAAG,EAAE,GAAG,YAEP,QAAQ,GACC,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGvC,yBAAyB,CAAC,KAAK,CAAC;;kBAEpB,MAAM;cACV,OAAO;aACR,MAAM;MACb,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;GACvC,CACF,CAAA","sourcesContent":["import { FC, forwardRef, LabelHTMLAttributes, ReactNode } from 'react';\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { linkStyleOverride } from '../Link/Link'\nimport { MarginProps } from '../utils/space'\nimport {\n ColorTypes,\n resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport {\n FontValueObject,\n resolveToThemeFont,\n translateFontStyleIntoCss,\n TypoTypes,\n} from '../ThemeProvider/utils/fontMap'\ninterface IText {\n /** the resolved font object based on the Design System fonts */\n $typo: FontValueObject\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?: TypoTypes\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 = 'font.body.200',\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 theme = useTheme()\n const resolvedColor = resolveToThemeColor(color, theme)\n const resolvedTypography = resolveToThemeFont(typo, theme)\n\n return (\n <Container\n forwardedAs={tag}\n className={className}\n $typo={resolvedTypography}\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 Container = styled(Box)<IText>(\n ({ $align, $color, $cursor, $typo }) => css`\n /** TYPOGRAPHY STYLES */\n\n ${translateFontStyleIntoCss($typo)}\n\n text-align: ${$align};\n cursor: ${$cursor};\n color: ${$color};\n ${linkStyleOverride({ color: $color })}\n `,\n)\n"]}
|
package/dist/Text/fontMapping.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fontMapping.js","sourceRoot":"","sources":["../../src/Text/fontMapping.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC,MAAM,CAAC,MAAM,gBAAgB,GAAyB;IACpD,gBAAgB,EAAE;;;mBAGD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;GAOtC;IACD,IAAI,EAAE;;mBAEW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;GAOxC;IACD,mBAAmB,EAAE;;;mBAGJ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;GAEtC;IACD,eAAe,EAAE;;mBAEA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;GAOxC;IACD,gBAAgB,EAAE;;mBAED,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,eAAe,EAAE;;mBAEA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,kBAAkB,EAAE;;mBAEH,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,gBAAgB,EAAE;;mBAED,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,iBAAiB,EAAE;;mBAEF,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,cAAc,EAAE;;mBAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,YAAY,EAAE;;mBAEG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,OAAO,EAAE;;mBAEQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,KAAK,EAAE;;;mBAGU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;CACF,CAAA","sourcesContent":["import { theme } from '../theme'\nimport { Typo } from './Text'\n\nexport const fontStyleMapping: Record<Typo, string> = {\n 'hero-alternate': `\n font-size: 40px;\n font-family: 'MarshmallowYouth';\n font-weight: ${theme.font.weight.bold};\n line-height: 40px;\n\n @media (min-width: 768px) {\n font-size: 56px;\n line-height: 52px;\n }\n `,\n hero: `\n font-size: 32px;\n font-weight: ${theme.font.weight.medium};\n line-height: 40px;\n\n @media (min-width: 768px) {\n font-size: 40px;\n line-height: 44px;\n }\n `,\n 'heading-alternate': `\n font-size: 40px;\n font-family: 'MarshmallowYouth';\n font-weight: ${theme.font.weight.bold};\n line-height: 40px;\n `,\n 'heading-large': `\n font-size: 28px;\n font-weight: ${theme.font.weight.medium};\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 32px;\n line-height: 40px;\n }\n `,\n 'heading-medium': `\n font-size: 24px;\n font-weight: ${theme.font.weight.medium};\n line-height: 32px;\n `,\n 'heading-small': `\n font-size: 20px;\n font-weight: ${theme.font.weight.medium};\n line-height: 28px;\n `,\n 'headline-regular': `\n font-size: 16px;\n font-weight: ${theme.font.weight.medium};\n line-height: 20px;\n `,\n 'headline-small': `\n font-size: 14px;\n font-weight: ${theme.font.weight.medium};\n line-height: 20px;\n `,\n 'body-standfirst': `\n font-size: 18px;\n font-weight: ${theme.font.weight.normal};\n line-height: 24px;\n `,\n 'body-regular': `\n font-size: 16px;\n font-weight: ${theme.font.weight.normal};\n line-height: 20px;\n `,\n 'body-small': `\n font-size: 14px;\n font-weight: ${theme.font.weight.normal};\n line-height: 20px;\n `,\n caption: `\n font-size: 12px;\n font-weight: ${theme.font.weight.normal};\n line-height: 16px;\n `,\n label: `\n font-size: 10px;\n line-height: 12px;\n font-weight: ${theme.font.weight.medium};\n text-transform: uppercase;\n `,\n}\n"]}
|
|
1
|
+
{"version":3,"file":"fontMapping.js","sourceRoot":"","sources":["../../src/Text/fontMapping.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAyB;IACpD,gBAAgB,EAAE;;;mBAGD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;GAOtC;IACD,IAAI,EAAE;;mBAEW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;GAOxC;IACD,mBAAmB,EAAE;;;mBAGJ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;GAEtC;IACD,eAAe,EAAE;;mBAEA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;GAOxC;IACD,gBAAgB,EAAE;;mBAED,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,eAAe,EAAE;;mBAEA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,kBAAkB,EAAE;;mBAEH,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,gBAAgB,EAAE;;mBAED,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,iBAAiB,EAAE;;mBAEF,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,cAAc,EAAE;;mBAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,YAAY,EAAE;;mBAEG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,OAAO,EAAE;;mBAEQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,KAAK,EAAE;;;mBAGU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;CACF,CAAA","sourcesContent":["import { theme } from '../theme'\nimport { Typo } from './Text'\n\n/**\n * @deprecated Use `resolveToThemeFont` instead\n */\nexport const fontStyleMapping: Record<Typo, string> = {\n 'hero-alternate': `\n font-size: 40px;\n font-family: 'MarshmallowYouth';\n font-weight: ${theme.font.weight.bold};\n line-height: 40px;\n\n @media (min-width: 768px) {\n font-size: 56px;\n line-height: 52px;\n }\n `,\n hero: `\n font-size: 32px;\n font-weight: ${theme.font.weight.medium};\n line-height: 40px;\n\n @media (min-width: 768px) {\n font-size: 40px;\n line-height: 44px;\n }\n `,\n 'heading-alternate': `\n font-size: 40px;\n font-family: 'MarshmallowYouth';\n font-weight: ${theme.font.weight.bold};\n line-height: 40px;\n `,\n 'heading-large': `\n font-size: 28px;\n font-weight: ${theme.font.weight.medium};\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 32px;\n line-height: 40px;\n }\n `,\n 'heading-medium': `\n font-size: 24px;\n font-weight: ${theme.font.weight.medium};\n line-height: 32px;\n `,\n 'heading-small': `\n font-size: 20px;\n font-weight: ${theme.font.weight.medium};\n line-height: 28px;\n `,\n 'headline-regular': `\n font-size: 16px;\n font-weight: ${theme.font.weight.medium};\n line-height: 20px;\n `,\n 'headline-small': `\n font-size: 14px;\n font-weight: ${theme.font.weight.medium};\n line-height: 20px;\n `,\n 'body-standfirst': `\n font-size: 18px;\n font-weight: ${theme.font.weight.normal};\n line-height: 24px;\n `,\n 'body-regular': `\n font-size: 16px;\n font-weight: ${theme.font.weight.normal};\n line-height: 20px;\n `,\n 'body-small': `\n font-size: 14px;\n font-weight: ${theme.font.weight.normal};\n line-height: 20px;\n `,\n caption: `\n font-size: 12px;\n font-weight: ${theme.font.weight.normal};\n line-height: 16px;\n `,\n label: `\n font-size: 10px;\n line-height: 12px;\n font-weight: ${theme.font.weight.medium};\n text-transform: uppercase;\n `,\n}\n"]}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json';
|
|
2
2
|
import { Color } from '../../theme';
|
|
3
3
|
import { Theme } from '../ThemeProvider';
|
|
4
|
-
type Flatten<T, Prefix extends string = ''> = {
|
|
4
|
+
export type Flatten<T, Prefix extends string = ''> = {
|
|
5
5
|
[K in keyof T & string]: T[K] extends Record<string, any> ? Flatten<T[K], `${Prefix}${K}.`> : `${Prefix}${K}`;
|
|
6
6
|
}[keyof T & string];
|
|
7
|
-
type Prettify<T> = {
|
|
7
|
+
export type Prettify<T> = {
|
|
8
8
|
[K in keyof T]: T[K];
|
|
9
9
|
} & {};
|
|
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" | "color.text.base" | "color.text.subtle" | "color.text.contrast" | "color.text.
|
|
13
|
+
export declare const getColorPath: (color: ColorTypes) => "meta" | "onfido" | "rac" | "color.text.base" | "color.text.subtle" | "color.text.contrast" | "color.text.inverse" | "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.inverse" | "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
|
-
export {};
|
|
@@ -1 +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'\nimport { Theme } from '../ThemeProvider'\nimport { getFromObject } from '../../utils/getFromObject'\n\
|
|
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\nexport type 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 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"]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json';
|
|
2
|
+
import { Typo } from '../../Text';
|
|
3
|
+
import { Theme } from '../../ThemeProvider/ThemeProvider';
|
|
4
|
+
type Font = typeof designTokens.font;
|
|
5
|
+
type FontKey = keyof Font;
|
|
6
|
+
type FontValueKey = (typeof fontValueKeys)[number];
|
|
7
|
+
export type FontValueObject = Partial<{
|
|
8
|
+
[K in FontValueKey]?: K extends keyof Font[keyof Font][keyof Font[keyof Font]] ? Font[keyof Font][keyof Font[keyof Font]][K] : never;
|
|
9
|
+
}>;
|
|
10
|
+
declare const fontValueKeys: string[];
|
|
11
|
+
type captionTypeKeys = [keyof Font['caption']];
|
|
12
|
+
type bodyTypeKeys = [keyof Font['body']];
|
|
13
|
+
type headingTypeKeys = [keyof Font['heading']];
|
|
14
|
+
type heroTypeKeys = [keyof Font['hero']];
|
|
15
|
+
type labelTypeKeys = [keyof Font['label']];
|
|
16
|
+
type linkTypeKeys = [keyof Font['link']];
|
|
17
|
+
export type FontTypeMap = {
|
|
18
|
+
caption: captionTypeKeys;
|
|
19
|
+
label: labelTypeKeys;
|
|
20
|
+
body: bodyTypeKeys;
|
|
21
|
+
heading: headingTypeKeys;
|
|
22
|
+
hero: heroTypeKeys;
|
|
23
|
+
link: linkTypeKeys;
|
|
24
|
+
}[keyof Font];
|
|
25
|
+
export type FontPathMap = {
|
|
26
|
+
[K in FontKey]: K extends 'caption' ? `font.${K}.${captionTypeKeys[number]}` : K extends 'body' ? `font.${K}.${bodyTypeKeys[number]}` : K extends 'heading' ? `font.${K}.${headingTypeKeys[number]}` : K extends 'hero' ? `font.${K}.${heroTypeKeys[number]}` : K extends 'label' ? `font.${K}.${labelTypeKeys[number]}` : K extends 'link' ? `font.${K}.${linkTypeKeys[number]}` : never;
|
|
27
|
+
}[FontKey];
|
|
28
|
+
export type TypoTypes = FontPathMap | Typo;
|
|
29
|
+
export declare const resolveToThemeFont: (typo: TypoTypes, theme: Theme) => FontValueObject;
|
|
30
|
+
export declare const getTypoPath: (typo: TypoTypes) => "caption" | "label" | "hero" | "font.link.100" | "font.link.200" | "font.body.100" | "font.body.200" | "font.body.300" | "font.caption.100" | "font.label.100" | "font.label.200" | "font.heading.500" | "font.heading.400" | "font.heading.100" | "font.heading.200" | "font.heading.300" | "font.heading.600" | "font.hero.400" | "font.hero.100" | "font.hero.200" | "font.hero.300" | "hero-alternate" | "heading-alternate" | "heading-large" | "heading-medium" | "heading-small" | "headline-regular" | "headline-small" | "body-standfirst" | "body-regular" | "body-small";
|
|
31
|
+
export declare const formatDesignTokenFont: () => string;
|
|
32
|
+
export declare const newFontStyles: Font;
|
|
33
|
+
export declare const legacyFontStyleMapping: Record<Typo, FontPathMap>;
|
|
34
|
+
export declare const translateFontStyleIntoCss: (fontObject: FontValueObject) => import("styled-components").RuleSet<object>;
|
|
35
|
+
export {};
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json';
|
|
2
|
+
import { getFromObject } from '../../utils/getFromObject';
|
|
3
|
+
import { css } from 'styled-components';
|
|
4
|
+
const fontValueKeys = [
|
|
5
|
+
'fontFamily',
|
|
6
|
+
'fontSize',
|
|
7
|
+
'fontWeight',
|
|
8
|
+
'lineHeight',
|
|
9
|
+
'letterSpacing',
|
|
10
|
+
'textCase',
|
|
11
|
+
'textDecoration',
|
|
12
|
+
];
|
|
13
|
+
// a function that returns a font value object based on either the new design token path or the legacy typo mapping
|
|
14
|
+
export const resolveToThemeFont = (typo, theme) => {
|
|
15
|
+
const fontPath = getTypoPath(typo); // always returns new design token path
|
|
16
|
+
return getFromObject({
|
|
17
|
+
obj: theme,
|
|
18
|
+
path: fontPath,
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
export const getTypoPath = (typo) => {
|
|
22
|
+
const useSmallerFontSizes = window.innerWidth < 768; // This is to handle responsive font sizes for hero-alternate, hero and heading-large
|
|
23
|
+
if (useSmallerFontSizes) {
|
|
24
|
+
if (typo === 'hero-alternate') {
|
|
25
|
+
typo = 'font.hero.200';
|
|
26
|
+
}
|
|
27
|
+
else if (typo === 'hero') {
|
|
28
|
+
typo = 'font.hero.100';
|
|
29
|
+
}
|
|
30
|
+
else if (typo === 'heading-large') {
|
|
31
|
+
typo = 'font.heading.500';
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return typo in legacyFontStyleMapping
|
|
35
|
+
? legacyFontStyleMapping[typo]
|
|
36
|
+
: typo;
|
|
37
|
+
};
|
|
38
|
+
export const formatDesignTokenFont = () => {
|
|
39
|
+
const { font } = designTokens;
|
|
40
|
+
if (font === null) {
|
|
41
|
+
return '';
|
|
42
|
+
}
|
|
43
|
+
const result = [];
|
|
44
|
+
const destructureNestedObject = (obj, currentPath) => {
|
|
45
|
+
for (const key in obj) {
|
|
46
|
+
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
47
|
+
const value = obj[key];
|
|
48
|
+
const newPath = currentPath ? `${currentPath}.${key}` : key;
|
|
49
|
+
// TODO: instead of trimming, we should not add paths that end with font value keys
|
|
50
|
+
const trimmedPath = fontValueKeys.some((key) => newPath.endsWith(`.${key}`))
|
|
51
|
+
? newPath.slice(0, newPath.lastIndexOf('.'))
|
|
52
|
+
: newPath;
|
|
53
|
+
if (typeof value === 'object' && value !== null) {
|
|
54
|
+
destructureNestedObject(value, trimmedPath);
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
result.push(trimmedPath);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
destructureNestedObject(font, 'font');
|
|
63
|
+
return result.join(', ');
|
|
64
|
+
};
|
|
65
|
+
export const newFontStyles = designTokens.font;
|
|
66
|
+
export const legacyFontStyleMapping = {
|
|
67
|
+
'hero-alternate': 'font.hero.300',
|
|
68
|
+
hero: 'font.hero.200',
|
|
69
|
+
'heading-alternate': 'font.hero.200',
|
|
70
|
+
'heading-large': 'font.heading.600',
|
|
71
|
+
'heading-medium': 'font.heading.400',
|
|
72
|
+
'heading-small': 'font.heading.300',
|
|
73
|
+
'headline-regular': 'font.heading.200',
|
|
74
|
+
'headline-small': 'font.heading.100',
|
|
75
|
+
'body-standfirst': 'font.body.300',
|
|
76
|
+
'body-regular': 'font.body.200',
|
|
77
|
+
'body-small': 'font.body.100',
|
|
78
|
+
caption: 'font.caption.100',
|
|
79
|
+
label: 'font.label.100',
|
|
80
|
+
};
|
|
81
|
+
export const translateFontStyleIntoCss = (fontObject) => {
|
|
82
|
+
return css `
|
|
83
|
+
font-family: ${fontObject.fontFamily};
|
|
84
|
+
font-size: ${fontObject.fontSize};
|
|
85
|
+
font-weight: ${fontObject.fontWeight};
|
|
86
|
+
letter-spacing: ${fontObject.letterSpacing};
|
|
87
|
+
line-height: ${fontObject.lineHeight};
|
|
88
|
+
text-transform: ${fontObject.textCase};
|
|
89
|
+
text-decoration: ${fontObject.textDecoration};
|
|
90
|
+
`;
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=fontMap.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fontMap.js","sourceRoot":"","sources":["../../../src/ThemeProvider/utils/fontMap.ts"],"names":[],"mappings":"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","sourcesContent":["import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json'\n\nimport { Typo } from '../../Text'\nimport { Theme } from '../../ThemeProvider/ThemeProvider'\nimport { getFromObject } from '../../utils/getFromObject'\nimport { css } from 'styled-components'\n\ntype Font = typeof designTokens.font\ntype FontKey = keyof Font\ntype FontValueKey = (typeof fontValueKeys)[number]\n\nexport type FontValueObject = Partial<{\n [K in FontValueKey]?: K extends keyof Font[keyof Font][keyof Font[keyof Font]]\n ? Font[keyof Font][keyof Font[keyof Font]][K]\n : never\n}>\n\nconst fontValueKeys = [\n 'fontFamily',\n 'fontSize',\n 'fontWeight',\n 'lineHeight',\n 'letterSpacing',\n 'textCase',\n 'textDecoration',\n]\n\ntype captionTypeKeys = [keyof Font['caption']]\ntype bodyTypeKeys = [keyof Font['body']]\ntype headingTypeKeys = [keyof Font['heading']]\ntype heroTypeKeys = [keyof Font['hero']]\ntype labelTypeKeys = [keyof Font['label']]\ntype linkTypeKeys = [keyof Font['link']]\n\nexport type FontTypeMap = {\n caption: captionTypeKeys\n label: labelTypeKeys\n body: bodyTypeKeys\n heading: headingTypeKeys\n hero: heroTypeKeys\n link: linkTypeKeys\n}[keyof Font]\n\n// type for the path to each font type in design tokens, e.g. 'font.hero.200'\nexport type FontPathMap = {\n [K in FontKey]: K extends 'caption'\n ? `font.${K}.${captionTypeKeys[number]}`\n : K extends 'body'\n ? `font.${K}.${bodyTypeKeys[number]}`\n : K extends 'heading'\n ? `font.${K}.${headingTypeKeys[number]}`\n : K extends 'hero'\n ? `font.${K}.${heroTypeKeys[number]}`\n : K extends 'label'\n ? `font.${K}.${labelTypeKeys[number]}`\n : K extends 'link'\n ? `font.${K}.${linkTypeKeys[number]}`\n : never\n}[FontKey]\n\nexport type TypoTypes = FontPathMap | Typo\n\n// a function that returns a font value object based on either the new design token path or the legacy typo mapping\nexport const resolveToThemeFont = (\n typo: TypoTypes,\n theme: Theme,\n): FontValueObject => {\n const fontPath = getTypoPath(typo) // always returns new design token path\n return getFromObject({\n obj: theme,\n path: fontPath,\n })\n}\n\nexport const getTypoPath = (typo: TypoTypes) => {\n const useSmallerFontSizes = window.innerWidth < 768 // This is to handle responsive font sizes for hero-alternate, hero and heading-large\n if (useSmallerFontSizes) {\n if (typo === 'hero-alternate') {\n typo = 'font.hero.200'\n } else if (typo === 'hero') {\n typo = 'font.hero.100'\n } else if (typo === 'heading-large') {\n typo = 'font.heading.500'\n }\n }\n return typo in legacyFontStyleMapping\n ? legacyFontStyleMapping[typo as keyof typeof legacyFontStyleMapping]\n : typo\n}\n\nexport const formatDesignTokenFont = (): string => {\n const { font } = designTokens\n if (font === 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\n const newPath = currentPath ? `${currentPath}.${key}` : key\n\n // TODO: instead of trimming, we should not add paths that end with font value keys\n const trimmedPath = fontValueKeys.some((key) =>\n newPath.endsWith(`.${key}`),\n )\n ? newPath.slice(0, newPath.lastIndexOf('.'))\n : newPath\n\n if (typeof value === 'object' && value !== null) {\n destructureNestedObject(value, trimmedPath)\n } else {\n result.push(trimmedPath)\n }\n }\n }\n }\n destructureNestedObject(font, 'font')\n return result.join(', ')\n}\n\nexport const newFontStyles: Font = designTokens.font\n\nexport const legacyFontStyleMapping: Record<Typo, FontPathMap> = {\n 'hero-alternate': 'font.hero.300',\n hero: 'font.hero.200',\n 'heading-alternate': 'font.hero.200',\n 'heading-large': 'font.heading.600',\n 'heading-medium': 'font.heading.400',\n 'heading-small': 'font.heading.300',\n 'headline-regular': 'font.heading.200',\n 'headline-small': 'font.heading.100',\n 'body-standfirst': 'font.body.300',\n 'body-regular': 'font.body.200',\n 'body-small': 'font.body.100',\n caption: 'font.caption.100',\n label: 'font.label.100',\n}\n\nexport const translateFontStyleIntoCss = (fontObject: FontValueObject) => {\n return css`\n font-family: ${fontObject.fontFamily};\n font-size: ${fontObject.fontSize};\n font-weight: ${fontObject.fontWeight};\n letter-spacing: ${fontObject.letterSpacing};\n line-height: ${fontObject.lineHeight};\n text-transform: ${fontObject.textCase};\n text-decoration: ${fontObject.textDecoration};\n `\n}\n"]}
|
package/dist/fontStyle.js
CHANGED
|
@@ -32,6 +32,13 @@ export const FontStyle = createGlobalStyle `
|
|
|
32
32
|
font-style: normal;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
@font-face {
|
|
36
|
+
font-family: 'Marshmallow Youth';
|
|
37
|
+
src: url('https://assets.marshmallow.com/fonts/MarshmallowYouth-Bold.woff2') format('woff2');
|
|
38
|
+
font-weight: ${theme.font.weight.bold};
|
|
39
|
+
font-style: normal;
|
|
40
|
+
}
|
|
41
|
+
|
|
35
42
|
@font-face {
|
|
36
43
|
font-family: 'CircularXX';
|
|
37
44
|
src: url('https://assets.marshmallow.com/fonts/CircularXXSub-RegularSubset.woff2') format('woff2');
|
package/dist/fontStyle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fontStyle.js","sourceRoot":"","sources":["../src/fontStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,iBAAiB,CAAA;;;;mBAIvB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;;mBAQtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;mBAOtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;CAKxC,CAAA","sourcesContent":["import { createGlobalStyle } from 'styled-components'\nimport { theme } from './theme'\n\nexport const FontStyle = createGlobalStyle`\n @font-face {\n font-family: 'Circular';\n src: url('https://assets.marshmallow.com/fonts/CircularXXSub-RegularSubset.woff2') format('woff2');\n font-weight: ${theme.font.weight.normal};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'Circular';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Medium.woff2') format('woff2');\n font-weight: ${theme.font.weight.medium};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'Circular';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Bold.woff2') format('woff2');\n font-weight: ${theme.font.weight.bold};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'MarshmallowYouth';\n src: url('https://assets.marshmallow.com/fonts/MarshmallowYouth-Bold.woff2') format('woff2');\n font-weight: ${theme.font.weight.bold};\n font-style: normal;\n }\n\n\t@font-face {\n font-family: 'CircularXX';\n src: url('https://assets.marshmallow.com/fonts/CircularXXSub-RegularSubset.woff2') format('woff2');\n font-weight: ${theme.font.weight.normal};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'CircularXX';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Medium.woff2') format('woff2');\n font-weight: ${theme.font.weight.medium};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'CircularXX';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Bold.woff2') format('woff2');\n font-weight: ${theme.font.weight.bold};\n font-style: normal;\n font-display: swap;\n }\n\n`\n"]}
|
|
1
|
+
{"version":3,"file":"fontStyle.js","sourceRoot":"","sources":["../src/fontStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,iBAAiB,CAAA;;;;mBAIvB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;;mBAQtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;mBAOtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;mBAOtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;CAKxC,CAAA","sourcesContent":["import { createGlobalStyle } from 'styled-components'\nimport { theme } from './theme'\n\nexport const FontStyle = createGlobalStyle`\n @font-face {\n font-family: 'Circular';\n src: url('https://assets.marshmallow.com/fonts/CircularXXSub-RegularSubset.woff2') format('woff2');\n font-weight: ${theme.font.weight.normal};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'Circular';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Medium.woff2') format('woff2');\n font-weight: ${theme.font.weight.medium};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'Circular';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Bold.woff2') format('woff2');\n font-weight: ${theme.font.weight.bold};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'MarshmallowYouth';\n src: url('https://assets.marshmallow.com/fonts/MarshmallowYouth-Bold.woff2') format('woff2');\n font-weight: ${theme.font.weight.bold};\n font-style: normal;\n }\n\n @font-face {\n font-family: 'Marshmallow Youth';\n src: url('https://assets.marshmallow.com/fonts/MarshmallowYouth-Bold.woff2') format('woff2');\n font-weight: ${theme.font.weight.bold};\n font-style: normal;\n }\n\n\t@font-face {\n font-family: 'CircularXX';\n src: url('https://assets.marshmallow.com/fonts/CircularXXSub-RegularSubset.woff2') format('woff2');\n font-weight: ${theme.font.weight.normal};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'CircularXX';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Medium.woff2') format('woff2');\n font-weight: ${theme.font.weight.medium};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'CircularXX';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Bold.woff2') format('woff2');\n font-weight: ${theme.font.weight.bold};\n font-style: normal;\n font-display: swap;\n }\n\n`\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const fontOptions: string[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fontOptions.js","sourceRoot":"","sources":["../../../src/utils/storybookHelpers/fontOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AAEzE,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CACnC,IAAI,GAAG,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAC7C,CAAA","sourcesContent":["import { formatDesignTokenFont } from '../../ThemeProvider/utils/fontMap'\n\nexport const fontOptions = Array.from(\n new Set(formatDesignTokenFont().split(', ')),\n)\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "14.0.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -54,10 +54,10 @@
|
|
|
54
54
|
"@types/node": "^24.0.3",
|
|
55
55
|
"@types/react": "^19.1.8",
|
|
56
56
|
"@types/react-dom": "^19.1.6",
|
|
57
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
58
|
-
"@typescript-eslint/parser": "^8.
|
|
57
|
+
"@typescript-eslint/eslint-plugin": "^8.46.2",
|
|
58
|
+
"@typescript-eslint/parser": "^8.46.2",
|
|
59
59
|
"axe-playwright": "^2.1.0",
|
|
60
|
-
"eslint": "^9.
|
|
60
|
+
"eslint": "^9.39.0",
|
|
61
61
|
"eslint-config-prettier": "^10.1.5",
|
|
62
62
|
"eslint-plugin-prettier": "^5.5.0",
|
|
63
63
|
"eslint-plugin-react": "^7.37.5",
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"dependencies": {
|
|
83
83
|
"@floating-ui/react": "0.27.12",
|
|
84
84
|
"@lexical/react": "^0.32.1",
|
|
85
|
-
"@mrshmllw/smores-foundations": "^1.0.
|
|
85
|
+
"@mrshmllw/smores-foundations": "^1.0.2",
|
|
86
86
|
"body-scroll-lock": "^4.0.0-beta.0",
|
|
87
87
|
"date-fns": "^4.1.0",
|
|
88
88
|
"dompurify": "^3.2.6",
|