@progressiveui/react 2.0.3 → 2.0.4

package/src/components/DatePicker/DateRangePickerInput.tsx

@@ -1,106 +0,0 @@
-import * as React from "react";
-import useSettings from "../../hooks/useSettings";
-import { ArrowRight, CalendarAltRegular } from "@progressiveui/icons-react";
-
-export interface DateRangePickerInputProps {
-  /**
-   * The starting date value, formatted as a string.
-   */
-  startDate?: string;
-
-  /**
-   * The ending date value, formatted as a string.
-   */
-  endDate?: string;
-
-  /**
-   * The DatePicker component to be used (react-datepicker by default)
-   */
-  datePicker?: React.ComponentType<any>;
-
-  /**
-   * Function to set the starting date. Typically used as an event handler.
-   */
-  setStartDate?: string;
-
-  /**
-   * Function to set the ending date. Typically used as an event handler.
-   */
-  setEndDate?: string;
-
-  /**
-   * Additional props for the start date DatePicker component.
-   * Can be used to pass custom settings or event handlers.
-   */
-  fromProps?: object;
-
-  /**
-   * Additional props for the end date DatePicker component.
-   * Can be used to pass custom settings or event handlers.
-   */
-  toProps?: object;
-}
-
-export const DateRangePickerInput = React.forwardRef<
-  HTMLInputElement,
-  DateRangePickerInputProps
->(
-  (
-    {
-      startDate,
-      endDate,
-      setStartDate,
-      setEndDate,
-      datePicker,
-      fromProps = {},
-      toProps = {},
-    },
-    ref
-  ) => {
-    const { prefix } = useSettings();
-    const DatePicker = datePicker;
-    if (!DatePicker) {
-      return <div>Add a datepicker component</div>;
-    }
-    return (
-      <div className={`${prefix}--date-ranger-picker`}>
-        <div className={`${prefix}--date-ranger-picker__input`}>
-          <DatePicker
-            selected={startDate}
-            className={`${prefix}--input ${prefix}--date-ranger__input__start-date`}
-            onChange={setStartDate}
-            selectsStart
-            startDate={startDate}
-            endDate={endDate}
-            wrapperClassName={`${prefix}--date-picker__wrapper`}
-            {...fromProps}
-            ref={ref}
-          />
-          <CalendarAltRegular
-            className={`${prefix}--date-ranger-picker__icon`}
-          />
-        </div>
-        <ArrowRight className={`${prefix}--date-ranger-picker__arrow`} />
-        <div className={`${prefix}--date-ranger-picker__input`}>
-          <DatePicker
-            selected={endDate}
-            className={`${prefix}--input ${prefix}--date-ranger__input__start-date`}
-            onChange={setEndDate}
-            selectsEnd
-            startDate={startDate}
-            endDate={endDate}
-            minDate={startDate}
-            wrapperClassName={`${prefix}--date-picker__wrapper`}
-            {...toProps}
-            // TODO: Add ref to the end date picker
-          />
-          <CalendarAltRegular
-            className={`${prefix}--date-ranger-picker__icon`}
-          />
-        </div>
-      </div>
-    );
-  }
-);
-
-DateRangePickerInput.displayName = "DateRangePickerInput";

package/src/components/DatePicker/README.mdx

@@ -1,50 +0,0 @@
-The Datepicker allows the user to select a date or date range from a calendar.
-
-We recommend [react-datepicker](https://www.npmjs.com/package/react-datepicker) for DatePickers and DateRangePickers.
-
-### Usage
-
-Initialize with loading classes to load the styling from WFP UI
-
-```js
-import 'react-dates/initialize';
-import { SingleDatePicker, DateRangePicker } from 'react-dates';
-import { SingleDatePickerInput} from '@progressiveui/react';
-
-<SingleDatePickerInput
-  datePicker={SingleDatePicker}
-/>
-
-<DateRangePickerInput
-  datePicker={DateRangePicker}
-/>
-```
-
-### Usage with redux-form or final-forms
-
-```js
-import ReduxFormWrapper from "@progressiveui/react";
-import { SingleDatePickerInput } from "@progressiveui/react";
-import { SingleDatePicker, DateRangePicker } from "react-dates";
-
-<Field
-  component={ReduxFormWrapper}
-  inputComponent={SingleDatePickerInput}
-  datePicker={SingleDatePicker}
-  format={(value) => (value ? moment(value) : undefined)}
-  normalize={(data) => data && data.value && data.value.format()}
-/>;
-```
-
-```js
-<Field
-  component={ReduxFormWrapper}
-  inputComponent={DateRangePickerInput}
-  datePicker={DateRangePicker}
-  format={(value) =>
-    value
-      ? { startDate: moment(value.startDate), endDate: moment(value.endDate) }
-      : undefined
-  }
-/>
-```

package/src/components/DatePicker/index.ts

@@ -1,4 +0,0 @@
-export { default as DatePicker } from "./DatePicker";
-export { default as DateRangePicker } from "./DateRangePicker";
-export { DatePickerInput } from "./DatePickerInput";
-export { DateRangePickerInput } from "./DateRangePickerInput";

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

@@ -1,69 +0,0 @@
-import React from 'react';
-import Empty from '../Empty';
-import { shallow } from 'enzyme';
-
-describe('Empty', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(
-      <Empty title="title" kind="large" />
-    );
-
-    const emptyWrapper = () => wrapper.find('div.wfp--empty');
-
-    describe('emptyWrapper', () => {
-      it('renders as expected', () => {
-        expect(emptyWrapper().length).toBe(1);
-      });
-
-      it('has the expected classes', () => {
-        expect(emptyWrapper().hasClass('wfp--empty')).toEqual(true);
-      });
-    });
-
-    const emptyIcon = () => wrapper.find('div.wfp--empty__icon');
-
-    describe('emptyIcon', () => {
-      it('renders as expected', () => {
-        expect(emptyIcon().length).toBe(1);
-      });
-
-      it('has the expected classes', () => {
-        expect(emptyIcon().hasClass('wfp--empty__icon')).toEqual(true);
-      });
-    });
-
-    const emptyText = () => wrapper.find('div.wfp--empty__text');
-
-    describe('emptyText', () => {
-      it('renders as expected', () => {
-        expect(emptyText().length).toBe(1);
-      });
-      it('renders children as expected', () => {
-        expect(emptyText().props().children).toEqual(
-          [<h2>title</h2>, <p/>]
-        )
-      });
-
-      it('renders title as expected', () => {
-        expect(emptyText().find("h2").length).toBe(1);
-      });
-
-      it('renders additional content as expected', () => {
-        expect(emptyText().find("p").length).toBe(1);
-      });
-
-      it('has the expected classes', () => {
-        expect(emptyText().hasClass('wfp--empty__text')).toEqual(true);
-      });
-    });
-
-    const emptyButton = () => wrapper.find('div.wfp--empty__button');
-
-    describe('emptyButton', () => {
-      it('has the expected classes', () => {
-        expect(emptyButton().hasClass('wfp--empty__button')).toEqual(true);
-      });
-    })
-    
-  });
-});

package/src/components/Empty/Empty.stories.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import markdown from "./README.mdx";
-import Empty from "./Empty";
-import Button from "../Button";
-
-export default {
-  title: "Components/UI Elements/Empty",
-  component: Empty,
-  parameters: {
-    componentSubtitle: "Component",
-    status: "experimental",
-    mdx: markdown,
-  },
-};
-
-export const EmptyDefault = (args) => (
-  <Empty
-    icon={<img alt="Moving van" src="../illustrations/moving-van.svg" />}
-    {...args}
-  />
-);
-
-EmptyDefault.args = {
-  title: "No entries found",
-  children: `You haven't yet created an entry`,
-  kind: "large",
-};
-
-//   button: <Button kind="accent">New entry</Button>,
-// icon: <IllustrationsMovingVanWithBackground alt="Moving van" width="25rem" />,
-
-const emptysourcecode = `
-import { Empty, Button  } from "@progressiveui/react";
-
-
-<Empty
-  button={<Button kind="accent">New entry</Button>}
-  icon={<img alt="Moving van" src="../illustrations/moving-van.svg"/>}
-  kind="large"
-  title="No entries found"
->
-  You haven't yet created an entry
-</Empty>
-`;
-EmptyDefault.story = {
-  parameters: {
-    docs: {
-      source: {
-        code: emptysourcecode,
-      },
-    },
-  },
-};

package/src/components/Empty/Empty.tsx

@@ -1,95 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-import useSettings from "../../hooks/useSettings";
-// import { IIcon } from '../../utils';
-
-interface EmptyProps extends Omit<React.ComponentPropsWithRef<"div">, "title"> {
-  /**
-   * The content to be rendered in the empty state. @design
-   */
-  children?: React.ReactNode;
-  /**
-   * The title to be rendered in the empty state.
-   */
-  title?: React.ReactNode;
-  /**
-   * The kind of empty state to be rendered. @design
-   */
-  kind?: "undefined" | "large";
-  /**
-   * The icon to be rendered in the empty state. @design
-   */
-  icon?: React.ReactNode;
-  /**
-   * The button to be rendered in the empty state. @design
-   */
-  button?: React.ReactNode;
-  /**
-   * The CSS class name to be appended to the top-level node.
-   */
-  className?: string;
-  /**
-   * The replaceable components to be used for the empty state.
-   */
-  components?: { Icon: React.ReactNode; Text: React.ReactNode };
-}
-
-const Icon = ({ icon }: EmptyProps) => {
-  const { prefix } = useSettings();
-  if (!icon) return null;
-  return <div className={`${prefix}--empty__icon`}>{icon}</div>;
-};
-
-const Text = ({ title, children }: EmptyProps) => {
-  const { prefix } = useSettings();
-  return (
-    <div className={`${prefix}--empty__text`}>
-      {title && <h2>{title}</h2>}
-      <div>{children}</div>
-    </div>
-  );
-};
-
-/** The Empty component can be used whenever a section should indicate that there is no content available. This can be the case for a empty list table or search results. */
-const Empty = ({
-  button,
-  children,
-  className,
-  components,
-  icon,
-  title,
-  kind = "large",
-  ...other
-}: EmptyProps) => {
-  const { prefix } = useSettings();
-
-  const classes = classNames(
-    {
-      [`${prefix}--empty`]: true,
-      [`${prefix}--empty--${kind}`]: kind,
-    },
-    className
-  );
-
-  const defaultComponents = { Icon, Text };
-
-  const allComponents = {
-    ...defaultComponents,
-    ...components,
-  };
-
-  const IconComponent = allComponents.Icon as React.FC<EmptyProps>;
-  const TextComponent = allComponents.Text as React.FC<EmptyProps>;
-
-  return (
-    <div className={classes} {...other}>
-      <IconComponent icon={icon} />
-      <TextComponent title={title} children={children} />
-      <div className={`${prefix}--empty__button`}>{button}</div>
-    </div>
-  );
-};
-
-Empty.displayName = "Empty";
-
-export default Empty;

package/src/components/Empty/README.mdx

@@ -1,28 +0,0 @@
-Empty states are a way to improve the user experience of your product, from onboarding to encouraging users to interact with your app. They are screens in your UI that are not yet full of information. That is to say, they will eventually have content on them when the user populates them.
-
-The component should usually cover the whole area of the section and have a slightly darker background than the regular content. It can be also used for large notification messages.
-
-### Types of empty states
-
-- **First use** – Occurs with a new product or service when there is still nothing to show, such as a new Evernote or Dropbox account.
-- **User cleared** – Occurs when users complete actions such as clearing their inbox or task list, and the result is an empty screen.
-- **Errors** – These occur when something goes wrong, or when there are issues such as a mobile phone going offline due to network problems.
-- **No results/No data** – Occurs when there is nothing to show. This can happen if someone performs a search and the query is empty or there isn’t data available to show (when filtering for a date-range that has no data for example).
-
-### When to use
-
-- ✓ Can be the case for a empty list table or search results
-- ✓ Cover the whole area where normally content would be displayed
-- ✓ Add personality by adding an illustration or icon (for example by using FontAwesome)
-- ✓ Tell your user to do something: provide a call-to-action button
-- ✓ Can be also used for large notification messages
-
-### Related
-
-[Button](?path=/docs/components-button--button-regular)
-
-### Reference
-
-[Breakfree Graphics Empty States – The Most Overlooked Aspect of UX](https://www.breakfreegraphics.com/design-blog/empty-states-the-most-overlooked-aspect-of-ux/)
-
-[justinmind Everything you need to know about empty state design](https://www.justinmind.com/blog/everything-you-need-to-know-about-empty-state-design/)

package/src/components/Empty/index.ts

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

package/src/components/Footer/Footer-external.hbs

@@ -1,22 +0,0 @@
-<footer mobilepagewidth="" class="wfp--footer wfp--footer--external some-class">
-	<div class="wfp--wrapper">
-		<div class="wfp--footer__content">
-			<div class="wfp--footer__info">
-				<div>The United Nations World Food Programme - saving lives in emergencies and changing lives for millions through sustainable development. WFP works in more than 80 countries around the world, feeding people caught in conflict and disasters, and laying the foundations for a better future.<br>
-					<a href="http://www.wfp.org" class="wfp--link">Custom Links</a>
-				</div>
-			</div>
-			<div class="wfp--footer__cta">
-				<img class="wfp--footer__cta-logo" src="https://cdn.wfp.org/guides/ui/assets/v0.0.1/logos/extended/en/wfp-logo-extended-black-en.svg" alt="World Food Programme Logo">
-				<img class="wfp--footer__cta-logo-small" src="https://cdn.wfp.org/guides/ui/assets/v0.0.1/logos/vertical/en/wfp-logo-vertical-black-en.svg" alt="World Food Programme Logo"><div class="wfp--footer__secondary">
-					<div>Via C. G. Viola 68 Parco dei Medici<br>00148 Rome, Italy
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="wfp--wrapper wfp--footer__meta">
-		<div class="wfp--footer__meta__content"> 2018 © World Food Programme
-		</div>
-	</div>
-</footer>

package/src/components/Footer/Footer-internal.hbs

@@ -1,30 +0,0 @@
-<footer mobilepagewidth="" class="wfp--footer">
-	<div class="wfp--wrapper wfp--wrapper--width-lg">
-		<div class="wfp--footer__content">
-			<div class="wfp--footer__info">
-				<div class="wfp--footer__info">
-					<div class="wfp--footer__info__item">
-						<p class="wfp--footer__label">A label</p>
-						<ul class="wfp--footer__list">
-							<li><a href="http://www.wfp.org" class="wfp--link">First Link</a></li>
-							<li><a href="http://www.wfp.org" class="wfp--link">Second Link</a></li>
-						</ul></div><div class="wfp--footer__info__item"><p class="wfp--footer__label">Another label</p>
-							<ul class="wfp--footer__list">
-								<li><a href="http://www.wfp.org" class="wfp--link">First Link</a></li><li><a href="http://www.wfp.org" class="wfp--link">Second Link</a>
-								</li>
-							</ul>
-						</div>
-					</div>
-				</div>
-				<div class="wfp--footer__cta">
-          <img class="wfp--footer__cta-logo" src="https://cdn.wfp.org/guides/ui/assets/v0.0.1/logos/extended/en/wfp-logo-extended-black-en.svg" alt="World Food Programme Logo" />
-          <img class="wfp--footer__cta-logo-small" src="https://cdn.wfp.org/guides/ui/assets/v0.0.1/logos/standard/en/wfp-logo-standard-black-en.svg" alt="World Food Programme Logo" />
-        </div>
-			</div>
-		</div>
-		<div class="wfp--wrapper wfp--wrapper--width-lg wfp--footer__meta">
-			<div class="wfp--footer__meta__content">
-        2019 © World Food Programme
-			</div>
-		</div>
-	</footer>