@progressiveui/react 2.0.2 → 2.0.4

package/src/components/FormHint/README.mdx

@@ -1,13 +0,0 @@
-### Usage
-
-The `FormHint` component can provide additional information on how to use an input element. It is placed inside the `labelText`.
-Use the `helperText` prop instead if the information is very important for filling out the input.
-
-### Related
-
-[Input](?path=/docs/components-input--input-regular)
-[FormLabel](?path=/docs/forms-formlabel--regular)
-
-### Reference
-
-[Carbon Design System Usage for Buttons](https://next.carbondesignsystem.com/components/button)

package/src/components/FormHint/index.ts

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

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import FormItem from '../FormItem';
-
-describe('FormItem', () => {
-  it('should render', () => {
-    const wrapper = shallow(<FormItem />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

package/src/components/FormItem/FormItem.tsx

@@ -1,45 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import classNames from "classnames";
-import useSettings from "../../hooks/useSettings";
-
-export interface FormItemProps extends React.AllHTMLAttributes<HTMLDivElement> {
-  /**
-   * Specify whether the FormItem should be rendered as invalid
-   */
-  invalid?: boolean;
-  /**
-   * Specify whether the FormItem should be rendered as inline
-   */
-  inline?: boolean;
-  /**
-   * Provide the contents of your FormItem
-   */
-  children?: React.ReactNode;
-}
-
-const FormItem: React.FC<PropsWithChildren<FormItemProps>> = ({
-  className,
-  children,
-  invalid,
-  inline,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-
-  const classes = classNames(
-    `${prefix}--form-item`,
-    {
-      [`${prefix}--form-item--inline`]: inline,
-      [`${prefix}--form-item--invalid`]: invalid,
-    },
-    className
-  );
-
-  return (
-    <div className={classes} {...other}>
-      {children}
-    </div>
-  );
-};
-
-export default FormItem;

package/src/components/FormItem/RfFormItem.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-const RfFormItem = (props) => {
-  const showInvalid =
-    props.meta &&
-    ((props.meta.touched && props.meta.error) ||
-      (props.meta.submitFailed === true && props.meta.error));
-
-  /*const inputClasses = classNames({
-			'required': props.isRequired,
-			'disabled': props.disabled,
-			'field--read-only': props.readOnly,
-			'wfp-form--group' : props.wrapper === true,
-      'wfp--form-item--invalid' : showInvalid,
-      [`wfp-form--group--${props.labelPosition}`]: props.labelPosition,
-			[`${props.className}`]: props.className,
-		}); 
-*/
-
-  const inputClasses = classNames({
-    'wfp--form-item': true,
-    disabled: props.disabled,
-  });
-
-  if (showInvalid)
-    return (
-      <div className={inputClasses}>
-        {props.children}
-        <div className="wfp--form-requirement">{props.meta.error}</div>
-      </div>
-    );
-  else return <div className={inputClasses}>{props.children}</div>;
-};
-
-RfFormItem.propTypes = {
-  meta: PropTypes.object,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  required: PropTypes.bool,
-};
-
-export default RfFormItem;

package/src/components/FormItem/__snapshots__/FormItem-test.js.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormItem should render 1`] = `
-<div
-  className="wfp--form-item"
-/>
-`;

package/src/components/FormItem/index.ts

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

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import FormLabel from '../FormLabel';
-
-describe('FormLabel', () => {
-  it('should render', () => {
-    const wrapper = shallow(<FormLabel />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

package/src/components/FormLabel/FormLabel.hbs

@@ -1 +0,0 @@
-<label class="wfp--label">Label</label>

package/src/components/FormLabel/FormLabel.stories.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import markdown from './README.mdx';
-import FormLabel from '.';
-
-export default {
-  title: 'Components/Forms/FormLabel',
-  component: FormLabel,
-  parameters: {
-    componentSubtitle: 'Component',
-    status: 'released',
-    mdx: markdown,
-  },
-};
-
-export const Regular = (args) => <FormLabel {...args}>Label text</FormLabel>;

package/src/components/FormLabel/FormLabel.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import type { PropsWithChildren } from 'react';
-import classNames from 'classnames';
-import useSettings from '../../hooks/useSettings';
-
-/** Form Label can be used whenever it is needed to show a label detached from a regular input. */
-type FormLabelProps = PropsWithChildren<{
-  /**
-   * The ID of the related input which will be used as `htmlFor`
-   */
-  id?: string;
-  /**
-   * Additional `class` attributes
-   */
-  className?: string;
-}>;
-
-const FormLabel: React.FC<FormLabelProps> = ({
-  className,
-  children,
-  id,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-
-  const classes = classNames(`${prefix}--label`, className);
-
-  return (
-    <label htmlFor={id} className={classes} {...other}>
-      {children}
-    </label>
-  );
-};
-
-export default FormLabel;

package/src/components/FormLabel/README.mdx

@@ -1 +0,0 @@
-

package/src/components/FormLabel/RfFormLabel.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-const Label = ({
-  children,
-  hideLabel,
-  input,
-  label,
-  id,
-  /* info, */ isRequired,
-  ...other
-}) => {
-  if (children !== false && label !== false) {
-    const labelClasses = classNames({
-      'wfp--label': true,
-      'wfp--visually-hidden': hideLabel,
-      'label--required': isRequired,
-    });
-    return (
-      <label
-        {...other}
-        className={labelClasses}
-        htmlFor={id ? id : input ? input.name : ''}>
-        {children ? children : label}
-      </label>
-    );
-  } else {
-    return null;
-  }
-};
-
-Label.propTypes = {
-  children: PropTypes.node,
-  isRequired: PropTypes.bool,
-};
-
-export default Label;

package/src/components/FormLabel/__snapshots__/FormLabel-test.js.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormLabel should render 1`] = `
-<label
-  className="wfp--label"
-/>
-`;

package/src/components/FormLabel/index.ts

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

package/src/components/Hero/Hero-old.js

@@ -1,154 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classNames from 'classnames';
-import useSettings from '../../hooks/useSettings';
-/**
- * Hero are a convenient means of displaying content composed of different types of objects. It is a multi usage component which creates boxes that are usually teasing some kind of content. */
-
-const Hero = ({
-  children,
-  className,
-  image,
-  isExternal,
-  isLink,
-  metadata,
-  more,
-  subTitle,
-  title,
-  kind,
-  url,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-
-  const style =
-    kind !== 'related'
-      ? {
-          backgroundImage: `url(${image})`,
-        }
-      : {};
-
-  const wrapperClasses = classNames(`${prefix}--photo-card`, {
-    [`${prefix}--photo-card--${kind}`]: kind,
-    [`${prefix}--photo-card--no-background`]: !image,
-    [`${prefix}--photo-card--link`]: isLink,
-    [`${className}`]: className,
-  });
-
-  const content = (
-    <React.Fragment>
-      <div className={`${prefix}--photo-card__background`} style={style} />
-      {image && kind === 'related' && <img src={image} alt={title} />}
-      <div className={`${prefix}--photo-card__info`}>
-        <div>
-          {(kind === 'landscape' || kind === 'hero') && (
-            <div
-              className={`${prefix}--photo-card__info__background`}
-              style={style}
-            />
-          )}
-          {metadata && (
-            <p className={`${prefix}--photo-card__info__metadata`}>
-              {metadata}
-            </p>
-          )}
-          {title && (kind === 'hero' || kind === 'page-splash') && (
-            <h2 className={`${prefix}--photo-card__info__title`}>{title}</h2>
-          )}
-          {title && kind !== 'hero' && kind !== 'page-splash' && (
-            <h3 className={`${prefix}--photo-card__info__title`}>{title}</h3>
-          )}
-          {subTitle && (
-            <p className={`${prefix}--photo-card__info__subtitle`}>
-              {subTitle}
-            </p>
-          )}
-        </div>
-
-        {kind === 'hero' ||
-          kind === 'splash-image' ||
-          (kind === 'splash-compact' && (
-            <div className={`${prefix}--photo-card__info__more`}>{more}</div>
-          ))}
-      </div>
-      {children}
-    </React.Fragment>
-  );
-
-  return isLink ? (
-    <a
-      href={url}
-      target={isExternal ? '_blank' : ''}
-      className={wrapperClasses}
-      {...other}>
-      {content}
-    </a>
-  ) : (
-    <div className={wrapperClasses} {...other}>
-      {content}
-    </div>
-  );
-};
-
-Hero.propTypes = {
-  /**
-   Additional className which will be added
- */
-  className: PropTypes.string,
-  /**
-   The links target
-*/
-  href: PropTypes.string,
-  /**
-   An optimized photograph
- */
-  image: PropTypes.string,
-  /**
-  External link flag
-*/
-  isExternal: PropTypes.bool,
-  /**
-  Render the Hero as link
-*/
-  isLink: PropTypes.bool,
-  /**
-  A short sentence to explain the content of the node (max 180 characters)
-*/
-  subTitle: PropTypes.node,
-  /**
-   A search-friendly title (ideally 50 characters, max 100)
-*/
-  title: PropTypes.node,
-  /**
-  Additional metadatas
-*/
-  metadata: PropTypes.string,
-  /**
-  Additional more content
-*/
-  more: PropTypes.node,
-  /**
-  Kind of Hero
-*/
-  kind: PropTypes.oneOf([
-    'landscape',
-    'landscape-light',
-    'emergencies',
-    'split',
-    'hero',
-    'splash',
-    'splash-image',
-    'splash-compact',
-    'related',
-  ]).isRequired,
-  /**
-  The URL where the content uploaded is located.
-*/
-  url: PropTypes.string,
-};
-
-Hero.defaultProps = {
-  isLink: true,
-};
-
-export default Hero;

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

@@ -1,81 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-import React from 'react';
-import Hero from './Hero';
-import { shallow } from 'enzyme';
-import { cleanup, render, screen } from '@testing-library/react';
-
-describe('Hero', () => {
-  
-  describe('Renders as expected', () => {
-    afterEach(cleanup);
-    // const wrapper = shallow(
-      
-    // );
-    it('should render content as ecpected', () => {
-      render(<Hero href="www.google.com" className="some-class" kind="landscape">
-      A simple link
-    </Hero>)
-      expect(screen.getByText('A simple link')).toBeInTheDocument();
-    });
-
-    it('should use the appropriate link class', () => {
-      render(<Hero href="www.google.com" className="some-class" kind="landscape">
-      A simple link
-    </Hero>)
-      expect(screen.getByText('A simple link')).toHaveClass('wfp--photo-card');
-    });
-    
-    it('Renders as an <a> element with an href', () => {
-      render(<Hero data-testid="hero" href="www.google.com" className="some-class" kind="landscape">
-      A simple link
-    </Hero>)
-      expect(screen.getByText('A simple link')).toHaveAttribute('href','www.google.com');
-    });
-  
-    
-    it('should call for custom classes to be applied', () => {
-      render(<Hero href="www.google.com" className="some-class" kind="landscape">
-      A simple link
-    </Hero>)
-      expect(screen.getByText('A simple link')).toHaveClass('some-class');
-    });
-
-  });
-
-  describe('Renders as expected', () => {
-    const wrapper = shallow(
-      <Hero className="some-class" kind="related" isLink={false}>
-        A simple link
-      </Hero>
-    )
-    it('Renders as expected', () => {
-      expect(wrapper.length).toBe(1);
-    });
-
-    it('Renders as a <div> element with isLink props set as false', () => {
-      expect(wrapper.is('div')).toBe(true);
-    });
-
-    describe('Renders content as expected', () => {
-      const contentWrapper = () => wrapper.find('div.wfp--photo-card__background');
-      const infoWrapper = () => wrapper.find('div.wfp--photo-card__info');
-
-      it("renders content background class as expected", () => {
-        expect(contentWrapper().hasClass('wfp--photo-card__background')).toEqual(true)
-      })
-
-      it("renders hero info class as expected", () => {
-        expect(infoWrapper().hasClass('wfp--photo-card__info')).toEqual(true)
-      })
-
-      it("renders hero info content as expected", () => {
-        expect(infoWrapper().props().children.length).toBe(2)
-      })
-    })
-
-    
-  })
-
-
-  
-});

package/src/components/Hero/Hero.hbs

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