FFE-2. Konverterer knapper til BEM.

SpareBank1 · Nov 23, 2015 · 89854d2 · 89854d2
1 parent 2baa5f0
commit 89854d2
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 56 deletions.
diff --git a/examples/buttons.html b/examples/buttons.html
@@ -14,7 +14,7 @@
     <header class="layout-container">
         <h1>Felles Frontend Style Guide</h1>
         <p class="lead-paragraph">Inneholder generell styling for bruk utenfor komponenter. F.eks. typografi, knapper, farger, o.l. FFE følger
-            <a href="https://github.com/rstacruz/rscss">Reasonable System for CSS Stylesheet Structure</a> for å sørge for god organisasjon av CSS-koden.
+            <a href="https://en.bem.info">BEM</a> for å sørge for god organisasjon av CSS-koden.
         </p>
     </header>
 
@@ -32,48 +32,49 @@ <h3 class="h3 -spaced">Knapper</h3>
 
         <p>For å endre state på en knapp fra vanlig til "spinner" må følgende gjøres:</p>
         <ul>
-            <li>Sett klassen <code class="code-inline">-loading</code> på selve knappen</li>
-            <li>Sett <code class="code-inline">aria-hidden="false"</code> på <code class="code-inline">.label-spinner</code></li>
+            <li>Legg til klassen <code class="code-inline">[knapp-variant]_loading</code> på selve knappen</li>
+            <li>Legg til klassen <code class="code-inline">[knapp-variant]__label-text_loading</code> på label-text-elementet</li>
+            <li>Sett <code class="code-inline">aria-hidden="false"</code> på <code class="code-inline">[knapp-variant]__label-spinner</code></li>
             <li>Optional: Legg til <code class="code-inline">disabled</code> attributt på knappen</li>
         </ul>
 
         <div class="small-text">ACTION BUTTON</div>
         <div class="button-group" aria-live="polite">
             <button class="action-button">Action button</button>
-            <button class="action-button -loading">
-                <span class="label">
-                    <span class="label-text">Action button</span>
-                    <span class="label-spinner" aria-hidden="false">Spinner-tekst</span>
+            <button class="action-button action-button_loading">
+                <span class="action-button__label">
+                    <span class="action-button__label-text action-button__label-text_loading">Action button</span>
+                    <span class="action-button__label-spinner" aria-hidden="false">Spinner-tekst</span>
                 </span>
             </button>
         </div>
 
         <div class="small-text">PRIMARY BUTTON</div>
         <div class="button-group" aria-live="polite">
             <button class="primary-button">Primary button</button>
-            <button class="primary-button -loading">
-                <span class="label">
-                    <span class="label-text">Primary button</span>
-                    <span class="label-spinner" aria-hidden="false">Spinner-tekst</span>
+            <button class="primary-button primary-button_loading">
+                <span class="primary-button__label">
+                    <span class="primary-button__label-text primary-button__label-text_loading">Primary button</span>
+                    <span class="primary-button__label-spinner" aria-hidden="false">Spinner-tekst</span>
                 </span>
             </button>
         </div>
 
         <div class="small-text">SECONDARY BUTTON</div>
         <div class="button-group" aria-live="polite">
             <button class="secondary-button">Secondary button</button>
-            <button class="secondary-button -loading">
-                <span class="label">
-                    <span class="label-text">Secondary button</span>
-                    <span class="label-spinner" aria-hidden="false">Spinner-tekst</span>
+            <button class="secondary-button secondary-button_loading">
+                <span class="secondary-button__label">
+                    <span class="secondary-button__label-text secondary-button__label-text_loading">Secondary button</span>
+                    <span class="secondary-button__label-spinner" aria-hidden="false">Spinner-tekst</span>
                 </span>
             </button>
         </div>
 
         <div class="small-text">SHORTCUT BUTTON</div>
         <div class="button-group">
             <button class="shortcut-button">Shortcut button
-                <span class="icon-chevron -right -light-blue"></span>
+                <span class="shortcut-button__icon-chevron icon-chevron icon-chevron_right icon-chevron_light-blue"></span>
             </button>
         </div>
     </section>
@@ -82,10 +83,10 @@ <h3 class="h3 -spaced">Knapper</h3>
         <div class="collapse-link">Vis kode</div>
         <code class="code-block">
 &lt;button class=&quot;action-button&quot;&gt;Action button&lt;/button&gt;
-&lt;button class=&quot;action-button -loading&quot;&gt;
-    &lt;span class=&quot;label&quot;&gt;
-        &lt;span class=&quot;label-text&quot;&gt;Action button&lt;/span&gt;
-        &lt;span class=&quot;label-spinner&quot; aria-hidden=&quot;true&quot;&gt;Spinner-tekst&lt;/span&gt;
+&lt;button class=&quot;action-button&nbsp;action-button_loading&quot;&gt;
+    &lt;span class=&quot;action-button__label&quot;&gt;
+        &lt;span class=&quot;action-button__label-text&nbsp;action-button_label-text_loading&quot;&gt;Action button&lt;/span&gt;
+        &lt;span class=&quot;action-button__label-spinner&quot; aria-hidden=&quot;false&quot;&gt;Spinner-tekst&lt;/span&gt;
     &lt;/span&gt;
 &lt;/button&gt;
         </code>

diff --git a/less/components/action-button.less b/less/components/action-button.less
@@ -7,7 +7,7 @@
       background-color: darken(@green-wcag, 5%);
     }
     &:active,
-    &.-loading {
+    &_loading {
       background-color: darken(@green-wcag, 10%);
     }
 }
diff --git a/less/components/primary-button.less b/less/components/primary-button.less
@@ -33,43 +33,39 @@
         background-color: darken(@blue-flat,10%);
     }
 
-    > .label {
+    &__label {
         overflow: hidden;
         position: relative;
+    }
 
-        > .label-text {
-            position: relative;
-            bottom: 0;
-            transition: bottom 0.2s;
-        }
+    &__label-text {
+        position: relative;
+        bottom: 0;
+        transition: bottom 0.2s;
+    }
 
-        > .label-spinner {
-            .sb1-spinner(@white,22px);
-            opacity: 0;
-            color: transparent;
-            position: absolute;
-            bottom: -40px;
-            left: ~"calc(50% - 11px)";
-            transition: bottom 0.2s;
+    &__label-spinner {
+        .sb1-spinner(@white,22px);
+        opacity: 0;
+        color: transparent;
+        position: absolute;
+        bottom: -40px;
+        left: ~"calc(50% - 11px)";
+        transition: all 0.2s;
 
-            &[aria-hidden="false"] {
-                opacity: 1;
-                bottom: 0;
-            }
+        &[aria-hidden="false"] {
+            opacity: 1;
+            bottom: 0;
         }
     }
 
-    &.-loading {
+    &_loading {
         pointer-events: none;
-        background-color: darken(@blue-royal-light-wcag,10%);
-
-        > .label {
-
-            > .label-text {
-                bottom: 50px;
-            }
+        background-color: darken(@blue-royal-light-wcag, 10%);
+    }
 
-        }
+    &__label-text_loading {
+        bottom: 50px;
     }
 }
 

diff --git a/less/components/secondary-button.less b/less/components/secondary-button.less
@@ -10,7 +10,7 @@
     background-color: @white;
   }
 
-  &.-loading {
+  &_loading {
     background-color: @blue-royal;
   }
 }
diff --git a/less/components/shortcut-button.less b/less/components/shortcut-button.less
@@ -2,7 +2,7 @@
   &:extend(.secondary-button all);
   padding-right: 35px;
 
-  > .icon-chevron {
+  &__icon-chevron {
     width: 16px;
     height: 16px;
     position: relative;
@@ -13,7 +13,7 @@
 
   &:hover, &:active, &:focus {
 
-    > .icon-chevron {
+    .shortcut-button__icon-chevron {
       left: 20px;
     }
   }

diff --git a/less/icons.less b/less/icons.less
@@ -19,20 +19,20 @@
   &:extend(.icon-base all);
   background: url("@{icon-url}/chevron-royal.svg");
 
-  &.-light-blue {
+  &_light-blue {
     background: url("@{icon-url}/chevron-royal-light.svg");
   }
-  &.-white {
+  &_white {
     background: url("@{icon-url}/chevron-white.svg");
   }
 
-  &.-up {
+  &_up {
     transform: rotate(180deg);
   }
-  &.-left {
+  &_left {
     transform: rotate(90deg);
   }
-  &.-right {
+  &_right {
     transform: rotate(-90deg);
   }
 }