Merge pull request #1172 from nsbno/update-react-loaders

🏳️‍🌈 Make it pride 🏳️‍🌈
nsbno · Jun 6, 2024 · 95da5ea · 95da5ea
2 parents d759f63 + bff21e5
commit 95da5ea
Show file tree

Hide file tree

Showing 18 changed files with 344 additions and 15 deletions.
diff --git a/.changeset/silent-cougars-breathe.md b/.changeset/silent-cougars-breathe.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": minor
+---
+
+Added support for Pride colors for VyDigital theme
diff --git 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 (
     <DarkMode>
       <CardSelect
@@ -52,6 +54,7 @@ export const SiteSettings = ({ showLabel }: SiteSettingsProps) => {
                 defaultChecked={colorMode === "dark"}
               />
             </FormControl>
+            <TogglePride label="Make it pride" />
           </Stack>
         </Flex>
       </CardSelect>

diff --git 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",

diff --git 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
@@ -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<BoxProps, "children">;
 /**
@@ -15,11 +17,18 @@ export const ColorInlineLoader = ({
   maxWidth,
   ...props
 }: ColorInlineLoaderProps) => {
+  const { isPride } = usePride();
   return (
     <Center {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={inlineLoaderColorData} />}
+          {() => (
+            <Lottie
+              animationData={
+                isPride ? inlineLoaderColorPrideData : inlineLoaderColorData
+              }
+            />
+          )}
         </ClientOnly>
       </Box>
     </Center>

diff --git 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 (
     <Center flexDirection="column" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={spinnerColorData} />}
+          {() => (
+            <Lottie
+              animationData={isPride ? spinnerColorPrideData : spinnerColorData}
+            />
+          )}
         </ClientOnly>
       </Box>
       {children && (

diff --git a/packages/spor-react/src/loader/ContentLoader.tsx b/packages/spor-react/src/loader/ContentLoader.tsx
@@ -1,20 +1,31 @@
 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;
 /**
  * ContentLoader is a component that renders a loading animation.
  * It should mostly be used for
  */
 export const ContentLoader = ({ children, ...props }: ContentLoaderProps) => {
+  const { isPride } = usePride();
   return (
     <Box {...props}>
       <Box maxWidth="140px" marginX="auto">
         <ClientOnly>
-          {() => <Lottie animationData={contentLoaderData} />}
+          {() => (
+            <Lottie
+              animationData={
+                isPride ? contentLoaderPrideData : contentLoaderData
+              }
+            />
+          )}
         </ClientOnly>
       </Box>
       {children && (

diff --git 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<BoxProps, "children">;
 /**
@@ -13,11 +17,18 @@ export const DarkInlineLoader = ({
   maxWidth,
   ...props
 }: DarkInlineLoaderProps) => {
+  const { isPride } = usePride();
   return (
     <Center {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={inlineLoaderDarkData} />}
+          {() => (
+            <Lottie
+              animationData={
+                isPride ? inlineLoaderColorPrideData : inlineLoaderDarkData
+              }
+            />
+          )}
         </ClientOnly>
       </Box>
     </Center>

diff --git 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 (
     <Center height="100%" background="white" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={fullScreenLoaderBlackData} />}
+          {() => (
+            <Lottie
+              animationData={
+                isPride ? vyLogoPrideData : fullScreenLoaderBlackData
+              }
+            />
+          )}
         </ClientOnly>
       </Box>
     </Center>

diff --git 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<BoxProps, "children">;
 /**
@@ -13,11 +17,18 @@ export const LightInlineLoader = ({
   maxWidth,
   ...props
 }: LightInlineLoaderProps) => {
+  const { isPride } = usePride();
   return (
     <Center {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={inlineLoaderLightData} />}
+          {() => (
+            <Lottie
+              animationData={
+                isPride ? inlineLoaderColorPrideData : inlineLoaderLightData
+              }
+            />
+          )}
         </ClientOnly>
       </Box>
     </Center>

diff --git 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 <VyLogoPride colorScheme={colorScheme} {...boxProps} />;
+  }
   // These colors should not be tokenized, as they are logo specific.
   const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
   const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";