From 3fc9de789d17f647e51ad50d08653b6fc3e233e2 Mon Sep 17 00:00:00 2001
From: Noah Overcash <novercash@ebsco.com>
Date: Fri, 5 Jan 2024 09:39:25 -0500
Subject: [PATCH 1/3] Add README for TextArea (#2204)

* Add TextArea readme to storybook

* Add README

* Remove unused type prop

* whitespace cleanup
---
 lib/TextArea/TextArea.js                 |  5 --
 lib/TextArea/readme.md                   | 70 ++++++++++++++++++++++++
 lib/TextArea/stories/TextArea.stories.js |  4 ++
 3 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 lib/TextArea/readme.md

diff --git a/lib/TextArea/TextArea.js b/lib/TextArea/TextArea.js
index c8ad85a58..fd20e5817 100644
--- a/lib/TextArea/TextArea.js
+++ b/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,
diff --git a/lib/TextArea/readme.md b/lib/TextArea/readme.md
new file mode 100644
index 000000000..fcb275d6e
--- /dev/null
+++ b/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>`.
diff --git a/lib/TextArea/stories/TextArea.stories.js b/lib/TextArea/stories/TextArea.stories.js
index 53e163930..409c6d9e2 100644
--- a/lib/TextArea/stories/TextArea.stories.js
+++ b/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;

From cafbd45c8f246c312c87c46e890c0eda9d452e8a Mon Sep 17 00:00:00 2001
From: Noah Overcash <novercash@ebsco.com>
Date: Fri, 5 Jan 2024 09:46:36 -0500
Subject: [PATCH 2/3] Update TextLink README (#2205)

This adds a new example and a few missing props to the readme of `<TextLink>`
---
 lib/TextLink/readme.md | 38 ++++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/lib/TextLink/readme.md b/lib/TextLink/readme.md
index 9ea1bce4d..b82be29fd 100644
--- a/lib/TextLink/readme.md
+++ b/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>

From 2237df6705bd89fd7244bd26be311aec881d157b Mon Sep 17 00:00:00 2001
From: Noah Overcash <novercash@ebsco.com>
Date: Fri, 5 Jan 2024 10:43:28 -0500
Subject: [PATCH 3/3] Fix Popper documentation consistency (#2197)

---
 lib/Popper/Popper.js | 2 ++
 lib/Popper/readme.md | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/lib/Popper/Popper.js b/lib/Popper/Popper.js
index 4e119ef57..fcea7b500 100644
--- a/lib/Popper/Popper.js
+++ b/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;
diff --git a/lib/Popper/readme.md b/lib/Popper/readme.md
index 6f61be879..c772ec7a3 100644
--- a/lib/Popper/readme.md
+++ b/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>` | | |