feat(radio-button): add radio group component

lumapps · Sep 16, 2019 · 5d8e513 · 5d8e513
1 parent e220171
commit 5d8e513
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 24 deletions.
diff --git a/demo/components/radio-button/partials/default.html b/demo/components/radio-button/partials/default.html
@@ -1,10 +1,8 @@
-<div class="lumx-spacing-margin-bottom-regular">
+<lx-radio-group>
     <lx-radio-button lx-theme="{{ demoBlock.theme }}" name="test1" value="lorem" ng-model="vm.radioButtons.test1">
         Radio Button 1
     </lx-radio-button>
-</div>
 
-<div class="lumx-spacing-margin-bottom-regular">
     <lx-radio-button
         lx-theme="{{ demoBlock.theme }}"
         name="test1"
@@ -14,8 +12,8 @@
     >
         Radio Button 2
     </lx-radio-button>
-</div>
 
-<lx-radio-button lx-theme="{{ demoBlock.theme }}" name="test1" ng-model="vm.radioButtons.test1" value="dolor">
-    Radio Button 3
-</lx-radio-button>
+    <lx-radio-button lx-theme="{{ demoBlock.theme }}" name="test1" ng-model="vm.radioButtons.test1" value="dolor">
+        Radio Button 3
+    </lx-radio-button>
+</lx-radio-group>
diff --git a/demo/components/radio-button/partials/helper.html b/demo/components/radio-button/partials/helper.html
@@ -1,4 +1,4 @@
-<div class="lumx-spacing-margin-bottom-big">
+<lx-radio-group>
     <lx-radio-button lx-theme="{{ demoBlock.theme }}" name="test2" ng-model="vm.radioButtons.test2" value="lorem">
         <lx-radio-button-label>
             Radio Button with help 1
@@ -8,9 +8,7 @@
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur.
         </lx-radio-button-help>
     </lx-radio-button>
-</div>
 
-<div class="lumx-spacing-margin-bottom-big">
     <lx-radio-button
         lx-theme="{{ demoBlock.theme }}"
         name="test2"
@@ -26,14 +24,14 @@
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur.
         </lx-radio-button-help>
     </lx-radio-button>
-</div>
 
-<lx-radio-button lx-theme="{{ demoBlock.theme }}" name="test2" ng-model="vm.radioButtons.test2" value="dolor">
-    <lx-radio-button-label>
-        Radio Button with help 3
-    </lx-radio-button-label>
+    <lx-radio-button lx-theme="{{ demoBlock.theme }}" name="test2" ng-model="vm.radioButtons.test2" value="dolor">
+        <lx-radio-button-label>
+            Radio Button with help 3
+        </lx-radio-button-label>
 
-    <lx-radio-button-help>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur.
-    </lx-radio-button-help>
-</lx-radio-button>
+        <lx-radio-button-help>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur.
+        </lx-radio-button-help>
+    </lx-radio-button>
+</lx-radio-group>
diff --git a/modules/radio-button/js/radio-group_directive.js b/modules/radio-button/js/radio-group_directive.js
@@ -0,0 +1,22 @@
+import { CSS_PREFIX } from '@lumx/core/js/constants';
+
+/////////////////////////////
+
+function RadioGroupDirective() {
+    'ngInject';
+
+    return {
+        replace: true,
+        restrict: 'E',
+        template: `<div class="${CSS_PREFIX}-radio-group" ng-transclude></div>`,
+        transclude: true,
+    };
+}
+
+/////////////////////////////
+
+angular.module('lumx.radio-button').directive('lxRadioGroup', RadioGroupDirective);
+
+/////////////////////////////
+
+export { RadioGroupDirective };
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
         "webpack-defaults": "webpack-defaults"
     },
     "dependencies": {
-        "@lumx/core": "0.7.6",
+        "@lumx/core": "0.7.7",
         "@lumx/icons": "0.7.16",
         "angular": "^1.5.11",
         "bourbon": "^4.2.7",

diff --git a/yarn.lock b/yarn.lock
@@ -720,10 +720,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@lumx/core@0.7.6":
-  version "0.7.6"
-  resolved "https://registry.yarnpkg.com/@lumx/core/-/core-0.7.6.tgz#256e0d0e83e8c6cd0f965395a1df3df7434f941a"
-  integrity sha512-8Hqd1DqiOtRuDzei70sb03KcDYj1khFx9he/+E62KfcxDrX+EfTv4U4DMHvb6FemKXgvmHnUQBBExfQ9lVmcmQ==
+"@lumx/core@0.7.7":
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/@lumx/core/-/core-0.7.7.tgz#efd47e2833e6167c4d4ad65e10249b843ca58d40"
+  integrity sha512-k7oYWWQA0BGebuj3ceGrLRf1lp68i3Lgu2uapXuHnGzUJOn86zUV67wTVG7OE0DGnbIWUXrf46cvxYv8aps8sg==
   dependencies:
     focus-visible "^4.1.5"
     lodash "^4.17.11"