Skip to content

Commit 4537cc1

Browse files
nomerdvadcatpyatnomerdvadcatpyat
authored
feat(condo): DOMA-8365 changed card styles, added checkbox card (#4359)
* feat(ui): DOMA-8365 changed active style, changed focus outline * feat(ui): DOMA-8365 added checkbox card type * feat(ui): DOMA-8365 separate card and checkboxCard components * feat(ui): DOMA-8365 checkbox in body if no title * feat(condo): DOMA-8365 update card component in useTicketQualityControlModal * feat(ui): DOMA-8365 move values to consts in checkboxCard * feat(ui): DOMA-8365 added default hoverable to checkbox card, added pointerEvents none to inner checkbox * feat(ui): DOMA-8365 fix card flick, rename active to accent * fix(condo): DOMA-8365 separate cardButton and cardCheckbox * feat(ui): DOMA-8401 added ProgressIndicator component * feat(ui): DOMA-8365 added modalHeader * feat(ui): DOMA-8365 made header and body props in cardButton * feat(ui): DOMA-8365 update card checkbox component * feat(condo): DOMA-8365 revert changes in ticket modal * fix(ui): DOMA-8365 fixes after review * fix(ui): DOMA-8365 fix body content width * fix(ui): DOMA-8365 added defaultChecked, checked and onChange props to checkbox card * fix(ui): DOMA-8365 moved progressIndicator steps to separate file
1 parent f01ef68 commit 4537cc1

23 files changed

+1120
-41
lines changed

‎packages/ui/src/components/Card/_utils/constants.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const CARD_CLASS_PREFIX = 'condo-card'

‎packages/ui/src/components/Card/_utils/index.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { MouseEventHandler } from 'react'
2+
3+
import { IconProps } from '@open-condo/icons'
4+
5+
import { Space } from '../../Space'
6+
import { Typography } from '../../Typography'
7+
8+
9+
export type CardLinkType = {
10+
LinkWrapper?: React.FC<{ children: React.ReactElement, href: string }>
11+
label: string
12+
href: string
13+
PreIcon?: React.FC<IconProps>
14+
AfterIcon?: React.FC<IconProps>
15+
}
16+
17+
export const renderLink = (linkProps: CardLinkType) => {
18+
const { PreIcon, AfterIcon, LinkWrapper, label, href } = linkProps
19+
20+
const handleLinkClick: MouseEventHandler = e => e.stopPropagation()
21+
22+
return (
23+
<Space size={8} direction='horizontal' align='center'>
24+
{PreIcon && <PreIcon size='small' />}
25+
{
26+
LinkWrapper ? (
27+
<LinkWrapper href={href}>
28+
<Typography.Link href={href} onClick={handleLinkClick}>{label}</Typography.Link>
29+
</LinkWrapper>
30+
) : (
31+
<Typography.Link href={href} onClick={handleLinkClick}>{label}</Typography.Link>
32+
)
33+
}
34+
{AfterIcon && <AfterIcon size='small' />}
35+
</Space>
36+
)
37+
}

‎packages/ui/src/components/Card/body/cardBody.less

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@import (reference) "@open-condo/ui/src/tokens/variables.less";
2+
@import (reference) "@open-condo/ui/src/components/style/core/breakpoints.less";
3+
4+
.condo-card {
5+
.condo-card-body {
6+
@media @from-mobile-small and @to-tablet-small {
7+
& {
8+
padding: @condo-global-spacing-16;
9+
}
10+
}
11+
12+
@media @from-tablet-large {
13+
& {
14+
padding: @condo-global-spacing-24;
15+
}
16+
}
17+
}
18+
19+
&-no-body .condo-card-body {
20+
display: none;
21+
}
22+
23+
.condo-card-body-content {
24+
width: 100%;
25+
white-space: break-spaces;
26+
27+
&-image-container {
28+
display: flex;
29+
align-items: center;
30+
align-self: stretch;
31+
justify-content: center;
32+
width: 100%;
33+
background-color: @condo-global-color-gray-1;
34+
border-radius: @condo-global-spacing-12;
35+
}
36+
37+
& .condo-btn {
38+
width: 100%;
39+
}
40+
}
41+
}

‎packages/ui/src/components/Card/body/cardBody.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { CSSProperties } from 'react'
2+
3+
import './cardBody.less'
4+
5+
import { Button, ButtonProps } from '../../Button'
6+
import { Space } from '../../Space'
7+
import { Typography } from '../../Typography'
8+
import { CardLinkType, renderLink } from '../_utils'
9+
import { CARD_CLASS_PREFIX } from '../_utils/constants'
10+
11+
12+
export type CardBodyProps = {
13+
bodyTitle?: string
14+
description?: string
15+
image?: { src: string, style?: CSSProperties }
16+
caption?: string
17+
mainLink?: CardLinkType
18+
secondLink?: CardLinkType
19+
button?: ButtonProps
20+
}
21+
22+
const CARD_HEADER_CONTENT_CLASS_NAME_PREFIX = `${CARD_CLASS_PREFIX}-body-content`
23+
24+
const CardBody: React.FC<CardBodyProps> = (props) => {
25+
const {
26+
bodyTitle,
27+
description,
28+
image,
29+
caption,
30+
mainLink,
31+
secondLink,
32+
button,
33+
} = props
34+
35+
return (
36+
<Space size={8} direction='vertical' className={CARD_HEADER_CONTENT_CLASS_NAME_PREFIX}>
37+
{bodyTitle && (
38+
<Typography.Title level={3}>{bodyTitle}</Typography.Title>
39+
)}
40+
{description && (
41+
<Typography.Text size='medium' type='secondary'>{description}</Typography.Text>
42+
)}
43+
{image && (
44+
<div className={`${CARD_CLASS_PREFIX}-body-content-image-container`}>
45+
<img src={image.src} style={image.style}/>
46+
</div>
47+
)}
48+
{caption && (
49+
<Typography.Text size='small' type='secondary'>{caption}</Typography.Text>
50+
)}
51+
{mainLink && renderLink(mainLink)}
52+
{secondLink && renderLink(secondLink)}
53+
{button && (
54+
<Button {...button} />
55+
)}
56+
</Space>
57+
)
58+
}
59+
60+
export {
61+
CardBody,
62+
}

‎packages/ui/src/components/Card/button/cardButton.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import classNames from 'classnames'
2+
import React from 'react'
3+
4+
import '../checkbox/cardCheckbox.less'
5+
import { CARD_CLASS_PREFIX } from '../_utils/constants'
6+
import { CardBody, CardBodyProps } from '../body/cardBody'
7+
import { Card, CardProps } from '../card'
8+
import { CardHeader, CardHeaderProps } from '../header/cardHeader'
9+
10+
11+
export type CardButtonProps = Pick<CardProps, 'accent' | 'disabled'> & {
12+
header?: CardHeaderProps
13+
body?: CardBodyProps
14+
}
15+
16+
const CardButton = React.forwardRef<HTMLDivElement, CardButtonProps>((props, ref) => {
17+
const {
18+
header,
19+
body,
20+
...rest
21+
} = props
22+
23+
const className = classNames({
24+
[`${CARD_CLASS_PREFIX}-button-type`]: true,
25+
[`${CARD_CLASS_PREFIX}-no-body`]: !body,
26+
})
27+
28+
return (
29+
<Card
30+
{...rest}
31+
ref={ref}
32+
className={className}
33+
hoverable
34+
title={header && <CardHeader {...header} />}
35+
>
36+
{body && <CardBody {...body}/>}
37+
</Card>
38+
)
39+
})
40+
41+
CardButton.displayName = 'CardButton'
42+
43+
export {
44+
CardButton,
45+
}

‎packages/ui/src/components/Card/card.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,35 @@ import {
55
import classNames from 'classnames'
66
import React, { CSSProperties } from 'react'
77

8-
const CARD_CLASS_PREFIX = 'condo-card'
8+
import { CARD_CLASS_PREFIX } from './_utils/constants'
9+
910

1011
export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> &
1112
Pick<DefaultCardProps, 'hoverable' | 'title'> & {
1213
width?: CSSProperties['width']
1314
bodyPadding?: CSSProperties['padding']
1415
titlePadding?: CSSProperties['padding']
16+
accent?: boolean
1517
active?: boolean
18+
disabled?: boolean
1619
}
1720

1821
const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
1922
const {
2023
width,
21-
bodyPadding = 24,
22-
titlePadding = 24,
24+
bodyPadding,
25+
titlePadding,
2326
active = false,
27+
accent = false,
28+
disabled = false,
2429
className: propsClassName,
2530
...rest
2631
} = props
2732

2833
const className = classNames(propsClassName, {
2934
[`${CARD_CLASS_PREFIX}-active`]: active,
35+
[`${CARD_CLASS_PREFIX}-accent`]: accent,
36+
[`${CARD_CLASS_PREFIX}-disabled`]: disabled,
3037
})
3138

3239
return (

‎packages/ui/src/components/Card/checkbox/cardCheckbox.less

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
@import (reference) "@open-condo/ui/src/components/Card/style.less";
2+
3+
@condo-card-checkbox-active-outline-indent: 0;
4+
@condo-card-checkbox-checkbox-padding: @condo-global-spacing-12;
5+
6+
.condo-card {
7+
&-checkbox-type {
8+
cursor: pointer;
9+
10+
& .condo-card-checkbox {
11+
position: absolute;
12+
top: @condo-card-checkbox-checkbox-padding;
13+
right: @condo-card-checkbox-checkbox-padding;
14+
pointer-events: none;
15+
}
16+
}
17+
18+
&-checked&-checkbox-type {
19+
& .condo-card-head {
20+
background: @condo-global-color-brand-gradient-1;
21+
border-color: transparent;
22+
23+
& * {
24+
color: @condo-global-color-green-5;
25+
}
26+
}
27+
28+
& .condo-card-body {
29+
border-color: transparent;
30+
}
31+
32+
&:hover {
33+
box-shadow: @condo-global-box-shadow-active;
34+
}
35+
36+
// Used for gradient outline on checked checkbox card
37+
&::before {
38+
position: absolute;
39+
top: @condo-card-checkbox-active-outline-indent;
40+
right: @condo-card-checkbox-active-outline-indent;
41+
bottom: @condo-card-checkbox-active-outline-indent;
42+
left: @condo-card-checkbox-active-outline-indent;
43+
display: block;
44+
box-sizing: border-box;
45+
background: @condo-global-color-brand-gradient-5 border-box;
46+
border: @condo-global-border-width-default solid transparent;
47+
border-radius: inherit;
48+
content: "";
49+
mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
50+
-webkit-mask-composite: xor;
51+
mask-composite: exclude;
52+
}
53+
54+
&:active {
55+
box-shadow: none;
56+
}
57+
}
58+
}

0 commit comments

Comments
 (0)