@progressiveui/react 1.22.0

package/src/components/Empty/Empty.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import markdown from "./README.mdx";
+import Empty from "./Empty";
+import Button from "../Button";
+//import { IllustrationsMovingVanWithBackground } from '@progressiveui/pictograms-react';
+
+export default {
+  title: "Components/UI Elements/Empty",
+  component: Empty,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "experimental",
+    mdx: markdown,
+  },
+};
+
+export const EmptyDefault = (args) => (
+  <Empty
+    icon={<img alt="Moving van" src="../illustrations/moving-van.svg" />}
+    {...args}
+  />
+);
+
+EmptyDefault.args = {
+  title: "No entries found",
+  children: `You haven't yet created an entry`,
+  kind: "large",
+};
+
+//   button: <Button kind="accent">New entry</Button>,
+// icon: <IllustrationsMovingVanWithBackground alt="Moving van" width="25rem" />,
+
+const emptysourcecode = `
+import { Empty, Button  } from "@progressiveui/react";
+import { IllustrationsMovingVanWithBackground } from '@progressiveui/pictograms-react';
+
+<Empty
+  button={<Button kind="accent">New entry</Button>}
+  icon={<img alt="Moving van" src="../illustrations/moving-van.svg"/>}
+  kind="large"
+  title="No entries found"
+>
+  You haven't yet created an entry
+</Empty>
+`;
+EmptyDefault.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: emptysourcecode,
+      },
+    },
+  },
+};

package/src/components/Empty/Empty.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+// import { IIcon } from '../../utils';
+
+interface EmptyProps extends Omit<React.ComponentPropsWithRef<"div">, "title"> {
+  /**
+   * The content to be rendered in the empty state. @design
+   */
+  children?: React.ReactNode;
+  /**
+   * The title to be rendered in the empty state.
+   */
+  title?: React.ReactNode;
+  /**
+   * The kind of empty state to be rendered. @design
+   */
+  kind?: "undefined" | "large";
+  /**
+   * The icon to be rendered in the empty state. @design
+   */
+  icon?: React.ReactNode;
+  /**
+   * The button to be rendered in the empty state. @design
+   */
+  button?: React.ReactNode;
+  /**
+   * The CSS class name to be appended to the top-level node.
+   */
+  className?: string;
+  /**
+   * The replaceable components to be used for the empty state.
+   */
+  components?: { Icon: React.ReactNode; Text: React.ReactNode };
+}
+
+const Icon = ({ icon }: EmptyProps) => {
+  const { prefix } = useSettings();
+  if (!icon) return null;
+  return <div className={`${prefix}--empty__icon`}>{icon}</div>;
+};
+
+const Text = ({ title, children }: EmptyProps) => {
+  const { prefix } = useSettings();
+  return (
+    <div className={`${prefix}--empty__text`}>
+      {title && <h2>{title}</h2>}
+      <div>{children}</div>
+    </div>
+  );
+};
+
+/** The Empty component can be used whenever a section should indicate that there is no content available. This can be the case for a empty list table or search results. */
+const Empty = ({
+  button,
+  children,
+  className,
+  components,
+  icon,
+  title,
+  kind = "large",
+  ...other
+}: EmptyProps) => {
+  const { prefix } = useSettings();
+
+  const classes = classNames(
+    {
+      [`${prefix}--empty`]: true,
+      [`${prefix}--empty--${kind}`]: kind,
+    },
+    className
+  );
+
+  const defaultComponents = { Icon, Text };
+
+  const allComponents = {
+    ...defaultComponents,
+    ...components,
+  };
+
+  const IconComponent = allComponents.Icon as React.FC<EmptyProps>;
+  const TextComponent = allComponents.Text as React.FC<EmptyProps>;
+
+  return (
+    <div className={classes} {...other}>
+      <IconComponent icon={icon} />
+      <TextComponent title={title} children={children} />
+      <div className={`${prefix}--empty__button`}>{button}</div>
+    </div>
+  );
+};
+
+Empty.displayName = "Empty";
+
+export default Empty;

package/src/components/Empty/README.mdx

@@ -0,0 +1,28 @@
+Empty states are a way to improve the user experience of your product, from onboarding to encouraging users to interact with your app. They are screens in your UI that are not yet full of information. That is to say, they will eventually have content on them when the user populates them.
+
+The component should usually cover the whole area of the section and have a slightly darker background than the regular content. It can be also used for large notification messages.
+
+### Types of empty states
+
+- **First use** – Occurs with a new product or service when there is still nothing to show, such as a new Evernote or Dropbox account.
+- **User cleared** – Occurs when users complete actions such as clearing their inbox or task list, and the result is an empty screen.
+- **Errors** – These occur when something goes wrong, or when there are issues such as a mobile phone going offline due to network problems.
+- **No results/No data** – Occurs when there is nothing to show. This can happen if someone performs a search and the query is empty or there isn’t data available to show (when filtering for a date-range that has no data for example).
+
+### When to use
+
+- ✓ Can be the case for a empty list table or search results
+- ✓ Cover the whole area where normally content would be displayed
+- ✓ Add personality by adding an illustration or icon (for example by using FontAwesome)
+- ✓ Tell your user to do something: provide a call-to-action button
+- ✓ Can be also used for large notification messages
+
+### Related
+
+[Button](?path=/docs/components-button--button-regular)
+
+### Reference
+
+[Breakfree Graphics Empty States – The Most Overlooked Aspect of UX](https://www.breakfreegraphics.com/design-blog/empty-states-the-most-overlooked-aspect-of-ux/)
+
+[justinmind Everything you need to know about empty state design](https://www.justinmind.com/blog/everything-you-need-to-know-about-empty-state-design/)

package/src/components/Empty/index.ts

@@ -0,0 +1 @@
+export { default } from './Empty';

package/src/components/Footer/Footer-external.hbs

@@ -0,0 +1,22 @@
+<footer mobilepagewidth="" class="wfp--footer wfp--footer--external some-class">
+	<div class="wfp--wrapper">
+		<div class="wfp--footer__content">
+			<div class="wfp--footer__info">
+				<div>The United Nations World Food Programme - saving lives in emergencies and changing lives for millions through sustainable development. WFP works in more than 80 countries around the world, feeding people caught in conflict and disasters, and laying the foundations for a better future.<br>
+					<a href="http://www.wfp.org" class="wfp--link">Custom Links</a>
+				</div>
+			</div>
+			<div class="wfp--footer__cta">
+				<img class="wfp--footer__cta-logo" src="https://cdn.wfp.org/guides/ui/assets/v0.0.1/logos/extended/en/wfp-logo-extended-black-en.svg" alt="World Food Programme Logo">
+				<img class="wfp--footer__cta-logo-small" src="https://cdn.wfp.org/guides/ui/assets/v0.0.1/logos/vertical/en/wfp-logo-vertical-black-en.svg" alt="World Food Programme Logo"><div class="wfp--footer__secondary">
+					<div>Via C. G. Viola 68 Parco dei Medici<br>00148 Rome, Italy
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="wfp--wrapper wfp--footer__meta">
+		<div class="wfp--footer__meta__content"> 2018 © World Food Programme
+		</div>
+	</div>
+</footer>

package/src/components/Footer/Footer-internal.hbs

@@ -0,0 +1,30 @@
+<footer mobilepagewidth="" class="wfp--footer">
+	<div class="wfp--wrapper wfp--wrapper--width-lg">
+		<div class="wfp--footer__content">
+			<div class="wfp--footer__info">
+				<div class="wfp--footer__info">
+					<div class="wfp--footer__info__item">
+						<p class="wfp--footer__label">A label</p>
+						<ul class="wfp--footer__list">
+							<li><a href="http://www.wfp.org" class="wfp--link">First Link</a></li>
+							<li><a href="http://www.wfp.org" class="wfp--link">Second Link</a></li>
+						</ul></div><div class="wfp--footer__info__item"><p class="wfp--footer__label">Another label</p>
+							<ul class="wfp--footer__list">
+								<li><a href="http://www.wfp.org" class="wfp--link">First Link</a></li><li><a href="http://www.wfp.org" class="wfp--link">Second Link</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+				<div class="wfp--footer__cta">
+          <img class="wfp--footer__cta-logo" src="https://cdn.wfp.org/guides/ui/assets/v0.0.1/logos/extended/en/wfp-logo-extended-black-en.svg" alt="World Food Programme Logo" />
+          <img class="wfp--footer__cta-logo-small" src="https://cdn.wfp.org/guides/ui/assets/v0.0.1/logos/standard/en/wfp-logo-standard-black-en.svg" alt="World Food Programme Logo" />
+        </div>
+			</div>
+		</div>
+		<div class="wfp--wrapper wfp--wrapper--width-lg wfp--footer__meta">
+			<div class="wfp--footer__meta__content">
+        2019 © World Food Programme
+			</div>
+		</div>
+	</footer>

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

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

@@ -0,0 +1,64 @@
+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
+  });
+});