@eturnity/eturnity_reusable_components 6.48.0-EPDM-9012.0 → 6.48.0-EPDM-7260.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.48.0-EPDM-9012.0",
+  "version": "6.48.0-EPDM-7260.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <page-title text="Hello" infoText="The ElektroForm solar integration has been activated for your company. Please log in with your Brunner Informatik Cloud-ID. Eturnity will not store your credentials but just a token for the connection."></page-title>
+
       <br/>
       <input-number
           :value="value"
@@ -114,7 +114,6 @@ import iconCollection from '@/components/icon/iconCollection'
 import dropdownComponent from '@/components/dropdown'
 import videoThumbnail from '@/components/videoThumbnail'
 import icon from '@/components/icon'
-import pageTitle from '@/components/pageTitle'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -138,7 +137,6 @@ export default {
     SwitchField,
     iconCollection,
     dropdownComponent,
-    pageTitle,
     videoThumbnail,
     icon
   },

package/src/components/infoText/index.vue

@@ -10,6 +10,7 @@
       </icon-img>
       <text-overlay
         v-if="showInfo"
+        :borderColor="borderColor"
         :width="width"
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
@@ -26,6 +27,7 @@
 //To use:
 // <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
+//     borderColor="#ccc"
 //     size="20"
 //     alignArrow="right" // which side the arrow should be on
 // />
@@ -35,6 +37,7 @@ import icon from '../icon'
 
 const textAttrs = {
   iconSize: String,
+  borderColor: String,
   alignArrow: String,
   width: String,
   halfComputedTextInfoWidth: Number
@@ -108,6 +111,10 @@ export default {
     text: {
       required: false
     },
+    borderColor: {
+      required: false,
+      default: null
+    },
     size: {
       required: false,
       default: '14px'
@@ -149,7 +156,11 @@ export default {
   },
   computed: {
     iconColor() {
-      return theme.colors.mediumGray
+      return this.isActive
+        ? this.borderColor
+          ? this.borderColor
+          : theme.colors.secondary
+        : theme.colors.mediumGray
     },
     halfComputedTextInfoWidth() {
       return parseInt(this.width) / 2

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -32,6 +32,7 @@ const Template = (args, { argTypes }) => ({
   //     fontSize="13px"
   //     labelText="Number of Modules"
   //     labelInfoText="Here is some information for you..."
+  //     labelInfoAlign="left"
   // />
 })
 
@@ -128,7 +129,8 @@ WithLabelInfo.args = {
   textAlign: "left",
   showLinearUnitName: false,
   labelText: "Number Input",
-  labelInfoText: "Here is some information for you..."
+  labelInfoText: "Here is some information for you...",
+  labelInfoAlign: "right",
 }
 
 export const LargerFont = Template.bind({})

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

@@ -19,6 +19,9 @@
       <info-text
         v-if="labelInfoText"
         :text="labelInfoText"
+        borderColor="#ccc"
+        size="14px"
+        :alignText="labelInfoAlign"
       />
     </label-wrapper>
     <input-wrapper>
@@ -92,6 +95,7 @@
 //     fontSize="13px"
 //     labelText="Number of Modules"
 //     labelInfoText="Here is some information for you..."
+//     labelInfoAlign="left"
 //     :minNumber="0"
 //     fontColor="blue"
 // />
@@ -396,6 +400,10 @@ export default {
       required: false,
       default: null
     },
+    labelInfoAlign: {
+      required: false,
+      default: 'left'
+    },
     defaultNumber: {
       required: false,
       default: null

package/src/components/inputs/inputText/InputText.stories.js

@@ -21,6 +21,7 @@ const Template = (args, { argTypes }) => ({
   //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
   //   :isError="checkErrors()"
   //   :errorMessage="This is my error message"
+  //   infoTextAlign="right" // left by default
   //   infoTextMessage="My info message"
   //   label="Question 5"
   //   alignItems="horizontal" // horizontal, vertical

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

@@ -17,7 +17,9 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
+          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <input-error-wrapper>
@@ -204,6 +206,7 @@ export default {
   //   @input-blur="onInputBlur($event)"
   //   :isError="checkErrors()"
   //   :errorMessage="This is my error message"
+  //   infoTextAlign="right" // left by default
   //   infoTextMessage="My info message"
   //   label="Question 5"
   //   alignItems="horizontal" // horizontal, vertical
@@ -267,6 +270,9 @@ export default {
     infoTextMessage: {
       required: false
     },
+    infoTextAlign: {
+      required: false
+    },
     label: {
       required: false
     },

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

@@ -22,7 +22,9 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
+          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <select-button-wrapper :disabled="disabled">
@@ -311,6 +313,9 @@ export default {
     infoTextMessage: {
       required: false
     },
+    infoTextAlign: {
+      required: false
+    },
     selectWidth: {
       required: false,
       default: null

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

@@ -15,6 +15,9 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          borderColor="#ccc"
+          size="14px"
+          :alignText="infoTextAlign"
         />
       </label-container>
 
@@ -45,6 +48,9 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          borderColor="#ccc"
+          size="14px"
+          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -196,6 +202,9 @@ export default {
     infoTextMessage: {
       required: false
     },
+    infoTextAlign: {
+      required: false
+    },
     colorMode: {
       required: false,
       default: 'light'

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -22,6 +22,7 @@ const Template = (args, { argTypes }) => ({
   //     rowHeight="4" //optional
   //     :isError="false"
   //     :errorText="$gettext('field_required')"
+  //     infoTextAlign="right" // left by default
   //     infoTextMessage="My info message"
   //     label="Question 5"
   //     alignItems="horizontal" // horizontal, vertical
@@ -36,6 +37,7 @@ Default.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
+  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -50,6 +52,7 @@ Disabled.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
+  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -64,6 +67,7 @@ Error.args = {
   rowHeight: "2",
   isError: true,
   errorText: "This field is required",
+  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -78,6 +82,7 @@ WithLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
+  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -92,6 +97,7 @@ HorizontalLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
+  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -106,6 +112,7 @@ LargerTextArea.args = {
   rowHeight: "5",
   isError: false,
   errorText: "This field is required",
+  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -120,6 +127,7 @@ LargerFontSize.args = {
   fontSize: "24px",
   isError: false,
   errorText: "This field is required",
+  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",

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

@@ -11,7 +11,9 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          borderColor="#ccc"
           size="16px"
+          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <input-container
@@ -45,6 +47,7 @@
 //     rowHeight="4" //optional
 //     :isError="false"
 //     :errorText="$gettext('field_required')"
+//     infoTextAlign="right" // left by default
 //     infoTextMessage="My info message"
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
@@ -164,6 +167,9 @@ export default {
     infoTextMessage: {
       required: false
     },
+    infoTextAlign: {
+      required: false
+    },
     label: {
       required: false
     },

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

@@ -9,6 +9,9 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          borderColor="#ccc"
+          size="14px"
+          :alignText="infoTextAlign"
         />
       </label-container>
       <toggle-wrapper
@@ -42,6 +45,9 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          borderColor="#ccc"
+          size="14px"
+          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -61,6 +67,7 @@
 //   labelAlign="right"
 //   fontColor="black"
 //   :disabled="true"
+//   infoTextAlign="right" // left by default
 //   infoTextMessage="My info message"
 // />
 
@@ -264,7 +271,10 @@ export default {
     },
     infoTextMessage: {
       required: false,
-    }
+    },
+    infoTextAlign: {
+      required: false,
+    },
   },
   methods: {
     onToggleChange() {

package/src/components/pageSubtitle/index.vue

@@ -4,8 +4,11 @@
       {{ text }}
     </span>
     <info-text
-      v-if="!!infoText"
       :text="infoText"
+      v-if="!!infoText"
+      size="14px"
+      borderColor="#ccc"
+      :alignText="alignInfoText"
     />
   </subtitle-text>
 </template>
@@ -52,6 +55,10 @@ export default {
       required: false,
       default: null,
     },
+    alignInfoText: {
+      required: false,
+      default: "left",
+    },
     marginBottom: {
       required: false,
       default: "30px",

package/src/components/pageTitle/index.vue

@@ -1,13 +1,5 @@
 <template>
-  <title-wrap :hasInfoText="!!infoText">
-    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
-      {{ text }}
-    </title-text>
-    <info-text
-      v-if="!!infoText"
-      :text="infoText"
-    />
-  </title-wrap>
+  <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
 </template>
 
 <script>
@@ -18,41 +10,25 @@
 //   color="red"
 // />
 import styled from "vue-styled-components"
-import InfoText from "../infoText"
 
-const wrapAttrs = { hasInfoText: Boolean }
-const TitleWrap = styled("div", wrapAttrs)`
-  display: grid;
-  align-items: center;
-  grid-gap: 12px;
-  grid-template-columns: ${(props) =>
-    props.hasInfoText ? "auto auto 1fr" : "1fr"};
-  margin-bottom: 20px;
-`
-
-const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
-const TitleText = styled('span', titleAttrs)`
+const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
+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')};
+  margin-bottom: 20px;
 `
 
 export default {
   name: "page-title",
   components: {
     TitleText,
-    TitleWrap,
-    InfoText
   },
   props: {
     text: {
       required: true,
     },
-    infoText: {
-      required: false,
-      default: null,
-    },
     color: {
       required: false,
     },

package/src/components/selectedOptions/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <page-container>
+    <box-container>
+      <selected-container
+        >{{ numberSelected }} {{ $gettext('selected') }}</selected-container
+      >
+      <list-container>
+        <list-item
+          v-for="item in optionsList"
+          :key="item.type"
+          :hoverColor="item.hoverColor"
+          @click="$emit('on-' + item.type)"
+        >
+          {{ item.name }}
+        </list-item>
+      </list-container>
+      <icon-container @click="$emit('on-close')">
+        <icon
+          name="close_for_modals,_tool_tips"
+          color="white"
+          size="14px"
+          cursor="pointer"
+        />
+      </icon-container>
+    </box-container>
+  </page-container>
+</template>
+
+<script>
+// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
+// optionsList = [
+//   {
+//     type: 'export',
+//     name: 'Export'
+//   },
+//   {
+//     type: 'delete',
+//     name: 'Delete',
+//     hoverColor: 'red' // default is green
+//   }
+// ]
+// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
+// <selected-options :optionsList="optionsList" @on-close="onCloseFunction()" @on-export="function()" @on-delete="function()" />
+import styled from 'vue-styled-components'
+import Icon from '../icon'
+
+const PageContainer = styled.div`
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+`
+
+const SelectedContainer = styled.div`
+  display: grid;
+  align-items: center;
+  height: 100%;
+  padding-right: 20px;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+`
+
+const BoxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.black};
+  opacity: 90%;
+  color: ${(props) => props.theme.colors.white};
+  border-radius: 4px;
+  padding: 8px 10px 8px 20px;
+  font-size: 14px;
+  height: 40px;
+`
+
+const ListContainer = styled.div`
+  padding: 0 20px;
+  display: flex;
+  gap: 20px;
+  color: ${(props) => props.theme.colors.white};
+`
+
+const ListAttrs = {
+  hoverColor: String
+}
+const ListItem = styled('div', ListAttrs)`
+  cursor: pointer;
+  &:hover {
+    color: ${(props) =>
+      props.hoverColor
+        ? props.theme.colors[props.hoverColor]
+        : props.theme.colors.green};
+  }
+`
+
+const IconContainer = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+  margin-left: 20px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+  }
+`
+
+export default {
+  name: 'selected-options',
+  components: {
+    PageContainer,
+    BoxContainer,
+    SelectedContainer,
+    ListContainer,
+    ListItem,
+    Icon,
+    IconContainer
+  },
+  props: {
+    optionsList: {
+      required: true
+    },
+    numberSelected: {
+      required: true,
+      default: 0
+    }
+  }
+}
+</script>