From 53db12bce452729f644b1036cd7b36e14d62a377 Mon Sep 17 00:00:00 2001 From: Maria Mattlin Date: Tue, 5 Jul 2022 17:37:06 -0700 Subject: [PATCH 1/7] PROD-2321 #comment Implemented InfoCard component for collapsible and non-collapsible banners #time 3h --- src-ts/lib/info-card/InfoCard.module.scss | 61 ++++++++++++++++++ src-ts/lib/info-card/InfoCard.tsx | 64 +++++++++++++++++++ src-ts/lib/info-card/index.ts | 1 + src-ts/lib/svgs/icon-arrow.svg | 1 + src-ts/lib/svgs/index.ts | 2 + .../components/BasicInfoForm/index.jsx | 22 +++++-- 6 files changed, 147 insertions(+), 4 deletions(-) create mode 100644 src-ts/lib/info-card/InfoCard.module.scss create mode 100644 src-ts/lib/info-card/InfoCard.tsx create mode 100644 src-ts/lib/info-card/index.ts create mode 100644 src-ts/lib/svgs/icon-arrow.svg diff --git a/src-ts/lib/info-card/InfoCard.module.scss b/src-ts/lib/info-card/InfoCard.module.scss new file mode 100644 index 000000000..27624f2d7 --- /dev/null +++ b/src-ts/lib/info-card/InfoCard.module.scss @@ -0,0 +1,61 @@ +@import '../styles/includes'; + +.card { + width: 100%; + margin-top: 32px; + padding: 16px; + + &.collapsible { + border-radius: 4px; + } + + &.notCollapsible { + border-radius: 8px; + } + + .title { + display: flex; + justify-content: space-between; + align-items: center; + + &.collapsible { + cursor: pointer; + } + + span { + @include font-black-100; + font-size: 18px; + line-height: 22px; + text-transform: uppercase; + font-weight: 600; + } + + .arrowIcon { + + &.up { + transform: rotate(180deg); + } + } + } + + .spacing { + padding-bottom: 17px; + } + + .content { + @include font-black-100; + @include font-roboto; + } +} + +.gray { + background-color: $black-5; +} + +.turquoise { + background-color: $turq-15; +} + +.yellow { + background-color: $orange-25; +} \ No newline at end of file diff --git a/src-ts/lib/info-card/InfoCard.tsx b/src-ts/lib/info-card/InfoCard.tsx new file mode 100644 index 000000000..45603ba4e --- /dev/null +++ b/src-ts/lib/info-card/InfoCard.tsx @@ -0,0 +1,64 @@ +import classNames from 'classnames' +import { Dispatch, FC, ReactNode, SetStateAction, useState } from 'react' + +import { ArrowIcon } from '../svgs' + +import styles from './InfoCard.module.scss' + +interface InfoCardProps { + children: ReactNode, + color: 'gray' | 'turquoise' | 'yellow', + isCollapsible: boolean, + isOpen: boolean, + title?: string, +} + +// tslint:disable-next-line: cyclomatic-complexity +const InfoCard: FC = ({ + color = 'gray', + isCollapsible = false, + isOpen = true, + ...props +}: InfoCardProps) => { + + const [open, setOpen]: [boolean, Dispatch>] = useState(isOpen) + const showArrowUp: string = open ? styles.up : undefined + const showCollapsible: string = isCollapsible ? styles.collapsible : styles.notCollapsible + const showCollapsibleTitle: boolean = isCollapsible ? styles.collapsible : undefined + const showSpacing: boolean = open && !!props.title && !!props.children + + return ( +
+ {isCollapsible && ( +
setOpen(!open)} + role='button' + tabIndex={0} + > + {props.title} + +
+ +
+
+ )} + + {!isCollapsible && ( +
+ {props.title} +
+ )} + + {showSpacing && ( +
+ )} + + {open && +
{props.children}
+ } +
+ ) +} + +export default InfoCard diff --git a/src-ts/lib/info-card/index.ts b/src-ts/lib/info-card/index.ts new file mode 100644 index 000000000..113beef4a --- /dev/null +++ b/src-ts/lib/info-card/index.ts @@ -0,0 +1 @@ +export { default as InfoCard } from './InfoCard' diff --git a/src-ts/lib/svgs/icon-arrow.svg b/src-ts/lib/svgs/icon-arrow.svg new file mode 100644 index 000000000..f7122f3e4 --- /dev/null +++ b/src-ts/lib/svgs/icon-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src-ts/lib/svgs/index.ts b/src-ts/lib/svgs/index.ts index 6a5e5da55..e8fbd2a9e 100644 --- a/src-ts/lib/svgs/index.ts +++ b/src-ts/lib/svgs/index.ts @@ -3,6 +3,7 @@ import * as IconOutline from '@heroicons/react/outline' import * as IconSolid from '@heroicons/react/solid' import { ReactComponent as ActiveTabTipIcon } from './activetab-tip-icon.svg' +import { ReactComponent as ArrowIcon } from './icon-arrow.svg' import { ReactComponent as LogoIcon } from './logo.svg' import { ReactComponent as SocialIconFacebook } from './social-fb-icon.svg' import { ReactComponent as SocialIconInstagram } from './social-insta-icon.svg' @@ -12,6 +13,7 @@ import { ReactComponent as SocialIconYoutube } from './social-yt-icon.svg' import { ReactComponent as TooltipArrowIcon } from './tooltip-arrow.svg' export { ActiveTabTipIcon } +export { ArrowIcon } export { IconOutline } export { IconSolid } export { LogoIcon } diff --git a/src/routes/Products/components/BasicInfoForm/index.jsx b/src/routes/Products/components/BasicInfoForm/index.jsx index 1a982cefe..c293a15ef 100644 --- a/src/routes/Products/components/BasicInfoForm/index.jsx +++ b/src/routes/Products/components/BasicInfoForm/index.jsx @@ -30,6 +30,7 @@ import { import StyleOptions from "../StyleOptions"; import { WorkType, WorkTypeCategoryDesignIcon } from "../../../../../src-ts"; import classNames from "classnames"; +import { InfoCard } from "../../../../../src-ts/lib/info-card"; const BasicInfoForm = ({ formData, @@ -170,13 +171,26 @@ const BasicInfoForm = ({ showIcon icon={servicePriceIcon} /> - + {/* {helperBannerContent} - + */} + + {helperBannerContent} + - + {/* + {aboutBannerContent} + */} + {aboutBannerContent} - + From ec7a83d68a41dcbde164ed9e8da82b7303b4682f Mon Sep 17 00:00:00 2001 From: Maria Mattlin Date: Wed, 6 Jul 2022 10:12:34 -0700 Subject: [PATCH 2/7] PROD-2321 #comment Finalized InfoCard, got rid of cyclomatic complexity error --- src-ts/lib/info-card/InfoCard.tsx | 68 ++++++++++++++++++------------- 1 file changed, 40 insertions(+), 28 deletions(-) diff --git a/src-ts/lib/info-card/InfoCard.tsx b/src-ts/lib/info-card/InfoCard.tsx index 45603ba4e..75e9bc5bb 100644 --- a/src-ts/lib/info-card/InfoCard.tsx +++ b/src-ts/lib/info-card/InfoCard.tsx @@ -13,52 +13,64 @@ interface InfoCardProps { title?: string, } -// tslint:disable-next-line: cyclomatic-complexity const InfoCard: FC = ({ + children, color = 'gray', isCollapsible = false, isOpen = true, - ...props + title, }: InfoCardProps) => { const [open, setOpen]: [boolean, Dispatch>] = useState(isOpen) - const showArrowUp: string = open ? styles.up : undefined - const showCollapsible: string = isCollapsible ? styles.collapsible : styles.notCollapsible - const showCollapsibleTitle: boolean = isCollapsible ? styles.collapsible : undefined - const showSpacing: boolean = open && !!props.title && !!props.children + const collapsibleClass: string = isCollapsible ? styles.collapsible : styles.notCollapsible + const showSpacing: boolean = open && !!title && !!children return ( -
- {isCollapsible && ( -
setOpen(!open)} - role='button' - tabIndex={0} - > - {props.title} - -
- -
-
- )} - - {!isCollapsible && ( -
- {props.title} -
- )} +
+ {renderHeader(isCollapsible, open, setOpen, title || '')} {showSpacing && (
)} {open && -
{props.children}
+
{children}
}
) } +function renderHeader( + isCollapsible: boolean, + open: boolean, + setOpen: Dispatch>, + title: string +): JSX.Element { + + const arrowClass: string = open ? styles.up : undefined + + if (isCollapsible) { + return ( +
setOpen(!open)} + role='button' + tabIndex={0} + > + {title} + +
+ +
+
+ ) + } + + return ( +
+ {title} +
+ ) +} + export default InfoCard From 50406711f103819586b91147f64e846ba58dd277 Mon Sep 17 00:00:00 2001 From: Maria Mattlin Date: Wed, 6 Jul 2022 10:15:25 -0700 Subject: [PATCH 3/7] PROD-2321 cleaned up code #time 30m --- .../components/BasicInfoForm/index.jsx | 24 ++++--------------- 1 file changed, 5 insertions(+), 19 deletions(-) diff --git a/src/routes/Products/components/BasicInfoForm/index.jsx b/src/routes/Products/components/BasicInfoForm/index.jsx index c293a15ef..5e60e06c2 100644 --- a/src/routes/Products/components/BasicInfoForm/index.jsx +++ b/src/routes/Products/components/BasicInfoForm/index.jsx @@ -30,7 +30,6 @@ import { import StyleOptions from "../StyleOptions"; import { WorkType, WorkTypeCategoryDesignIcon } from "../../../../../src-ts"; import classNames from "classnames"; -import { InfoCard } from "../../../../../src-ts/lib/info-card"; const BasicInfoForm = ({ formData, @@ -171,26 +170,13 @@ const BasicInfoForm = ({ showIcon icon={servicePriceIcon} /> - {/* + {helperBannerContent} - */} - - {helperBannerContent} - + - {/* - {aboutBannerContent} - */} - + {aboutBannerContent} - + @@ -937,4 +923,4 @@ BasicInfoForm.propTypes = { bannerData: PT.shape().isRequired, }; -export default BasicInfoForm; +export default BasicInfoForm; \ No newline at end of file From 745ebdb48011499b8151322ea87071649faeac3e Mon Sep 17 00:00:00 2001 From: Maria Mattlin Date: Wed, 6 Jul 2022 10:22:06 -0700 Subject: [PATCH 4/7] code cleanup --- src/routes/Products/components/BasicInfoForm/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Products/components/BasicInfoForm/index.jsx b/src/routes/Products/components/BasicInfoForm/index.jsx index 5e60e06c2..1a982cefe 100644 --- a/src/routes/Products/components/BasicInfoForm/index.jsx +++ b/src/routes/Products/components/BasicInfoForm/index.jsx @@ -923,4 +923,4 @@ BasicInfoForm.propTypes = { bannerData: PT.shape().isRequired, }; -export default BasicInfoForm; \ No newline at end of file +export default BasicInfoForm; From 9cb03d416984ba7d369f44c015188125192b74f2 Mon Sep 17 00:00:00 2001 From: Maria Mattlin Date: Wed, 6 Jul 2022 11:25:41 -0700 Subject: [PATCH 5/7] PROD-2321 renamed variables #time 5m --- src-ts/lib/info-card/InfoCard.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src-ts/lib/info-card/InfoCard.tsx b/src-ts/lib/info-card/InfoCard.tsx index 75e9bc5bb..43213a887 100644 --- a/src-ts/lib/info-card/InfoCard.tsx +++ b/src-ts/lib/info-card/InfoCard.tsx @@ -9,7 +9,7 @@ interface InfoCardProps { children: ReactNode, color: 'gray' | 'turquoise' | 'yellow', isCollapsible: boolean, - isOpen: boolean, + open: boolean, title?: string, } @@ -17,23 +17,23 @@ const InfoCard: FC = ({ children, color = 'gray', isCollapsible = false, - isOpen = true, + open = true, title, }: InfoCardProps) => { - const [open, setOpen]: [boolean, Dispatch>] = useState(isOpen) + const [isOpen, setIsOpen]: [boolean, Dispatch>] = useState(open) const collapsibleClass: string = isCollapsible ? styles.collapsible : styles.notCollapsible - const showSpacing: boolean = open && !!title && !!children + const showSpacing: boolean = isOpen && !!title && !!children return (
- {renderHeader(isCollapsible, open, setOpen, title || '')} + {renderHeader(isCollapsible, isOpen, setIsOpen, title || '')} {showSpacing && (
)} - {open && + {isOpen &&
{children}
}
@@ -42,18 +42,18 @@ const InfoCard: FC = ({ function renderHeader( isCollapsible: boolean, - open: boolean, - setOpen: Dispatch>, + isOpen: boolean, + setIsOpen: Dispatch>, title: string ): JSX.Element { - const arrowClass: string = open ? styles.up : undefined + const arrowClass: string = isOpen ? styles.up : undefined if (isCollapsible) { return (
setOpen(!open)} + onClick={() => setIsOpen(!isOpen)} role='button' tabIndex={0} > From 154380900b74244d0ffc55f2d50683452fcf082b Mon Sep 17 00:00:00 2001 From: Maria Mattlin Date: Wed, 6 Jul 2022 11:52:45 -0700 Subject: [PATCH 6/7] PROD-2321 #comment Created an enum for the InfoCard colors and renamed open prop to defaultOpen #time 10m --- src-ts/lib/index.ts | 1 + src-ts/lib/info-card/InfoCard.enum.ts | 5 +++++ src-ts/lib/info-card/InfoCard.tsx | 11 ++++++----- src-ts/lib/info-card/index.ts | 1 + 4 files changed, 13 insertions(+), 5 deletions(-) create mode 100644 src-ts/lib/info-card/InfoCard.enum.ts diff --git a/src-ts/lib/index.ts b/src-ts/lib/index.ts index 6ae9572e0..8d328ecc9 100644 --- a/src-ts/lib/index.ts +++ b/src-ts/lib/index.ts @@ -23,6 +23,7 @@ export { xhrPatchAsync, xhrPostAsync, } from './functions' +export * from './info-card' export * from './loading-spinner' export * from './modals' export * from './page-footer' diff --git a/src-ts/lib/info-card/InfoCard.enum.ts b/src-ts/lib/info-card/InfoCard.enum.ts new file mode 100644 index 000000000..07a50c6eb --- /dev/null +++ b/src-ts/lib/info-card/InfoCard.enum.ts @@ -0,0 +1,5 @@ +export enum InfoCardColor { + gray = 'gray', + turquoise = 'turquoise', + yellow = 'yellow', +} diff --git a/src-ts/lib/info-card/InfoCard.tsx b/src-ts/lib/info-card/InfoCard.tsx index 43213a887..b306d09b7 100644 --- a/src-ts/lib/info-card/InfoCard.tsx +++ b/src-ts/lib/info-card/InfoCard.tsx @@ -3,25 +3,26 @@ import { Dispatch, FC, ReactNode, SetStateAction, useState } from 'react' import { ArrowIcon } from '../svgs' +import { InfoCardColor } from './InfoCard.enum' import styles from './InfoCard.module.scss' interface InfoCardProps { children: ReactNode, - color: 'gray' | 'turquoise' | 'yellow', + color: InfoCardColor + defaultOpen: boolean, isCollapsible: boolean, - open: boolean, title?: string, } const InfoCard: FC = ({ children, - color = 'gray', + color = InfoCardColor.gray, + defaultOpen = true, isCollapsible = false, - open = true, title, }: InfoCardProps) => { - const [isOpen, setIsOpen]: [boolean, Dispatch>] = useState(open) + const [isOpen, setIsOpen]: [boolean, Dispatch>] = useState(defaultOpen) const collapsibleClass: string = isCollapsible ? styles.collapsible : styles.notCollapsible const showSpacing: boolean = isOpen && !!title && !!children diff --git a/src-ts/lib/info-card/index.ts b/src-ts/lib/info-card/index.ts index 113beef4a..89905e520 100644 --- a/src-ts/lib/info-card/index.ts +++ b/src-ts/lib/info-card/index.ts @@ -1 +1,2 @@ export { default as InfoCard } from './InfoCard' +export { InfoCardColor } from './InfoCard.enum' From cbf28f3ccf352785e1bb947e7a27c3a8d6068e5b Mon Sep 17 00:00:00 2001 From: Maria Mattlin Date: Thu, 7 Jul 2022 13:41:32 -0700 Subject: [PATCH 7/7] PROD-2321 Reverted changes to the infocard color type #time 10m --- src-ts/lib/info-card/InfoCard.enum.ts | 5 ----- src-ts/lib/info-card/InfoCard.module.scss | 6 +++--- src-ts/lib/info-card/InfoCard.tsx | 5 ++--- src-ts/lib/info-card/index.ts | 1 - 4 files changed, 5 insertions(+), 12 deletions(-) delete mode 100644 src-ts/lib/info-card/InfoCard.enum.ts diff --git a/src-ts/lib/info-card/InfoCard.enum.ts b/src-ts/lib/info-card/InfoCard.enum.ts deleted file mode 100644 index 07a50c6eb..000000000 --- a/src-ts/lib/info-card/InfoCard.enum.ts +++ /dev/null @@ -1,5 +0,0 @@ -export enum InfoCardColor { - gray = 'gray', - turquoise = 'turquoise', - yellow = 'yellow', -} diff --git a/src-ts/lib/info-card/InfoCard.module.scss b/src-ts/lib/info-card/InfoCard.module.scss index 27624f2d7..dc9a3a5a6 100644 --- a/src-ts/lib/info-card/InfoCard.module.scss +++ b/src-ts/lib/info-card/InfoCard.module.scss @@ -48,14 +48,14 @@ } } -.gray { +.info { background-color: $black-5; } -.turquoise { +.success { background-color: $turq-15; } -.yellow { +.warn { background-color: $orange-25; } \ No newline at end of file diff --git a/src-ts/lib/info-card/InfoCard.tsx b/src-ts/lib/info-card/InfoCard.tsx index b306d09b7..2c57f9b2c 100644 --- a/src-ts/lib/info-card/InfoCard.tsx +++ b/src-ts/lib/info-card/InfoCard.tsx @@ -3,12 +3,11 @@ import { Dispatch, FC, ReactNode, SetStateAction, useState } from 'react' import { ArrowIcon } from '../svgs' -import { InfoCardColor } from './InfoCard.enum' import styles from './InfoCard.module.scss' interface InfoCardProps { children: ReactNode, - color: InfoCardColor + color: 'info' | 'success' | 'warn', defaultOpen: boolean, isCollapsible: boolean, title?: string, @@ -16,7 +15,7 @@ interface InfoCardProps { const InfoCard: FC = ({ children, - color = InfoCardColor.gray, + color = 'info', defaultOpen = true, isCollapsible = false, title, diff --git a/src-ts/lib/info-card/index.ts b/src-ts/lib/info-card/index.ts index 89905e520..113beef4a 100644 --- a/src-ts/lib/info-card/index.ts +++ b/src-ts/lib/info-card/index.ts @@ -1,2 +1 @@ export { default as InfoCard } from './InfoCard' -export { InfoCardColor } from './InfoCard.enum'