@eturnity/eturnity_reusable_components 1.2.24-EPDM-5477 → 1.2.25

package/package.json

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

package/src/App.vue

@@ -75,6 +75,7 @@
         size="small"
         :isDisabled="false"
       /> -->
+      <!-- <external-button text="Click me!" minWidth="500px" /> -->
     </page-container>
   </ThemeProvider>
 </template>
@@ -90,6 +91,7 @@ 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'
@@ -117,6 +119,7 @@ export default {
     // PageSubtitle,
     // Spinner,
     // Checkbox,
+    // ExternalButton,
     // Modal,
     // ProjectMarker,
     iconCollection

package/src/assets/theme.js

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

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

@@ -0,0 +1,101 @@
+<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>

package/src/components/tables/mainTable/index.vue

@@ -8,7 +8,11 @@
         <spinner-wrapper v-if="isLoading">
           <spinner />
         </spinner-wrapper>
-        <table-container v-else :cellPaddings="cellPaddings">
+        <table-container
+          v-else
+          :cellPaddings="cellPaddings"
+          :tableCursor="tableCursor"
+        >
           <slot />
         </table-container>
       </table-wrapper>
@@ -19,8 +23,8 @@
 <script>
 // ToDo: add this to storybook
 // import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
-import styled from "vue-styled-components"
-import Spinner from "../../spinner"
+import styled from 'vue-styled-components'
+import Spinner from '../../spinner'
 
 const PageContainer = styled.div``
 
@@ -36,8 +40,8 @@ const TableScroll = styled.div`
 `
 
 const wrapperAttrs = { fullWidth: Boolean }
-const TableWrapper = styled("div", wrapperAttrs)`
-  width: ${(props) => (props.fullWidth ? "100%" : "fit-content")};
+const TableWrapper = styled('div', wrapperAttrs)`
+  width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
   max-width: 100%;
   overflow: auto;
 
@@ -63,8 +67,8 @@ const SpinnerWrapper = styled.div`
   justify-items: center;
 `
 
-const containerAttrs = { cellPaddings: String }
-const TableContainer = styled("table", containerAttrs)`
+const containerAttrs = { cellPaddings: String, tableCursor: String }
+const TableContainer = styled('table', containerAttrs)`
   width: 100%;
   border-collapse: collapse;
   border: none;
@@ -82,7 +86,7 @@ const TableContainer = styled("table", containerAttrs)`
     tr {
       &:hover {
         background-color: ${(props) => props.theme.colors.white};
-        cursor: pointer;
+        cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
 
         .arrow-container,
         .input-placeholder,
@@ -115,7 +119,8 @@ const TableContainer = styled("table", containerAttrs)`
   }
 
   td {
-    padding: ${(props) => props.cellPaddings ? props.cellPaddings : "6px 6px 7px 4px" };
+    padding: ${(props) =>
+      props.cellPaddings ? props.cellPaddings : '6px 6px 7px 4px'};
     border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
     &.empty {
@@ -207,7 +212,7 @@ const TableContainer = styled("table", containerAttrs)`
     .text {
       padding: 10px 15px 10px 15px;
       color: ${(props) => props.theme.colors.black};
-      cursor: pointer;
+      cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
     }
 
     .bold {
@@ -245,7 +250,7 @@ const TableContainer = styled("table", containerAttrs)`
 
     &:hover {
       input:disabled {
-        background-color: ${(props) => props.theme.colors.grey5 + "!important"};
+        background-color: ${(props) => props.theme.colors.grey5 + '!important'};
       }
 
       .drag-icon {
@@ -284,7 +289,7 @@ const TableContainer = styled("table", containerAttrs)`
       cursor: grab;
       background-position: center;
       background-image: ${() =>
-        `url(${require("../../../assets/icons/drag_icon.svg")})`};
+        `url(${require('../../../assets/icons/drag_icon.svg')})`};
 
       &:active {
         cursor: grabbing;
@@ -297,7 +302,7 @@ const TableContainer = styled("table", containerAttrs)`
       background: no-repeat;
       margin-left: 10px;
       background-image: ${() =>
-        `url(${require("../../../assets/icons/subposition_icon.svg")})`};
+        `url(${require('../../../assets/icons/subposition_icon.svg')})`};
     }
 
     .arrow-down {
@@ -306,7 +311,7 @@ const TableContainer = styled("table", containerAttrs)`
       background: no-repeat;
       background-position: center;
       background-image: ${() =>
-        `url(${require("../../../assets/icons/arrow_down.svg")})`};
+        `url(${require('../../../assets/icons/arrow_down.svg')})`};
     }
 
     .arrow-up {
@@ -315,7 +320,7 @@ const TableContainer = styled("table", containerAttrs)`
       background: no-repeat;
       background-position: center;
       background-image: ${() =>
-        `url(${require("../../../assets/icons/arrow_up_red.svg")})`};
+        `url(${require('../../../assets/icons/arrow_up_red.svg')})`};
     }
   }
 
@@ -338,7 +343,7 @@ const TableContainer = styled("table", containerAttrs)`
 `
 
 export default {
-  name: "main-table",
+  name: 'main-table',
   components: {
     TableScroll,
     TableWrapper,
@@ -346,25 +351,29 @@ export default {
     Spinner,
     TableContainer,
     PageContainer,
-    TableTitle,
+    TableTitle
   },
   props: {
     fullWidth: {
       required: false,
-      default: true,
+      default: true
     },
     cellPaddings: {
       required: false,
-      default: '',
+      default: ''
     },
     isLoading: {
       required: false,
-      default: false,
+      default: false
     },
     titleText: {
       required: false,
-      default: null,
+      default: null
     },
-  },
+    tableCursor: {
+      required: false,
+      default: 'auto'
+    }
+  }
 }
 </script>

package/src/assets/svgIcons/dislike.svg

@@ -1,3 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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/components/buttons/buttonIcon/index.vue

@@ -1,143 +0,0 @@
-<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>