@progressiveui/react 2.0.2 → 2.0.4

package/src/components/StepNavigationItem/StepNavigationItem.tsx

@@ -1,155 +0,0 @@
-/* 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

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

package/src/components/Story/README.mdx

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

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

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

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

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

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

package/src/components/SubNavigation/README.mdx

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

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