@mrshmllw/smores-react 13.16.0 → 13.16.2
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/README.md +10 -8
- package/dist/Accordion/Accordion.js +2 -2
- package/dist/Accordion/Accordion.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="assets/smores-logo-dark.png">
|
|
4
|
+
<source media="(prefers-color-scheme: light)" srcset="assets/smores-logo-light.png">
|
|
5
|
+
<img alt="Project Logo" src="assets/smores-logo-light.png">
|
|
6
|
+
</picture></p>
|
|
5
7
|
<p align="center">
|
|
6
8
|
<a href="https://www.npmjs.com/package/@mrshmllw/smores-react">
|
|
7
|
-
<img alt="npm-version-badge" src="https://img.shields.io/npm/v/@mrshmllw/smores-react.svg?style=flat-square" /></a>
|
|
9
|
+
<img alt="npm-version-badge" src="https://img.shields.io/npm/v/@mrshmllw/smores-react.svg?style=flat-square&logo=nodedotjs" /></a>
|
|
8
10
|
<a href="https://github.com/marshmallow-insurance/smores-react/blob/master/LICENSE">
|
|
9
|
-
<img alt="licence-badge" src="https://img.shields.io/github/license/marshmallow-insurance/smores-react.svg?style=flat-square" /></a>
|
|
10
|
-
<a href="https://snyk.io
|
|
11
|
-
<img alt="snyk-badge" src="https://
|
|
11
|
+
<img alt="licence-badge" src="https://img.shields.io/github/license/marshmallow-insurance/smores-react.svg?style=flat-square&logo=ReadMe" /></a>
|
|
12
|
+
<a href="https://snyk.io/test/github/marshmallow-insurance/smores-react?targetFile=package.json">
|
|
13
|
+
<img alt="snyk-badge" src="https://snyk.io/test/github/marshmallow-insurance/smores-react/badge.svg?targetFile=package.json&style=flat-square" /></a>
|
|
12
14
|
<a href="https://prettier.io/">
|
|
13
|
-
<img alt="prettier-badge" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" /></a>
|
|
15
|
+
<img alt="prettier-badge" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square&logo=prettier" /></a>
|
|
14
16
|
</p>
|
|
15
17
|
|
|
16
18
|
# Smores React
|
|
@@ -18,8 +18,8 @@ export const Accordion = ({ title, children, onToggle, filledBackground, default
|
|
|
18
18
|
return (React.createElement(Wrapper, { "$borderTop": borderTop, "$fullBorder": fullBorder, "$filledBackground": filledBackground, "$borderColor": resolvedBorderColor, "$backgroundColor": resolvedBackgroundColour, ...marginProps },
|
|
19
19
|
React.createElement(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: handleToggle, py: "16px", pr: "16px", pl: px },
|
|
20
20
|
React.createElement(TitleContainer, null,
|
|
21
|
-
React.createElement(Text, { tag: "h2", typo: "headline-regular"
|
|
22
|
-
subTitle && (React.createElement(Text, { tag: "label",
|
|
21
|
+
React.createElement(Text, { tag: "h2", typo: "headline-regular" }, title),
|
|
22
|
+
subTitle && (React.createElement(Text, { tag: "label", typo: "label", mt: { custom: 4 } }, subTitle))),
|
|
23
23
|
React.createElement(CaretIcon, { render: "caret", size: 24, color: "marzipan", "$isOpen": isOpen, "$borderTop": borderTop })),
|
|
24
24
|
isOpen && (React.createElement(Box, { pt: "12px", pb: "16px", px: px }, children))));
|
|
25
25
|
};
|
|
@@ -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,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAY,mBAAmB,EAAE,MAAM,kCAAkC,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,oBAAC,OAAO,kBACM,SAAS,iBACR,UAAU,uBACJ,gBAAgB,kBACrB,mBAAmB,sBACf,wBAAwB,KACtC,WAAW;QAEf,oBAAC,YAAY,IACX,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,eAAe,EAC9B,OAAO,EAAE,YAAY,EACrB,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,EACT,EAAE,EAAE,EAAE;YAEN,oBAAC,cAAc;gBACb,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,kBAAkB,
|
|
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\">\n {title}\n </Text>\n {subTitle && (\n <Text tag=\"label\" 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"]}
|