From f90d8359f3318b9fd5212c1f9bd61cac462d5921 Mon Sep 17 00:00:00 2001
From: Isabelle Viktoria Maciohsek <maciv@hotmail.gr>
Date: Wed, 25 Nov 2020 20:46:35 +0200
Subject: [PATCH] Update snippet descriptions

---
 snippets/Accordion.md        |  2 +-
 snippets/PasswordRevealer.md | 11 +++++-----
 snippets/Select.md           | 29 +++++++++++++++------------
 snippets/Slider.md           | 28 ++++++++++++++++++--------
 snippets/Tabs.md             | 39 ++++++++++++++++++++++++------------
 snippets/TextArea.md         | 25 ++++++++++++-----------
 6 files changed, 81 insertions(+), 53 deletions(-)

diff --git a/snippets/Accordion.md b/snippets/Accordion.md
index 3cea98a36..82a215d5b 100644
--- a/snippets/Accordion.md
+++ b/snippets/Accordion.md
@@ -8,7 +8,7 @@ Renders an accordion menu with multiple collapsible content elements.
 - Define an `AccordionItem` component, that renders a `<button>` which is used to update the component and notify its parent via the `handleClick` callback.
 - Use the `isCollapsed` prop in `AccordionItem` to determine its appearance and set an appropriate `className`.
 - Define an `Accordion` component that uses the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
-- Filter `children` to remove unnecessary nodes expect for `AccordionItem` by identifying the function's name.
+- Filter `children` to remove unnecessary nodes except for `AccordionItem` by identifying the function's name.
 - Use `Array.prototype.map()` on the collected nodes to render the individual collapsiple elements.
 - Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.
 - `changeItem` executes the passed callback, `onItemClick`, and updates `bindIndex` based on the clicked element.
diff --git a/snippets/PasswordRevealer.md b/snippets/PasswordRevealer.md
index 1d9b1507f..11f325b2b 100644
--- a/snippets/PasswordRevealer.md
+++ b/snippets/PasswordRevealer.md
@@ -5,18 +5,17 @@ tags: components,input,state,beginner
 
 Renders a password input field with a reveal button.
 
-- Use the `React.useState()` hook to create the `shown` state variable and set its value to `false`.
-- Use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `"text"` and `"password"`.
+- Use the `useState()` hook to create the `shown` state variable and set its value to `false`.
+- When the `<button>` is clicked, execute `setShown`, toggling the `type` of the `<input>` between `"text"` and `"password"`.
 
 ```jsx
 const PasswordRevealer = ({ value }) => {
   const [shown, setShown] = React.useState(false);
-
   return (
-    <div>
-      <input type={shown ? 'text' : 'password'} value={value} onChange={() => {}} />
+    <>
+      <input type={shown ? 'text' : 'password'} value={value} />
       <button onClick={() => setShown(!shown)}>Show/Hide</button>
-    </div>
+    </>
   );
 };
 ```
diff --git a/snippets/Select.md b/snippets/Select.md
index 9805f94d4..ff721085c 100644
--- a/snippets/Select.md
+++ b/snippets/Select.md
@@ -3,24 +3,23 @@ title: Select
 tags: components,input,beginner
 ---
 
-Renders a `<select>` element that uses a callback function to pass its value to the parent component.
+Renders an uncontrolled `<select>` element that uses a callback function to pass its value to the parent component.
 
-- Use object destructuring to set defaults for certain attributes of the `<select>` element.
-- Render a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
-- Use the `selected` attribute to define the `defaultValue` of the `<select>` element.
-- Use destructuring on the `values` array to pass an array of `value` and `text` elements.
+- Use the the `selectedValue` prop as the `defaultValue` of the `<select>` element to set its initial value..
+- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
+- Use `Array.prototype.map()` on the `values` array to create an `<option>` element for each passed value. 
+- Each item in `values` must be a 2-element array, where the first element is the `value` of the item and the second one is the displayed text for it.
 
 ```jsx
-const Select = ({ values, callback, disabled = false, readonly = false, selected }) => {
+const Select = ({ values, onValueChange, selectedValue, ...rest }) => {
   return (
     <select
-      disabled={disabled}
-      readOnly={readonly}
-      defaultValue={selected}
-      onChange={({ target: { value } }) => callback(value)}
+      defaultValue={selectedValue}
+      onChange={({ target: { value } }) => onValueChange(value)}
+      {...rest}
     >
       {values.map(([value, text]) => (
-        <option value={value}>
+        <option key={value} value={value}>
           {text}
         </option>
       ))}
@@ -34,10 +33,14 @@ const choices = [
   ['grapefruit', 'Grapefruit'],
   ['lime', 'Lime'],
   ['coconut', 'Coconut'],
-  ['mango', 'Mango']
+  ['mango', 'Mango'],
 ];
 ReactDOM.render(
-  <Select values={choices} selected="lime" callback={val => console.log(val)} />,
+  <Select
+    values={choices}
+    selectedValue="lime"
+    onValueChange={val => console.log(val)}
+  />,
   document.getElementById('root')
 );
 ```
diff --git a/snippets/Slider.md b/snippets/Slider.md
index ff53492d0..81c06bd22 100644
--- a/snippets/Slider.md
+++ b/snippets/Slider.md
@@ -3,24 +3,36 @@ title: Slider
 tags: components,input,beginner
 ---
 
-Renders a slider element that uses a callback function to pass its value to the parent component.
+Renders an uncontrolled range input element that uses a callback function to pass its value to the parent component.
 
-- Use object destructuring to set defaults for certain attributes of the `<input>` element.
-- Render an `<input>` element of type `"range"` and the appropriate attributes, use the `callback` function in the `onChange` event to pass the value of the input to the parent.
+- Set the `type` of the `<input>` element to `"range"` to create a slider.
+- Use the `defaultValue` passed down from the parent as the uncontrolled input field's initial value.
+- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
 
 ```jsx
-const Slider = ({ callback, disabled = false, readOnly = false }) => {
+const Slider = ({ 
+  min = 0,
+  max = 100,
+  defaultValue,
+  onValueChange,
+  ...rest
+}) => {
   return (
     <input
       type="range"
-      disabled={disabled}
-      readOnly={readOnly}
-      onChange={({ target: { value } }) => callback(value)}
+      min={min}
+      max={max}
+      defaultValue={defaultValue}
+      onChange={({ target: { value } }) => onValueChange(value)}
+      {...rest}
     />
   );
 };
 ```
 
 ```jsx
-ReactDOM.render(<Slider callback={val => console.log(val)} />, document.getElementById('root'));
+ReactDOM.render(
+  <Slider onValueChange={val => console.log(val)} />,
+  document.getElementById('root')
+);
 ```
diff --git a/snippets/Tabs.md b/snippets/Tabs.md
index 1ec81f40e..e1c7002d1 100644
--- a/snippets/Tabs.md
+++ b/snippets/Tabs.md
@@ -5,11 +5,11 @@ tags: components,state,children,intermediate
 
 Renders a tabbed menu and view component.
 
-- Define a `TabItem` component, pass it to the `Tab` and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `children`.
-- Use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
-- Use `Array.prototype.map()` on the collected nodes to render the `tab-menu` and `tab-view`.
-- Define `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`.
-- `changeTab` executes the passed callback, `onTabClick` and updates `bindIndex`, which in turn causes a re-render, evaluating the `style` and `className` of the `tab-view` items and `tab-menu` buttons according to their `index`.
+- Define a `Tabs` component that uses the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
+- Define a `TabItem` component and filter `children` passed to the `Tabs` component to remove unnecessary nodes except for `TabItem` by identifying the function's name.
+- Define `changeTab`, which will be executed when clicking a `<button>` from the menu.
+- `changeTab` executes the passed callback, `onTabClick`, and updates `bindIndex` based on the clicked element.
+- Use `Array.prototype.map()` on the collected nodes to render the menu and view of the tabs, using the value of `binIndex` to determine the active tab and apply the correct `className`.
 
 ```css
 .tab-menu > button {
@@ -19,23 +19,31 @@ Renders a tabbed menu and view component.
   border-bottom: 2px solid transparent;
   background: none;
 }
+
 .tab-menu > button.focus {
   border-bottom: 2px solid #007bef;
 }
+
 .tab-menu > button:hover {
   border-bottom: 2px solid #007bef;
 }
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.selected {
+  display: block;
+}
 ```
 
 ```jsx
-const TabItem = props => {
-  return <div {...props} />;
-};
+const TabItem = props => <div {...props} />;
 
 const Tabs = ({ defaultIndex = 0, onTabClick, children }) => {
   const [bindIndex, setBindIndex] = React.useState(defaultIndex);
   const changeTab = newIndex => {
-    if (typeof onTabClick === 'function') onTabClick(newIndex);
+    if (typeof onItemClick === 'function') onItemClick(itemIndex);
     setBindIndex(newIndex);
   };
   const items = children.filter(item => item.type.name === 'TabItem');
@@ -44,7 +52,11 @@ const Tabs = ({ defaultIndex = 0, onTabClick, children }) => {
     <div className="wrapper">
       <div className="tab-menu">
         {items.map(({ props: { index, label } }) => (
-          <button onClick={() => changeTab(index)} className={bindIndex === index ? 'focus' : ''}>
+          <button
+            key={`tab-btn-${index}`}
+            onClick={() => changeTab(index)}
+            className={bindIndex === index ? 'focus' : ''}
+          >
             {label}
           </button>
         ))}
@@ -53,9 +65,10 @@ const Tabs = ({ defaultIndex = 0, onTabClick, children }) => {
         {items.map(({ props }) => (
           <div
             {...props}
-            className="tab-view_item"
-            key={props.index}
-            style={{ display: bindIndex === props.index ? 'block' : 'none' }}
+            className={`tab-content ${
+              bindIndex === props.index ? 'selected' : ''
+            }`}
+            key={`tab-content-${props.index}`}
           />
         ))}
       </div>
diff --git a/snippets/TextArea.md b/snippets/TextArea.md
index 560f76d43..f4fba5372 100644
--- a/snippets/TextArea.md
+++ b/snippets/TextArea.md
@@ -3,28 +3,26 @@ title: TextArea
 tags: components,input,beginner
 ---
 
-Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.
+Renders an uncontrolled `<textarea>` element that uses a callback function to pass its value to the parent component.
 
-- Use object destructuring to set defaults for certain attributes of the `<textarea>` element.
-- Render a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
+- Use the `defaultValue` passed down from the parent as the uncontrolled input field's initial value.
+- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
 
 ```jsx
 const TextArea = ({
-  callback,
   cols = 20,
   rows = 2,
-  disabled = false,
-  readOnly = false,
-  placeholder = ''
+  defaultValue,
+  onValueChange,
+  ...rest
 }) => {
   return (
     <textarea
       cols={cols}
       rows={rows}
-      disabled={disabled}
-      readOnly={readOnly}
-      placeholder={placeholder}
-      onChange={({ target: { value } }) => callback(value)}
+      defaultValue={defaultValue}
+      onChange={({ target: { value } }) => onValueChange(value)}
+      {...rest}
     />
   );
 };
@@ -32,7 +30,10 @@ const TextArea = ({
 
 ```jsx
 ReactDOM.render(
-  <TextArea placeholder="Insert some text here..." callback={val => console.log(val)} />,
+  <TextArea
+    placeholder="Insert some text here..."
+    onValueChange={val => console.log(val)}
+  />,
   document.getElementById('root')
 );
 ```