From 1e7d2182ec60cf89968c3f3107d1e886fc94a075 Mon Sep 17 00:00:00 2001 From: Harish Date: Wed, 27 Sep 2023 17:06:40 +0800 Subject: [PATCH] IS-456: Text Cards Previews (#1516) * wip: basic cms preview * feat: refactor styles Co-authored-by: Alexander Lee * feat: enable previews on text-cards * fix: lint issues * feat: update previews to match template Co-authored-by: Alexander Lee --------- Co-authored-by: Alexander Lee --- src/layouts/EditHomepage/HomepagePreview.tsx | 9 +- .../components/homepage/_index.scss | 1 + .../components/homepage/_text-cards.scss | 62 ++++++++++++ src/styles/isomer-template/shared.scss | 4 + .../isomer-template/theme/_text-styles.scss | 30 +++++- src/templates/homepage/TextCardsSection.tsx | 97 +++++++++++++++++++ 6 files changed, 197 insertions(+), 6 deletions(-) create mode 100644 src/styles/isomer-template/components/homepage/_text-cards.scss create mode 100644 src/styles/isomer-template/shared.scss create mode 100644 src/templates/homepage/TextCardsSection.tsx diff --git a/src/layouts/EditHomepage/HomepagePreview.tsx b/src/layouts/EditHomepage/HomepagePreview.tsx index 7b73282c8..8471bef43 100644 --- a/src/layouts/EditHomepage/HomepagePreview.tsx +++ b/src/layouts/EditHomepage/HomepagePreview.tsx @@ -10,6 +10,7 @@ import TemplateInfobarSection from "templates/homepage/InfobarSection" import TemplateInfopicLeftSection from "templates/homepage/InfopicLeftSection" import TemplateInfopicRightSection from "templates/homepage/InfopicRightSection" import TemplateResourcesSection from "templates/homepage/ResourcesSection" +import TemplateTextCardsSection from "templates/homepage/TextCardsSection" import { getClassNames } from "templates/utils/stylingUtils" import { @@ -182,17 +183,17 @@ export const HomepagePreview = ({ /> )} - {/* Textcard section placeholder */} + {/* Textcard section */} {EditorHomepageFrontmatterSection.isTextcard(section) && ( <> - } /> )} diff --git a/src/styles/isomer-template/components/homepage/_index.scss b/src/styles/isomer-template/components/homepage/_index.scss index 8abc493e9..5d3e63632 100644 --- a/src/styles/isomer-template/components/homepage/_index.scss +++ b/src/styles/isomer-template/components/homepage/_index.scss @@ -1,2 +1,3 @@ @import "./announcements.scss"; @import "./hero.scss"; +@import "./text-cards.scss"; diff --git a/src/styles/isomer-template/components/homepage/_text-cards.scss b/src/styles/isomer-template/components/homepage/_text-cards.scss new file mode 100644 index 000000000..c2c931ba8 --- /dev/null +++ b/src/styles/isomer-template/components/homepage/_text-cards.scss @@ -0,0 +1,62 @@ +.textcards-section { + flex-direction: column; + align-items: center; + text-align: center; + + @media screen and (min-width: 1408px) { + max-width: 1440px; + margin: auto; + } +} + +.textcards-card-section { + justify-content: center; + align-items: flex-start; + gap: 2rem; + width: 100%; + flex-wrap: wrap; + flex-direction: column; + + @media screen and (min-width: 770px) { + flex-direction: row; + } + + .textcards-card-body { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; + flex: 1 0 0; + align-self: stretch; + color: #484848; + + border-radius: 4px; + border: 1px solid $stroke-default; + background: var(--white, #FFF); + box-shadow: 0px 0px 10px 0px rgba(191, 191, 191, 0.50); + + @media screen and (min-width: 770px) { + max-width: 50%; + } + + @media screen and (min-width: 1280px) { + max-width: 40%; + } + + @media screen and (min-width: 770px) and (max-width: 1279px) { + flex: 0 0 calc(50% - 24px); + } + + &:hover { + background-color: $interaction-hover; + cursor: pointer; + > .link { + color: var(--site-secondary-color-hover); + } + } + + .textcards-card-description { + flex-grow: 1; + } + } +} \ No newline at end of file diff --git a/src/styles/isomer-template/shared.scss b/src/styles/isomer-template/shared.scss new file mode 100644 index 000000000..a6a82c118 --- /dev/null +++ b/src/styles/isomer-template/shared.scss @@ -0,0 +1,4 @@ +@charset 'UTF-8'; + +$stroke-default-color: #D0D5DD; +$interaction-hover-color: #F9F9F9; \ No newline at end of file diff --git a/src/styles/isomer-template/theme/_text-styles.scss b/src/styles/isomer-template/theme/_text-styles.scss index fe3402914..c4b620e16 100644 --- a/src/styles/isomer-template/theme/_text-styles.scss +++ b/src/styles/isomer-template/theme/_text-styles.scss @@ -1,3 +1,14 @@ +display-1 { + color: $content-base; + + font-family: Lato; + font-size: 4rem; + font-style: normal; + font-weight: 700; + line-height: 5rem; /* 125% */ + letter-spacing: -1.408px; +} + .h1 { color: $content-base; @@ -9,6 +20,17 @@ letter-spacing: -1.056px; } +.h1-small { + color: $content-base; + + font-family: Lato; + font-size: 2.75rem; + font-style: normal; + font-weight: 700; + line-height: 3.5rem; /* 116.667% */ + letter-spacing: -1.056px; +} + .h2 { color: $content-base; @@ -96,7 +118,7 @@ } .button-text { - color: $utility-theme-color; + color: var(--site-secondary-color); text-align: center; font-feature-settings: "clig" off, "liga" off; @@ -110,7 +132,7 @@ } .link { - color: $utility-theme-color; + color: var(--site-secondary-color); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "clig" off, "liga" off; @@ -122,4 +144,8 @@ line-height: 1.5rem; /* 133.333% */ letter-spacing: 0.01688rem; text-decoration-line: underline; + + &:hover { + color: var(--site-secondary-color-hover) + } } diff --git a/src/templates/homepage/TextCardsSection.tsx b/src/templates/homepage/TextCardsSection.tsx new file mode 100644 index 000000000..c2b198f77 --- /dev/null +++ b/src/templates/homepage/TextCardsSection.tsx @@ -0,0 +1,97 @@ +import { ForwardedRef, forwardRef, RefObject } from "react" + +import editorStyles from "styles/isomer-cms/pages/Editor.module.scss" + +import { getClassNames } from "templates/utils/stylingUtils" + +import { TextcardsSection } from "types/homepage" + +interface TemplateTextCardsSectionProps extends TextcardsSection { + sectionIndex: number +} + +const TemplateTextCardsSection = forwardRef< + HTMLDivElement, + TemplateTextCardsSectionProps +>( + ( + { + title, + subtitle, + description, + cards, + sectionIndex, + }: TemplateTextCardsSectionProps, + ref: ForwardedRef + ) => { + return ( +
+
+

+ {subtitle} +

+

+ {title} +

+

+ {description} +

+
+ {!!cards && + cards.map((card) => ( + <> + +

{card.title}

+

+ {card.description} +

+

{card.linktext}

+ + + ))} +
+
+
+ ) + } +) + +export default TemplateTextCardsSection