From 7b3804b8654cbcf3aadcddf56e235e1a7d8409a8 Mon Sep 17 00:00:00 2001 From: Harish Date: Fri, 29 Sep 2023 12:54:45 +0800 Subject: [PATCH 01/13] IS-577: Move site privatisation to growth book (#1529) * feat: add feature flag for repo privatisation * fix: remove old env var * feat: add repo whitelist as dependency to hook * feat: check if site is private * feat: update to boolean flag * Update src/hooks/settingsHooks/useGetSettings.ts Co-authored-by: Kishore <42832651+kishore03109@users.noreply.github.com> * fix: prettier format --------- Co-authored-by: Kishore <42832651+kishore03109@users.noreply.github.com> --- .env-example | 2 -- src/constants/featureFlags.ts | 1 + src/hooks/settingsHooks/useGetSettings.ts | 11 ++++------- src/layouts/Settings/Settings.tsx | 10 +++++++++- src/types/featureFlags.ts | 1 + 5 files changed, 15 insertions(+), 10 deletions(-) diff --git a/.env-example b/.env-example index b354d22ec..0f89d9914 100644 --- a/.env-example +++ b/.env-example @@ -19,7 +19,5 @@ export USERNAME='' # GitGuardian export GITGUARDIAN_API_KEY="" -export REACT_APP_IS_SITE_PRIVATISATION_ACTIVE=false - # GrowthBook export REACT_APP_GROWTHBOOK_CLIENT_KEY=xyz \ No newline at end of file diff --git a/src/constants/featureFlags.ts b/src/constants/featureFlags.ts index 97720a227..a53ee63a1 100644 --- a/src/constants/featureFlags.ts +++ b/src/constants/featureFlags.ts @@ -1,4 +1,5 @@ export const FEATURE_FLAGS = { STYLING_REVAMP: "styles", HOMEPAGE_TEMPLATES: "homepage_new_templates", + REPO_PRIVATISATION: "repo_privatisation", } as const diff --git a/src/hooks/settingsHooks/useGetSettings.ts b/src/hooks/settingsHooks/useGetSettings.ts index bc9da8715..ffb4b33f9 100644 --- a/src/hooks/settingsHooks/useGetSettings.ts +++ b/src/hooks/settingsHooks/useGetSettings.ts @@ -16,10 +16,6 @@ import { import { BE_TO_FE } from "./constants" -const IS_SITE_PRIVATISATION_ACTIVE = - process.env.REACT_APP_IS_SITE_PRIVATISATION_ACTIVE && - process.env.REACT_APP_IS_SITE_PRIVATISATION_ACTIVE.toLowerCase() === "true" - const DEFAULT_BE_STATE = { title: "", description: "", @@ -131,7 +127,8 @@ const extractPassword = ( export const useGetSettings = ( siteName: string, - isEmailLogin?: boolean + isEmailLogin?: boolean, + isPrivatisationAllowed?: boolean ): UseQueryResult => { const shouldGetPrivacyDetails = isEmailLogin === undefined ? false : isEmailLogin @@ -139,9 +136,9 @@ export const useGetSettings = ( [SETTINGS_CONTENT_KEY, siteName, shouldGetPrivacyDetails], async () => { const siteSettings = await SettingsService.get({ siteName }) + const isSitePrivatisationActive = isPrivatisationAllowed ?? false let passwordSettings - if (shouldGetPrivacyDetails && IS_SITE_PRIVATISATION_ACTIVE) { - // TODO: LaunchDarkly to allow specific groups to access this feature first + if (shouldGetPrivacyDetails && isSitePrivatisationActive) { passwordSettings = await SettingsService.getPassword({ siteName }) } else { passwordSettings = { diff --git a/src/layouts/Settings/Settings.tsx b/src/layouts/Settings/Settings.tsx index 2223c3fc1..38b2818dd 100644 --- a/src/layouts/Settings/Settings.tsx +++ b/src/layouts/Settings/Settings.tsx @@ -6,6 +6,7 @@ import { StackDivider, useDisclosure, } from "@chakra-ui/react" +import { useFeatureIsOn } from "@growthbook/growthbook-react" import { Button } from "@opengovsg/design-system-react" import _ from "lodash" import { useEffect, useRef } from "react" @@ -14,6 +15,8 @@ import { useParams } from "react-router-dom" import { Footer } from "components/Footer" +import { FEATURE_FLAGS } from "constants/featureFlags" + import { useDirtyFieldContext } from "contexts/DirtyFieldContext" import { useLoginContext } from "contexts/LoginContext" @@ -21,6 +24,7 @@ import { useGetSettings, useUpdateSettings } from "hooks/settingsHooks" import { useErrorToast, useSuccessToast } from "utils/toasts" +import { FeatureFlags } from "types/featureFlags" import { SiteSettings } from "types/settings" import { DEFAULT_RETRY_MSG } from "utils" @@ -37,6 +41,10 @@ import { PrivacySettings } from "./PrivacySettings" import { SocialMediaSettings } from "./SocialMediaSettings" export const Settings = (): JSX.Element => { + const isPrivatisationAllowed = useFeatureIsOn( + FEATURE_FLAGS.REPO_PRIVATISATION + ) + const { siteName } = useParams<{ siteName: string }>() const { userId } = useLoginContext() // Only github users have userId, and not logged in users have userId as "Unknown user" @@ -45,7 +53,7 @@ export const Settings = (): JSX.Element => { data: settingsData, isLoading: isGetSettingsLoading, isError: isGetSettingsError, - } = useGetSettings(siteName, !isGithubUser) + } = useGetSettings(siteName, !isGithubUser, isPrivatisationAllowed) const errorToast = useErrorToast() // Trigger an error toast informing the user if settings data could not be fetched diff --git a/src/types/featureFlags.ts b/src/types/featureFlags.ts index eebee34ea..8f3805e30 100644 --- a/src/types/featureFlags.ts +++ b/src/types/featureFlags.ts @@ -3,6 +3,7 @@ import { FEATURE_FLAGS } from "constants/featureFlags" // Example usage: const gb = useGrowthBook(); export interface FeatureFlags { [FEATURE_FLAGS.STYLING_REVAMP]: boolean + [FEATURE_FLAGS.REPO_PRIVATISATION]: boolean } export type GBAttributes = { From aa12ec1e93f5595c2a437e79abef241c6fad1dc3 Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Fri, 29 Sep 2023 14:16:28 +0800 Subject: [PATCH 02/13] chore: move warning banner to growthbook (#1541) --- src/constants/featureFlags.ts | 1 + src/routing/RouteSelector.jsx | 260 +++++++++++++++++----------------- src/types/featureFlags.ts | 4 + 3 files changed, 137 insertions(+), 128 deletions(-) diff --git a/src/constants/featureFlags.ts b/src/constants/featureFlags.ts index a53ee63a1..cd7bae8bb 100644 --- a/src/constants/featureFlags.ts +++ b/src/constants/featureFlags.ts @@ -2,4 +2,5 @@ export const FEATURE_FLAGS = { STYLING_REVAMP: "styles", HOMEPAGE_TEMPLATES: "homepage_new_templates", REPO_PRIVATISATION: "repo_privatisation", + BANNER: "banner", } as const diff --git a/src/routing/RouteSelector.jsx b/src/routing/RouteSelector.jsx index e7cbde8e7..41e1b9bbe 100644 --- a/src/routing/RouteSelector.jsx +++ b/src/routing/RouteSelector.jsx @@ -1,3 +1,4 @@ +import { useFeatureIsOn, useFeatureValue } from "@growthbook/growthbook-react" import { Banner } from "@opengovsg/design-system-react" import { ReactQueryDevtools } from "react-query/devtools" import { Switch } from "react-router-dom" @@ -6,6 +7,8 @@ import VerifyUserDetailsModal from "components/VerifyUserDetailsModal" // Layouts +import { FEATURE_FLAGS } from "constants/featureFlags" + import { ReviewRequestRoleProvider } from "contexts/ReviewRequestRoleContext" import { SiteLaunchProvider } from "contexts/SiteLaunchContext" @@ -36,131 +39,132 @@ import { injectApprovalRedirect, } from "./ApprovedReviewRedirect" -const { REACT_APP_BANNER_VARIANT: BANNER_VARIANT } = process.env -const { REACT_APP_BANNER_MESSAGE: BANNER_MESSAGE } = process.env - -export const RouteSelector = () => ( - <> - {!!BANNER_MESSAGE && ( - - {BANNER_MESSAGE} - - )} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {process.env.REACT_APP_ENV === "LOCAL_DEV" && ( - - )} - -) +export const RouteSelector = () => { + const isBannerOn = useFeatureIsOn(FEATURE_FLAGS.BANNER) + const bannerParams = useFeatureValue(FEATURE_FLAGS.BANNER) + return ( + <> + {isBannerOn && ( + + {bannerParams.message} + + )} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {process.env.REACT_APP_ENV === "LOCAL_DEV" && ( + + )} + + ) +} diff --git a/src/types/featureFlags.ts b/src/types/featureFlags.ts index 8f3805e30..727e661da 100644 --- a/src/types/featureFlags.ts +++ b/src/types/featureFlags.ts @@ -4,6 +4,10 @@ import { FEATURE_FLAGS } from "constants/featureFlags" export interface FeatureFlags { [FEATURE_FLAGS.STYLING_REVAMP]: boolean [FEATURE_FLAGS.REPO_PRIVATISATION]: boolean + [FEATURE_FLAGS.BANNER]: { + variant: "info" | "error" | "warn" + message: string + } } export type GBAttributes = { From 8ad8c2efc1ddd2e5fa2aa1428ddbf899bd72d12a Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Mon, 2 Oct 2023 15:26:59 +0800 Subject: [PATCH 03/13] chore: move nps form to growthbook (#1542) --- .env-example | 1 - src/constants/featureFlags.ts | 1 + src/hooks/useFeedbackDisclosure.ts | 8 +++++--- src/types/featureFlags.ts | 1 + 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/.env-example b/.env-example index 0f89d9914..527c3baee 100644 --- a/.env-example +++ b/.env-example @@ -3,7 +3,6 @@ export REACT_APP_SENTRY_ENV='' export REACT_APP_SENTRY_DSN='' export REACT_APP_ENV='LOCAL_DEV' export ESLINT_NO_DEV_ERRORS=true -export REACT_APP_SHOW_NPS_FORM=true # Cypress test environment variables export CYPRESS_BASEURL='' diff --git a/src/constants/featureFlags.ts b/src/constants/featureFlags.ts index cd7bae8bb..5f05758e6 100644 --- a/src/constants/featureFlags.ts +++ b/src/constants/featureFlags.ts @@ -3,4 +3,5 @@ export const FEATURE_FLAGS = { HOMEPAGE_TEMPLATES: "homepage_new_templates", REPO_PRIVATISATION: "repo_privatisation", BANNER: "banner", + NPS_FORM: "nps_form", } as const diff --git a/src/hooks/useFeedbackDisclosure.ts b/src/hooks/useFeedbackDisclosure.ts index d74d364b4..64f813851 100644 --- a/src/hooks/useFeedbackDisclosure.ts +++ b/src/hooks/useFeedbackDisclosure.ts @@ -1,12 +1,16 @@ import { useDisclosure } from "@chakra-ui/react" +import { useFeatureIsOn } from "@growthbook/growthbook-react" import { useLocation } from "react-router-dom" +import { FEATURE_FLAGS } from "constants/featureFlags" import { LOCAL_STORAGE_KEYS } from "constants/localStorage" import { useLoginContext } from "contexts/LoginContext" import { isEditPageUrl, isSpecialPagesUrl } from "utils/pages" +import { FeatureFlags } from "types/featureFlags" + import { useLocalStorage } from "./useLocalStorage" type LastSeenFeedbackTime = number @@ -17,8 +21,6 @@ type FeedbackStorageMappings = Record // 1 week in ms const NPS_SURVEY_DURATION = 7 * 24 * 60 * 60 * 1000 -const { REACT_APP_SHOW_NPS_FORM } = process.env - type UseFeedbackStorageReturn = readonly [number, () => void] // NOTE: Wrapper to handle get/set of individual keys @@ -51,7 +53,7 @@ export const useFeedbackDisclosure = (): UseFeedbackDisclosureReturn => { // NOTE: We show the feedback modal to the users iff // they are navigating away from the editor const isLeavingContentPage = isEditPageUrl(from) || isSpecialPagesUrl(from) - const shouldShowNpsForm = REACT_APP_SHOW_NPS_FORM?.trim() === "true" + const shouldShowNpsForm = useFeatureIsOn(FEATURE_FLAGS.NPS_FORM) const [lastSeen, setLastSeen] = useFeedbackStorage() // NOTE: Either this is the first time the user has ever seen the survey diff --git a/src/types/featureFlags.ts b/src/types/featureFlags.ts index 727e661da..33e826cee 100644 --- a/src/types/featureFlags.ts +++ b/src/types/featureFlags.ts @@ -8,6 +8,7 @@ export interface FeatureFlags { variant: "info" | "error" | "warn" message: string } + [FEATURE_FLAGS.NPS_FORM]: boolean } export type GBAttributes = { From 721ac85e096a42a58c5a3ced6f51ac366fc3f449 Mon Sep 17 00:00:00 2001 From: Kishore <42832651+kishore03109@users.noreply.github.com> Date: Mon, 2 Oct 2023 16:06:22 +0800 Subject: [PATCH 04/13] fix(announcements): add validation url (#1545) --- src/layouts/EditHomepage/EditHomepage.jsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx index 5c189b216..382f4ce5f 100644 --- a/src/layouts/EditHomepage/EditHomepage.jsx +++ b/src/layouts/EditHomepage/EditHomepage.jsx @@ -578,6 +578,7 @@ const EditHomepage = ({ match }) => { .announcements.announcement_items[announcementItemsIndex].link_url const isLinkUrlError = isLinkTextFilled && !isLinkUrlFilled + const isLinkTextError = !isLinkTextFilled && isLinkUrlFilled const isLinkUrlOrTextChanged = field === "link_text" || field === "link_url" if (isLinkUrlOrTextChanged) { @@ -586,6 +587,11 @@ const EditHomepage = ({ match }) => { ].link_url = isLinkUrlError ? "Please specify a URL for your link" : "" + newErrors.announcementItems[ + announcementItemsIndex + ].link_text = isLinkTextError + ? "Please specify text for your link" + : "" } setFrontMatter({ From 55e0684d8a58e4c685a6daa61e340ed80fca5d6a Mon Sep 17 00:00:00 2001 From: Hsu Zhong Jun <27919917+dcshzj@users.noreply.github.com> Date: Mon, 2 Oct 2023 18:53:39 +0800 Subject: [PATCH 05/13] chore(announcements): sync changes from template (#1540) --- .../components/homepage/_announcements.scss | 29 +-- src/styles/isomer-template/theme/_colors.scss | 2 +- src/styles/isomer-template/theme/_layout.scss | 4 + .../homepage/AnnouncementsSection.tsx | 224 +++++++++--------- 4 files changed, 117 insertions(+), 142 deletions(-) diff --git a/src/styles/isomer-template/components/homepage/_announcements.scss b/src/styles/isomer-template/components/homepage/_announcements.scss index c79517330..90117097d 100644 --- a/src/styles/isomer-template/components/homepage/_announcements.scss +++ b/src/styles/isomer-template/components/homepage/_announcements.scss @@ -9,33 +9,6 @@ color: #f9f9f9; } -.announcements-announcement-title { - font-size: 1.625rem; - font-weight: 700; - line-height: 2rem; -} - -.announcements-announcement-subtitle { - font-size: 1rem; - font-weight: 400; - line-height: 1.375rem; -} - -.announcements-announcement-link { - color: var(--site-secondary-color); - font-size: 1.125rem; - font-weight: 600; - line-height: 1.5rem; - letter-spacing: 0.27px; - text-decoration-line: underline; - text-transform: capitalize; - text-underline-offset: 0.25rem; -} - -.announcements-announcement-link:hover { - color: var(--site-secondary-color-hover); -} - -a[target="_blank"].announcements-announcement-link::after { +a[target="_blank"].link::after { content: unset; } diff --git a/src/styles/isomer-template/theme/_colors.scss b/src/styles/isomer-template/theme/_colors.scss index 59b281fe3..7618ab721 100644 --- a/src/styles/isomer-template/theme/_colors.scss +++ b/src/styles/isomer-template/theme/_colors.scss @@ -1,5 +1,5 @@ $canvas-base: #ffffff; -$content-base: #000000; +$content-base: #344054; $utility-theme-color: var(--site-primary-color); $canvas-inverse: #000000; $content-inverse: #ffffff; diff --git a/src/styles/isomer-template/theme/_layout.scss b/src/styles/isomer-template/theme/_layout.scss index b33ef8217..ed0d82bf1 100644 --- a/src/styles/isomer-template/theme/_layout.scss +++ b/src/styles/isomer-template/theme/_layout.scss @@ -1,3 +1,7 @@ .flex-end { justify-content: flex-end; } + +.w-100 { + width: 100%; +} diff --git a/src/templates/homepage/AnnouncementsSection.tsx b/src/templates/homepage/AnnouncementsSection.tsx index 69bd6d87a..acc3fcff4 100644 --- a/src/templates/homepage/AnnouncementsSection.tsx +++ b/src/templates/homepage/AnnouncementsSection.tsx @@ -47,134 +47,132 @@ export const TemplateAnnouncementsSection = forwardRef< "is-flex", ])} > -
-
- <> - {subtitle && ( -

- {subtitle} -

- )} - {title && ( -

- {title} -

- )} + {subtitle && ( +

+ {subtitle} +

+ )} + {title && ( +

+ {title} +

+ )} -
+
+
+
- {announcementItems && - announcementItems.map((announcement, index) => { - return ( -
+ {announcementItems && + announcementItems.map((announcement, index) => { + return ( +
+
-
-

+

+ {announcement.date} +

+

+
+

+ {announcement.announcement} +

+ {announcement.link_text && announcement.link_url && ( +
- {announcement.title} - -

- {announcement.date} -

-
-
-

{announcement.announcement}

- {announcement.link_text && announcement.link_url && ( -
-
- {announcement.link_text} -
+
+ {announcement.link_text}
- )} -
+
+ )}
- {announcementItems && - announcementItems.length === index + 1 ? ( -
- ) : ( -
- )}
- ) - })} - + {announcementItems && + announcementItems.length === index + 1 ? ( +
+ ) : ( +
+ )} +
+ ) + })}
From 86e2ac6c0afca471c811ed3066d3b470c297fc03 Mon Sep 17 00:00:00 2001 From: seaerchin <44049504+seaerchin@users.noreply.github.com> Date: Tue, 3 Oct 2023 11:30:34 +0800 Subject: [PATCH 06/13] fix(hero): update panel styles for hero section (#1543) * fix(herosidelayout): default to white bg * fix(herobody): style fixes * fix(hero): style fixes * fix(hero-image-only): change styling on small screens --------- Co-authored-by: seaerchin --- src/layouts/components/Homepage/HeroBody.tsx | 31 ++++++++------- .../components/homepage/_hero.scss | 4 ++ src/styles/isomer-template/theme/_colors.scss | 1 + src/styles/isomer-template/theme/_layout.scss | 9 +++++ .../HeroSection/HeroCenteredLayout.tsx | 2 +- .../homepage/HeroSection/HeroDropdown.tsx | 3 +- .../HeroSection/HeroImageOnlyLayout.tsx | 39 ++++++++++--------- .../homepage/HeroSection/HeroSection.tsx | 1 + .../homepage/HeroSection/HeroSideLayout.tsx | 9 +++-- 9 files changed, 59 insertions(+), 40 deletions(-) diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx index 12bf8df62..fe8732b9b 100644 --- a/src/layouts/components/Homepage/HeroBody.tsx +++ b/src/layouts/components/Homepage/HeroBody.tsx @@ -203,7 +203,7 @@ const HeroSideSectionLayout = ({ title={title} subtitle={subtitle} /> - + Section size { @@ -218,11 +218,11 @@ const HeroSideSectionLayout = ({ > - Half (1/2) of banner + Wide - Third (1/3) of banner + Narrow @@ -253,24 +253,24 @@ const HeroSideSectionLayout = ({ Section background colour - - + + onIconButtonClick("black")} + {...getIconButtonProps("white")} + onClick={() => onIconButtonClick("white")} > - + - + onIconButtonClick("white")} + {...getIconButtonProps("black")} + onClick={() => onIconButtonClick("black")} > - + - + onIconButtonClick("gray")} @@ -313,7 +313,7 @@ const HeroLayoutForm = ({ }, [inView, showNewLayouts]) return ( - + {showFeatureTour && ( Layout Hero Interactions - + Content type ) : null} {/* Hero dropdown */} - {hero.dropdown ? ( + {hero.dropdown.title ? (
diff --git a/src/templates/homepage/HeroSection/HeroImageOnlyLayout.tsx b/src/templates/homepage/HeroSection/HeroImageOnlyLayout.tsx index d3c768854..0f805ec50 100644 --- a/src/templates/homepage/HeroSection/HeroImageOnlyLayout.tsx +++ b/src/templates/homepage/HeroSection/HeroImageOnlyLayout.tsx @@ -4,21 +4,26 @@ import { getClassNames } from "templates/utils/stylingUtils" import { EditorHeroDropdownSection } from "types/homepage" +import { HeroButton } from "./HeroButton" import { HeroDropdown } from "./HeroDropdown" interface HeroImageOnlyLayoutProps { dropdown?: EditorHeroDropdownSection["dropdown"] + button?: string dropdownIsActive: boolean toggleDropdown: () => void } export const HeroImageOnlyLayout = ({ dropdown, + button, dropdownIsActive, toggleDropdown, }: HeroImageOnlyLayoutProps) => { return (
-
+
- {dropdown && ( - + {dropdown?.title ? ( +
+ +
+ ) : ( + )}
diff --git a/src/templates/homepage/HeroSection/HeroSection.tsx b/src/templates/homepage/HeroSection/HeroSection.tsx index 5fbeaab82..68de39886 100644 --- a/src/templates/homepage/HeroSection/HeroSection.tsx +++ b/src/templates/homepage/HeroSection/HeroSection.tsx @@ -153,6 +153,7 @@ export const TemplateHeroSection = forwardRef< )} {variant === "image" && ( - {dropdown ? ( + {dropdown?.title ? (
- {dropdown ? ( + {dropdown?.title ? ( Date: Tue, 3 Oct 2023 11:31:21 +0800 Subject: [PATCH 07/13] refactor(text-styles): update to have mobile (#1546) * refactor(text-styles): update to have mobile * fix(text-styles): shift to map-get --------- Co-authored-by: seaerchin --- .../isomer-template/theme/_text-styles.scss | 46 +++++++++++-------- 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/src/styles/isomer-template/theme/_text-styles.scss b/src/styles/isomer-template/theme/_text-styles.scss index c4b620e16..3e967d0fe 100644 --- a/src/styles/isomer-template/theme/_text-styles.scss +++ b/src/styles/isomer-template/theme/_text-styles.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + display-1 { color: $content-base; @@ -9,26 +11,32 @@ display-1 { letter-spacing: -1.408px; } -.h1 { - color: $content-base; - - font-family: Lato; - font-size: 3rem; - font-style: normal; - font-weight: 700; - line-height: 3.5rem; /* 116.667% */ - letter-spacing: -1.056px; +// 1024 and above +@media screen and (min-width: map-get($breakpoints, "lg")) { + .h1 { + color: $content-base; + + font-family: Lato; + font-size: 3rem; + font-style: normal; + font-weight: 700; + line-height: 3.5rem; /* 116.667% */ + letter-spacing: -0.066rem; + } } -.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; +// 1023 and below +@media screen and (max-width: (map-get($breakpoints, "lg") - 1)) { + .h1 { + color: $content-base; + + font-family: Lato; + font-size: 2.75rem; + font-style: normal; + font-weight: 700; + line-height: 3.5rem; /* 116.667% */ + letter-spacing: -0.0605rem; + } } .h2 { @@ -146,6 +154,6 @@ display-1 { text-decoration-line: underline; &:hover { - color: var(--site-secondary-color-hover) + color: var(--site-secondary-color-hover); } } From ec77e974ea7637cdc3bb5a8606596aa5ba0bba5e Mon Sep 17 00:00:00 2001 From: seaerchin <44049504+seaerchin@users.noreply.github.com> Date: Tue, 3 Oct 2023 11:36:30 +0800 Subject: [PATCH 08/13] chore(hero): duplicate template changes (#1547) * feat(styles): duplicate styling changes from template * feat(hero): duplicate changes from template * refactor(hero-styles): shift to new file * refactor(herobody): change section size representation --------- Co-authored-by: seaerchin --- src/layouts/components/Homepage/HeroBody.tsx | 8 +- .../components/homepage/_hero.scss | 82 +++++++- .../isomer-template/theme/_breakpoints.scss | 4 +- .../isomer-template/theme/_display.scss | 14 ++ src/styles/isomer-template/theme/_index.scss | 1 + src/styles/templates/components/hero.scss | 17 -- .../homepage/HeroSection/HeroButton.tsx | 4 +- .../HeroSection/HeroFloatingLayout.tsx | 159 +++++++++++++++ .../HeroSection/HeroInfoboxDesktop.tsx | 136 ++++++++++++ .../HeroSection/HeroInfoboxMobile.tsx | 100 +++++++++ .../homepage/HeroSection/HeroSection.tsx | 15 +- .../homepage/HeroSection/HeroSideLayout.tsx | 193 +++--------------- src/types/hero.ts | 2 +- 13 files changed, 530 insertions(+), 205 deletions(-) create mode 100644 src/styles/isomer-template/theme/_display.scss delete mode 100644 src/styles/templates/components/hero.scss create mode 100644 src/templates/homepage/HeroSection/HeroFloatingLayout.tsx create mode 100644 src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx create mode 100644 src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx index fe8732b9b..33e664743 100644 --- a/src/layouts/components/Homepage/HeroBody.tsx +++ b/src/layouts/components/Homepage/HeroBody.tsx @@ -182,7 +182,7 @@ const HeroSideSectionLayout = ({ errors, title, subtitle, - size = "50%", + size = "md", alignment = "left", }: HeroSideSectionProps) => { const { onChange } = useEditableContext() @@ -206,7 +206,7 @@ const HeroSideSectionLayout = ({ Section size { + onChange={(nextSectionSize: SectionSize) => { onChange({ target: { id: "section-0-hero-size", @@ -217,11 +217,11 @@ const HeroSideSectionLayout = ({ defaultValue={size} > - + Wide - + Narrow diff --git a/src/styles/isomer-template/components/homepage/_hero.scss b/src/styles/isomer-template/components/homepage/_hero.scss index d6c083c09..6883c1e2c 100644 --- a/src/styles/isomer-template/components/homepage/_hero.scss +++ b/src/styles/isomer-template/components/homepage/_hero.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + .border-solid-gray { border: 1px solid $border-light; } @@ -10,12 +12,88 @@ background: rgba(0, 0, 0, 0.25); } -.hero-body-padding { +.with-padding { padding: 3rem 1.5rem; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: map.get($breakpoints, "md")) { .hero-floating { padding: 3rem; } } + +// NOTE: This is to keep the infobox from exceeding +// the width of the nav-bar. +// Hence, any changes here or on nav-bar should be +// duplicated to the other. +.infobox-floating-container { + max-width: $container-max-width; + margin: 0 auto; +} + +.hero-background-white { + .hero-text-color { + color: $content-base; + } + background-color: $canvas-base; +} + +.hero-background-black { + .hero-text-color { + color: $content-inverse; + } + background-color: $canvas-inverse; +} + +.hero-background-gray { + .hero-text-color { + color: $content-inverse; + } + background-color: $canvas-translucent-grey; +} + +.hero-floating-sm { + width: 33%; +} + +.hero-floating-md { + width: 50%; +} + +.hero-alignment-left { + align-self: flex-end; +} + +.hero-alignment-right { + align-self: flex-start; +} + +@media screen and (min-width: map.get($breakpoints, "xl")) { + .hero-side-sm { + width: 50%; + } + + .side-section-infobox-container { + width: 576px; + } + + .side-section-container-left { + text-align: right; + align-self: flex-end; + } + + .side-section-container-right { + text-align: left; + align-self: flex-start; + } +} + +@media screen and ((max-width: map.get($breakpoints, "xl") - 1)) { + .hero-side-sm { + width: 33%; + } +} + +.hero-side-md { + width: 50%; +} diff --git a/src/styles/isomer-template/theme/_breakpoints.scss b/src/styles/isomer-template/theme/_breakpoints.scss index f997cad6a..e3eb92f3e 100644 --- a/src/styles/isomer-template/theme/_breakpoints.scss +++ b/src/styles/isomer-template/theme/_breakpoints.scss @@ -1,3 +1,5 @@ +@use "sass:map"; + // Minimum width before a media query is triggered $breakpoints: ( "": 0px, @@ -9,4 +11,4 @@ $breakpoints: ( ); // Maximum width of site contents -$container-max-width: 1280px; +$container-max-width: map.get($breakpoints, "xl"); diff --git a/src/styles/isomer-template/theme/_display.scss b/src/styles/isomer-template/theme/_display.scss new file mode 100644 index 000000000..09fff1a29 --- /dev/null +++ b/src/styles/isomer-template/theme/_display.scss @@ -0,0 +1,14 @@ +@use "sass:map"; + +@media screen and (min-width: map.get($breakpoints, "lg")), + screen and (max-width: (map.get($breakpoints, "md") - 1)) { + .is-visible-tablet-only { + display: none !important; + } +} + +.text-truncate-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/src/styles/isomer-template/theme/_index.scss b/src/styles/isomer-template/theme/_index.scss index d44e97fc2..abf303e68 100644 --- a/src/styles/isomer-template/theme/_index.scss +++ b/src/styles/isomer-template/theme/_index.scss @@ -3,3 +3,4 @@ @import "_spacing.scss"; @import "_colors.scss"; @import "_text-styles.scss"; +@import "_display.scss"; diff --git a/src/styles/templates/components/hero.scss b/src/styles/templates/components/hero.scss deleted file mode 100644 index 63de907cd..000000000 --- a/src/styles/templates/components/hero.scss +++ /dev/null @@ -1,17 +0,0 @@ -.min-height-mobile { - min-height: 398px; -} - -.gray-overlay { - background: rgba(0, 0, 0, 0.25); -} - -.with-padding { - padding: 3rem 1.5rem; -} - -@media screen and (min-width: 1024px) { - .hero-floating { - padding: 3rem; - } -} diff --git a/src/templates/homepage/HeroSection/HeroButton.tsx b/src/templates/homepage/HeroSection/HeroButton.tsx index 88333afa7..b5a40984d 100644 --- a/src/templates/homepage/HeroSection/HeroButton.tsx +++ b/src/templates/homepage/HeroSection/HeroButton.tsx @@ -7,7 +7,7 @@ interface HeroButtonProps { } export const HeroButton = ({ button }: HeroButtonProps) => ( <> - {button ? ( + {button && (
( > {button}
- ) : null} + )} ) diff --git a/src/templates/homepage/HeroSection/HeroFloatingLayout.tsx b/src/templates/homepage/HeroSection/HeroFloatingLayout.tsx new file mode 100644 index 000000000..89efe727b --- /dev/null +++ b/src/templates/homepage/HeroSection/HeroFloatingLayout.tsx @@ -0,0 +1,159 @@ +// NOTE: jsx-ally is disabled for this file as the output of this +// should match jekyll output as closely as possible. +// As jekyll outputs an tag like so, this behaviour is preserved here. +/* eslint-disable jsx-a11y/anchor-is-valid */ + +import editorStyles from "styles/isomer-cms/pages/Editor.module.scss" + +import { getClassNames } from "templates/utils/stylingUtils" + +import { + SectionAlignment, + SectionBackgroundColor, + SectionSize, +} from "types/hero" +import { EditorHeroDropdownSection } from "types/homepage" + +import { HeroButton } from "./HeroButton" +import { HeroDropdown } from "./HeroDropdown" +import { HeroInfoboxDesktop } from "./HeroInfoboxDesktop" +import { HeroInfoboxMobile } from "./HeroInfoboxMobile" + +interface HeroFloatingLayoutProps { + alignment: SectionAlignment + size: SectionSize + url?: string + button?: string + subtitle?: string + title: string + backgroundColor: SectionBackgroundColor + dropdownIsActive: boolean + toggleDropdown: () => void + dropdown?: EditorHeroDropdownSection["dropdown"] +} +export const HeroFloatingLayout = ({ + alignment = "left", + size = "md", + url, + title, + subtitle, + button, + backgroundColor, + dropdownIsActive, + toggleDropdown, + dropdown, +}: HeroFloatingLayoutProps) => { + return ( +
+ {/* desktop view - done using css media queries */} +
+ +
+ + {/* tablet view - done using css media queries */} +
+
+
+
+
+

+ {title} +

+
+ +
+ {dropdown?.title ? ( + + ) : ( + // NOTE: This is to mirror the template structure + // as closely as possible. + url && + button && ( +
+ +
+ ) + )} +
+
+
+
+
+ + {/* mobile view - done using css media queries */} +
+ +
+
+ ) +} diff --git a/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx b/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx new file mode 100644 index 000000000..6b45783a9 --- /dev/null +++ b/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx @@ -0,0 +1,136 @@ +import editorStyles from "styles/isomer-cms/pages/Editor.module.scss" + +import { getClassNames } from "templates/utils/stylingUtils" + +import { + SectionAlignment, + SectionBackgroundColor, + SectionSize, +} from "types/hero" +import { EditorHeroDropdownSection } from "types/homepage" + +import { HeroButton } from "./HeroButton" +import { HeroDropdown } from "./HeroDropdown" + +const getButtonStyling = (alignment: SectionAlignment = "left") => { + return `hero-alignment-${alignment}` +} + +interface HeroInfoboxDesktopProps { + alignment: SectionAlignment + + size: SectionSize + backgroundColor: SectionBackgroundColor + title: string + subtitle?: string + url?: string + button?: string + dropdown?: EditorHeroDropdownSection["dropdown"] + dropdownIsActive: boolean + toggleDropdown: () => void + variant: "side" | "floating" +} + +const BASE_TITLE_CONTAINER_STYLES = ["mb-8", "is-flex"] + +export const HeroInfoboxDesktop = ({ + variant, + alignment = "left", + size = "md", + backgroundColor = "white", + title, + subtitle, + dropdown, + dropdownIsActive, + toggleDropdown, + url, + button, +}: HeroInfoboxDesktopProps) => { + const SIDE_SECTION_TITLE_CONTAINER_STYLES = [ + "side-section-infobox-container", + `side-section-container-${alignment}`, + ] + + return ( +
+
+
+

+ {title} +

+ + {subtitle && ( +

+ {subtitle} +

+ )} +
+ + {dropdown?.title ? ( +
+ +
+ ) : ( + // NOTE: This is to mirror the template structure + // as closely as possible. + url && + button && ( +
+ +
+ ) + )} +
+
+ ) +} diff --git a/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx b/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx new file mode 100644 index 000000000..3f06fed2d --- /dev/null +++ b/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx @@ -0,0 +1,100 @@ +import editorStyles from "styles/isomer-cms/pages/Editor.module.scss" + +import { getClassNames } from "templates/utils/stylingUtils" + +import { SectionBackgroundColor } from "types/hero" +import { EditorHeroDropdownSection } from "types/homepage" + +import { HeroDropdown } from "./HeroDropdown" + +interface HeroInfoboxMobileProps { + backgroundColor: SectionBackgroundColor + title: string + url?: string + button?: string + dropdown?: EditorHeroDropdownSection["dropdown"] + dropdownIsActive: boolean + toggleDropdown: () => void +} +export const HeroInfoboxMobile = ({ + dropdown, + dropdownIsActive, + toggleDropdown, + url, + button, + title, + backgroundColor = "white", +}: HeroInfoboxMobileProps) => { + return ( + // NOTE: We set `mb-0` on the div because we have legacy css + // dictating negative margin on row:last-child, which causes + // the bottom padding to be smaller than the top. + + ) +} diff --git a/src/templates/homepage/HeroSection/HeroSection.tsx b/src/templates/homepage/HeroSection/HeroSection.tsx index 68de39886..93e9cda99 100644 --- a/src/templates/homepage/HeroSection/HeroSection.tsx +++ b/src/templates/homepage/HeroSection/HeroSection.tsx @@ -19,6 +19,7 @@ import { import { EditorHeroDropdownSection, HeroBannerLayouts } from "types/homepage" import { HeroCenteredLayout } from "./HeroCenteredLayout" +import { HeroFloatingLayout } from "./HeroFloatingLayout" import { HeroImageOnlyLayout } from "./HeroImageOnlyLayout" import { HeroSideLayout } from "./HeroSideLayout" @@ -168,14 +169,12 @@ export const TemplateHeroSection = forwardRef< /> )} {variant === "floating" && ( -
- -
+ )} {/* Key highlights */} diff --git a/src/templates/homepage/HeroSection/HeroSideLayout.tsx b/src/templates/homepage/HeroSection/HeroSideLayout.tsx index e356ca009..22684ed8e 100644 --- a/src/templates/homepage/HeroSection/HeroSideLayout.tsx +++ b/src/templates/homepage/HeroSection/HeroSideLayout.tsx @@ -7,101 +7,18 @@ import editorStyles from "styles/isomer-cms/pages/Editor.module.scss" import { getClassNames } from "templates/utils/stylingUtils" -import { SectionBackgroundColor, SectionSize } from "types/hero" +import { + SectionAlignment, + SectionBackgroundColor, + SectionSize, +} from "types/hero" import { EditorHeroDropdownSection } from "types/homepage" -import { HeroButton } from "./HeroButton" -import { HeroDropdown } from "./HeroDropdown" - -const TRANSLUCENT_GRAY = "#00000080" - -interface HeroInfoboxDesktopProps { - size: SectionSize - backgroundColor: SectionBackgroundColor - title: string - subtitle?: string - url?: string - button?: string - dropdown?: EditorHeroDropdownSection["dropdown"] - dropdownIsActive: boolean - toggleDropdown: () => void -} -const HeroInfoboxDesktop = ({ - size, - backgroundColor, - title, - subtitle, - dropdown, - dropdownIsActive, - toggleDropdown, - url, - button, -}: HeroInfoboxDesktopProps) => { - return ( -
-
-
-

- {title && ( - <> - - {title} - - - {title} - - - )} -

- - {subtitle && ( -

- {subtitle} -

- )} -
- - {dropdown?.title ? ( -
- -
- ) : ( - // NOTE: This is to mirror the template structure - // as closely as possible. - url && button && - )} -
-
- ) -} +import { HeroInfoboxDesktop } from "./HeroInfoboxDesktop" +import { HeroInfoboxMobile } from "./HeroInfoboxMobile" interface HeroSideLayoutProps { - alignment: "left" | "right" + alignment: SectionAlignment size: SectionSize url?: string button?: string @@ -114,7 +31,7 @@ interface HeroSideLayoutProps { } export const HeroSideLayout = ({ alignment = "left", - size = "50%", + size = "md", url, title, subtitle, @@ -127,8 +44,10 @@ export const HeroSideLayout = ({ return (
{/* desktop view - done using css media queries */} - {alignment === "left" ? ( +
- ) : ( -
- -
- )} +
{/* mobile view - done using css media queries */} -
-
-
-

- - {title} - -

-
- {dropdown?.title ? ( - - ) : ( - // NOTE: This is to mirror the template structure - // as closely as possible. - url && - button && ( - - {button} - - ) - )} -
+
+
) diff --git a/src/types/hero.ts b/src/types/hero.ts index 3b26cdea1..611e4ccb1 100644 --- a/src/types/hero.ts +++ b/src/types/hero.ts @@ -1,4 +1,4 @@ -export type SectionSize = "50%" | "33%" +export type SectionSize = "sm" | "md" export type SectionAlignment = "left" | "right" From 5fcc9302ebc49fd2913e8c8ddc4acd1ac52c3e29 Mon Sep 17 00:00:00 2001 From: seaerchin <44049504+seaerchin@users.noreply.github.com> Date: Tue, 3 Oct 2023 11:45:24 +0800 Subject: [PATCH 09/13] refactor(hero): duplicate changes from template (#1551) * refactor(hero): duplicate changes from template * fix(scss-breakpoints): map.get -> map-get --------- Co-authored-by: seaerchin --- .../components/homepage/_hero.scss | 14 +-- .../isomer-template/theme/_breakpoints.scss | 2 +- .../isomer-template/theme/_display.scss | 4 +- src/styles/isomer-template/theme/_layout.scss | 4 + .../HeroSection/HeroInfoboxDesktop.tsx | 104 +++++++++--------- .../HeroSection/HeroInfoboxMobile.tsx | 4 +- 6 files changed, 61 insertions(+), 71 deletions(-) diff --git a/src/styles/isomer-template/components/homepage/_hero.scss b/src/styles/isomer-template/components/homepage/_hero.scss index 6883c1e2c..4b2d52256 100644 --- a/src/styles/isomer-template/components/homepage/_hero.scss +++ b/src/styles/isomer-template/components/homepage/_hero.scss @@ -16,7 +16,7 @@ padding: 3rem 1.5rem; } -@media screen and (min-width: map.get($breakpoints, "md")) { +@media screen and (min-width: map-get($breakpoints, "md")) { .hero-floating { padding: 3rem; } @@ -60,15 +60,7 @@ width: 50%; } -.hero-alignment-left { - align-self: flex-end; -} - -.hero-alignment-right { - align-self: flex-start; -} - -@media screen and (min-width: map.get($breakpoints, "xl")) { +@media screen and (min-width: map-get($breakpoints, "xl")) { .hero-side-sm { width: 50%; } @@ -88,7 +80,7 @@ } } -@media screen and ((max-width: map.get($breakpoints, "xl") - 1)) { +@media screen and ((max-width: (map-get($breakpoints, "xl") - 1))) { .hero-side-sm { width: 33%; } diff --git a/src/styles/isomer-template/theme/_breakpoints.scss b/src/styles/isomer-template/theme/_breakpoints.scss index e3eb92f3e..54d739564 100644 --- a/src/styles/isomer-template/theme/_breakpoints.scss +++ b/src/styles/isomer-template/theme/_breakpoints.scss @@ -11,4 +11,4 @@ $breakpoints: ( ); // Maximum width of site contents -$container-max-width: map.get($breakpoints, "xl"); +$container-max-width: map-get($breakpoints, "xl"); diff --git a/src/styles/isomer-template/theme/_display.scss b/src/styles/isomer-template/theme/_display.scss index 09fff1a29..0d2b0d667 100644 --- a/src/styles/isomer-template/theme/_display.scss +++ b/src/styles/isomer-template/theme/_display.scss @@ -1,7 +1,7 @@ @use "sass:map"; -@media screen and (min-width: map.get($breakpoints, "lg")), - screen and (max-width: (map.get($breakpoints, "md") - 1)) { +@media screen and (min-width: map-get($breakpoints, "lg")), + screen and (max-width: (map-get($breakpoints, "md") - 1)) { .is-visible-tablet-only { display: none !important; } diff --git a/src/styles/isomer-template/theme/_layout.scss b/src/styles/isomer-template/theme/_layout.scss index 6c1824a9d..ad244c431 100644 --- a/src/styles/isomer-template/theme/_layout.scss +++ b/src/styles/isomer-template/theme/_layout.scss @@ -2,6 +2,10 @@ justify-content: flex-end; } +.flex-start { + justify-content: flex-start; +} + .w-100 { width: 100%; } diff --git a/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx b/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx index 6b45783a9..29ef0de17 100644 --- a/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx +++ b/src/templates/homepage/HeroSection/HeroInfoboxDesktop.tsx @@ -12,10 +12,6 @@ import { EditorHeroDropdownSection } from "types/homepage" import { HeroButton } from "./HeroButton" import { HeroDropdown } from "./HeroDropdown" -const getButtonStyling = (alignment: SectionAlignment = "left") => { - return `hero-alignment-${alignment}` -} - interface HeroInfoboxDesktopProps { alignment: SectionAlignment @@ -31,8 +27,6 @@ interface HeroInfoboxDesktopProps { variant: "side" | "floating" } -const BASE_TITLE_CONTAINER_STYLES = ["mb-8", "is-flex"] - export const HeroInfoboxDesktop = ({ variant, alignment = "left", @@ -46,11 +40,6 @@ export const HeroInfoboxDesktop = ({ url, button, }: HeroInfoboxDesktopProps) => { - const SIDE_SECTION_TITLE_CONTAINER_STYLES = [ - "side-section-infobox-container", - `side-section-container-${alignment}`, - ] - return (
-

- {title} -

- - {subtitle && ( -

- {subtitle} -

- )} -
+ {title} + - {dropdown?.title ? ( -
- + {subtitle && ( +

+ {subtitle} +

+ )}
- ) : ( - // NOTE: This is to mirror the template structure - // as closely as possible. - url && - button && ( + {dropdown?.title ? (
- +
- ) - )} + ) : ( + // NOTE: This is to mirror the template structure + // as closely as possible. + url && + button && ( +
+ +
+ ) + )} +
) diff --git a/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx b/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx index 3f06fed2d..0a415c63c 100644 --- a/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx +++ b/src/templates/homepage/HeroSection/HeroInfoboxMobile.tsx @@ -40,8 +40,8 @@ export const HeroInfoboxMobile = ({ style={{ paddingTop: "106px", paddingBottom: "106px", - paddingLeft: "84px", - paddingRight: "84px", + paddingLeft: "48px", + paddingRight: "48px", }} >
Date: Tue, 3 Oct 2023 11:47:05 +0800 Subject: [PATCH 10/13] chore(cleanup): delete unused styles (#1548) * refactor(templates): delete unused styles * fix(styles): removed unsued imports --------- Co-authored-by: seaerchin --- src/styles/isomer-template.scss | 6 ------ src/styles/preview-panel.scss | 1 - src/styles/templates/theme/background.scss | 3 --- src/styles/templates/theme/layout.scss | 3 --- src/styles/templates/theme/margin.scss | 7 ------- src/styles/templates/theme/padding.scss | 12 ------------ src/styles/templates/theme/text-styles.scss | 17 ----------------- 7 files changed, 49 deletions(-) delete mode 100644 src/styles/templates/theme/background.scss delete mode 100644 src/styles/templates/theme/layout.scss delete mode 100644 src/styles/templates/theme/margin.scss delete mode 100644 src/styles/templates/theme/padding.scss delete mode 100644 src/styles/templates/theme/text-styles.scss diff --git a/src/styles/isomer-template.scss b/src/styles/isomer-template.scss index e34b602d8..6d0b86e28 100644 --- a/src/styles/isomer-template.scss +++ b/src/styles/isomer-template.scss @@ -1,10 +1,4 @@ @charset "UTF-8"; -@use 'templates/components/hero.scss'; -@use "templates/theme/padding.scss"; -@use "templates/theme/text-styles.scss"; -@use "templates/theme/margin.scss"; -@use "templates/theme/layout.scss"; -@use "templates/theme/background.scss"; .bg-media-color-0 { background-color: #4b268e; diff --git a/src/styles/preview-panel.scss b/src/styles/preview-panel.scss index 757caa63c..e91301ce2 100644 --- a/src/styles/preview-panel.scss +++ b/src/styles/preview-panel.scss @@ -1,5 +1,4 @@ @use "sass:meta"; -@use 'templates/components/hero.scss'; @include meta.load-css("sgds-govtech/css/sgds"); @include meta.load-css("./isomer-template.scss"); diff --git a/src/styles/templates/theme/background.scss b/src/styles/templates/theme/background.scss deleted file mode 100644 index a00ec4fbf..000000000 --- a/src/styles/templates/theme/background.scss +++ /dev/null @@ -1,3 +0,0 @@ -.bg-white { - background-color: white; -} diff --git a/src/styles/templates/theme/layout.scss b/src/styles/templates/theme/layout.scss deleted file mode 100644 index b33ef8217..000000000 --- a/src/styles/templates/theme/layout.scss +++ /dev/null @@ -1,3 +0,0 @@ -.flex-end { - justify-content: flex-end; -} diff --git a/src/styles/templates/theme/margin.scss b/src/styles/templates/theme/margin.scss deleted file mode 100644 index 555fa6e60..000000000 --- a/src/styles/templates/theme/margin.scss +++ /dev/null @@ -1,7 +0,0 @@ -.mb4 { - margin-bottom: 1rem; -} - -.mb8 { - margin-bottom: 2rem; -} diff --git a/src/styles/templates/theme/padding.scss b/src/styles/templates/theme/padding.scss deleted file mode 100644 index e1ed7f023..000000000 --- a/src/styles/templates/theme/padding.scss +++ /dev/null @@ -1,12 +0,0 @@ -.p8 { - padding: 2rem; -} - -.p16 { - padding: 4rem; -} - -.py16 { - padding-top: 4rem; - padding-bottom: 4rem; -} diff --git a/src/styles/templates/theme/text-styles.scss b/src/styles/templates/theme/text-styles.scss deleted file mode 100644 index 330b73df2..000000000 --- a/src/styles/templates/theme/text-styles.scss +++ /dev/null @@ -1,17 +0,0 @@ -.hero-title { - font-family: Lato; - font-size: 3rem; - font-style: normal; - font-weight: 700; - line-height: 3.5rem; /* 116.667% */ - letter-spacing: -1.056px; -} - -.hero-subtitle { - font-feature-settings: "clig" off, "liga" off; - font-family: Lato; - font-size: 1.25rem; - font-style: normal; - font-weight: 400; - line-height: 2rem; /* 160% */ -} From a38017e06c49a635a172f0a67b72791e809176e8 Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Tue, 3 Oct 2023 12:20:26 +0800 Subject: [PATCH 11/13] Fix/text cards design (#1535) * fix: preview changes * fix: validator changes * fix: panel changes * fix: initialise text cards section with 3 cards * fix: additional padding fixes --- src/layouts/EditHomepage/EditHomepage.jsx | 16 +++++++++ .../components/Homepage/AnnouncementBody.tsx | 2 +- .../Homepage/AnnouncementSection.tsx | 2 +- .../components/Homepage/TextCardsBody.tsx | 35 ++++++++++++------- .../components/NavBar/GroupMenuBody.tsx | 2 +- .../components/homepage/_text-cards.scss | 8 ----- src/templates/homepage/TextCardsSection.tsx | 14 +++++--- src/utils/validators.js | 22 ++++++------ 8 files changed, 62 insertions(+), 39 deletions(-) diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx index 382f4ce5f..21e22e53c 100644 --- a/src/layouts/EditHomepage/EditHomepage.jsx +++ b/src/layouts/EditHomepage/EditHomepage.jsx @@ -773,6 +773,22 @@ const EditHomepage = ({ match }) => { }) ) setDisplayAnnouncementItems(_.fill(Array(1), false)) + } else if (val.textcards) { + // Create 3 text cards by default + const parentId = + updatedHomepageState.frontMatter.sections.length - 1 + let intermediateHomepageState = updatedHomepageState + for (let i = 0; i < 3; i += 1) { + const cardVal = TEXTCARDS_ITEM_SECTION + const cardErr = getErrorValues(TEXTCARDS_ITEM_SECTION) + intermediateHomepageState = onCreate( + intermediateHomepageState, + `textCardItem-${parentId}`, + cardVal, + cardErr + ) + } + setHomepageState(intermediateHomepageState) } break } diff --git a/src/layouts/components/Homepage/AnnouncementBody.tsx b/src/layouts/components/Homepage/AnnouncementBody.tsx index b4db3263e..37487ae3d 100644 --- a/src/layouts/components/Homepage/AnnouncementBody.tsx +++ b/src/layouts/components/Homepage/AnnouncementBody.tsx @@ -72,7 +72,7 @@ export const AnnouncementBody = ({ - Announcements + Announcements {`You can display up to ${MAX_ANNOUNCEMENTS} announcements at a time. Newly added announcements are shown on the top of the list`} diff --git a/src/layouts/components/Homepage/AnnouncementSection.tsx b/src/layouts/components/Homepage/AnnouncementSection.tsx index 156e62984..5c29e99a4 100644 --- a/src/layouts/components/Homepage/AnnouncementSection.tsx +++ b/src/layouts/components/Homepage/AnnouncementSection.tsx @@ -51,7 +51,7 @@ export const AnnouncementSection = ({ /> {errors.title} - + {children}
))}
diff --git a/src/utils/validators.js b/src/utils/validators.js index 4856af436..dcd673cb7 100644 --- a/src/utils/validators.js +++ b/src/utils/validators.js @@ -615,11 +615,11 @@ const validateTextcardsSection = (sectionError, sectionType, field, value) => { switch (field) { case "title": { // Title is too short - if (value.length <= TEXTCARDS_CARD_TITLE_MIN_LENGTH) { - errorMessage = `Title should be longer than ${TEXTCARDS_BLOCK_TITLE_MIN_LENGTH} characters.` + if (value.length <= TEXTCARDS_BLOCK_TITLE_MIN_LENGTH) { + errorMessage = `Title cannot be empty.` } // Title is too long - if (value.length >= TEXTCARDS_CARD_TITLE_MAX_LENGTH) { + if (value.length >= TEXTCARDS_BLOCK_TITLE_MAX_LENGTH) { errorMessage = `Title should be shorter than ${TEXTCARDS_BLOCK_TITLE_MAX_LENGTH} characters.` } break @@ -632,9 +632,9 @@ const validateTextcardsSection = (sectionError, sectionType, field, value) => { break } case "description": { - // Button text is too long + // Description is too long if (value.length >= TEXTCARDS_BLOCK_DESCRIPTION_MAX_LENGTH) { - errorMessage = `Button text should be shorter than ${TEXTCARDS_BLOCK_DESCRIPTION_MAX_LENGTH} characters.` + errorMessage = `Description should be shorter than ${TEXTCARDS_BLOCK_DESCRIPTION_MAX_LENGTH} characters (${value.length}/${TEXTCARDS_BLOCK_DESCRIPTION_MAX_LENGTH} characters)` } break } @@ -652,36 +652,36 @@ const validateTextcard = (cardError, field, value) => { case "title": { // Title is too short if (value.length <= TEXTCARDS_CARD_TITLE_MIN_LENGTH) { - errorMessage = `The title should be longer than ${TEXTCARDS_CARD_TITLE_MIN_LENGTH} characters.` + errorMessage = `Title cannot be empty` } // Title is too long if (value.length >= TEXTCARDS_CARD_TITLE_MAX_LENGTH) { - errorMessage = `The title should be shorter than ${TEXTCARDS_CARD_TITLE_MAX_LENGTH} characters.` + errorMessage = `Title should be shorter than ${TEXTCARDS_CARD_TITLE_MAX_LENGTH} characters` } break } case "description": { // Description is too long if (value.length >= TEXTCARDS_CARD_DESCRIPTION_MAX_LENGTH) { - errorMessage = `The description should be shorter than ${TEXTCARDS_CARD_DESCRIPTION_MAX_LENGTH} characters.` + errorMessage = `The description should be shorter than ${TEXTCARDS_CARD_DESCRIPTION_MAX_LENGTH} characters (${value.length}/${TEXTCARDS_CARD_DESCRIPTION_MAX_LENGTH})` } break } case "linktext": { // Link text is too short if (value.length <= TEXTCARDS_CARD_LINKTEXT_MIN_LENGTH) { - errorMessage = `The description should be longer than ${TEXTCARDS_CARD_LINKTEXT_MIN_LENGTH} characters.` + errorMessage = `Link text cannot be empty` } // Link text is too long if (value.length >= TEXTCARDS_CARD_LINKTEXT_MAX_LENGTH) { - errorMessage = `The description should be shorter than ${TEXTCARDS_CARD_LINKTEXT_MAX_LENGTH} characters.` + errorMessage = `Text should be shorter than ${TEXTCARDS_CARD_LINKTEXT_MAX_LENGTH} characters.` } break } case "url": { // Url is too short if (value.length <= TEXTCARDS_CARD_URL_MIN_LENGTH) { - errorMessage = `The description should be longer than ${TEXTCARDS_CARD_URL_MIN_LENGTH} characters.` + errorMessage = `Please specify a URL for your card.` } break } From 9a051e910e66275905c550256378febdacdaf4e0 Mon Sep 17 00:00:00 2001 From: seaerchin <44049504+seaerchin@users.noreply.github.com> Date: Tue, 3 Oct 2023 13:06:14 +0800 Subject: [PATCH 12/13] fix(herocenteredlayout): make dropdown optional (#1556) --- src/templates/homepage/HeroSection/HeroCenteredLayout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx b/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx index c5bab78ee..c355477b1 100644 --- a/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx +++ b/src/templates/homepage/HeroSection/HeroCenteredLayout.tsx @@ -13,7 +13,7 @@ interface HeroCenteredLayoutProps { title?: string subtitle?: string button?: string - dropdown: EditorHeroDropdownSection["dropdown"] + dropdown?: EditorHeroDropdownSection["dropdown"] } dropdownIsActive: boolean toggleDropdown: () => void @@ -75,7 +75,7 @@ export const HeroCenteredLayout = ({

) : null} {/* Hero dropdown */} - {hero.dropdown.title ? ( + {hero.dropdown?.title ? ( Date: Tue, 3 Oct 2023 13:09:07 +0800 Subject: [PATCH 13/13] 0.47.0 --- CHANGELOG.md | 18 ++++++++++++++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 36cc0350e..c3455150c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,8 +4,26 @@ All notable changes to this project will be documented in this file. Dates are d Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). +#### [v0.47.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.46.0...v0.47.0) + +- fix(herocenteredlayout): make dropdown optional [`#1556`](https://github.com/isomerpages/isomercms-frontend/pull/1556) +- Fix/text cards design [`#1535`](https://github.com/isomerpages/isomercms-frontend/pull/1535) +- chore(cleanup): delete unused styles [`#1548`](https://github.com/isomerpages/isomercms-frontend/pull/1548) +- refactor(hero): duplicate changes from template [`#1551`](https://github.com/isomerpages/isomercms-frontend/pull/1551) +- chore(hero): duplicate template changes [`#1547`](https://github.com/isomerpages/isomercms-frontend/pull/1547) +- refactor(text-styles): update to have mobile [`#1546`](https://github.com/isomerpages/isomercms-frontend/pull/1546) +- fix(hero): update panel styles for hero section [`#1543`](https://github.com/isomerpages/isomercms-frontend/pull/1543) +- chore(announcements): sync changes from template [`#1540`](https://github.com/isomerpages/isomercms-frontend/pull/1540) +- fix(announcements): add validation url [`#1545`](https://github.com/isomerpages/isomercms-frontend/pull/1545) +- chore: move nps form to growthbook [`#1542`](https://github.com/isomerpages/isomercms-frontend/pull/1542) +- chore: move warning banner to growthbook [`#1541`](https://github.com/isomerpages/isomercms-frontend/pull/1541) +- IS-577: Move site privatisation to growth book [`#1529`](https://github.com/isomerpages/isomercms-frontend/pull/1529) +- 0.46.0 [`#1534`](https://github.com/isomerpages/isomercms-frontend/pull/1534) + #### [v0.46.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.45.0...v0.46.0) +> 27 September 2023 + - fix(announemnt): fix announcemnt bug [`#1532`](https://github.com/isomerpages/isomercms-frontend/pull/1532) - Feat/text cards panel [`#1505`](https://github.com/isomerpages/isomercms-frontend/pull/1505) - Fix/homepageAnnouncementScroll [`#1530`](https://github.com/isomerpages/isomercms-frontend/pull/1530) diff --git a/package-lock.json b/package-lock.json index cea216652..b23adb234 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "isomercms-frontend", - "version": "0.46.0", + "version": "0.47.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "isomercms-frontend", - "version": "0.46.0", + "version": "0.47.0", "hasInstallScript": true, "dependencies": { "@braintree/sanitize-url": "^6.0.1", diff --git a/package.json b/package.json index bbff11801..dc4f2cd3f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "isomercms-frontend", - "version": "0.46.0", + "version": "0.47.0", "private": true, "engines": { "node": ">=16.0.0"