@progressiveui/react 1.22.0

package/src/components/MdxComponents/markdown.mdx

@@ -0,0 +1,109 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Mdx"
+  subtitle="subtitle"
+  parameters={{
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+# H1
+
+## H2
+
+### H3
+
+**bold text**
+_italicized text_
+
+> blockquote
+
+> Blockquote with title
+>
+> Content of Blockquote
+
+Ordered List
+
+1. First item
+2. Second item
+3. Third item
+   Unordered List
+
+- First item
+- Second item
+- Third item
+  Code
+  `code`
+  Horizontal Rule
+
+* ✓ Checkmark list item
+
+- ✗ Cross list item
+
+---
+
+Link
+[title](https://www.example.com)
+Image
+![alt text](https://www.wfp.org/sites/default/files/images/1%2A0SvxFtof7R7NRUbDl7iZsA_0_0.png)
+
+This is followed by a table.
+
+| Tables        |      Are      |  Cool |
+| ------------- | :-----------: | ----: |
+| col 3 is      | right-aligned | $1600 |
+| col 2 is      |   centered    |   $12 |
+| zebra stripes |   are neat    |    $1 |
+
+And another paragraph.
+
+Three or more...
+
+---
+
+Hyphens
+
+---
+
+Asterisks
+
+---
+
+Underscores
+
+```
+var s = "JavaScript syntax highlighting";
+alert(s);
+```
+
+Inline `code` has `back-ticks around` it.
+
+1. First ordered list item
+2. Another item
+   ⋅⋅\* Unordered sub-list.
+3. Actual numbers don't matter, just that it's a number
+   ⋅⋅1. Ordered sub-list
+4. And another item.
+
+⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
+
+⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
+⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
+⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
+
+- Unordered list can use asterisks
+
+* Or minuses
+
+- Or pluses
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~

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

@@ -0,0 +1,206 @@
+import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import Modal from './Modal';
+import ModalWrapper from '../ModalWrapper';
+import { shallow, mount } from 'enzyme';
+// import { render } from 'react-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+
+describe('Modal', () => {
+  let mockProps = {};
+
+  beforeEach(() => {
+    mockProps = {
+      id: 'modal',
+      "data-testid": 'modal',
+      modalHeading: 'Transactional Modal',
+      modalLabel: 'Test Modal Label',
+    };
+  });
+  describe('Renders as expected', () => {
+    afterEach(cleanup);
+
+    it('renders text as expected', () => {
+      render(<Modal {...mockProps}>Modal content</Modal>)
+      expect(screen.getByText('Transactional Modal')).toBeInTheDocument();
+      expect(screen.getByText('Test Modal Label')).toBeInTheDocument();
+      expect(screen.getByText('Modal content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Renders as expected', () => {
+    const wrapper = shallow(
+      <Modal
+        className="extra-class"
+        secondaryButtonText="Secondary"
+        inPortal={false}
+      />
+    );
+    const mounted = mount(
+      <Modal
+        className="extra-class"
+        secondaryButtonText="Secondary"
+        inPortal={false}
+      />
+    );
+
+    it('should be a passive modal when passiveModal is passed', () => {
+      wrapper.setProps({ passiveModal: true });
+      expect(wrapper.hasClass('wfp--modal--tall')).toEqual(false);
+    });
+
+    it('should set id if one is passed via props', () => {
+      const modal = shallow(<Modal id="modal-1" inPortal={false} />);
+      expect(modal.props().id).toEqual('modal-1');
+    });
+
+    it('has the expected default iconDescription', () => {
+      expect(wrapper.props().iconDescription).toEqual('close the modal');
+    });
+
+    it('adds new iconDescription when passed via props', () => {
+      mounted.setProps({ iconDescription: 'new description' });
+      expect(mounted.props().iconDescription).toEqual('new description');
+    });
+
+    it('enables primary button by default', () => {
+      const primaryButton = mounted
+        .find('.wfp--modal__buttons-container .wfp--btn')
+        .at(0);
+      expect(primaryButton.prop('disabled')).toEqual(false);
+    });
+
+    it('disables primary button when diablePrimaryButton prop is passed', () => {
+      mounted.setProps({ primaryButtonDisabled: true });
+      const primaryButton = mounted
+        .find('.wfp--modal__buttons-container .wfp--btn')
+        .at(1);
+      expect(primaryButton.props().disabled).toEqual(true);
+    });
+  });
+
+  describe('Adds props as expected to the right children', () => {
+    afterEach(cleanup);
+
+    it('should set label if one is passed via props', () => {
+      render(<Modal modalLabel="modal-1" />);
+      expect(screen.getByText('modal-1')).toBeInTheDocument();
+      expect(screen.getByText('modal-1')).toHaveClass('wfp--modal-header__label');
+    });
+
+    it('should set modal heading if one is passed via props', () => {
+      render(<Modal modalHeading="modal-head" />);
+      expect(screen.getByText('modal-head')).toBeInTheDocument();
+      expect(screen.getByText('modal-head')).toHaveClass('wfp--modal-header__heading');
+    });
+
+    it('should set button text if one is passed via props', () => {
+      render(
+        <Modal primaryButtonText="Submit" />
+      );
+      expect(screen.getByText('Submit')).toBeInTheDocument();
+  });
+});
+
+  describe('events', () => {
+    it('should not set visible class when state is closed', () => {
+      render(
+        <Modal {...mockProps} open={false}>
+          <p className="wfp--modal-content__text">Text</p>
+        </Modal>
+      );
+      expect(screen.getByTestId('modal')).not.toHaveClass('is-visible');
+    });
+
+    it('should set expected class when state is open', () => {
+      render(
+        <Modal {...mockProps} open={true}>
+          <p className="wfp--modal-content__text">Text</p>
+        </Modal>
+      );
+      expect(screen.getByTestId('modal')).toHaveClass('is-visible');
+    });
+
+
+
+    it('should handle close keyDown events', () => {
+      const onRequestClose = jest.fn();
+      const wrapper = mount(<Modal onRequestClose={onRequestClose} />);
+      wrapper.simulate('keyDown', { which: 26 });
+      expect(onRequestClose).not.toBeCalled();
+      wrapper.simulate('keyDown', { which: 27 });
+      expect(onRequestClose).toBeCalled();
+    });
+
+    it('should handle submit keyDown events with shouldSubmitOnEnter enabled', () => {
+      const onRequestSubmit = jest.fn();
+      const wrapper = mount(
+        <Modal onRequestSubmit={onRequestSubmit} shouldSubmitOnEnter />
+      );
+      wrapper.simulate('keyDown', { which: 14 });
+      expect(onRequestSubmit).not.toBeCalled();
+      wrapper.simulate('keyDown', { which: 13 });
+      expect(onRequestSubmit).toBeCalled();
+    });
+
+    it('should not handle submit keyDown events with shouldSubmitOnEnter not enabled', () => {
+      const onRequestSubmit = jest.fn();
+      const wrapper = mount(<Modal onRequestSubmit={onRequestSubmit} />);
+      wrapper.simulate('keyDown', { which: 14 });
+      expect(onRequestSubmit).not.toBeCalled();
+      wrapper.simulate('keyDown', { which: 13 });
+      expect(onRequestSubmit).not.toBeCalled();
+    });
+
+    it('should close by default on secondary button click', () => {
+      const onRequestClose = jest.fn();
+      const modal = mount(
+        <Modal
+          secondaryButtonText="Secondary"
+          onRequestClose={onRequestClose}
+        />
+      );
+      const secondaryBtn = modal.find('.wfp--btn--secondary');
+      secondaryBtn.simulate('click');
+      expect(onRequestClose).toBeCalled();
+    });
+
+    it('should handle custom secondary button events', () => {
+      const onSecondarySubmit = jest.fn();
+      const modal = mount(
+        <Modal
+          secondaryButtonText="Secondary"
+          onSecondarySubmit={onSecondarySubmit}
+        />
+      );
+      const secondaryBtn = modal.find('.wfp--btn--secondary');
+      secondaryBtn.simulate('click');
+      expect(onSecondarySubmit).toBeCalled();
+    });
+  });
+});
+describe('Modal Wrapper', () => {
+  describe('Renders as expected', () => {
+    const wrapper = mount(<ModalWrapper />);
+
+    it('should default to primary button', () => {
+      expect(wrapper.find('.wfp--btn--primary').length).toEqual(2);
+    });
+
+    it('should render ghost button when ghost is passed', () => {
+      wrapper.setProps({ triggerButtonKind: 'ghost' });
+      expect(wrapper.find('.wfp--btn--ghost').length).toEqual(1);
+    });
+
+    it('should render danger button when danger is passed', () => {
+      wrapper.setProps({ triggerButtonKind: 'danger' });
+      expect(wrapper.find('.wfp--btn--danger').length).toEqual(1);
+    });
+
+    it('should render secondary button when secondary is passed', () => {
+      wrapper.setProps({ triggerButtonKind: 'secondary' });
+      expect(wrapper.find('.wfp--btn--secondary').length).toEqual(2);
+    });
+  });
+});
+

package/src/components/Modal/Modal.hbs

@@ -0,0 +1,26 @@
+<div class="wfp--modal wfp--modal-tall is-visible some-class" id="some-id" role="presentation" tabindex="-1">
+  <div role="dialog" class="wfp--modal-container">
+    <div class="wfp--modal-header">
+      <h4 class="wfp--modal-header__label">Optional label</h4>
+      <h2 class="wfp--modal-header__heading">Modal heading</h2>
+      <button class="wfp--modal-close" type="button">
+        <img src="svg/close.svg" class="wfp--modal-close__icon" name="close" title="close the modal" />
+      </button>
+    </div>
+    <div class="wfp--modal-content">
+      <p class="wfp--modal-content__text">
+        Please see ModalWrapper for more examples and demo of the functionality.
+      </p>
+    </div>
+    <div class="wfp--modal-footer">
+      <div class="wfp--modal__buttons-container">
+        <button tabindex="0" class="wfp--btn wfp--btn--secondary" type="button">
+          Secondary Button
+        </button>
+        <button tabindex="0" class="wfp--btn wfp--btn--primary" type="button">
+          Primary Button
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import Modal from ".";
+
+export default {
+  title: "Components/Content Related/Modal",
+  component: Modal,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+  },
+};
+
+export const ModalDefault: Story = {
+  render: (args) => {
+    const [isOpen, setOpen] = useState(args.open);
+
+    const handleModalClose = () => {
+      setOpen(!isOpen);
+    };
+
+    return (
+      <>
+        <Modal {...args} onRequestClose={handleModalClose} open={isOpen}>
+          {args.children}
+        </Modal>
+        <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      </>
+    );
+  },
+  args: {
+    children: "Text",
+    modalLabel: "Modal label",
+    modalHeading: "Modal heading",
+    modalText: "Modal text",
+  },
+};