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
kupibilet-frontend · Dec 14, 2022 · ed2b3f2 · ed2b3f2
1 parent 986ca4a
commit ed2b3f2
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "@babel/preset-typescript": "^7.12.7",
     "@babel/types": "^7.12.12",
     "@emotion/core": "^10.0.10",
-    "@kupibilet/icons": "5.9.31",
+    "@kupibilet/icons": "5.9.32",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/client-api": "^6.5.9",
     "@storybook/react": "^6.5.9",
@@ -136,7 +136,7 @@
     "section-iterator": "^2.0.0"
   },
   "peerDependencies": {
-    "@kupibilet/icons": "^5.9.4",
+    "@kupibilet/icons": "^5.9.32",
     "classnames": "^2.2.5",
     "lodash": "^4.17.4",
     "moment": "^2.29.1",

diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
@@ -22,6 +22,7 @@ function Popover(props: TPopoverProps): JSX.Element {
     size = 'normal',
     zIndex = OVERLAY_Z_INDEX - 1,
     className = '',
+    autoWidth = false,
   } = props
 
   const {
@@ -63,7 +64,7 @@ function Popover(props: TPopoverProps): JSX.Element {
               >
                 <PopoverIcon side={side} />
               </PopoverIconContainer>
-              <PopoverBackground size={size}>
+              <PopoverBackground size={size} autoWidth={autoWidth} header={header}>
                 {header && (
                   <Header>
                     <HeaderText>

diff --git a/src/components/Popover/styled.ts b/src/components/Popover/styled.ts
@@ -11,7 +11,7 @@ interface TGetBackgroundImage {
 }
 
 const getBackgroundImage = ({ theme }: TGetBackgroundImage) => {
-  const iconSrc = getPopoverArrow(theme.color.colorTextContrastNormal)
+  const iconSrc = getPopoverArrow(theme.color.colorBgContrastNormal)
 
   if (iconSrc) {
     return `background-image: ${iconSrc}`
@@ -72,15 +72,18 @@ const PopoverBackground = styled.div<TPopoverBackgroundProps>`
   animation: 0.15s ease-out forwards ${CONTAINER_ANIMATION_KEYFRAMES};
   flex-shrink: 0;
   flex-grow: 1;
-  min-width: 240px;
-  max-width: ${({ size }) => POPOVER_SIZES[size]};
   background: ${({ theme }) => theme.color.colorBgContrastNormal};
   color: ${({ theme }) => theme.color.colorTextContrastNormal};
   border-radius: 6px;
-  padding: 12px;
+  padding: ${({ header }) => (header ? '12px' : '8px')} 12px;
   display: flex;
   flex-direction: column;
 
+  ${({ size, autoWidth }) => !autoWidth && css`
+    min-width: 240px;
+    max-width: ${POPOVER_SIZES[size]};
+  `}
+
   @media ${queries.isHandheld} {
     max-width: auto;
     flex: 1;
@@ -122,4 +125,6 @@ export {
   PopoverIconContainer,
   PopoverIcon,
   TextCaption,
+  getBackgroundImage,
+  CONTAINER_ANIMATION_KEYFRAMES,
 }
diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts
@@ -32,6 +32,8 @@ type TPopoverProps = {
    * allow popover usage with styled components
    */
   className?: string,
+
+  autoWidth?: boolean,
 }
 
 type TPopoverWithDefaultsProps = Required<TPopoverProps>
@@ -40,7 +42,9 @@ interface TPopoverIconProps {
   side: BasePlacement,
 }
 
-type TPopoverBackgroundProps = Pick<TPopoverWithDefaultsProps, 'size'>
+type TPopoverBackgroundProps = Pick<TPopoverWithDefaultsProps, 'size' | 'autoWidth'> & {
+  header: TPopoverProps['header']
+}
 
 
 export {

diff --git a/src/components/Switch/index.tsx b/src/components/Switch/index.tsx
@@ -1,20 +1,31 @@
 import React from 'react'
 
 import { TTypographyProps } from 'components/Typography'
+import { WrappedFieldProps } from 'redux-form'
 import { InnerInput, LabelText, SwitchWrapper } from './styled'
 
 export type TLabelPlacement = 'end' | 'start'
 
 export type TSwitchProps = {
   className?: string
   disabled?: boolean
+  name?: string,
   label?: string
   labelPlacement?: TLabelPlacement
   labelProps?: Omit<Partial<TTypographyProps>, 'children'> & { variant: Extract<TTypographyProps['variant'], 'medium' | 'large'> }
 } & React.HTMLProps<HTMLInputElement>
 
 export function Switch(props: TSwitchProps): JSX.Element {
-  const { checked, className, label, labelProps, labelPlacement = 'end', disabled, ...rest } = props
+  const {
+    checked,
+    className,
+    label,
+    labelProps,
+    labelPlacement = 'end',
+    name = '',
+    disabled,
+    ...rest
+  } = props
 
   return (
     <SwitchWrapper className={className} disabled={disabled} checked={checked} labelProps={{ variant: labelProps?.variant || 'medium', ...labelProps }}>
@@ -24,6 +35,7 @@ export function Switch(props: TSwitchProps): JSX.Element {
         checked={checked ?? false}
         labelPlacement={labelPlacement}
         disabled={disabled}
+        name={name}
         {...rest}
       />
       {Boolean(label) && (
@@ -40,3 +52,28 @@ export function Switch(props: TSwitchProps): JSX.Element {
     </SwitchWrapper>
   )
 }
+
+export type TRFSwitchProps = WrappedFieldProps & {
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
+}
+
+const RFSwitch = React.memo((props: TRFSwitchProps) => {
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { onChange } = props.input || props
+    onChange(e.target.checked)
+  }
+
+  const { input, ...restProps } = props
+  const { checked } = input || props
+
+  return (
+    <Switch
+      {...restProps}
+      {...input}
+      checked={Boolean(checked)}
+      onChange={onChangeHandler}
+    />
+  )
+})
+
+export default RFSwitch
diff --git a/src/components/Tag/styled.ts b/src/components/Tag/styled.ts
@@ -35,6 +35,9 @@ export const Wrapper = styled.div<ITagProps>`
   background: ${({ theme, variant }) => theme.tag[`tag_label_${variant}_medium_color_bg_default`]};
   color: ${({ theme, variant }) => theme.tag[`tag_label_${variant}_medium_color_text_default`]};
   ${({ theme, variant }) => getPadding(theme, variant)}
+  .icon-inherit-color {
+    fill: ${({ theme, variant }) => theme.tag[`tag_label_${variant}_medium_color_text_default`]};
+  }
 `
 
 export const StyledIcon = styled(Icon)<ITagProps>`

diff --git a/src/components/Typography/index.tsx b/src/components/Typography/index.tsx
@@ -50,7 +50,7 @@ const calculateTokenVariant = (variant: TVariant): TVariantToken => {
   }
 }
 
-export interface TTypographyProps {
+export interface TTypographyProps extends Omit<React.HTMLProps<HTMLHtmlElement>, 'as'> {
   variant?: TVariant,
   color?: COLOR_NAMES,
   isBold?: boolean,

diff --git a/yarn.lock b/yarn.lock
@@ -1761,10 +1761,10 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@kupibilet/[email protected].31":
-  version "5.9.31"
-  resolved "https://registry.yarnpkg.com/@kupibilet/icons/-/icons-5.9.31.tgz#5ac8cfe74623aaaa78f5f9cad1a4529be961722c"
-  integrity sha512-um2eRyw64l0H4GsGKo/7oDcd3CTwS7/fK2w60bt5ktdLeGc2MlPWkOz+fSEhE0tUn8kIhgPNPq5IEdmcF90NiQ==
+"@kupibilet/[email protected].32":
+  version "5.9.32"
+  resolved "https://registry.yarnpkg.com/@kupibilet/icons/-/icons-5.9.32.tgz#cb57176bd1e33f0d930098db2ad840a8b795b2f0"
+  integrity sha512-8SNpw6VhioLJO8ZxClRxn+aIv4rd68jQSSRMxurt49AKD4IZTqQnfQlpXCzPGgv3GXoA8zpRniyacJJtGPFIgQ==
 
 "@mdx-js/mdx@^1.6.22":
   version "1.6.22"