Merge branch 'master' into cleanup-filtergroups-readme

lib/Checkbox/readme.md

@@ -41,7 +41,7 @@ id | string | HTML id attribute applied to input - will also set the HtmlFor att
 inline | bool | Renders the checkbox inline | `false`
 innerClass | string | Adds a custom class name for the inner element of the component | `undefined`
 inputRef | object or func | Supplies a ref to the rendered `<input>` | `undefined`
-label | string | Renders a label for the checkbox | `undefined`
+label | string, node | Renders a label for the checkbox | `undefined`
 labelClass | string | Adds a custom class name on the `<label>`-element | `undefined`
 name | string | Sets the name of the input | `undefined`
 onBlur | func | Event handler for the input's `onBlur` event | `undefined`

lib/Popper/Popper.js

@@ -18,6 +18,8 @@ export const AVAILABLE_PLACEMENTS = [
   'right-start',
   'right-end',
   'auto',
+  'auto-start',
+  'auto-end',
 ];
 
 const [DEFAULT_PLACEMENT] = AVAILABLE_PLACEMENTS;

lib/Popper/readme.md

@@ -26,4 +26,7 @@ placement | string | Overlay placement. Available values: `auto`, `top`, `bottom
 portal | node | When is provided, overlay renders inside provided portal. | | |
 anchorRef | object | Reference to anchor element |  | yes |
 children | component | Component to be passed as an overlay |  | yes |
-modifiers | object | A set of modifications for extending popper functionality. For more details, please, go to https://popper.js.org/popper-documentation.html#modifiers. | | |
+modifiers | object | A set of modifications for extending popper functionality. For more details, please, [see the Popper.js docs](https://popper.js.org/docs/v1/#modifiers). | | |
+hideIfClosed | boolean | Hides the overlay if the popper is closed (via `display: none`), rather than removing it from the DOM entirely | false | |
+overlayProps | object | Props to add to the `<div>` used as the overlay | `{}` | |
+overlayRef | ref | Grabs a reference for the overlay `<div>` | | |

lib/RadioButtonGroup/RadioButtonGroup.js

@@ -6,13 +6,13 @@ import css from './RadioButtonGroup.css';
 
 const propTypes = {
   children: PropTypes.node.isRequired,
-  error: PropTypes.node,
+  error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  warning: PropTypes.string
+  warning: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
 function RadioButtonGroup(props) {

lib/RadioButtonGroup/readme.md

@@ -4,9 +4,35 @@ Convenient wrapper component for sets of radio buttons. Will pass `name` prop as
 The component will automatically render radio buttons within a `<FieldGroup>` with the value for the `label` prop applied as a `<legend>`. Non-`<RadioButton>` children can also be passed for alternative layouts, but **RadioButtons should still be direct descendants**.
 
 ## Usage
-Example with redux-form `<Field>` component:
 
+Example with react-final-form:
+```js
+<Field label="Acting as" name="subGroup" component={RadioButtonGroup}>
+  <RadioButton label="self" id="actingAsSelf" value="self" />
+  <h4>Sponsor</h4>
+  <RadioButton label="Abbot, Cody" id="actingSponsor001" value="sponsor001" inline />
+  <RadioButton label="Doe, John" id="actingSponsor002" value="sponsor002" inline />
+  <RadioButton label="Martin, Danforth" id="actingSponsor003" value="sponsor003" inline />
+  <RadioButton label="James, Phillip" id="actingSponsor004" value="sponsor004" inline />
+</Field>
 ```
+
+Example with react-final-form via render-prop:
+```js
+<Field name="subGroup" render={(props) =>
+  <RadioButtonGroup {...props} label="Acting as">
+    <RadioButton label="self" id="actingAsSelf" value="self" />
+    <h4>Sponsor</h4>
+    <RadioButton label="Abbot, Cody" id="actingSponsor001" value="sponsor001" inline />
+    <RadioButton label="Doe, John" id="actingSponsor002" value="sponsor002" inline />
+    <RadioButton label="Martin, Danforth" id="actingSponsor003" value="sponsor003" inline />
+    <RadioButton label="James, Phillip" id="actingSponsor004" value="sponsor004" inline />
+  </RadioButtonGroup>
+} />
+```
+
+Example with redux-form:
+```js
 <Field label="Acting as" name="subGroup" component={RadioButtonGroup}>
   <RadioButton label="self" id="actingAsSelf" value="self" />
   <h4>Sponsor</h4>
@@ -21,10 +47,10 @@ Example with redux-form `<Field>` component:
 Name | type | description | default | required |
 --- | --- | --- | --- | --- |
 children | node or array of nodes | Set of `<RadioButton>`s for usage. Can include other tags (headers, spans, etc.) | | &#10004;|
-error | string | | | |
+error | string or node | Error message to display | | |
 label | string or node | Content to render in the `<legend>` tag of the created `<fieldset>`. | | |
 `onBlur` | func |  | |
 `onChange` | func | | |
 `onFocus` | func | | |
 value | string | Sets default value for radio button set - **Not necessary for redux-form - will use the form's initialValues prop instead** | | |
-warning | string | | | |
+warning | string or node | Warning text to display | | |

lib/TextArea/TextArea.js

@@ -65,10 +65,6 @@ class TextArea extends Component {
     required: PropTypes.bool,
     rootClass: PropTypes.string,
     startControl: PropTypes.element,
-    /**
-     * Can be "type" or "number". Standard html attribute.
-     */
-    type: PropTypes.string,
     valid: PropTypes.bool,
     validationEnabled: PropTypes.bool,
     validStylesEnabled: PropTypes.bool,
@@ -81,7 +77,6 @@ class TextArea extends Component {
 
   static defaultProps = {
     newLineOnShiftEnter: false,
-    type: 'text',
     validationEnabled: true,
     validStylesEnabled: false,
     onKeyDown: noop,

lib/TextArea/readme.md

@@ -0,0 +1,70 @@
+# TextArea
+
+A multi-line, resizable text field.
+
+## Usage
+
+Controlled:
+
+```js
+import { TextArea } from '@folio/stripes/components';
+
+const [description, setDescription] = useState('');
+
+<TextArea
+  label="Description"
+  value={description}
+  onChange={e => setDescription(e.target.value)}
+/>
+```
+
+With react-final-form:
+
+```js
+import { Field } from 'react-final-form';
+import { TextArea } from '@folio/stripes/components';
+
+<Field
+  name="description"
+  component={TextArea}
+  label="Description"
+/>
+```
+
+## Props
+
+| Property | Type | Description | Default | Required |
+| --- | --- | --- | --- | --- |
+| `ariaLabel` | string | Provides a custom label for the element<br /> **Deprecated, use `aria-label` instead** | | |
+| `ariaLabelledby` | string | Identify the element which labels the current element<br /> **Deprecated, use `aria-labelledby` instead** | | |
+| `autoFocus` | boolean | If the field should auto-focus on mount | | |
+| `dirty` | boolean | Marks the field as changed, for styling | | |
+| `disabled` | boolean | Disables the input field | | |
+| `endControl` | node | Control or Icon to display at the end of the field | | |
+| `error` | node | An error to show for validation | | |
+| `fitContent` | boolean | Resizes the textarea to show all content as needed | | |
+| `fullWidth` | boolean | If the field should stretch to fill its container | | |
+| `id` | string | Adds a custom ID to the control | | |
+| `inputRef` | ref | Ref to the internal HTMLTextArea | | |
+| `label` | node | The input's label | | |
+| `loading` | boolean | Adds a loading spinner to the control | | |
+| `lockWidth` | boolean | Prevent the user from changing the width | | |
+| `marginBottom0` | boolean | Remove bottom margin | | |
+| `name` | string | The input's name | | |
+| `newLineOnShiftEnter` | boolean | When true: Shift+Enter=newline, Enter=submit<br />When false: whatever the default behavior is | | |
+| `noBorder` | boolean | Removes the border | | |
+| `onChange` | func | Fired anytime internal state changes | | |
+| `onKeyDown` | func | Fired on key down | | |
+| `onSubmitSearch` | func | Event handler for submission, fired when `newLineOnShiftEnter=true` and user presses Enter | | |
+| `onFocus` | func | Fired when the user clicks into the control | | |
+| `readOnly` | boolean | If the control is readonly | | |
+| `required` | boolean | If the field is required | | |
+| `rootClass` | string | Adds a custom class to the root wrapper `<div>` | | |
+| `startControl` | node | Control or Icon to display at the start of the field | | |
+| `valid` | boolean | If true, adds valid styles to the field | | |
+| `validationEnabled` | boolean | If validation styles should be rendered | | |
+| `validStylesEnabled` | boolean | If styles should be shown for valid input | | |
+| `value` | string | The field's value | | |
+| `warning` | node | Inline feedback for the user indicating a validation warning | | |
+
+Additional props are spread onto the `<textarea>`.

lib/TextArea/stories/TextArea.stories.js

@@ -1,7 +1,11 @@
+import withReadme from 'storybook-readme/with-readme';
+
+import readme from '../readme.md';
 import BasicUsage from './BasicUsage';
 
 export default {
   title: 'TextArea',
+  decorators: [withReadme(readme)],
 };
 
 export const _BasicUsage = BasicUsage;

lib/TextLink/readme.md

@@ -2,35 +2,45 @@
 A replacement for the native `<a>` and the react-router-dom `<TextLink>`-component with a11y friendly interaction styles.
 
 ## Usage
-```js
-import { TextLink } from '@folio/stripes/components';
-
+```jsx
 <TextLink to="/users">
-  I'm an internal link
+  I am an internal link
 </TextLink>
+```
 
+```jsx
 <TextLink target="_blank" rel="noopener noreferrer" href="https://folio.org">
-  I'm an external link
+  I am an external link
+</TextLink>
+```
+
+```jsx
+<TextLink element="button" onClick={() => doSomething()}>
+  I am a button element!
 </TextLink>
 ```
 
 ## Props
 Name | Type | Description
 -- | -- | --
-children | node | The content of the component |
-to | string | The path to a page. This renders the react-router-dom `<Link>`-component internally. |
-href | string | The url for a web page. Renders a native `<a>`. Use the `to`-prop for routing. |
+children | node, func | The content of the component.  Function form takes the root className as an argument; see below
+className | string | Adds a class name to the component
+element | string, func | Uses a custom element via tag name or component
+to | string | The path to a page. This renders the react-router-dom `<Link>`-component internally.
+href | string | The url for a web page. Renders a native `<a>`. Use the `to`-prop for routing.
+
+Additional props are passed onto the root element of the component. This component also supports passing a `ref` and 
+the ability to apply a root CSS class to the child element.
 
-The remaining props are passed onto the root element of the component. This component also supports passing a `ref` and 
-the ability to apply a root CSS class to the child element. Now, the TextLink component supports the object parameter 
-`className` and applying a root CSS class to the child element. This change was made to ensure correct inheritance of styles, 
-especially in cases where the children are inline elements with display: inline-flex, and the underline is not inherited.
-```js
+To pass the root CSS class to the child element, pass a render function as the child. This change was made to ensure correct
+inheritance of styles,  especially in cases where the children are inline elements with `display: inline-flex`, and the
+underline is not inherited.
+```jsx
 // In the case that direct style application is required, a child function can be used.
 <TextLink to="/users" ref={yourRefCallback}>
   {({ className }) => (
     <span className={className}>
-      I'm an internal link with custom styles
+      I am an internal link with custom styles
     </span>
   )}
 </TextLink>