@mrshmllw/smores-react 15.1.22 → 15.1.24
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.
|
@@ -25,7 +25,7 @@ const StyledWrapper = styled(Box) `
|
|
|
25
25
|
display: flex;
|
|
26
26
|
justify-content: center;
|
|
27
27
|
align-items: center;
|
|
28
|
-
gap:
|
|
28
|
+
gap: ${({ theme }) => theme.space['050']};
|
|
29
29
|
`;
|
|
30
30
|
const StyledTag = styled(Tag) `
|
|
31
31
|
border-radius: 100px;
|
|
@@ -36,7 +36,7 @@ const StyledText = styled(Text) `
|
|
|
36
36
|
padding: 2px 0px;
|
|
37
37
|
`;
|
|
38
38
|
const ToggleWrapper = styled(Box) `
|
|
39
|
-
padding:
|
|
39
|
+
padding: ${({ theme }) => theme.space['050']};
|
|
40
40
|
background-color: ${(p) => p.$backgroundColor};
|
|
41
41
|
border-radius: ${BORDER_RADIUS}px;
|
|
42
42
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Tag } from '../Tag'\nimport { Text } from '../Text'\nimport { theme as oldTheme } from '../theme'\nimport {\n ColorTypes,\n getColorPath,\n resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { ToggleButton } from './ToggleButton'\n\nexport type SegmentedControlOption<T = string | number> = {\n label: string\n secondaryLabel?: string\n /** value needs to be number or string */\n value: T\n /** optional tag able to show in the toggle if showTag prop is passed */\n tag?: string\n isDisabled?: boolean\n}\n\ntype StylingOptions = {\n toggle?: ColorTypes\n background?: ColorTypes\n text?: ColorTypes\n selectedText?: ColorTypes\n tagBg?: ColorTypes\n tagBorder?: ColorTypes\n tagText?: ColorTypes\n fullWidth?: boolean\n}\n\nexport type SegmentedControlProps<T> = {\n /** you can pass more than 2 options */\n options: SegmentedControlOption<T>[]\n value: T\n onChange: (value: T) => void\n /** pass this prop if you want to show the tag in the toggle */\n showTag?: boolean\n /** pass a StylingOptions object with the needed styles if you want to style the SegmentedControl */\n styles?: StylingOptions\n}\n\n/**\n * ### How do I pass state to the `SegmentedControl` component?\n * We recommend pulling the state up to at least the component that renders `SegmentedControl` up to at least the component that renders `SegmentedControl`, this should make it easier to pass state to the `SegmentedControl` component\n */\nexport const SegmentedControl = <T,>({\n options,\n value,\n onChange,\n showTag,\n styles: {\n tagBorder = 'color.surface.brand.300',\n tagText = 'color.surface.base.000',\n tagBg = 'color.surface.brand.300',\n selectedText = 'color.surface.base.000',\n text = 'color.text.base',\n background = 'color.surface.base.300',\n toggle = 'color.text.base',\n fullWidth = false,\n } = {},\n}: SegmentedControlProps<T>) => {\n const theme = useTheme()\n\n const resolvedBackgroundColor =\n background && resolveToThemeColor(background, theme)\n const resolvedToggleColor = toggle && resolveToThemeColor(toggle, theme)\n const resolvedSelectedTextColor = resolveToThemeColor(selectedText, theme)\n\n return (\n <ToggleWrapper\n $backgroundColor={resolvedBackgroundColor}\n $fullWidth={fullWidth}\n >\n <IndicatorWrapper $backgroundColor={resolvedBackgroundColor}>\n {options.map((option) => {\n const isSelected = option.value === value\n\n return (\n <ToggleButton\n key={option.label}\n name=\"toggle-version-button\"\n value={option.value}\n onChange={onChange}\n isSelected={isSelected}\n isDisabled={option.isDisabled}\n >\n <StyledWrapper>\n {showTag && option.tag && (\n <StyledTag\n bgColor={getColorPath(tagBg)}\n borderColor={getColorPath(tagBorder)}\n color={getColorPath(tagText)}\n label={option.tag}\n />\n )}\n <Box\n flex\n direction=\"column\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n <StyledText\n $isSelected={isSelected}\n $selectedTextColor={resolvedSelectedTextColor}\n color={text}\n >\n {option.label}\n </StyledText>\n {option.secondaryLabel && (\n <Text\n color={isSelected ? selectedText : text}\n typo=\"caption\"\n >\n {option.secondaryLabel}\n </Text>\n )}\n </Box>\n </StyledWrapper>\n </ToggleButton>\n )\n })}\n\n <ToggleIndicator\n data-testid=\"toggle-indicator\"\n $selectedIndex={options.findIndex((option) => option.value === value)}\n $sections={options.length}\n $toggleColor={resolvedToggleColor}\n />\n </IndicatorWrapper>\n </ToggleWrapper>\n )\n}\n\nconst BORDER_RADIUS = 1000\n\nconst StyledWrapper = styled(Box)`\n display: flex;\n justify-content: center;\n align-items: center;\n gap: ${({ theme }) => theme.space['050']};\n`\n\nconst StyledTag = styled(Tag)`\n border-radius: 100px;\n`\n\nconst StyledText = styled(Text)<{\n $isSelected: boolean\n $selectedTextColor: string\n}>`\n font-weight: ${oldTheme.font.weight.medium};\n ${({ $isSelected, $selectedTextColor }) =>\n $isSelected && `color: ${$selectedTextColor};`}\n padding: 2px 0px;\n`\n\nconst ToggleWrapper = styled(Box)<{\n $backgroundColor?: string\n $fullWidth?: boolean\n}>`\n padding: ${({ theme }) => theme.space['050']};\n background-color: ${(p) => p.$backgroundColor};\n border-radius: ${BORDER_RADIUS}px;\n\n ${({ $fullWidth }) =>\n $fullWidth &&\n css`\n width: 100%;\n `}\n`\n\nconst IndicatorWrapper = styled(Box)<{ $backgroundColor?: string }>`\n position: relative;\n display: flex;\n background-color: ${(p) => p.$backgroundColor};\n border-radius: ${BORDER_RADIUS}px;\n`\n\nconst ToggleIndicator = styled(Box)<{\n $selectedIndex: number\n $sections: number\n $toggleColor?: string\n}>`\n background-color: ${(p) => p.$toggleColor};\n border-radius: ${BORDER_RADIUS}px;\n position: absolute;\n z-index: 1;\n height: 100%;\n width: ${(p) => `calc(100% / ${p.$sections})`};\n transition: transform 0.4s;\n transform: ${(p) => `translateX(${p.$selectedIndex * 100}%)`};\n`\n"]}
|
|
@@ -10,8 +10,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
|
10
10
|
export const SnackbarItem = ({ autoCloseTime = 4, id, message, leadingIcon, iconComponent, canManuallyClose, showCloseIcon, deleteSnack, }) => {
|
|
11
11
|
useTimeout(() => deleteSnack(id), autoCloseTime * 1000);
|
|
12
12
|
const theme = useTheme();
|
|
13
|
-
const iconToRender = iconComponent ? (_jsx(IconContainer, { style: { marginRight: '24px' }, "$size": 24, "$iconColor": theme.color.surface.base[200], children: iconComponent })) : leadingIcon ? (_jsx(Icon, { render: leadingIcon, size: 24, color: "color.surface.base.200", mr: "
|
|
14
|
-
return (_jsxs(SnackItem, { p: "
|
|
13
|
+
const iconToRender = iconComponent ? (_jsx(IconContainer, { style: { marginRight: '24px' }, "$size": 24, "$iconColor": theme.color.surface.base[200], children: iconComponent })) : leadingIcon ? (_jsx(Icon, { render: leadingIcon, size: 24, color: "color.surface.base.200", mr: "space.150" })) : null;
|
|
14
|
+
return (_jsxs(SnackItem, { p: "space.200", mt: "space.200", flex: true, justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { flex: true, alignItems: "center", children: [iconToRender, _jsx(Text, { typo: "body-small", color: "color.surface.base.200", children: message })] }), canManuallyClose && (_jsx(CloseButton, { onClick: () => deleteSnack(id), "aria-label": `close snackbar ${message}`, children: showCloseIcon ? (_jsx(IconContainer, { as: "span", "$size": 16, children: _jsx(FontAwesomeIcon, { icon: faXmark, color: theme.color.surface.base[200] }) })) : (_jsx(UnderlinedText, { tag: "span", typo: "headline-small", color: "color.surface.base.200", children: "Dismiss" })) }))] }, id));
|
|
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":";AACA,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACpD,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;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAA;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAMhE,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,aAAa,GAAG,CAAC,EACjB,EAAE,EACF,OAAO,EACP,WAAW,EACX,aAAa,EACb,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,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,IACZ,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,WACvB,EAAE,gBACG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,YAExC,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,KAAC,IAAI,IACH,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,wBAAwB,EAC9B,EAAE,EAAC,
|
|
1
|
+
{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarItem.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACpD,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;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAA;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAMhE,MAAM,CAAC,MAAM,YAAY,GAAc,CAAC,EACtC,aAAa,GAAG,CAAC,EACjB,EAAE,EACF,OAAO,EACP,WAAW,EACX,aAAa,EACb,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,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,IACZ,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,WACvB,EAAE,gBACG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,YAExC,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,KAAC,IAAI,IACH,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,wBAAwB,EAC9B,EAAE,EAAC,WAAW,GACd,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,OAAO,CACL,MAAC,SAAS,IACR,CAAC,EAAC,WAAW,EAEb,EAAE,EAAC,WAAW,EACd,IAAI,QACJ,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,aAEnB,MAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,aAC1B,YAAY,EACb,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,wBAAwB,YACnD,OAAO,GACH,IACH,EACL,gBAAgB,IAAI,CACnB,KAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,gBAClB,kBAAkB,OAAO,EAAE,YAEtC,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,aAAa,IAAC,EAAE,EAAC,MAAM,WAAQ,EAAE,YAChC,KAAC,eAAe,IACd,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GACpC,GACY,CACjB,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IACb,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,wBAAwB,wBAGf,CAClB,GACW,CACf,KAlCI,EAAE,CAmCG,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;sBAEP,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;CACjE,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;CAEhC,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAElC,CAAA","sourcesContent":["import { FC } from 'react'\nimport styled, { useTheme } from 'styled-components'\nimport { Box } from '../Box'\nimport { useTimeout } from '../hooks'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { Snackbar } from './types'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { faXmark } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\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 iconComponent,\n canManuallyClose,\n showCloseIcon,\n deleteSnack,\n}) => {\n useTimeout(() => deleteSnack(id), autoCloseTime * 1000)\n\n const theme = useTheme()\n const iconToRender = iconComponent ? (\n <IconContainer\n style={{ marginRight: '24px' }}\n $size={24}\n $iconColor={theme.color.surface.base[200]}\n >\n {iconComponent}\n </IconContainer>\n ) : leadingIcon ? (\n <Icon\n render={leadingIcon}\n size={24}\n color=\"color.surface.base.200\"\n mr=\"space.150\"\n />\n ) : null\n\n return (\n <SnackItem\n p=\"space.200\"\n key={id}\n mt=\"space.200\"\n flex\n justifyContent=\"space-between\"\n alignItems=\"center\"\n >\n <Box flex alignItems=\"center\">\n {iconToRender}\n <Text typo=\"body-small\" color=\"color.surface.base.200\">\n {message}\n </Text>\n </Box>\n {canManuallyClose && (\n <CloseButton\n onClick={() => deleteSnack(id)}\n aria-label={`close snackbar ${message}`}\n >\n {showCloseIcon ? (\n <IconContainer as=\"span\" $size={16}>\n <FontAwesomeIcon\n icon={faXmark}\n color={theme.color.surface.base[200]}\n />\n </IconContainer>\n ) : (\n <UnderlinedText\n tag=\"span\"\n typo=\"headline-small\"\n color=\"color.surface.base.200\"\n >\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 }) => theme.color.surface.base[900]};\n`\n\nconst CloseButton = styled.button`\n cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n text-decoration: underline;\n`\n"]}
|