-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🪟 🎨 🧹 Migrate Card component to SCSS and refactor #16407
Changes from 18 commits
8a71d81
b2c02c5
4c58eed
d565866
ae68f27
546dcfb
80d3019
477bceb
77b794a
d79cc9c
33978c1
db170fc
84baa81
916ec16
d644ee0
c6837e4
1853a52
c719ed9
1497f64
e0f83b1
6aa4f5d
c06827b
d113072
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
@use "../../scss/colors"; | ||
|
||
.lightContentCard { | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
flex-direction: row; | ||
padding: 20px 21px 19px; | ||
margin-bottom: 12px; | ||
} | ||
|
||
.arrow { | ||
font-size: 29px; | ||
line-height: 29px; | ||
color: colors.$blue-500; | ||
} | ||
|
||
.extraBlock { | ||
background: none; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,42 +1,23 @@ | ||
import { faChevronRight } from "@fortawesome/free-solid-svg-icons"; | ||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
import classNames from "classnames"; | ||
import React from "react"; | ||
import styled from "styled-components"; | ||
|
||
import ContentCard from "../ContentCard"; | ||
import { Card } from "../base/Card"; | ||
import { ConnectionBlockItem, Content } from "./components/ConnectionBlockItem"; | ||
import styles from "./ConnectionBlock.module.scss"; | ||
|
||
interface IProps { | ||
className?: string; | ||
itemFrom?: { name: string; icon?: string }; | ||
itemTo?: { name: string; icon?: string }; | ||
} | ||
|
||
const LightContentCard = styled(ContentCard)` | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
flex-direction: row; | ||
padding: 20px 21px 19px; | ||
margin-bottom: 12px; | ||
`; | ||
|
||
const Arrow = styled(FontAwesomeIcon)` | ||
font-size: 29px; | ||
line-height: 29px; | ||
color: ${({ theme }) => theme.primaryColor}; | ||
`; | ||
|
||
const ExtraBlock = styled(Content)` | ||
background: none; | ||
`; | ||
|
||
const ConnectionBlock: React.FC<IProps> = (props) => ( | ||
<LightContentCard className={props.className}> | ||
{props.itemFrom ? <ConnectionBlockItem {...props.itemFrom} /> : <ExtraBlock />} | ||
<Arrow icon={faChevronRight} /> | ||
{props.itemTo ? <ConnectionBlockItem {...props.itemTo} /> : <ExtraBlock />} | ||
</LightContentCard> | ||
<Card className={classNames(styles.lightContentCard)}> | ||
{props.itemFrom ? <ConnectionBlockItem {...props.itemFrom} /> : <Content className={styles.extraBlock} />} | ||
<FontAwesomeIcon className={styles.arrow} icon={faChevronRight} /> | ||
{props.itemTo ? <ConnectionBlockItem {...props.itemTo} /> : <Content className={styles.extraBlock} />} | ||
</Card> | ||
); | ||
|
||
export default ConnectionBlock; |
This file was deleted.
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
@use "../../../scss/colors"; | ||
|
||
.container { | ||
width: auto; | ||
background: colors.$white; | ||
border-radius: 10px; | ||
box-shadow: 0 2px 4px colors.$cardShadowColor; | ||
|
||
&.fullWidth { | ||
width: 100%; | ||
} | ||
|
||
&.withPadding { | ||
padding: 20px; | ||
} | ||
} | ||
|
||
.title { | ||
padding: 25px 25px 22px; | ||
color: colors.$dark-blue; | ||
border-bottom: #e8e8ed 1px solid; | ||
font-weight: 600; | ||
letter-spacing: 0.008em; | ||
border-top-left-radius: 10px; | ||
border-top-right-radius: 10px; | ||
|
||
&.lightPadding { | ||
padding: 19px 20px 20px; | ||
} | ||
|
||
&.roundedBottom { | ||
border-radius: 10px; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,48 @@ | ||
import styled from "styled-components"; | ||
import classNames from "classnames"; | ||
import React from "react"; | ||
|
||
export const Card = styled.div<{ full?: boolean; $withPadding?: boolean }>` | ||
width: ${({ full }) => (full ? "100%" : "auto")}; | ||
background: ${({ theme }) => theme.whiteColor}; | ||
border-radius: 10px; | ||
box-shadow: 0 2px 4px ${({ theme }) => theme.cardShadowColor}; | ||
padding: ${({ $withPadding }) => ($withPadding ? "20px" : undefined)}; | ||
//border: 1px solid ${({ theme }) => theme.greyColor20}; | ||
`; | ||
import { H5 } from "../Titles"; | ||
import styles from "./Card.module.scss"; | ||
|
||
export interface CardProps { | ||
title?: React.ReactNode; | ||
className?: string; | ||
fullWidth?: boolean; | ||
lightPadding?: boolean; | ||
withPadding?: boolean; | ||
roundedBottom?: boolean; | ||
} | ||
|
||
export const Card: React.FC<CardProps> = ({ | ||
children, | ||
title, | ||
className, | ||
fullWidth, | ||
lightPadding, | ||
withPadding, | ||
roundedBottom, | ||
}) => { | ||
return ( | ||
<div | ||
className={classNames( | ||
className, | ||
styles.container, | ||
fullWidth ? styles.fullWidth : undefined, | ||
withPadding ? styles.withPadding : undefined | ||
)} | ||
> | ||
{title ? ( | ||
<H5 | ||
className={classNames( | ||
styles.title, | ||
lightPadding || !children ? styles.lightPadding : undefined, | ||
roundedBottom ? styles.roundedBottom : undefined | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Repeat above object pattern here 👍 |
||
)} | ||
> | ||
{title} | ||
</H5> | ||
) : null} | ||
{children} | ||
</div> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
$white: #fff; | ||
$shadowColor: rgb(26 25 77 / 12%); | ||
|
||
.button { | ||
padding: 20px 28px 20px 20px; | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
margin-bottom: 10px; | ||
cursor: pointer; | ||
width: 100%; | ||
background: $white; | ||
border-radius: 10px; | ||
box-shadow: 0 2px 4px $shadowColor; | ||
border: none; | ||
} | ||
|
||
.iconColor { | ||
color: #615eff; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. All these free-standing colors make me a touch nervous. Are we sure these colors can't come from There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh I might have missed this one, sorry! I was having trouble importing There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If you continue to have issues with it, feel free to shoot me a ping! Edit: Looks like you got it figured out 👍 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,28 +1,16 @@ | ||
import { faChevronRight } from "@fortawesome/free-solid-svg-icons"; | ||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
import React from "react"; | ||
import styled from "styled-components"; | ||
|
||
import { H5, ContentCard } from "components"; | ||
import { H5 } from "components"; | ||
|
||
const Item = styled(ContentCard)` | ||
padding: 20px 28px 20px 20px; | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
margin-bottom: 10px; | ||
cursor: pointer; | ||
`; | ||
|
||
const Arrow = styled(FontAwesomeIcon)` | ||
color: ${({ theme }) => theme.primaryColor}; | ||
`; | ||
import styles from "./WorkspaceItem.module.scss"; | ||
|
||
const WorkspaceItem: React.FC<{ onClick: (id: string) => void; id: string }> = (props) => ( | ||
<Item onClick={() => props.onClick(props.id)}> | ||
<button className={styles.button} onClick={() => props.onClick(props.id)}> | ||
<H5 bold>{props.children}</H5> | ||
<Arrow icon={faChevronRight} /> | ||
</Item> | ||
<FontAwesomeIcon className={styles.iconColor} icon={faChevronRight} /> | ||
</button> | ||
); | ||
|
||
export default WorkspaceItem; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.