From 4dd0dfea724a6244acd601bbffffacdbe40ad50f Mon Sep 17 00:00:00 2001 From: AlejoYarce Date: Mon, 11 Nov 2024 17:08:39 -0500 Subject: [PATCH] Switch on icon click fix --- src/components/Button/README.md | 2 +- .../Layer/LayerGroup/LayerGroup.stories.tsx | 90 +++++------ src/components/Layer/LayerGroup/index.tsx | 14 +- src/components/Layer/LayerItem/index.tsx | 4 +- src/components/Switch/Switch.stories.ts | 4 +- src/components/Switch/index.tsx | 92 ++---------- src/components/Switch/styled.ts | 142 ++++++++---------- src/components/Switch/types.ts | 1 + 8 files changed, 145 insertions(+), 204 deletions(-) diff --git a/src/components/Button/README.md b/src/components/Button/README.md index 089e2f7..b477b38 100644 --- a/src/components/Button/README.md +++ b/src/components/Button/README.md @@ -1,5 +1,5 @@ # Button - +[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/button--docs) ## Import ``` diff --git a/src/components/Layer/LayerGroup/LayerGroup.stories.tsx b/src/components/Layer/LayerGroup/LayerGroup.stories.tsx index d203278..097c861 100644 --- a/src/components/Layer/LayerGroup/LayerGroup.stories.tsx +++ b/src/components/Layer/LayerGroup/LayerGroup.stories.tsx @@ -58,48 +58,48 @@ export const LayerGroupOpen: Story = { }, } -// export const Radio: Story = { -// args: { -// name: 'radio-layer', -// label: 'Layer name', -// caption: 'Caption', -// variant: 'radio', -// }, -// } - -// export const Disabled: Story = { -// args: { -// name: 'switch-layer-1', -// label: 'Layer name', -// caption: 'Caption', -// isDisabled: true, -// }, -// } - -// export const RadioDisabeld: Story = { -// args: { -// name: 'radio-layer', -// label: 'Layer name', -// caption: 'Caption', -// variant: 'radio', -// isDisabled: true, -// }, -// } - -// export const NoInfoButton: Story = { -// args: { -// name: 'switch-layer-2', -// label: 'Layer name', -// caption: 'Caption', -// showInfoButton: false, -// }, -// } - -// export const CustomInfoButtonLabel: Story = { -// args: { -// name: 'switch-layer-3', -// label: 'Layer name', -// caption: 'Caption', -// infoButtonLabel: 'Another Label', -// }, -// } +export const LayerGroupWithRadios: Story = { + args: { + defaultIndex: [0], + allowMultiple: true, + allowToggle: true, + children: ( + <> + + + + ) + }, +} diff --git a/src/components/Layer/LayerGroup/index.tsx b/src/components/Layer/LayerGroup/index.tsx index 405cc18..147158b 100644 --- a/src/components/Layer/LayerGroup/index.tsx +++ b/src/components/Layer/LayerGroup/index.tsx @@ -6,7 +6,7 @@ import { useTheme, RadioGroup, } from '@chakra-ui/react' -import { useState } from 'react' +import { useEffect, useState } from 'react' import { LayerGroupProps } from './types' import { LayerGroupCaption, LayerGroupTitle } from './styled' import { getThemedColor } from '../../../lib/theme' @@ -21,6 +21,18 @@ const LayerGroup = ({ const [activeItems, setActiveItems] = useState<{ key?: string, value?: boolean }>({}) const theme = useTheme() + useEffect(() => { + let newActiveItems = { ...activeItems } + layerItems.forEach(item => { + newActiveItems = { + ...newActiveItems, + [item.name]: item.isDefaultSelected, + } + }) + + setActiveItems(newActiveItems) + }, []) + const handleOnChange = (e: React.ChangeEvent, onChange: ((e: React.ChangeEvent) => void) | undefined) => { const newActiveItems = { ...activeItems, diff --git a/src/components/Layer/LayerItem/index.tsx b/src/components/Layer/LayerItem/index.tsx index fc64d16..20020b0 100644 --- a/src/components/Layer/LayerItem/index.tsx +++ b/src/components/Layer/LayerItem/index.tsx @@ -20,7 +20,7 @@ const LayerItem = ({ variant = 'switch', isDisabled, onInfoClick, - isDefaultSelected, + isDefaultSelected = false, onChange, }: LayerItemProps) => { const isSwitch = variant === 'switch' @@ -36,7 +36,7 @@ const LayerItem = ({ onChange(e) : () => { }} /> diff --git a/src/components/Switch/Switch.stories.ts b/src/components/Switch/Switch.stories.ts index da3014d..8359bf6 100644 --- a/src/components/Switch/Switch.stories.ts +++ b/src/components/Switch/Switch.stories.ts @@ -18,14 +18,14 @@ type Story = StoryObj export const On: Story = { args: { name: 'switch-on', - isChecked: true, + defaultChecked: true, }, } export const DisabledOn: Story = { args: { name: 'switch-disabled-on', - isChecked: true, + defaultChecked: true, isDisabled: true, }, } diff --git a/src/components/Switch/index.tsx b/src/components/Switch/index.tsx index 432a5dd..c4c6388 100644 --- a/src/components/Switch/index.tsx +++ b/src/components/Switch/index.tsx @@ -1,103 +1,41 @@ -import React, { useEffect, useState } from 'react' -import { Switch as ChakraSwitch, FormLabel, useTheme } from '@chakra-ui/react' +import React from 'react' +import { FormLabel } from '@chakra-ui/react' import { SwitchProps } from './types' -import { - SwitchAndLabelContainer, - SwitchContainer, - SwitchContent, - SwitchIcon, - SwitchIconContainer, - SwitchIconHover, -} from './styled' -import { getThemedColor } from '../../lib/theme' +import { StyledSwitch, SwitchAndLabelContainer } from './styled' const Switch = ({ name, label, - isChecked = false, + defaultChecked = false, onChange, isDisabled = false, isLabelOnRight = false, ...rest }: SwitchProps) => { - const [isLocalChecked, setIsLocalChecked] = useState(isChecked) - const [isFocused, setIsFocused] = useState(false) - const theme = useTheme() - - useEffect(() => { - setIsLocalChecked(isChecked) - }, [isChecked]) - const handleOnChange = (e: React.ChangeEvent) => { - setIsLocalChecked(e.target.checked) - if (onChange) { onChange(e) } } - const handleOnIconClick = () => { - setIsLocalChecked(!isLocalChecked) - } - - const getBackgroundColor = () => { - let backgroundColor = getThemedColor(theme.colors, 'neutral', 500) - if (isLocalChecked) { - backgroundColor = getThemedColor(theme.colors, 'primary', 500) - } - - return isDisabled - ? getThemedColor(theme.colors, 'neutral', 300) - : backgroundColor - } - return ( - {!isLabelOnRight ? ( + {!isLabelOnRight && label ? ( {label} ) : null} - - - {!isDisabled ? ( - - ) : null} - - {isLocalChecked && !isDisabled ? ( - - ) : null} - - setIsFocused(true)} - onBlur={() => setIsFocused(false)} - {...rest} - /> - - - {isLabelOnRight ? ( - + {...rest} + /> + {isLabelOnRight && label ? ( + {label} ) : null} diff --git a/src/components/Switch/styled.ts b/src/components/Switch/styled.ts index 823a928..15da1ac 100644 --- a/src/components/Switch/styled.ts +++ b/src/components/Switch/styled.ts @@ -1,96 +1,86 @@ import styled from '@emotion/styled' -import { CheckIcon } from '@chakra-ui/icons' -import { SwitchContainerProps } from './types' +import { Switch } from '@chakra-ui/react' +import { getThemedColor, ThemeProps } from '../../lib/theme' export const SwitchAndLabelContainer = styled.div` display: flex; align-items: center; ` -export const SwitchContainer = styled.div` - width: 41px; +export const StyledSwitch = styled(Switch)<{ + theme?: ThemeProps +}>` .chakra-switch__track { - background-color: ${({ backgroundColor }) => backgroundColor}; - height: 20px; - width: 36px; - opacity: 1 !important; - box-shadow: none; - } + background-color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 500)}; + border: 1px solid ${({ theme }) => getThemedColor(theme.colors, 'neutral', 600)}; + padding: 3px 4px; - .chakra-switch__thumb { - background-color: ${({ checkedAndDisabledColor }) => - checkedAndDisabledColor}; - height: 16px; - width: 16px; - position: relative; - top: 2px; - left: ${({ isChecked }) => (isChecked ? '5px' : '2px')}; + &:focus-visible, + &[data-focus-visible] { + box-shadow: none; + outline: none; + outline: 2px solid ${({ theme }) => getThemedColor(theme.colors, 'primary', 700)}; + outline-offset: 2px; + } + + &[data-checked] { + background-color: ${({ theme }) => getThemedColor(theme.colors, 'primary', 500)}; + border: 1px solid ${({ theme }) => getThemedColor(theme.colors, 'primary', 700)}; + } + + &[data-disabled] { + background-color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 300)}; + border: 1px solid ${({ theme }) => getThemedColor(theme.colors, 'neutral', 300)}; + } } - ${({ isChecked, backgroundColor, isDisabled }) => - !isDisabled && - ` - &:hover .switch-icon-hover { - background-color: ${backgroundColor}; - opacity: 20%; - left: ${isChecked ? '13px' : '-5px'}; + .chakra-switch__thumb { + &:hover, &[data-hover] { + outline: 8px solid ${({ theme }) => getThemedColor(theme.colors, 'primary', 500)}20; } - `} - ${({ isChecked, isFocused, backgroundColor, isDisabled }) => - isFocused && - !isDisabled && - ` - .switch-icon-hover { - background-color: ${backgroundColor}; - opacity: 40%; - left: ${isChecked ? '13px' : '-5px'}; + &[data-active] { + outline: 8px solid ${({ theme }) => getThemedColor(theme.colors, 'primary', 500)}40; } - `} -` -export const SwitchContent = styled.div` - width: 34px; - display: flex; - align-items: center; - position: relative; -` + &[data-checked] { + &::before { + position: absolute; + left: -3.5px; + top: 7.5px; + height: 4px; + width: 1px; + background-color: ${({ theme }) => getThemedColor(theme.colors, 'primary', 700)}; + content: ""; + transform: translateX(10px) rotate(-45deg); + transform-origin: left bottom; + } -export const SwitchIconHover = styled.div` - height: 32px; - width: 32px; - border-radius: 50%; - position: absolute; - top: -4px; - left: -5px; -` + &::after { + position: absolute; + left: -3px; + bottom: 5px; + height: 1px; + width: 7px; + background-color: ${({ theme }) => getThemedColor(theme.colors, 'primary', 700)}; + content: ""; + transform: translateX(10px) rotate(-45deg); + transform-origin: left bottom; + } + } -export const SwitchIconContainer = styled.div` - height: 16px; - width: 16px; - border-radius: 50%; - background-color: transparent; - position: absolute; - top: 4px; - left: 21px; - z-index: 1; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - z-index: -1; - transform: translateX(-18px); - transition-property: transform; - transition-duration: 200ms; + &[data-disabled] { + outline: none; - &.move-me { - z-index: 1; - transform: translateX(0px); - transition-property: transform; - transition-duration: 100ms; - } -` + &[data-checked] { + &::before { + background-color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 500)}; + } -export const SwitchIcon = styled(CheckIcon)` - width: 10.5px; + &::after { + background-color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 500)}; + } + } + } + } ` diff --git a/src/components/Switch/types.ts b/src/components/Switch/types.ts index 4b9a125..b3b36cc 100644 --- a/src/components/Switch/types.ts +++ b/src/components/Switch/types.ts @@ -7,6 +7,7 @@ export type SwitchProps = Omit< name: string label?: string onChange?: (e: React.ChangeEvent) => void + defaultChecked?: boolean isDisabled?: boolean isLabelOnRight?: boolean }