Implemented expand/collapse section buttons

SpareBank1 · Apr 1, 2016 · 6991e61 · 6991e61
1 parent adee909
commit 6991e61
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 1 deletion.
diff --git a/examples/buttons.html b/examples/buttons.html
@@ -87,7 +87,31 @@ <h2 class="ffe-h2 page-title">Knapper</h2>
                 <button class="ffe-tab-button">Tab button</button>
                 <button class="ffe-tab-button ffe-tab-button--selected">Valgt tab</button>
             </div>
-        </section>
+
+            <div class="ffe-small-text">EXPAND BUTTON</div>
+            <div>
+              <button aria-expanded="false" class="ffe-expand-button">
+                <span class="ffe-expand-button__label">Expand container</span>
+              </button>
+              <button aria-expanded="true" class="ffe-expand-button ffe-expand-button--expanded">
+                <span class="ffe-expand-button__label--expanded">Expand container</span>
+              </button>
+            </div>
+
+            <br/><br/>
+
+            <div class="ffe-small-text">EXPAND BUTTON DARK (used when triggering menu navigation)</div>
+            <div>
+              <button aria-expanded="false" class="ffe-expand-button--dark">
+                <span class="ffe-expand-button--dark__label">Expand container</span>
+              </button>
+              <button aria-expanded="true" class="ffe-expand-button--dark ffe-expand-button--dark--expanded">
+                <span class="ffe-expand-button--dark__label--expanded">Expand container</span>
+              </button>
+            </div>
+
+            <br/><br/>
+          </section>
 
         <section class="ffe-content-container ffe-content-container--text-left">
             <div class="tabbed-panel">

diff --git a/less/components/components.less b/less/components/components.less
@@ -4,6 +4,7 @@
 @import 'shortcut-button';
 @import 'action-button';
 @import 'tab-button';
+@import 'expand-button';
 
 /* Inputs*/
 @import 'input-field';

diff --git a/less/components/expand-button.less b/less/components/expand-button.less
@@ -0,0 +1,43 @@
+.ffe-expand-button {
+  &:extend(.ffe-secondary-button all);
+
+  border-radius: 34px;
+
+  &--expanded {
+    background-repeat: no-repeat;
+    background-size: 16px;
+    background-position: center;
+    width: 45px;
+    height: 45px;
+    padding: 0;
+
+    @bare-color: replace(~`"@{ffe-blue-royal-light-wcag}"`, "#", "");
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M18.77188%2C0c-3.56152%2C0-7.12521%2C1.34709-9.83437%2C4.04421l-4.42862%2C4.43914c-5.38143%2C5.39423-5.38143%2C14.25271%2C0%2C19.6839l71.18886%2C71.83202-71.66167%2C71.83201c-5.38144%2C5.39422-5.38144%2C14.25271%2C0%2C19.6839l4.42862%2C4.43914c5.38145%2C5.39424%2C14.21893%2C5.39424%2C19.63722%2C0l71.66167-71.83201%2C71.64591%2C71.83201c5.38143%2C5.39424%2C14.23467%2C5.39424%2C19.65298%2C0l4.42862-4.43914c5.38142-5.39423%2C5.38142-14.25271%2C0-19.6839l-71.18886-71.83201%2C71.66167-71.83202c5.38145-4.91394%2C5.38145-13.77881%2C0-19.20997l-4.42862-4.42335c-5.38144-5.39422-14.21891-5.39422-19.63722%2C0l-72.13448%2C71.34229-71.1731-71.83201c-2.69072-2.69712-6.25708-4.04421-9.81861-4.04421z%22%20fill%3D%22%23@{bare-color}%22/%3E%3C/svg%3E");
+  }
+
+  &__label--expanded {
+    display: none;
+  }
+}
+
+.ffe-expand-button--dark {
+  &:extend(.ffe-expand-button all);
+
+  background-color: @ffe-blue-royal-light-wcag;
+  border-color: @ffe-blue-royal-light-wcag;
+
+  &:hover, &:focus,&:active {
+    border-color: @ffe-blue-royal-light-wcag;
+    background-color: @ffe-blue-royal;
+    border-color: @ffe-blue-royal;
+  }
+
+  &__label {
+    color: @ffe-white;
+  }
+
+  &--expanded {
+    @bare-color: replace(~`"@{ffe-white}"`, "#", "");
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M18.77188%2C0c-3.56152%2C0-7.12521%2C1.34709-9.83437%2C4.04421l-4.42862%2C4.43914c-5.38143%2C5.39423-5.38143%2C14.25271%2C0%2C19.6839l71.18886%2C71.83202-71.66167%2C71.83201c-5.38144%2C5.39422-5.38144%2C14.25271%2C0%2C19.6839l4.42862%2C4.43914c5.38145%2C5.39424%2C14.21893%2C5.39424%2C19.63722%2C0l71.66167-71.83201%2C71.64591%2C71.83201c5.38143%2C5.39424%2C14.23467%2C5.39424%2C19.65298%2C0l4.42862-4.43914c5.38142-5.39423%2C5.38142-14.25271%2C0-19.6839l-71.18886-71.83201%2C71.66167-71.83202c5.38145-4.91394%2C5.38145-13.77881%2C0-19.20997l-4.42862-4.42335c-5.38144-5.39422-14.21891-5.39422-19.63722%2C0l-72.13448%2C71.34229-71.1731-71.83201c-2.69072-2.69712-6.25708-4.04421-9.81861-4.04421z%22%20fill%3D%22%23@{bare-color}%22/%3E%3C/svg%3E");
+  }
+}
diff --git a/visual-tests/baseline-screenshots/buttons/plain/firefox.png b/visual-tests/baseline-screenshots/buttons/plain/firefox.png
diff --git a/visual-tests/baseline-screenshots/form/plain/firefox.png b/visual-tests/baseline-screenshots/form/plain/firefox.png