@eturnity/eturnity_reusable_components 7.2.2-EPDM-9012.0 → 7.2.2-EPDM-8006.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.2.2-EPDM-9012.0",
+  "version": "7.2.2-EPDM-8006.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -63,4 +63,4 @@
   "author": "Aaron Enser",
   "license": "ISC",
   "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
-}
+}

package/src/App.vue

@@ -1,24 +1,23 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-
-      <br/>
+      <br />
       <input-number
-          :value="value"
-          :minNumber="0"
-          unitName="mm"
-          :numberPrecision="0"
-          backgroundColor="transparent"
-          borderColor="eturnityGrey"
-          inputHeight="34px"
-          inputWidth="420px"
-          textAlign="left"
-          :isInteractive="true"
-          :interactionStep="1"
-          @on-input="value = $event"
-          @input-change="changeHandler"
-          @input-focus="focusHandler"
-          @input-blur="blurHandler"
+        :value="value"
+        :minNumber="0"
+        unitName="mm"
+        :numberPrecision="0"
+        backgroundColor="transparent"
+        borderColor="eturnityGrey"
+        inputHeight="34px"
+        inputWidth="420px"
+        textAlign="left"
+        :isInteractive="true"
+        :interactionStep="1"
+        @on-input="value = $event"
+        @input-change="changeHandler"
+        @input-focus="focusHandler"
+        @input-blur="blurHandler"
       >
         <template v-slot:label>
           <div>Interactive Label</div>
@@ -31,79 +30,77 @@
           <div>
             <a href="">test1</a>
             <button href="">test2</button>
-            <br>
+            <br />
             <p>Text</p>
           </div>
         </template>
       </dropdown-component>
 
       <videoThumbnail
-          src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
-          playIconColor="red"
-          playIconSize="20px"
-          width="400px"
-          height="600px"
+        src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
+        playIconColor="red"
+        playIconSize="20px"
+        width="400px"
+        height="600px"
       />
 
       <SwitchField
-          @on-switch-change="onInputChange($event)"
-          :options="[
-              { value: 0, content: 'zero' },
-              { value: 1, content: 'one' },
-              { value: 2, content: 'two' }
-            ]"
-          :value="value"
-          label="label"
-          toggleColor="red"
-          size="large"
-          backgroundColor="blue"
-          labelAlign="left"
-          fontColor="black"
-          :disabled="false"
+        @on-switch-change="onInputChange($event)"
+        :options="[
+          { value: 0, content: 'zero' },
+          { value: 1, content: 'one' },
+          { value: 2, content: 'two' }
+        ]"
+        :value="value"
+        label="label"
+        toggleColor="red"
+        size="large"
+        backgroundColor="blue"
+        labelAlign="left"
+        fontColor="black"
+        :disabled="false"
       />
       <icon
-          name="opacity"
-          color="red"
-          hoveredColor="blue"
-          size="60px"
-          cursor="default"
-          isStriked="true"
+        name="opacity"
+        color="red"
+        hoveredColor="blue"
+        size="60px"
+        cursor="default"
+        isStriked="true"
       />
       <Select
-          :value="value"
-          selectWidth="100%"
-          optionWidth="50%"
-          label="that is a label"
-          alignItems="vertical"
-          colorMode="dark"
-          isSearchable="true"
-          @input-change="value = $event"
-          @search-change="searchValue = $event"
+        :value="value"
+        selectWidth="100%"
+        optionWidth="50%"
+        label="that is a label"
+        alignItems="vertical"
+        colorMode="dark"
+        isSearchable="true"
+        @input-change="value = $event"
+        @search-change="searchValue = $event"
       >
         <template #selector="{ selectedValue }">
           value selected: {{ selectedValue }}
         </template>
         <template #dropdown>
           <Option
-              v-for="opt in filteredOptionList"
-              :key="opt.id"
-              :value="opt.val"
-          >{{ opt.lookFor }}
-          </Option
-          >
+            v-for="opt in filteredOptionList"
+            :key="opt.id"
+            :value="opt.val"
+            >{{ opt.lookFor }}
+          </Option>
         </template>
       </Select>
 
-
       {{ filteredOptionList }}
 
-      <iconCollection color="red"/>
+      <iconCollection color="red" />
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-import {ThemeProvider} from 'vue-styled-components'
+import { ThemeProvider } from 'vue-styled-components'
 import theme from './assets/theme'
 import styled from 'vue-styled-components'
 import InputNumber from '@/components/inputs/inputNumber'
@@ -114,7 +111,7 @@ import iconCollection from '@/components/icon/iconCollection'
 import dropdownComponent from '@/components/dropdown'
 import videoThumbnail from '@/components/videoThumbnail'
 import icon from '@/components/icon'
-import infoCard from '@/components/infoCard'
+// import infoCard from '@/components/infoCard'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -139,8 +136,8 @@ export default {
     iconCollection,
     dropdownComponent,
     videoThumbnail,
-    icon,
-    infoCard
+    icon
+    // infoCard
   },
   data() {
     return {
@@ -148,14 +145,14 @@ export default {
       value2: 42,
       companyName: 'toto',
       optionList: [
-        {id: 'a', val: 'A', lookFor: 'babababa'},
-        {id: 'b', val: 'B', lookFor: 'abab'},
-        {id: 'c', val: 'C', lookFor: 'ccc'},
-        {id: 'd', val: 'D', lookFor: 'ddd'},
-        {id: 'e', val: 'E', lookFor: 'dddee'},
-        {id: 'f', val: 'F', lookFor: 'ddfff'},
-        {id: 'g', val: 'G', lookFor: 'dggg'},
-        {id: 'h', val: 'H', lookFor: 'dddhhh'},
+        { id: 'a', val: 'A', lookFor: 'babababa' },
+        { id: 'b', val: 'B', lookFor: 'abab' },
+        { id: 'c', val: 'C', lookFor: 'ccc' },
+        { id: 'd', val: 'D', lookFor: 'ddd' },
+        { id: 'e', val: 'E', lookFor: 'dddee' },
+        { id: 'f', val: 'F', lookFor: 'ddfff' },
+        { id: 'g', val: 'G', lookFor: 'dggg' },
+        { id: 'h', val: 'H', lookFor: 'dddhhh' }
       ],
       searchValue: ''
     }
@@ -163,7 +160,7 @@ export default {
   computed: {
     filteredOptionList() {
       return this.optionList.filter((opt) =>
-          opt.lookFor.includes(this.searchValue)
+        opt.lookFor.includes(this.searchValue)
       )
     }
   },
@@ -226,7 +223,7 @@ export default {
       ]
       return items
     },
-    getComponentInfo({row, value}) {
+    getComponentInfo({ row, value }) {
       let item
       if (row.selectedValue && row.selectedValue[value]) {
         item = row.selectedValue[value]

package/src/assets/svgIcons/logout.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.173 4.517L15.242 7.586L15.656 8L15.676 8L15.676 8.02L16.656 9L15.676 9.98L15.676 10L15.656 10L15.242 10.414L12.173 13.483L10.759 12.069L12.827 10L4.676 10L4.676 8L12.827 8L10.758 5.931L12.173 4.517ZM-6.99382e-07 2L-8.74228e-08 16L0 18L2 18L7 18L7 16L2 16L2 2L7 2L7 -3.0598e-07L2 -8.74228e-08L-7.86805e-07 0L-6.99382e-07 2Z" fill="#263238"/>
+</svg>

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

@@ -16,10 +16,13 @@
       <label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
         {{ labelText }}
       </label-text>
-
+      
       <info-text
         v-if="labelInfoText"
         :text="labelInfoText"
+        borderColor="#ccc"
+        size="14px"
+        :alignArrow="labelInfoAlign"
       />
     </label-wrapper>
     <input-wrapper>
@@ -94,6 +97,7 @@
 //     fontSize="13px"
 //     labelText="Number of Modules"
 //     labelInfoText="Here is some information for you..."
+//     labelInfoAlign="left"
 //     :minNumber="0"
 //     fontColor="blue"
 // />
@@ -402,6 +406,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'"
+          :alignArrow="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">
@@ -313,6 +315,9 @@ export default {
     infoTextMessage: {
       required: false
     },
+    infoTextAlign: {
+      required: false
+    },
     selectWidth: {
       required: false,
       default: null

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

@@ -17,6 +17,9 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          borderColor="#ccc"
+          size="14px"
+          :alignText="infoTextAlign"
         />
       </label-container>
 
@@ -48,6 +51,9 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          borderColor="#ccc"
+          size="14px"
+          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -201,6 +207,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

@@ -14,6 +14,9 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          borderColor="#ccc"
+          size="14px"
+          :alignText="infoTextAlign"
         />
       </label-container>
       <toggle-wrapper
@@ -47,6 +50,9 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          borderColor="#ccc"
+          size="14px"
+          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -66,6 +72,7 @@
 //   labelAlign="right"
 //   fontColor="black"
 //   :disabled="true"
+//   infoTextAlign="right" // left by default
 //   infoTextMessage="My info message"
 //   data-id="test_data_id"
 // />
@@ -186,7 +193,7 @@ const ToggleDot = styled('span', toggleProps)`
       : props.size === 'small'
       ? '10px'
       : '14px'};
-  left: 3px;
+  left: 3px
   bottom: ${(props) =>
     props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
   background-color: ${(props) =>
@@ -271,6 +278,9 @@ export default {
     infoTextMessage: {
       required: false
     },
+    infoTextAlign: {
+      required: false
+    },
     dataId: {
       type: String,
       default: ''

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,14 @@
 <template>
-  <title-wrap :hasInfoText="!!infoText">
-    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
-      {{ text }}
-    </title-text>
+  <flex>
+    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
     <info-text
-      v-if="!!infoText"
-      :text="infoText"
-    />
-  </title-wrap>
+        v-if="infoText"
+        :text="infoText"
+        borderColor="#ccc"
+        size="14px"
+        :alignArrow="infoAlign"
+      />
+  </flex>
 </template>
 
 <script>
@@ -18,41 +19,33 @@
 //   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)`
+import InfoText from '../infoText'
+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')};
+  
+`
+const flex = styled("div", textAttrs)`
+  display: flex;
+  gap:10px;
+  margin-bottom: 20px;
+  align-items: center;
 `
 
 export default {
   name: "page-title",
   components: {
     TitleText,
-    TitleWrap,
-    InfoText
+    InfoText,
+    flex
   },
   props: {
     text: {
       required: true,
     },
-    infoText: {
-      required: false,
-      default: null,
-    },
     color: {
       required: false,
     },
@@ -63,7 +56,13 @@ export default {
     uppercase: {
       required: false,
       default: true
-    }
+    },
+    infoText: {
+      required: false,
+    },
+    infoAlign: {
+      required: false,
+    },
   },
 }
 </script>