@progressiveui/react 1.22.0

package/src/components/StepNavigationItem/StepNavigationItem.tsx

@@ -0,0 +1,155 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/ban-types */
+import * as React from "react";
+import type { PropsWithChildren } from "react";
+import classNames from "classnames";
+import {
+  Ellipsis,
+  WarningOutline,
+  Locked,
+  Error,
+  Checkmark,
+  Menu,
+  OverflowMenu,
+} from "@progressiveui/icons-react";
+import useSettings from "../../hooks/useSettings";
+
+type StepNavigationItemProps = PropsWithChildren<{
+  /**
+   * Provide a className that is applied to the StepNavigation component
+   *
+   */
+  className?: string;
+  /**
+   * Provide text that is used alongside the control label for additional help
+   *
+   */
+  helperText?: React.ReactNode;
+  /**
+   * Provide the index of the each item
+   *
+   */
+  index?: number;
+  /**
+   * Provide the text that will be read by a screen reader when visiting this control
+   *
+   */
+  label?: string;
+  /**
+   * By default, this value is "presentation". You can also provide an alternate
+   * role if it makes sense from the accessibility-side
+   */
+  role?: string;
+  /**
+   * Optionally provide an index for the currently selected <Tab>
+   */
+  selectedPage?: number;
+  /**
+   * The page number of the step.
+   **/
+  page?: number;
+  /**
+   * Provide status one of these status prop type to your step to give more meaning.
+   *
+   */
+
+  status?: string;
+  /**
+   * An optional parameter to allow overriding the anchor rendering.
+   * Useful for using Tab along with react-router or other client
+   * side router libraries.
+   */
+  renderAnchor?: (p: object) => {};
+  /**
+   * On click handler to change the currently active item.
+   **/
+  onClick?: (e: object) => {};
+  handleTabClick?: (e?: any, index?: number, label?: string) => {};
+}>;
+
+const StepNavigationItem: React.FC<StepNavigationItemProps> = ({
+  className,
+  handleTabClick = () => {},
+  index,
+  label,
+  status,
+  helperText,
+  selectedPage = 0,
+  onClick = () => {},
+  page = 0,
+  renderAnchor,
+}) => {
+  const { prefix } = useSettings();
+
+  const classes = classNames(
+    `${prefix}--step-navigation__nav-item`,
+    { [`${prefix}--step-navigation__nav-item--before`]: page < selectedPage },
+    {
+      [`${prefix}--step-navigation__nav-item--selected`]: page === selectedPage,
+    },
+    { [`${prefix}--step-navigation__nav-item--${status}`]: status },
+    className
+  );
+
+  const anchorProps = {
+    className: `${prefix}--step-navigation__nav-link`,
+    /*ref: (e) => {
+      this.tabAnchor = e;
+    },*/
+  };
+
+  const icon = {
+    "not-started": { icon: Ellipsis },
+    warning: { icon: WarningOutline },
+    locked: { icon: Locked },
+    skip: { icon: OverflowMenu },
+    disabled: { icon: Error },
+    complete: { icon: Checkmark },
+    summary: { icon: Menu },
+  };
+
+  const Icon = status ? icon[status]?.icon : null;
+  return (
+    <li
+      tabIndex={-1}
+      className={classes}
+      onClick={(evt) => {
+        if (status !== "locked") {
+          handleTabClick(evt, index, label);
+          onClick(evt);
+        }
+      }}
+      role="presentation"
+    >
+      <>
+        {renderAnchor ? (
+          renderAnchor(anchorProps)
+        ) : (
+          <React.Fragment>
+            <div className={`${prefix}--step-navigation__nav-item__indicator`}>
+              {status && page !== selectedPage ? (
+                <Icon width="14" height="14" description="Step Item" />
+              ) : (
+                <span>{page + 1}</span>
+              )}
+            </div>
+            <div>
+              <span className={`${prefix}--step-navigation__nav-item__text`}>
+                {label}
+              </span>
+              {helperText && (
+                <span
+                  className={`${prefix}--step-navigation__nav-item__helper-text`}
+                >
+                  {helperText}
+                </span>
+              )}
+            </div>
+          </React.Fragment>
+        )}
+      </>
+    </li>
+  );
+};
+
+export default StepNavigationItem;

package/src/components/StepNavigationItem/index.ts

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

package/src/components/Story/README.mdx

@@ -0,0 +1,27 @@
+The **Story** component adds a default style, formatting and spacing for a longer text with main focus on readability.
+
+More information can be found in the [typography documentation](?path=/story/documentation-general--typography).
+
+### html
+
+By adding `<div class="wfp--story"></div>` the story styling will be applied to all containing elements.
+
+```html
+<div class="wfp--story">
+  <h1 class="wfp--story__title">Story Title</h1>
+  <h2 class="wfp--story__subtitle">The Sub Title</h2>
+  <p>Some <a href="#">text</a></p>
+  <ul>
+    <li>A list</li>
+    <li>Another list item</li>
+  </ul>
+</div>
+```
+
+#### Spacings
+
+When applying the story classes the margins between the elements will be calculated automatically.
+
+### Related
+
+[Text](?path=/docs/components-text--regular)

package/src/components/Story/Story-text.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Story from '../Story';
+import { shallow } from 'enzyme';
+
+describe('Story', () => {
+    describe('Renders as expected', () => {
+        const wrapper = shallow(<Story className="some-class" >Content</Story>)
+
+        it('has classes as expected', () => {
+            expect(wrapper.exists('.wfp--story')).toBe(true);
+           
+        })
+
+        it('should allow for custom classes to be applied', () => {
+            expect(wrapper.hasClass('some-class')).toEqual(true);
+        });
+
+        
+    });
+
+    
+})

package/src/components/Story/Story.hbs

@@ -0,0 +1,12 @@
+<div class="wfp--wrapper wfp--wrapper--width-md wfp--story">
+	<h1 class="wfp--story__title">WFP’s Immediate Response Account — saving lives in the Kasai region of DRC</h1>
+	<h2 class="wfp--story__subtitle">Funding facility allows for scale-up of emergency operation</h2>
+	<p class="wfp--markup">In mid-2016, widespread inter-ethnic tensions and conflict descended on the Kasai region of
+		the Democratic Republic of Congo (DRC), claiming countless lives and causing massive displacement. The Kasai
+		crisis unfolded within a country already struggling with a protracted and underfunded emergency in the east.
+		Since the emergence of the Kasai crisis, funding shortfalls proved to be a major challenge to WFP’sresponse.</p>
+	<p>The scale of the food security and nutrition crisis in Kasai is immense. In September 2017, the World Food
+		Programme (WFP)’s Emergency Food Security Assessment found that there were 3.2 million severely food insecure
+		people in this region alone. In addition, 400,000 children are at risk of dying from severe acute malnutrition
+		without urgent life-saving assistance.</p>
+</div>

package/src/components/Story/Story.stories.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import Story from ".";
+
+export default {
+  title: "Components/Content Related/Story",
+  component: Story,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+  },
+};
+
+export const StoryDefault: Story = {
+  render: (args) => (
+    <Story {...args}>
+      <h2 className="wfp--story__subtitle">
+        Funding facility allows for scale-up of emergency operation
+      </h2>
+      <h1 className="wfp--story__title">WFP’s Immediate Response Account</h1>
+      <p className="wfp--markup">
+        In mid-2016, widespread inter-ethnic tensions and conflict descended on
+        the Kasai region of the{" "}
+        <a href="#">Democratic Republic of Congo (DRC)</a>, claiming countless
+        lives and causing massive displacement. The Kasai crisis unfolded within
+        a country already struggling with a protracted and underfunded emergency
+        in the east. Since the emergence of the Kasai crisis, funding shortfalls
+        proved to be a major challenge to WFP’s response.
+      </p>
+      <h2>Secondary heading</h2>
+      <p>
+        The scale of the food security and nutrition crisis in Kasai is immense.
+        In <a href="#">September 2017</a>, the{" "}
+        <span className="wfp--inline-highlight">
+          World Food Programme (WFP)’s Emergency Food Security Assessment
+        </span>{" "}
+        found that there were 3.2 million severely food insecure people in this
+        region alone. In addition, 400,000 children are at risk of dying from
+        severe acute malnutrition without urgent life-saving assistance.
+      </p>
+      <h3>
+        Smaller Heading (h3) with <a href="#">link</a>
+      </h3>
+      <ul className="wfp--story__list">
+        <li>Lorem ipsum dolor sit amet</li>
+        <li>Consetetur sadipscing elitr</li>
+        <li>Sed diam nonumy eirmod tempor invidunt ut labore et dolore</li>
+      </ul>
+      <p>
+        The scale of the food security and nutrition crisis in Kasai is immense.
+        In September 2017, the World Food Programme (WFP)’s Emergency Food
+        Security Assessment found that there were 3.2 million severely food
+        insecure people in this region alone. In addition, 400,000 children are
+        at risk of dying from severe acute malnutrition without urgent
+        life-saving assistance.
+      </p>
+      <hr className="wfp--story__divider" />
+      <p>
+        The scale of the food security and nutrition crisis in Kasai is immense.
+        In September 2017, the World Food Programme (WFP)’s Emergency Food
+        Security Assessment found that there were 3.2 million severely food
+        insecure people in this region alone. In addition, 400,000 children are
+        at risk of dying from severe acute malnutrition without urgent
+        life-saving assistance.
+      </p>
+      <hr className="wfp--story__divider--lg" />
+      <p>
+        The scale of the food security and nutrition crisis in Kasai is immense.
+        In September 2017, the World Food Programme (WFP)’s Emergency Food
+        Security Assessment found that there were 3.2 million severely food
+        insecure people in this region alone. In addition, 400,000 children are
+        at risk of dying from severe acute malnutrition without urgent
+        life-saving assistance.
+      </p>
+    </Story>
+  ),
+  args: {},
+};
+
+const headingText = [
+  { kind: "h1", text: "Heading 1", styling: "29px, SemiBold" },
+  { kind: "h2", text: "Heading 2", styling: "25px, SemiBold" },
+  { kind: "h3", text: "Heading 3", styling: "22px, SemiBold" },
+  { kind: "h4", text: "Heading 4", styling: "20px, SemiBold" },
+  { kind: "h5", text: "Heading 5", styling: "18px, SemiBold" },
+  { kind: "h6", text: "Heading 6", styling: "16px, SemiBold" },
+];
+
+export const Headings = () => (
+  <>
+    {headingText.map((e) => {
+      const Element = e.kind as keyof JSX.IntrinsicElements;
+      return (
+        <>
+          <Story>
+            {e.kind === "h1" ? (
+              <Element className="wfp--story__title">{e.text}</Element>
+            ) : (
+              <Element>{e.text}</Element>
+            )}
+
+            <div style={{ color: "#A9A9A9", marginBottom: "2rem" }}>
+              {e.styling}
+            </div>
+          </Story>
+        </>
+      );
+    })}
+  </>
+);

package/src/components/Story/Story.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+
+/** The Story component adds a default style, formatting and spacing for a longer text with main focus on readability. */
+
+export interface StoryProps extends React.AllHTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+const Story: React.FC<StoryProps> = ({ children, className, ...other }) => {
+  const { prefix } = useSettings();
+
+  const wrapperclassNames = classNames({
+    [`${prefix}--story`]: true,
+    [`${className}`]: className,
+  });
+  return (
+    <div className={wrapperclassNames} {...other}>
+      {children}
+    </div>
+  );
+};
+
+export default Story;

package/src/components/Story/index.ts

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

package/src/components/SubNavigation/README.mdx

@@ -0,0 +1,111 @@
+The SubNavigation is a toogleable part of the MainNavigation
+
+```js
+import {
+  SubNavigation,
+  SubNavigationHeader,
+  SubNavigationTitle,
+  SubNavigationLink,
+  SubNavigationFilter,
+  SubNavigationContent,
+  SubNavigationList,
+  SubNavigationGroup,
+  SubNavigationItem,
+} from "@progressiveui/react";
+```
+
+```js
+<SubNavigation>
+  <SubNavigationHeader>
+    <SubNavigationTitle>The Title of the SubNavigation</SubNavigationTitle>
+    <SubNavigationLink>
+      <Button small>The SubPage Link</Button>
+    </SubNavigationLink>
+    <SubNavigationFilter>
+      <Search
+        className="some-class"
+        small
+        id="search-2"
+        labelText="Filter"
+        placeholder="Filter"
+      />
+    </SubNavigationFilter>
+  </SubNavigationHeader>
+  <SubNavigationContent>
+    <SubNavigationList>
+      <SubNavigationGroup title="First List" columns>
+        <SubNavigationItem>
+          <Link href="https://go.docs.wfp.org" target="_blank">
+            GoDocs
+          </Link>
+        </SubNavigationItem>
+        {/* ...more SubNavigation Items */}
+      </SubNavigationGroup>
+      {/* ...more SubNavigation Groups */}
+    </SubNavigationList>
+  </SubNavigationContent>
+</SubNavigation>
+```
+
+### SubNavigation
+
+| Setting  | Default     | Options     | Role                                                                |
+| -------- | ----------- | ----------- | ------------------------------------------------------------------- | --- |
+| children | `undefined` | `component` | Contains a `SubNavigationHeader` and `SubNavigationContent` Element |     |
+
+### SubNavigationHeader
+
+| Setting  | Default     | Options     | Role                                                                           |
+| -------- | ----------- | ----------- | ------------------------------------------------------------------------------ |
+| children | `undefined` | `component` | contains a `SubNavigationTitle`, `SubNavigationLink` and `SubNavigationFilter` |
+
+### SubNavigationTitle
+
+| Setting  | Default     | Options     | Role                    |
+| -------- | ----------- | ----------- | ----------------------- |
+| children | `undefined` | `component` | the SubNavigation title |
+
+### SubNavigationLink
+
+| Setting  | Default     | Options     | Role                                           |
+| -------- | ----------- | ----------- | ---------------------------------------------- |
+| children | `undefined` | `component` | a link to a overview of the MainNavigationItem |
+
+### SubNavigationFilter
+
+| Setting  | Default     | Options     | Role                         |
+| -------- | ----------- | ----------- | ---------------------------- |
+| children | `undefined` | `component` | filter options for the links |
+
+### SubNavigationContent
+
+| Setting  | Default     | Options     | Role               |
+| -------- | ----------- | ----------- | ------------------ |
+| children | `undefined` | `component` | content with links |
+
+### SubNavigationList
+
+| Setting    | Default     | Options   | Role                                                 |
+| ---------- | ----------- | --------- | ---------------------------------------------------- |
+| toogleable | `undefined` | `boolean` | Show options to show and hide the Blockquote         |
+| light      | `None`      | `boolean` | no content                                           |
+| code       | `None`      | `boolean` | Show content formated as code                        |
+| innerHtml  | `undefined` | `string`  | Display content as `dangerouslySetInnerHTML` content |
+
+### SubNavigationGroup
+
+| Setting    | Default     | Options   | Role                                                 |
+| ---------- | ----------- | --------- | ---------------------------------------------------- |
+| toogleable | `undefined` | `boolean` | Show options to show and hide the Blockquote         |
+| light      | `None`      | `boolean` | no content                                           |
+| code       | `None`      | `boolean` | Show content formated as code                        |
+| innerHtml  | `undefined` | `string`  | Display content as `dangerouslySetInnerHTML` content |
+
+### SubNavigationItem
+
+| Setting    | Default     | Options   | Role                                                 |
+| ---------- | ----------- | --------- | ---------------------------------------------------- |
+| toogleable | `undefined` | `boolean` | Show options to show and hide the Blockquote         |
+| light      | `None`      | `boolean` | no content                                           |
+| code       | `None`      | `boolean` | Show content formated as code                        |
+| innerHtml  | `undefined` | `string`  | Display content as `dangerouslySetInnerHTML` content |

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

@@ -0,0 +1,161 @@
+import React from 'react';
+import {SubNavigation, SubNavigationHeader,SubNavigationTitle,
+    SubNavigationLink, SubNavigationFilter,SubNavigationContent,
+    SubNavigationList, SubNavigationGroup,SubNavigationItem} from './SubNavigation';
+import {shallow, mount } from 'enzyme';
+
+describe('SubNavigation', () => {
+    describe('renders subnavigation as expected', ()=>{
+        const mainWrapper = shallow(<SubNavigation>content</SubNavigation>)
+
+        it('renders children',()=>{
+            expect(mainWrapper.props().children).toEqual('content');
+        })
+    })
+
+    describe('renders subnavigationItem as expected', ()=>{
+        const itemWrapper = shallow(<SubNavigationItem className="some-class">contentItem</SubNavigationItem>)
+
+        it('has classes as expected ',()=>{
+            expect(itemWrapper.exists('.wfp--sub-navigation__item')).toEqual(true);
+        })
+
+        it('renders children',()=>{
+            expect(itemWrapper.props().children).toEqual('contentItem');
+        })
+
+        it('should allow for custom classes to be applied',()=>{
+            expect(itemWrapper.hasClass('some-class')).toEqual(true);
+        })  
+    })
+
+    describe('renders subnavigationHeader as expected', ()=>{
+        const headerWrapper = shallow(<SubNavigationHeader className="some-class">NavHeader</SubNavigationHeader>)
+
+        it('has classes as expected ',()=>{
+            expect(headerWrapper.exists('.wfp--sub-navigation__header')).toEqual(true);
+        })
+
+        it('renders children',()=>{
+            expect(headerWrapper.props().children).toEqual('NavHeader');
+        })
+
+        it('should allow for custom classes to be applied',()=>{
+            expect(headerWrapper.hasClass('some-class')).toEqual(true);
+        })  
+    })
+
+    describe('renders subnavigationFilter as expected', ()=>{
+        const filterWrapper = shallow(<SubNavigationFilter className="some-class">Navfilter</SubNavigationFilter>)
+
+        it('has classes as expected ',()=>{
+            expect(filterWrapper.exists('.wfp--sub-navigation__filter')).toEqual(true);
+        })
+
+        it('renders children',()=>{
+            expect(filterWrapper.props().children).toEqual('Navfilter');
+        })
+
+        it('should allow for custom classes to be applied',()=>{
+            expect(filterWrapper.hasClass('some-class')).toEqual(true);
+        })  
+    })
+
+
+    describe('renders SubNavigationList as expected', ()=>{
+        const ListWrapper = shallow(<SubNavigationList className="some-class">NavList</SubNavigationList>)
+
+        it('has classes as expected ',()=>{
+            expect(ListWrapper.exists('.wfp--sub-navigation__list')).toEqual(true);
+        })
+
+        it('renders children',()=>{
+            expect(ListWrapper.props().children).toEqual('NavList');
+        })
+
+        it('should allow for custom classes to be applied',()=>{
+            expect(ListWrapper.hasClass('some-class')).toEqual(true);
+        })  
+    })
+    
+
+    describe('renders SubNavigationContent as expected', ()=>{
+        const contentWrapper = shallow(<SubNavigationContent className="some-class">NavContent</SubNavigationContent>)
+
+        it('has classes as expected ',()=>{
+            expect(contentWrapper.exists('.wfp--sub-navigation__content')).toEqual(true);
+        })
+
+        it('renders children',()=>{
+            expect(contentWrapper.props().children).toEqual('NavContent');
+        })
+
+        it('should allow for custom classes to be applied',()=>{
+            expect(contentWrapper.hasClass('some-class')).toEqual(true);
+        })  
+    })
+
+    describe('renders SubNavigationTitle as expected', ()=>{
+        const titleWrapper = shallow(<SubNavigationTitle className="some-class">Navtitle</SubNavigationTitle>)
+
+        it('has classes as expected ',()=>{
+            expect(titleWrapper.exists('.wfp--sub-navigation__title')).toEqual(true);
+        })
+
+        it('renders children',()=>{
+            expect(titleWrapper.props().children).toEqual('Navtitle');
+        })
+
+        it('should allow for custom classes to be applied',()=>{
+            expect(titleWrapper.hasClass('some-class')).toEqual(true);
+        })  
+    })
+
+    describe('renders SubNavigationLink as expected', ()=>{
+        const linkWrapper = shallow(<SubNavigationLink className="some-class">NavLink</SubNavigationLink>)
+
+        it('has classes as expected ',()=>{
+            expect(linkWrapper.exists('.wfp--sub-navigation__link')).toEqual(true);
+        })
+
+        it('renders children',()=>{
+            expect(linkWrapper.props().children).toEqual('NavLink');
+        })
+
+        it('should allow for custom classes to be applied',()=>{
+            expect(linkWrapper.hasClass('some-class')).toEqual(true);
+        })  
+    })
+
+    describe('renders SubNavigationGroup as expected', ()=>{
+        const groupWrapper = mount(<SubNavigationGroup columns={3} className="some-class" title="Group title">NavGroup</SubNavigationGroup>)
+
+        it('has classes as expected ',()=>{
+            expect(groupWrapper.exists('.wfp--sub-navigation__group')).toEqual(true);
+        })
+
+        it('should allow for custom classes to be applied',()=>{
+            expect(groupWrapper.hasClass('some-class')).toEqual(true);
+        }) 
+
+        it('renders children',()=>{
+            expect(groupWrapper.props().children).toEqual('NavGroup');
+        })
+
+        it('renders title prop as expected',()=>{
+            expect(groupWrapper.props().title).toEqual('Group title');
+        })
+
+        it('renders children',()=>{
+            expect(groupWrapper.props().columns).toEqual(3);
+        })
+
+        it('has columns props classes ',()=>{
+            expect(groupWrapper.exists('.wfp--sub-navigation__group--columns')).toEqual(true);
+        }) 
+
+        
+    })
+
+
+});