Site 4233/rzd fares step1 (#588)

* Update @kupibilet/icons * Update icons * add name prop to Switch * Created RFSwitch * SITE-4092/move-document-to-step1 (#580) * Support icon-inherit-color to Tag component * Add autoWidth prop to Popover * fix * fix * Fix popover padding * Update @kupibilet/icons * Update icons * add name prop to Switch * Created RFSwitch * 24.7.1 * Add disabled prop for Toggler * added skeleton (#579) * added skeleton * SkeletonWithContainer * added tokens * duration * after fix * min-width * new animation Co-authored-by: zhenya <[email protected]> * 24.7.2 Co-authored-by: ZhenyaNeVihodi <[email protected]> Co-authored-by: zhenya <[email protected]>
kupibilet-frontend · Jan 19, 2023 · 9a5e0af · 9a5e0af
1 parent 84cacde
commit 9a5e0af
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/src/components/Toggler/Toggler.stories.tsx b/src/components/Toggler/Toggler.stories.tsx
@@ -20,6 +20,7 @@ export const GenderToggler = (args: TTogglerProps): JSX.Element => {
       {...args}
       onChange={onChange}
       name="gender"
+      disabled
     >
       <TogglerItem value="male">
         Мужской

diff --git a/src/components/Toggler/TogglerGroup/index.tsx b/src/components/Toggler/TogglerGroup/index.tsx
@@ -30,6 +30,8 @@ type TProps = {
   name?: string,
 
   helperText?: React.ReactNode,
+
+  disabled?: boolean,
 }
 
 /**
@@ -44,6 +46,7 @@ const TogglerGroup = ({
   errorMessage = '',
   name = '',
   helperText = '',
+  disabled = false,
   ...props
 }: TProps): JSX.Element => {
   return (
@@ -68,6 +71,7 @@ const TogglerGroup = ({
             errorMessage,
             name,
             hasDelimiter,
+            disabled,
             ...props,
           })
         })}

diff --git a/src/components/Toggler/TogglerItem/index.tsx b/src/components/Toggler/TogglerItem/index.tsx
@@ -17,6 +17,7 @@ type TProps = {
   onBlur?: () => void,
   className?: string,
   hasDelimiter?: boolean,
+  disabled?: boolean,
 }
 
 const ENTER_KEY_CODE = 13
@@ -32,6 +33,7 @@ const TogglerItem = ({
   onBlur,
   className = '',
   hasDelimiter = true,
+  disabled = false,
   ...props
 }: TProps): JSX.Element => {
   const isSelected = value === currentValue
@@ -43,6 +45,7 @@ const TogglerItem = ({
       as="div"
       onClick={() => onChange(value)}
       className={className}
+      disabled={disabled}
     >
       {children}
     </StyledWrapper>

diff --git a/src/components/Toggler/TogglerItem/styled.ts b/src/components/Toggler/TogglerItem/styled.ts
@@ -3,6 +3,7 @@ import { borderRadiusSmall } from 'utils/borderRadius'
 
 interface TStyledWrapperProps {
   isSelected: boolean,
+  disabled: boolean,
 }
 
 export const StyledWrapper = styled.span<TStyledWrapperProps>`
@@ -26,6 +27,13 @@ export const StyledWrapper = styled.span<TStyledWrapperProps>`
     font-weight: 500;
     box-shadow: 0px 1px 3px rgba(98, 112, 139, 0.2);
   `}
+
+  ${({ disabled }) => disabled && css`
+    pointer-events: none;
+    cursor: default;
+    color: ${({ theme }) => theme.color.colorTextAccentDisable};
+  `}
+
   ${({ theme }) => css`
     @media ${theme.queries.isMobile} {
       font-size: 14px;