From 3502c90fd69acf83e853b976cff716ade9ef77f0 Mon Sep 17 00:00:00 2001 From: Alice Clausen <42611957+alicemacl@users.noreply.github.com> Date: Mon, 3 Jun 2024 15:54:41 +0200 Subject: [PATCH 1/7] Make it pride --- apps/docs/app/root/layout/SiteSettings.tsx | 3 + packages/spor-react/src/index.tsx | 1 + .../src/loader/ColorInlineLoader.tsx | 11 +- .../spor-react/src/loader/ColorSpinner.tsx | 14 +- .../spor-react/src/loader/ContentLoader.tsx | 15 +- .../src/loader/DarkInlineLoader.tsx | 15 +- .../src/loader/LightInlineLoader.tsx | 15 +- packages/spor-react/src/logo/VyLogo.tsx | 7 + packages/spor-react/src/logo/VyLogoPride.tsx | 164 ++++++++++++++++++ packages/spor-react/src/logo/index.tsx | 1 + .../spor-react/src/pride/PrideProvider.tsx | 56 ++++++ packages/spor-react/src/pride/TogglePride.tsx | 27 +++ packages/spor-react/src/pride/index.tsx | 2 + .../spor-react/src/provider/SporProvider.tsx | 11 +- packages/spor-react/src/provider/index.tsx | 1 + 15 files changed, 330 insertions(+), 13 deletions(-) create mode 100644 packages/spor-react/src/logo/VyLogoPride.tsx create mode 100644 packages/spor-react/src/pride/PrideProvider.tsx create mode 100644 packages/spor-react/src/pride/TogglePride.tsx create mode 100644 packages/spor-react/src/pride/index.tsx diff --git a/apps/docs/app/root/layout/SiteSettings.tsx b/apps/docs/app/root/layout/SiteSettings.tsx index 4f9b92095..c9313ebf0 100644 --- a/apps/docs/app/root/layout/SiteSettings.tsx +++ b/apps/docs/app/root/layout/SiteSettings.tsx @@ -12,6 +12,7 @@ import { Switch, Text, useColorMode, + TogglePride, } from "@vygruppen/spor-react"; import { BrandSwitcher } from "~/features/brand-switcher/BrandSwitcher"; @@ -23,6 +24,7 @@ export const SiteSettings = ({ showLabel }: SiteSettingsProps) => { const labelProps = showLabel ? { label: "Settings" } : { "aria-label": "Settings" }; + return ( { defaultChecked={colorMode === "dark"} /> + diff --git a/packages/spor-react/src/index.tsx b/packages/spor-react/src/index.tsx index dc03ded41..91374a6fb 100644 --- a/packages/spor-react/src/index.tsx +++ b/packages/spor-react/src/index.tsx @@ -18,6 +18,7 @@ export * from "./media-controller"; export * from "./modal"; export * from "./nudge"; export * from "./pagination"; +export * from "./pride"; export * from "./progress-indicator"; export * from "./provider"; export * from "./stepper"; diff --git a/packages/spor-react/src/loader/ColorInlineLoader.tsx b/packages/spor-react/src/loader/ColorInlineLoader.tsx index 4db4ac827..a14d15b92 100644 --- a/packages/spor-react/src/loader/ColorInlineLoader.tsx +++ b/packages/spor-react/src/loader/ColorInlineLoader.tsx @@ -3,6 +3,8 @@ import { inlineLoaderColorData } from "@vygruppen/spor-loader"; import React from "react"; import { ClientOnly } from "./ClientOnly"; import Lottie from "./Lottie"; +import { inlineLoaderColorPrideData } from "@vygruppen/spor-loader"; +import { usePride } from "../pride"; export type ColorInlineLoaderProps = Exclude; /** @@ -15,11 +17,18 @@ export const ColorInlineLoader = ({ maxWidth, ...props }: ColorInlineLoaderProps) => { + const { isPride } = usePride(); return (
- {() => } + {() => ( + + )}
diff --git a/packages/spor-react/src/loader/ColorSpinner.tsx b/packages/spor-react/src/loader/ColorSpinner.tsx index acc883020..3a06dc178 100644 --- a/packages/spor-react/src/loader/ColorSpinner.tsx +++ b/packages/spor-react/src/loader/ColorSpinner.tsx @@ -1,8 +1,12 @@ import { Box, BoxProps, Center } from "@chakra-ui/react"; -import { spinnerColorData } from "@vygruppen/spor-loader"; +import { + spinnerColorData, + spinnerColorPrideData, +} from "@vygruppen/spor-loader"; import React from "react"; import { ClientOnly } from "./ClientOnly"; import Lottie from "./Lottie"; +import { usePride } from "../pride/PrideProvider"; export type SpinnerProps = BoxProps; export type ColorSpinnerProps = SpinnerProps; @@ -25,13 +29,19 @@ export const ColorSpinner = ({ children, width, maxWidth, + ...props }: SpinnerProps) => { + const { isPride } = usePride(); return (
- {() => } + {() => ( + + )} {children && ( diff --git a/packages/spor-react/src/loader/ContentLoader.tsx b/packages/spor-react/src/loader/ContentLoader.tsx index ebde512f3..65d7e8ca6 100644 --- a/packages/spor-react/src/loader/ContentLoader.tsx +++ b/packages/spor-react/src/loader/ContentLoader.tsx @@ -1,8 +1,12 @@ import { Box, BoxProps } from "@chakra-ui/react"; -import { contentLoaderData } from "@vygruppen/spor-loader"; +import { + contentLoaderData, + contentLoaderPrideData, +} from "@vygruppen/spor-loader"; import React from "react"; import { ClientOnly } from "./ClientOnly"; import Lottie from "./Lottie"; +import { usePride } from "../pride/PrideProvider"; export type ContentLoaderProps = BoxProps; /** @@ -10,11 +14,18 @@ export type ContentLoaderProps = BoxProps; * It should mostly be used for */ export const ContentLoader = ({ children, ...props }: ContentLoaderProps) => { + const { isPride } = usePride(); return ( - {() => } + {() => ( + + )} {children && ( diff --git a/packages/spor-react/src/loader/DarkInlineLoader.tsx b/packages/spor-react/src/loader/DarkInlineLoader.tsx index d1eceab39..9bc199462 100644 --- a/packages/spor-react/src/loader/DarkInlineLoader.tsx +++ b/packages/spor-react/src/loader/DarkInlineLoader.tsx @@ -1,8 +1,12 @@ import { Box, BoxProps, Center } from "@chakra-ui/react"; -import { inlineLoaderDarkData } from "@vygruppen/spor-loader"; +import { + inlineLoaderColorPrideData, + inlineLoaderDarkData, +} from "@vygruppen/spor-loader"; import React from "react"; import { ClientOnly } from "./ClientOnly"; import Lottie from "./Lottie"; +import { usePride } from "../pride/PrideProvider"; export type DarkInlineLoaderProps = Exclude; /** @@ -13,11 +17,18 @@ export const DarkInlineLoader = ({ maxWidth, ...props }: DarkInlineLoaderProps) => { + const { isPride } = usePride(); return (
- {() => } + {() => ( + + )}
diff --git a/packages/spor-react/src/loader/LightInlineLoader.tsx b/packages/spor-react/src/loader/LightInlineLoader.tsx index 2e80bb7e9..f5c753ff3 100644 --- a/packages/spor-react/src/loader/LightInlineLoader.tsx +++ b/packages/spor-react/src/loader/LightInlineLoader.tsx @@ -1,8 +1,12 @@ import { Box, BoxProps, Center } from "@chakra-ui/react"; -import { inlineLoaderLightData } from "@vygruppen/spor-loader"; +import { + inlineLoaderColorPrideData, + inlineLoaderLightData, +} from "@vygruppen/spor-loader"; import React from "react"; import { ClientOnly } from "./ClientOnly"; import Lottie from "./Lottie"; +import { usePride } from "../pride/PrideProvider"; export type LightInlineLoaderProps = Exclude; /** @@ -13,11 +17,18 @@ export const LightInlineLoader = ({ maxWidth, ...props }: LightInlineLoaderProps) => { + const { isPride } = usePride(); return (
- {() => } + {() => ( + + )}
diff --git a/packages/spor-react/src/logo/VyLogo.tsx b/packages/spor-react/src/logo/VyLogo.tsx index 21aed0f13..89c35c255 100644 --- a/packages/spor-react/src/logo/VyLogo.tsx +++ b/packages/spor-react/src/logo/VyLogo.tsx @@ -1,5 +1,7 @@ import { Box, BoxProps } from "@chakra-ui/react"; import React, { useId } from "react"; +import { usePride } from "../pride"; +import { VyLogoPride } from "./VyLogoPride"; export type VyLogoProps = { /** The color of the logo @@ -10,6 +12,11 @@ export type VyLogoProps = { colorScheme: "light" | "dark"; } & BoxProps; export const VyLogo = ({ colorScheme, ...boxProps }: VyLogoProps) => { + const { isPride } = usePride(); + + if (isPride) { + return ; + } // These colors should not be tokenized, as they are logo specific. const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff"; const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff"; diff --git a/packages/spor-react/src/logo/VyLogoPride.tsx b/packages/spor-react/src/logo/VyLogoPride.tsx new file mode 100644 index 000000000..5d309c900 --- /dev/null +++ b/packages/spor-react/src/logo/VyLogoPride.tsx @@ -0,0 +1,164 @@ +import { Box, BoxProps } from "@chakra-ui/react"; +import React, { useId } from "react"; + +export type VyLogoPrideProps = { + /** The color of the logo + * + * Use `"light"` when the logo is used on a light background. + * Use `"dark"` when the logo is used on a dark background. + */ + colorScheme: "light" | "dark"; +} & BoxProps; +export const VyLogoPride = ({ colorScheme, ...boxProps }: VyLogoPrideProps) => { + // These colors should not be tokenized, as they are logo specific. + const pinkColor = colorScheme === "dark" ? "#ED6F99" : "#ffffff"; + const purpleColor = colorScheme === "dark" ? "#C06CF7" : "#ffffff"; + const darkPurpleColor = colorScheme === "dark" ? "#821889" : "#ffffff"; + const greenColor = colorScheme === "dark" ? "#56BDBF" : "#ffffff"; + const darkGreenColor = colorScheme === "dark" ? "#3E8C26" : "#ffffff"; + const blueColor = colorScheme === "dark" ? "#3A0692" : "#ffffff"; + const redColor = colorScheme === "dark" ? "#EA3323" : "#ffffff"; + const orangeColor = colorScheme === "dark" ? "#F09436" : "#ffffff"; + const yellowColor = colorScheme === "dark" ? "#FFFF54" : "#ffffff"; + + const id = useId(); + return ( + + Vy logo pride + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/spor-react/src/logo/index.tsx b/packages/spor-react/src/logo/index.tsx index 3a922f62f..8f73c3719 100644 --- a/packages/spor-react/src/logo/index.tsx +++ b/packages/spor-react/src/logo/index.tsx @@ -1 +1,2 @@ export * from "./VyLogo"; +export * from "./VyLogoPride"; \ No newline at end of file diff --git a/packages/spor-react/src/pride/PrideProvider.tsx b/packages/spor-react/src/pride/PrideProvider.tsx new file mode 100644 index 000000000..806f6d07e --- /dev/null +++ b/packages/spor-react/src/pride/PrideProvider.tsx @@ -0,0 +1,56 @@ +// PrideContext.tsx +import React, { createContext, useContext, useEffect, useState } from "react"; + +interface PrideContextProps { + isPride: boolean; + togglePride: () => void; +} + +const PrideContext = createContext(undefined); + +export const PrideProvider: React.FC> = ({ + children, +}) => { + const isBrowser = typeof window !== "undefined"; + + const [isPride, setIsPride] = useState(() => { + if (isBrowser) { + const savedState = localStorage.getItem("isPride"); + return savedState ? JSON.parse(savedState) : false; + } + return false; + }); + + const togglePride = () => { + setIsPride((prev) => { + const newState = !prev; + if (isBrowser) { + localStorage.setItem("isPride", JSON.stringify(newState)); + } + return newState; + }); + }; + + useEffect(() => { + if (isBrowser) { + const savedState = localStorage.getItem("isPride"); + if (savedState) { + setIsPride(JSON.parse(savedState)); + } + } + }, [isBrowser]); + + return ( + + {children} + + ); +}; + +export const usePride = (): PrideContextProps => { + const context = useContext(PrideContext); + if (context === undefined) { + throw new Error("usePride must be used within a PrideProvider"); + } + return context; +}; diff --git a/packages/spor-react/src/pride/TogglePride.tsx b/packages/spor-react/src/pride/TogglePride.tsx new file mode 100644 index 000000000..2f131ada1 --- /dev/null +++ b/packages/spor-react/src/pride/TogglePride.tsx @@ -0,0 +1,27 @@ +// TogglePride.tsx +import React from "react"; +import { usePride } from "./PrideProvider"; +import { FormControl, FormLabel, Switch } from "../input"; + +type TogglePrideProps = { + label?: string; +}; + +export const TogglePride = ({ label }: TogglePrideProps) => { + const { isPride, togglePride } = usePride(); + + console.log(isPride); + + return ( + + ); +}; diff --git a/packages/spor-react/src/pride/index.tsx b/packages/spor-react/src/pride/index.tsx new file mode 100644 index 000000000..120001c44 --- /dev/null +++ b/packages/spor-react/src/pride/index.tsx @@ -0,0 +1,2 @@ +export * from "./PrideProvider"; +export * from "./TogglePride"; diff --git a/packages/spor-react/src/provider/SporProvider.tsx b/packages/spor-react/src/provider/SporProvider.tsx index 91a956cc5..c8528f363 100644 --- a/packages/spor-react/src/provider/SporProvider.tsx +++ b/packages/spor-react/src/provider/SporProvider.tsx @@ -4,6 +4,7 @@ import deepmerge from "deepmerge"; import React from "react"; import { Language, LanguageProvider } from ".."; import { Brand, brandTheme, theme as defaultSporTheme, fontFaces } from "../"; +import { PrideProvider } from "../pride/PrideProvider"; type SporProviderProps = ChakraProviderProps & { language?: Language; @@ -59,10 +60,12 @@ export const SporProvider = ({ return ( - - - {children} - + + + + {children} + + ); }; diff --git a/packages/spor-react/src/provider/index.tsx b/packages/spor-react/src/provider/index.tsx index 2e03751bc..e37d054a5 100644 --- a/packages/spor-react/src/provider/index.tsx +++ b/packages/spor-react/src/provider/index.tsx @@ -1 +1,2 @@ export * from "./SporProvider"; +export * from "../pride/PrideProvider"; From 7b074740a3bef516eba706c41915def49efbdee3 Mon Sep 17 00:00:00 2001 From: Alice Clausen <42611957+alicemacl@users.noreply.github.com> Date: Mon, 3 Jun 2024 16:04:31 +0200 Subject: [PATCH 2/7] Full screen loader --- .../src/loader/LightFullScreenLoader.tsx | 11 ++++++++++- packages/spor-react/src/logo/VyLogoPride.tsx | 18 +++++++++--------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/spor-react/src/loader/LightFullScreenLoader.tsx b/packages/spor-react/src/loader/LightFullScreenLoader.tsx index 829742385..6261338d9 100644 --- a/packages/spor-react/src/loader/LightFullScreenLoader.tsx +++ b/packages/spor-react/src/loader/LightFullScreenLoader.tsx @@ -3,6 +3,8 @@ import { fullScreenLoaderBlackData } from "@vygruppen/spor-loader"; import React from "react"; import { ClientOnly } from "./ClientOnly"; import Lottie from "./Lottie"; +import { usePride } from "../pride"; +import { vyLogoPrideData } from "@vygruppen/spor-loader"; type LightFullScreenLoaderProps = BoxProps; @@ -11,11 +13,18 @@ export const LightFullScreenLoader = ({ maxWidth, ...props }: LightFullScreenLoaderProps) => { + const { isPride } = usePride(); return (
- {() => } + {() => ( + + )}
diff --git a/packages/spor-react/src/logo/VyLogoPride.tsx b/packages/spor-react/src/logo/VyLogoPride.tsx index 5d309c900..e0a813f58 100644 --- a/packages/spor-react/src/logo/VyLogoPride.tsx +++ b/packages/spor-react/src/logo/VyLogoPride.tsx @@ -11,15 +11,15 @@ export type VyLogoPrideProps = { } & BoxProps; export const VyLogoPride = ({ colorScheme, ...boxProps }: VyLogoPrideProps) => { // These colors should not be tokenized, as they are logo specific. - const pinkColor = colorScheme === "dark" ? "#ED6F99" : "#ffffff"; - const purpleColor = colorScheme === "dark" ? "#C06CF7" : "#ffffff"; - const darkPurpleColor = colorScheme === "dark" ? "#821889" : "#ffffff"; - const greenColor = colorScheme === "dark" ? "#56BDBF" : "#ffffff"; - const darkGreenColor = colorScheme === "dark" ? "#3E8C26" : "#ffffff"; - const blueColor = colorScheme === "dark" ? "#3A0692" : "#ffffff"; - const redColor = colorScheme === "dark" ? "#EA3323" : "#ffffff"; - const orangeColor = colorScheme === "dark" ? "#F09436" : "#ffffff"; - const yellowColor = colorScheme === "dark" ? "#FFFF54" : "#ffffff"; + const pinkColor = colorScheme === "light" ? "#ED6F99" : "#ffffff"; + const purpleColor = colorScheme === "light" ? "#C06CF7" : "#ffffff"; + const darkPurpleColor = colorScheme === "light" ? "#821889" : "#ffffff"; + const greenColor = colorScheme === "light" ? "#56BDBF" : "#ffffff"; + const darkGreenColor = colorScheme === "light" ? "#3E8C26" : "#ffffff"; + const blueColor = colorScheme === "light" ? "#3A0692" : "#ffffff"; + const redColor = colorScheme === "light" ? "#EA3323" : "#ffffff"; + const orangeColor = colorScheme === "light" ? "#F09436" : "#ffffff"; + const yellowColor = colorScheme === "light" ? "#FFFF54" : "#ffffff"; const id = useId(); return ( From 4126efdf66d14ea5b62dc85073f35452870c00b6 Mon Sep 17 00:00:00 2001 From: Alice Clausen <42611957+alicemacl@users.noreply.github.com> Date: Mon, 3 Jun 2024 16:06:14 +0200 Subject: [PATCH 3/7] make label --- packages/spor-react/src/pride/TogglePride.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/spor-react/src/pride/TogglePride.tsx b/packages/spor-react/src/pride/TogglePride.tsx index 2f131ada1..4eae41641 100644 --- a/packages/spor-react/src/pride/TogglePride.tsx +++ b/packages/spor-react/src/pride/TogglePride.tsx @@ -4,7 +4,7 @@ import { usePride } from "./PrideProvider"; import { FormControl, FormLabel, Switch } from "../input"; type TogglePrideProps = { - label?: string; + label: string; }; export const TogglePride = ({ label }: TogglePrideProps) => { From 00c88296f7d4c3bc86c5990650ac804b1d4e4954 Mon Sep 17 00:00:00 2001 From: Alice Clausen <42611957+alicemacl@users.noreply.github.com> Date: Mon, 3 Jun 2024 16:07:06 +0200 Subject: [PATCH 4/7] run lint --- packages/spor-react/src/logo/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/spor-react/src/logo/index.tsx b/packages/spor-react/src/logo/index.tsx index 8f73c3719..4bd30cb93 100644 --- a/packages/spor-react/src/logo/index.tsx +++ b/packages/spor-react/src/logo/index.tsx @@ -1,2 +1,2 @@ export * from "./VyLogo"; -export * from "./VyLogoPride"; \ No newline at end of file +export * from "./VyLogoPride"; From 4129826149753cd68c93f72bebf69582f95af57f Mon Sep 17 00:00:00 2001 From: Alice Clausen <42611957+alicemacl@users.noreply.github.com> Date: Mon, 3 Jun 2024 16:12:54 +0200 Subject: [PATCH 5/7] Add changeset --- .changeset/silent-cougars-breathe.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silent-cougars-breathe.md diff --git a/.changeset/silent-cougars-breathe.md b/.changeset/silent-cougars-breathe.md new file mode 100644 index 000000000..5b0a47a48 --- /dev/null +++ b/.changeset/silent-cougars-breathe.md @@ -0,0 +1,5 @@ +--- +"@vygruppen/spor-react": minor +--- + +Added support for Pride colors for VyDigital theme From 40295263234d7069ebc5f75ee2ddc701483957cf Mon Sep 17 00:00:00 2001 From: Alice Clausen <42611957+alicemacl@users.noreply.github.com> Date: Mon, 3 Jun 2024 16:13:39 +0200 Subject: [PATCH 6/7] bump docs version --- apps/docs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/package.json b/apps/docs/package.json index 31b8fb1a9..b086bce88 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -1,6 +1,6 @@ { "private": true, - "version": "0.0.32", + "version": "0.0.33", "name": "@vygruppen/docs", "description": "The Spor documentation", "license": "MIT", From bff21e5147bcfdf119cf886f197025c80f97a3f0 Mon Sep 17 00:00:00 2001 From: Alice Clausen <42611957+alicemacl@users.noreply.github.com> Date: Thu, 6 Jun 2024 08:52:15 +0200 Subject: [PATCH 7/7] Remove console.log, update to true --- .../spor-react/src/pride/PrideProvider.tsx | 12 ++++++----- packages/spor-react/src/pride/TogglePride.tsx | 20 ++++++++----------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/packages/spor-react/src/pride/PrideProvider.tsx b/packages/spor-react/src/pride/PrideProvider.tsx index 806f6d07e..b8ddb104d 100644 --- a/packages/spor-react/src/pride/PrideProvider.tsx +++ b/packages/spor-react/src/pride/PrideProvider.tsx @@ -13,19 +13,21 @@ export const PrideProvider: React.FC> = ({ }) => { const isBrowser = typeof window !== "undefined"; + const key = "spor__isPride"; + const [isPride, setIsPride] = useState(() => { if (isBrowser) { - const savedState = localStorage.getItem("isPride"); - return savedState ? JSON.parse(savedState) : false; + const savedState = localStorage.getItem(key); + return savedState ? JSON.parse(savedState) : true; } - return false; + return true; }); const togglePride = () => { setIsPride((prev) => { const newState = !prev; if (isBrowser) { - localStorage.setItem("isPride", JSON.stringify(newState)); + localStorage.setItem(key, JSON.stringify(newState)); } return newState; }); @@ -33,7 +35,7 @@ export const PrideProvider: React.FC> = ({ useEffect(() => { if (isBrowser) { - const savedState = localStorage.getItem("isPride"); + const savedState = localStorage.getItem(key); if (savedState) { setIsPride(JSON.parse(savedState)); } diff --git a/packages/spor-react/src/pride/TogglePride.tsx b/packages/spor-react/src/pride/TogglePride.tsx index 4eae41641..1e51b2db5 100644 --- a/packages/spor-react/src/pride/TogglePride.tsx +++ b/packages/spor-react/src/pride/TogglePride.tsx @@ -10,18 +10,14 @@ type TogglePrideProps = { export const TogglePride = ({ label }: TogglePrideProps) => { const { isPride, togglePride } = usePride(); - console.log(isPride); - return ( - + + {label} + togglePride()} + defaultChecked={isPride} + /> + ); };