From ed2b3f24ef7749fe0d4dd8bcf7c5735cc629f4da Mon Sep 17 00:00:00 2001 From: MichaelShipitsyn <38543952+MichaelShipitsyn@users.noreply.github.com> Date: Wed, 14 Dec 2022 12:56:51 +0300 Subject: [PATCH] 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 --- package.json | 4 +-- src/components/Popover/index.tsx | 3 ++- src/components/Popover/styled.ts | 13 +++++++--- src/components/Popover/types.ts | 6 ++++- src/components/Switch/index.tsx | 39 ++++++++++++++++++++++++++++- src/components/Tag/styled.ts | 3 +++ src/components/Typography/index.tsx | 2 +- yarn.lock | 8 +++--- 8 files changed, 64 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index d5cff1a9..95c16aed 100644 --- 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 index 3efc78da..5adf6b9f 100644 --- 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 { > - + {header && (
diff --git a/src/components/Popover/styled.ts b/src/components/Popover/styled.ts index fcb0057a..86dc9d2f 100644 --- 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` 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 index da8f33cc..4f232ec9 100644 --- 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 @@ -40,7 +42,9 @@ interface TPopoverIconProps { side: BasePlacement, } -type TPopoverBackgroundProps = Pick +type TPopoverBackgroundProps = Pick & { + header: TPopoverProps['header'] +} export { diff --git a/src/components/Switch/index.tsx b/src/components/Switch/index.tsx index 25618614..80a04b65 100644 --- a/src/components/Switch/index.tsx +++ b/src/components/Switch/index.tsx @@ -1,6 +1,7 @@ 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' @@ -8,13 +9,23 @@ export type TLabelPlacement = 'end' | 'start' export type TSwitchProps = { className?: string disabled?: boolean + name?: string, label?: string labelPlacement?: TLabelPlacement labelProps?: Omit, 'children'> & { variant: Extract } } & React.HTMLProps 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 ( @@ -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 { ) } + +export type TRFSwitchProps = WrappedFieldProps & { + onChange?: (event: React.ChangeEvent) => void, +} + +const RFSwitch = React.memo((props: TRFSwitchProps) => { + const onChangeHandler = (e: React.ChangeEvent) => { + const { onChange } = props.input || props + onChange(e.target.checked) + } + + const { input, ...restProps } = props + const { checked } = input || props + + return ( + + ) +}) + +export default RFSwitch diff --git a/src/components/Tag/styled.ts b/src/components/Tag/styled.ts index 6e7aba47..f3d11c30 100644 --- a/src/components/Tag/styled.ts +++ b/src/components/Tag/styled.ts @@ -35,6 +35,9 @@ export const Wrapper = styled.div` 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)` diff --git a/src/components/Typography/index.tsx b/src/components/Typography/index.tsx index 48f973d9..39866073 100644 --- 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, 'as'> { variant?: TVariant, color?: COLOR_NAMES, isBold?: boolean, diff --git a/yarn.lock b/yarn.lock index 7a1d7e70..a63e68b1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1761,10 +1761,10 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" -"@kupibilet/icons@5.9.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/icons@5.9.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"