@progressiveui/react 1.22.0

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import ContentSwitcher from '.';
+import Switch from '../Switch';
+import { mount, shallow } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+
+describe('ContentSwitcher', () => {
+  describe('component initial rendering', () => {
+    const wrapper = shallow(
+      <ContentSwitcher onChange={() => {}} className="extra-class">
+        <Switch kind="anchor" text="one" />
+        <Switch kind="anchor" text="two" />
+      </ContentSwitcher>
+    );
+
+    const children = wrapper.find(Switch);
+
+    it('should have the correct class', () => {
+      expect(wrapper.hasClass('wfp--content-switcher')).toEqual(true);
+    });
+
+    it('should render children as expected', () => {
+      expect(children.length).toEqual(2);
+    });
+
+    it('should default "selected" property to true on first child', () => {
+      expect(children.first().props().selected).toEqual(true);
+      expect(children.last().props().selected).toEqual(false);
+    });
+
+    it('should apply extra classes passed to it', () => {
+      expect(wrapper.hasClass('extra-class')).toEqual(true);
+    });
+  });
+
+  describe('Allow initial state to draw from props', () => {
+    const wrapper = shallow(
+      <ContentSwitcher
+        selectedIndex={1}
+        onChange={() => {}}
+        className="extra-class">
+        <Switch kind="anchor" text="one" />
+        <Switch kind="anchor" text="two" />
+      </ContentSwitcher>
+    );
+
+    const children = wrapper.find(Switch);
+
+    it('Should apply the selected property on the selected child', () => {
+      expect(children.first().props().selected).toEqual(false);
+      expect(children.last().props().selected).toEqual(true);
+    });
+  });
+
+  describe('when child component onClick is invoked', () => {
+    const onChange = jest.fn();
+    const mockData = {
+      index: 1,
+    };
+
+    const wrapper = mount(
+      <ContentSwitcher onChange={onChange}>
+        <Switch kind="anchor" text="one" />
+        <Switch kind="anchor" text="two" />
+      </ContentSwitcher>
+    );
+
+    const children = wrapper.find(Switch);
+    act(() => {
+      children.first().props().onClick(mockData);
+    });
+
+    it('should invoke onChange', () => {
+      expect(onChange).toBeCalledWith(mockData);
+    });
+
+    it('should set selected to true on the correct child', () => {
+      wrapper.update();
+      const firstChild = wrapper.find(Switch).first();
+      const secondChild = wrapper.find(Switch).last();
+      expect(firstChild.props().selected).toEqual(false);
+      expect(secondChild.props().selected).toEqual(true);
+    });
+  });
+
+  describe('when child component onKeyDown is invoked', () => {
+    const onChange = jest.fn();
+    const mockData = {
+      index: 1,
+    };
+
+    const wrapper = mount(
+      <ContentSwitcher onChange={onChange}>
+        <Switch kind="anchor" text="one" />
+        <Switch kind="anchor" text="two" />
+      </ContentSwitcher>
+    );
+
+    const children = wrapper.find(Switch);
+
+    act(() => {
+      children.first().props().onKeyDown(mockData);
+    });
+
+    it('should invoke onChange', () => {
+      expect(onChange).toBeCalledWith(mockData);
+    });
+
+    it('should set selected to true on the correct child', () => {
+      wrapper.update();
+      const firstChild = wrapper.find(Switch).first();
+      const secondChild = wrapper.find(Switch).last();
+      expect(firstChild.props().selected).toEqual(false);
+      expect(secondChild.props().selected).toEqual(true);
+    });
+  });
+});

package/src/components/ContentSwitcher/ContentSwitcher.hbs

@@ -0,0 +1,5 @@
+<div class="wfp--content-switcher">
+  <a href="" class="wfp--content-switcher-btn wfp--content-switcher--selected">First section</a>
+  <a href="" class="wfp--content-switcher-btn">Second section</a>
+  <a href="" class="wfp--content-switcher-btn">Third section</a>
+</div>

package/src/components/ContentSwitcher/ContentSwitcher.stories.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import ContentSwitcher from "./ContentSwitcher";
+import markdown from "./README.mdx";
+import Switch from "../../../othersrc/Switch";
+import { Add16, AddCircle } from "@progressiveui/icons-react";
+
+export default {
+  title: "Components/Content Related/ContentSwitcher",
+  component: ContentSwitcher,
+  subcomponents: { Switch },
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const ContentSwitcherDefault: Story = {
+  render: (args) => (
+    <ContentSwitcher {...args}>
+      <Switch name="one" text="First section" kind="button" />
+      <Switch name="two" text="Second section" kind="button" />
+      <Switch name="three" text="Third section" kind="button" />
+    </ContentSwitcher>
+  ),
+  args: {
+    children: "Button",
+  },
+  parameters: {},
+};
+
+export const ButtonSwitch = (args) => {
+  const handleChange = () => {
+    // console.log('handle any onChange here');
+  };
+  return (
+    <ContentSwitcher {...args} onChange={handleChange}>
+      <Switch kind="button" name="one" text="First section" />
+      <Switch kind="button" name="two" text="Second section" />
+      <Switch kind="button" name="three" text="Third section" />
+    </ContentSwitcher>
+  );
+};
+
+ButtonSwitch.args = {
+  children: "ContentSwitcher",
+};
+
+const description = `
+
+#### Default types of switch state
+
+| kind   |  Description  |
+|----------|-------------|
+| \`anchor\` | (Default) |
+| \`button\` | experimental   |
+`;
+
+ButtonSwitch.story = {
+  parameters: {
+    docs: {
+      storyDescription: description,
+    },
+  },
+};
+
+/*
+export const withIcon = (args) => {
+  const handleChange = () => {
+    // console.log('handle any onChange here');
+  };
+  return (
+    <ContentSwitcher {...args} onChange={handleChange}>
+      <Switch kind="button" name="one" text="First section" icon={AddCircle} />
+      <Switch kind="button" name="two" text="Second section" icon={AddCircle} />
+      <Switch kind="button" name="three" text="Third section" icon={AddCircle} />
+    </ContentSwitcher>
+  );
+};
+
+withIcon.args = {
+  children: 'ContentSwitcher',
+};
+
+const desc = `Specify icon to be used in the switch element. \`icon\` property on \`<switch/>\` expects an element `;
+
+withIcon.story = {
+  parameters: {
+    docs: {
+      storyDescription: desc,
+    },
+  },
+};
+*/

package/src/components/ContentSwitcher/ContentSwitcher.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import type { PropsWithChildren } from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+
+/** ContentSwitcher manipulates the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen. Only one section can be shown at a time.
+ */
+
+type ContentSwitcherProps = PropsWithChildren<{
+  className?: string;
+  selectedIndex?: number;
+  small?: boolean;
+  onChange: (data?: object) => void;
+}>;
+
+const ContentSwitcher: React.FC<ContentSwitcherProps> = ({
+  children,
+  className,
+  selectedIndex,
+  small,
+  onChange,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const [selectedIdx, setSelectedIndex] = useState(selectedIndex);
+
+  const getChildren = (children) => {
+    return React.Children.map(children, (child, index) =>
+      React.cloneElement(child, {
+        index,
+        onClick: handleChildChange,
+        onKeyDown: handleChildChange,
+        selected: index === selectedIdx,
+      })
+    );
+  };
+
+  const handleChildChange = (data) => {
+    const { index } = data;
+    if (selectedIdx !== index) {
+      setSelectedIndex(index);
+      onChange(data);
+    }
+  };
+
+  const classes = classNames(`${prefix}--content-switcher`, className, {
+    [`${prefix}--content-switcher--sm`]: small,
+  });
+
+  return (
+    <div {...other} className={classes}>
+      {getChildren(children)}
+    </div>
+  );
+};
+
+export default ContentSwitcher;

package/src/components/ContentSwitcher/README.mdx

@@ -0,0 +1,31 @@
+### Text
+
+Be concise and specific. Titles have a max of two words.
+
+### Default selection
+
+Based on usage, there should be a default selection. The default selection is always the first option in a switcher.
+
+ContentSwitcher is forked from [Carbon Components](https://www.carbondesignsystem.com/components/content-switcher/code)
+
+### Usage with react
+
+```js
+import { ContentSwitcher, Switch } from "@progressiveui/react";
+import { iconAdd } from "@progressiveui/icons-react";
+```
+
+```js
+<ContentSwitcher onChange={onChangeAction}>
+  <Switch
+    name="one"
+    text="First section"
+    onClick={onClickAction}
+    kind="anchor"
+    href="#"
+    icon={<Icon icon={iconAdd} />}
+  />
+  <Switch name="two" text="Second section" />
+  <Switch name="three" text="Third section" />
+</ContentSwitcher>
+```

package/src/components/ContentSwitcher/index.ts

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

package/src/components/ContextMenu/ContextMenu.stories.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import markdown from "./README.mdx";
+import { ContextMenu, ContextMenuGroup, ContextMenuItem } from "./ContextMenu";
+import Link from "../Link";
+
+export default {
+  title: "Components/UI Elements/ContextMenu",
+  component: Link,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const Regular = (args) => (
+  <ContextMenu
+    {...args}
+    content={
+      <>
+        <ContextMenuGroup>
+          <ContextMenuItem>Itemgroup 1</ContextMenuItem>
+          <ContextMenuItem>Itemgroup 2</ContextMenuItem>
+          <ContextMenuItem>Itemgroup 3</ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuItem>Item 1</ContextMenuItem>
+        <ContextMenuItem>Item 2</ContextMenuItem>
+        <ContextMenuItem>Item 3</ContextMenuItem>
+      </>
+    }
+  >
+    <span>Open context menu</span>
+  </ContextMenu>
+);
+
+Regular.args = { children: "WFP Homepage", href: "https://www.wfp.org" };
+
+const sourcecode = `
+import { ContextMenu, ContextMenuGroup, ContextMenuItem } from "@progressiveui/react";
+
+<ContextMenu
+  content={
+    <>
+    <ContextMenuGroup>
+      <ContextMenuItem>Itemgroup 1</ContextMenuItem>
+      <ContextMenuItem>Itemgroup 2</ContextMenuItem>
+      <ContextMenuItem>Itemgroup 3</ContextMenuItem>
+    </ContextMenuGroup>
+    <ContextMenuItem>Item 1</ContextMenuItem>
+    <ContextMenuItem>Item 2</ContextMenuItem>
+    <ContextMenuItem>Item 3</ContextMenuItem>
+    </>
+    }
+  href="https://www.wfp.org"
+>
+  <span>
+    Open context menu
+  </span>
+</ContextMenu>
+`;
+Regular.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: sourcecode,
+      },
+    },
+  },
+};
+
+export const States = (args) => (
+  <ContextMenu
+    {...args}
+    content={({ setVisibility, visibilityChange }) => (
+      <>
+        <ContextMenuGroup>
+          <ContextMenuItem>Itemgroup 1</ContextMenuItem>
+          <ContextMenuItem>Itemgroup 2</ContextMenuItem>
+          <ContextMenuItem>Itemgroup 3</ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuItem
+          onClick={() => {
+            console.log("hide", setVisibility);
+            setVisibility(true);
+            visibilityChange(true);
+          }}
+        >
+          Hide ContextMenu
+        </ContextMenuItem>
+        <ContextMenuItem>Item 2</ContextMenuItem>
+        <ContextMenuItem>Item 3</ContextMenuItem>
+      </>
+    )}
+  >
+    <span>Open context menu</span>
+  </ContextMenu>
+);
+
+States.args = { ...Regular.args, style: { marginRight: "1rem" } };
+
+const statesourcecode = `
+import { ContextMenu, ContextMenuGroup, ContextMenuItem } from "@progressiveui/react";
+
+<ContextMenu
+    content={({ setVisibility, visibilityChange }) => (
+      <>
+        <ContextMenuGroup>
+          <ContextMenuItem>Itemgroup 1</ContextMenuItem>
+          <ContextMenuItem>Itemgroup 2</ContextMenuItem>
+          <ContextMenuItem>Itemgroup 3</ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuItem
+          onClick={() => {
+            console.log('hide', setVisibility);
+            setVisibility(true);
+            visibilityChange(true);
+          }}>
+          Hide ContextMenu
+        </ContextMenuItem>
+        <ContextMenuItem>Item 2</ContextMenuItem>
+        <ContextMenuItem>Item 3</ContextMenuItem>
+      </>
+    )}>
+    <span>Open context menu</span>
+  </ContextMenu>
+`;
+
+States.story = {
+  parameters: {
+    docs: {
+      storyDescription: `Content as function`,
+      source: {
+        code: statesourcecode,
+      },
+    },
+  },
+};

package/src/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import Tooltip from '../Tooltip';
+import type { PropsWithChildren } from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+
+/** Context menu are used as navigational elements. They should contain commands that apply to the target object. */
+type ContextMenuProps = PropsWithChildren<{
+  /**
+   * Provide content to display when contextMenu is clicked
+   */
+  content?: React.ReactNode;
+  /**
+   * Provide a href prop as an alternative to onClick
+   */
+  href?: string;
+  /**
+   * Inline links are used within a sentence or paragraph and are styled with an underline. They should not be paired with an icon.
+   */
+  inline?: boolean;
+  /**
+   * Provide a custom className
+   */
+  className?: string;
+}>;
+
+const ContextMenu: React.FC<ContextMenuProps> = ({
+  children,
+  className,
+  content,
+  /* href,
+  inline,
+  trigger = 'click',
+  ...other*/
+}) => {
+  const { prefix } = useSettings();
+  const classes = classNames(
+    {
+      [`${prefix}--context-menu`]: true,
+    },
+    className
+  );
+
+  return (
+    <Tooltip className={classes} content={content} noPadding trigger="click">
+      {children}
+    </Tooltip>
+  );
+};
+
+type ContextMenuGroupProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+const ContextMenuGroup: React.FC<ContextMenuGroupProps> = ({
+  className,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const classes = classNames(
+    {
+      [`${prefix}--context-menu__group`]: true,
+    },
+    className
+  );
+
+  return <div className={classes} {...other} />;
+};
+
+interface ContextMenuItemProps extends React.ComponentPropsWithRef<'div'> {
+  className?: string;
+}
+
+const ContextMenuItem: React.FC<ContextMenuItemProps> = ({
+  className,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const classes = classNames(
+    {
+      [`${prefix}--context-menu__item`]: true,
+    },
+    className
+  );
+
+  return <div className={classes} {...other} />;
+};
+
+export { ContextMenu, ContextMenuItem, ContextMenuGroup };

package/src/components/ContextMenu/README.mdx

@@ -0,0 +1,13 @@
+Use the context menu component when additional options are available to the user but there is a space constraint.
+
+### Related
+
+[Tooltip](?path=/docs/components-tooltip--tooltip-regular)
+
+### Reference
+
+[About context menus](https://medium.com/@hagan.rivers/context-menu-ux-design-75e3093eb127)
+
+[Carbon Design System Usage for Overflow menus](https://www.carbondesignsystem.com/components/overflow-menu/accessibility/)
+
+[Contextual Menus: Delivering Relevant Tools for Tasks by Nielsen Norman Group](https://www.nngroup.com/articles/contextual-menus/)

package/src/components/ContextMenu/index.ts

@@ -0,0 +1 @@
+export { ContextMenu, ContextMenuGroup, ContextMenuItem } from './ContextMenu';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import Link from '../Link';
+import { shallow } from 'enzyme';
+
+describe('Credits', () => {
+  describe('Renders as expected', () => {
+    const link = shallow(
+      <Link href="www.google.com" className="some-class">
+        A simple link
+      </Link>
+    );
+    it('should use the appropriate link class', () => {
+      expect(link.hasClass('wfp--link')).toEqual(true);
+    });
+    it('should inherit the href property', () => {
+      expect(link.props().href).toEqual('www.google.com');
+    });
+    it('should include child content', () => {
+      expect(link.text()).toEqual('A simple link');
+    });
+    it('should all for custom classes to be applied', () => {
+      expect(link.hasClass('some-class')).toEqual(true);
+    });
+  });
+});

package/src/components/Credits/Credits.hbs

@@ -0,0 +1,4 @@
+<div class="wfp--credits">
+  <div class="wfp--credits__info">© Rein Skullerud</div>
+  <img alt="Default illustration" src="http://www1.wfp.org/sites/default/files/images/hp_yem_20170717_wfp-reem_nada_0109_3.jpg" style="width: 700px; height: auto;">
+</div>

package/src/components/Credits/Credits.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Credits from ".";
+import markdown from "./README.mdx";
+
+export default {
+  title: "Components/UI Elements/Credits",
+  component: Credits,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+  /*argTypes: {
+      children: { control: 'text' },
+    },*/
+};
+
+export const CreditsDefault: Story = {
+  render: (args) => (
+    <Credits {...args}>
+      <img
+        alt="Default illustration"
+        src="http://www1.wfp.org/sites/default/files/images/hp_yem_20170717_wfp-reem_nada_0109_3.jpg"
+      />
+    </Credits>
+  ),
+  args: {
+    info: "Photo: WFP/ Rein Skullerud",
+  },
+};

package/src/components/Credits/Credits.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+
+interface CreditsProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+ Specifiy the info content
+*/
+  info?: React.ReactNode;
+}
+
+/** Credits are mostly used when a photo need a source attribution. */
+const Credits: React.FC<CreditsProps> = ({
+  children,
+  className,
+  info,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const classes = classNames(`${prefix}--credits`, className);
+  return (
+    <div className={classes} {...other}>
+      <div className={`${prefix}--credits__info`}>{info}</div>
+      {children}
+    </div>
+  );
+};
+
+Credits.displayName = "Credits";
+
+export default Credits;

package/src/components/Credits/README.mdx

@@ -0,0 +1 @@
+

package/src/components/Credits/index.ts

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