@eturnity/eturnity_reusable_components 1.2.19-EPDM-5310.6 → 1.2.19-EPDM-5310.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.19-EPDM-5310.6",
+  "version": "1.2.19-EPDM-5310.9",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/inputs/radioButton/index.vue

@@ -1,7 +1,7 @@
 <template>
   <component-wrapper :layout="layout">
     <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container :size="size" :isDisabled="item.disabled">
+      <label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value">
         <radio
           type="radio"
           :value="selectedOption"
@@ -76,14 +76,6 @@ const Radio = styled.input`
   cursor: pointer;
   height: 0;
   width: 0;
-
-  &:checked ~ .checkmark {
-    background-color: white;
-
-    &:after {
-      display: block;
-    }
-  }
 `
 
 const RadioWrapper = styled.div`
@@ -91,14 +83,14 @@ const RadioWrapper = styled.div`
   grid-gap: 10px;
 `
 
-const containerProps = { size: String, isDisabled: Boolean }
+const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean }
 const LabelContainer = styled("label", containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-gap: 15px;
   align-items: center;
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   position: relative;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: ${(props) =>
@@ -133,32 +125,29 @@ const LabelContainer = styled("label", containerProps)`
 
     &:after {
       content: "";
-      display: none;
+      display: ${(props) => props.isChecked ? 'block' : 'none'};
+      width: ${(props) =>
+        props.size === "large"
+          ? "10px"
+          : props.size === "medium"
+            ? "8px"
+            : "6px"};
+      height: ${(props) =>
+        props.size === "large"
+          ? "10px"
+          : props.size === "medium"
+            ? "8px"
+            : "6px"};
+      border-radius: 100%;
+      background: ${(props) => props.theme.colors.primary};
     }
   }
-
-  .checkmark:after {
-    width: ${(props) =>
-      props.size === "large"
-        ? "10px"
-        : props.size === "medium"
-          ? "8px"
-          : "6px"};
-    height: ${(props) =>
-      props.size === "large"
-        ? "10px"
-        : props.size === "medium"
-          ? "8px"
-          : "6px"};
-    border-radius: 100%;
-    background: ${(props) => props.theme.colors.primary};
-  }
 `
 
 const textAttrs = { isDisabled: Boolean }
 const LabelText = styled("div", textAttrs)`
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
 `
 
 const RadioImage = styled.img`
@@ -228,7 +217,7 @@ export default {
       required: false,
       default: "medium", // small, medium, large
     },
-    radioName: {
+    name: {
       required: false,
       default: ''
     }
@@ -236,6 +225,7 @@ export default {
   data() {
     return {
       selectedImage: null,
+      radioName: ''
     }
   },
   methods: {
@@ -250,9 +240,7 @@ export default {
     },
   },
   created() {
-    if (this.radioName.length === 0) {
-      this.radioName = Math.round(Math.random() * 10000)
-    }
+    this.radioName = this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
   },
 }
 </script>