@eturnity/eturnity_reusable_components 1.2.19-EPDM-5310.14 → 1.2.19-EPDM-5295.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.19-EPDM-5310.14",
+  "version": "1.2.19-EPDM-5295.0",
   "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" :isChecked="selectedOption === item.value">
+      <label-container :size="size" :isDisabled="item.disabled">
         <radio
           type="radio"
           :value="selectedOption"
@@ -76,6 +76,14 @@ const Radio = styled.input`
   cursor: pointer;
   height: 0;
   width: 0;
+
+  &:checked ~ .checkmark {
+    background-color: white;
+
+    &:after {
+      display: block;
+    }
+  }
 `
 
 const RadioWrapper = styled.div`
@@ -83,22 +91,22 @@ const RadioWrapper = styled.div`
   grid-gap: 10px;
 `
 
-const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean }
+const containerProps = { size: String, isDisabled: 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.grey2 : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
   position: relative;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: ${(props) =>
     props.size === "large"
       ? "16px"
       : props.size === "medium"
-        ? "13px"
-        : "10px"};
+      ? "13px"
+      : "10px"};
   user-select: none;
   flex: auto;
   align-self: baseline;
@@ -108,14 +116,14 @@ const LabelContainer = styled("label", containerProps)`
       props.size === "large"
         ? "23px"
         : props.size === "medium"
-          ? "16px"
-          : "12px"};
+        ? "16px"
+        : "12px"};
     width: ${(props) =>
       props.size === "large"
         ? "23px"
         : props.size === "medium"
-          ? "16px"
-          : "12px"};
+        ? "16px"
+        : "12px"};
     background-color: #fff;
     border-radius: 100%;
     border: 1px solid ${(props) => props.theme.colors.mediumGray};
@@ -125,29 +133,32 @@ const LabelContainer = styled("label", containerProps)`
 
     &:after {
       content: "";
-      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};
+      display: none;
     }
   }
+
+  .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.grey2 : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
 `
 
 const RadioImage = styled.img`
@@ -217,15 +228,11 @@ export default {
       required: false,
       default: "medium", // small, medium, large
     },
-    name: {
-      required: false,
-      default: ''
-    }
   },
   data() {
     return {
+      radioName: "",
       selectedImage: null,
-      radioName: ''
     }
   },
   methods: {
@@ -240,7 +247,7 @@ export default {
     },
   },
   created() {
-    this.radioName = this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
+    this.radioName = Math.round(Math.random() * 10000)
   },
 }
 </script>

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

@@ -59,8 +59,7 @@ const InputWrapper = styled.span`
   img {
     position: absolute;
     right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
+    top: 0;
   }
 `
 

package/src/components/pageSubtitle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
+  <subtitle-text :color="color" :hasInfoText="!!infoText">
     <span>
       {{ text }}
     </span>
@@ -24,7 +24,7 @@
 import styled from "vue-styled-components"
 import InfoText from "../infoText"
 
-const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }
+const textAttrs = { color: String, hasInfoText: Boolean }
 const SubtitleText = styled("div", textAttrs)`
   display: grid;
   align-items: center;
@@ -33,7 +33,7 @@ const SubtitleText = styled("div", textAttrs)`
     props.hasInfoText ? "auto auto 1fr" : "1fr"};
   color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
   font-size: 13px;
-  margin-bottom: ${(props) => (props.marginBottom ? props.marginBottom : '30px')};
+  margin-bottom: 30px;
   line-height: 1.5;
   position: relative;
 `
@@ -59,10 +59,6 @@ export default {
       required: false,
       default: "left",
     },
-    marginBottom: {
-      required: false,
-      default: "30px",
-    }
   },
 }
 </script>

package/src/components/pageTitle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
+  <title-text :color="color">{{ text }}</title-text>
 </template>
 
 <script>
@@ -11,12 +11,12 @@
 // />
 import styled from "vue-styled-components"
 
-const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
+const textAttrs = { color: String }
 const TitleText = styled("div", textAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
-  text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
+  font-size: 16px;
+  text-transform: uppercase;
   margin-bottom: 20px;
 `
 
@@ -32,14 +32,6 @@ export default {
     color: {
       required: false,
     },
-    fontSize: {
-      required: false,
-      default: '16px'
-    },
-    uppercase: {
-      required: false,
-      default: true
-    }
   },
 }
 </script>