@mrshmllw/smores-react 15.1.22 → 15.1.23
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"]}
|