@mrshmllw/smores-react 15.1.2 → 15.1.3
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.
|
@@ -18,7 +18,7 @@ export const Accordion = ({ title, children, onToggle, filledBackground, default
|
|
|
18
18
|
onToggle?.(nextOpenState);
|
|
19
19
|
setIsOpen(nextOpenState);
|
|
20
20
|
};
|
|
21
|
-
return (_jsxs(Wrapper, { "$borderTop": borderTop, "$fullBorder": fullBorder, "$filledBackground": filledBackground, "$borderColor": resolvedBorderColor, "$backgroundColor": resolvedBackgroundColour, ...marginProps, children: [_jsxs(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: handleToggle, py: "
|
|
21
|
+
return (_jsxs(Wrapper, { "$borderTop": borderTop, "$fullBorder": fullBorder, "$filledBackground": filledBackground, "$borderColor": resolvedBorderColor, "$backgroundColor": resolvedBackgroundColour, ...marginProps, children: [_jsxs(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: handleToggle, py: "space.200", pr: "space.200", pl: px, children: [_jsxs(TitleContainer, { children: [_jsx(Text, { tag: "h2", typo: "headline-regular", children: title }), subTitle && (_jsx(Text, { tag: "label", typo: "label", mt: "space.050", children: subTitle }))] }), _jsx(CaretIcon, { "$size": 20, "$isOpen": isOpen, "$borderTop": borderTop, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, color: theme.color.illustration.neutral[400] }) })] }), isOpen && (_jsx(Box, { pt: "space.150", pb: "space.200", px: px, children: children }))] }));
|
|
22
22
|
};
|
|
23
23
|
const Wrapper = styled(Box)(({ $borderTop, $fullBorder, $filledBackground, $borderColor, $backgroundColor, }) => css `
|
|
24
24
|
border-bottom: 1px solid ${$borderColor};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAY,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAA;AA4BhF,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAC5C,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,aAAa,GAAG,KAAK,EACrB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,gCAAgC,EAC9C,eAAe,GAAG,wBAAwB,EAC1C,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IACnD,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAA;IAEpC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;IAEnE,MAAM,wBAAwB,GAAG,mBAAmB,CAAC,eAAe,EAAE,KAAK,CAAC,CAAA;IAE5E,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,aAAa,GAAG,CAAC,MAAM,CAAA;QAC7B,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAA;QACzB,SAAS,CAAC,aAAa,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,OAAO,CACL,MAAC,OAAO,kBACM,SAAS,iBACR,UAAU,uBACJ,gBAAgB,kBACrB,mBAAmB,sBACf,wBAAwB,KACtC,WAAW,aAEf,MAAC,YAAY,IACX,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,OAAO,EAAE,YAAY,EACrB,EAAE,EAAC,
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { MarginProps } from '../utils/space'\nimport { NewColor, resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\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=\"space.200\"\n pr=\"space.200\"\n pl={px}\n >\n <TitleContainer>\n <Text tag=\"h2\" typo=\"headline-regular\">\n {title}\n </Text>\n {subTitle && (\n <Text tag=\"label\" typo=\"label\" mt=\"space.050\">\n {subTitle}\n </Text>\n )}\n </TitleContainer>\n\n <CaretIcon $size={20} $isOpen={isOpen} $borderTop={borderTop}>\n <FontAwesomeIcon\n icon={faChevronDown}\n color={theme.color.illustration.neutral[400]}\n />\n </CaretIcon>\n </TopContainer>\n {isOpen && (\n <Box pt=\"space.150\" pb=\"space.200\" 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,\n $backgroundColor,\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(IconContainer)<\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "15.1.
|
|
3
|
+
"version": "15.1.3",
|
|
4
4
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -63,11 +63,11 @@
|
|
|
63
63
|
"@commitlint/cli": "^20.4.2",
|
|
64
64
|
"@mrshmllw/campfire": "^3.0.2",
|
|
65
65
|
"@snyk/protect": "^1.1302.1",
|
|
66
|
-
"@storybook/addon-a11y": "^10.2.
|
|
66
|
+
"@storybook/addon-a11y": "^10.2.12",
|
|
67
67
|
"@storybook/addon-coverage": "^3.0.0",
|
|
68
|
-
"@storybook/addon-docs": "^10.2.
|
|
69
|
-
"@storybook/addon-links": "^10.2.
|
|
70
|
-
"@storybook/react-vite": "^10.2.
|
|
68
|
+
"@storybook/addon-docs": "^10.2.12",
|
|
69
|
+
"@storybook/addon-links": "^10.2.12",
|
|
70
|
+
"@storybook/react-vite": "^10.2.12",
|
|
71
71
|
"@storybook/test-runner": "^0.24.2",
|
|
72
72
|
"@testing-library/jest-dom": "^6.9.1",
|
|
73
73
|
"@testing-library/react": "^16.3.2",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"eslint-plugin-prettier": "^5.5.5",
|
|
84
84
|
"eslint-plugin-react": "^7.37.5",
|
|
85
85
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
86
|
-
"eslint-plugin-storybook": "^10.2.
|
|
86
|
+
"eslint-plugin-storybook": "^10.2.12",
|
|
87
87
|
"husky": "^9.1.7",
|
|
88
88
|
"jest-styled-components": "^7.2.0",
|
|
89
89
|
"jsdom": "^28.1.0",
|