@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.2 → 7.24.3-qa-elisee-7.32.0

package/src/components/pagination/index.vue

@@ -1,41 +1,39 @@
 <template>
   <!-- Check, if pages more than 1 -->
-  <PaginationWrapper v-if="paginationParams.pages > 1">
+  <paginationWrapper v-if="paginationParams.pages > 1">
     <!-- Back button -->
-    <PaginationLink
+    <paginationLink
       v-if="paginationParams.previous"
       @click="fetchPage(paginationParams.previous)"
     >
-      <ArrowIconContainer>
-        <RCIcon
-          :color="getTheme.colors.brightBlue"
+      <arrowIconContainer>
+        <icon
           name="arrow_left"
+          :color="getTheme.colors.brightBlue"
           size="12px"
         />
-      </ArrowIconContainer>
-      <ArrowText>{{ $gettext('back') }}</ArrowText>
-    </PaginationLink>
+      </arrowIconContainer>
+      <arrowText>{{ $gettext('back') }}</arrowText>
+    </paginationLink>
 
     <!-- First page -->
-    <PaginationLink
+    <paginationLink
       v-if="currentPage > 2 && paginationParams.pages > 3"
       @click="fetchPage(1)"
+      >1</paginationLink
     >
-      1
-    </PaginationLink>
 
     <!-- Back tree dots -->
     <span v-if="currentPage > 3 && paginationParams.pages > 4">...</span>
 
     <!-- Current block -->
-    <PaginationLink
+    <paginationLink
       v-for="number in paginationNumbers()"
       :key="number"
       :class="[currentPage === number ? 'active' : '']"
       @click="fetchPage(number)"
+      >{{ number }}</paginationLink
     >
-      {{ number }}
-    </PaginationLink>
 
     <!-- Forward tree dots -->
     <span
@@ -46,103 +44,102 @@
     >
 
     <!-- End page -->
-    <PaginationLink
+    <paginationLink
       v-if="
         paginationParams.pages - currentPage > 1 && paginationParams.pages > 3
       "
       @click="fetchPage(paginationParams.pages)"
+      >{{ paginationParams.pages }}</paginationLink
     >
-      {{ paginationParams.pages }}
-    </PaginationLink>
 
     <!-- Forward button -->
-    <PaginationLink
+    <paginationLink
       v-if="paginationParams.next"
       @click="fetchPage(paginationParams.next)"
     >
-      <ArrowText>{{ $gettext('forward') }}</ArrowText>
-      <ArrowIconContainer>
-        <RCIcon
-          :color="getTheme.colors.brightBlue"
+      <arrowText>{{ $gettext('forward') }}</arrowText>
+      <arrowIconContainer>
+        <icon
           name="arrow_right"
+          :color="getTheme.colors.brightBlue"
           size="12px"
         />
-      </ArrowIconContainer>
-    </PaginationLink>
-  </PaginationWrapper>
+      </arrowIconContainer>
+    </paginationLink>
+  </paginationWrapper>
 </template>
 
 <script>
-  import styled from 'vue3-styled-components'
-  import RCIcon from '../icon'
-  import theme from '@/assets/theme.js'
+import styled from 'vue3-styled-components'
+import icon from '../icon'
+import theme from '@/assets/theme.js'
 
-  const paginationWrapper = styled.nav`
-    color: ${(props) => props.theme.colors.brightBlue};
-    font-size: 13px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    align-items: center;
-  `
-  const paginationLink = styled.div`
-    display: flex;
-    padding: 0px 5px;
-    margin: 0 2px;
-    text-align: center;
-    border-radius: 3px;
-    white-space: nowrap;
-    cursor: pointer;
-    color: ${(props) => props.theme.colors.brightBlue};
+const paginationWrapper = styled.nav`
+  color: ${(props) => props.theme.colors.brightBlue};
+  font-size: 13px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+`
+const paginationLink = styled.div`
+  display: flex;
+  padding: 0px 5px;
+  margin: 0 2px;
+  text-align: center;
+  border-radius: 3px;
+  white-space: nowrap;
+  cursor: pointer;
+  color: ${(props) => props.theme.colors.brightBlue};
 
-    &.active {
-      color: ${(props) => props.theme.colors.white};
-      background-color: ${(props) => props.theme.colors.brightBlue};
-      padding: 7px 12px;
-      border-radius: 4px;
+  &.active {
+    color: ${(props) => props.theme.colors.white};
+    background-color: ${(props) => props.theme.colors.brightBlue};
+    padding: 7px 12px;
+    border-radius: 4px;
+  }
+`
+const arrowText = styled.div`
+  color: ${(props) => props.theme.colors.brightBlue};
+`
+const arrowIconContainer = styled.div`
+  margin: 0 10px;
+  display: flex;
+  align-items: center;
+`
+export default {
+  name: 'pagination-component',
+  components: {
+    paginationWrapper,
+    paginationLink,
+    icon,
+    arrowText,
+    arrowIconContainer
+  },
+  props: ['fetchPage', 'currentPage', 'paginationParams'],
+  computed: {
+    getTheme() {
+      return theme
     }
-  `
-  const arrowText = styled.div`
-    color: ${(props) => props.theme.colors.brightBlue};
-  `
-  const arrowIconContainer = styled.div`
-    margin: 0 10px;
-    display: flex;
-    align-items: center;
-  `
-  export default {
-    name: 'PaginationComponent',
-    components: {
-      paginationWrapper,
-      paginationLink,
-      RCIcon,
-      arrowText,
-      arrowIconContainer,
-    },
-    props: ['fetchPage', 'currentPage', 'paginationParams'],
-    computed: {
-      getTheme() {
-        return theme
-      },
-    },
-    methods: {
-      getNewProjects(num) {
-        this.$emit('on-pagination-change', num)
-      },
-      paginationNumbers() {
-        const prev = this.paginationParams.previous
-        const next = this.paginationParams.next
-        const n = prev + 1 || next - 1
-        if (this.paginationParams.pages === 2) {
-          return prev ? [n - 1, n] : [n, n + 1]
-        } else {
-          return prev
-            ? next
-              ? [n - 1, n, n + 1]
-              : [n - 2, n - 1, n]
-            : [n, n + 1, n + 2]
-        }
-      },
+  },
+  methods: {
+    getNewProjects(num) {
+      this.$emit('on-pagination-change', num)
     },
+    paginationNumbers() {
+      const prev = this.paginationParams.previous
+      const next = this.paginationParams.next
+      const n = prev + 1 || next - 1
+      if (this.paginationParams.pages === 2) {
+        return prev ? [n - 1, n] : [n, n + 1]
+      } else {
+        return prev
+          ? next
+            ? [n - 1, n, n + 1]
+            : [n - 2, n - 1, n]
+          : [n, n + 1, n + 2]
+      }
+    }
   }
+}
 </script>

package/src/components/progressBar/index.vue

@@ -1,125 +1,125 @@
 <template>
-  <Container>
-    <ProgressContainer
-      :background-color="backgroundColor"
+  <container>
+    <progress-container
+      :backgroundColor="backgroundColor"
+      :maxWidth="maxWidth"
+      :minWidth="minWidth"
       class="progress-container"
-      :max-width="maxWidth"
-      :min-width="minWidth"
     >
-      <ProgressFill
+      <progress-fill
         class="progress-bar"
-        :fill-color="fillColor"
-        :fill-progress="fillProgress"
+        :fillProgress="fillProgress"
+        :fillColor="fillColor"
       />
-    </ProgressContainer>
-    <LabelText v-if="stepNumber || labelText" class="progress-text">
-      {{ labelText ? labelText : '' }}
-      {{ stepNumber ? stepNumber : '' }}
-    </LabelText>
-  </Container>
+    </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 'vue3-styled-components'
+// 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 "vue3-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 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 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 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 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;
+const labelText = styled.div`
+  color: ${(props) => props.theme.colors.darkGray};
+  font-size: 16px;
 
-    @media (max-width: ${(props) => props.theme.screen.tablet}) {
-      padding-left: 16px;
-    }
-  `
+  @media (max-width: ${(props) => props.theme.screen.tablet}) {
+    padding-left: 16px;
+  }
+`
 
-  export default {
-    name: 'ProgressBar',
-    components: {
-      Container,
-      ProgressContainer,
-      ProgressFill,
-      LabelText,
+export default {
+  name: "progress-bar",
+  components: {
+    Container,
+    ProgressContainer,
+    ProgressFill,
+    labelText,
+  },
+  props: {
+    fillColor: {
+      required: false,
+      type: String,
+      default: null,
     },
-    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,
-      },
+    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>