LT-247: making rounded button group component toggleable

Packages/design/components/roundedButtonGroup/roundedButtonGroup.html

@@ -1,7 +1,21 @@
 <template name="roundedButtonGroup">
-    <div class="{{class}} viewerRoundedButtonGroup clearfix center-table">
+    <div class="{{class}} roundedButtonGroup clearfix center-table">
         {{#each item in this.options}}
-            <a class="viewerRoundedButton noselect {{inlineIf value.get item.key 'active'}}" data-key="{{item.key}}">{{item.text}}</a>
+            <a class="roundedButtonWrapper noselect {{inlineIf getValue item.value 'active'}}" data-value="{{item.value}}">
+                <div class="roundedButton">
+                    {{#if item.svgLink}}
+                        <svg style="width: {{item.svgWidth}}px; height: {{item.svgHeight}}px">
+                            <use xlink:href="{{item.svgLink}}"></use>
+                        </svg>
+                    {{/if}}
+                    {{#if item.text}}
+                        <span>{{item.text}}</span>
+                    {{/if}}
+                </div>
+                {{#if item.bottomLabel}}
+                    <div class="bottomLabel">{{item.bottomLabel}}</div>
+                {{/if}}
+            </a>
         {{/each}}
     </div>
 </template>

Packages/design/components/roundedButtonGroup/roundedButtonGroup.js

@@ -1,15 +1,40 @@
-Template.roundedButtonGroup.onRendered(() => {
+Template.roundedButtonGroup.onCreated(() => {
     const instance = Template.instance();
-    const value = instance.data.value;
-    if (!value.get()) {
-        value.set(instance.data.options[0].key);
+    const reactiveValue = instance.data.value;
+
+    // Get the value for ReactiveVar or ReactiveDict objects
+    instance.getValue = () => {
+        return reactiveValue.get(instance.data.key);
+    };
+
+    // Set the value for ReactiveVar or ReactiveDict objects
+    instance.setValue = value => {
+        const args = [value];
+        if (reactiveValue instanceof ReactiveDict) {
+            args.unshift(instance.data.key);
+        }
+
+        reactiveValue.set(...args);
+    };
+
+    // Initialize the value with the first option if there's no value set and options are not toggleable
+    if (!instance.getValue() && !instance.data.toggleable) {
+        instance.setValue(instance.data.options[0].value);
     }
 });
 
 Template.roundedButtonGroup.events({
-    'click [data-key]'(event, instance) {
-        const $element = $(event.currentTarget);
-        const key = $element.attr('data-key');
-        instance.data.value.set(key);
+    'click [data-value]'(event, instance) {
+        event.preventDefault();
+        const $target = $(event.currentTarget);
+        const nullValue = $target.hasClass('active') && instance.data.toggleable;
+        const value = nullValue ? null : $target.attr('data-value');
+        instance.setValue(value);
+    }
+});
+
+Template.roundedButtonGroup.helpers({
+    getValue() {
+        return Template.instance().getValue();
     }
 });

Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -4,43 +4,67 @@ $height = 25px
 $borderColorActive = #3C8074
 $textColorActive = #2D2D2D
 
-.viewerRoundedButtonGroup
+.roundedButtonGroup
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
-  font-weight: 500
-  position: relative
 
-  .viewerRoundedButton
-    background: $darkUiColor
-    border: 1px $uiBorderColorDark solid
-    color: $textSecondaryColor
+  .roundedButtonWrapper
     cursor: pointer
     display: inline-block
-    margin-left: -1px
     float: left
-    font-size: 11px
-    height: $height
-    line-height: $height
-    padding: 0 15px
+    margin-left: -1px
     text-decoration: none
-    text-transform: uppercase
-    transition: $sidebarTransition
-    -webkit-transition: $sidebarTransition
-    -ms-transition: $sidebarTransition
-    -o-transition: $sidebarTransition
-    -moz-transition: $sidebarTransition
-    z-index: 1
+    text-align: center
 
-    &.active
-      background: $activeColor
-      color: $textColorActive
-      border-color: $borderColorActive
-      z-index: 2
+    .roundedButton
+      align-items: center
+      background-color: $darkUiColor
+      border: 1px $uiBorderColorDark solid
+      color: $textSecondaryColor
+      display: flex
+      font-size: 11px
+      font-weight: 500
+      justify-content: center
+      height: $height
+      line-height: $height
+      padding: 0 22px
+      text-transform: uppercase
+      transition: transition($sidebarTransition)
+
+      svg
+        fill: $defaultColor
+        stroke: $defaultColor
+
+      svg
+      span
+        margin: 0 2px
+
+    .bottomLabel
+      color: $textSecondaryColor
+      font-size: 12px
+      line-height: 12px
+      margin-top: 8px
 
     &:first-child
       margin-left: 0
-      border-bottom-left-radius: $height
-      border-top-left-radius: $height
+      .roundedButton
+        border-bottom-left-radius: $height
+        border-top-left-radius: $height
 
-    &:last-child
+    &:last-child .roundedButton
       border-bottom-right-radius: $height
       border-top-right-radius: $height
+
+    &:hover .roundedButton
+      background-color: $boxBackgroundColor
+      color: $darkUiColor
+
+    &.active .roundedButton
+      background-color: $activeColor
+      border-color: $borderColorActive
+      color: $textColorActive
+
+    &:hover .roundedButton
+    &.active .roundedButton
+      svg
+        fill: $darkUiColor
+        stroke: $darkUiColor