chore(Stories): put linkedStoryGroup and hasPlayground consistenly (#31)

algolia · Apr 13, 2017 · acdf5f8 · acdf5f8
1 parent 52a1212
commit acdf5f8
Show file tree

Hide file tree

Showing 17 changed files with 126 additions and 111 deletions.
diff --git a/stories/3rdPartiesIntegration.stories.js → stories/3rdPartyIntegrations.stories.js b/stories/3rdPartiesIntegration.stories.js → stories/3rdPartyIntegrations.stories.js
@@ -7,7 +7,7 @@ import Rheostat from 'rheostat';
 const stories = storiesOf('Integration With Other Libraries', module);
 
 stories.add('Airbnb Rheostat', () => (
-  <WrapWithHits>
+  <WrapWithHits linkedStoryGroup="3rdPartyIntegrations">
     <ConnectedRange attributeName="price" />
   </WrapWithHits>
 ));

diff --git a/stories/ClearAll.stories.js b/stories/ClearAll.stories.js
@@ -8,32 +8,31 @@ const stories = storiesOf('ClearAll', module);
 
 stories.addDecorator(withKnobs);
 
-stories.add('with refinements to clear', () => (
-  <WrapWithHits linkedStoryGroup="ClearAll">
-    <div>
-      <ClearAll />
-      <div style={{ display: 'none' }}>
-        <RefinementList
-          attributeName="category"
-          defaultRefinement={['Dining']}
-        />
+stories
+  .add('with refinements to clear', () => (
+    <WrapWithHits linkedStoryGroup="ClearAll">
+      <div>
+        <ClearAll />
+        <div style={{ display: 'none' }}>
+          <RefinementList
+            attributeName="category"
+            defaultRefinement={['Dining']}
+          />
+        </div>
       </div>
-    </div>
-  </WrapWithHits>
-));
-
-stories.add('nothing to clear', () => (
-  <WrapWithHits linkedStoryGroup="ClearAll">
-    <ClearAll />
-  </WrapWithHits>
-));
-
-stories.add('clear all refinements and the query', () => (
-  <WrapWithHits linkedStoryGroup="ClearAll">
-    <ClearAll
-      clearsQuery
-      translations={{ reset: 'Clear refinements and query' }}
-    />
-    <RefinementList attributeName="category" defaultRefinement={['Dining']} />
-  </WrapWithHits>
-));
+    </WrapWithHits>
+  ))
+  .add('nothing to clear', () => (
+    <WrapWithHits linkedStoryGroup="ClearAll">
+      <ClearAll />
+    </WrapWithHits>
+  ))
+  .add('clear all refinements and the query', () => (
+    <WrapWithHits linkedStoryGroup="ClearAll">
+      <ClearAll
+        clearsQuery
+        translations={{ reset: 'Clear refinements and query' }}
+      />
+      <RefinementList attributeName="category" defaultRefinement={['Dining']} />
+    </WrapWithHits>
+  ));
diff --git a/stories/Conditional.stories.js b/stories/Conditional.stories.js
@@ -22,7 +22,7 @@ stories
       return <div>{content}</div>;
     });
     return (
-      <WrapWithHits>
+      <WrapWithHits linkedStoryGroup="Conditional">
         <Content />
       </WrapWithHits>
     );
@@ -40,7 +40,7 @@ stories
       return <div>{content}</div>;
     });
     return (
-      <WrapWithHits>
+      <WrapWithHits linkedStoryGroup="Conditional">
         <Content />
       </WrapWithHits>
     );

diff --git a/stories/Configure.stories.js b/stories/Configure.stories.js
@@ -12,13 +12,15 @@ class ConfigureExample extends React.Component {
     super();
     this.state = { hitsPerPage: 3 };
   }
+
   onClick() {
     const hitsPerPage = this.state.hitsPerPage === 3 ? 1 : 3;
     this.setState({ hitsPerPage });
   }
+
   render() {
     return (
-      <WrapWithHits>
+      <WrapWithHits linkedStoryGroup="Configure">
         <Configure hitsPerPage={this.state.hitsPerPage} />
         <button onClick={this.onClick.bind(this)}>Toggle HitsPerPage</button>
       </WrapWithHits>

diff --git a/stories/CurrentRefinements.stories.js b/stories/CurrentRefinements.stories.js
@@ -40,7 +40,7 @@ stories
     </WrapWithHits>
   ))
   .add('with panel', () => (
-    <WrapWithHits>
+    <WrapWithHits linkedStoryGroup="CurrentRefinements">
       <Panel title="Current Refinements">
         <CurrentRefinements />
         <div style={{ display: 'none' }}>
@@ -53,7 +53,7 @@ stories
     </WrapWithHits>
   ))
   .add('with panel but no refinement', () => (
-    <WrapWithHits>
+    <WrapWithHits linkedStoryGroup="CurrentRefinements">
       <Panel title="Current Refinements">
         <CurrentRefinements />
       </Panel>

diff --git a/stories/HierarchicalMenu.stories.js b/stories/HierarchicalMenu.stories.js
@@ -26,15 +26,15 @@ stories
     </WrapWithHits>
   ))
   .add('with default selected item', () => (
-    <WrapWithHits>
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="HierarchicalMenu">
       <HierarchicalMenu
         attributes={['category', 'sub_category', 'sub_sub_category']}
         defaultRefinement="Eating"
       />
     </WrapWithHits>
   ))
   .add('with show more', () => (
-    <WrapWithHits>
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="HierarchicalMenu">
       <HierarchicalMenu
         attributes={['category', 'sub_category', 'sub_sub_category']}
         limitMin={2}
@@ -44,7 +44,7 @@ stories
     </WrapWithHits>
   ))
   .add('with panel', () => (
-    <WrapWithHits>
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="HierarchicalMenu">
       <Panel title="Category">
         <HierarchicalMenu
           attributes={['category', 'sub_category', 'sub_sub_category']}
@@ -53,7 +53,11 @@ stories
     </WrapWithHits>
   ))
   .add('with panel but no refinement', () => (
-    <WrapWithHits searchBox={false}>
+    <WrapWithHits
+      searchBox={false}
+      hasPlayground={true}
+      linkedStoryGroup="HierarchicalMenu"
+    >
       <Panel title="Category">
         <HierarchicalMenu
           attributes={['category', 'sub_category', 'sub_sub_category']}
@@ -65,7 +69,7 @@ stories
     </WrapWithHits>
   ))
   .add('playground', () => (
-    <WrapWithHits>
+    <WrapWithHits linkedStoryGroup="HierarchicalMenu">
       <HierarchicalMenu
         attributes={['category', 'sub_category', 'sub_sub_category']}
         defaultRefinement={text('defaultSelectedItem', 'Bathroom')}

diff --git a/stories/Hits.stories.js b/stories/Hits.stories.js
@@ -15,7 +15,7 @@ stories.add('default', () => (
 ));
 
 stories.add('with custom rendering', () => (
-  <WrapWithHits>
+  <WrapWithHits linkedStoryGroup="Hits">
     <Hits hitComponent={Product} />
   </WrapWithHits>
 ));

diff --git a/stories/HitsPerPage.stories.js b/stories/HitsPerPage.stories.js
@@ -10,7 +10,7 @@ stories.addDecorator(withKnobs);
 
 stories
   .add('default', () => (
-    <WrapWithHits linkedStoryGroup="HitsPerPage">
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="HitsPerPage">
       <HitsPerPage
         defaultRefinement={4}
         items={[
@@ -23,28 +23,15 @@ stories
     </WrapWithHits>
   ))
   .add('without label', () => (
-    <WrapWithHits linkedStoryGroup="HitsPerPage">
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="HitsPerPage">
       <HitsPerPage
         defaultRefinement={4}
         items={[{ value: 2 }, { value: 4 }, { value: 6 }, { value: 8 }]}
       />
     </WrapWithHits>
   ))
-  .add('playground', () => (
-    <WrapWithHits>
-      <HitsPerPage
-        defaultRefinement={number('default hits per page', 4)}
-        items={[
-          { value: 2, label: '2 hits per page' },
-          { value: 4, label: '4 hits per page' },
-          { value: 6, label: '6 hits per page' },
-          { value: 8, label: '8 hits per page' },
-        ]}
-      />
-    </WrapWithHits>
-  ))
   .add('inside a panel', () => (
-    <WrapWithHits>
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="HitsPerPage">
       <Panel title="Hits to display">
         <HitsPerPage
           defaultRefinement={number('default hits per page', 4)}
@@ -57,4 +44,17 @@ stories
         />
       </Panel>
     </WrapWithHits>
+  ))
+  .add('playground', () => (
+    <WrapWithHits linkedStoryGroup="HitsPerPage">
+      <HitsPerPage
+        defaultRefinement={number('default hits per page', 4)}
+        items={[
+          { value: 2, label: '2 hits per page' },
+          { value: 4, label: '4 hits per page' },
+          { value: 6, label: '6 hits per page' },
+          { value: 8, label: '8 hits per page' },
+        ]}
+      />
+    </WrapWithHits>
   ));
diff --git a/stories/Menu.stories.js b/stories/Menu.stories.js
@@ -21,12 +21,12 @@ stories
     </WrapWithHits>
   ))
   .add('with default selected item', () => (
-    <WrapWithHits>
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="Menu">
       <Menu attributeName="category" defaultRefinement="Eating" />
     </WrapWithHits>
   ))
   .add('with show more', () => (
-    <WrapWithHits>
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="Menu">
       <Menu
         attributeName="category"
         limitMin={2}
@@ -36,7 +36,7 @@ stories
     </WrapWithHits>
   ))
   .add('with search inside items', () => (
-    <WrapWithHits>
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="Menu">
       <Menu
         attributeName="category"
         withSearchBox
@@ -50,7 +50,7 @@ stories
     </WrapWithHits>
   ))
   .add('with the sort strategy changed', () => (
-    <WrapWithHits>
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="Menu">
       <Menu
         attributeName="category"
         transformItems={items =>
@@ -59,14 +59,18 @@ stories
     </WrapWithHits>
   ))
   .add('with panel', () => (
-    <WrapWithHits>
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="Menu">
       <Panel title="Category">
         <Menu attributeName="category" />
       </Panel>
     </WrapWithHits>
   ))
   .add('with panel but no available refinement', () => (
-    <WrapWithHits searchBox={false}>
+    <WrapWithHits
+      searchBox={false}
+      hasPlayground={true}
+      linkedStoryGroup="Menu"
+    >
       <Panel title="Category">
         <Menu attributeName="category" />
         <div style={{ display: 'none' }}>
@@ -76,7 +80,7 @@ stories
     </WrapWithHits>
   ))
   .add('playground', () => (
-    <WrapWithHits>
+    <WrapWithHits linkedStoryGroup="Menu">
       <Menu
         attributeName="category"
         defaultRefinement={text('defaultSelectedItem', 'Bathroom')}

diff --git a/stories/MultiRange.stories.js b/stories/MultiRange.stories.js
@@ -27,7 +27,7 @@ stories
     </WrapWithHits>
   ))
   .add('with a default range selected', () => (
-    <WrapWithHits>
+    <WrapWithHits linkedStoryGroup="MultiRange">
       <MultiRange
         attributeName="price"
         items={[
@@ -41,7 +41,7 @@ stories
     </WrapWithHits>
   ))
   .add('with some non selectable ranges', () => (
-    <WrapWithHits searchBox={false}>
+    <WrapWithHits searchBox={false} linkedStoryGroup="MultiRange">
       <MultiRange
         attributeName="price"
         items={[
@@ -54,7 +54,7 @@ stories
     </WrapWithHits>
   ))
   .add('with panel', () => (
-    <WrapWithHits>
+    <WrapWithHits linkedStoryGroup="MultiRange">
       <Panel title="Price">
         <MultiRange
           attributeName="price"
@@ -69,7 +69,7 @@ stories
     </WrapWithHits>
   ))
   .add('with panel but no available refinements', () => (
-    <WrapWithHits searchBox={false}>
+    <WrapWithHits searchBox={false} linkedStoryGroup="MultiRange">
       <Panel title="Price">
         <Configure filters="price>200000" />
         <MultiRange

diff --git a/stories/Pagination.stories.js b/stories/Pagination.stories.js
@@ -19,7 +19,7 @@ stories
     </WrapWithHits>
   ))
   .add('with all props', () => (
-    <WrapWithHits>
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="Pagination">
       <Pagination
         showFirst={true}
         showLast={true}
@@ -30,32 +30,36 @@ stories
       />
     </WrapWithHits>
   ))
-  .add('playground', () => (
-    <WrapWithHits>
-      <Pagination
-        showFirst={boolean('show First', true)}
-        showLast={boolean('show Last', true)}
-        showPrevious={boolean('show Previous', true)}
-        showNext={boolean('show Next', true)}
-        pagesPadding={number('pages Padding', 2)}
-        maxPages={number('max Pages', 3)}
-      />
-    </WrapWithHits>
-  ))
   .add('with panel', () => (
-    <WrapWithHits>
+    <WrapWithHits hasPlayground={true} linkedStoryGroup="Pagination">
       <Panel title="Pages">
         <Pagination />
       </Panel>
     </WrapWithHits>
   ))
   .add('with panel but no refinement', () => (
-    <WrapWithHits searchBox={false}>
+    <WrapWithHits
+      searchBox={false}
+      hasPlayground={true}
+      linkedStoryGroup="Pagination"
+    >
       <Panel title="Pages">
         <Pagination />
         <div style={{ display: 'none' }}>
           <SearchBox defaultRefinement="ds" />
         </div>
       </Panel>
     </WrapWithHits>
+  ))
+  .add('playground', () => (
+    <WrapWithHits linkedStoryGroup="Pagination">
+      <Pagination
+        showFirst={boolean('show First', true)}
+        showLast={boolean('show Last', true)}
+        showPrevious={boolean('show Previous', true)}
+        showNext={boolean('show Next', true)}
+        pagesPadding={number('pages Padding', 2)}
+        maxPages={number('max Pages', 3)}
+      />
+    </WrapWithHits>
   ));