@mrshmllw/smores-react 14.5.0 → 14.5.1
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.
|
@@ -15,10 +15,10 @@ export const SegmentedControl = ({ options, value, onChange, showTag, styles: {
|
|
|
15
15
|
const resolvedBackgroundColor = background && resolveToThemeColor(background, theme);
|
|
16
16
|
const resolvedToggleColor = toggle && resolveToThemeColor(toggle, theme);
|
|
17
17
|
const resolvedSelectedTextColor = resolveToThemeColor(selectedText, theme);
|
|
18
|
-
return (_jsx(ToggleWrapper, { "$backgroundColor": resolvedBackgroundColor, "$fullWidth": fullWidth, children: _jsxs(IndicatorWrapper, { backgroundColor: resolvedBackgroundColor, children: [options.map((option) => {
|
|
18
|
+
return (_jsx(ToggleWrapper, { "$backgroundColor": resolvedBackgroundColor, "$fullWidth": fullWidth, children: _jsxs(IndicatorWrapper, { "$backgroundColor": resolvedBackgroundColor, children: [options.map((option) => {
|
|
19
19
|
const isSelected = option.value === value;
|
|
20
|
-
return (_jsx(ToggleButton, { name: "toggle-version-button", value: option.value, onChange: onChange, isSelected: isSelected, isDisabled: option.isDisabled, children: _jsxs(StyledWrapper, { children: [showTag && option.tag && (_jsx(StyledTag, { bgColor: getColorPath(tagBg), borderColor: getColorPath(tagBorder), color: getColorPath(tagText), label: option.tag })), _jsxs(Box, { flex: true, direction: "column", justifyContent: "center", alignItems: "center", children: [_jsx(StyledText, { isSelected: isSelected, "$selectedTextColor": resolvedSelectedTextColor, color: text, children: option.label }), option.secondaryLabel && (_jsx(Text, { color: isSelected ? selectedText : text, typo: "caption", children: option.secondaryLabel }))] })] }) }, option.label));
|
|
21
|
-
}), _jsx(ToggleIndicator, { selectedIndex: options.findIndex((option) => option.value === value), sections: options.length, toggleColor: resolvedToggleColor })] }) }));
|
|
20
|
+
return (_jsx(ToggleButton, { name: "toggle-version-button", value: option.value, onChange: onChange, isSelected: isSelected, isDisabled: option.isDisabled, children: _jsxs(StyledWrapper, { children: [showTag && option.tag && (_jsx(StyledTag, { bgColor: getColorPath(tagBg), borderColor: getColorPath(tagBorder), color: getColorPath(tagText), label: option.tag })), _jsxs(Box, { flex: true, direction: "column", justifyContent: "center", alignItems: "center", children: [_jsx(StyledText, { "$isSelected": isSelected, "$selectedTextColor": resolvedSelectedTextColor, color: text, children: option.label }), option.secondaryLabel && (_jsx(Text, { color: isSelected ? selectedText : text, typo: "caption", children: option.secondaryLabel }))] })] }) }, option.label));
|
|
21
|
+
}), _jsx(ToggleIndicator, { "data-testid": "toggle-indicator", "$selectedIndex": options.findIndex((option) => option.value === value), "$sections": options.length, "$toggleColor": resolvedToggleColor })] }) }));
|
|
22
22
|
};
|
|
23
23
|
const BORDER_RADIUS = 1000;
|
|
24
24
|
const StyledWrapper = styled(Box) `
|
|
@@ -32,7 +32,7 @@ const StyledTag = styled(Tag) `
|
|
|
32
32
|
`;
|
|
33
33
|
const StyledText = styled(Text) `
|
|
34
34
|
font-weight: ${oldTheme.font.weight.medium};
|
|
35
|
-
${({ isSelected, $selectedTextColor }) => isSelected && `color: ${$selectedTextColor};`}
|
|
35
|
+
${({ $isSelected, $selectedTextColor }) => $isSelected && `color: ${$selectedTextColor};`}
|
|
36
36
|
padding: 2px 0px;
|
|
37
37
|
`;
|
|
38
38
|
const ToggleWrapper = styled(Box) `
|
|
@@ -48,17 +48,17 @@ const ToggleWrapper = styled(Box) `
|
|
|
48
48
|
const IndicatorWrapper = styled(Box) `
|
|
49
49
|
position: relative;
|
|
50
50
|
display: flex;
|
|
51
|
-
background-color: ${(p) => p
|
|
51
|
+
background-color: ${(p) => p.$backgroundColor};
|
|
52
52
|
border-radius: ${BORDER_RADIUS}px;
|
|
53
53
|
`;
|
|
54
54
|
const ToggleIndicator = styled(Box) `
|
|
55
|
-
background-color: ${(p) => p
|
|
55
|
+
background-color: ${(p) => p.$toggleColor};
|
|
56
56
|
border-radius: ${BORDER_RADIUS}px;
|
|
57
57
|
position: absolute;
|
|
58
58
|
z-index: 1;
|
|
59
59
|
height: 100%;
|
|
60
|
-
width: ${(p) => `calc(100% / ${p
|
|
60
|
+
width: ${(p) => `calc(100% / ${p.$sections})`};
|
|
61
61
|
transition: transform 0.4s;
|
|
62
|
-
transform: ${(p) => `translateX(${p
|
|
62
|
+
transform: ${(p) => `translateX(${p.$selectedIndex * 100}%)`};
|
|
63
63
|
`;
|
|
64
64
|
//# sourceMappingURL=SegmentedControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAEL,YAAY,EACZ,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAkC7C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAK,EACnC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EAAE,EACN,SAAS,GAAG,yBAAyB,EACrC,OAAO,GAAG,wBAAwB,EAClC,KAAK,GAAG,yBAAyB,EACjC,YAAY,GAAG,wBAAwB,EACvC,IAAI,GAAG,iBAAiB,EACxB,UAAU,GAAG,wBAAwB,EACrC,MAAM,GAAG,iBAAiB,EAC1B,SAAS,GAAG,KAAK,GAClB,GAAG,EAAE,GACmB,EAAE,EAAE;IAC7B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,uBAAuB,GAC3B,UAAU,IAAI,mBAAmB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAA;IACtD,MAAM,mBAAmB,GAAG,MAAM,IAAI,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IACxE,MAAM,yBAAyB,GAAG,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;IAE1E,OAAO,CACL,KAAC,aAAa,wBACM,uBAAuB,gBAC7B,SAAS,YAErB,MAAC,gBAAgB,
|
|
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: 4px;\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: 4px;\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"]}
|
|
@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
export const ToggleButton = ({ name, value, onChange, isSelected, isDisabled = false, children, }) => {
|
|
5
|
-
return (_jsxs(Wrapper, { as: "label", "data-testid": `value-toggle-${String(value)}`, isDisabled: isDisabled, children: [_jsx(VisuallyHiddenInput, { type: "radio", name: name, checked: isSelected, onClick: () => onChange(value), onChange: () => onChange(value) }), children] }));
|
|
5
|
+
return (_jsxs(Wrapper, { as: "label", "data-testid": `value-toggle-${String(value)}`, "$isDisabled": isDisabled, children: [_jsx(VisuallyHiddenInput, { type: "radio", name: name, checked: isSelected, onClick: () => onChange(value), onChange: () => onChange(value) }), children] }));
|
|
6
6
|
};
|
|
7
7
|
const Wrapper = styled(Box) `
|
|
8
8
|
cursor: pointer;
|
|
9
|
-
${({ isDisabled }) => isDisabled &&
|
|
9
|
+
${({ $isDisabled }) => $isDisabled &&
|
|
10
10
|
css `
|
|
11
11
|
pointer-events: none;
|
|
12
12
|
opacity: 0.5;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/SegmentedControl/ToggleButton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAW5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAS,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,QAAQ,GACiB,EAAE,EAAE;IAC7B,OAAO,CACL,MAAC,OAAO,IACN,EAAE,EAAC,OAAO,iBACG,gBAAgB,MAAM,CAAC,KAAK,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/SegmentedControl/ToggleButton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAW5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAS,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,QAAQ,GACiB,EAAE,EAAE;IAC7B,OAAO,CACL,MAAC,OAAO,IACN,EAAE,EAAC,OAAO,iBACG,gBAAgB,MAAM,CAAC,KAAK,CAAC,EAAE,iBAC/B,UAAU,aAEvB,KAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAC/B,EACD,QAAQ,IACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAA0B;;IAEjD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACpB,WAAW;IACX,GAAG,CAAA;;;KAGF;;;;;;;CAOJ,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;CAQvC,CAAA","sourcesContent":["import { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Box } from '../Box'\n\ntype ToggleButtonProps<Value> = {\n name: string\n value: Value\n onChange: (value: Value) => void\n isSelected: boolean\n isDisabled?: boolean\n children: ReactNode\n}\n\nexport const ToggleButton = <Value,>({\n name,\n value,\n onChange,\n isSelected,\n isDisabled = false,\n children,\n}: ToggleButtonProps<Value>) => {\n return (\n <Wrapper\n as=\"label\"\n data-testid={`value-toggle-${String(value)}`}\n $isDisabled={isDisabled}\n >\n <VisuallyHiddenInput\n type=\"radio\"\n name={name}\n checked={isSelected}\n onClick={() => onChange(value)}\n onChange={() => onChange(value)}\n />\n {children}\n </Wrapper>\n )\n}\n\nconst Wrapper = styled(Box)<{ $isDisabled: boolean }>`\n cursor: pointer;\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n pointer-events: none;\n opacity: 0.5;\n `}\n padding: 10px 14px;\n transition: color 0.1s linear;\n height: fit-content;\n width: 100%;\n align-content: center;\n z-index: 3;\n`\n\nconst VisuallyHiddenInput = styled.input`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "14.5.
|
|
3
|
+
"version": "14.5.1",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"@testing-library/jest-dom": "^6.9.1",
|
|
59
59
|
"@testing-library/react": "^16.3.2",
|
|
60
60
|
"@types/body-scroll-lock": "^3.1.2",
|
|
61
|
-
"@types/node": "^25.2.
|
|
62
|
-
"@types/react": "^19.2.
|
|
61
|
+
"@types/node": "^25.2.3",
|
|
62
|
+
"@types/react": "^19.2.14",
|
|
63
63
|
"@types/react-dom": "^19.2.3",
|
|
64
64
|
"@typescript-eslint/eslint-plugin": "^8.55.0",
|
|
65
65
|
"@typescript-eslint/parser": "^8.55.0",
|