@eturnity/eturnity_reusable_components 1.2.19-EPDM-5448.0 → 1.2.19-EPDM-5310.8

package/src/components/progressBar/index.vue

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

@@ -1,72 +1,72 @@
-<template>
-  <spinner-container v-if="fullWidth">
-    <container>
-      <spinner-wrapper
-        :size="size"
-        :src="require('../../assets/icons/black_spinner.svg')"
-      />
-    </container>
-  </spinner-container>
-  <container v-else :limitedToModal="limitedToModal">
-    <spinner-wrapper
-      :size="size"
-      :src="require('../../assets/icons/black_spinner.svg')"
-    />
-  </container>
-</template>
-
-<script>
-// import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
-// <spinner size="30px" />
-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 containerAttrs = { limitedToModal: Boolean }
-const Container = styled('div', containerAttrs)`
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-  height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-  width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-`
-
-const spinnerAttrs = { size: String }
-const SpinnerWrapper = styled('img', spinnerAttrs)`
-  width: ${(props) => (props.size ? props.size : '60px')};
-`
-
-export default {
-  name: 'spinner',
-  components: {
-    Container,
-    SpinnerWrapper,
-    SpinnerContainer
-  },
-  props: {
-    fullWidth: {
-      required: false,
-      default: false
-    },
-    limitedToModal: {
-      required: false,
-      default: false
-    },
-    size: {
-      required: false,
-      default: null
-    }
-  }
-}
+<template>
+  <spinner-container v-if="fullWidth">
+    <container>
+      <spinner-wrapper
+        :size="size"
+        :src="require('../../assets/icons/black_spinner.svg')"
+      />
+    </container>
+  </spinner-container>
+  <container v-else :limitedToModal="limitedToModal">
+    <spinner-wrapper
+      :size="size"
+      :src="require('../../assets/icons/black_spinner.svg')"
+    />
+  </container>
+</template>
+
+<script>
+// import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
+// <spinner size="30px" />
+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 containerAttrs = { limitedToModal: Boolean }
+const Container = styled('div', containerAttrs)`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
+  height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+  width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+`
+
+const spinnerAttrs = { size: String }
+const SpinnerWrapper = styled('img', spinnerAttrs)`
+  width: ${(props) => (props.size ? props.size : '60px')};
+`
+
+export default {
+  name: 'spinner',
+  components: {
+    Container,
+    SpinnerWrapper,
+    SpinnerContainer
+  },
+  props: {
+    fullWidth: {
+      required: false,
+      default: false
+    },
+    limitedToModal: {
+      required: false,
+      default: false
+    },
+    size: {
+      required: false,
+      default: null
+    }
+  }
+}
 </script>