@progressiveui/react 2.0.2 → 2.0.4

package/src/components/Footer/Footer.stories.tsx

@@ -1,331 +0,0 @@
-import React from "react";
-
-import markdown from "./README.mdx";
-
-import { Footer } from "../Footer";
-
-import { FooterExternal, FooterMetaLink, LinksColumn } from "./FooterExternal";
-
-import Link from "../Link";
-
-export default {
-  title: "Components/UI Elements/Footer",
-  component: Footer,
-  subcomponents: { FooterExternal, FooterMetaLink, LinksColumn },
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-    mdx: markdown,
-    previewWidth: "full",
-  },
-};
-
-export const FooterDefault: Story = {
-  render: (args) => (
-    <Footer
-      {...args}
-      secondary={
-        <>
-          Via C. G. Viola 68 Parco dei Medici, <br /> 00148 Rome, Italy
-        </>
-      }
-    >
-      <div className="wfp--footer__info">
-        <div className="wfp--footer__info__item">
-          <p className="wfp--footer__label">Label 1</p>
-        </div>
-        <div className="wfp--footer__info__item">
-          <p className="wfp--footer__label">Label 2</p>
-        </div>
-      </div>
-    </Footer>
-  ),
-  args: {
-    external: false,
-    metaContent: "2023 © World Food Programme",
-  },
-};
-
-const regularsourcecode = `
-import { Footer } from "@progressiveui/react";
-        
-<Footer 
-metaContent="2023 © World Food Programme"
-secondary={
-  <>
-    Via C. G. Viola 68 Parco dei Medici, <br /> 00148 Rome, Italy
-  </>
-}>
-  <div className="wfp--footer__info">
-    <div className="wfp--footer__info__item">
-      <p className="wfp--footer__label">Label 1</p>
-    </div>
-    <div className="wfp--footer__info__item">
-      <p className="wfp--footer__label">Label 2</p>
-    </div>
-  </div>
-</Footer>
-`;
-
-FooterDefault.story = {
-  parameters: {
-    docs: {
-      source: {
-        code: regularsourcecode,
-      },
-    },
-  },
-};
-
-// export const External = (args) => (
-//   <FooterExternal
-//     {...args}
-//     metaLinks={
-//       <>
-//         <FooterMetaLink href="hh.com">First legal link</FooterMetaLink>
-//         <FooterMetaLink href="hh.com">Second legal link</FooterMetaLink>
-//       </>
-//     }
-//   >
-//     <>
-//       <LinksColumn title="Title">
-//         <li className={`wfp--links-column-link`}>
-//           <Link>First link</Link>
-//         </li>
-//         <li className={`wfp--links-column-link`}>
-//           <Link>Second link</Link>
-//         </li>
-//         <li className={`wfp--links-column-link`}>
-//           <Link>Third link</Link>
-//         </li>
-//         <li className={`wfp--links-column-link`}>
-//           <Link>Fourth link</Link>
-//         </li>
-//         <li className={`wfp--links-column-link`}>
-//           <Link>Fifth link</Link>
-//         </li>
-//       </LinksColumn>
-
-//       <LinksColumn title="Title 2">
-//         <li className={`wfp--links-column-link`}>
-//           <Link>First link 2</Link>
-//         </li>
-//         <li className={`wfp--links-column-link`}>
-//           <Link>Second link 2</Link>
-//         </li>
-//         <li className={`wfp--links-column-link`}>
-//           <Link>Third link 2</Link>
-//         </li>
-//         <li className={`wfp--links-column-link`}>
-//           <Link>Fourth link 2</Link>
-//         </li>
-//         <li className={`wfp--links-column-link`}>
-//           <Link>Fifth link 2</Link>
-//         </li>
-//       </LinksColumn>
-//     </>
-//   </FooterExternal>
-// );
-
-// External.args = {
-//   productName: (
-//     <span>
-//       Service <br /> Marketplace
-//     </span>
-//   ),
-//   metaContent: "Via C. G. Viola 68 Parco dei Medici, 00148 Rome, Italy",
-// };
-
-// const externalsourcecode = `
-// import { FooterExternal, Link  } from "@progressiveui/react";
-
-// <FooterExternal
-//     metaContent="Via C. G. Viola 68 Parco dei Medici, 00148 Rome, Italy"
-//     metaLinks={
-//       <>
-//         <FooterMetaLink href="hh.com">First legal link</FooterMetaLink>
-//         <FooterMetaLink href="hh.com">Second legal link</FooterMetaLink>
-//       </>
-//     }
-//     productName={<span>Service{' '}<br />{' '}Marketplace</span>
-//     >
-//     <>
-//       <LinksColumn title="Title">
-//         <li className="wfp--links-column-link">
-//           <Link>First link</Link>
-//         </li>
-//         <li className="wfp--links-column-link">
-//           <Link>Second link</Link>
-//         </li>
-//         <li className="wfp--links-column-link">
-//           <Link>Third link</Link>
-//         </li>
-//         <li className="wfp--links-column-link">
-//           <Link>Fourth link</Link>
-//         </li>
-//         <li className="wfp--links-column-link">
-//           <Link>Fifth link</Link>
-//         </li>
-//       </LinksColumn>
-
-//       <LinksColumn title="Title 2">
-//         <li className="wfp--links-column-link">
-//           <Link>First link 2</Link>
-//         </li>
-//         <li className="wfp--links-column-link">
-//           <Link>Second link 2</Link>
-//         </li>
-//         <li className="wfp--links-column-link">
-//           <Link>Third link 2</Link>
-//         </li>
-//         <li className="wfp--links-column-link">
-//           <Link>Fourth link 2</Link>
-//         </li>
-//         <li className="wfp--links-column-link">
-//           <Link>Fifth link 2</Link>
-//         </li>
-//       </LinksColumn>
-//     </>
-//   </FooterExternal>
-// `;
-
-// External.story = {
-//   parameters: {
-//     docs: {
-//       storyDescription:
-//         "External Footer is used for external applications facing the public audience. It should contain WFP logo, HQ address and metadata like copyright.",
-//       source: {
-//         code: externalsourcecode,
-//       },
-//     },
-//   },
-// };
-
-export const Internal = (args) => (
-  <Footer
-    {...args}
-    metaContent="2023 © World Food Programme"
-    secondary={
-      <>
-        Via C. G. Viola 68 Parco dei Medici, <br /> 00148 Rome, Italy
-      </>
-    }
-  >
-    <div className="wfp--footer__info">
-      <div className="wfp--footer__info__item">
-        <p className="wfp--footer__label">A label</p>
-        <ul className="wfp--footer__list">
-          <li>
-            <Link href="http://www.wfp.org">First Link</Link>
-          </li>
-          <li>
-            <Link href="http://www.wfp.org">Second Link</Link>
-          </li>
-        </ul>
-      </div>
-      <div className="wfp--footer__info__item">
-        <p className="wfp--footer__label">Another label</p>
-        <ul className="wfp--footer__list">
-          <li>
-            <Link href="http://www.wfp.org">First Link</Link>
-          </li>
-          <li>
-            <Link href="http://www.wfp.org">Second Link</Link>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </Footer>
-);
-
-const intersourcecode = `
-import { Footer, Link } from "@progressiveui/react";
-
-<Footer
-    metaContent="2023 © World Food Programme"
-    secondary={
-      <>
-        Via C. G. Viola 68 Parco dei Medici, <br /> 00148 Rome, Italy
-      </>
-    }
-  >
-  <div className="wfp--footer__info">
-    <div className="wfp--footer__info__item">
-      <p className="wfp--footer__label">A label</p>
-      <ul className="wfp--footer__list">
-        <li>
-          <Link href="http://www.wfp.org">First Link</Link>
-        </li>
-        <li>
-          <Link href="http://www.wfp.org">Second Link</Link>
-        </li>
-      </ul>
-    </div>
-    <div className="wfp--footer__info__item">
-      <p className="wfp--footer__label">Another label</p>
-      <ul className="wfp--footer__list">
-        <li>
-          <Link href="http://www.wfp.org">First Link</Link>
-        </li>
-        <li>
-          <Link href="http://www.wfp.org">Second Link</Link>
-        </li>
-      </ul>
-    </div>
-  </div>
-</Footer>
-`;
-
-Internal.story = {
-  parameters: {
-    docs: {
-      storyDescription:
-        "Internal Footer is used in applications that are for internal purposes and not available for external users. In the left section you can add links",
-      source: {
-        code: intersourcecode,
-      },
-    },
-  },
-};
-
-export const OverrideLogos = (args) => (
-  <Footer
-    {...args}
-    logo={<div>Logo</div>}
-    logoExtended={<div>LogoExtended</div>}
-  >
-    <div className="wfp--footer__info">
-      <div className="wfp--footer__info__item">
-        <p className="wfp--footer__label">A label</p>
-        <ul className="wfp--footer__list">
-          <li>
-            <Link href="http://www.wfp.org">First Link</Link>
-          </li>
-          <li>
-            <Link href="http://www.wfp.org">Second Link</Link>
-          </li>
-        </ul>
-      </div>
-      <div className="wfp--footer__info__item">
-        <p className="wfp--footer__label">Another label</p>
-        <ul className="wfp--footer__list">
-          <li>
-            <Link href="http://www.wfp.org">First Link</Link>
-          </li>
-          <li>
-            <Link href="http://www.wfp.org">Second Link</Link>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </Footer>
-);
-
-OverrideLogos.story = {
-  parameters: {
-    docs: {
-      storyDescription:
-        "The logos for `logo`, `logoExtended`  can be replaced by a custom react component.",
-    },
-  },
-};

package/src/components/Footer/Footer.test.tsx

@@ -1,64 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import Footer from "./Footer";
-
-// Mocking the useSettings hook
-jest.mock("../../hooks/useSettings", () => ({
-  __esModule: true,
-  default: jest.fn(() => ({ prefix: "mocked-prefix" })),
-}));
-
-describe("Footer component", () => {
-  it("renders with default props", () => {
-    render(<Footer />);
-    expect(screen.getByRole("contentinfo")).toBeInTheDocument();
-    // Use a more semantic query like getByRole("contentinfo")
-    // You can adjust this based on the actual role or landmark role of your footer
-    // Add more assertions as needed
-  });
-
-  it("renders with custom labels and links", () => {
-    render(
-      <Footer
-        labelOne="Label One"
-        linkTextOne="Link One"
-        linkHrefOne="/link-one"
-        labelTwo="Label Two"
-        linkTextTwo="Link Two"
-        linkHrefTwo="/link-two"
-      />
-    );
-    expect(screen.getByText("Label One")).toBeInTheDocument();
-    expect(screen.getByText("Link One")).toHaveAttribute("href", "/link-one");
-    expect(screen.getByText("Label Two")).toBeInTheDocument();
-    expect(screen.getByText("Link Two")).toHaveAttribute("href", "/link-two");
-  });
-
-  it("renders with custom logos", () => {
-    render(
-      <Footer
-        logo="path-to-logo.png"
-        logoExtended="path-to-extended-logo.png"
-      />
-    );
-    expect(
-      screen.getByAltText("World Food Programme Logo")
-    ).toBeInTheDocument();
-    expect(screen.getByAltText("WFP Logo")).toBeInTheDocument();
-  });
-
-  it("renders with meta content and links", () => {
-    render(
-      <Footer
-        metaContent={<span>Copyright 2023</span>}
-        metaLinks={<a href="/privacy">Privacy Policy</a>}
-      />
-    );
-    expect(screen.getByText("Copyright 2023")).toBeInTheDocument();
-    expect(screen.getByText("Privacy Policy")).toHaveAttribute(
-      "href",
-      "/privacy"
-    );
-    // Add more assertions as needed
-  });
-});

package/src/components/Footer/Footer.tsx

@@ -1,116 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-import Link from "../Link";
-import Wrapper from "../Wrapper";
-import { ScreenSize } from "../../utils";
-import useSettings from "../../hooks/useSettings";
-
-/** A Footer is a section at the bottom of each page. It typically contains basic site information, copyright data or links to related pages. */
-interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   The content of the footer containing relevant links
- */
-  children?: React.ReactNode;
-  /**
-   Additional className which will be added
- */
-  className?: string;
-  /** 
-   Meta content, usually the copyright notice
- */
-  metaContent?: React.ReactNode;
-  metaLinks?: React.ReactNode;
-  /**
-   Optional WFP logo for mobile devices, can be used if the Logo should be provided by the CDN
- */
-  logo?: string | React.ReactNode;
-  /**
-   * Specify the max-width on desktop devices (same as \`Wrapper\` component)
-   */
-  pageWidth?: ScreenSize;
-
-  /**
-   The WFP logo, can be used if the SDG logo should be provided in a different way
- */
-  subTitle?: string | React.ReactNode;
-  secondary?: React.ReactNode;
-  labelOne?: string;
-  labelTwo?: string;
-  linkTextOne?: string;
-  linkHrefOne?: string;
-  linkTextTwo?: string;
-  linkHrefTwo?: string;
-}
-
-const Footer: React.FC<FooterProps> = ({
-  className,
-  children,
-  labelOne,
-  linkTextOne,
-  linkHrefOne,
-  labelTwo,
-  linkTextTwo,
-  linkHrefTwo,
-  logo,
-  metaContent,
-  metaLinks,
-  secondary,
-  pageWidth = "lg",
-}) => {
-  const { prefix } = useSettings();
-
-  const classes = classNames(`${prefix}--footer`, className);
-
-  return (
-    <footer className={classes}>
-      <Wrapper pageWidth={pageWidth}>
-        <div className={`${prefix}--footer__content`}>
-          {/* <div className="wfp--footer__info-content"> */}
-          {children ? (
-            <div className={`${prefix}--footer__info`}>{children}</div>
-          ) : (
-            <div className={`${prefix}--footer__info`}>
-              <div className={`${prefix}--footer__info__item`}>
-                <p className={`${prefix}--footer__label`}>{labelOne}</p>
-                <ul className={`${prefix}--footer__list`}>
-                  <li>
-                    <Link href={linkHrefOne}>{linkTextOne}</Link>
-                  </li>
-                </ul>
-              </div>
-              <div className={`${prefix}--footer__info__item`}>
-                <p className={`${prefix}--footer__label`}>{labelTwo}</p>
-                <ul className={`${prefix}--footer__list`}>
-                  <li>
-                    <Link href={linkHrefTwo}>{linkTextTwo}</Link>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          )}
-          <div className={`${prefix}--footer__cta`}>
-            {logo}
-            {secondary && (
-              <div className={`${prefix}--footer__secondary`}>{secondary}</div>
-            )}
-          </div>
-        </div>
-      </Wrapper>
-
-      <Wrapper className={`${prefix}--footer__meta`} pageWidth={pageWidth}>
-        {metaLinks && (
-          <div className={`${prefix}--footer__meta__links`}>{metaLinks}</div>
-        )}
-        {metaContent && (
-          <div className={`${prefix}--footer__meta__content`}>
-            {metaContent}
-          </div>
-        )}
-      </Wrapper>
-    </footer>
-  );
-};
-
-Footer.displayName = "Footer";
-
-export default Footer;

package/src/components/Footer/FooterExternal.tsx

@@ -1,167 +0,0 @@
-import * as React from "react";
-import Wrapper from "../Wrapper";
-import type { PropsWithChildren } from "react";
-import classNames from "classnames";
-import {
-  LinkedIn,
-  Facebook,
-  YouTube,
-  TikTok,
-  Twitter,
-  Instagram,
-} from "@progressiveui/icons-react";
-import { ScreenSize } from "../../utils";
-
-import useSettings from "../../hooks/useSettings";
-
-type FooterExternalProps = PropsWithChildren<{
-  className?: string;
-  productName?: React.ReactNode;
-  metaContent?: React.ReactNode;
-  metaLinks?: React.ReactNode;
-  pageWidth?: ScreenSize;
-}>;
-
-const FooterExternal: React.FC<FooterExternalProps> = ({
-  className,
-  productName,
-  children,
-  metaContent,
-  pageWidth = "lg",
-  metaLinks,
-}) => {
-  const { prefix } = useSettings();
-
-  const externalClasses = classNames(`${prefix}--footer-ext`, className);
-  return (
-    <footer className={externalClasses}>
-      <Wrapper pageWidth={pageWidth}>
-        <div className={`${prefix}--footer-ext__content`}>
-          <div className={`${prefix}--footer-ext__info`}>
-            <div className={`${prefix}--footer-ext__branding`}>
-              <div className={`${prefix}--footer-ext__product-name`}>
-                {productName}
-              </div>
-            </div>
-            <div className={`${prefix}--footer-ext__address`}>
-              {metaContent}
-            </div>
-            <div className={`${prefix}--footer-ext__social-wrapper`}>
-              <p>Follow WFP on:</p>
-              <ul className={`${prefix}--footer-ext__social-icons-list`}>
-                <li className={`${prefix}--footer-ext__social-icon`}>
-                  <a
-                    href="https://twitter.com/WFP"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    <Twitter />
-                  </a>
-                </li>
-                <li className={`${prefix}--footer-ext__social-icon`}>
-                  <a
-                    href="https://www.facebook.com/WorldFoodProgramme"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    <Facebook />
-                  </a>
-                </li>
-                <li className={`${prefix}--footer-ext__social-icon`}>
-                  <a
-                    href="https://www.instagram.com/Worldfoodprogramme/"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    <Instagram />
-                  </a>
-                </li>
-                <li className={`${prefix}--footer-ext__social-icon`}>
-                  <a
-                    href="https://www.linkedin.com/company/world-food-programme"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    <LinkedIn />
-                  </a>
-                </li>
-                <li className={`${prefix}--footer-ext__social-icon`}>
-                  <a
-                    href="https://www.youtube.com/user/WORLDFOODPROGRAM"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    <YouTube />
-                  </a>
-                </li>
-                <li className={`${prefix}--footer-ext__social-icon`}>
-                  <a
-                    href="https://www.tiktok.com/@worldfoodprogramme"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    <TikTok />
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className={`${prefix}--footer-ext__nav-wrapper`}>{children}</div>
-        </div>
-        <div className={`${prefix}--footer-ext__legal`}>
-          <span>{new Date().getFullYear()} © World Food Programme</span>
-          <nav className={`${prefix}--footer-ext__nav-legal`}>
-            <ul className={`${prefix}--footer-ext__legal-links`}>
-              {metaLinks}
-            </ul>
-          </nav>
-        </div>
-      </Wrapper>
-    </footer>
-  );
-};
-
-type LinksColumnProps = PropsWithChildren<{
-  className?: string;
-  title?: string;
-}>;
-
-const LinksColumn: React.FC<LinksColumnProps> = ({ title, children }) => {
-  const { prefix } = useSettings();
-
-  return (
-    <div className={`${prefix}--links-column`}>
-      {title && <p className={`${prefix}--links-column__title`}> {title} </p>}
-
-      <nav>
-        <ul className={`${prefix}--links-column__nav-list`}>{children}</ul>
-      </nav>
-    </div>
-  );
-};
-
-export interface FooterMetaLinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  className?: string;
-  href?: string;
-}
-
-const FooterMetaLink: React.FC<FooterMetaLinkProps> = ({
-  className,
-  href,
-  children,
-}) => {
-  const { prefix } = useSettings();
-
-  const wrapperClasses = classNames(
-    `${prefix}--footer-ext__legal-link`,
-    className
-  );
-  return (
-    <li className={wrapperClasses}>
-      <a href={href}>{children}</a>
-    </li>
-  );
-};
-
-export { FooterExternal, LinksColumn, FooterMetaLink };

package/src/components/Footer/README.mdx

@@ -1,20 +0,0 @@
-## Usage
-
-Footer is the second most important place where your basic site information and links should live. Users turn often to the footer to look for important information, such as contact details, or links to less prominent sections of the website (privacy policy, terms of use, etc).
-It can contain `<Form>` , `<Button>`, `<Link>` and `images`.
-
-#### When to use
-
-Use when you want to share information like contacts details, privacy policy, terms of use, copyright.
-
-#### When not to use
-
-The `Footer` component is not sectioning content and therefore shouldn't be used introduce a new section in the outline.
-
-## Related
-
-[Link](?path=/docs/components-link--regular)
-
-[Form](?path=/docs/components-form--regular)
-
-[Button](?path=/docs/components-button--regular)