feat(inputs): read-only state added and other changes

.storybook/_container.scss

@@ -471,12 +471,19 @@ body {
 }
 
 .intro-hero {
+  height: 30vw;
+  background: $brand-01;
+
   img {
     margin-top: 0;
   }
 
   .intro-hero-container {
-    padding: 13vw 0;
+    // padding: 1vw 0;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   @include breakpoint(bp--lg--major) {

.storybook/wfp-storybook/index.js

@@ -6,7 +6,7 @@ export const withNotes = makeDecorator({
     const contextName = context.kind.includes('Templates')
       ? context.name
       : context.kind
-          .replace('Documentation|', '')
+          .replace('Design|', '')
           .replace('Components|', '')
           .replace('Navigation|', '');
 

src/components/BannerNavigation/BannerNavigation-story.js

@@ -7,7 +7,7 @@ import { BannerNavigationWithContent } from './BannerNavigationWithContent';
 import Search from '../Search';
 import Link from '../Link';
 
-storiesOf('Navigation|BannerNavigation', module)
+storiesOf('Components|BannerNavigation', module)
   .add('Default', () => (
     <BannerNavigation>
       <BannerNavigationItem>

src/components/Checkbox/Checkbox-story.js

@@ -16,7 +16,7 @@ const props = () => ({
   onChange: action('onChange'),
 });
 
-storiesOf('Forms|Checkbox', module)
+storiesOf('Components|Checkbox', module)
   .addDecorator(withKnobs)
   .add('checked', () => {
     const checkboxProps = props();

src/components/DatePicker/DatePicker-story.js

@@ -80,7 +80,7 @@ const props = {
   }),
 };
 
-storiesOf('Forms|DatePicker', module)
+storiesOf('Components|DatePicker', module)
   .addDecorator(withKnobs)
   .add('SingleDatePicker (experimental)', () => (
     <SingleDatePickerInput {...props.datePicker()} />
@@ -89,7 +89,7 @@ storiesOf('Forms|DatePicker', module)
     <DateRangePickerInput {...props.dateRangePicker()} />
   ));
 
-storiesOf('Forms|DatePicker', module)
+storiesOf('Components|DatePicker', module)
   .addDecorator(withKnobs)
   .addDecorator(story => (
     <Provider store={store}>

src/components/FileUploader/FileUploader-story.js

@@ -68,7 +68,7 @@ const props = {
   }),
 };
 
-storiesOf('Forms|FileUploader (draft)', module)
+storiesOf('Components|FileUploader (draft)', module)
   .addDecorator(withKnobs)
   .addParameters({ jest: ['FileUploader-test'] })
   .add('FileUploaderButton', () => (

src/components/Footer/Footer-story.js

@@ -6,7 +6,7 @@ import { withKnobs, select, text } from '@storybook/addon-knobs/react';
 import Footer from './Footer';
 import Link from '../Link';
 
-storiesOf('Navigation|Footer', module)
+storiesOf('Components|Footer', module)
   .addDecorator(withKnobs)
   .addParameters({ jest: ['Footer-test'] })
   .add('Internal', () => {

src/components/Form/Form-story.js

@@ -126,7 +126,7 @@ const buttonEvents = {
   className: 'some-class',
 };
 
-storiesOf('Forms|Form', module)
+storiesOf('Components|Form', module)
   .addDecorator(withKnobs)
   .add('Default', () => (
     <Form {...additionalProps}>

src/components/FormControls/FormControls-story.js

@@ -57,7 +57,7 @@ const props = {
   }),
 };
 
-storiesOf('Forms|FormControls', module)
+storiesOf('Components|FormControls', module)
   .addDecorator(withKnobs)
   .addDecorator(story => <div style={{ width: '60vw' }}>{story()}</div>)
   .add('Default (Wizard form)', () => (

src/components/FormError/FormError-story.js

@@ -27,7 +27,7 @@ const props = {
   }),
 };
 
-storiesOf('Forms|FormError', module)
+storiesOf('Components|FormError', module)
   .addDecorator(withKnobs)
   .addParameters({ jest: ['FormError-test'] })
   .add('Default (experimental)', () => <FormError {...props.formError()} />);

src/components/FormGroup/FormGroup-story.js

@@ -17,7 +17,7 @@ const TextInputProps = {
   placeholder: 'Placeholder text',
 };
 
-storiesOf('Forms|FormGroup', module).add('Default', () => (
+storiesOf('Components|FormGroup', module).add('Default', () => (
   <FormGroup {...fieldsetCheckboxProps} className="wfp--form-long">
     <TextInput {...TextInputProps} />
     <TextInput {...TextInputProps} />

src/components/FormHint/FormHint-story.js

@@ -11,7 +11,7 @@ const props = () => ({
   children: text('Label text (labelText)', 'Lorem Ipsum'),
 });
 
-storiesOf('Forms|FormHint', module)
+storiesOf('Components|FormHint', module)
   .addDecorator(withKnobs)
   .add('Default (experimental)', () => (
     <label className="wfp--label" htmlFor="input">

src/components/FormItem/FormItem-story.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import FormItem from './FormItem';
 import NumberInput from '../NumberInput';
 
-storiesOf('Forms|FormItem', module).add('Default', () => (
+storiesOf('Components|FormItem', module).add('Default', () => (
   <FormItem>
     <NumberInput id="number-input-1" />
   </FormItem>

src/components/FormLabel/FormLabel-story.js

@@ -6,6 +6,6 @@ const additionalProps = {
   className: 'some-class',
 };
 
-storiesOf('Forms|FormLabel', module).add('Default', () => (
+storiesOf('Components|FormLabel', module).add('Default', () => (
   <FormLabel {...additionalProps}>Label</FormLabel>
 ));

src/components/FormWizard/FormWizard-story.js

@@ -7,7 +7,7 @@ const props = {
   tabs: () => ({}),
 };
 
-storiesOf('Forms|FormWizard', module)
+storiesOf('Components|FormWizard', module)
   .addDecorator(withKnobs)
 
   .add('Default', () => (

src/components/Icon/Icon.js

@@ -24,6 +24,7 @@ export function svgShapes(svgData) {
             cx: circle.cx,
             cy: circle.cy,
             r: circle.r,
+            fill: circle.fill,
             key: `circle${index}`,
           };
 

src/components/InfoBar/InfoBar-story.js

@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import InfoBar from './InfoBar';
 import Link from '../Link';
 
-storiesOf('Navigation|InfoBar', module)
+storiesOf('Components|InfoBar', module)
   .addDecorator(story => <div style={{ width: '100vw' }}>{story()}</div>)
   .add('Default', () => (
     <InfoBar>

src/components/MainNavigation/MainNavigation-story.js

@@ -21,7 +21,7 @@ import Search from '../Search';
 import Link from '../Link';
 import User from '../User';
 
-storiesOf('Navigation|MainNavigation', module).add('default', () => (
+storiesOf('Components|MainNavigation', module).add('default', () => (
   <MainNavigation logo={<a href="http://www.wfp.org">Application name</a>}>
     {({ onChangeSub }) => {
       return (

src/components/MainNavigation/MainNavigationRtl-story.js

@@ -9,7 +9,7 @@ import Search from '../Search';
 import Link from '../Link';
 import User from '../User';
 
-storiesOf('Navigation|MainNavigation', module)
+storiesOf('Components|MainNavigation', module)
   .addDecorator(story => <div style={{ direction: 'rtl' }}>{story()}</div>)
   .add(
     'Right to left',

src/components/NumberInput/NumberInput-story.js

@@ -28,7 +28,7 @@ const props = () => ({
   allowEmpty: boolean('Allow empty value (allowEmpty)', false),
 });
 
-storiesOf('Forms|NumberInput', module)
+storiesOf('Components|NumberInput', module)
   .addDecorator(withKnobs)
   .add('Default', () => <NumberInput {...props()} />)
   .add('skeleton', () => <NumberInputSkeleton />);

src/components/NumberInput/NumberInput.js

@@ -263,6 +263,7 @@ export default class NumberInput extends Component {
 
     const labelClasses = classNames(`${prefix}--label`, {
       [`${prefix}--visually-hidden`]: hideLabel,
+      [`${prefix}--label--disabled`]: other.disabled,
     });
 
     const labelTextComponent = labelText ? (

src/components/RadioButton/RadioButton-story.js

@@ -16,7 +16,7 @@ const radioProps = () => ({
   onChange: action('onChange'),
 });
 
-storiesOf('Forms|RadioButton', module)
+storiesOf('Components|RadioButton', module)
   .addDecorator(withKnobs)
   .add('Default', () => <RadioButton id="radio-1" {...radioProps()} />)
   .add('skeleton', () => (

src/components/RadioButtonGroup/RadioButtonGroup-story.js

@@ -44,7 +44,7 @@ const props = {
   }),
 };
 
-storiesOf('Forms|RadioButtonGroup', module)
+storiesOf('Components|RadioButtonGroup', module)
   .addDecorator(withKnobs)
   .add('Default', () => {
     const radioProps = props.radio();

src/components/ReduxFormWrapper/ReduxFormWrapper-story.js

@@ -91,7 +91,7 @@ const props = {
   }),
 };
 
-storiesOf('Forms|ReduxFormWrapper', module)
+storiesOf('Components|ReduxFormWrapper', module)
   .addDecorator(withKnobs)
   .addDecorator(story => (
     <Provider store={store}>

src/components/ReduxFormWrapper/ReduxFormWrapperRadio-story.js

@@ -10,7 +10,7 @@ import SelectSkeleton from '../Select/Select.Skeleton';
 
 const onSubmit = () => {};
 
-storiesOf('Forms|ReduxFormWrapper', module)
+storiesOf('Components|ReduxFormWrapper', module)
   .addDecorator(withKnobs)
   .add('RadioButton (react-final-form)', () => {
     return (

src/components/ReduxFormWrapper/ReduxFormWrapperReactSelect-story.js

@@ -16,7 +16,7 @@ const options = [
   { value: 'vanilla', label: 'Vanilla' },
 ];
 
-storiesOf('Forms|ReduxFormWrapper', module)
+storiesOf('Components|ReduxFormWrapper', module)
   .addDecorator(withKnobs)
 
   .addDecorator(story => (

src/components/ReduxFormWrapper/ReduxFormWrapperSelect-story.js

@@ -11,7 +11,7 @@ import SelectSkeleton from '../Select/Select.Skeleton';
 
 const onSubmit = () => {};
 
-storiesOf('Forms|ReduxFormWrapper', module)
+storiesOf('Components|ReduxFormWrapper', module)
   .addDecorator(withKnobs)
   .add('Select (react-final-form)', () => {
     return (

src/components/ReduxFormWrapper/ReduxFormWrapperToggle-story.js

@@ -10,7 +10,7 @@ import SelectSkeleton from '../Select/Select.Skeleton';
 
 const onSubmit = () => {};
 
-storiesOf('Forms|ReduxFormWrapper', module)
+storiesOf('Components|ReduxFormWrapper', module)
   .addDecorator(withKnobs)
   .add('Toggle (react-final-form)', () => {
     return (

src/components/SecondaryNavigation/SecondaryNavigation-story.js

@@ -22,7 +22,7 @@ const props = {
   },
 };
 
-storiesOf('Navigation|SecondaryNavigation', module)
+storiesOf('Components|SecondaryNavigation', module)
   .add('default', () => (
     <SecondaryNavigation additional="additional Information">
       <Breadcrumb>

src/components/Select/Select.js

@@ -9,12 +9,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { iconCaretDown } from '@wfp/icons';
-import settings from '../../globals/js/settings';
+
 import Icon from '../Icon';
 import { componentsX } from '../../internal/FeatureFlags';
 //import ChevronDownGlyph from '@carbon/icons-react/lib/chevron--down/index';
 //import WarningFilled16 from '@carbon/icons-react/lib/warning--filled/16';
-
+import settings from '../../globals/js/settings';
 const { prefix } = settings;
 
 const Select = React.forwardRef(
@@ -47,7 +47,7 @@ const Select = React.forwardRef(
     });
     const labelClasses = classNames(`${prefix}--label`, {
       [`${prefix}--visually-hidden`]: hideLabel,
-      [`${prefix}--label--disabled`]: disabled,
+      [`${prefix}--label--disabled`]: other.disabled,
     });
     const errorId = `${id}-error-msg`;
     const error = invalid ? (

src/components/Slider/Slider.js

@@ -1,9 +1,12 @@
 import React, { Component } from 'react';
+import { sliderValuePropSync } from '../../internal/FeatureFlags';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import isEqual from 'lodash.isequal';
 import TextInput from '../TextInput';
-import { sliderValuePropSync } from '../../internal/FeatureFlags';
+
+import settings from '../../globals/js/settings';
+const { prefix } = settings;
 
 const defaultFormatLabel = (value, label) => {
   return typeof label === 'function' ? label(value) : `${value}${label}`;
@@ -376,8 +379,9 @@ export default class Slider extends Component {
 
     const errorId = id + '-error-msg';
 
-    const labelClasses = classNames('wfp--label', {
-      'wfp--visually-hidden': hideLabel,
+    const labelClasses = classNames(`${prefix}--label`, {
+      [`${prefix}--visually-hidden`]: hideLabel,
+      [`${prefix}--label--disabled`]: other.disabled,
     });
 
     const label = labelText ? (

src/components/StepNavigation/StepNavigation-story.js

@@ -17,7 +17,7 @@ const props = () => ({
   handleTabClick: handleTabClick,
 });
 
-storiesOf('Navigation|StepNavigation', module)
+storiesOf('Components|StepNavigation', module)
   .addDecorator(withKnobs)
 
   .add('Default (experimental)', () => (

src/components/SubNavigation/SubNavigation-story.js

@@ -16,7 +16,7 @@ import Search from '../Search';
 import Button from '../Button';
 import Link from '../Link';
 
-storiesOf('Navigation|SubNavigation', module).add(
+storiesOf('Components|SubNavigation', module).add(
   'default',
   /*`
       The SubNavigation is used as a part of the MainNavigation is used across all applications and offers the secondary level navigation items.

src/components/Tabs/Tabs-story.js

@@ -95,7 +95,7 @@ const listElReactRouter = ({ anchor, className, to, exact, match }) => (
   />
 );
 
-storiesOf('Navigation|Tabs', module)
+storiesOf('Components|Tabs', module)
   .addDecorator(withKnobs)
   .add('Default', () => (
     <Tabs {...props.tabs()}>

src/components/TextArea/TextArea.js

@@ -2,6 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
+import settings from '../../globals/js/settings';
+const { prefix } = settings;
+
 const TextArea = ({
   className,
   id,
@@ -32,8 +35,9 @@ const TextArea = ({
   const textareaClasses = classNames('wfp--text-area', className, {
     'wfp--text-area--light': light,
   });
-  const labelClasses = classNames('wfp--label', {
-    'wfp--visually-hidden': hideLabel,
+  const labelClasses = classNames(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: other.disabled,
   });
 
   const label = labelText ? (

src/components/TextArea/Textarea-story.js

@@ -8,6 +8,7 @@ import TextAreaSkeleton from '../TextArea/TextArea.Skeleton';
 const TextAreaProps = () => ({
   className: 'some-class',
   disabled: boolean('Disabled (disabled)', false),
+  readOnly: boolean('Read-only (readOnly)', false),
   light: boolean('Light variant (light)', false),
   hideLabel: boolean('No label (hideLabel)', false),
   labelText: text('Label text (labelText)', 'Text Area label'),
@@ -25,7 +26,7 @@ const TextAreaProps = () => ({
   onClick: action('onClick'),
 });
 
-storiesOf('Forms|TextArea', module)
+storiesOf('Components|TextArea', module)
   .addDecorator(withKnobs)
   .add('Default', () => <TextArea {...TextAreaProps()} />)
   .add('skeleton', () => <TextAreaSkeleton />);