@mrshmllw/smores-react 13.7.0 → 13.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/Accordion.js +4 -3
- package/dist/Accordion/Accordion.js.map +1 -1
- package/dist/Badge/Badge.js +3 -2
- package/dist/Badge/Badge.js.map +1 -1
- package/dist/Tag/Tag.js +4 -3
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Text/Text.js +4 -5
- package/dist/Text/Text.js.map +1 -1
- package/dist/ThemeProvider/utils/colourMap.d.ts +2 -2
- package/dist/ThemeProvider/utils/colourMap.js +6 -6
- package/dist/ThemeProvider/utils/colourMap.js.map +1 -1
- package/dist/Toggle/Toggle.d.ts +2 -2
- package/dist/Toggle/Toggle.js +11 -7
- package/dist/Toggle/Toggle.js.map +1 -1
- package/dist/utils/getFromObject.d.ts +7 -0
- package/dist/utils/getFromObject.js +16 -0
- package/dist/utils/getFromObject.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
|
-
import styled, { css } from 'styled-components';
|
|
2
|
+
import styled, { css, useTheme } from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { Icon } from '../Icon';
|
|
5
5
|
import { Text } from '../Text';
|
|
6
6
|
import { resolveToThemeColor } from '../ThemeProvider/utils/colourMap';
|
|
7
7
|
export const Accordion = ({ title, children, onToggle, filledBackground, defaultIsOpen = false, borderTop = false, borderColor = 'color.illustration.neutral.300', backgroundColor = 'color.surface.base.300', subTitle, fullBorder = false, ...marginProps }) => {
|
|
8
|
+
const theme = useTheme();
|
|
8
9
|
const [isOpen, setIsOpen] = useState(defaultIsOpen);
|
|
9
10
|
const px = fullBorder ? '16px' : '0';
|
|
10
|
-
const resolvedBorderColor = resolveToThemeColor(borderColor);
|
|
11
|
-
const resolvedBackgroundColour = resolveToThemeColor(backgroundColor);
|
|
11
|
+
const resolvedBorderColor = resolveToThemeColor(borderColor, theme);
|
|
12
|
+
const resolvedBackgroundColour = resolveToThemeColor(backgroundColor, theme);
|
|
12
13
|
const handleToggle = () => {
|
|
13
14
|
const nextOpenState = !isOpen;
|
|
14
15
|
onToggle?.(nextOpenState);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, ReactNode, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\n\ntype UsableNewColors = Extract<\n NewColor,\n | 'color.surface.base.000'\n | 'color.surface.base.100'\n | 'color.surface.base.300'\n | 'color.illustration.neutral.300'\n>\n\nexport type AccordionProps = {\n title: string\n subTitle?: string\n filledBackground?: boolean\n borderTop?: boolean\n borderColor?: 'oatmeal' | 'custard' | 'cream' | 'coconut' | UsableNewColors\n fullBorder?: boolean\n backgroundColor?:\n | 'oatmeal'\n | 'custard'\n | 'cream'\n | 'coconut'\n | UsableNewColors\n onToggle?: (isOpen: boolean) => void\n children: ReactNode\n defaultIsOpen?: boolean\n} & MarginProps\n\nexport const Accordion: FC<AccordionProps> = ({\n title,\n children,\n onToggle,\n filledBackground,\n defaultIsOpen = false,\n borderTop = false,\n borderColor = 'color.illustration.neutral.300',\n backgroundColor = 'color.surface.base.300',\n subTitle,\n fullBorder = false,\n ...marginProps\n}) => {\n const theme = useTheme()\n const [isOpen, setIsOpen] = useState(defaultIsOpen)\n const px = fullBorder ? '16px' : '0'\n\n const resolvedBorderColor = resolveToThemeColor(borderColor, theme)\n\n const resolvedBackgroundColour = resolveToThemeColor(backgroundColor, theme)\n\n const handleToggle = () => {\n const nextOpenState = !isOpen\n onToggle?.(nextOpenState)\n setIsOpen(nextOpenState)\n }\n\n return (\n <Wrapper\n $borderTop={borderTop}\n $fullBorder={fullBorder}\n $filledBackground={filledBackground}\n $borderColor={resolvedBorderColor}\n $backgroundColor={resolvedBackgroundColour}\n {...marginProps}\n >\n <TopContainer\n flex\n alignItems=\"center\"\n justifyContent=\"space-between\"\n onClick={handleToggle}\n py=\"16px\"\n pr=\"16px\"\n pl={px}\n >\n <TitleContainer>\n <Text tag=\"h2\" typo=\"headline-regular\" color=\"liquorice\">\n {title}\n </Text>\n {subTitle && (\n <Text tag=\"label\" color=\"liquorice\" typo=\"label\" mt={{ custom: 4 }}>\n {subTitle}\n </Text>\n )}\n </TitleContainer>\n\n <CaretIcon\n render=\"caret\"\n size={24}\n color=\"marzipan\"\n $isOpen={isOpen}\n $borderTop={borderTop}\n />\n </TopContainer>\n {isOpen && (\n <Box pt=\"12px\" pb=\"16px\" px={px}>\n {children}\n </Box>\n )}\n </Wrapper>\n )\n}\n\nconst Wrapper = styled(Box)<\n TransientProps<\n Pick<AccordionProps, 'borderTop' | 'fullBorder' | 'filledBackground'>\n > & { $borderColor: string; $backgroundColor: string }\n>(\n ({\n $borderTop,\n $fullBorder,\n $filledBackground,\n $borderColor = 'oatmeal',\n $backgroundColor = 'custard',\n }) => css`\n border-bottom: 1px solid ${$borderColor};\n ${$borderTop && `border-top: 1px solid ${$backgroundColor};`}\n\n ${$fullBorder &&\n css`\n border: 1px solid ${$borderColor};\n border-radius: 16px;\n `}\n\n ${$filledBackground &&\n css`\n background-color: ${$backgroundColor};\n `}\n `,\n)\n\nconst TitleContainer = styled.div`\n display: flex;\n flex-direction: column;\n`\nconst TopContainer = styled(Box)`\n cursor: pointer;\n`\n\nconst CaretIcon = styled(Icon)<\n TransientProps<Pick<AccordionProps, 'borderTop'>> & { $isOpen: boolean }\n>(\n ({ $isOpen }) => css`\n transform: ${$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};\n transition: transform 0.6s ease;\n `,\n)\n"]}
|
package/dist/Badge/Badge.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
|
-
import styled, { css } from 'styled-components';
|
|
2
|
+
import styled, { css, useTheme } from 'styled-components';
|
|
3
3
|
import { BadgeFallbackImage } from './BadgeFallbackImage';
|
|
4
4
|
import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
|
|
5
5
|
export var BadgeSize;
|
|
@@ -10,7 +10,8 @@ export var BadgeSize;
|
|
|
10
10
|
})(BadgeSize || (BadgeSize = {}));
|
|
11
11
|
export function Badge({ borderColour = 'color.surface.brand.400', size = BadgeSize.Lg, src, disabled, zIndex, title, }) {
|
|
12
12
|
const [hasFailed, setHasFailed] = useState(false);
|
|
13
|
-
const
|
|
13
|
+
const theme = useTheme();
|
|
14
|
+
const resolvedBorderColor = resolveToThemeColor(borderColour, theme);
|
|
14
15
|
if (typeof src === 'string') {
|
|
15
16
|
return (React.createElement(Container, { "$borderColour": resolvedBorderColor, "$size": size, "$src": src, "$disabled": disabled, "$zIndex": zIndex },
|
|
16
17
|
hasFailed && React.createElement(BadgeFallbackImage, { title: title }),
|
package/dist/Badge/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAY,MAAM,OAAO,CAAA;AACjD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAY,MAAM,OAAO,CAAA;AACjD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAEzC,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,wBAAW,CAAA;AACb,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAWD,MAAM,UAAU,KAAK,CAAC,EACpB,YAAY,GAAG,yBAAyB,EACxC,IAAI,GAAG,SAAS,CAAC,EAAE,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,EACN,KAAK,GACM;IACX,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;IAEpE,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,CACL,oBAAC,SAAS,qBACO,mBAAmB,WAC3B,IAAI,UACL,GAAG,eACE,QAAQ,aACV,MAAM;YAEd,SAAS,IAAI,oBAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,GAAI;YACjD,CAAC,SAAS,IAAI,CACb,6BACE,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,GACjC,CACH,CACS,CACb,CAAA;IACH,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,qBACO,mBAAmB,WAC3B,IAAI,eACA,QAAQ,aACV,MAAM,UACT,IAAI,IAET,GAAG,CACM,CACb,CAAA;AACH,CAAC;AAUD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAiB,CAAC,KAAK,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,aAAa;wBACnB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM;;;cAGpD,KAAK,CAAC,KAAK;aACZ,KAAK,CAAC,KAAK;;;;wBAIA,KAAK,CAAC,aAAa;cAC7B,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM;eACzC,KAAK,CAAC,OAAO,IAAI,CAAC;;MAE3B,CAAC,KAAK,CAAC,SAAS;QAClB,GAAG,CAAA;;;;;KAKF;GACF,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { useState, type JSX } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { BadgeFallbackImage } from './BadgeFallbackImage'\nimport {\n ColorTypes,\n resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport enum BadgeSize {\n Sm = '24px',\n Md = '32px',\n Lg = '40px',\n}\n\nexport type BadgeProps = {\n src: string | JSX.Element\n title?: string\n borderColour?: ColorTypes\n size?: BadgeSize\n disabled?: boolean\n zIndex?: number\n}\n\nexport function Badge({\n borderColour = 'color.surface.brand.400',\n size = BadgeSize.Lg,\n src,\n disabled,\n zIndex,\n title,\n}: BadgeProps) {\n const [hasFailed, setHasFailed] = useState(false)\n const theme = useTheme()\n const resolvedBorderColor = resolveToThemeColor(borderColour, theme)\n\n if (typeof src === 'string') {\n return (\n <Container\n $borderColour={resolvedBorderColor}\n $size={size}\n $src={src}\n $disabled={disabled}\n $zIndex={zIndex}\n >\n {hasFailed && <BadgeFallbackImage title={title} />}\n {!hasFailed && (\n <img\n width={'100%'}\n height={'100%'}\n src={src}\n alt={title}\n onError={() => setHasFailed(true)}\n />\n )}\n </Container>\n )\n }\n\n return (\n <Container\n $borderColour={resolvedBorderColor}\n $size={size}\n $disabled={disabled}\n $zIndex={zIndex}\n $src={null}\n >\n {src}\n </Container>\n )\n}\n\ntype ContainerProps = {\n $borderColour: string\n $size: BadgeSize\n $src: string | null\n $disabled?: boolean\n $zIndex?: number\n}\n\nconst Container = styled.div<ContainerProps>((props) => {\n return css`\n background-color: ${props.$borderColour};\n background-image: ${props.$src ? `url(${props.$src})` : 'none'};\n background-position: center;\n background-size: cover;\n height: ${props.$size};\n width: ${props.$size};\n border-radius: 50%;\n overflow: hidden;\n transition: box-shadow 0.2s ease-in-out;\n border: 2px solid ${props.$borderColour};\n filter: ${props.$disabled ? 'contrast(0.5)' : 'none'};\n z-index: ${props.$zIndex || 0};\n\n ${!props.$disabled &&\n css`\n &:hover {\n cursor: pointer;\n box-shadow: 0 0 0px 5px #f0f0f0;\n }\n `}\n `\n})\n"]}
|
package/dist/Tag/Tag.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
2
|
+
import styled, { useTheme } from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { Text } from '../Text';
|
|
5
5
|
import { Icon } from '../Icon';
|
|
6
6
|
import { getColorPath, resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
|
|
7
7
|
export const Tag = ({ label, color, borderColor, bgColor, className, icon, iconColor, onClick, ...marginProps }) => {
|
|
8
|
-
const
|
|
9
|
-
const
|
|
8
|
+
const theme = useTheme();
|
|
9
|
+
const resolvedBGColor = resolveToThemeColor(bgColor, theme);
|
|
10
|
+
const resolvedBorderColor = borderColor && resolveToThemeColor(borderColor, theme);
|
|
10
11
|
return (React.createElement(Wrapper, { "$bgColor": resolvedBGColor, className: className, "$borderColor": resolvedBorderColor, ...marginProps, alignContent: "center", justifyContent: "center", onClick: onClick },
|
|
11
12
|
icon && (React.createElement(TagIcon, { render: icon, color: iconColor, size: 16, "data-testid": `tag-icon-${icon}` })),
|
|
12
13
|
React.createElement(TagText, { tag: "span", typo: "label", color: getColorPath(color) }, label)));
|
package/dist/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAEL,YAAY,EACZ,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAazC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,SAAS,EACT,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IAC3D,MAAM,mBAAmB,GACvB,WAAW,IAAI,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;IAExD,OAAO,CACL,oBAAC,OAAO,gBACI,eAAe,EACzB,SAAS,EAAE,SAAS,kBACN,mBAAmB,KAC7B,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ,EACvB,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,oBAAC,OAAO,IACN,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,iBACK,YAAY,IAAI,EAAE,GAC/B,CACH;QACD,oBAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,IACxD,KAAK,CACE,CACF,CACX,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;YACpC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,IAAI,aAAa,YAAY,EAAE;;;;;;;;;CAS5E,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE3B,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { useTheme } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Color } from '../theme'\nimport { Icon } from '../Icon'\nimport { Icons } from 'Icon/iconsList'\nimport {\n ColorTypes,\n getColorPath,\n resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type TagProps = {\n label: string\n color: ColorTypes\n bgColor: ColorTypes\n borderColor?: ColorTypes\n className?: string\n icon?: Icons\n iconColor?: Color\n onClick?: () => void\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n label,\n color,\n borderColor,\n bgColor,\n className,\n icon,\n iconColor,\n onClick,\n ...marginProps\n}) => {\n const theme = useTheme()\n\n const resolvedBGColor = resolveToThemeColor(bgColor, theme)\n const resolvedBorderColor =\n borderColor && resolveToThemeColor(borderColor, theme)\n\n return (\n <Wrapper\n $bgColor={resolvedBGColor}\n className={className}\n $borderColor={resolvedBorderColor}\n {...marginProps}\n alignContent=\"center\"\n justifyContent=\"center\"\n onClick={onClick}\n >\n {icon && (\n <TagIcon\n render={icon}\n color={iconColor}\n size={16}\n data-testid={`tag-icon-${icon}`}\n />\n )}\n <TagText tag=\"span\" typo=\"label\" color={getColorPath(color)}>\n {label}\n </TagText>\n </Wrapper>\n )\n}\n\ntype WrapperProps = TransientProps<{\n bgColor: string\n borderColor?: string\n}>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n background-color: ${({ $bgColor }) => $bgColor};\n border: ${({ $borderColor }) => $borderColor && `1px solid ${$borderColor}`};\n\n border-radius: 6px;\n padding: 4px 8px;\n\n height: 22px;\n\n box-sizing: border-box;\n display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n display: flex;\n align-items: center;\n font-size: 10px;\n font-weight: 500;\n line-height: 12px;\n text-transform: uppercase;\n`\n\nconst TagIcon = styled(Icon)`\n padding-right: 4px;\n`\n"]}
|
package/dist/Text/Text.js
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
-
import styled, { css } from 'styled-components';
|
|
2
|
+
import styled, { css, useTheme } from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { linkStyleOverride } from '../Link/Link';
|
|
5
5
|
import { fontStyleMapping } from './fontMapping';
|
|
6
|
-
import {
|
|
6
|
+
import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
|
|
7
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
|
|
9
|
-
|
|
10
|
-
: getThemeColor(color);
|
|
8
|
+
const theme = useTheme();
|
|
9
|
+
const resolvedColor = resolveToThemeColor(color, theme);
|
|
11
10
|
return (React.createElement(Container, { forwardedAs: tag, className: className, "$typo": typo, "$align": align, "$color": resolvedColor, cursor: cursor, title: title, ...props, ref: ref }, children));
|
|
12
11
|
});
|
|
13
12
|
Text.displayName = 'Text';
|
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;
|
|
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,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,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,EAEL,mBAAmB,GACpB,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,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAEvD,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, useTheme } 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 resolveToThemeColor,\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 theme = useTheme()\n const resolvedColor = resolveToThemeColor(color, theme)\n\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"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json';
|
|
2
2
|
import { Color } from '../../theme';
|
|
3
|
+
import { Theme } from '../ThemeProvider';
|
|
3
4
|
type Flatten<T, Prefix extends string = ''> = {
|
|
4
5
|
[K in keyof T & string]: T[K] extends Record<string, any> ? Flatten<T[K], `${Prefix}${K}.`> : `${Prefix}${K}`;
|
|
5
6
|
}[keyof T & string];
|
|
@@ -8,8 +9,7 @@ type Prettify<T> = {
|
|
|
8
9
|
} & {};
|
|
9
10
|
export type NewColor = Prettify<Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>>;
|
|
10
11
|
export type ColorTypes = Color | NewColor;
|
|
11
|
-
export declare const
|
|
12
|
-
export declare const resolveToThemeColor: (color: ColorTypes) => string;
|
|
12
|
+
export declare const resolveToThemeColor: (color: ColorTypes, theme: Theme) => string;
|
|
13
13
|
export declare const getColorPath: (color: ColorTypes) => "meta" | "onfido" | "rac" | "checkout" | "confused" | "intercom" | "premfina" | "ravelin" | "stripe" | "lollipop" | "marshmallowPink" | "bubblegum" | "fairyFloss" | "boba" | "liquorice" | "sesame" | "chia" | "custard" | "mascarpone" | "coconut" | "cream" | "spearmint" | "feijoa" | "blueberry" | "macaroon" | "pistachio" | "matcha" | "caramel" | "peanut" | "marzipan" | "oatmeal" | "satsuma" | "strawberry" | "watermelon" | "apple" | "mint" | "lemon" | "sherbert" | "tangerine" | "compareTheMarket" | "x" | "hometree" | "color.text.base" | "color.text.subtle" | "color.text.contrast" | "color.text.on-dark" | "color.text.nonEssential" | "color.icon.base" | "color.icon.subtle" | "color.icon.contrast" | "color.icon.on-dark" | "color.icon.nonEssential" | "color.border.base" | "color.border.subtle" | "color.border.contrast" | "color.interactive.primary.base" | "color.interactive.primary.active" | "color.interactive.primary.hover" | "color.interactive.primary.pressed" | "color.interactive.secondary.base" | "color.interactive.secondary.active" | "color.interactive.secondary.hover" | "color.interactive.secondary.pressed" | "color.interactive.tertiary.base" | "color.interactive.tertiary.active" | "color.interactive.tertiary.hover" | "color.interactive.tertiary.pressed" | "color.background.100" | "color.background.200" | "color.background.000" | "color.surface.base.400" | "color.surface.base.100" | "color.surface.base.200" | "color.surface.base.000" | "color.surface.base.300" | "color.surface.base.900" | "color.surface.brand.400" | "color.surface.brand.100" | "color.surface.brand.200" | "color.surface.brand.300" | "color.surface.brand.accent1" | "color.surface.brand.accent2" | "color.surface.brand.accent3" | "color.surface.brand.accent4" | "color.feedback.inactive.100" | "color.feedback.negative.100" | "color.feedback.negative.200" | "color.feedback.positive.100" | "color.feedback.positive.200" | "color.feedback.notice.100" | "color.feedback.notice.200" | "color.feedback.informative.100" | "color.feedback.informative.200" | "color.focus.onLight" | "color.focus.onDark" | "color.illustration.accent1.100" | "color.illustration.accent1.200" | "color.illustration.accent2.100" | "color.illustration.accent2.200" | "color.illustration.accent3.100" | "color.illustration.accent3.200" | "color.illustration.accent4.100" | "color.illustration.accent4.200" | "color.illustration.neutral.400" | "color.illustration.neutral.100" | "color.illustration.neutral.200" | "color.illustration.neutral.000" | "color.illustration.neutral.300" | "color.illustration.neutral.900" | "extended1.100" | "extended1.20" | "thirdParty.onfido" | "thirdParty.rac" | "thirdParty.checkout" | "thirdParty.facebook" | "thirdParty.intercom" | "thirdParty.premfina" | "thirdParty.ravelin" | "thirdParty.stripe" | "thirdParty.twitter" | "thirdParty.compareTheMarket" | "thirdParty.hometree" | "thirdParty.confusedCom";
|
|
14
14
|
export declare const formatDesignTokenColor: () => string;
|
|
15
15
|
export declare const legacyColorMap: Record<Color, NewColor>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json';
|
|
2
|
-
|
|
3
|
-
export const
|
|
4
|
-
return path.split('.').reduce((acc, key) => acc?.[key], designTokens);
|
|
5
|
-
};
|
|
6
|
-
export const resolveToThemeColor = (color) => {
|
|
2
|
+
import { getFromObject } from '../../utils/getFromObject';
|
|
3
|
+
export const resolveToThemeColor = (color, theme) => {
|
|
7
4
|
const colourPath = getColorPath(color);
|
|
8
|
-
return
|
|
5
|
+
return getFromObject({
|
|
6
|
+
obj: theme,
|
|
7
|
+
path: colourPath,
|
|
8
|
+
});
|
|
9
9
|
};
|
|
10
10
|
// a function that returns a flattened dot notation string path to access the color value
|
|
11
11
|
export const getColorPath = (color) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colourMap.js","sourceRoot":"","sources":["../../../src/ThemeProvider/utils/colourMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,uDAAuD,CAAA;
|
|
1
|
+
{"version":3,"file":"colourMap.js","sourceRoot":"","sources":["../../../src/ThemeProvider/utils/colourMap.ts"],"names":[],"mappings":"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","sourcesContent":["import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json'\nimport { Color } from '../../theme'\nimport { Theme } from '../ThemeProvider'\nimport { getFromObject } from '../../utils/getFromObject'\n\ntype Flatten<T, Prefix extends string = ''> = {\n [K in keyof T & string]: T[K] extends Record<string, any>\n ? Flatten<T[K], `${Prefix}${K}.`>\n : `${Prefix}${K}`\n}[keyof T & string]\n\ntype Prettify<T> = {\n [K in keyof T]: T[K]\n} & {}\n\nexport type NewColor = Prettify<\n Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>\n>\n\nexport type ColorTypes = Color | NewColor\n\nexport const resolveToThemeColor = (\n color: ColorTypes,\n theme: Theme,\n): string => {\n const colourPath = getColorPath(color)\n return getFromObject({\n obj: theme,\n path: colourPath,\n })\n}\n\n// a function that returns a flattened dot notation string path to access the color value\nexport const getColorPath = (color: ColorTypes) => {\n return color in legacyColorMap\n ? legacyColorMap[color as keyof typeof legacyColorMap]\n : color\n}\n\n// a function that returns the design token color paths as a comma-separated string\nexport const formatDesignTokenColor = (): string => {\n const { color, extended1, thirdParty } = designTokens\n const colors = { color, extended1, thirdParty }\n\n if (colors === null) {\n return ''\n }\n\n const result: string[] = []\n const destructureNestedObject = (obj: any, currentPath: string) => {\n for (const key in obj) {\n if (Object.prototype.hasOwnProperty.call(obj, key)) {\n const value = obj[key]\n const newPath = currentPath ? `${currentPath}.${key}` : key\n if (typeof value === 'object' && value !== null) {\n destructureNestedObject(value, newPath)\n } else {\n result.push(newPath)\n }\n }\n }\n }\n destructureNestedObject(colors, '')\n return result.join(', ')\n}\n\n// old colour name → new colour path // base token value\nexport const legacyColorMap: Record<Color, NewColor> = {\n fairyFloss: 'color.surface.brand.100', // palette.primary.040\n bubblegum: 'color.surface.brand.200', // palette.primary.060\n marshmallowPink: 'color.surface.brand.300', // palette.primary.100\n lollipop: 'color.surface.brand.400', // palatte.primary.120\n\n // Core Secondary\n chia: 'color.feedback.inactive.100', // palette.secondary.040\n sesame: 'color.text.subtle', // palette.secondary.060\n liquorice: 'color.text.base', // palette.secondary.100\n boba: 'color.text.contrast', // palette.secondary.120\n\n // Core Tertiary\n cream: `color.surface.base.000`, // palette.neutral.000\n coconut: 'color.surface.base.100', // palette.neutral.010\n mascarpone: 'color.surface.base.200', // palette.neutral.020\n custard: 'color.surface.base.300', // palette.neutral.040\n\n // Brand Secondary\n feijoa: 'color.illustration.accent1.100', // palette.brand1.060\n spearmint: 'color.illustration.accent1.200', // palette.brand1.100\n macaroon: 'color.illustration.accent2.100', // palette.brand2.060\n blueberry: 'color.illustration.accent2.200', // palette.brand2.100\n pistachio: 'color.illustration.accent3.200', // palette.brand3.100\n matcha: 'color.illustration.accent3.100', // palette.brand3.060\n caramel: 'color.illustration.accent4.200', // palette.brand4.100\n peanut: 'color.illustration.accent4.100', // palette.brand4.060\n marzipan: 'color.illustration.neutral.400', // palette.neutral.100\n oatmeal: 'color.illustration.neutral.300', // palette.neutral.060\n satsuma: 'extended1.20', // extended1.020\n\n // Traffic light\n watermelon: 'color.feedback.negative.100', // palette.negative.020\n strawberry: 'color.feedback.negative.200', // palette.negative.100\n apple: 'color.feedback.positive.200', // palette.positive.100\n mint: 'color.feedback.positive.100', // palette.positive.020\n lemon: 'color.feedback.notice.200', // palette.notice.100\n sherbert: 'color.feedback.notice.100', // palette.notice.020\n tangerine: 'extended1.100', // extended1.100\n\n // Third-party brand colours\n compareTheMarket: 'thirdParty.compareTheMarket',\n confused: 'thirdParty.confusedCom',\n onfido: 'thirdParty.onfido',\n x: 'thirdParty.twitter', // x rebrand not yet reflected in foundations\n premfina: 'thirdParty.premfina',\n checkout: 'thirdParty.checkout',\n meta: 'thirdParty.facebook', // Meta rebrand not yet reflected in foundations\n stripe: 'thirdParty.stripe',\n intercom: 'thirdParty.intercom',\n ravelin: 'thirdParty.ravelin',\n rac: 'thirdParty.rac',\n hometree: 'thirdParty.hometree',\n} as const\n"]}
|
package/dist/Toggle/Toggle.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { Color } from '../theme';
|
|
3
2
|
import { MarginProps } from '../utils/space';
|
|
3
|
+
import { ColorTypes } from '../ThemeProvider/utils/colourMap';
|
|
4
4
|
export type Props = {
|
|
5
5
|
/** unique ID */
|
|
6
6
|
id?: string;
|
|
@@ -9,6 +9,6 @@ export type Props = {
|
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
/** onToggle listener */
|
|
11
11
|
onToggle: () => void;
|
|
12
|
-
bgColor?:
|
|
12
|
+
bgColor?: ColorTypes;
|
|
13
13
|
} & MarginProps;
|
|
14
14
|
export declare const Toggle: FC<Props>;
|
package/dist/Toggle/Toggle.js
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import styled, { css } from 'styled-components';
|
|
2
|
+
import styled, { css, useTheme } from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
|
-
import { theme } from '../theme';
|
|
5
4
|
import { focusOutline } from '../utils/focusOutline';
|
|
5
|
+
import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
|
|
6
6
|
export const Toggle = ({ id, checked, onToggle, disabled, bgColor, ...marginProps }) => {
|
|
7
|
+
const theme = useTheme();
|
|
8
|
+
const resolvedBgColor = bgColor
|
|
9
|
+
? resolveToThemeColor(bgColor, theme)
|
|
10
|
+
: undefined;
|
|
7
11
|
return (React.createElement(Switch, { forwardedAs: "label", htmlFor: id, ...marginProps },
|
|
8
|
-
React.createElement(Checkbox, { id: id, disabled: disabled, type: "checkbox", checked: checked, onChange: onToggle, "$bgColor":
|
|
12
|
+
React.createElement(Checkbox, { id: id, disabled: disabled, type: "checkbox", checked: checked, onChange: onToggle, "$bgColor": resolvedBgColor, onKeyDown: (e) => {
|
|
9
13
|
if (e.key === 'Enter') {
|
|
10
14
|
onToggle();
|
|
11
15
|
}
|
|
@@ -31,7 +35,7 @@ const Slider = styled.span `
|
|
|
31
35
|
left: 0;
|
|
32
36
|
right: 0;
|
|
33
37
|
bottom: 0;
|
|
34
|
-
background-color: ${theme.
|
|
38
|
+
background-color: ${({ theme }) => theme.color.feedback.inactive[100]};
|
|
35
39
|
border: none;
|
|
36
40
|
border-radius: 28px;
|
|
37
41
|
transition: 0.2s background-color;
|
|
@@ -44,7 +48,7 @@ const Slider = styled.span `
|
|
|
44
48
|
width: 24px;
|
|
45
49
|
left: 4px;
|
|
46
50
|
bottom: 4px;
|
|
47
|
-
background-color: ${theme.
|
|
51
|
+
background-color: ${({ theme }) => theme.color.surface.base[100]};
|
|
48
52
|
transition: 0.2s transform;
|
|
49
53
|
border-radius: 50%;
|
|
50
54
|
}
|
|
@@ -55,7 +59,7 @@ const Slider = styled.span `
|
|
|
55
59
|
`
|
|
56
60
|
: css `
|
|
57
61
|
&:hover {
|
|
58
|
-
background-color: ${theme.
|
|
62
|
+
background-color: ${({ theme }) => theme.color.illustration.neutral[400]};
|
|
59
63
|
}
|
|
60
64
|
`}
|
|
61
65
|
`;
|
|
@@ -63,7 +67,7 @@ const Checkbox = styled.input `
|
|
|
63
67
|
${focusOutline({ selector: `&:focus-visible + ${Slider}` })}
|
|
64
68
|
|
|
65
69
|
&:checked + ${Slider} {
|
|
66
|
-
background-color: ${(
|
|
70
|
+
background-color: ${({ $bgColor, theme }) => $bgColor ? $bgColor : theme.color.feedback.positive[200]};
|
|
67
71
|
border: none;
|
|
68
72
|
}
|
|
69
73
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAazC,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,OAAO;QAC7B,CAAC,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC;QACrC,CAAC,CAAC,SAAS,CAAA;IAEb,OAAO,CACL,oBAAC,MAAM,IAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAE,EAAE,KAAM,WAAW;QACtD,oBAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,cACR,eAAe,EACzB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACtB,QAAQ,EAAE,CAAA;gBACZ,CAAC;YACH,CAAC,gBACU,QAAQ,GACnB;QACF,oBAAC,MAAM,iBAAY,QAAQ,GAAI,CACxB,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAyB;;;;;;;sBAO7B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;;;;;;;;;;wBAa/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;IAKhE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACP,CAAC,CAAC,GAAG,CAAA;;SAEF;IACH,CAAC,CAAC,GAAG,CAAA;;gCAEqB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAChC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC;;SAE1C;CACR,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAuB;IAChD,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,MAAM,EAAE,EAAE,CAAC;;gBAE7C,MAAM;wBACE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;gBAI9C,MAAM;;;CAGrB,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport {\n ColorTypes,\n resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type Props = {\n /** unique ID */\n id?: string\n /** checked flag */\n checked: boolean\n disabled?: boolean\n /** onToggle listener */\n onToggle: () => void\n bgColor?: ColorTypes\n} & MarginProps\n\nexport const Toggle: FC<Props> = ({\n id,\n checked,\n onToggle,\n disabled,\n bgColor,\n ...marginProps\n}) => {\n const theme = useTheme()\n\n const resolvedBgColor = bgColor\n ? resolveToThemeColor(bgColor, theme)\n : undefined\n\n return (\n <Switch forwardedAs=\"label\" htmlFor={id} {...marginProps}>\n <Checkbox\n id={id}\n disabled={disabled}\n type=\"checkbox\"\n checked={checked}\n onChange={onToggle}\n $bgColor={resolvedBgColor}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n onToggle()\n }\n }}\n aria-label=\"toggle\"\n />\n <Slider $disabled={disabled} />\n </Switch>\n )\n}\n\nconst Switch = styled(Box)`\n position: relative;\n display: inline-block;\n width: 56px;\n height: 32px;\n\n input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n`\n\nconst Slider = styled.span<{ $disabled?: boolean }>`\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${({ theme }) => theme.color.feedback.inactive[100]};\n border: none;\n border-radius: 28px;\n transition: 0.2s background-color;\n outline: none;\n\n &:before {\n position: absolute;\n content: '';\n height: 24px;\n width: 24px;\n left: 4px;\n bottom: 4px;\n background-color: ${({ theme }) => theme.color.surface.base[100]};\n transition: 0.2s transform;\n border-radius: 50%;\n }\n\n ${({ $disabled }) =>\n $disabled\n ? css`\n cursor: not-allowed;\n `\n : css`\n &:hover {\n background-color: ${({ theme }) =>\n theme.color.illustration.neutral[400]};\n }\n `}\n`\n\nconst Checkbox = styled.input<{ $bgColor?: string }>`\n ${focusOutline({ selector: `&:focus-visible + ${Slider}` })}\n\n &:checked + ${Slider} {\n background-color: ${({ $bgColor, theme }) =>\n $bgColor ? $bgColor : theme.color.feedback.positive[200]};\n border: none;\n }\n\n &:checked + ${Slider}:before {\n transform: translateX(24px);\n }\n`\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export const getFromObject = ({ obj, path, defaultValue }) => {
|
|
2
|
+
const normalize = (seg) => {
|
|
3
|
+
// remove surrounding single or double quotes from a segment
|
|
4
|
+
const regex = /^["'](.*)["']$/;
|
|
5
|
+
const match = regex.exec(seg);
|
|
6
|
+
return match ? match[1] : seg;
|
|
7
|
+
};
|
|
8
|
+
const resolvePath = (regexp) => String.prototype.split
|
|
9
|
+
.call(path, regexp)
|
|
10
|
+
.filter(Boolean)
|
|
11
|
+
.map(normalize)
|
|
12
|
+
.reduce((res, key) => (res != null ? res[key] : res), obj);
|
|
13
|
+
const result = resolvePath(/[,[\]]+?/) || resolvePath(/[,[\].]+?/);
|
|
14
|
+
return result === undefined || result === obj ? defaultValue : result;
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=getFromObject.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getFromObject.js","sourceRoot":"","sources":["../../src/utils/getFromObject.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,YAAY,EAAQ,EAAE,EAAE;IACjE,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE;QAChC,4DAA4D;QAC5D,MAAM,KAAK,GAAG,gBAAgB,CAAA;QAC9B,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAC7B,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IAC/B,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE,CACrC,MAAM,CAAC,SAAS,CAAC,KAAK;SACnB,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC;SAClB,MAAM,CAAC,OAAO,CAAC;SACf,GAAG,CAAC,SAAS,CAAC;SACd,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAA;IAE9D,MAAM,MAAM,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,WAAW,CAAC,WAAW,CAAC,CAAA;IAClE,OAAO,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAA;AACvE,CAAC,CAAA","sourcesContent":["interface Args {\n obj: any\n path: string\n defaultValue?: string | number\n}\n\nexport const getFromObject = ({ obj, path, defaultValue }: Args) => {\n const normalize = (seg: string) => {\n // remove surrounding single or double quotes from a segment\n const regex = /^[\"'](.*)[\"']$/\n const match = regex.exec(seg)\n return match ? match[1] : seg\n }\n\n const resolvePath = (regexp: RegExp) =>\n String.prototype.split\n .call(path, regexp)\n .filter(Boolean)\n .map(normalize)\n .reduce((res, key) => (res != null ? res[key] : res), obj)\n\n const result = resolvePath(/[,[\\]]+?/) || resolvePath(/[,[\\].]+?/)\n return result === undefined || result === obj ? defaultValue : result\n}\n"]}
|