add editorconfig and update variants system

Author: tonifisler

.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+# change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# we recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+# PHP should follow the PSR-2 standard
+# https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md
+[*.php]
+indent_size = 4
+
+[{package,bower}.json]
+indent_style = space
+indent_size = 2

src/components/App/App.js

@@ -29,7 +29,13 @@ class App extends Component {
       const slug = val.split('/')[val.split('/').length - 1];
       const content = this.getMarkup(val, slug);
       const config = yaml.load(this.fixPath(`${val}/${slug}.yml`));
-      const variants = config && config.variants ? config.variants.map((variant) => this.getMarkup(val, `${slug}-${variant}`)) : null;
+      const variants = config && config.variants ? Object.keys(config.variants).map((key) => {
+        return {
+          title: config.variants[key],
+          twig: this.getMarkup(val, `${slug}-${key}`),
+        };
+      }) : null;
+      console.log(variants);
       const component = { config, content, slug, variants };
 
       if (val.includes('/atoms/')) acc.atoms.push(component);

src/views/Item/Item.css

@@ -1,10 +1,3 @@
-.tlbx-item {
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  padding: 20px;
-  background: #fff;
-}
-
 .tlbx-item-code {
   margin: 2rem 0 0;
 }

src/views/Item/Item.js

@@ -11,12 +11,15 @@ registerLanguage('html', xml);
 
 class Item extends Component {
   render() {
+    const title = this.props.title && <h3 className="tlbx-item-title">{this.props.title}</h3>;
+
     return (
       <div className="tlbx-item">
+        {title}
         <div className="tlbx-item-preview" dangerouslySetInnerHTML={{ __html: this.props.children }} />
         <div className="tlbx-item-code">
-          <SyntaxHighlighter 
-            language='html' 
+          <SyntaxHighlighter
+            language='html'
             style={atomOneDark}
           >
             {this.props.children}
@@ -27,4 +30,4 @@ class Item extends Component {
   }
 }
 
-export default inject('store')(observer(Item));
+export default inject('store')(observer(Item));

src/views/Single/Single.js

@@ -34,7 +34,7 @@ class Single extends Component {
 
   getContent(props) {
     const params = props.match.params;
-    const components = props.store.components[params.type]; 
+    const components = props.store.components[params.type];
     const component = components.find(item => item.slug === params.slug);
 
     this.setState({ component, variants: [] });
@@ -44,9 +44,15 @@ class Single extends Component {
     });
 
     if (component.variants) {
-      component.variants.forEach((variant) => {
-        variant.then(twig => {
-          this.setState({ variants: [...this.state.variants, twig.render(this.props.store.data)] });
+      component.variants.forEach((variant, key) => {
+        variant.twig.then(twig => {
+          this.setState({ variants: [
+            ...this.state.variants,
+            {
+              title: variant.title,
+              markup: twig.render(this.props.store.data)
+            }
+          ]});
         });
       });
     }
@@ -55,10 +61,8 @@ class Single extends Component {
   render() {
     const variants = this.state.variants.length > 0 && (
       <div>
-        <h2 className="tlbx-h2">Variants</h2>
-
         {this.state.variants.map((variant, key) => {
-          return <Item key={key}>{variant}</Item>;
+          return <Item key={key} title={variant.title}>{variant.markup}</Item>;
         })}
       </div>
     );
@@ -67,7 +71,7 @@ class Single extends Component {
       <div>
         <h1 className="tlbx-h1">{this.state.component.config.title}</h1>
         <p className="tlbx-notes">{this.state.component.config.notes}</p>
-        
+
         <Item>{this.state.content}</Item>
 
         {variants}
@@ -80,4 +84,4 @@ Single.propTypes = {
   components: PropTypes.object,
 };
 
-export default inject('store')(observer(Single));
+export default inject('store')(observer(Single));