@eturnity/eturnity_reusable_components 1.2.22 → 1.2.24-EPDM-5477

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.22",
+  "version": "1.2.24-EPDM-5477",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -75,7 +75,6 @@
         size="small"
         :isDisabled="false"
       /> -->
-      <!-- <external-button text="Click me!" minWidth="500px" /> -->
     </page-container>
   </ThemeProvider>
 </template>
@@ -91,7 +90,6 @@ import InputText from '@/components/inputs/inputText'
 // import Checkbox from '@/components/inputs/checkbox'
 // import PageSubtitle from '@/components/pageSubtitle'
 // import Spinner from '@/components/spinner'
-// import ExternalButton from '@/components/buttons/externalButton'
 // import ProjectMarker from '@/components/projectMarker'
 import iconCollection from '@/components/icon/iconCollection'
 // import Modal from '@/components/modals/modal'
@@ -119,7 +117,6 @@ export default {
     // PageSubtitle,
     // Spinner,
     // Checkbox,
-    // ExternalButton,
     // Modal,
     // ProjectMarker,
     iconCollection

package/src/assets/svgIcons/dislike.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.40533 12.7951L9.87682 9.32359C10.1087 9.09174 10.2403 8.77216 10.2403 8.44005V2.18009C10.2403 1.4908 9.6763 0.92684 8.98702 0.92684H3.34741C2.84611 0.92684 2.39494 1.22762 2.19442 1.68505L0.151629 6.45366C-0.374734 7.69437 0.53387 9.07294 1.88111 9.07294H5.42153L4.82624 11.9429C4.76358 12.2562 4.85757 12.5758 5.08315 12.8013C5.45286 13.1648 6.04189 13.1648 6.40533 12.7951ZM12.7468 0.92684C12.0575 0.92684 11.4935 1.4908 11.4935 2.18009V7.19307C11.4935 7.88236 12.0575 8.44632 12.7468 8.44632C13.436 8.44632 14 7.88236 14 7.19307V2.18009C14 1.4908 13.436 0.92684 12.7468 0.92684Z"/>
+</svg>

package/src/assets/svgIcons/external_icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+	<path d="m12.6 14h-11.4c-0.7 0-1.3-0.6-1.3-1.3v-11.4c0-0.7 0.6-1.3 1.3-1.3h4.8v2h-3.1c-0.5 0-1 0.4-1 0.9v8.3c0 0.4 0.5 0.8 1 0.8h8.3c0.4 0 0.9-0.4 0.9-0.9v-3.1h2v4.7c-0.2 0.7-0.7 1.3-1.5 1.3z"/>
+	<path d="m7.9 0h6v6z"/>
+	<path d="m5.7 9.8l-1.4-1.5 7.1-7.1 1.4 1.4z"/>
+</svg>

package/src/assets/svgIcons/like.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.59467 1.20492L4.12318 4.67641C3.89133 4.90826 3.75974 5.22784 3.75974 5.55995V11.8199C3.75974 12.5092 4.3237 13.0732 5.01298 13.0732H10.6526C11.1539 13.0732 11.6051 12.7724 11.8056 12.3149L13.8484 7.54634C14.3747 6.30563 13.4661 4.92706 12.1189 4.92706H8.57847L9.17376 2.05713C9.23642 1.74381 9.14243 1.42424 8.91685 1.19865C8.54714 0.835211 7.95811 0.835211 7.59467 1.20492V1.20492ZM1.25325 13.0732C1.94253 13.0732 2.50649 12.5092 2.50649 11.8199V6.80693C2.50649 6.11764 1.94253 5.55368 1.25325 5.55368C0.563961 5.55368 0 6.11764 0 6.80693V11.8199C0 12.5092 0.563961 13.0732 1.25325 13.0732Z"/>
+</svg>

package/src/assets/theme.js

@@ -9,7 +9,7 @@ const theme = {
     gray1: '#666',
     mediumGray: '#d5d5d5',
     lightGray: '#f2f2f2',
-    white: '#fff',
+    white: '#ffffff',
     blue: '#48a2d0',
     red: '#ff5656',
     blue1: '#e4efff',

package/src/components/buttons/buttonIcon/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <page-container>
+    <button-wrapper
+      :isDisabled="isDisabled"
+      :minWidth="minWidth"
+      :customColor="customColor"
+      :height="height"
+    >
+      <icon-container :width="height">
+        <icon
+            v-if="!!iconName"
+            :name="iconName"
+            :color="fontColor ? fontColor : theme.colors.white"
+            size="14px"
+        />
+      </icon-container>
+      <button-container :fontSize="fontSize" :fontColor="fontColor">{{ text }}</button-container>
+    </button-wrapper>
+  </page-container>
+</template>
+
+<script>
+// import buttonIcon from "@eturnity/eturnity_reusable_components/src/components/buttons/buttonIcon"
+// <button-icon
+//   :isDisabled="true"
+//   text="Click Me"
+//   minWidth="300px"
+//   customColor="#000"
+//   iconName="external_icon"
+//   fontColor="white"
+//   fontSize="12px"
+//   height="24px"
+// />
+
+import Icon from "../../icon"
+import styled from "vue-styled-components"
+import Theme from "@/assets/theme";
+
+const PageContainer = styled.div``
+
+const ButtonAttrs = {
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: String,
+  height: String
+}
+const ButtonWrapper = styled("div", ButtonAttrs)`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  background-color: ${(props) =>
+    props.isDisabled
+      ? props.theme.colors.disabled
+      : props.customColor
+      ? props.customColor
+      : props.theme.colors.yellow};
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  user-select: none;
+  border-radius: 4px;
+  overflow: hidden;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : "initial")};
+  height: ${(props) => props.height};
+
+  &:hover {
+    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
+  }
+
+  &:active {
+    opacity: 1;
+  }
+`
+
+const ButtonContainerAttrs = {
+  fontSize: String,
+  fontColor: String
+}
+const ButtonContainer = styled('div', ButtonContainerAttrs)`
+  font-size: ${(props) => props.fontSize};
+  color: ${(props) => props.fontColor ? props.fontColor : props.theme.colors.white};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 15px;
+`
+
+const IconContainerAttrs = {
+  width: String
+}
+const IconContainer = styled('div', IconContainerAttrs)`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  width: ${(props) => props.width};
+  background: ${(props) => props.theme.colors.white + '1a'};
+`
+
+export default {
+  name: "button-icon",
+  components: {
+    PageContainer,
+    ButtonContainer,
+    ButtonWrapper,
+    IconContainer,
+    Icon
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    text: {
+      required: true
+    },
+    minWidth: {
+      required: false,
+      default: null
+    },
+    customColor: {
+      required: false,
+      default: null
+    },
+    iconName: {
+      required: true
+    },
+    fontColor: {
+      required: false,
+      default: null
+    },
+    fontSize: {
+      required: false,
+      default: '13px'
+    },
+    height: {
+      required: false,
+      default: '30px'
+    }
+  },
+  data () {
+    return {
+      theme: Theme
+    }
+  }
+}
+</script>

package/src/components/icon/index.vue

@@ -19,6 +19,7 @@
 //   color="red"
 //   hoveredColor="blue"
 //   size="60px" by default, this is 30px
+//   cursor="default"
 // />
 
 import styled from 'vue-styled-components'

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

@@ -14,29 +14,32 @@
           :alignText="infoTextAlign"
         />
       </label-wrapper>
-      <input-container
-        :placeholder="placeholder"
-        :isError="isError"
-        :inputWidth="inputWidth"
-        :minWidth="minWidth"
-        :value="value"
-        @input="onChangeHandler"
-        :noBorder="noBorder"
-        :disabled="disabled"
-        :isDisabled="disabled"
-        :fontSize="fontSize"
-        :inputType="inputType"
-        :type="inputTypeData"
-      />
-      <icon-wrapper
-        v-if="inputType === 'password' && !isError"
-        @click="toggleShowPassword()"
-      >
-        <icon name="current_variant" size="20px" />
-      </icon-wrapper>
-      <icon-wrapper v-if="isError">
-        <icon name="warning" size="16px" />
-      </icon-wrapper>
+      <icon-container>
+        <input-container
+          :placeholder="placeholder"
+          :isError="isError"
+          :inputWidth="inputWidth"
+          :minWidth="minWidth"
+          :value="value"
+          @input="onChangeHandler"
+          :noBorder="noBorder"
+          :disabled="disabled"
+          :isDisabled="disabled"
+          :fontSize="fontSize"
+          :inputType="inputType"
+          :type="inputTypeData"
+        />
+        <icon-wrapper
+          v-if="inputType === 'password' && !isError"
+          @click="toggleShowPassword()"
+          size="20px"
+        >
+          <icon name="current_variant" size="20px" />
+        </icon-wrapper>
+        <icon-wrapper v-if="isError" size="16px">
+          <icon name="warning" size="16px" cursor="default" />
+        </icon-wrapper>
+      </icon-container>
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -90,6 +93,7 @@ const InputContainer = styled('input', inputProps)`
       ? '11px 25px 11px 10px'
       : '11px 5px 11px 10px'};
   border-radius: 4px;
+  position: relative;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   color: ${(props) =>
     props.isError ? props.theme.colors.red : props.theme.colors.black};
@@ -128,10 +132,18 @@ const ErrorMessage = styled.div`
   top: calc(100% + 1px);
 `
 
-const IconWrapper = styled.div`
+const IconAttrs = { size: String }
+const IconWrapper = styled('div', IconAttrs)`
   position: absolute;
-  top: 55%;
+  top: 0;
+  bottom: 0;
+  margin: auto;
   right: 5px;
+  height: ${(props) => (props.size ? props.size : 'auto')};
+`
+
+const IconContainer = styled.div`
+  position: relative;
 `
 
 export default {
@@ -161,7 +173,8 @@ export default {
     InputLabel,
     LabelWrapper,
     Icon,
-    IconWrapper
+    IconWrapper,
+    IconContainer
   },
   data() {
     return {

package/src/components/buttons/externalButton/index.vue

@@ -1,101 +0,0 @@
-<template>
-  <page-container>
-    <button-wrapper
-      :isDisabled="isDisabled"
-      :minWidth="minWidth"
-      :customColor="customColor"
-    >
-      <icon-container>
-        <icon-element
-          :src="require('../../../assets/icons/external_icon.svg')"
-        />
-      </icon-container>
-      <button-container>{{ text }}</button-container>
-    </button-wrapper>
-  </page-container>
-</template>
-
-<script>
-// import ExternalButton from "@eturnity/eturnity_reusable_components/src/components/buttons/externalButton"
-// <main-button
-//   :isDisabled="true"
-//   text="Click Me"
-//   minWidth="300px"
-//   customColor="#000"
-// />
-
-import styled from "vue-styled-components"
-
-const PageContainer = styled.div``
-
-const ButtonAttrs = {
-  isDisabled: Boolean,
-  minWidth: String,
-  customColor: String,
-}
-const ButtonWrapper = styled("div", ButtonAttrs)`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  background-color: ${(props) =>
-    props.isDisabled
-      ? props.theme.colors.disabled
-      : props.customColor
-      ? props.customColor
-      : props.theme.colors.yellow};
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
-  user-select: none;
-  border-radius: 4px;
-  min-width: ${(props) => (props.minWidth ? props.minWidth : "initial")};
-
-  &:hover {
-    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
-  }
-
-  &:active {
-    opacity: 1;
-  }
-`
-
-const ButtonContainer = styled.div`
-  padding: 7px 15px;
-  font-size: 13px;
-  color: ${(props) => props.theme.colors.white};
-  text-align: center;
-`
-
-const IconContainer = styled.div`
-  display: grid;
-  align-items: center;
-  justify-items: center;
-`
-
-const IconElement = styled.img``
-
-export default {
-  name: "external-button",
-  components: {
-    PageContainer,
-    ButtonContainer,
-    ButtonWrapper,
-    IconContainer,
-    IconElement,
-  },
-  props: {
-    isDisabled: {
-      required: false,
-      default: false,
-    },
-    text: {
-      required: true,
-    },
-    minWidth: {
-      required: false,
-      default: null,
-    },
-    customColor: {
-      required: false,
-      default: null,
-    },
-  },
-}
-</script>