@progressiveui/react 1.22.0

package/src/components/Notification/NotificationIcon.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import useSettings from "../../hooks/useSettings";
+
+import {
+  Error,
+  CheckmarkCircle,
+  WarningSolid,
+  InfoCircle,
+} from "@progressiveui/icons-react";
+
+const iconTypes = {
+  error: Error,
+  success: CheckmarkCircle,
+  warning: WarningSolid,
+  info: InfoCircle,
+};
+
+interface NotificationIconProps {
+  iconDescription?: string;
+  kind: "error" | "info" | "success" | "warning" | "warning-alt";
+  notificationType: "toast" | "inline";
+}
+
+export const NotificationIcon: React.FC<NotificationIconProps> = ({
+  iconDescription,
+  kind = "info",
+  notificationType = "toast",
+}) => {
+  const { prefix } = useSettings();
+  const IconForKind = kind ? iconTypes[kind] : undefined;
+  if (!IconForKind) {
+    return null;
+  }
+  return (
+    <IconForKind
+      className={`${prefix}--${notificationType}-notification__icon`}
+    >
+      <title>{iconDescription}</title>
+    </IconForKind>
+  );
+};

package/src/components/Notification/NotificationTextDetails.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import useSettings from "../../hooks/useSettings";
+
+interface NotificationTextDetailsProps {
+  /*extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> */ title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  caption?: React.ReactNode;
+  notificationType?: "toast" | "inline";
+  children?: React.ReactNode;
+}
+
+export const NotificationTextDetails: React.FC<
+  NotificationTextDetailsProps
+> = ({
+  title,
+  subtitle,
+  caption,
+  notificationType = "toast",
+  children,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+
+  if (notificationType === "toast") {
+    return (
+      <div {...other} className={`${prefix}--toast-notification__details`}>
+        {title && (
+          <h3 className={`${prefix}--toast-notification__title`}>{title}</h3>
+        )}
+        <div className={`${prefix}--toast-notification__subtitle`}>
+          {subtitle}
+        </div>
+        <div className={`${prefix}--toast-notification__caption`}>
+          {caption}
+        </div>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div {...other} className={`${prefix}--inline-notification__text-wrapper`}>
+      {title && (
+        <p className={`${prefix}--inline-notification__title`}>{title}</p>
+      )}
+      <div className={`${prefix}--inline-notification__subtitle`}>
+        {children || subtitle}
+      </div>
+    </div>
+  );
+};

package/src/components/Notification/README.mdx

@@ -0,0 +1,26 @@
+## Usage
+
+Use notifications to inform users of updates or changes to system status. Communicating with users and providing immediate feedback are important for building trust. While notifications are an effective method of communicating with users, they are disruptive and should be used sparingly.
+
+## Content
+
+Notifications provide limited space for content, and therefore the content must be short and concise. A user should be able to quickly scan the notification, be apprised of the situation, and know what to do next.
+
+### Main elements
+
+#### Title
+
+- The title should be short and descriptive, explaining the most important piece of information.
+  *When possible, communicate the main message using just the title.
+  *Use a period only if the title is a full sentence.
+
+#### Body content
+
+- Be concise and avoid repeating or paraphrasing the title.
+- Limit content to one or two short sentences.
+- Explain how to resolve the issue by including any troubleshooting actions or next steps. You can include links within the notification body that redirect the user to next steps.
+
+#### Action
+
+- Keep labels concise and clearly indicate the action the user can take.
+- Limit action labels to one or two words.

package/src/components/Notification/ToastNotification.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { NotificationButton } from "./NotificationButton";
+import { NotificationIcon } from "./NotificationIcon";
+import { NotificationTextDetails } from "./NotificationTextDetails";
+import useSettings from "../../hooks/useSettings";
+import classNames from "classnames";
+import { CalloutProps } from "./Callout";
+
+interface ToastNotificationProps extends CalloutProps {
+  /**
+   * Specify the timeout in milliseconds
+   */
+  timeout?: number;
+}
+
+export const ToastNotification: React.FC<ToastNotificationProps> = ({
+  role = "alert",
+  notificationType = "toast",
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onClose = () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onCloseButtonClick = () => {},
+  iconDescription = "closes notification",
+  statusIconDescription,
+  className,
+  //caption = 'provide a caption',
+  subtitle,
+  title = "provide a title",
+  kind = "error",
+  lowContrast = true,
+  hideCloseButton = false,
+  children,
+  timeout = 0,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const [isOpen, setIsOpen] = React.useState(true);
+  const containerClassName = classNames(className, {
+    [`${prefix}--toast-notification`]: true,
+    [`${prefix}--toast-notification--low-contrast`]: lowContrast,
+    [`${prefix}--toast-notification--${kind}`]: kind,
+  });
+
+  const handleClose = (evt) => {
+    if (!onClose || onClose(evt) !== false) {
+      setIsOpen(false);
+    }
+  };
+
+  function handleCloseButtonClick(event) {
+    onCloseButtonClick(event);
+    handleClose(event);
+  }
+
+  const savedOnClose = React.useRef(onClose);
+
+  React.useEffect(() => {
+    savedOnClose.current = onClose;
+  });
+
+  React.useEffect(() => {
+    if (!timeout) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout((event) => {
+      setIsOpen(false);
+      if (savedOnClose.current) {
+        savedOnClose.current(event);
+      }
+    }, timeout);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [timeout]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      {...other}
+      role={role}
+      /* kind={kind} */ className={containerClassName}
+    >
+      <NotificationIcon
+        kind={kind}
+        iconDescription={statusIconDescription || `${kind} icon`}
+        notificationType={notificationType}
+      />
+      <NotificationTextDetails
+        title={title}
+        subtitle={subtitle}
+        //caption={caption}
+        notificationType={notificationType}
+      >
+        {children}
+      </NotificationTextDetails>
+      {!hideCloseButton && (
+        <NotificationButton
+          iconDescription={iconDescription}
+          notificationType={notificationType}
+          onClick={handleCloseButtonClick}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/Notification/a11yIconWarningSolid.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const a11yWarningIcon = (prefix, notificationType) => (
+  <svg
+    className={`${prefix}--${notificationType}-notification__icon`}
+    width="20"
+    height="20"
+    xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <path
+        d="M18.05 15.95L9.925.95a.625.625 0 0 0-1.1 0L.7 15.95a.625.625 0 0 0 0 .625.625.625 0 0 0 .55.3H17.5a.625.625 0 0 0 .55-.925z"
+        id="a"
+      />
+      <path
+        d="M.55.006h1.406v5H.55v-5zm.7 8.119a.938.938 0 1 1 0-1.875.938.938 0 0 1 0 1.875z"
+        id="b"
+      />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M18.675 16.575l-8.125-15a.625.625 0 0 0-1.1 0l-8.125 15a.625.625 0 0 0 0 .625.625.625 0 0 0 .55.3h16.25a.625.625 0 0 0 .55-.925z"
+        fill="#FDD13A"
+      />
+      <g>
+        <path
+          d="M9.3 6.881h1.406v5H9.3v-5zM10 15a.938.938 0 1 1 0-1.875A.938.938 0 0 1 10 15z"
+          fill="#171717"
+          fillRule="nonzero"
+        />
+      </g>
+      <path d="M0 0h20v20H0z" />
+    </g>
+  </svg>
+);
+
+export default a11yWarningIcon;

package/src/components/Notification/index.ts

@@ -0,0 +1,7 @@
+export * from './NotificationButton';
+export * from './NotificationActionButton';
+export * from './NotificationTextDetails';
+// export * from './InlineNotification.tsx.legacy';
+export * from './ToastNotification';
+
+export { Callout } from './Callout';

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

@@ -0,0 +1,285 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import NumberInput from '../NumberInput';
+import NumberInputSkeleton from '../NumberInput/NumberInput.Skeleton';
+
+describe('NumberInput', () => {
+  describe('should render as expected', () => {
+    let wrapper;
+    let label;
+    let numberInput;
+    let container;
+    let formItem;
+    let helper;
+
+    beforeEach(() => {
+      wrapper = mount(
+        <NumberInput
+          min={0}
+          max={100}
+          id="test"
+          label="Number Input"
+          className="extra-class"
+          invalidText="invalid text"
+          helperText="testHelper"
+          name="name"
+          disabled={false}
+        />
+      );
+
+      label = wrapper.find('label');
+      numberInput = wrapper.find('input');
+      container = wrapper.find('div.wfp--number');
+      formItem = wrapper.find('.wfp--form-item');
+      helper = wrapper.find('.wfp--form__helper-text');
+    });
+
+    describe('input', () => {
+      it('renders a numberInput', () => {
+        expect(numberInput.length).toEqual(1);
+      });
+
+      it('has the expected classes', () => {
+        expect(container.hasClass('wfp--number')).toEqual(true);
+      });
+
+      it('has renders with form-item wrapper', () => {
+        expect(formItem.hasClass('wfp--form-item')).toEqual(true);
+      });
+
+      it('applies extra classes via className', () => {
+        expect(container.hasClass('extra-class')).toEqual(true);
+      });
+
+      it('should set a min as expected', () => {
+        expect(numberInput.prop('min')).toEqual(0);
+        wrapper.setProps({ min: 10 });
+        expect(wrapper.find('input').prop('min')).toEqual(10);
+      });
+
+      it('should set a max as expected', () => {
+        expect(numberInput.prop('max')).toEqual(100);
+        wrapper.setProps({ max: 10 });
+        expect(wrapper.find('input').prop('max')).toEqual(10);
+      });
+
+      it('should set step as expected', () => {
+        expect(numberInput.prop('step')).toEqual(1);
+        wrapper.setProps({ step: 10 });
+        expect(wrapper.find('input').prop('step')).toEqual(10);
+      });
+
+      it('should set disabled as expected', () => {
+        expect(numberInput.prop('disabled')).toEqual(false);
+        wrapper.setProps({ disabled: true });
+        expect(wrapper.find('input').prop('disabled')).toEqual(true);
+      });
+
+      it('should set invalidText as expected', () => {
+        expect(wrapper.find('.wfp--form-requirement').length).toEqual(0);
+        wrapper.setProps({ invalid: true });
+        const invalidText = wrapper.find('.wfp--form-requirement');
+        expect(invalidText.length).toEqual(1);
+        expect(invalidText.text()).toEqual(' invalid text');
+      });
+      it('should hide label as expected', () => {
+        expect(numberInput.prop('min')).toEqual(0);
+        wrapper.setProps({ hideLabel: true });
+        expect(wrapper.find('label').hasClass('wfp--visually-hidden')).toEqual(
+          true
+        );
+        // expect(wrapper.hasClass('wfp--number--nolabel')).toEqual(true);
+      });
+
+      describe('initial rendering', () => {
+        const getWrapper = (min, max, value) =>
+          mount(
+            <NumberInput
+              min={min}
+              max={max}
+              value={value}
+              id="test"
+              label="Number Input"
+              className="extra-class"
+            />
+          );
+        const getNumberInput = (wrapper) => wrapper.find('input');
+
+        it('should set value as expected when value > min', () => {
+          const wrapper = getWrapper(-1, 100, 0);
+          const numberInput = getNumberInput(wrapper);
+          expect(numberInput.prop('value')).toEqual(0);
+        });
+
+        it('should set value as expected when min === 0 and value > min', () => {
+          const wrapper = getWrapper(0, 100, 1);
+          const numberInput = getNumberInput(wrapper);
+          expect(numberInput.prop('value')).toEqual(1);
+        });
+
+        it('should set value when min is undefined', () => {
+          let wrapper = getWrapper(undefined, 100, 5);
+          let numberInput = wrapper.find('input');
+          expect(numberInput.prop('value')).toEqual(5);
+        });
+
+      });
+    });
+
+
+    describe('labelText', () => {
+      it('renders a label', () => {
+        expect(label.length).toEqual(1);
+      });
+
+      it('has the expected classes', () => {
+        expect(label.hasClass('wfp--label')).toEqual(true);
+      });
+    });
+
+    describe('helper', () => {
+      it('renders a helper', () => {
+        expect(helper.length).toEqual(1);
+      });
+
+      it('renders children as expected', () => {
+        wrapper.setProps({
+          helperText: (
+            <span>
+              This helper text has <a href="http://www.wfp.org">a link</a>.
+            </span>
+          ),
+        });
+        const renderedHelper = wrapper.find('.wfp--form__helper-text');
+        expect(renderedHelper.props().children).toEqual(
+          <span>
+            This helper text has <a href="http://www.wfp.org">a link</a>.
+          </span>
+        );
+      });
+
+      it('should set helper text as expected', () => {
+        wrapper.setProps({ helperText: 'Helper text' });
+        expect(helper.text()).toEqual('Helper text');
+      });
+    });
+  });
+
+  describe('events', () => {
+    describe('disabled numberInput', () => {
+      const onClick = jest.fn();
+      const onChange = jest.fn();
+
+      const wrapper = mount(
+        <NumberInput id="test" onClick={onClick} onChange={onChange} disabled />
+      );
+
+      const input = wrapper.find('input');
+      const upArrow = wrapper.find('button.up-icon');
+      const downArrow = wrapper.find('button.down-icon');
+
+      it('should be disabled when numberInput is disabled', () => {
+        expect(upArrow.prop('disabled')).toEqual(true);
+        expect(downArrow.prop('disabled')).toEqual(true);
+      });
+
+      it('should not invoke onClick when up arrow is clicked', () => {
+        upArrow.simulate('click');
+        expect(onClick).not.toBeCalled();
+      });
+
+      it('should not invoke onClick when down arrow is clicked', () => {
+        downArrow.simulate('click');
+        expect(onClick).not.toBeCalled();
+      });
+
+      it('should not invoke onChange when numberInput is changed', () => {
+        input.simulate('change');
+        expect(onChange).not.toBeCalled();
+      });
+    });
+
+    describe('enabled numberInput', () => {
+      let onClick;
+      let onChange;
+      let input;
+      let upArrow;
+      let downArrow;
+      let wrapper;
+
+      beforeEach(() => {
+        onClick = jest.fn();
+        onChange = jest.fn();
+
+        wrapper = mount(
+          <NumberInput
+            id="test"
+            onClick={onClick}
+            onChange={onChange}
+            value={0}
+            min={0}
+            max={100}
+          />
+        );
+
+        input = wrapper.find('input');
+        upArrow = wrapper.find('button.up-icon');
+        downArrow = wrapper.find('button.down-icon');
+      });
+
+      it('should invoke onClick when up arrow is clicked', () => {
+        upArrow.simulate('click');
+        expect(onClick).toBeCalled();
+        expect(onClick).toHaveBeenCalledWith(expect.anything(), 'up');
+      });
+
+      it('should only increase the value on up arrow click if value is less than max', () => {
+        wrapper.setProps({ value: 100 });
+        upArrow.simulate('click');
+        expect(wrapper.prop('value')).toEqual(100);
+        expect(onClick).not.toBeCalled();
+      });
+
+      it('should only decrease the value on down arrow click if value is greater than min', () => {
+        wrapper.setProps({ value: 0 });
+        downArrow.simulate('click');
+        expect(wrapper.prop('value')).toEqual(0);
+        expect(onClick).not.toBeCalled();
+      });
+
+
+
+      it('should not invoke onClick when down arrow is clicked and value is 0', () => {
+        downArrow.simulate('click');
+        expect(onClick).not.toBeCalled();
+      });
+
+      it('should invoke onClick when down arrow is clicked and value is above min', () => {
+        wrapper.setProps({ value: 1 });
+        downArrow.simulate('click');
+        expect(onClick).toBeCalled();
+        expect(onChange).toBeCalled();
+        expect(onClick).toHaveBeenCalledWith(expect.anything(), 'down');
+      });
+
+      it('should invoke onChange when numberInput is changed', () => {
+        input.simulate('change');
+        expect(onChange).toBeCalled();
+      });
+    });
+  });
+});
+
+describe('NumberInputSkeleton', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<NumberInputSkeleton />);
+
+    const container = wrapper.find('.wfp--number');
+    const label = wrapper.find('.wfp--label');
+
+    it('has the expected classes', () => {
+      expect(container.hasClass('wfp--skeleton')).toEqual(true);
+      expect(label.hasClass('wfp--skeleton')).toEqual(true);
+    });
+  });
+});

package/src/components/NumberInput/NumberInput.Skeleton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import useSettings from '../../hooks/useSettings';
+
+interface NumberInputSkeletonProps {
+  /**
+   * Specify whether the label should be hidden, or not
+   **/
+  hideLabel?: boolean;
+  id?: string;
+}
+
+const NumberInputSkeleton: React.FC<NumberInputSkeletonProps> = ({
+  hideLabel,
+  id,
+}) => {
+  const { prefix } = useSettings();
+  const label = hideLabel ? null : (
+    <label className={`${prefix}--label ${prefix}--skeleton`} htmlFor={id} />
+  );
+
+  return (
+    <div className={`${prefix}--form-item`}>
+      {label}
+      <div className={`${prefix}--number ${prefix}--skeleton`} />
+    </div>
+  );
+};
+
+export default NumberInputSkeleton;