fix(TextInput): use common Input element for structure

Author: Utzel-Butzel

.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.mdxsrc/components/Footer/README.md renamed to 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;