@progressiveui/react 1.22.0

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import AnchorNavigation from './AnchorNavigation';
+import Link from '../Link';
+import { shallow } from 'enzyme';
+
+describe('AnchorNavigation', () => {
+    describe('renders as expected', ()=>{
+        const wrapper = shallow(
+        <AnchorNavigation title="title">
+            <Link href="#">
+                Item two
+            </Link>
+            <Link href="#">
+                Item three
+            </Link>
+        </AnchorNavigation>)
+
+        const anchorWrapper = () => wrapper.find('div.wfp--anchor-navigation');
+
+        describe('anchorWrapper', () => {
+            it('renders as expected', () => {
+                expect(anchorWrapper().props().children.length).toBe(2)
+            })
+            it('renders classes as expected', () => {
+                expect(anchorWrapper().hasClass('wfp--anchor-navigation')).toEqual(true)
+            })
+        })
+
+        const titleWrapper = () => wrapper.find('div.wfp--anchor-header-title');
+
+        describe('titleWrapper', () => {
+            it('renders as expected', () => {
+                expect(titleWrapper().length).toBe(1)
+            })
+            it('renders classes as expected', () => {
+                expect(titleWrapper().hasClass('wfp--anchor-header-title')).toEqual(true)
+            })
+        })
+
+        const contentWrapper = () => wrapper.find('div.wfp--anchor-content');
+
+        describe('contentWrapper', () => {
+            it('renders classes as expected', () => {
+                expect(contentWrapper().hasClass('wfp--anchor-content')).toEqual(true)
+            })
+        })
+    })
+})

package/src/components/AnchorNavigation/AnchorNavigation.stories.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import markdown from './README.mdx';
+import AnchorNavigation from './AnchorNavigation';
+import Link from '../Link';
+
+export default {
+  title: 'Components/Navigation/AnchorNavigation',
+  component: AnchorNavigation,
+  parameters: {
+    componentSubtitle: 'Component',
+    status: 'experimental',
+    mdx: markdown,
+  },
+};
+
+export const RegularAnchorNavigation = (args) => (
+  <AnchorNavigation {...args}>
+    <Link href="#">Item one</Link>
+    <Link href="#">Item two</Link>
+    <Link href="#">Item three</Link>
+    <Link href="#">Item four</Link>
+  </AnchorNavigation>
+);
+
+RegularAnchorNavigation.args = {
+  title: 'Title',
+};
+
+const anchorsourcecode = `
+import { AnchorNavigation, Link } from "@un/ui";
+
+<AnchorNavigation title="Title">
+  <Link href="#">
+    Item one
+  </Link>
+  <Link href="#">
+    Item two
+  </Link>
+  <Link href="#">
+    Item three
+  </Link>
+  <Link href="#">
+    Item four
+  </Link>
+</AnchorNavigation>
+`;
+
+RegularAnchorNavigation.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: anchorsourcecode,
+      },
+    },
+  },
+};

package/src/components/AnchorNavigation/AnchorNavigation.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+
+interface AnchorNavigationProps extends React.ComponentPropsWithRef<"div"> {
+  /*
+   * The title of the anchor navigation
+   */
+  title?: string;
+}
+
+const AnchorNavigation: React.FC<AnchorNavigationProps> = ({
+  title,
+  children,
+  className,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+
+  const wrapperClasses = classNames(`${prefix}--anchor-navigation`, className);
+  return (
+    <div className={wrapperClasses} {...other}>
+      <div className={`${prefix}--anchor-header-title`}>{title}</div>
+      <div className={`${prefix}--anchor-content`}>{children}</div>
+    </div>
+  );
+};
+
+export default AnchorNavigation;

package/src/components/AnchorNavigation/index.ts

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

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import AuthLayout from './AuthLayout';
+import { shallow } from 'enzyme';
+
+describe('AuthLayout', () => {
+    describe('renders as expected', ()=>{
+        const wrapper = shallow(
+        <AuthLayout>
+            <div>This is image content</div>
+            <div>Auth content </div>
+        </AuthLayout>)
+
+        const authWrapper = () => wrapper.find('div.wfp--auth-wrapper');
+
+        describe('authWrapper', () => {
+            it('renders as expected', () => {
+                expect(authWrapper().props().children.length).toBe(2)
+            })
+            it('renders classes as expected', () => {
+                expect(authWrapper().hasClass('wfp--auth-wrapper')).toEqual(true)
+            })
+        })
+
+        const backgroundWrapper = () => wrapper.find('div.wfp--auth-background-wrapper');
+
+        describe('backgroundWrapper', () => {
+            it('renders as expected', () => {
+                expect(backgroundWrapper().length).toBe(1)
+            })
+            it('renders classes as expected', () => {
+                expect(backgroundWrapper().hasClass('wfp--auth-background-wrapper')).toEqual(true)
+            })
+        })
+
+        const contentWrapper = () => wrapper.find('div.wfp--auth-content-wrapper');
+
+        describe('contentWrapper', () => {
+            it('renders as expected', () => {
+                expect(contentWrapper().length).toBe(1)
+            })
+            it('renders classes as expected', () => {
+                expect(contentWrapper().hasClass('wfp--auth-content-wrapper')).toEqual(true)
+            })
+        })
+    })
+})

package/src/components/AuthLayout/AuthLayout.stories.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+import markdown from "./README.mdx";
+import { AuthLayout, BackgroundContent } from "./AuthLayout";
+import Button from "../Button";
+import TextInput from "../TextInput";
+import Text from "../Text";
+import Link from "../Link";
+import FormGroup from "../FormGroup";
+// import Icon from './../Icon';
+import { ArrowLeft, WfpLogoStandardBlackEn } from "@progressiveui/icons-react";
+
+export default {
+  title: "Components/Content Related/AuthLayout",
+  component: AuthLayout,
+  subcomponents: { BackgroundContent },
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const Regular = (args) => {
+  return (
+    <AuthLayout
+      {...args}
+      backgroundContent={
+        <BackgroundContent
+          style={{
+            background: "#007DBC",
+            color: "#fff",
+            padding: "3rem",
+          }}
+        >
+          Image can be placed here or just give a background with content like
+          this
+        </BackgroundContent>
+      }
+    >
+      <div>Forms will be here</div>
+    </AuthLayout>
+  );
+};
+
+// TODO
+export const RegularNoImage = (args) => (
+  <AuthLayout {...args}>
+    <FormGroup style={{ width: "80%" }}>
+      <Button
+        icon={ArrowLeft}
+        iconReverse
+        kind="secondary"
+        style={{ marginBottom: "3rem" }}
+      >
+        Back to lorem
+      </Button>
+      <TextInput
+        labelText="The labelText"
+        name="inputname"
+        placeholder="placeholder"
+      />
+      <TextInput
+        labelText="The labelText"
+        name="inputname"
+        placeholder="placeholder"
+      />
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "flex-end",
+          alignItems: "center",
+        }}
+      >
+        <Link href="https://www.wfp.org">Another link</Link>
+        <Button kind="primary" style={{ marginLeft: "2rem" }}>
+          Register
+        </Button>
+      </div>
+    </FormGroup>
+  </AuthLayout>
+);
+
+RegularNoImage.args = {
+  backgroundContent: (
+    <BackgroundContent
+      style={{
+        background: "linear-gradient(0.13deg, #357DB6 0.17%, #5DB2C2 99.95%)",
+        color: "#fff",
+        padding: "3rem",
+      }}
+    >
+      <WfpLogoStandardBlackEn
+        description="WFP"
+        fill="#fff"
+        style={{ marginBottom: "4rem" }}
+      />
+      <Text kind="h1">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,diam nonumy
+        eirmod.
+      </Text>
+
+      <p style={{ marginTop: "2rem" }}>- Author</p>
+    </BackgroundContent>
+  ),
+};
+
+export const WithImage = (args) => (
+  <AuthLayout {...args}>
+    <FormGroup style={{ width: "80%" }}>
+      <Button
+        icon={ArrowLeft}
+        iconReverse
+        kind="secondary"
+        style={{ marginBottom: "3rem" }}
+      >
+        Back to lorem
+      </Button>
+      <TextInput
+        labelText="The labelText"
+        name="inputname"
+        placeholder="placeholder"
+      />
+      <TextInput
+        labelText="The labelText"
+        name="inputname"
+        placeholder="placeholder"
+      />
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "flex-end",
+          alignItems: "center",
+        }}
+      >
+        <Link href="https://www.wfp.org">Another link</Link>
+        <Button kind="primary" style={{ marginLeft: "2rem" }}>
+          Register
+        </Button>
+      </div>
+    </FormGroup>
+  </AuthLayout>
+);
+
+WithImage.args = {
+  image: "http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg",
+};

package/src/components/AuthLayout/AuthLayout.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import type { PropsWithChildren } from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+
+type AuthLayoutProps = PropsWithChildren<{
+  /**
+   * The CSS class name to be placed on the wrapping element.
+   */
+  className?: string;
+  /**
+   * The image is set as background on the left section when provided
+   */
+  image?: React.ReactNode;
+  /**
+   * This usually consist of `<BackgroundContent/>` if you wish to provide content and background color instead of an image
+   */
+  backgroundContent?: React.ReactNode;
+}>;
+
+const AuthLayout: React.FC<AuthLayoutProps> = ({
+  image,
+  backgroundContent,
+  children,
+  className,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const style = image
+    ? {
+        backgroundImage: `url(${image})`,
+      }
+    : {};
+
+  const wrapperClasses = classNames(`${prefix}--auth-background-wrapper`, {
+    [`${prefix}--auth-background-image`]: image,
+    [`${className}`]: className,
+  });
+
+  return (
+    <div className={`${prefix}--auth-wrapper`} {...other}>
+      <div className={wrapperClasses} style={style}>
+        {backgroundContent}
+      </div>
+      <div className={`${prefix}--auth-content-wrapper`}>{children}</div>
+    </div>
+  );
+};
+
+type BackgroundContentProps = React.ComponentPropsWithRef<'div'>;
+
+const BackgroundContent: React.FC<BackgroundContentProps> = ({
+  children,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  return (
+    <div {...other} className={`${prefix}--auth-background-content`}>
+      {children}
+    </div>
+  );
+};
+
+export { BackgroundContent, AuthLayout };

package/src/components/AuthLayout/index.ts

@@ -0,0 +1 @@
+export { AuthLayout, BackgroundContent } from './AuthLayout';

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Avatar from ".";
+
+export default {
+  title: "Components/UI Elements/Avatar",
+  component: User,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+  },
+};
+
+export const AvatarDefault = (args) => <Avatar {...args} />;
+
+AvatarDefault.args = {
+  children: "Max Mustermann",
+  image:
+    "https://www.wfp.org/sites/default/files/styles/page_accordion/public/images/ourwork_humanitarian.jpg?itok=R0ymBwxH",
+};

package/src/components/Avatar/Avatar.tsx

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

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

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

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

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { BannerNavigation, BannerNavigationItem } from "./BannerNavigation";
+import { BannerNavigationWithContent } from "./BannerNavigationWithContent";
+import Search from "../Search";
+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",
+  },
+};