Add tile

bokuweb · Jul 25, 2016 · 8f656c9 · 8f656c9
1 parent 7b54192
commit 8f656c9
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 26 deletions.
diff --git a/src/grid/tile/tile.examples.md b/src/grid/tile/tile.examples.md
@@ -4,48 +4,55 @@
 
   ### Tile
 
-    const style = { background: '#ccc' };
+    const style = { background: '#eee', borderRadius: '5px', padding: '10px' };
 
     <Tile context="isAncestor">
       <Tile isVertical size="is8">
         <Tile>
           <Tile context="isParent" isVertical>
             <Tile context="isChild" style={style}>
-              <Title>Vertical...</Title>
-              <Subtitle>Top tile</Subtitle>
+              <Content>
+                <Title>Vertical...</Title>
+                <Subtitle>Top tile</Subtitle>
+              </Content>  
             </Tile>
             <Tile context="isChild" style={style}>
-              <Title>...tiles</Title>
-              <Subtitle>Bottom tile</Subtitle>
+              <Content>
+                <Title>...tiles</Title>
+                <Subtitle>Bottom tile</Subtitle>
+              </Content>                 
             </Tile>
           </Tile>
           <Tile context="isParent">
             <Tile context="isChild" style={style}>
-              <Title>Middle tile</Title>
-              <Subtitle>With an image</Subtitle>
-              <Image size="is4By3" src="http://placehold.it/640x480"/>
+              <Content>
+                <Title>Middle tile</Title>
+                <Subtitle>With an image</Subtitle>
+                <Image size="is4By3" src="http://placehold.it/640x480"/>
+              </Content>
             </Tile>
           </Tile>
         </Tile>
         <Tile context="isParent">
           <Tile context="isChild" style={style}>
-            <Title>Wide tile</Title>
-            <Subtitle>Aligned with the right tile</Subtitle>
             <Content>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+              <Title>Wide tile</Title>
+              <Subtitle>Aligned with the right tile</Subtitle>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
             </Content>
           </Tile>
         </Tile>
       </Tile>
       <Tile context="isParent">
         <Tile context="isChild" style={style}>
-          <Title>Tall tile</Title>
-          <Subtitle>With even more content</Subtitle>
           <Content>
+            <Title>Tall tile</Title>
+            <Subtitle>With even more content</Subtitle>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
             <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
             <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
             </Content>
         </Tile>
       </Tile>
     </Tile>
+
diff --git a/styleguide.config.js b/styleguide.config.js
@@ -13,7 +13,12 @@ module.exports = {
     });
     return webpackConfig;
   },
-  components: 'src/**/*.js',
+  sections: [
+    { name: 'Grid', components: 'src/grid/**/*.js' },
+    { name: 'Elements', components: 'src/elements/**/*.js' },
+    { name: 'Components', components: 'src/components/**/*.js' },
+    { name: 'Layout', components: 'src/layout/**/*.js' },
+  ],
   skipComponentsWithoutExample: true,
   getExampleFilename: componentpath => componentpath.replace(/\.js$/, '.examples.md'),
   resolver: docgen.resolver.findAllComponentDefinitions,

diff --git a/styleguide/build/bundle.js b/styleguide/build/bundle.js
diff --git a/styleguide/index.html b/styleguide/index.html
@@ -24,7 +24,6 @@
              width: 5px;
              height: 5px;
          }
-
          body::-webkit-scrollbar-thumb {
              background: #1fc8db;
              border-radius: 2px;
@@ -135,6 +134,9 @@
              padding: 0 0 16px 0;
              font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
          }
+         ul.ReactStyleguidist-TableOfContents__list {
+             margin: 0px 0 0 12px;
+         }
         </style>
         <div id="app"></div>
         <a href="https://github.com/bokuweb/re-bulma" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#1fc8db; color:#FFF; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

diff --git a/styleguide/templete.html b/styleguide/templete.html
@@ -24,7 +24,6 @@
              width: 5px;
              height: 5px;
          }
-
          body::-webkit-scrollbar-thumb {
              background: #1fc8db;
              border-radius: 2px;
@@ -135,6 +134,9 @@
              padding: 0 0 16px 0;
              font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
          }
+         ul.ReactStyleguidist-TableOfContents__list {
+             margin: 0px 0 0 12px;
+         }
         </style>
         <div id="app"></div>
         <a href="https://github.com/bokuweb/re-bulma" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#1fc8db; color:#FFF; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>