@progressiveui/react 2.0.2 → 2.0.4

package/src/components/Avatar/Avatar.tsx

@@ -1,99 +0,0 @@
-import * as React from "react";
-import { User as UserIcon } from "@progressiveui/icons-react";
-import useSettings from "../../hooks/useSettings";
-import classNames from "classnames";
-
-export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /**
-   * Provide the alt text for the image.
-   */
-  alt?: string;
-  /**
-   * Specify the type of Tag @design
-   */
-  missingImage?: "avatar" | "letter";
-  /**
-   * Url to an avatar image The size of the image is 25px * 25px.
-   * Provide at least 50px * 50px to support HiDPI displays.
-   */
-  image?: string;
-  /**
-   * The username which will be displayed in the avatar.
-   */
-  name?: string;
-  /**
-   * Additional props for the UserIcon component
-   */
-  userIconProps?: React.ComponentProps<typeof UserIcon>;
-}
-
-/**
- * Avatar is used to display a user image or icon.
- */
-
-function Avatar({
-  alt,
-  className,
-  image,
-  missingImage = "avatar",
-  name,
-  userIconProps,
-  ...other
-}: AvatarProps) {
-  const { prefix } = useSettings();
-
-  if (!image && missingImage === "avatar") {
-    const classes = classNames(
-      `${prefix}--avatar`,
-      `${prefix}--avatar--empty`,
-      `${prefix}--avatar--missing`,
-      className
-    );
-
-    return (
-      <UserIcon
-        fill="#ffffff"
-        description={alt}
-        className={classes}
-        {...userIconProps}
-        {...other}
-      />
-    );
-  } else if (image === undefined && missingImage === "letter") {
-    const classes = classNames(
-      `${prefix}--avatar`,
-      `${prefix}--avatar--empty`,
-      `${prefix}--avatar--letter`,
-      className
-    );
-
-    return (
-      <svg
-        id="avatar-layer"
-        className={classes}
-        x="0px"
-        y="0px"
-        viewBox="0 0 25 25"
-        height="25px"
-        width="25px"
-      >
-        <text x="50%" y="57%" dominantBaseline="middle" textAnchor="middle">
-          {name && name.toUpperCase()[0]}
-        </text>
-      </svg>
-    );
-  } else {
-    const classes = classNames(`${prefix}--avatar`, className);
-
-    return (
-      <div {...other} className={classes}>
-        <img alt={alt} src={image} />
-      </div>
-    );
-  }
-  return null;
-}
-
-Avatar.displayName = "Avatar";
-
-export default Avatar;

package/src/components/Avatar/index.ts

@@ -1 +0,0 @@
-export { default } from "./Avatar";

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import {BannerNavigation, BannerNavigationItem} from '../BannerNavigation';
-import { shallow } from 'enzyme';
-
-describe('BannerNavigation', ()=>{
-
-    describe('renders as expected', ()=>{
-        const wrapper = shallow(<BannerNavigation>Items placed here</BannerNavigation>);
-
-        const bannerWrapper = () => wrapper.find('div.wfp--banner-navigation'); 
-
-        describe('bannerWrapper', () => {
-            it('renders as expected', () => {
-                expect(bannerWrapper().length).toBe(1);
-            });
-
-            it('renders default classes as expected', () => {
-                expect(bannerWrapper().hasClass('wfp--banner-navigation')).toEqual(true);
-            });
-
-            it('renders unoredered list as expected', () => {
-                expect(bannerWrapper().find('ul').length).toBe(1);
-            });
-
-            
-        })
-    })
-})
-
-
-describe('BannerNavigationItem', ()=>{
-
-    describe('renders as expected', ()=>{
-        const wrapper = shallow(<BannerNavigationItem>Items placed here</BannerNavigationItem>);
-
-            it('renders as expected', () => {
-                expect(wrapper.length).toBe(1);
-            });
-
-            it('renders default classes as expected', () => {
-                expect(wrapper.hasClass('wfp--banner-navigation__item')).toEqual(true);
-            });
-
-            it('renders unoredered list as expected', () => {
-                expect(wrapper.find('li').length).toBe(1);
-            });
-    })
-})

package/src/components/BannerNavigation/BannerNavigation.hbs

@@ -1,45 +0,0 @@
-<div class="wfp--banner-navigation">
-	<div class="wfp--wrapper wfp--wrapper--width-lg">
-		<ul class="wfp--banner-navigation__list">
-			<li class="wfp--banner-navigation__item">
-				<a href="http://communities.wfp.org" class="wfp--link" target="_blank">Communities</a>
-			</li>
-			<li class="wfp--banner-navigation__item">
-				<a href="http://manuals.wfp.org" class="wfp--link" target="_blank">Manuals</a>
-			</li>
-			<li class="wfp--banner-navigation__item">
-				<a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">GoDocs</a>
-			</li>
-			<li class="wfp--banner-navigation__item">
-				<a href="http://opweb.wfp.org" class="wfp--link" target="_blank">OPweb</a>
-			</li>
-			<li class="wfp--banner-navigation__item">
-				<a href="http://info.wfp.org" class="wfp--link" target="_blank">IN/FO</a>
-			</li>
-			<li class="wfp--banner-navigation__item">
-				<a href="https://selfservice.go.wfp.org" class="wfp--link" target="_blank">Self-service</a>
-			</li>
-			<li class="wfp--banner-navigation__item">
-				<a href="https://welearn.wfp.org" class="wfp--link" target="_blank">WeLearn</a>
-			</li>
-			<li class="wfp--banner-navigation__item">
-				<div class="wfp--search wfp--search--lg wfp--search--banner" role="search">
-					<svg class="wfp--search-magnifier" fill-rule="evenodd" height="16" name="search" role="img" viewBox="0 0 16 16" width="16" aria-label="Search" alt="Search">
-						<title>Search</title>
-						<path d="M11.435 10.063h-.728l-.251-.252a5.89 5.89 0 0 0 1.437-3.865 5.946 5.946 0 1 0-5.947 5.947 5.91 5.91 0 0 0 3.865-1.432l.252.251v.723L14.637 16 16 14.637l-4.565-4.574zm-5.489 0a4.117 4.117 0 1 1 0-8.234 4.117 4.117 0 0 1 0 8.234z">							
-						</path>
-					</svg>
-					<label for="search-2" class="wfp--label">Search</label>
-					<input class="wfp--search-input" id="search-2" placeholder="Search" type="text">
-					<button class="wfp--search-close wfp--search-close--hidden" type="button">
-						<svg fill-rule="evenodd" height="16" name="close--solid" role="img" viewBox="0 0 16 16" width="16" aria-label="Provide a description that will be used as the title" alt="Provide a description that will be used as the title">
-							<title>Provide a description that will be used as the title</title>
-							<path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z">
-							</path>
-						</svg>
-					</button>
-				</div>
-			</li>
-		</ul>
-	</div>
-</div>

package/src/components/BannerNavigation/BannerNavigation.stories.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import { BannerNavigation, BannerNavigationItem } from "./BannerNavigation";
-import { BannerNavigationWithContent } from "./BannerNavigationWithContent";
-import Link from "../Link";
-
-export default {
-  title: "Components/Navigation/BannerNavigation",
-  component: BannerNavigation,
-  subcomponents: { BannerNavigationItem, Link },
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-    previewWidth: "full",
-  },
-};
-
-export const BannerNavigationDefault: Story = {
-  render: (args) => (
-    <BannerNavigation {...args}>
-      <BannerNavigationItem>
-        <Link href="#" target="_blank">
-          Link 1
-        </Link>
-      </BannerNavigationItem>
-      <BannerNavigationItem>
-        <Link href="#" target="_blank">
-          Link 2
-        </Link>
-      </BannerNavigationItem>
-      <BannerNavigationItem>
-        <Link href="#" target="_blank">
-          Link 3
-        </Link>
-      </BannerNavigationItem>
-      <BannerNavigationItem>
-        <Link href="#" target="_blank">
-          Link 4
-        </Link>
-      </BannerNavigationItem>
-    </BannerNavigation>
-  ),
-  args: {
-    pageWidth: "lg",
-  },
-};
-
-/* 
-<BannerNavigationItem>
-  <Search
-    id="search-2"
-    kind="banner"
-    placeholder="Search"
-    onChange={action("onChange")}
-  />
-</BannerNavigationItem>
-*/
-export const BannerNavigationWithContentDefault: Story = {
-  render: (args) => <BannerNavigationWithContent {...args} />,
-  args: {
-    pageWidth: "lg",
-  },
-};

package/src/components/BannerNavigation/BannerNavigation.tsx

@@ -1,55 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-import Wrapper from "../Wrapper";
-import useSettings from "../../hooks/useSettings";
-
-export interface BannerNavigationItemProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * The CSS class name to be placed on the wrapping element.
-   */
-  className?: string;
-}
-
-const BannerNavigationItem: React.FC<BannerNavigationItemProps> = ({
-  className,
-  children,
-}) => {
-  const { prefix } = useSettings();
-  const wrapperClasses = classNames(
-    `${prefix}--banner-navigation__item`,
-    className
-  );
-  return <li className={wrapperClasses}>{children}</li>;
-};
-
-export interface BannerNavigationProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * The CSS class name to be placed on the wrapping element.
-   */
-  className?: string;
-  /**
-   * Specify the max-width on desktop devices (same as \`Wrapper\` component)
-   */
-  pageWidth?: "sm" | "md" | "lg" | "full";
-}
-
-const BannerNavigation: React.FC<BannerNavigationProps> = ({
-  children,
-  className,
-  ...props
-}) => {
-  const { prefix } = useSettings();
-  const wrapperClasses = classNames(`${prefix}--banner-navigation`, className);
-
-  return (
-    <div className={wrapperClasses}>
-      <Wrapper {...props}>
-        <ul className={`${prefix}--banner-navigation__list`}>{children}</ul>
-      </Wrapper>
-    </div>
-  );
-};
-
-export { BannerNavigation, BannerNavigationItem };

package/src/components/BannerNavigation/BannerNavigation.twig

@@ -1,16 +0,0 @@
-<div class="wfp--theme-light wfp--theme-en">
-  <div class="wfp--banner-navigation">
-    <div class="wfp--wrapper">
-      <ul class="wfp--banner-navigation__list">
-        <li class="wfp--banner-navigation__item"><a href="https://newgo.wfp.org" class="wfp--link" target="_blank">WFPgo</a></li>
-        <li class="wfp--banner-navigation__item"><a href="https://selfservice.go.wfp.org" class="wfp--link" target="_blank">Self-Service</a></li>
-        <li class="wfp--banner-navigation__item"><a href="http://communities.wfp.org" class="wfp--link" target="_blank">Communities</a></li>
-        <li class="wfp--banner-navigation__item"><a href="http://manuals.wfp.org" class="wfp--link" target="_blank">Manuals</a></li>
-        <li class="wfp--banner-navigation__item"><a href="https://go.docs.wfp.org" class="wfp--link" target="_blank">GoDocs</a></li>
-        <li class="wfp--banner-navigation__item"><a href="https://newgo.wfp.org/topics/data" class="wfp--link" target="_blank">Data</a></li>
-        <li class="wfp--banner-navigation__item"><a href="http://opweb.wfp.org" class="wfp--link" target="_blank">OPweb</a></li>
-        <li class="wfp--banner-navigation__item"><a href="https://welearn.wfp.org" class="wfp--link" target="_blank">WeLearn</a></li>
-      </ul>
-    </div>
-  </div>
-</div>

package/src/components/BannerNavigation/BannerNavigationWithContent.tsx

@@ -1,93 +0,0 @@
-import * as React from 'react';
-import { BannerNavigation, BannerNavigationItem } from './BannerNavigation';
-import Search from '../Search';
-import Link from '../Link';
-
-type BannerNavigationWithContentProps = {
-  /**
-   * A onChange Function for the search
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  searchOnChange?: () => {};
-  /**
-   * Allows to disable the search input
-   */
-  search?: boolean;
-};
-
-const BannerNavigationWithContent: React.FC<
-  BannerNavigationWithContentProps
-> = ({ searchOnChange, search, ...other }) => (
-  <BannerNavigation {...other}>
-    <BannerNavigationItem>
-      <Link href="http://communities.wfp.org" target="_blank">
-        Communities
-      </Link>
-    </BannerNavigationItem>
-    <BannerNavigationItem>
-      <Link href="http://manuals.wfp.org" target="_blank">
-        Manuals
-      </Link>
-    </BannerNavigationItem>
-    <BannerNavigationItem>
-      <Link href="https://newgo.docs.wfp.org" target="_blank">
-        GoDocs
-      </Link>
-    </BannerNavigationItem>
-    <BannerNavigationItem>
-      <Link href="https://welearn.wfp.org" target="_blank">
-        WeLearn
-      </Link>
-    </BannerNavigationItem>
-    <BannerNavigationItem>
-      <Link href="https://dashboard.wfp.org" target="_blank">
-        Dashboard
-      </Link>
-    </BannerNavigationItem>
-    <BannerNavigationItem>
-      <Link href="http://opweb.wfp.org" target="_blank">
-        OPweb
-      </Link>
-    </BannerNavigationItem>
-    <BannerNavigationItem>
-      <Link href="https://selfservice.go.wfp.org" target="_blank">
-        Self-Service
-      </Link>
-    </BannerNavigationItem>
-    <BannerNavigationItem>
-      <Link href="https://erpapps.wfp.org/fiori" target="_blank">
-        WeTravel
-      </Link>
-    </BannerNavigationItem>
-    <BannerNavigationItem>
-      <Link href="https://unbooking.org/" target="_blank">
-        UN Booking Hub
-      </Link>
-    </BannerNavigationItem>
-    <BannerNavigationItem>
-      <Link href="https://wfp.org" target="_blank">
-        WFP.org
-      </Link>
-    </BannerNavigationItem>
-    {search && (
-      <BannerNavigationItem>
-        <form
-          action="http://gtd.wfp.org"
-          method="GET"
-          acceptCharset="UTF-8"
-          target="_blank">
-          <Search
-            kind="banner"
-            id="search-2"
-            labelText="Find People"
-            name="q"
-            placeholder="Find People"
-            onChange={searchOnChange}
-          />
-        </form>
-      </BannerNavigationItem>
-    )}
-  </BannerNavigation>
-);
-
-export { BannerNavigationWithContent };

package/src/components/BannerNavigation/README.mdx

@@ -1,62 +0,0 @@
-## Types
-
-There are two types of `BannerNavigation` that can be used:
-
-| Type           | React name                    | Description                                                                                                    |
-| -------------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| Default        | `BannerNavigationWithContent` | Used exclusively by specific applications which are actually listed on the bar only to crosslink between them. |
-| Custom content | `BannerNavigation`            | It allows you to use custom `BannerNavigationItem` components inside.                                          |
-
-## Usage
-
-The default component is used mainly to crosslink among specific WFP applications for **internal use only**. Thus, **the default component does not have to be used for external facing products**. The internal applications are: [WFPgo](https://go.wfp.org), [Self-Service](https://selfservice.go.wf.org), [Communities](https://duckduckgo.com), [Manuals](https://duckduckgo.com), [GoDocs](https://duckduckgo.com), [Data](https://duckduckgo.com), [OPweb](https://duckduckgo.com), [WeLearn](https://duckduckgo.com)
-
-The **custom version** is used when the application has multiple pages to be visited by the user. This component allows these different pages to be easily accessible. Do not use BannerNavigation when you have only one page.
-
-## Usage with React
-
-** Default version **
-
-```jsx
-import { BannerNavigationWithContent } from "@progressiveui/react";
-<BannerNavigationWithContent pageWidth="lg" />;
-```
-
-** Custom version **
-
-```jsx
-import { BannerNavigation } from "@progressiveui/react";
-
-<BannerNavigation>
-  <BannerNavigationItem>
-    <Link href="http://communities.wfp.org" target="_blank">
-      Communities
-    </Link>
-  </BannerNavigationItem>
-  <BannerNavigationItem>
-    <Search
-      banner
-      id="search-2"
-      labelText="Search"
-      placeholder="Search"
-      onChange={action("onChange")}
-    />
-  </BannerNavigationItem>
-</BannerNavigation>;
-```
-
-## Formatting
-
-** Anatomy **
-![Image of BannerNavigation Format](https://github.com/wfp/ui/blob/component-updates/src/assets/formatting/BannerNavigation.png?raw=true)
-
-1. Background
-2. Link
-
-## Mobile
-
-The component is hidden when the viewport size is less than 768px.
-
-## Related
-
-[Link](?path=/docs/components-link--link-regular)

package/src/components/BannerNavigation/index.ts

@@ -1,2 +0,0 @@
-export { BannerNavigation, BannerNavigationItem } from './BannerNavigation';
-export { BannerNavigationWithContent } from './BannerNavigationWithContent';

package/src/components/BannerNavigation/kinds.js

@@ -1,3 +0,0 @@
-const iconNames = ['copy', 'trash', 'etc'];
-/* same variable name */
-export default iconNames;

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

@@ -1,50 +0,0 @@
-import React from 'react';
-import Breadcrumb from '../Breadcrumb';
-import BreadcrumbItem from '../BreadcrumbItem';
-import BreadcrumbSkeleton from '../Breadcrumb/Breadcrumb.Skeleton';
-import { mount, shallow } from 'enzyme';
-
-describe('Breadcrumb', () => {
-  describe('Renders as expected', () => {
-    const breadcrumb = mount(
-      <Breadcrumb className="parent-class">
-        <BreadcrumbItem className="some-class" href="www.google.com">
-          Breadcrumb 1
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-
-    const breadcrumbItem = breadcrumb.find(BreadcrumbItem);
-
-    it('renders a breadcrumb', () => {
-      expect(breadcrumb.length).toEqual(1);
-    });
-
-    it('should use the appropriate breadcrumb class', () => {
-      expect(breadcrumb.children().hasClass('wfp--breadcrumb')).toEqual(true);
-    });
-
-    it('should add extra classes that are passed via className', () => {
-      expect(breadcrumb.hasClass('parent-class')).toEqual(true);
-    });
-
-    it('should render children as expected', () => {
-      expect(breadcrumb.find(BreadcrumbItem).length).toEqual(1);
-    });
-
-    it('should render children content as expected', () => {
-      expect(breadcrumbItem.text()).toEqual('Breadcrumb 1');
-    });
-  });
-});
-
-describe('BreadcrumbSkeleton', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(<BreadcrumbSkeleton />);
-
-    it('Has the expected classes', () => {
-      expect(wrapper.hasClass('wfp--skeleton')).toEqual(true);
-      expect(wrapper.hasClass('wfp--breadcrumb')).toEqual(true);
-    });
-  });
-});

package/src/components/Breadcrumb/Breadcrumb.Skeleton.jsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-import useSettings from "../../hooks/useSettings";
-
-const BreadcrumbSkeleton = () => {
-  const { prefix } = useSettings();
-  const item = (
-    <div className={`${prefix}--breadcrumb-item`}>
-      <a href="/#" className={`${prefix}--link`}>
-        &nbsp;
-      </a>
-    </div>
-  );
-  return (
-    <div className={`${prefix}--breadcrumb ${prefix}--skeleton`}>
-      {item}
-      {item}
-      {item}
-    </div>
-  );
-};
-
-export default BreadcrumbSkeleton;

package/src/components/Breadcrumb/Breadcrumb.hbs

@@ -1,16 +0,0 @@
-<div class="wfp--breadcrumb wfp--breadcrumb--no-trailing-slash">
-  <div class="wfp--breadcrumb-item">
-    <a href="/#" class="wfp--link">
-      <svg class="wfp--breadcrumb-home" fill="#0b77c2" fill-rule="evenodd" height="14" name="home" role="img" viewBox="0 0 16 16" width="14" aria-label="Provide a description that will be used as the title" alt="Provide a description that will be used as the title">
-        <title>Provide a description that will be used as the title</title>
-        <path d="M13.555 9.515v3.842a.654.654 0 0 1-.666.643H9.666a.329.329 0 0 1-.333-.322v-3.002a.329.329 0 0 0-.334-.322H7a.329.329 0 0 0-.333.322v3.002c0 .177-.15.322-.334.322H3.11a.654.654 0 0 1-.667-.643V9.515a.32.32 0 0 1 .122-.25l5.223-4.149a.348.348 0 0 1 .425 0l5.223 4.15c.075.062.12.153.12.25zm2.323-1.632l-2.323-1.847V2.323a.329.329 0 0 0-.333-.322h-1.556a.329.329 0 0 0-.333.322v1.946L8.846 2.294a1.37 1.37 0 0 0-1.694 0L.12 7.883a.315.315 0 0 0-.045.453l.709.83a.343.343 0 0 0 .469.044l6.534-5.193a.348.348 0 0 1 .425 0l6.534 5.193a.343.343 0 0 0 .47-.043l.708-.831a.315.315 0 0 0-.047-.453z"></path>
-      </svg>
-    </a>
-  </div>
-  <div class="wfp--breadcrumb-item">
-    <a href="#" class="wfp--link">Breadcrumb 2</a>
-  </div>
-  <div class="wfp--breadcrumb-item">
-    <a href="#" class="wfp--link">Breadcrumb 3</a>
-  </div>
-</div>

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-
-import Breadcrumb from ".";
-import BreadcrumbHome from "../BreadcrumbHome";
-//import { BreadcrumbHome, BreadcrumbItem } from "@progressiveui/react";
-import BreadcrumbItem from "../BreadcrumbItem";
-
-export default {
-  title: "Components/Navigation/Breadcrumb",
-  component: Breadcrumb,
-  subcomponents: { BreadcrumbHome, BreadcrumbItem },
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-  },
-};
-
-export const BreadcrumbDefault: Story = {
-  render: (args) => (
-    <Breadcrumb {...args}>
-      <BreadcrumbItem>
-        <a href="/#">
-          <BreadcrumbHome />
-        </a>
-      </BreadcrumbItem>
-      <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
-      <BreadcrumbItem disableLink>Breadcrumb 3</BreadcrumbItem>
-    </Breadcrumb>
-  ),
-  args: {},
-};
-
-export const BreadcrumbHomeDefault = (args) => <BreadcrumbHome {...args} />;
-
-export const BreadcrumbItemDefault = (args) => (
-  <BreadcrumbItem {...args}>
-    <a>Breadcrumb Item</a>
-  </BreadcrumbItem>
-);

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import useSettings from "../../hooks/useSettings";
-
-/**
- * The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them. */
-interface BreadcrumbProps extends React.ComponentPropsWithoutRef<"div"> {
-  /**
-   * Pass in the BreadcrumbItem's for your Breadcrumb
-   */
-  children?: React.ReactNode;
-}
-
-const Breadcrumb = ({ children, className, ...other }: BreadcrumbProps) => {
-  const { prefix } = useSettings();
-  const classes = classNames(className, {
-    [`${prefix}--breadcrumb`]: true,
-    [`${prefix}--breadcrumb--no-trailing-slash`]: true,
-  });
-  return (
-    <div className={classes} {...other}>
-      {children}
-    </div>
-  );
-};
-
-export default Breadcrumb;