Feature/stij 129: Make inline buttons the default

CHANGELOG.md

@@ -6,6 +6,9 @@ All Notable changes to `digipolisgent/fractal_styleguide_gent-base`.
 * STIJ-63: Remove underlined text from paragraph examples, 
            it is discouraged to use underlined text.
 * STIJ-131: Remove placeholders from all input type fields except search fields.
+* STIJ-129: Changed implementation of button. All buttons are now `inline` by default!
+* STIJ-129: Updated button documentation.
+
 
 
 ## 2.6.8

components/11-base/section/section.twig

@@ -14,7 +14,7 @@
       {% include '@h6' with { 'h6_text': 'Heading 6' } %}
       {% include '@paragraph' with { 'text': 'Normal text below an heading 6.'} %}
       {% include '@paragraph' with { 'text': 'Paragraphs <a href="#">link</a>'} %}
-      <p>{% include '@button-sm' with { 'text': 'Button'} %}</p>
+      <p>{% include '@button' with { 'text': 'Button'} %}</p>
       <p>{% include '@button-md' with { 'text': 'Button'} %}</p>
       <p>{% include '@button-lg' with { 'text': 'Button'} %}</p>
       {% include '@button-drop' %}

components/21-atoms/button/README.md

@@ -0,0 +1,31 @@
+# Buttons
+There are 3 types of buttons defined:
+* Small
+* Medium (default)
+* Large
+
+By default buttons are always inline!
+That means when you want to create a full width button you will need to use the `btn-block` mixin we provide.
+
+We provide the some classes to add to elements that need to be styled like buttons:
+We also provide a SASS placeholder.
+
+## Small buttons
+* `%btn--small`
+* `.small.btn`
+* `.btn--small`
+
+## Medium buttons
+* `%btn--medium`
+* `.medium.btn`
+* `.btn--medium`
+
+## Large buttons
+* `%btn--large`
+* `.large.btn`
+* `.btn--large`
+
+Furthermore to improve semantic HTML we provide SASS mixins to create these buttons.
+* `@mixin btn-s;` for small buttons.
+* `@mixin btn-m;` for medium buttons (default).
+* `@mixin btn-l;` for large buttons.

components/21-atoms/buttons/_buttons.scss → components/21-atoms/button/_button.scss

@@ -21,15 +21,23 @@
 }
 
 //
-// Button display
+// Button inline display (default).
 //
 @mixin btn-inlineblock {
   display: inline-block;
   width: auto;
 }
 
 //
-// General button styling.
+// Button block display.
+//
+@mixin btn-block {
+  display: block;
+  width: 100%;
+}
+
+//
+// General button styling (default).
 //
 %btn,
 .btn,
@@ -43,9 +51,8 @@ input[type='submit'] {
     @include color-element-states($button-border, $button-border-hover, $property: "border");
   }
   @include btn-m;
-  display: block;
+  @include btn-inlineblock;
   position: relative;
-  width: 100%;
   margin: 0;
   padding-right: 1rem;
   padding-left: 1rem;
@@ -85,15 +92,32 @@ input[type='submit'] {
   }
 }
 
-//
-// Inline button styling.
-//
-%btn--inline,
-.inline.btn,
-.btn--inline,
-a.btn--inline,
-button.btn--inline,
-input[type='button'].btn--inline,
-input[type='submit'].btn--inline {
-  @include btn-inlineblock
+%btn--small,
+.small.btn,
+.btn--small,
+a.btn--small,
+button.btn--small,
+input[type="button"].btn--small,
+input[type='submit'].btn--small {
+  @include btn-s;
+}
+
+%btn--medium,
+.medium.btn,
+.btn--medium,
+a.btn--medium,
+button.btn--medium,
+input[type='button'].btn--medium,
+input[type='submit'].btn--medium {
+  @include btn-m;
+}
+
+%btn--large,
+.large.btn,
+.btn--large,
+a.btn--large,
+button.btn--large,
+input[type="button"].btn--large,
+input[type='submit'].btn--large {
+  @include btn-l;
 }

components/21-atoms/button/button.config.json

@@ -0,0 +1,33 @@
+{
+  "title": "Button",
+  "name": "Button",
+  "status": "ready",
+  "default": "button-sm",
+  "order": 1,
+  "context": {
+    "text": "Button"
+  },
+  "variants": [
+    {
+      "name": "button-sm",
+      "handle": "button",
+      "context": {
+        "modifier": "btn--small"
+      }
+    },
+    {
+      "name": "button-md",
+      "handle": "md",
+      "context": {
+        "modifier": "btn--medium"
+      }
+    },
+    {
+      "name": "button-lg",
+      "handle": "button-lg",
+      "context": {
+        "modifier": "btn--large"
+      }
+    }
+  ]
+}

components/21-atoms/button/button.twig

@@ -0,0 +1 @@
+<input type="button" class="btn {{ modifier }}" value="{{ text }}">

components/51-templates/buttons/buttons.config.json

@@ -1,8 +1,8 @@
 {
   "title": "Buttons",
   "status": "ready",
-  "handle": "buttons",
-  "preview": "@preview",
+  "handle": "buttons-overview",
+  "preview": "@preview-buttons",
   "order": 3,
   "context": {
     "text": "Button"

components/51-templates/buttons/buttons.twig

@@ -1,18 +1,47 @@
 <h1>Button styles</h1>
 
 <div class="preview-inner-container">
-  <h3>Small buttons</h3>
-  {% include '@button-sm' %}
-  <h3>Inline: Small buttons</h3>
-  {% include '@button-sm' with { 'modifier': 'inline' } %}
+  <h3>Small buttons (default inline button)</h3>
+  <p>
+    {% include '@button--button-sm' with {
+      'modifier': 'btn--small'
+    }
+    %}
+  </p>
+  <h3>Full width : Small buttons</h3>
+  <p class="example-full-width">
+    {% include '@button--button-sm' with {
+      'modifier': 'btn--small'
+    }
+    %}
+  </p>
+</div>
 
-  <h3>Medium buttons</h3>
-  {% include '@button-md' %}
-  <h3>Inline: Medium buttons</h3>
-  {% include '@button-md' with { 'modifier': 'inline' } %}
+<div class="preview-inner-container">
+  <h3>Medium buttons (default inline button)</h3>
+  <p>
+    {% include '@button' %}
+  </p>
+  <h3>Full width: Medium buttons</h3>
+  <p class="example-full-width">
+    {% include '@button' %}
+  </p>
+</div>
 
-  <h3>Large buttons</h3>
-  {% include '@button-lg' %}
-  <h3>Inline: Large buttons</h3>
-  {% include '@button-lg' with { 'modifier': 'inline' } %}
+<div class="preview-inner-container">
+  <h3>Large buttons (default inline button)</h3>
+  <p>
+    {% include '@button--button-lg' with {
+        'modifier': 'btn--large'
+      }
+    %}
+  </p>
+  <h3>Full width: Large buttons</h3>
+  <p class="example-full-width">
+    {% include '@button--button-lg' with {
+        'modifier': 'btn--large'
+      }
+    %}
+  </p>
 </div>
+

components/51-templates/styleguide/styleguide.twig

@@ -25,7 +25,9 @@
     'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. Duis malesuada justo ut tincidunt tincidunt. <u>Vestibulum</u> in felis quam. In <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href="javascript:(void);">fermentum</a>. Vivamus tristique ac mi a <i>pulvinar</i>. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie id sed ipsum. Curabitur risus ex, aliquet sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.'
   } %}
 
-  {% include '@buttons' with { 'text': 'Button' }%}
+  {% include '@buttons-overview' with {
+    'text': 'Button'
+  } %}
 
   {% include '@image-styles' %}
 

components/_preview-buttons.twig

@@ -0,0 +1,12 @@
+{% extends '_preview.twig' %}
+
+{% block title %}Buttons preview{% endblock %}
+
+{% block inline_styles %}
+  {{ parent() }}
+
+ .preview-inner-container .example-full-width .btn {
+    width: 100%;
+  }
+
+{% endblock %}

components/_preview.twig

@@ -55,6 +55,10 @@
           width: 100%;
         }
       {% endblock %}
+
+      .preview-inner-container .example-full-width .btn {
+        width: 100%;
+      }
     </style>
 </head>
 <body>