@eturnity/eturnity_reusable_components 7.8.1-EPDM-8441.1 → 7.8.1-EPDM-9696.1

package/src/components/navigationTabs/index.vue

@@ -1,107 +1,107 @@
-<template>
-  <roofTabWrap>
-    <tab
-      v-for="(tab, index) in tabsData"
-      :key="tab.id"
-      :isDisabled="!!tab['isDisabled']"
-      :textColor="tab['textColor']"
-      :active="isIndexKey ? index === activeTab : tab[tabKey] === activeTab"
-      @click="$emit('tab-click', isIndexKey ? index : tab[tabKey])"
-    >
-        <Option :isDisabled="!!tab['isDisabled']" :textColor="tab['textColor']">
-            <Uppercase>{{ tab[tabLabel] }}</Uppercase>
-            <info-text
-                v-if="tab['labelInfoText']"
-                :text="tab['labelInfoText']"
-                borderColor="#ccc"
-                size="14px"
-                :alignArrow="tab['labelInfoAlign']"
-            />
-        </Option>
-    </tab>
-    <bottomLine />
-  </roofTabWrap>
-</template>
-
-<script>
-import styled from 'vue-styled-components'
-import InfoText from '../infoText'
-const TabAttr = {
-  active: Boolean,
-  isDisabled: Boolean,
-  textColor: String
-}
-
-const bottomLine = styled('div')`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 1px;
-    width: 100%;
-    background-color: #b2b9c5;
-`
-const roofTabWrap = styled('div')`
-  display: flex;
-  align-items: center;
-  position: relative;
-  font-size: 13px;
-  font-weight: 700;
-`
-const Uppercase = styled('span')`
-  text-transform: uppercase;
-`
-const Option = styled('div',TabAttr)`
-    font-size: 13px;
-    font-weight: 700;
-    display:flex;
-    justify-content: center;
-    flex-direction: row;
-    gap: 10px;
-    color: ${props=>props.textColor ? 
-        props.theme.colors[props.textColor] ? props.theme.colors[props.textColor] : props.textColor :
-        props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
-  `
-const Tab = styled('div', TabAttr)`
-  padding: 16px 10px;
-  margin-right: 5px;
-  position: relative;
-  top: ${(props) => (props.isDisabled ? '-1px' : '0')};
-  z-index: 10;
-  border-bottom: 2px solid
-    ${(props) => (props.active ? props.theme.colors.primary : 'transparent')};
-  background-color: ${(props) => (props.isDisabled ? props.theme.colors.grey5 : 'transparent')};
-  transition: 0.2s ease;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-  min-width: 140px;
-  display: flex !important;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 55px;
-  &:hover {
-    border-color: ${(props) => props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.primary};
-  }
-`
-
-export default {
-  name: 'Tabs',
-
-  components: {
-    Tab,
-    bottomLine,
-    roofTabWrap,
-    Option,
-    InfoText,
-    Uppercase
-  },
-
-  props: {
-    tabsData: { required: true },
-    activeTab: { required: true },
-    isIndexKey: { type: Boolean, default: false },
-    tabKey: { type: String, default: '' },
-    tabLabel: { type: String, default: '' }
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <roofTabWrap>
+    <tab
+      v-for="(tab, index) in tabsData"
+      :key="tab.id"
+      :isDisabled="!!tab['isDisabled']"
+      :textColor="tab['textColor']"
+      :active="isIndexKey ? index === activeTab : tab[tabKey] === activeTab"
+      @click="$emit('tab-click', isIndexKey ? index : tab[tabKey])"
+    >
+        <Option :isDisabled="!!tab['isDisabled']" :textColor="tab['textColor']">
+            <Uppercase>{{ tab[tabLabel] }}</Uppercase>
+            <info-text
+                v-if="tab['labelInfoText']"
+                :text="tab['labelInfoText']"
+                borderColor="#ccc"
+                size="14px"
+                :alignArrow="tab['labelInfoAlign']"
+            />
+        </Option>
+    </tab>
+    <bottomLine />
+  </roofTabWrap>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import InfoText from '../infoText'
+const TabAttr = {
+  active: Boolean,
+  isDisabled: Boolean,
+  textColor: String
+}
+
+const bottomLine = styled('div')`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    background-color: #b2b9c5;
+`
+const roofTabWrap = styled('div')`
+  display: flex;
+  align-items: center;
+  position: relative;
+  font-size: 13px;
+  font-weight: 700;
+`
+const Uppercase = styled('span')`
+  text-transform: uppercase;
+`
+const Option = styled('div',TabAttr)`
+    font-size: 13px;
+    font-weight: 700;
+    display:flex;
+    justify-content: center;
+    flex-direction: row;
+    gap: 10px;
+    color: ${props=>props.textColor ? 
+        props.theme.colors[props.textColor] ? props.theme.colors[props.textColor] : props.textColor :
+        props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+  `
+const Tab = styled('div', TabAttr)`
+  padding: 16px 10px;
+  margin-right: 5px;
+  position: relative;
+  top: ${(props) => (props.isDisabled ? '-1px' : '0')};
+  z-index: 10;
+  border-bottom: 2px solid
+    ${(props) => (props.active ? props.theme.colors.primary : 'transparent')};
+  background-color: ${(props) => (props.isDisabled ? props.theme.colors.grey5 : 'transparent')};
+  transition: 0.2s ease;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  min-width: 140px;
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 55px;
+  &:hover {
+    border-color: ${(props) => props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.primary};
+  }
+`
+
+export default {
+  name: 'Tabs',
+
+  components: {
+    Tab,
+    bottomLine,
+    roofTabWrap,
+    Option,
+    InfoText,
+    Uppercase
+  },
+
+  props: {
+    tabsData: { required: true },
+    activeTab: { required: true },
+    isIndexKey: { type: Boolean, default: false },
+    tabKey: { type: String, default: '' },
+    tabLabel: { type: String, default: '' }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/pageSubtitle/index.vue

@@ -1,68 +1,68 @@
-<template>
-  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
-    <span>
-      {{ text }}
-    </span>
-    <info-text
-      :text="infoText"
-      v-if="!!infoText"
-      size="14px"
-      borderColor="#ccc"
-      :alignText="alignInfoText"
-    />
-  </subtitle-text>
-</template>
-
-<script>
-// import PageSubtitle from "@eturnity/eturnity_reusable_components/src/components/pageSubtitle"
-// To use:
-// <page-subtitle
-//   text="My Page Subitle"
-//   color="red"
-//   infoText="My info text"
-// />
-import styled from "vue-styled-components"
-import InfoText from "../infoText"
-
-const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }
-const SubtitleText = styled("div", textAttrs)`
-  display: grid;
-  align-items: center;
-  grid-gap: 12px;
-  grid-template-columns: ${(props) =>
-    props.hasInfoText ? "auto auto 1fr" : "1fr"};
-  color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
-  font-size: 13px;
-  margin-bottom: ${(props) => (props.marginBottom ? props.marginBottom : '30px')};
-  line-height: 1.5;
-  position: relative;
-`
-
-export default {
-  name: "page-subtitle",
-  components: {
-    SubtitleText,
-    InfoText,
-  },
-  props: {
-    text: {
-      required: true,
-    },
-    color: {
-      required: false,
-    },
-    infoText: {
-      required: false,
-      default: null,
-    },
-    alignInfoText: {
-      required: false,
-      default: "left",
-    },
-    marginBottom: {
-      required: false,
-      default: "30px",
-    }
-  },
-}
-</script>
+<template>
+  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
+    <span>
+      {{ text }}
+    </span>
+    <info-text
+      :text="infoText"
+      v-if="!!infoText"
+      size="14px"
+      borderColor="#ccc"
+      :alignText="alignInfoText"
+    />
+  </subtitle-text>
+</template>
+
+<script>
+// import PageSubtitle from "@eturnity/eturnity_reusable_components/src/components/pageSubtitle"
+// To use:
+// <page-subtitle
+//   text="My Page Subitle"
+//   color="red"
+//   infoText="My info text"
+// />
+import styled from "vue-styled-components"
+import InfoText from "../infoText"
+
+const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }
+const SubtitleText = styled("div", textAttrs)`
+  display: grid;
+  align-items: center;
+  grid-gap: 12px;
+  grid-template-columns: ${(props) =>
+    props.hasInfoText ? "auto auto 1fr" : "1fr"};
+  color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
+  font-size: 13px;
+  margin-bottom: ${(props) => (props.marginBottom ? props.marginBottom : '30px')};
+  line-height: 1.5;
+  position: relative;
+`
+
+export default {
+  name: "page-subtitle",
+  components: {
+    SubtitleText,
+    InfoText,
+  },
+  props: {
+    text: {
+      required: true,
+    },
+    color: {
+      required: false,
+    },
+    infoText: {
+      required: false,
+      default: null,
+    },
+    alignInfoText: {
+      required: false,
+      default: "left",
+    },
+    marginBottom: {
+      required: false,
+      default: "30px",
+    }
+  },
+}
+</script>

package/src/components/pageTitle/index.vue

@@ -1,68 +1,68 @@
-<template>
-  <flex>
-    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
-    <info-text
-        v-if="infoText"
-        :text="infoText"
-        borderColor="#ccc"
-        size="14px"
-        :alignArrow="infoAlign"
-      />
-  </flex>
-</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"
-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,
-    InfoText,
-    flex
-  },
-  props: {
-    text: {
-      required: true,
-    },
-    color: {
-      required: false,
-    },
-    fontSize: {
-      required: false,
-      default: '16px'
-    },
-    uppercase: {
-      required: false,
-      default: true
-    },
-    infoText: {
-      required: false,
-    },
-    infoAlign: {
-      required: false,
-    },
-  },
-}
-</script>
+<template>
+  <flex>
+    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
+    <info-text
+        v-if="infoText"
+        :text="infoText"
+        borderColor="#ccc"
+        size="14px"
+        :alignArrow="infoAlign"
+      />
+  </flex>
+</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"
+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,
+    InfoText,
+    flex
+  },
+  props: {
+    text: {
+      required: true,
+    },
+    color: {
+      required: false,
+    },
+    fontSize: {
+      required: false,
+      default: '16px'
+    },
+    uppercase: {
+      required: false,
+      default: true
+    },
+    infoText: {
+      required: false,
+    },
+    infoAlign: {
+      required: false,
+    },
+  },
+}
+</script>