DOCS (updates): add anchors to examples

sanusart · Sep 19, 2019 · 8a50e14 · 8a50e14
1 parent eb322a6
commit 8a50e14
Show file tree

Hide file tree

Showing 17 changed files with 138 additions and 146 deletions.
diff --git a/README.md b/README.md
@@ -96,6 +96,7 @@ and use as:
 | create                                                                                      | bool        | false          | If true, select will create value from search string and fire `onCreateNew` callback prop                                              |
 | createNewLabel                                                                              | string      | "add {search}" | If create set to true, this will be the label of the "add new" component. `{search}` will be replaced by search value                  |
 | disabledLabel                                                                               | string      | "disabled"     | Label shown on disabled field (after) the text                                                                                         |
+| additionalProps                                                                             | object      | null           | Additional props to pass to Select                                                                                                     |
 
 ### Callback props
 

diff --git a/docs/src/examples/AccessDataByPath.js b/docs/src/examples/AccessDataByPath.js
@@ -1,18 +1,21 @@
 import React from 'react';
-import styled from '@emotion/styled';
-
 import Select from '../../../src';
 import { options } from '../options';
+import { Heading } from './components/Heading';
 
 const AccessDataByPath = ({ title }) => (
   <React.Fragment>
-    <Title>
-      <h2>{title}</h2>
-      <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/AccessDataByPath.js">
-        Source
-      </a>
-    </Title>
-    <p>"Label" is accessed via <code>company.catchPhrase</code> nested property of the <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/options.js#L21">options</a> object</p>
+    <Heading
+      title={title}
+      source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/AccessDataByPath.js"
+    />
+    <p>
+      "Label" is accessed via <code>company.catchPhrase</code> nested property of the{' '}
+      <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/options.js#L21">
+        options
+      </a>{' '}
+      object
+    </p>
     <Select
       multi
       options={options}
@@ -30,10 +33,4 @@ const AccessDataByPath = ({ title }) => (
 
 AccessDataByPath.propTypes = {};
 
-const Title = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-`;
-
 export default AccessDataByPath;
diff --git a/docs/src/examples/Basic.js b/docs/src/examples/Basic.js
@@ -1,16 +1,15 @@
 import React from 'react';
 import styled from '@emotion/styled';
-
+import { Heading } from './components/Heading';
 import Select from '../../../src';
 
 const Basic = ({ options, title }) => (
   <React.Fragment>
-    <Title>
-      <h2>{title}</h2>
-      <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Basic.js">
-        Source
-      </a>
-    </Title>
+    <Heading
+      title={title}
+      source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Basic.js"
+    />
+
     <Select
       options={options}
       values={[]}

diff --git a/docs/src/examples/CreateEntries.js b/docs/src/examples/CreateEntries.js
@@ -1,15 +1,14 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import Select from '../../../src';
+import { Heading } from './components/Heading';
 
 const CreateEntries = ({ options, title }) => (
   <React.Fragment>
-    <Title>
-      <h2>{title}</h2>
-      <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/CreateEntries.js">
-        Source
-      </a>
-    </Title>
+    <Heading
+      title={title}
+      source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/CreateEntries.js"
+    />
 
     <p>Type search and hit `Return` key</p>
     <Select

diff --git a/docs/src/examples/CustomContentAndDropdown.js b/docs/src/examples/CustomContentAndDropdown.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Select from '../../../src';
-
 import styled from '@emotion/styled';
+import { Heading } from './components/Heading';
 
 export class CustomContentAndDropdown extends React.Component {
   options = () =>
@@ -69,12 +69,11 @@ export class CustomContentAndDropdown extends React.Component {
   render() {
     return (
       <div>
-        <Title>
-          <h2>{this.props.title}</h2>
-          <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/CustomContentAndDropdown.js">
-            Source
-          </a>
-        </Title>
+        <Heading
+          title={this.props.title}
+          source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/CustomContentAndDropdown.js"
+        />
+
         <StyledSelect
           placeholder="Select"
           multi

diff --git a/docs/src/examples/DropdownAutoPosition.js b/docs/src/examples/DropdownAutoPosition.js
@@ -1,17 +1,19 @@
 import React from 'react';
 import styled from '@emotion/styled';
-
+import { Heading } from './components/Heading';
 import Select from '../../../src';
 
 const DropdownAutoPosition = ({ options, title }) => (
   <React.Fragment>
-    <Title>
-      <h2>{title}</h2>
-      <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/DropdownAutoPosition.js">
-        Source
-      </a>
-    </Title>
-    <p>Scroll the page so the dropdown will have no space to open on the bottom, also changes position when dropdown is open (and <code>closeOnScroll</code> prop is not set or false)</p>
+    <Heading
+      title={title}
+      source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/DropdownAutoPosition.js"
+    />
+
+    <p>
+      Scroll the page so the dropdown will have no space to open on the bottom, also changes
+      position when dropdown is open (and <code>closeOnScroll</code> prop is not set or false)
+    </p>
     <Select
       options={options}
       values={[]}

diff --git a/docs/src/examples/ExternalClear.js b/docs/src/examples/ExternalClear.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import styled from '@emotion/styled';
-
+import { Heading } from './components/Heading';
 import Select from '../../../src';
 
 class ExternalClear extends Component {
@@ -23,12 +23,11 @@ class ExternalClear extends Component {
     const { options, title } = this.props;
     return (
       <React.Fragment>
-        <Title>
-          <h2>{title}</h2>
-          <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/ExternalClear.js">
-            Source
-          </a>
-        </Title>
+        <Heading
+          title={title}
+          source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/ExternalClear.js"
+        />
+
         <p>I can be cleared from outside by setting values to <code>[]</code> <button href={() => null} onClick={() => this.onChange([])}>&times; clear</button></p>
         <p>Values can be added from outside <button href={() => null} onClick={() => this.onSet([options[Math.floor(Math.random() * (10 - 1) + 1)]])}>&raquo; set</button></p>
         <Select

diff --git a/docs/src/examples/ItemRenderer.js b/docs/src/examples/ItemRenderer.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import Select from '../../../src';
+import { Heading } from './components/Heading';
 
 const ItemRenderer = ({ options, title }) => (
   <React.Fragment>
-    <Title>
-      <h2>{title}</h2>
-      <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/ItemRenderer.js">
-        Source
-      </a>
-    </Title>
+    <Heading
+      title={title}
+      source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/ItemRenderer.js"
+    />
+
     <Select
       multi
       options={options}

diff --git a/docs/src/examples/Multi.js b/docs/src/examples/Multi.js
@@ -1,16 +1,15 @@
 import React from 'react';
 import styled from '@emotion/styled';
-
+import { Heading } from './components/Heading';
 import Select from '../../../src';
 
 const Multi = ({ options, title }) => (
   <React.Fragment>
-    <Title>
-      <h2>{title}</h2>
-      <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Multi.js">
-        Source
-      </a>
-    </Title>
+    <Heading
+      title={title}
+      source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Multi.js"
+    />
+
     <Select
       multi
       options={options}

diff --git a/docs/src/examples/NoData.js b/docs/src/examples/NoData.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-
+import { Heading } from './components/Heading';
 import Select from '../../../src';
 
 export class NoData extends React.Component {
@@ -40,12 +40,10 @@ export class NoData extends React.Component {
   render() {
     return (
       <div>
-        <Title>
-          <h2>{this.props.title}</h2>
-          <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/NoData.js">
-            Source
-          </a>
-        </Title>
+        <Heading
+          title={this.props.title}
+          source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/NoData.js"
+        />
 
         <Select
           placeholder="Type to match nothing 😱"
@@ -61,16 +59,8 @@ export class NoData extends React.Component {
   }
 }
 
-NoData.propTypes = {};
-
 export default NoData;
 
-const Title = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-`;
-
 const StyledNoData = styled.div`
   padding: 10px;
   color: #555;

diff --git a/docs/src/examples/OpenOnTop.js b/docs/src/examples/OpenOnTop.js
@@ -1,16 +1,15 @@
 import React from 'react';
 import styled from '@emotion/styled';
-
+import { Heading } from './components/Heading';
 import Select from '../../../src';
 
 const OpenOnTop = ({ options, title }) => (
   <React.Fragment>
-    <Title>
-      <h2>{title}</h2>
-      <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/OpenOnTop.js">
-        Source
-      </a>
-    </Title>
+    <Heading
+      title={title}
+      source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/OpenOnTop.js"
+    />
+
     <Select
       multi
       dropdownPosition="top"
@@ -23,12 +22,4 @@ const OpenOnTop = ({ options, title }) => (
   </React.Fragment>
 );
 
-OpenOnTop.propTypes = {};
-
-const Title = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-`;
-
 export default OpenOnTop;
diff --git a/docs/src/examples/RenderInBody.js b/docs/src/examples/RenderInBody.js
@@ -1,16 +1,15 @@
 import React from 'react';
 import styled from '@emotion/styled';
-
+import { Heading } from './components/Heading';
 import Select from '../../../src';
 
 const RenderInBody = ({ options, title }) => (
   <React.Fragment>
-    <Title>
-      <h2>{title}</h2>
-      <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/RenderInBody.js">
-        Source
-      </a>
-    </Title>
+    <Heading
+      title={title}
+      source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/RenderInBody.js"
+    />
+
     <div style={{ overflow: 'auto', height: '100px' }}>
       <p>
         I am wrapped in: <code>&lt;div style="overflow: auto; height: 100px;"&gt;</code>
@@ -28,12 +27,4 @@ const RenderInBody = ({ options, title }) => (
   </React.Fragment>
 );
 
-RenderInBody.propTypes = {};
-
-const Title = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-`;
-
 export default RenderInBody;
diff --git a/docs/src/examples/Rtl.js b/docs/src/examples/Rtl.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-
+import { Heading } from './components/Heading';
 import Select from '../../../src';
 
 const options = [
@@ -264,12 +264,11 @@ const options = [
 
 const Rtl = ({ title }) => (
   <React.Fragment>
-    <Title id="Right-to-left">
-      <h2>{title}</h2>
-      <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Rtl.js">
-        Source
-      </a>
-    </Title>
+    <Heading
+      title={title}
+      source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Rtl.js"
+    />
+
     <Select
       multi
       options={options}
@@ -284,14 +283,6 @@ const Rtl = ({ title }) => (
   </React.Fragment>
 );
 
-Rtl.propTypes = {};
-
-const Title = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-`;
-
 const StyledNoData = styled.div`
   padding: 10px;
   color: #555;