@progressiveui/react 1.22.0

package/src/components/WFPCoreSettings/WFPCoreProvider.tsx

@@ -0,0 +1,125 @@
+import React, {
+  useState,
+  createContext,
+  PropsWithChildren,
+  useEffect,
+} from "react";
+//import propTypes from 'prop-types';
+import { defaultWFPContext } from "./defaults";
+
+export interface AppContextInterface {
+  prefix: string;
+  selectorTabbable: string;
+  selectorFocusable: string;
+  theme: string;
+  actualTheme: string;
+  initialized: boolean;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  setTheme: (theme: string) => void;
+  wrapperElement?: HTMLElement;
+}
+
+export const WFPCoreContext =
+  createContext<AppContextInterface>(defaultWFPContext);
+
+/** The WFP Core props are basic properties for the provider */
+type WFPCoreProps = PropsWithChildren<{
+  children?: React.ReactNode;
+  initialTheme?: string;
+  prefix?: string;
+  wrapperElement?: HTMLElement;
+}>;
+
+// Detecting the default theme
+const isBrowserDefaultDark = () =>
+  typeof window !== "undefined"
+    ? window.matchMedia("(prefers-color-scheme: dark)").matches
+    : false;
+
+export const WFPCoreProvider: React.FC<WFPCoreProps> = ({
+  children,
+  wrapperElement /* = document?.body*/,
+  prefix = "wfp",
+  initialTheme = "light",
+  ...props
+}) => {
+  const setElementTheme = (theme: string) => {
+    const prefixClass = `${prefix}--theme--`;
+
+    if (theme === "auto") {
+      isBrowserDefaultDark() ? "dark" : "light";
+    }
+
+    const newTheme =
+      theme === "auto" && isBrowserDefaultDark()
+        ? "dark"
+        : theme === "auto"
+        ? "light"
+        : theme;
+
+    if (wrapperElement) {
+      const classes = wrapperElement.className
+        .split(" ")
+        .filter((c) => !c.startsWith(prefixClass));
+
+      wrapperElement.className = classes.join(" ").trim();
+      wrapperElement.classList.add(`${prefix}--theme--${newTheme}`);
+    }
+    return newTheme;
+  };
+
+  const getActualTheme = () => {
+    const defaultTheme = getDefaultTheme();
+    if (defaultTheme === "auto")
+      return isBrowserDefaultDark() ? "dark" : "light";
+
+    return defaultTheme;
+  };
+
+  const getDefaultTheme = (): string => {
+    const localStorageTheme =
+      typeof window !== "undefined"
+        ? window.localStorage.getItem("theme")
+        : false;
+    const defaultTheme = localStorageTheme || initialTheme;
+    setElementTheme(defaultTheme);
+    return defaultTheme;
+  };
+
+  const [themeState, setThemeState] = useState(getDefaultTheme());
+  const [actualThemeState, setActualThemeState] = useState(getActualTheme());
+
+  useEffect(() => {
+    const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
+    darkThemeMq.addListener(mqListener);
+    return () => darkThemeMq.removeListener(mqListener);
+  }, []);
+
+  const mqListener = () => {
+    if (themeState === "auto") {
+      const newTheme = setElementTheme("auto");
+      setActualThemeState(newTheme);
+    }
+  };
+
+  const setTheme = (theme: string) => {
+    const newTheme = setElementTheme(theme);
+    setActualThemeState(newTheme);
+    if (typeof window !== "undefined")
+      window.localStorage.setItem("theme", theme);
+    setThemeState(theme);
+  };
+
+  const ctx = {
+    ...defaultWFPContext,
+    ...props,
+    prefix,
+    theme: themeState,
+    actualTheme: actualThemeState,
+    initialized: true,
+    setTheme,
+  };
+  return (
+    <WFPCoreContext.Provider value={ctx}>{children}</WFPCoreContext.Provider>
+  );
+};

package/src/components/WFPCoreSettings/defaults.ts

@@ -0,0 +1,3 @@
+import defaultWFPContext from "../../globals/js/settings";
+
+export { defaultWFPContext };

package/src/components/WFPCoreSettings/index.ts

@@ -0,0 +1,4 @@
+export { defaultWFPContext } from "./defaults";
+export { WFPCoreContext, WFPCoreProvider } from "./WFPCoreProvider";
+export { withWFPCoreSettings } from "./withWFPCoreSettings";
+export { default as useTheme } from "./useTheme";

package/src/components/WFPCoreSettings/useTheme.tsx

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { AppContextInterface, WFPCoreContext } from "./WFPCoreProvider";
+
+export default function useTheme(): AppContextInterface {
+  const settings = useContext(WFPCoreContext);
+  return settings;
+}

package/src/components/WFPCoreSettings/withWFPCoreSettings.tsx

@@ -0,0 +1,12 @@
+import useSettings from "../../hooks/useSettings";
+import * as React from "react";
+// Passes settings down to children, primarily useful for class components
+// that can't consume the useSettings hook. Props passed to the underlying
+// component can be used to override settings values
+export const withWFPCoreSettings =
+  (WrappedComponent: React.ElementType) => (props?: object) => {
+    const settings = useSettings();
+    const allProps = { ...settings, ...props };
+
+    return <WrappedComponent {...allProps} />;
+  };

package/src/components/Wrapper/README.mdx

@@ -0,0 +1,11 @@
+Wrapper can wrap it's content in a specific width depending on if the application has a full or fixed width.
+
+```js
+import { Wrapper } from "@progressiveui/react";
+```
+
+```js
+<Wrapper pageWidth="xs" mobilePageWidth="full">
+  Content
+</Wrapper>
+```

package/src/components/Wrapper/Wrapper-test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import Wrapper from '../Wrapper';
+import { shallow } from 'enzyme';
+
+describe('ReadMore', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(
+      <Wrapper className="some-class">Content</Wrapper>
+    );
+    it('should all for custom classes to be applied', () => {
+      expect(wrapper.hasClass('wfp--wrapper')).toEqual(true);
+    });
+  });
+
+  describe('wrapper with background prop', () => {
+    
+    it('prop lighter should have class as expected', () => {
+        const lightWrapper = shallow(
+            <Wrapper background="lighter">Content</Wrapper>
+          );
+        expect(lightWrapper.hasClass('wfp--wrapper--background-lighter')).toEqual(true);
+    });
+
+    it('prop dark should have class as expected', () => {
+        const darkWrapper = shallow(
+            <Wrapper background="dark">Content</Wrapper>
+          );
+        expect(darkWrapper.hasClass('wfp--wrapper--background-dark')).toEqual(true);
+    });
+  });
+
+  describe('wrapper with pageWidth prop', () => {
+    
+    it('should have class as expected', () => {
+        const pageWrapper = shallow(
+            <Wrapper pageWidth="lg">Content</Wrapper>
+          );
+        expect(pageWrapper.hasClass('wfp--wrapper--width-lg')).toEqual(true);
+    });
+  });
+
+  describe('wrapper with mobilePageWidth prop', () => {
+    
+    it('should have class as expected', () => {
+        const mobileWrapper = shallow(
+            <Wrapper mobilePageWidth="full">Content</Wrapper>
+          );
+        expect(mobileWrapper.hasClass('wfp--wrapper--width-mobile-full')).toEqual(true);
+    });
+  });
+});

package/src/components/Wrapper/Wrapper.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Wrapper from ".";
+
+export default {
+  title: "Components/Content Related/Wrapper",
+  component: Wrapper,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+  },
+};
+
+export const WrapperDefault = (args) => (
+  <Wrapper {...args}>
+    Assisting 91.4 million people in around 83 countries each year, the World
+    Food Programme (WFP) is the leading humanitarian organization saving lives
+    and changing lives, delivering food assistance in emergencies and working
+    with communities to improve nutrition and build resilience. As the
+    international community has committed to end hunger, achieve food security
+    and improved nutrition by 2030, one in nine people worldwide still do not
+    have enough to eat. Food and food-related assistance lie at the heart of the
+    struggle to break the cycle of hunger and poverty. On any given day, WFP has
+    5,000 trucks, 20 ships and 92 planes on the move, delivering food and other
+    assistance to those in most need.
+  </Wrapper>
+);

package/src/components/Wrapper/Wrapper.test.tsx

@@ -0,0 +1,94 @@
+// import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import Wrapper from "./Wrapper";
+
+describe("Wrapper Component", () => {
+  // Test basic rendering
+  it("renders the Wrapper with content", () => {
+    render(<Wrapper>Content</Wrapper>);
+    expect(screen.getByText("Content")).toBeInTheDocument();
+  });
+
+  // Test different page widths
+  it.each(["xs", "sm", "md", "lg", "full", "narrow", "narrower", "narrowest"])(
+    "renders with specified page width '%s'",
+    (pageWidth: any) => {
+      render(<Wrapper pageWidth={pageWidth}>Content</Wrapper>);
+
+      expect(screen.getByText("Content")).toHaveClass(
+        `wfp--wrapper--width-${pageWidth}`
+      );
+    }
+  );
+
+  // Test mobile page width
+  it.each(["sm", "md", "lg", "full"])(
+    "renders with specified mobile page width '%s'",
+    (mobilePageWidth: any) => {
+      render(<Wrapper mobilePageWidth={mobilePageWidth}>Content</Wrapper>);
+      if (mobilePageWidth === "full") {
+        expect(screen.getByText("Content")).toHaveClass(
+          `wfp--wrapper--width-mobile-full`
+        );
+      }
+    }
+  );
+
+  // Test spacing
+  it.each(["md", "xl"])(
+    "renders with specified spacing '%s'",
+    (spacing: any) => {
+      render(<Wrapper spacing={spacing}>Content</Wrapper>);
+      expect(screen.getByText("Content")).toHaveClass(
+        `wfp--wrapper--spacing-${spacing}`
+      );
+    }
+  );
+
+  // Test background themes
+  it.each(["lighter", "dark"])(
+    "renders with specified background theme '%s'",
+    (background: any) => {
+      render(<Wrapper background={background}>Content</Wrapper>);
+      expect(screen.getByText("Content")?.parentNode).toHaveClass(
+        `wfp--wrapper--background-${background}`
+      );
+    }
+  );
+
+  // Test custom class name
+  it("applies custom class names", () => {
+    const customClass = "my-custom-class";
+    render(<Wrapper className={customClass}>Content</Wrapper>);
+    expect(screen.getByText("Content")).toHaveClass(customClass);
+  });
+
+  // Test custom background class name
+  it("applies custom background class names", () => {
+    const backgroundClass = "my-background-class";
+    render(
+      <Wrapper background="dark" backgroundClassName={backgroundClass}>
+        Content
+      </Wrapper>
+    );
+    expect(screen.getByText("Content")?.parentNode).toHaveClass(
+      backgroundClass
+    );
+  });
+
+  // Test custom background styles
+  it("applies custom background styles", () => {
+    const backgroundStyle = { backgroundColor: "red" };
+    render(<Wrapper backgroundStyle={backgroundStyle}>Content</Wrapper>);
+    expect(screen.getByText("Content")?.parentNode).toHaveStyle(
+      backgroundStyle
+    );
+  });
+
+  // Snapshot test
+  it("matches snapshot", () => {
+    const { asFragment } = render(<Wrapper>Snapshot Wrapper</Wrapper>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/Wrapper/Wrapper.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import { ScreenSize } from "../../utils";
+
+export const pageWidths = ["sm", "md", "lg", "full"];
+
+/** Wrapper can wrap it's content in a specific width depending on if the application has a full or fixed width. */
+export interface WrapperProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Defines the width of the wrapper. Can be one of 'xs', 'sm', 'md', 'lg', 'full', 'narrow', 'narrower', or 'narrowest'. */
+  pageWidth?:
+    | "xs"
+    | "sm"
+    | "md"
+    | "lg"
+    | "full"
+    | "narrow"
+    | "narrower"
+    | "narrowest";
+
+  /** Specifies the page width for mobile devices. It uses the ScreenSize type. */
+  mobilePageWidth?: ScreenSize;
+
+  /** Determines the spacing around the wrapper. Can be 'md' for medium or 'xl' for extra large. */
+  spacing?: "md" | "xl";
+
+  /** Sets the background theme. Can be 'lighter' for a light background or 'dark' for a dark background. */
+  background?: "lighter" | "dark";
+
+  /** Additional CSS class names to be applied to the wrapper. */
+  className?: string;
+
+  /** CSS class names specifically for the background of the wrapper. */
+  backgroundClassName?: string;
+
+  /** Custom CSS properties for the background styling. */
+  backgroundStyle?: React.CSSProperties;
+}
+
+const Wrapper: React.FC<WrapperProps> = (props) => {
+  const { prefix } = useSettings();
+
+  const {
+    background,
+    backgroundClassName,
+    backgroundStyle,
+    children,
+    className,
+    pageWidth,
+    mobilePageWidth,
+    spacing,
+    ...other
+  } = props;
+  const wrapperClasses = classNames({
+    [`${prefix}--wrapper`]: true,
+    [`${prefix}--wrapper--width-lg`]: pageWidth === "narrow",
+    [`${prefix}--wrapper--width-md`]: pageWidth === "narrower",
+    [`${prefix}--wrapper--width-sm`]: pageWidth === "narrowest",
+    [`${prefix}--wrapper--width-xs`]: pageWidth === "narrowest",
+    [`${prefix}--wrapper--width-${pageWidth}`]: pageWidth,
+    [`${prefix}--wrapper--width-mobile-full`]: mobilePageWidth === "full",
+    [`${prefix}--wrapper--spacing-md`]: spacing === "md",
+    [`${prefix}--wrapper--spacing-xl`]: spacing === "xl",
+    [`${className}`]: className,
+  });
+  if (background || backgroundStyle || backgroundClassName) {
+    const backgroundClasses = classNames(backgroundClassName, {
+      [`${prefix}--wrapper--background-${background}`]: background,
+    });
+
+    return (
+      <div className={backgroundClasses} style={backgroundStyle}>
+        <div className={wrapperClasses} {...other}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className={wrapperClasses} {...other}>
+      {children}
+    </div>
+  );
+};
+
+export default Wrapper;

package/src/components/Wrapper/__snapshots__/Wrapper.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Wrapper Component matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="wfp--wrapper"
+  >
+    Snapshot Wrapper
+  </div>
+</DocumentFragment>
+`;

package/src/components/Wrapper/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Wrapper';
+export { pageWidths } from './Wrapper';