@mrshmllw/smores-react 11.1.0-crumbs-feature-support-rounded-sub-tables.3 → 12.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 +2 -2
- package/dist/Banner/BannerItem.js.map +1 -1
- package/dist/CheckBox/CheckBox.js +1 -1
- package/dist/CheckBox/CheckBox.js.map +1 -1
- package/dist/Pagination/Pagination.js +3 -3
- package/dist/Pagination/Pagination.js.map +1 -1
- package/dist/Row/Row.js +2 -2
- package/dist/Row/Row.js.map +1 -1
- package/dist/Snackbar/SnackbarItem.js +5 -5
- package/dist/Snackbar/SnackbarItem.js.map +1 -1
- package/dist/Text/Text.d.ts +1 -5
- package/dist/Text/Text.js +2 -132
- package/dist/Text/Text.js.map +1 -1
- package/dist/Tooltip/Tooltip.d.ts +1 -1
- package/dist/Tooltip/Tooltip.js +3 -3
- package/dist/Tooltip/Tooltip.js.map +1 -1
- package/package.json +16 -16
|
@@ -45,10 +45,10 @@ export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, ex
|
|
|
45
45
|
leadingIcon && (React.createElement(Icon, { mr: "12px", render: leadingIcon, size: 24, color: iconColor })),
|
|
46
46
|
React.createElement(Text, { typo: "headline-small", color: textColor }, message)),
|
|
47
47
|
React.createElement(Box, { flex: true, alignItems: "center" },
|
|
48
|
-
canManuallyClose && (React.createElement(GenericButton, { onClick: () => deleteBanner(id), "aria-label": `close banner ${message}` }, showCloseIcon ? (React.createElement(Icon, { render: "cross", size: 16, color: iconColor })) : (React.createElement(UnderlinedText, { tag: "span", typo: "
|
|
48
|
+
canManuallyClose && (React.createElement(GenericButton, { onClick: () => deleteBanner(id), "aria-label": `close banner ${message}` }, showCloseIcon ? (React.createElement(Icon, { render: "cross", size: 16, color: iconColor })) : (React.createElement(UnderlinedText, { tag: "span", typo: "headline-small", color: textColor }, "Dismiss")))),
|
|
49
49
|
exploreAction && (React.createElement(GenericButton, { onClick: exploreAction, "aria-label": `cta ${message}` },
|
|
50
50
|
React.createElement(Box, { flex: true, alignItems: "center" },
|
|
51
|
-
showExploreText && (React.createElement(UnderlinedText, { ml: "12px", tag: "span", typo: "
|
|
51
|
+
showExploreText && (React.createElement(UnderlinedText, { ml: "12px", tag: "span", typo: "headline-small", color: textColor }, "Explore")),
|
|
52
52
|
showExploreIcon && (React.createElement(Icon, { render: "arrow", ml: "12px", size: 24, color: iconColor, rotate: 180 }))))))));
|
|
53
53
|
};
|
|
54
54
|
const BannerWrapper = styled(Box)(({ $type }) => css `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,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;AACrC,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAWvC,MAAM,MAAM,GAAmC;IAC7C,MAAM,EAAE;QACN,SAAS,EAAE,WAAW;QACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe;QAC7C,SAAS,EAAE,WAAW;KACvB;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,OAAO;QAClB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;QACxC,SAAS,EAAE,OAAO;KACnB;IACD,OAAO,EAAE;QACP,SAAS,EAAE,OAAO;QAClB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS;QACvC,SAAS,EAAE,OAAO;KACnB;IACD,OAAO,EAAE;QACP,SAAS,EAAE,OAAO;QAClB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACnC,SAAS,EAAE,OAAO;KACnB;CACF,CAAA;AAMD,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,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,oBAAC,aAAa,IACZ,CAAC,EAAC,MAAM,EACR,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EACzB,GAAG,EAAE,EAAE,EACP,IAAI,QACJ,cAAc,EAAC,eAAe,WACvB,IAAI;QAEX,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;YAC1B,WAAW,IAAI,CACd,oBAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,GAAI,CACpE;YACD,oBAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,SAAS,IACzC,OAAO,CACH,CACH;QACN,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;YAC1B,gBAAgB,IAAI,CACnB,oBAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,gBACnB,gBAAgB,OAAO,EAAE,IAEpC,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,GAAI,CACpD,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"BannerItem.js","sourceRoot":"","sources":["../../src/Banner/BannerItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { useTimeout } from '../hooks'\nimport { Color, theme } from '../theme'\nimport { Banner } from './types'\n\ntype StylesItem = {\n iconColor: Color\n backgroundColor: string\n textColor: Color\n}\n\ntype BannerType = 'upsell' | 'critical' | 'general' | 'success'\n\nconst styles: Record<BannerType, StylesItem> = {\n upsell: {\n iconColor: 'liquorice',\n backgroundColor: theme.colors.marshmallowPink,\n textColor: 'liquorice',\n },\n critical: {\n iconColor: 'cream',\n backgroundColor: theme.colors.strawberry,\n textColor: 'cream',\n },\n general: {\n iconColor: 'cream',\n backgroundColor: theme.colors.liquorice,\n textColor: 'cream',\n },\n success: {\n iconColor: 'cream',\n backgroundColor: theme.colors.apple,\n textColor: 'cream',\n },\n}\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 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 $type={type}\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)<TransientProps<Pick<Banner, 'type'>>>(\n ({ $type }) => css`\n border-radius: 0px 0px 16px 16px;\n background-color: ${styles[$type].backgroundColor};\n `,\n)\n\nconst GenericButton = styled.button`\n cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n text-decoration: underline;\n`\n"]}
|
|
@@ -8,7 +8,7 @@ export const CheckBox = forwardRef(function CheckBox({ id: idProp, checked, chil
|
|
|
8
8
|
const id = useUniqueId(idProp);
|
|
9
9
|
return (React.createElement(React.Fragment, null,
|
|
10
10
|
React.createElement(BoxContainer, { id: id },
|
|
11
|
-
React.createElement(Text, { tag: "span", typo: "
|
|
11
|
+
React.createElement(Text, { tag: "span", typo: "body-regular", color: error ? 'strawberry' : 'liquorice' }, children),
|
|
12
12
|
React.createElement("input", { ref: ref, type: "checkbox", checked: checked, onChange: toggle }),
|
|
13
13
|
React.createElement(Checkmark, { "$error": error })),
|
|
14
14
|
error && errorMsg && React.createElement(ErrorBox, null, errorMsg)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAWzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC1D,GAAG;IAEH,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL;QACE,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAE;YAClB,oBAAC,IAAI,IACH,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,
|
|
1
|
+
{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAWzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC1D,GAAG;IAEH,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL;QACE,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAE;YAClB,oBAAC,IAAI,IACH,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,IAExC,QAAQ,CACJ;YAEP,+BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,GAChB;YACF,oBAAC,SAAS,cAAS,KAAK,GAAI,CACf;QACd,KAAK,IAAI,QAAQ,IAAI,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CACpD,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAsB;;;;;YAKvC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACvB,MAAM;IACJ,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE;IACxC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;;;;;;;;;;;;;wBAarB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;;;;wBAelB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;CAKzC,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;;wBAYT,KAAK,CAAC,MAAM,CAAC,KAAK;;kBAExB,SAAS;0BACD,KAAK,CAAC,MAAM,CAAC,SAAS;0BACtB,KAAK,CAAC,MAAM,CAAC,SAAS;;;kBAG9B,SAAS;;;;kBAIT,SAAS;;;;MAIrB,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,SAAS,EAAE,EAAE,CAAC;;;;MAI5D,SAAS;0BACW,KAAK,CAAC,MAAM,CAAC,OAAO;0BACpB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;;;;;CAW/C,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;WAGjB,KAAK,CAAC,MAAM,CAAC,UAAU;CACjC,CAAA","sourcesContent":["import React, { forwardRef, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { focusOutline } from '../utils/focusOutline'\n\nimport { Text } from '../Text'\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\n\nexport type CheckBoxProps = {\n id?: string\n checked: boolean\n children: ReactNode\n toggle: () => void\n error?: boolean\n errorMsg?: string\n}\n\nexport const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(\n function CheckBox(\n { id: idProp, checked, children, toggle, error, errorMsg },\n ref,\n ) {\n const id = useUniqueId(idProp)\n return (\n <>\n <BoxContainer id={id}>\n <Text\n tag=\"span\"\n typo=\"body-regular\"\n color={error ? 'strawberry' : 'liquorice'}\n >\n {children}\n </Text>\n\n <input\n ref={ref}\n type=\"checkbox\"\n checked={checked}\n onChange={toggle}\n />\n <Checkmark $error={error} />\n </BoxContainer>\n {error && errorMsg && <ErrorBox>{errorMsg}</ErrorBox>}\n </>\n )\n },\n)\n\nconst Checkmark = styled.span<{ $error?: boolean }>`\n position: absolute;\n left: 0;\n width: 24px;\n height: 24px;\n border: ${({ $error }) =>\n $error\n ? `solid 2px ${theme.colors.strawberry}`\n : `solid 2px ${theme.colors.liquorice}`};\n box-sizing: border-box;\n border-radius: 1px;\n\n &:before {\n content: '';\n position: absolute;\n display: none;\n top: 9px;\n left: 5px;\n width: 3px;\n height: 8px;\n border-radius: 4px;\n background-color: ${theme.colors.cream};\n -webkit-transform: rotate(316deg);\n -ms-transform: rotate(316deg);\n transform: rotate(316deg);\n }\n\n &:after {\n content: '';\n position: absolute;\n display: none;\n top: 3px;\n left: 11px;\n width: 3px;\n height: 15px;\n border-radius: 4px;\n background-color: ${theme.colors.cream};\n -webkit-transform: rotate(43deg);\n -ms-transform: rotate(43deg);\n transform: rotate(43deg);\n }\n`\n\nconst BoxContainer = styled.label`\n position: relative;\n display: flex;\n align-items: flex-start;\n padding-left: 32px;\n user-select: none;\n cursor: pointer;\n\n input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n background-color: ${theme.colors.cream};\n\n &:checked ~ ${Checkmark} {\n background-color: ${theme.colors.liquorice};\n border: solid 2px ${theme.colors.liquorice};\n }\n\n &:checked ~ ${Checkmark}:before {\n display: block;\n }\n\n &:checked ~ ${Checkmark}:after {\n display: block;\n }\n\n ${focusOutline({ selector: `&:focus-visible ~ ${Checkmark}` })}\n }\n\n &:hover {\n ${Checkmark} {\n background-color: ${theme.colors.coconut};\n border: solid 2px ${theme.colors.liquorice};\n }\n }\n\n @media (min-width: 768px) {\n padding-left: 32px;\n }\n\n span {\n border-radius: 6px;\n }\n`\n\nconst ErrorBox = styled.span`\n padding-top: 8px;\n font-size: 12px;\n color: ${theme.colors.strawberry};\n`\n"]}
|
|
@@ -75,7 +75,7 @@ export const Pagination = ({ total, partition, handlePageChange, currentPage, ..
|
|
|
75
75
|
} },
|
|
76
76
|
React.createElement(Icon, { size: 18, render: "arrow" }))),
|
|
77
77
|
React.createElement(PageBox, { "$active": activePage === 1, onClick: () => movePage(1) },
|
|
78
|
-
React.createElement(Text, { typo: activePage === 1 ? '
|
|
78
|
+
React.createElement(Text, { typo: activePage === 1 ? 'headline-small' : 'body-regular', tag: "p" }, "1")),
|
|
79
79
|
showFirstDots && (React.createElement(PageBox, null,
|
|
80
80
|
React.createElement(Text, { tag: "p" }, "..."))),
|
|
81
81
|
shownPages.map((i) => {
|
|
@@ -84,7 +84,7 @@ export const Pagination = ({ total, partition, handlePageChange, currentPage, ..
|
|
|
84
84
|
movePage(i);
|
|
85
85
|
}
|
|
86
86
|
} },
|
|
87
|
-
React.createElement(Text, { typo: activePage === i ? '
|
|
87
|
+
React.createElement(Text, { typo: activePage === i ? 'headline-small' : 'body-regular', tag: "p" }, i)));
|
|
88
88
|
}),
|
|
89
89
|
showLastDots && (React.createElement(PageBox, null,
|
|
90
90
|
React.createElement(Text, { tag: "p" }, "..."))),
|
|
@@ -93,7 +93,7 @@ export const Pagination = ({ total, partition, handlePageChange, currentPage, ..
|
|
|
93
93
|
movePage(lastPage);
|
|
94
94
|
}
|
|
95
95
|
} },
|
|
96
|
-
React.createElement(Text, { typo: activePage === lastPage ? '
|
|
96
|
+
React.createElement(Text, { typo: activePage === lastPage ? 'headline-small' : 'body-regular', tag: "p" }, lastPage))),
|
|
97
97
|
activePage + 1 <= lastPage && (React.createElement(IconBox, { "aria-label": "next-page", onClick: () => movePage(activePage + 1), onKeyDown: (e) => {
|
|
98
98
|
if (e.key === 'Enter') {
|
|
99
99
|
movePage(activePage + 1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\n\nimport { theme } from '../theme'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nconst MAX_PAGES = 7\nconst MAX_ADDITIONAL_PAGES = Math.ceil(MAX_PAGES / 2)\n\nexport type PaginationProps = {\n /** Total number of records */\n total: number\n /** Number of records per page */\n partition: number\n /** Handle page change */\n handlePageChange: (page: number) => void\n /** Sets current page number */\n currentPage?: number\n} & MarginProps\n\nexport const Pagination: FC<PaginationProps> = ({\n total,\n partition,\n handlePageChange,\n currentPage,\n ...marginProps\n}) => {\n const [lastPage, setLastPage] = useState(0)\n const [activePage, setActivePage] = useState(1)\n const [pages, setPages] = useState<number[]>([])\n const [shownPages, setShownPages] = useState<number[]>([])\n const [showFirstDots, setShowFirstDots] = useState(false)\n const [showLastDots, setShowLastDots] = useState(false)\n\n useEffect(() => {\n // This is a rather hacky fix, in theory it should be listening to total, but because the total comes from the same endpoint as the data, it forces a reset to 1 every time\n // Using lastPage seems to bypass that\n if (currentPage) {\n setActivePage(currentPage)\n } else {\n setActivePage(1)\n }\n }, [lastPage, currentPage])\n\n useEffect(() => {\n const numberOfPages = Math.ceil(total / partition)\n if (numberOfPages > 1) {\n setLastPage(numberOfPages)\n } else if (numberOfPages === 1) {\n // Sets last page to be null to avoid the last page being kept from previous state.\n setLastPage(0)\n }\n if (numberOfPages > 2) {\n const allPages = Array.from({ length: numberOfPages }, (_, i) => i + 1)\n setPages(allPages.slice(1, numberOfPages - 1))\n } else {\n // Sets pages to empty to avoid using the previous state if pages set before.\n setPages([])\n }\n }, [total, partition])\n\n useEffect(() => {\n if (lastPage <= MAX_PAGES) {\n setShownPages(pages)\n } else if (activePage <= MAX_ADDITIONAL_PAGES) {\n setShownPages(pages.slice(0, MAX_ADDITIONAL_PAGES))\n } else if (activePage > lastPage - MAX_ADDITIONAL_PAGES) {\n setShownPages(pages.slice(pages.length - MAX_ADDITIONAL_PAGES))\n } else {\n const activePageIndex = pages.indexOf(activePage)\n setShownPages(pages.slice(activePageIndex - 1, activePageIndex + 2))\n }\n }, [lastPage, activePage, pages])\n\n useEffect(() => {\n setShowFirstDots(shownPages[0] !== pages[0])\n setShowLastDots(\n shownPages[shownPages.length - 1] !== pages[pages.length - 1],\n )\n }, [shownPages, pages])\n\n const movePage = (page: number) => {\n if (page > 0 && page <= lastPage) {\n setActivePage(page)\n handlePageChange(page)\n }\n }\n\n return (\n <Container flex direction=\"row\" {...marginProps}>\n {activePage - 1 > 0 && (\n <IconBox\n aria-label=\"previous-page\"\n onClick={() => movePage(activePage - 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(activePage - 1)\n }\n }}\n >\n <Icon size={18} render=\"arrow\" />\n </IconBox>\n )}\n <PageBox $active={activePage === 1} onClick={() => movePage(1)}>\n <Text typo={activePage === 1 ? 'desc-medium' : 'desc-light'} tag=\"p\">\n 1\n </Text>\n </PageBox>\n {showFirstDots && (\n <PageBox>\n <Text tag=\"p\">...</Text>\n </PageBox>\n )}\n {shownPages.map((i) => {\n return (\n <PageBox\n $active={activePage === i}\n key={i}\n onClick={() => movePage(i)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(i)\n }\n }}\n >\n <Text\n typo={activePage === i ? 'desc-medium' : 'desc-light'}\n tag=\"p\"\n >\n {i}\n </Text>\n </PageBox>\n )\n })}\n {showLastDots && (\n <PageBox>\n <Text tag=\"p\">...</Text>\n </PageBox>\n )}\n {Boolean(lastPage) && (\n <PageBox\n $active={activePage === lastPage}\n onClick={() => movePage(lastPage)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(lastPage)\n }\n }}\n >\n <Text\n typo={activePage === lastPage ? 'desc-medium' : 'desc-light'}\n tag=\"p\"\n >\n {lastPage}\n </Text>\n </PageBox>\n )}\n {activePage + 1 <= lastPage && (\n <IconBox\n aria-label=\"next-page\"\n onClick={() => movePage(activePage + 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(activePage + 1)\n }\n }}\n >\n <Icon size={18} render=\"arrow\" rotate={180} />\n </IconBox>\n )}\n </Container>\n )\n}\n\ninterface IPageBox {\n $active?: boolean\n}\n\nconst Container = styled(Box)`\n align-items: center;\n > button {\n margin-right: 4px;\n\n &:last-child {\n margin-right: 0;\n }\n }\n`\n\nconst PageBox = styled.button<IPageBox>`\n background: ${({ $active }) =>\n $active ? theme.colors.custard : theme.colors.cream};\n cursor: pointer;\n display: flex;\n justify-content: center;\n border-radius: 24px;\n width: fit-content;\n padding: 0px 4px;\n height: 24px;\n min-width: 24px;\n\n &:hover {\n background-color: ${theme.colors.mascarpone};\n }\n &:active {\n background-color: ${theme.colors.custard};\n }\n\n ${focusOutlineStyle}\n`\n\nconst IconBox = styled.button<IPageBox>`\n cursor: pointer;\n\n ${focusOutlineStyle}\n`\n"]}
|
|
1
|
+
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\n\nimport { theme } from '../theme'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nconst MAX_PAGES = 7\nconst MAX_ADDITIONAL_PAGES = Math.ceil(MAX_PAGES / 2)\n\nexport type PaginationProps = {\n /** Total number of records */\n total: number\n /** Number of records per page */\n partition: number\n /** Handle page change */\n handlePageChange: (page: number) => void\n /** Sets current page number */\n currentPage?: number\n} & MarginProps\n\nexport const Pagination: FC<PaginationProps> = ({\n total,\n partition,\n handlePageChange,\n currentPage,\n ...marginProps\n}) => {\n const [lastPage, setLastPage] = useState(0)\n const [activePage, setActivePage] = useState(1)\n const [pages, setPages] = useState<number[]>([])\n const [shownPages, setShownPages] = useState<number[]>([])\n const [showFirstDots, setShowFirstDots] = useState(false)\n const [showLastDots, setShowLastDots] = useState(false)\n\n useEffect(() => {\n // This is a rather hacky fix, in theory it should be listening to total, but because the total comes from the same endpoint as the data, it forces a reset to 1 every time\n // Using lastPage seems to bypass that\n if (currentPage) {\n setActivePage(currentPage)\n } else {\n setActivePage(1)\n }\n }, [lastPage, currentPage])\n\n useEffect(() => {\n const numberOfPages = Math.ceil(total / partition)\n if (numberOfPages > 1) {\n setLastPage(numberOfPages)\n } else if (numberOfPages === 1) {\n // Sets last page to be null to avoid the last page being kept from previous state.\n setLastPage(0)\n }\n if (numberOfPages > 2) {\n const allPages = Array.from({ length: numberOfPages }, (_, i) => i + 1)\n setPages(allPages.slice(1, numberOfPages - 1))\n } else {\n // Sets pages to empty to avoid using the previous state if pages set before.\n setPages([])\n }\n }, [total, partition])\n\n useEffect(() => {\n if (lastPage <= MAX_PAGES) {\n setShownPages(pages)\n } else if (activePage <= MAX_ADDITIONAL_PAGES) {\n setShownPages(pages.slice(0, MAX_ADDITIONAL_PAGES))\n } else if (activePage > lastPage - MAX_ADDITIONAL_PAGES) {\n setShownPages(pages.slice(pages.length - MAX_ADDITIONAL_PAGES))\n } else {\n const activePageIndex = pages.indexOf(activePage)\n setShownPages(pages.slice(activePageIndex - 1, activePageIndex + 2))\n }\n }, [lastPage, activePage, pages])\n\n useEffect(() => {\n setShowFirstDots(shownPages[0] !== pages[0])\n setShowLastDots(\n shownPages[shownPages.length - 1] !== pages[pages.length - 1],\n )\n }, [shownPages, pages])\n\n const movePage = (page: number) => {\n if (page > 0 && page <= lastPage) {\n setActivePage(page)\n handlePageChange(page)\n }\n }\n\n return (\n <Container flex direction=\"row\" {...marginProps}>\n {activePage - 1 > 0 && (\n <IconBox\n aria-label=\"previous-page\"\n onClick={() => movePage(activePage - 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(activePage - 1)\n }\n }}\n >\n <Icon size={18} render=\"arrow\" />\n </IconBox>\n )}\n <PageBox $active={activePage === 1} onClick={() => movePage(1)}>\n <Text\n typo={activePage === 1 ? 'headline-small' : 'body-regular'}\n tag=\"p\"\n >\n 1\n </Text>\n </PageBox>\n {showFirstDots && (\n <PageBox>\n <Text tag=\"p\">...</Text>\n </PageBox>\n )}\n {shownPages.map((i) => {\n return (\n <PageBox\n $active={activePage === i}\n key={i}\n onClick={() => movePage(i)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(i)\n }\n }}\n >\n <Text\n typo={activePage === i ? 'headline-small' : 'body-regular'}\n tag=\"p\"\n >\n {i}\n </Text>\n </PageBox>\n )\n })}\n {showLastDots && (\n <PageBox>\n <Text tag=\"p\">...</Text>\n </PageBox>\n )}\n {Boolean(lastPage) && (\n <PageBox\n $active={activePage === lastPage}\n onClick={() => movePage(lastPage)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(lastPage)\n }\n }}\n >\n <Text\n typo={activePage === lastPage ? 'headline-small' : 'body-regular'}\n tag=\"p\"\n >\n {lastPage}\n </Text>\n </PageBox>\n )}\n {activePage + 1 <= lastPage && (\n <IconBox\n aria-label=\"next-page\"\n onClick={() => movePage(activePage + 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(activePage + 1)\n }\n }}\n >\n <Icon size={18} render=\"arrow\" rotate={180} />\n </IconBox>\n )}\n </Container>\n )\n}\n\ninterface IPageBox {\n $active?: boolean\n}\n\nconst Container = styled(Box)`\n align-items: center;\n > button {\n margin-right: 4px;\n\n &:last-child {\n margin-right: 0;\n }\n }\n`\n\nconst PageBox = styled.button<IPageBox>`\n background: ${({ $active }) =>\n $active ? theme.colors.custard : theme.colors.cream};\n cursor: pointer;\n display: flex;\n justify-content: center;\n border-radius: 24px;\n width: fit-content;\n padding: 0px 4px;\n height: 24px;\n min-width: 24px;\n\n &:hover {\n background-color: ${theme.colors.mascarpone};\n }\n &:active {\n background-color: ${theme.colors.custard};\n }\n\n ${focusOutlineStyle}\n`\n\nconst IconBox = styled.button<IPageBox>`\n cursor: pointer;\n\n ${focusOutlineStyle}\n`\n"]}
|
package/dist/Row/Row.js
CHANGED
|
@@ -9,8 +9,8 @@ export const Row = ({ iconLeft, iconLeftColor = 'liquorice', iconRight, iconRigh
|
|
|
9
9
|
return (React.createElement(Container, { "$type": type, "$iconLeft": iconLeft, "$borderTop": borderTop, "$borderBottom": borderBottom, "$iconRight": iconRight, onClick: handleClick, "$boldHeading": boldHeading, ...marginProps },
|
|
10
10
|
iconLeft && (React.createElement(Icon, { render: iconLeft, size: windowWidth > 768 ? 24 : 18, color: iconLeftColor })),
|
|
11
11
|
React.createElement(Box, null,
|
|
12
|
-
React.createElement(Text, { tag: "h1", typo: "
|
|
13
|
-
React.createElement(Text, { tag: "p", typo: "
|
|
12
|
+
React.createElement(Text, { tag: "h1", typo: "body-regular" }, heading),
|
|
13
|
+
React.createElement(Text, { tag: "p", typo: "body-small", color: "sesame" }, subHeading)),
|
|
14
14
|
iconRight && (React.createElement(Icon, { className: "iconRight", render: iconRight, size: 24, rotate: iconRight === 'caret' ? -90 : 0, color: iconRightColor }))));
|
|
15
15
|
};
|
|
16
16
|
const Container = styled(Box)(({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading }) => css `
|
package/dist/Row/Row.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Row/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAiBvC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,QAAQ,EACR,aAAa,GAAG,WAAW,EAC3B,SAAS,EACT,cAAc,GAAG,UAAU,EAC3B,WAAW,EACX,OAAO,EACP,UAAU,EACV,IAAI,EACJ,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,EACX,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAEhC,OAAO,CACL,oBAAC,SAAS,aACD,IAAI,eACA,QAAQ,gBACP,SAAS,mBACN,YAAY,gBACf,SAAS,EACrB,OAAO,EAAE,WAAW,kBACN,WAAW,KACrB,WAAW;QAEd,QAAQ,IAAI,CACX,oBAAC,IAAI,IACH,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACjC,KAAK,EAAE,aAAa,GACpB,CACH;QACD,oBAAC,GAAG;YACF,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,
|
|
1
|
+
{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Row/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAiBvC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,QAAQ,EACR,aAAa,GAAG,WAAW,EAC3B,SAAS,EACT,cAAc,GAAG,UAAU,EAC3B,WAAW,EACX,OAAO,EACP,UAAU,EACV,IAAI,EACJ,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,EACX,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAEhC,OAAO,CACL,oBAAC,SAAS,aACD,IAAI,eACA,QAAQ,gBACP,SAAS,mBACN,YAAY,gBACf,SAAS,EACrB,OAAO,EAAE,WAAW,kBACN,WAAW,KACrB,WAAW;QAEd,QAAQ,IAAI,CACX,oBAAC,IAAI,IACH,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACjC,KAAK,EAAE,aAAa,GACpB,CACH;QACD,oBAAC,GAAG;YACF,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,IAC/B,OAAO,CACH;YACP,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,IAC3C,UAAU,CACN,CACH;QACL,SAAS,IAAI,CACZ,oBAAC,IAAI,IACH,SAAS,EAAC,WAAW,EACrB,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACvC,KAAK,EAAE,cAAc,GACrB,CACH,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBACnD,CAAC,KAAK,KAAK,OAAO,IAAI,eAAe,CAAC;IACvD,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC;IAC9B,CAAC,KAAK,KAAK,MAAM,IAAI,eAAe,CAAC;IACrC,CAAC;;kBAEa,UAAU,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,OAAO;IACjE,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACrC,CAAC,CAAC,MAAM;qBACO,aAAa,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,MAAM;IACtE,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACrC,CAAC,CAAC,MAAM;;wBAEU,KAAK,CAAC,MAAM,CAAC,OAAO;;6BAEf,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;;;;;;;;qBAQlD,YAAY,IAAI,GAAG;;;;;;;;;;GAUrC,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\nimport { MarginProps } from '../utils/space'\n\nexport type RowProps = {\n iconLeft?: Icons\n iconLeftColor?: Color\n iconRight?: Icons\n iconRightColor?: Color\n handleClick?: () => void\n heading: string\n subHeading?: string\n type?: 'first' | 'last' | 'curved'\n borderTop?: boolean\n borderBottom?: boolean\n boldHeading?: boolean\n} & MarginProps\n\nexport const Row: FC<RowProps> = ({\n iconLeft,\n iconLeftColor = 'liquorice',\n iconRight,\n iconRightColor = 'marzipan',\n handleClick,\n heading,\n subHeading,\n type,\n borderTop = true,\n borderBottom = true,\n boldHeading,\n ...marginProps\n}) => {\n const windowWidth = screen.width\n\n return (\n <Container\n $type={type}\n $iconLeft={iconLeft}\n $borderTop={borderTop}\n $borderBottom={borderBottom}\n $iconRight={iconRight}\n onClick={handleClick}\n $boldHeading={boldHeading}\n {...marginProps}\n >\n {iconLeft && (\n <Icon\n render={iconLeft}\n size={windowWidth > 768 ? 24 : 18}\n color={iconLeftColor}\n />\n )}\n <Box>\n <Text tag=\"h1\" typo=\"body-regular\">\n {heading}\n </Text>\n <Text tag=\"p\" typo=\"body-small\" color=\"sesame\">\n {subHeading}\n </Text>\n </Box>\n {iconRight && (\n <Icon\n className=\"iconRight\"\n render={iconRight}\n size={24}\n rotate={iconRight === 'caret' ? -90 : 0}\n color={iconRightColor}\n />\n )}\n </Container>\n )\n}\n\ninterface IContainer {\n $type?: 'first' | 'last' | 'curved'\n $iconLeft?: string\n $iconRight?: string\n $borderTop: boolean\n $borderBottom: boolean\n $boldHeading?: boolean\n}\n\nconst Container = styled(Box)<IContainer>(\n ({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading }) => css`\n border-radius: ${($type === 'first' && `16px 16px 0 0`) ||\n ($type === 'curved' && `16px`) ||\n ($type === 'last' && `0 0 16px 16px`) ||\n 0};\n\n border-top: ${$borderTop && $type !== 'curved' && $type !== 'first'\n ? `1px solid ${theme.colors.oatmeal}`\n : 'none'};\n border-bottom: ${$borderBottom && $type !== 'curved' && $type !== 'last'\n ? `1px solid ${theme.colors.oatmeal}`\n : 'none'};\n\n background-color: ${theme.colors.custard};\n display: grid;\n grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};\n padding: 16px;\n grid-gap: 16px;\n align-items: center;\n\n cursor: pointer;\n\n h1 {\n font-weight: ${$boldHeading && 500};\n }\n\n .iconRight {\n justify-self: end;\n }\n\n @media (min-width: 768px) {\n grid-gap: 24px;\n }\n `,\n)\n"]}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { Box } from '../Box';
|
|
2
1
|
import React from 'react';
|
|
3
2
|
import styled from 'styled-components';
|
|
3
|
+
import { Box } from '../Box';
|
|
4
|
+
import { useTimeout } from '../hooks';
|
|
4
5
|
import { Icon } from '../Icon';
|
|
5
|
-
import { theme } from '../theme';
|
|
6
6
|
import { Text } from '../Text';
|
|
7
|
-
import {
|
|
7
|
+
import { theme } from '../theme';
|
|
8
8
|
export const SnackbarItem = ({ autoCloseTime = 4, id, message, leadingIcon, canManuallyClose, showCloseIcon, deleteSnack, }) => {
|
|
9
9
|
useTimeout(() => deleteSnack(id), autoCloseTime * 1000);
|
|
10
10
|
return (React.createElement(SnackItem, { p: "16px", key: id, mt: "16px", flex: true, justifyContent: "space-between" },
|
|
11
11
|
React.createElement(Box, { flex: true, alignItems: "center" },
|
|
12
12
|
leadingIcon && (React.createElement(Icon, { mr: "12px", render: leadingIcon, size: 24, color: "mascarpone" })),
|
|
13
|
-
React.createElement(Text, { typo: "
|
|
14
|
-
canManuallyClose && (React.createElement(CloseButton, { onClick: () => deleteSnack(id), "aria-label": `close snackbar ${message}` }, showCloseIcon ? (React.createElement(Icon, { render: "cross", size: 16, color: "mascarpone" })) : (React.createElement(UnderlinedText, { tag: "span", typo: "
|
|
13
|
+
React.createElement(Text, { typo: "body-small", color: "mascarpone" }, message)),
|
|
14
|
+
canManuallyClose && (React.createElement(CloseButton, { onClick: () => deleteSnack(id), "aria-label": `close snackbar ${message}` }, showCloseIcon ? (React.createElement(Icon, { render: "cross", size: 16, color: "mascarpone" })) : (React.createElement(UnderlinedText, { tag: "span", typo: "headline-small", color: "mascarpone" }, "Dismiss"))))));
|
|
15
15
|
};
|
|
16
16
|
const SnackItem = styled(Box) `
|
|
17
17
|
border-radius: 16px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAOhC,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,aAAa,GAAG,CAAC,EACjB,EAAE,EACF,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,WAAW,GACZ,EAAE,EAAE;IACH,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC,CAAA;IAEvD,OAAO,CACL,oBAAC,SAAS,IAAC,CAAC,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAC,MAAM,EAAC,IAAI,QAAC,cAAc,EAAC,eAAe;QACxE,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;YAC1B,WAAW,IAAI,CACd,oBAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,GAAG,CACrE;YACD,oBAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,OAAO,CACH,CACH;QACL,gBAAgB,IAAI,CACnB,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,gBAClB,kBAAkB,OAAO,EAAE,IAEtC,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,GAAG,CACrD,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,YAAY,cAElD,CAClB,CACW,CACf,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;sBAEP,KAAK,CAAC,MAAM,CAAC,SAAS;CAC3C,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;CAEhC,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAElC,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { useTimeout } from '../hooks'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { theme } from '../theme'\nimport { Snackbar } from './types'\n\ninterface Props extends Snackbar {\n deleteSnack: (id: string) => void\n}\n\nexport const SnackbarItem: FC<Props> = ({\n autoCloseTime = 4,\n id,\n message,\n leadingIcon,\n canManuallyClose,\n showCloseIcon,\n deleteSnack,\n}) => {\n useTimeout(() => deleteSnack(id), autoCloseTime * 1000)\n\n return (\n <SnackItem p=\"16px\" key={id} mt=\"16px\" flex justifyContent=\"space-between\">\n <Box flex alignItems=\"center\">\n {leadingIcon && (\n <Icon mr=\"12px\" render={leadingIcon} size={24} color=\"mascarpone\" />\n )}\n <Text typo=\"body-small\" color=\"mascarpone\">\n {message}\n </Text>\n </Box>\n {canManuallyClose && (\n <CloseButton\n onClick={() => deleteSnack(id)}\n aria-label={`close snackbar ${message}`}\n >\n {showCloseIcon ? (\n <Icon render=\"cross\" size={16} color=\"mascarpone\" />\n ) : (\n <UnderlinedText tag=\"span\" typo=\"headline-small\" color=\"mascarpone\">\n Dismiss\n </UnderlinedText>\n )}\n </CloseButton>\n )}\n </SnackItem>\n )\n}\n\nconst SnackItem = styled(Box)`\n border-radius: 16px;\n background-color: ${theme.colors.liquorice};\n`\n\nconst CloseButton = styled.button`\n cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n text-decoration: underline;\n`\n"]}
|
package/dist/Text/Text.d.ts
CHANGED
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
import { FC, LabelHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { Color } from '../theme';
|
|
3
3
|
import { MarginProps } from '../utils/space';
|
|
4
|
-
/**
|
|
5
|
-
* @deprecated Use only new Typo
|
|
6
|
-
*/
|
|
7
|
-
export type DeprecatedTypo = 'header-large' | 'header-medium' | 'header-small' | 'desc-heavy' | 'desc-medium' | 'desc-light' | 'desc-small' | 'base' | 'base-small' | 'base-xsmall' | 'label-large';
|
|
8
4
|
export type Typo = 'hero-alternate' | 'hero' | 'heading-alternate' | 'heading-large' | 'heading-medium' | 'heading-small' | 'headline-regular' | 'headline-small' | 'body-standfirst' | 'body-regular' | 'body-small' | 'caption' | 'label';
|
|
9
5
|
type Props = {
|
|
10
6
|
children: ReactNode;
|
|
11
7
|
tag?: any;
|
|
12
8
|
className?: string;
|
|
13
|
-
typo?: Typo
|
|
9
|
+
typo?: Typo;
|
|
14
10
|
align?: string;
|
|
15
11
|
color?: Color;
|
|
16
12
|
cursor?: string;
|
package/dist/Text/Text.js
CHANGED
|
@@ -6,143 +6,13 @@ import { theme } from '../theme';
|
|
|
6
6
|
import { fontStyleMapping } from './fontMapping';
|
|
7
7
|
export const Text = forwardRef(({ children, typo = 'body-regular', className = '', tag = 'p', align = 'left', color = 'liquorice', cursor = 'inherit', title = '', ...props }, ref) => (React.createElement(Container, { forwardedAs: tag, className: className, "$typo": typo, "$align": align, "$color": color, cursor: cursor, title: title, ...props, ref: ref }, children)));
|
|
8
8
|
Text.displayName = 'Text';
|
|
9
|
-
const
|
|
9
|
+
const isTypo = (value) => {
|
|
10
10
|
return Object.keys(fontStyleMapping).includes(value);
|
|
11
11
|
};
|
|
12
12
|
const Container = styled(Box)(({ $align, $color, $cursor, $typo }) => css `
|
|
13
13
|
/** TYPOGRAPHY STYLES */
|
|
14
14
|
|
|
15
|
-
${
|
|
16
|
-
|
|
17
|
-
/** DEPRECATED TYPOGRAPHY STYLES */
|
|
18
|
-
${$typo === 'header-large' &&
|
|
19
|
-
css `
|
|
20
|
-
font-size: 24px;
|
|
21
|
-
line-height: 31px;
|
|
22
|
-
font-weight: 500;
|
|
23
|
-
|
|
24
|
-
@media (min-width: 768px) {
|
|
25
|
-
font-size: 42px;
|
|
26
|
-
line-height: 54px;
|
|
27
|
-
}
|
|
28
|
-
`}
|
|
29
|
-
|
|
30
|
-
${$typo === 'header-medium' &&
|
|
31
|
-
css `
|
|
32
|
-
font-size: 21px;
|
|
33
|
-
line-height: 27px;
|
|
34
|
-
font-weight: 500;
|
|
35
|
-
|
|
36
|
-
@media (min-width: 768px) {
|
|
37
|
-
font-size: 32px;
|
|
38
|
-
line-height: 41px;
|
|
39
|
-
}
|
|
40
|
-
`}
|
|
41
|
-
|
|
42
|
-
${$typo === 'header-small' &&
|
|
43
|
-
css `
|
|
44
|
-
font-size: 18px;
|
|
45
|
-
line-height: 23px;
|
|
46
|
-
font-weight: 500;
|
|
47
|
-
|
|
48
|
-
@media (min-width: 768px) {
|
|
49
|
-
font-size: 21px;
|
|
50
|
-
line-height: 27px;
|
|
51
|
-
}
|
|
52
|
-
`}
|
|
53
|
-
|
|
54
|
-
${$typo === 'desc-heavy' &&
|
|
55
|
-
css `
|
|
56
|
-
font-size: 14px;
|
|
57
|
-
line-height: 20px;
|
|
58
|
-
font-weight: 700;
|
|
59
|
-
|
|
60
|
-
@media (min-width: 768px) {
|
|
61
|
-
font-size: 16px;
|
|
62
|
-
line-height: 23px;
|
|
63
|
-
}
|
|
64
|
-
`}
|
|
65
|
-
|
|
66
|
-
${$typo === 'desc-medium' &&
|
|
67
|
-
css `
|
|
68
|
-
font-size: 14px;
|
|
69
|
-
line-height: 20px;
|
|
70
|
-
font-weight: 500;
|
|
71
|
-
|
|
72
|
-
@media (min-width: 768px) {
|
|
73
|
-
font-size: 16px;
|
|
74
|
-
line-height: 23px;
|
|
75
|
-
}
|
|
76
|
-
`}
|
|
77
|
-
|
|
78
|
-
${$typo === 'desc-light' &&
|
|
79
|
-
css `
|
|
80
|
-
font-size: 14px;
|
|
81
|
-
line-height: 20px;
|
|
82
|
-
font-weight: 400;
|
|
83
|
-
|
|
84
|
-
@media (min-width: 768px) {
|
|
85
|
-
font-size: 16px;
|
|
86
|
-
line-height: 23px;
|
|
87
|
-
}
|
|
88
|
-
`}
|
|
89
|
-
|
|
90
|
-
${$typo === 'desc-small' &&
|
|
91
|
-
css `
|
|
92
|
-
font-size: 12px;
|
|
93
|
-
line-height: 16px;
|
|
94
|
-
font-weight: 400;
|
|
95
|
-
|
|
96
|
-
@media (min-width: 768px) {
|
|
97
|
-
font-size: 14px;
|
|
98
|
-
line-height: 18px;
|
|
99
|
-
}
|
|
100
|
-
`}
|
|
101
|
-
|
|
102
|
-
${$typo === 'base' &&
|
|
103
|
-
css `
|
|
104
|
-
font-size: 14px;
|
|
105
|
-
line-height: 23px;
|
|
106
|
-
font-weight: 400;
|
|
107
|
-
|
|
108
|
-
@media (min-width: 768px) {
|
|
109
|
-
font-size: 16px;
|
|
110
|
-
line-height: 26px;
|
|
111
|
-
}
|
|
112
|
-
`}
|
|
113
|
-
|
|
114
|
-
${$typo === 'base-small' &&
|
|
115
|
-
css `
|
|
116
|
-
font-size: 12px;
|
|
117
|
-
line-height: 20px;
|
|
118
|
-
font-weight: 400;
|
|
119
|
-
|
|
120
|
-
@media (min-width: 768px) {
|
|
121
|
-
font-size: 14px;
|
|
122
|
-
line-height: 23px;
|
|
123
|
-
}
|
|
124
|
-
`}
|
|
125
|
-
|
|
126
|
-
${$typo === 'base-xsmall' &&
|
|
127
|
-
css `
|
|
128
|
-
font-size: 10px;
|
|
129
|
-
line-height: 16px;
|
|
130
|
-
font-weight: 400;
|
|
131
|
-
|
|
132
|
-
@media (min-width: 768px) {
|
|
133
|
-
font-size: 12px;
|
|
134
|
-
line-height: 19px;
|
|
135
|
-
}
|
|
136
|
-
`}
|
|
137
|
-
|
|
138
|
-
${$typo === 'label-large' &&
|
|
139
|
-
css `
|
|
140
|
-
font-size: 12px;
|
|
141
|
-
line-height: 100%;
|
|
142
|
-
font-weight: 700;
|
|
143
|
-
text-transform: uppercase;
|
|
144
|
-
letter-spacing: 0.75px;
|
|
145
|
-
`}
|
|
15
|
+
${isTypo($typo) && fontStyleMapping[$typo]}
|
|
146
16
|
|
|
147
17
|
text-align: ${$align};
|
|
148
18
|
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,KAAK,EAAE,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAA;AAC7E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAA;AAC7E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAwChD,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,WAAW,EACnB,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE,CAAC,CACH,oBAAC,SAAS,IACR,WAAW,EAAE,GAAG,EAChB,SAAS,EAAE,SAAS,WACb,IAAI,YACH,KAAK,YACL,KAAK,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,KAAK,EACT,GAAG,EAAE,GAAG,IAEP,QAAQ,CACC,CACb,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,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;MAC3B,iBAAiB,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;GACrD,CACF,CAAA","sourcesContent":["import React, { FC, forwardRef, LabelHTMLAttributes, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { linkStyleOverride } from '../Link/Link'\nimport { Color, theme } from '../theme'\nimport { MarginProps } from '../utils/space'\nimport { fontStyleMapping } from './fontMapping'\n\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: Color\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?: Color\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 = 'liquorice',\n cursor = 'inherit',\n title = '',\n ...props\n },\n ref,\n ) => (\n <Container\n forwardedAs={tag}\n className={className}\n $typo={typo}\n $align={align}\n $color={color}\n cursor={cursor}\n title={title}\n {...props}\n ref={ref}\n >\n {children}\n </Container>\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: ${theme.colors[$color]};\n ${linkStyleOverride({ color: theme.colors[$color] })}\n `,\n)\n"]}
|
package/dist/Tooltip/Tooltip.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
+
import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, inline, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from '@floating-ui/react';
|
|
1
2
|
import React, { useRef, useState } from 'react';
|
|
2
3
|
import styled, { css } from 'styled-components';
|
|
3
4
|
import { Box } from '../Box';
|
|
4
5
|
import { Text } from '../Text';
|
|
5
6
|
import { theme } from '../theme';
|
|
6
|
-
import { autoUpdate, flip, FloatingPortal, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, arrow, FloatingArrow, inline, } from '@floating-ui/react';
|
|
7
7
|
const tooltipVariants = {
|
|
8
8
|
primary: {
|
|
9
9
|
textColor: 'liquorice',
|
|
@@ -54,8 +54,8 @@ export const Tooltip = ({ children, title, content, position, maxWidth = 500, un
|
|
|
54
54
|
showTip && (React.createElement(FloatingPortal, { root: portalContainer },
|
|
55
55
|
React.createElement(Tip, { ref: refs.setFloating, className: "tooltip", "$maxWidth": maxWidth, "$background": theme.colors[variantValue.bgColor], style: floatingStyles, ...getFloatingProps() },
|
|
56
56
|
React.createElement(FloatingArrow, { ref: arrowRef, context: context, fill: theme.colors[variantValue.bgColor] }),
|
|
57
|
-
title && (React.createElement(Text, { tag: "h5", typo: "
|
|
58
|
-
(typeof content === 'string' && (React.createElement(Text, { typo: "
|
|
57
|
+
title && (React.createElement(Text, { tag: "h5", typo: "headline-small", color: variantValue.textColor }, title)),
|
|
58
|
+
(typeof content === 'string' && (React.createElement(Text, { typo: "body-regular", color: variantValue.textColor }, content))) ||
|
|
59
59
|
content)))));
|
|
60
60
|
};
|
|
61
61
|
const UnderlinedChild = styled(Box) `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC9D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingPortal,\n inline,\n offset,\n shift,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n type Side,\n} from '@floating-ui/react'\nimport React, { FC, ReactNode, useRef, useState } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\n\nexport interface TooltipProps {\n children: ReactNode\n content: string | ReactNode\n position?: Side\n maxWidth?: number\n title?: string\n underline?: boolean\n variant?: TooltipVariant\n portalContainer?:\n | HTMLElement\n | null\n | React.MutableRefObject<HTMLElement | null>\n /**\n * If true, the tooltip will position itself inline its children\n *\n * Used for inline content like blocks of text that span multiple lines\n *\n * @example\n * ```tsx\n * <Text>\n * Marshmallow car insurance, the best insurance in town.\n * <Tooltip inline content=\"Tooltip content\">Hover here</Tooltip>\n * to learn more as the Policy Holder\n * </Text>\n * ```\n */\n inline?: boolean\n}\n\nexport type TooltipVariant = 'primary' | 'fallback' | 'bubblegum'\n\ntype VariantValue = { textColor: Color; bgColor: Color }\n\nconst tooltipVariants = {\n primary: {\n textColor: 'liquorice',\n bgColor: 'custard',\n },\n fallback: {\n textColor: 'cream',\n bgColor: 'feijoa',\n },\n bubblegum: {\n textColor: 'liquorice',\n bgColor: 'bubblegum',\n },\n} satisfies Record<TooltipVariant, VariantValue>\n\nconst ARROW_HEIGHT = 8\nconst GAP = 4\n\nexport const Tooltip: FC<TooltipProps> = ({\n children,\n title,\n content,\n position,\n maxWidth = 500,\n underline = false,\n portalContainer,\n inline: inlineProp,\n variant = 'primary',\n}) => {\n const [showTip, setShowTip] = useState<boolean>(false)\n const arrowRef = useRef(null)\n\n const variantValue = tooltipVariants[variant]\n\n const randomId = crypto.randomUUID()\n\n const { refs, floatingStyles, context } = useFloating({\n open: showTip,\n placement: position,\n onOpenChange: setShowTip,\n middleware: [\n offset(ARROW_HEIGHT + GAP),\n flip(),\n shift(),\n inlineProp ? inline() : undefined,\n arrow({ element: arrowRef, padding: 14 }),\n ],\n whileElementsMounted: autoUpdate,\n })\n\n const hover = useHover(context, { move: false })\n const focus = useFocus(context)\n const dismiss = useDismiss(context)\n const role = useRole(context, { role: 'tooltip' })\n\n // Merge all the interactions into prop getters\n const { getReferenceProps, getFloatingProps } = useInteractions([\n hover,\n focus,\n dismiss,\n role,\n ])\n\n return (\n <>\n <UnderlinedChild\n id={randomId}\n $underline={underline}\n ref={refs.setReference}\n {...getReferenceProps()}\n >\n {children}\n </UnderlinedChild>\n {showTip && (\n <FloatingPortal root={portalContainer}>\n <Tip\n ref={refs.setFloating}\n className=\"tooltip\"\n $maxWidth={maxWidth}\n $background={theme.colors[variantValue.bgColor]}\n style={floatingStyles}\n {...getFloatingProps()}\n >\n <FloatingArrow\n ref={arrowRef}\n context={context}\n fill={theme.colors[variantValue.bgColor]}\n />\n {title && (\n <Text\n tag=\"h5\"\n typo=\"headline-small\"\n color={variantValue.textColor}\n >\n {title}\n </Text>\n )}\n {(typeof content === 'string' && (\n <Text typo=\"body-regular\" color={variantValue.textColor}>\n {content}\n </Text>\n )) ||\n content}\n </Tip>\n </FloatingPortal>\n )}\n </>\n )\n}\n\nconst UnderlinedChild = styled(Box)<{ $underline: boolean }>`\n cursor: pointer;\n width: fit-content;\n display: inline-flex;\n\n ${({ $underline }) =>\n $underline &&\n css`\n border-bottom: 1px dashed ${theme.colors.marshmallowPink};\n `}\n`\n\nexport const Tip = styled.div<{\n $maxWidth?: number\n $background: string\n}>`\n position: absolute;\n margin: auto;\n z-index: 1000;\n background: ${({ $background }) => $background};\n padding: 16px 12px 20px;\n border-radius: 16px;\n max-width: 450px;\n pointer-events: none;\n cursor: default;\n\n // this is the trick that will make sure the content can go up to maxWidth\n margin-right: ${({ $maxWidth }) => $maxWidth && -$maxWidth / 2 + 'px'};\n max-width: ${({ $maxWidth }) => $maxWidth && $maxWidth + 'px'};\n`\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "12.0.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -42,27 +42,27 @@
|
|
|
42
42
|
"@semantic-release/github": "^11.0.1",
|
|
43
43
|
"@semantic-release/npm": "^12.0.0",
|
|
44
44
|
"@snyk/protect": "^1.1295.3",
|
|
45
|
-
"@storybook/addon-a11y": "^8.5.
|
|
45
|
+
"@storybook/addon-a11y": "^8.5.8",
|
|
46
46
|
"@storybook/addon-coverage": "^1.0.5",
|
|
47
|
-
"@storybook/addon-essentials": "^8.5.
|
|
48
|
-
"@storybook/addon-interactions": "^8.5.
|
|
49
|
-
"@storybook/addon-links": "^8.5.
|
|
50
|
-
"@storybook/preview-api": "^8.5.
|
|
51
|
-
"@storybook/react": "^8.5.
|
|
52
|
-
"@storybook/react-vite": "^8.5.
|
|
47
|
+
"@storybook/addon-essentials": "^8.5.8",
|
|
48
|
+
"@storybook/addon-interactions": "^8.5.8",
|
|
49
|
+
"@storybook/addon-links": "^8.5.8",
|
|
50
|
+
"@storybook/preview-api": "^8.5.8",
|
|
51
|
+
"@storybook/react": "^8.5.8",
|
|
52
|
+
"@storybook/react-vite": "^8.5.8",
|
|
53
53
|
"@storybook/test": "^8.2.1",
|
|
54
|
-
"@storybook/test-runner": "^0.21.
|
|
54
|
+
"@storybook/test-runner": "^0.21.3",
|
|
55
55
|
"@testing-library/react": "^16.2.0",
|
|
56
56
|
"@types/body-scroll-lock": "^3.1.0",
|
|
57
57
|
"@types/dompurify": "^3.2.0",
|
|
58
|
-
"@types/node": "^22.13.
|
|
58
|
+
"@types/node": "^22.13.5",
|
|
59
59
|
"@types/react": "^19.0.10",
|
|
60
60
|
"@types/react-dom": "^19.0.4",
|
|
61
61
|
"@typescript-eslint/eslint-plugin": "^8.23.0",
|
|
62
62
|
"@typescript-eslint/parser": "^8.23.0",
|
|
63
63
|
"axe-playwright": "^2.1.0",
|
|
64
64
|
"conventional-changelog-conventionalcommits": "^8.0.0",
|
|
65
|
-
"eslint": "^9.
|
|
65
|
+
"eslint": "^9.21.0",
|
|
66
66
|
"eslint-config-prettier": "^10.0.1",
|
|
67
67
|
"eslint-plugin-prettier": "^5.2.3",
|
|
68
68
|
"eslint-plugin-react": "^7.37.4",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"jsdom": "^26.0.0",
|
|
72
72
|
"lint-staged": "^15.4.3",
|
|
73
73
|
"playwright": "^1.50.1",
|
|
74
|
-
"prettier": "^3.5.
|
|
74
|
+
"prettier": "^3.5.2",
|
|
75
75
|
"react": "^19.0.0",
|
|
76
76
|
"react-dom": "^19.0.0",
|
|
77
77
|
"rimraf": "^6.0.1",
|
|
@@ -80,17 +80,17 @@
|
|
|
80
80
|
"styled-components": "^6.1.15",
|
|
81
81
|
"typescript": "^5.7.3",
|
|
82
82
|
"typescript-eslint": "^8.24.1",
|
|
83
|
-
"vite": "^6.1.
|
|
84
|
-
"vitest": "^3.0.
|
|
83
|
+
"vite": "^6.1.1",
|
|
84
|
+
"vitest": "^3.0.6"
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
87
|
"@floating-ui/react": "0.27.4",
|
|
88
|
-
"@lexical/react": "^0.
|
|
88
|
+
"@lexical/react": "^0.25.0",
|
|
89
89
|
"body-scroll-lock": "^4.0.0-beta.0",
|
|
90
90
|
"date-fns": "^4.1.0",
|
|
91
91
|
"dompurify": "^3.2.4",
|
|
92
92
|
"fuse.js": "^7.1.0",
|
|
93
|
-
"lexical": "^0.
|
|
93
|
+
"lexical": "^0.25.0",
|
|
94
94
|
"polished": "^4.1.3"
|
|
95
95
|
},
|
|
96
96
|
"peerDependencies": {
|