@progressiveui/react 2.0.2 → 2.0.4

package/src/components/WFPCoreSettings/WFPCoreProvider.tsx

@@ -1,125 +0,0 @@
-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

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

package/src/components/WFPCoreSettings/index.ts

@@ -1,4 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,94 +0,0 @@
-// 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

@@ -1,86 +0,0 @@
-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

@@ -1,11 +0,0 @@
-// 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

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