fix(TextInput): use common Input element for structure

.storybook/blocks/DocsContainer.tsx

@@ -16,6 +16,9 @@ import { SourceContainer } from './SourceContainer';
 import { CodeOrSourceMdx, AnchorMdx, HeadersMdx } from './mdx';
 import { scrollToElement } from './utils';
 
+import { Subtitle } from './Subtitle';
+import { Title } from './Title';
+
 export interface DocsContainerProps {
   context: DocsContextProps;
 }
@@ -89,6 +92,8 @@ export const DocsContainer: FunctionComponent<DocsContainerProps> = ({
           <MDXProvider components={allComponents}>
             <DocsWrapper className="sbdocs sbdocs-wrapper">
               <DocsContent className="sbdocs sbdocs-content">
+                <Subtitle />
+                <Title />
                 {children}
               </DocsContent>
             </DocsWrapper>

.storybook/blocks/DocsPage.tsx

@@ -42,8 +42,8 @@ export const DocsPage: FC = (props) => {
 
   return (
     <>
-      <Subtitle />
-      <Title />
+      {/*<Subtitle />
+      <Title />*/}
       <Description />
       <Primary />
       <Props story={PRIMARY_STORY} />

.storybook/preview.js

@@ -10,9 +10,10 @@ import {
   Props,
   Stories,
   types,
-  DocsContainer,
+  //DocsContainer,
 } from '@storybook/addon-docs/blocks';
 import { DocsPage } from './blocks/DocsPage';
+import { DocsContainer } from './blocks/DocsContainer';
 import { Subtitle } from './blocks/Subtitle';
 
 import React, { FC } from 'react';

src/components/BannerNavigation/BannerNavigationWithContent.js

@@ -76,7 +76,7 @@ BannerNavigationWithContent.propTypes = {
   /**
    * The CSS class name to be placed on the wrapping element.
    */
-  pageWidth: PropTypes.oneOf(pageWidths),
+  pageWidth: PropTypes.string,
   /**
    * Allows to disable the search input
    */

src/components/Button/Button.stories.js

@@ -84,6 +84,7 @@ on the page.
 `;
 
 ButtonKind.story = {
+  name: 'kind parameter',
   parameters: {
     docs: {
       storyDescription: hello,
@@ -109,6 +110,7 @@ always paired with text whenever possible.
 `;
 
 ButtonIcon.story = {
+  name: 'with icon',
   parameters: {
     docs: {
       storyDescription: helloButtonIcon,
@@ -132,6 +134,7 @@ or less.
 `;
 
 Small.story = {
+  name: 'small Button',
   parameters: {
     docs: {
       storyDescription: helloButtonSmall,

src/components/Checkbox/_checkbox.scss

@@ -52,7 +52,7 @@
     height: rem(18px);
     width: rem(18px);
     border: $checkbox-border-width solid $ui-05;
-    border-radius: $button-border-radius;
+    border-radius: $checkbox-border-radius;
     background-color: $ui-01;
   }
 

src/components/Footer/Footer.js

@@ -191,23 +191,50 @@ const Footer = ({
 };
 
 Footer.propTypes = {
+  /**
+   The content of the footer containing relevant links
+ */
   children: PropTypes.node,
+  /**
+   Additional className which will be added
+ */
   className: PropTypes.string,
+  /** 
+   Meta content, usually the copyright notice
+ */
+  metaContent: PropTypes.node,
+  /**
+   Optional WFP logo for mobile devices, can be used if the Logo should be provided by the CDN
+ */
+  logo: PropTypes.node,
+  /**
+   Optional WFP logo for desktop devices, can be used if the Logo should be provided by the CDN
+ */
+  logoExtended: PropTypes.node,
+  /**
+   * The width of the `Wrapper` component
+   */
+  pageWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'full']),
+  /**
+   The WFP logo
+ */
+  subTitle: PropTypes.node,
+  /*
   labelOne: PropTypes.string,
   linkTextOne: PropTypes.string,
   linkHrefOne: PropTypes.string,
   labelTwo: PropTypes.string,
   linkTextTwo: PropTypes.string,
-  linkHrefTwo: PropTypes.string,
+  linkHrefTwo: PropTypes.string,*/
 };
 
-Footer.defaultProps = {
+/*Footer.defaultProps = {
   labelOne: 'Need Help?',
   linkTextOne: 'Contact',
   linkHrefOne: '#',
   labelTwo: 'Second Link',
   linkTextTwo: 'About',
   linkHrefTwo: '#',
-};
+};*/
 
 export default Footer;

src/components/Footer/Footer.stories.js

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import markdown from './README.mdx';
+
+import Footer from '.';
+import Link from '../Link';
+
+export default {
+  title: 'Components/Footer',
+  component: Footer,
+  parameters: {
+    componentSubtitle: 'Component',
+    mdx: markdown,
+  },
+};
+
+export const Regular = (args) => (
+  <Footer {...args}>
+    <div className="wfp--footer__info">
+      <div className="wfp--footer__info__item">
+        <p className="wfp--footer__label">A label</p>
+        <ul className="wfp--footer__list">
+          <li>
+            <Link href="http://www.wfp.org">First Link</Link>
+          </li>
+          <li>
+            <Link href="http://www.wfp.org">Second Link</Link>
+          </li>
+        </ul>
+      </div>
+      <div className="wfp--footer__info__item">
+        <p className="wfp--footer__label">Another label</p>
+        <ul className="wfp--footer__list">
+          <li>
+            <Link href="http://www.wfp.org">First Link</Link>
+          </li>
+          <li>
+            <Link href="http://www.wfp.org">Second Link</Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </Footer>
+);
+
+Regular.args = {};
+
+export const External = (args) => (
+  <Footer
+    external
+    metaContent="2019 © World Food Programme"
+    secondary={
+      <div>
+        Via C. G. Viola 68 Parco dei Medici
+        <br />
+        00148 Rome, Italy
+      </div>
+    }>
+    <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 />
+      <Link href="http://www.wfp.org">Custom Links</Link>
+    </div>
+  </Footer>
+);

src/components/Footer/README.md → src/components/Footer/README.mdx

@@ -1,5 +1,6 @@
 Footer is the second most important place where your basic site information and links should live. Users turn often to the footer to look for important information, such as contact details, or links to less prominent sections of the website (privacy policy, terms of use, etc).
 
+<!--
 ```js
 import { Footer } from '@wfp/ui';
 ```
@@ -48,3 +49,4 @@ import { Footer } from '@wfp/ui';
 | Logo            | `Vertical black english Logo from @wfp/icons` | `string`              | Footer Logo on Mobile Devices, if not set the default logo from `@wfp/icons` be used.                 |
 | Logo            | `Extended black english from @wfp/icons`      | `string`              | Footer on Desktop Devices, if not set the default logo from `@wfp/icons` be used.                     |
 | metaContent     | `undefined`                                   | `string` `component`  | Footer meta text                                                                                      |
+-->

src/components/Form/_form.scss

@@ -68,14 +68,14 @@
     //box-shadow: 0 2px 0px 0px $support-01;
 
     ~ .#{$prefix}--form-requirement {
-      max-height: rem(200px);
+      //max-height: rem(200px);
       display: block;
     }
   }
 
   .#{$prefix}--form-item--invalid {
     .#{$prefix}--form-requirement {
-      max-height: rem(200px);
+      //max-height: rem(200px);
       display: block;
     }
   }
@@ -90,7 +90,7 @@
     @include typescale('omega');
     margin: $spacing-2xs 0 0;
     max-height: 0;
-    overflow: hidden;
+    //overflow: hidden;
     font-weight: 600;
     line-height: 1.5;
     display: none;

src/components/Input/Input.js

@@ -28,12 +28,12 @@ const Input = ({
 }) => {
   const inputProps = {
     id,
-    onChange: evt => {
+    onChange: (evt) => {
       if (!other.disabled && !other.readOnly) {
         onChange(evt);
       }
     },
-    onClick: evt => {
+    onClick: (evt) => {
       if (!other.disabled && !other.readOnly) {
         onClick(evt);
       }
@@ -66,7 +66,7 @@ const Input = ({
 
   const error = invalid ? (
     <div className="wfp--form-requirement" id={errorId}>
-      {invalidText}
+      {invalid.message ? invalid.message : invalidText}
     </div>
   ) : null;
 

src/components/NumberInput/NumberInput.stories.js

@@ -1,41 +1,27 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import markdown from './README.mdx';
 import { action } from '@storybook/addon-actions';
-
-import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
 import NumberInput from '.';
-import NumberInputSkeleton from './NumberInput.Skeleton';
 
-const props = () => ({
-  className: 'some-class',
-  id: 'tj-input',
-  addonBefore: text('addonBefore', '€'),
-  addonAfter: text('addonAfter', '$'),
-  formItemClassName: text(
-    'Form item className (formItemClassName)',
-    'some-form-item-class'
-  ),
-  labelText: text('Label text (labelText)', 'Number Input label'),
-  hideControls: boolean('hide controls (hideControls)', false),
-  hideLabel: boolean('No label (hideLabel)', false),
-  min: number('Minimum value (min)', 0),
-  max: number('Maximum value (max)', 100),
-  value: number('Value (value)', 50),
-  step: number('Step of up/down arrow (step)', 10),
-  disabled: boolean('Disabled (disabled)', false),
-  invalid: boolean('Show form validation UI (invalid)', false),
-  invalidText: text(
-    'Form validation UI content (invalidText)',
-    'Number is not valid'
-  ),
-  helperText: text('Helper text (helperText)', 'Optional helper text.'),
-  light: boolean('Light variant (light)', false),
-  onChange: action('onChange'),
-  onClick: action('onClick'),
-  allowEmpty: boolean('Allow empty value (allowEmpty)', false),
-});
+export default {
+  title: 'Components/NumberInput',
+  component: NumberInput,
+  parameters: {
+    componentSubtitle: 'Component',
+    mdx: markdown,
+  },
+};
+
+export const Regular = (args) => <NumberInput {...args} />;
+
+const description = `
+You can customize the content by using \`BannerNavigation\`.
+`;
 
-storiesOf('Components|NumberInput', module)
-  .addDecorator(withKnobs)
-  .add('Default', () => <NumberInput {...props()} />)
-  .add('skeleton', () => <NumberInputSkeleton />);
+Regular.story = {
+  parameters: {
+    docs: {
+      storyDescription: description,
+    },
+  },
+};

src/components/NumberInput/NumberInput.stories.js.legacy

@@ -0,0 +1,41 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
+import NumberInput from '.';
+import NumberInputSkeleton from './NumberInput.Skeleton';
+
+const props = () => ({
+  className: 'some-class',
+  id: 'tj-input',
+  addonBefore: text('addonBefore', '€'),
+  addonAfter: text('addonAfter', '$'),
+  formItemClassName: text(
+    'Form item className (formItemClassName)',
+    'some-form-item-class'
+  ),
+  labelText: text('Label text (labelText)', 'Number Input label'),
+  hideControls: boolean('hide controls (hideControls)', false),
+  hideLabel: boolean('No label (hideLabel)', false),
+  min: number('Minimum value (min)', 0),
+  max: number('Maximum value (max)', 100),
+  value: number('Value (value)', 50),
+  step: number('Step of up/down arrow (step)', 10),
+  disabled: boolean('Disabled (disabled)', false),
+  invalid: boolean('Show form validation UI (invalid)', false),
+  invalidText: text(
+    'Form validation UI content (invalidText)',
+    'Number is not valid'
+  ),
+  helperText: text('Helper text (helperText)', 'Optional helper text.'),
+  light: boolean('Light variant (light)', false),
+  onChange: action('onChange'),
+  onClick: action('onClick'),
+  allowEmpty: boolean('Allow empty value (allowEmpty)', false),
+});
+
+storiesOf('Components|NumberInput', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => <NumberInput {...props()} />)
+  .add('skeleton', () => <NumberInputSkeleton />);

src/components/NumberInput/README.md → src/components/NumberInput/README.mdx

@@ -1,10 +1,12 @@
 **NumberInput** are used to let the user enter a number. They include built-in validation to reject non-numerical entries. They provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.
 
+<!--
 ### Usage with react
 ```js
 import { NumberInput } from '@wfp/ui';
 ```
 
 ```js
 <NumberInput name="inputname" />
-```
+```
+-->

src/components/Pagination/_pagination.scss

@@ -9,7 +9,7 @@ $css--helpers: true;
 @import '../../globals/scss/css--helpers';
 @import '../../globals/scss/import-once';
 @import '../Select/select';
-@import '../TextInput/text-input';
+//@import '../TextInput/text-input';
 
 @include exports('pagination') {
   .#{$prefix}--data-table-v2-container + .#{$prefix}--pagination {