@vygruppen/spor-react 9.10.1 → 9.11.1

package/src/pride/PrideProvider.tsx

@@ -0,0 +1,58 @@
+// PrideContext.tsx
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+interface PrideContextProps {
+  isPride: boolean;
+  togglePride: () => void;
+}
+
+const PrideContext = createContext<PrideContextProps | undefined>(undefined);
+
+export const PrideProvider: React.FC<React.PropsWithChildren<{}>> = ({
+  children,
+}) => {
+  const isBrowser = typeof window !== "undefined";
+
+  const key = "spor__isPride";
+
+  const [isPride, setIsPride] = useState<boolean>(() => {
+    if (isBrowser) {
+      const savedState = localStorage.getItem(key);
+      return savedState ? JSON.parse(savedState) : true;
+    }
+    return true;
+  });
+
+  const togglePride = () => {
+    setIsPride((prev) => {
+      const newState = !prev;
+      if (isBrowser) {
+        localStorage.setItem(key, JSON.stringify(newState));
+      }
+      return newState;
+    });
+  };
+
+  useEffect(() => {
+    if (isBrowser) {
+      const savedState = localStorage.getItem(key);
+      if (savedState) {
+        setIsPride(JSON.parse(savedState));
+      }
+    }
+  }, [isBrowser]);
+
+  return (
+    <PrideContext.Provider value={{ isPride, togglePride }}>
+      {children}
+    </PrideContext.Provider>
+  );
+};
+
+export const usePride = (): PrideContextProps => {
+  const context = useContext(PrideContext);
+  if (context === undefined) {
+    throw new Error("usePride must be used within a PrideProvider");
+  }
+  return context;
+};

package/src/pride/TogglePride.tsx

@@ -0,0 +1,23 @@
+// 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();
+
+  return (
+    <FormControl display="flex" alignItems="center" gap={3}>
+      <FormLabel margin="0">{label}</FormLabel>
+      <Switch
+        size="sm"
+        onChange={() => togglePride()}
+        defaultChecked={isPride}
+      />
+    </FormControl>
+  );
+};

package/src/pride/index.tsx

@@ -0,0 +1,2 @@
+export * from "./PrideProvider";
+export * from "./TogglePride";

package/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 (
     <LanguageProvider language={language}>
-      <ChakraProvider theme={extendedTheme} {...props}>
-        <Global styles={fontFaces} />
-        {children}
-      </ChakraProvider>
+      <PrideProvider>
+        <ChakraProvider theme={extendedTheme} {...props}>
+          <Global styles={fontFaces} />
+          {children}
+        </ChakraProvider>
+      </PrideProvider>
     </LanguageProvider>
   );
 };

package/src/provider/index.tsx

@@ -1 +1,2 @@
 export * from "./SporProvider";
+export * from "../pride/PrideProvider";

package/types.d.ts

@@ -0,0 +1,3 @@
+declare module "@vygruppen/spor-loader";
+declare module "@vygruppen/spor-design-tokens";
+declare module "@vygruppen/spor-icon-react";