@eturnity/eturnity_reusable_components 1.0.12 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.12",
+  "version": "1.0.16",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,13 +1,7 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <slider
-        :value="inputValue"
-        unit="m"
-        @change="onChangeSlider($event)"
-        :minValue="10"
-        :maxValue="500"
-      />
+      <page-subtitle text="My Page Title" />
     </page-container>
   </ThemeProvider>
 </template>
@@ -16,7 +10,7 @@
 import { ThemeProvider } from "vue-styled-components"
 import theme from "./assets/theme"
 import styled from "vue-styled-components"
-import slider from "@/components/inputs/slider"
+import PageSubtitle from "@/components/pageSubtitle"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -27,11 +21,11 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    slider,
+    PageSubtitle,
   },
   data() {
     return {
-      inputValue: 50,
+      inputValue: false,
       checkedOption: "button_1",
       question: {
         number_format_precision: 4,
@@ -45,7 +39,7 @@ export default {
     getTheme() {
       return theme
     },
-    onChangeSlider(event) {
+    onInputChange(event) {
       this.inputValue = event
     },
   },

package/src/assets/icons/arrow_down.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4L8 0H0L4 4Z" fill="#263238"/>
+</svg>

package/src/assets/icons/arrow_up_red.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0L8 4H0L4 0Z" fill="#FF5656"/>
+</svg>

package/src/assets/icons/delete_icon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ff5656;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
+</svg>

package/src/assets/icons/delete_icon_gray.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #DEE2EB;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="delete_icon" class="cls-1" d="M15.44,27.225a0.8,0.8,0,0,0,.8.771h7.512a0.8,0.8,0,0,0,.8-0.771L25.1,15.9H14.9ZM21.7,18.711a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H22.026a0.327,0.327,0,0,1-.327-0.327V18.711Zm-2.288,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H19.739a0.327,0.327,0,0,1-.327-0.327V18.711h0Zm-2.287,0a0.327,0.327,0,0,1,.327-0.327h0.523a0.327,0.327,0,0,1,.327.327v6.472a0.327,0.327,0,0,1-.327.327H17.451a0.327,0.327,0,0,1-.327-0.327V18.711Zm8.329-5.884H21.988V12.172A0.169,0.169,0,0,0,21.819,12H18.18a0.168,0.168,0,0,0-.168.168v0.656H14.546a0.505,0.505,0,0,0-.505.505v1.587H25.958V13.332A0.505,0.505,0,0,0,25.453,12.827Z"/>
+</svg>

package/src/assets/icons/subposition_icon.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0V10H7" stroke="#B2B9C5"/>
+</svg>

package/src/assets/theme.js

@@ -6,12 +6,18 @@ const theme = {
     black: "#353535",
     yellow: "#fdb813",
     darkGray: "#818181",
+    gray1: "#666",
     mediumGray: "#d5d5d5",
     lightGray: "#f2f2f2",
     white: "#fff",
     blue: "#48a2d0",
     red: "#ff7e7e",
     disabled: "#c4c4c4",
+    blue1: "#e4efff",
+    grey3: "#b2b9c5",
+    grey4: "#ebeef4",
+    grey5: "#fafafa",
+    green: "#99db0c",
   },
   screen: {
     mobileSmall: "345px",

package/src/components/deleteIcon/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <wrapper>
+    <icon :color="color" />
+  </wrapper>
+</template>
+
+<script>
+// To use:
+// <delete-icon
+//   color="gray" // red is default
+// />
+import styled from "vue-styled-components"
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const iconAttrs = { color: String }
+const Icon = styled("span", iconAttrs)`
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  cursor: pointer;
+  background-image: ${(props) =>
+    props.color === "red"
+      ? `url(${require("../../assets/images/delete_icon.svg")})`
+      : props.color === "gray"
+      ? `url(${require("../../assets/images/delete_icon_gray.svg")})`
+      : `url(${require("../../assets/images/delete_icon.svg")})`};
+
+  &:hover {
+    box-shadow: 0px 4px 9px 1px rgb(0 0 0 / 20%);
+    border-radius: 4px;
+    background-image: ${() =>
+      `url(${require("../../assets/images/delete_icon.svg")})`};
+  }
+`
+
+export default {
+  name: "delete-icon",
+  components: {
+    Icon,
+    Wrapper,
+  },
+  props: {
+    color: {
+      required: false,
+      default: "red", // red, gray
+    },
+  },
+}
+</script>

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

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+// import Slider from "@eturnity/eturnity_reusable_components/src/components/inputs/slider"
 //To use:
 // <slider
 //     :value="sliderValue" //required from parent

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

@@ -0,0 +1,106 @@
+<template>
+  <container>
+    <input-wrapper>
+      <input-container
+        :placeholder="placeholder"
+        :isError="isError"
+        :rows="rowHeight"
+        :value="value"
+        @input="onChangeHandler"
+      />
+    </input-wrapper>
+    <error-message v-if="isError && errorText">{{ errorText }}</error-message>
+  </container>
+</template>
+
+<script>
+// import TextAreaInput from "@eturnity/eturnity_reusable_components/src/components/inputs/textAreaInput"
+// To use:
+// <text-area-input
+//     placeholder="Comments"
+//     @input-change="onInputChange({ value: $event, type: 'note' })"
+//     :value="form.note"
+//     rowHeight="4" //optional
+//     :isError="false"
+//     :errorText="$gettext('field_required')"
+// />
+import styled from "vue-styled-components"
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+  margin-bottom: 20px;
+`
+
+const inputProps = { isError: Boolean }
+const InputContainer = styled("textarea", inputProps)`
+  border: ${(props) =>
+    props.isError
+      ? "1px solid " + props.theme.colors.red
+      : "1px solid " + props.theme.colors.mediumGray};
+  padding: ${(props) =>
+    props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
+  border-radius: 4px;
+  font-size: 16px;
+  color: ${(props) => props.theme.colors.black};
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box; // to allow width of 100% with padding
+
+  &::placeholder {
+    color: ${(props) =>
+      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const InputWrapper = styled.span`
+  position: relative;,
+`
+
+const ErrorMessage = styled.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.red};
+  position: absolute;
+  bottom: -18px;
+`
+
+export default {
+  name: "text-area-input",
+  components: {
+    Container,
+    InputContainer,
+    InputWrapper,
+    ErrorMessage,
+  },
+  props: {
+    placeholder: {
+      required: false,
+      default: "",
+    },
+    isError: {
+      required: false,
+      default: false,
+    },
+    rowHeight: {
+      required: false,
+      default: "2",
+    },
+    value: {
+      required: true,
+      default: null,
+    },
+    errorText: {
+      required: false,
+    },
+  },
+  methods: {
+    onChangeHandler($event) {
+      this.$emit("input-change", $event)
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,129 @@
+<template>
+  <container>
+    <flex-wrapper>
+      <toggle-wrapper
+        role="checkbox"
+        :checked="isChecked"
+        tabindex="0"
+        @click="onToggleChange"
+        @keydown.space.prevent="onToggleChange"
+      >
+        <toggle-background />
+        <toggle-dot :isChecked="isChecked" :toggleColor="toggleColor" />
+      </toggle-wrapper>
+      <label-text>{{ label }}</label-text>
+    </flex-wrapper>
+  </container>
+</template>
+
+<script>
+// import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
+// To use:
+// <toggle
+//   @on-toggle-change="onInputChange($event)"
+//   :isChecked="toggleValue" // Boolean
+//   label="My Label Text"
+//   toggleColor="red"
+// />
+
+import styled from "vue-styled-components"
+
+const Container = styled.div`
+  display: inline-block;
+`
+
+const FlexWrapper = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 20px;
+  align-items: center;
+`
+
+const LabelText = styled.div`
+  color: ${(props) => props.theme.colors.darkGray};
+`
+
+const ToggleWrapper = styled.span`
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  width: 50px;
+  height: 24px;
+  border-radius: 9px;
+
+  &:focus {
+    outline: 0;
+  }
+
+  @media (max-width: ${(props) => props.theme.screen.mobile}) {
+    width: 80px;
+    height: 40px;
+  }
+`
+
+const ToggleBackground = styled.span`
+  display: inline-block;
+  border-radius: 100px;
+  height: 100%;
+  width: 100%;
+  background-color: ${(props) => props.theme.colors.lightGray};
+  transition: 0.4s ease;
+`
+
+const toggleProps = { isChecked: Boolean, toggleColor: String }
+const ToggleDot = styled("span", toggleProps)`
+  position: absolute;
+  height: 14px;
+  width: 14px;
+  left: 5px;
+  bottom: 5px;
+  background-color: ${(props) =>
+    props.isChecked
+      ? props.toggleColor
+        ? props.toggleColor
+        : props.theme.colors.primary
+      : props.theme.colors.mediumGray};
+  border-radius: 100%;
+  transition: transform 0.4s ease;
+  transform: ${(props) =>
+    props.isChecked ? "translateX(26px)" : "translateX(0)"};
+
+  @media (max-width: ${(props) => props.theme.screen.mobile}) {
+    height: 24px;
+    width: 24px;
+    transform: ${(props) =>
+      props.isChecked ? "translateX(45px)" : "translateX(0)"};
+    bottom: 8px;
+  }
+`
+
+export default {
+  name: "toggle",
+  components: {
+    Container,
+    ToggleBackground,
+    ToggleDot,
+    ToggleWrapper,
+    FlexWrapper,
+    LabelText,
+  },
+  props: {
+    label: {
+      required: false,
+      default: "",
+    },
+    isChecked: {
+      required: true,
+      default: false,
+    },
+    toggleColor: {
+      required: false,
+    },
+  },
+  methods: {
+    onToggleChange() {
+      this.$emit("on-toggle-change", !this.isChecked)
+    },
+  },
+}
+</script>

package/src/components/pageSubtitle/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <subtitle-text :color="color">{{ text }}</subtitle-text>
+</template>
+
+<script>
+// import PageSubtitle from "@eturnity/eturnity_reusable_components/src/components/pageSubtitle"
+// To use:
+// <page-subtitle
+//   text="My Page Subitle"
+//   color="red"
+// />
+import styled from "vue-styled-components"
+
+const textAttrs = { color: String }
+const SubtitleText = styled("div", textAttrs)`
+  color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
+  font-size: 13px;
+  margin-bottom: 30px;
+  line-height: 1.5;
+`
+
+export default {
+  name: "page-subtitle",
+  components: {
+    SubtitleText,
+  },
+  props: {
+    text: {
+      required: true,
+    },
+    color: {
+      required: false,
+    },
+  },
+}
+</script>

package/src/components/pageTitle/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <title-text :color="color">{{ text }}</title-text>
+</template>
+
+<script>
+// import PageTitle from "@eturnity/eturnity_reusable_components/src/components/pageTitle"
+// To use:
+// <page-title
+//   text="My Page Title"
+//   color="red"
+// />
+import styled from "vue-styled-components"
+
+const textAttrs = { color: String }
+const TitleText = styled("div", textAttrs)`
+  color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
+  font-weight: bold;
+  font-size: 16px;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+`
+
+export default {
+  name: "page-title",
+  components: {
+    TitleText,
+  },
+  props: {
+    text: {
+      required: true,
+    },
+    color: {
+      required: false,
+    },
+  },
+}
+</script>

package/src/components/progressBar/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <container>
+    <progress-container
+      :backgroundColor="backgroundColor"
+      :maxWidth="maxWidth"
+      :minWidth="minWidth"
+      class="progress-container"
+    >
+      <progress-fill
+        class="progress-bar"
+        :fillProgress="fillProgress"
+        :fillColor="fillColor"
+      />
+    </progress-container>
+    <label-text class="progress-text" v-if="stepNumber || labelText"
+      >{{ labelText ? labelText : "" }}
+      {{ stepNumber ? stepNumber : "" }}</label-text
+    >
+  </container>
+</template>
+
+<script>
+// import ProgressBar from "@eturnity/eturnity_reusable_components/src/components/progressBar"
+//To Use:
+// <progress-bar
+//   fillColor="#000"
+//   backgroundColor="#888"
+//   minWidth="150px"
+//   maxWidth="100%"
+//   :fillProgress="50" //should be a number for percent
+//   stepNumber="4"
+//   :labelText="translate('step')"
+// />
+import styled from "vue-styled-components"
+
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-row-gap: 16px;
+  @media (max-width: ${(props) => props.theme.screen.tablet}) {
+    grid-row-gap: 20px;
+    grid-template-rows: auto 1fr;
+  }
+`
+
+const containerProps = {
+  backgroundColor: String,
+  maxWidth: String,
+  minWidth: String,
+}
+const ProgressContainer = styled("div", containerProps)`
+  width: 100%;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : "auto")};
+  max-width: ${(props) => (props.maxWidth ? props.maxWidth : "none")};
+  height: 6px;
+  background-color: ${(props) =>
+    props.backgroundColor
+      ? props.backgroundColor
+      : props.theme.colors.lightGray};
+  @media (max-width: ${(props) => props.theme.screen.mobile}) {
+    height: 4px;
+  }
+`
+
+const fillProps = { fillColor: String, fillProgress: String | Number }
+const ProgressFill = styled("div", fillProps)`
+  height: 100%;
+  width: ${(props) => props.fillProgress + "%"};
+  background-color: ${(props) =>
+    props.fillColor ? props.fillColor : props.theme.colors.secondary};
+`
+
+const labelText = styled.div`
+  color: ${(props) => props.theme.colors.darkGray};
+  font-size: 16px;
+
+  @media (max-width: ${(props) => props.theme.screen.tablet}) {
+    padding-left: 16px;
+  }
+`
+
+export default {
+  name: "progress-bar",
+  components: {
+    Container,
+    ProgressContainer,
+    ProgressFill,
+    labelText,
+  },
+  props: {
+    fillColor: {
+      required: false,
+      type: String,
+      default: null,
+    },
+    backgroundColor: {
+      required: false,
+      type: String,
+      default: null,
+    },
+    minWidth: {
+      required: false,
+      type: String,
+      default: null,
+    },
+    maxWidth: {
+      required: false,
+      type: String,
+      default: null,
+    },
+    fillProgress: {
+      required: false,
+      default: 0,
+    },
+    labelText: {
+      required: false,
+      default: null,
+    },
+    stepNumber: {
+      required: false,
+      default: null,
+    },
+  },
+}
+</script>

package/src/components/spinner/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <spinner-container v-if="fullWidth">
+    <container>
+      <spinner-wrapper :src="require('../../assets/icons/black-spinner.svg')" />
+    </container>
+  </spinner-container>
+  <container v-else>
+    <spinner-wrapper :src="require('../../assets/icons/black-spinner.svg')" />
+  </container>
+</template>
+
+<script>
+import styled from "vue-styled-components"
+
+const SpinnerContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  z-index: 100;
+`
+
+const Container = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+`
+
+const SpinnerWrapper = styled.img`
+  width: 60px;
+`
+
+export default {
+  name: "spinner",
+  components: {
+    Container,
+    SpinnerWrapper,
+    SpinnerContainer,
+  },
+  props: {
+    fullWidth: {
+      required: false,
+      default: false,
+    },
+  },
+}
+</script>