@madgex/design-system 1.37.0 → 1.38.0

package/src/components/inputs/radio/radio.config.js

@@ -0,0 +1,94 @@
+module.exports = {
+  title: 'Radio',
+  status: 'wip',
+  context: {
+    id: 'radio-input',
+    labelText: 'Standard Radio Group',
+    options: [
+      {
+        labelText: 'Radio Input 1',
+        value: '1-1',
+        id: 'radio-1-1',
+      },
+      {
+        labelText: 'Radio Input 2',
+        value: '1-2',
+        id: 'radio-1-2',
+      },
+    ],
+  },
+  variants: [
+    {
+      name: 'Stacked Radio By Defined',
+      context: {
+        id: 'stacked-radio-input-defined',
+        labelText: 'When do you want to receive latest jobs?',
+        isStacked: true,
+        options: [
+          {
+            labelText: 'Radio Input 1',
+            value: '2-1',
+            id: 'radio-2-1',
+          },
+          {
+            labelText: 'Radio Input 2',
+            value: '2-2',
+            id: 'radio-2-2',
+            selected: true,
+          },
+        ],
+      },
+    },
+    {
+      name: 'Stacked Radio By Number Of Options',
+      context: {
+        id: 'stacked-radio-input-options',
+        labelText: 'When do you want to receive latest jobs?',
+        options: [
+          {
+            labelText: 'Radio Input 1',
+            value: '3-1',
+            id: 'radio-3-1',
+          },
+          {
+            labelText: 'Radio Input 2',
+            value: '3-2',
+            id: 'radio-3-2',
+            selected: true,
+          },
+          {
+            labelText: 'Radio Input 3',
+            value: '3-3',
+            id: 'radio-3-3',
+          },
+        ],
+      },
+    },
+    {
+      name: 'Stacked Radio disabled',
+      context: {
+        id: 'stacked-radio-input-disabled',
+        labelText: 'When do you want to receive latest jobs?',
+        disabled: true,
+        options: [
+          {
+            labelText: 'Radio Input 1',
+            value: '4-1',
+            id: 'radio-4-1',
+          },
+          {
+            labelText: 'Radio Input 2',
+            value: '4-2',
+            id: 'radio-4-2',
+          },
+          {
+            labelText: 'Radio Input 3',
+            value: '4-3',
+            id: 'radio-4-3',
+            selected: true,
+          },
+        ],
+      },
+    },
+  ],
+};

package/src/components/inputs/radio/radio.njk

@@ -0,0 +1,10 @@
+{% from "./inputs/radio/_macro.njk" import MdsRadio %}
+
+{{ MdsRadio({
+  labelText: labelText,
+  name: name,
+  id: id,
+  disabled: disabled,
+  options: options,
+  isStacked: isStacked
+}) }}

package/src/components/inputs/radio/radio.scss

@@ -0,0 +1,51 @@
+.mds-radio__group legend {
+  margin-bottom: $mds-size-baseline * 2;
+  font-weight: bold;
+}
+
+.mds-radio__group .mds-radio {
+  display: inline-block;
+  margin-right: $mds-size-baseline * 7;
+}
+
+.mds-radio__group--stacked .mds-radio {
+  display: block;
+  margin-right: 0;
+}
+
+.mds-radio__group .mds-radio__input {
+  height: calc(#{$mds-size-baseline}*6 - #{$mds-size-baseline});
+  width: calc(#{$mds-size-baseline}*6 - #{$mds-size-baseline});
+  appearance: none;
+  display: inline-block;
+  padding: $mds-size-baseline;
+  background-clip: content-box;
+  border: 2px solid $mds-color-border;
+  background-color: transparent;
+  border-radius: 50%;
+  outline: 0;
+  margin-right: $mds-size-baseline * 2;
+
+  &:checked {
+    background-color: #000000;
+    box-shadow: 0px 0px 0px 3px $mds-color-input-focus;
+  }
+  &:focus {
+    box-shadow: 0px 0px 0px 3px $mds-color-input-focus;
+  }
+  &[disabled="disabled"] {
+    border-color: rgba(84, 84, 84, 0.5);
+    box-shadow: 0 0 0 3px rgba(84, 84, 84, 0);
+    &:checked {
+      background-color: rgba(84, 84, 84, 0.5);
+    }
+  }
+}
+
+.mds-radio__group--stacked .mds-radio__input {
+  margin-top: $mds-size-baseline * 2;
+}
+
+.mds-radio__label {
+  vertical-align: text-bottom;
+}

package/src/js/index-vue.js

@@ -1 +1 @@
-import '../components/combobox/combobox';
+import '../components/inputs/combobox/combobox';

package/src/scss/components/__index.scss

@@ -3,11 +3,12 @@
 @import '../../components/card/card';
 @import '../../components/section-title/section-title';
 @import '../../components/tabs/tabs';
-@import '../../components/input/input';
+@import '../../components/inputs/input/input';
 @import '../../components/textarea/textarea';
 @import '../../components/accordion/accordion';
 @import '../../components/pagination/pagination';
 @import '../../components/switch-state/switch-state';
 @import '../../components/popover/popover';
 @import '../../components/notification/notification';
-@import '../../components/combobox/combobox';
+@import '../../components/inputs/combobox/combobox';
+@import '../../components/inputs/radio/radio';