feat(oui-radio): variant attribute

packages/oui-radio/README.md

@@ -41,6 +41,13 @@
 <oui-radio description="Disabled radio" disabled thumbnail="true">Disabled</oui-radio>
 ```
 
+### Thumbnail Variant
+
+```html:preview
+<oui-radio thumbnail variant="light">Checked</oui-radio>
+<oui-radio description="Disabled radio" disabled thumbnail="true" variant="light">Disabled</oui-radio>
+```
+
 ### On change
 
 ```html:preview
@@ -155,6 +162,7 @@
 | `required`    | boolean   | <?        | no                | `true`, `false`   | `false`   | required flag
 | `thumbnail`   | boolean   | <?        | no                | `true`, `false`   | `false`   | thumbnail style of the radio
 | `on-change`   | function  | &?        | no                | n/a               | n/a       | handler triggered when value has changed
+| `variant`     | string    | @?        | yes               | `default`, `light`| `default` | used in conjunction with `thumbnail`. Defines specific style for the thumbnail
 
 #### Deprecated
 

packages/oui-radio/src/radio.component.js

@@ -18,7 +18,8 @@ export default {
         onChange: "&?",
         disabled: "<?",
         thumbnail: "<?",
-        required: "<?"
+        required: "<?",
+        variant: "@?"
     },
     transclude: true
 };

packages/oui-radio/src/radio.controller.js

@@ -15,10 +15,11 @@ export default class {
         addBooleanParameter(this, "thumbnail");
         addBooleanParameter(this, "required");
         addDefaultParameter(this, "id", `ouiRadio${this.$scope.$id}`);
+        addDefaultParameter(this, "variant", "default");
 
         this.$element.addClass(this.radioToggleGroup ? "oui-radio-toggle" : "oui-radio");
         if (this.thumbnail && !this.radioToggleGroup) {
-            this.$element.addClass("oui-radio_thumbnail");
+            this.$element.addClass(this.variant === "default" ? "oui-radio_thumbnail" : `oui-radio_thumbnail-${this.variant}`);
         }
 
         this.group = this.radioGroup || this.radioToggleGroup;