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

package/src/components/modals/modal/modal.stories.js

@@ -1,10 +1,10 @@
-import Modal from './index.vue'
+import Modal from "./index.vue";
 
 export default {
-  title: 'Modal',
+  title: "Modal",
   component: Modal,
   // argTypes: {},
-}
+};
 
 const Template = (args, { argTypes }) => ({
   // Components used in your story `template` are defined in the `components` object
@@ -19,7 +19,7 @@ const Template = (args, { argTypes }) => ({
   // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
   //   <div>Data....</div>
   // </modal>
-})
+});
 
 export const Default = Template.bind({
   isOpen: true,
@@ -28,4 +28,4 @@ export const Default = Template.bind({
   hideClose: false,
   backdrop: 'dark',
 })
-Default.args = {}
+Default.args = {};

package/src/components/navigationTabs/index.vue

@@ -1,114 +1,112 @@
 <template>
-  <RoofTabWrap>
-    <Tab
+  <roofTabWrap>
+    <tab
       v-for="(tab, index) in tabsData"
       :key="tab.id"
+      :isDisabled="!!tab['isDisabled']"
+      :textColor="tab['textColor']"
       :active="isIndexKey ? index === activeTab : tab[tabKey] === activeTab"
-      :is-disabled="!!tab['isDisabled']"
-      :text-color="tab['textColor']"
       @click="$emit('tab-click', isIndexKey ? index : tab[tabKey])"
     >
-      <Option :is-disabled="!!tab['isDisabled']" :text-color="tab['textColor']">
-        <Uppercase>{{ tab[tabLabel] }}</Uppercase>
-        <InfoText
-          v-if="tab['labelInfoText']"
-          :align-arrow="tab['labelInfoAlign']"
-          :text="tab['labelInfoText']"
-        />
-      </Option>
-    </Tab>
-    <BottomLine />
-  </RoofTabWrap>
+        <Option :isDisabled="!!tab['isDisabled']" :textColor="tab['textColor']">
+            <Uppercase>{{ tab[tabLabel] }}</Uppercase>
+            <info-text
+                v-if="tab['labelInfoText']"
+                :text="tab['labelInfoText']"
+                :alignArrow="tab['labelInfoAlign']"
+            />
+        </Option>
+    </tab>
+    <bottomLine />
+  </roofTabWrap>
 </template>
 
 <script>
-  import styled from 'vue3-styled-components'
-  import InfoText from '../infoText'
-  const TabAttr = {
-    active: Boolean,
-    isDisabled: Boolean,
-    textColor: String,
-  }
+import styled from 'vue3-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: ${(props) => props.theme.colors.grey3};
-  `
-  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
+const bottomLine = styled('div')`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  background-color: ${(props) => props.theme.colors.grey3};
+`
+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.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};
-    }
-  `
+        : 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',
+export default {
+  name: 'Tabs',
 
-    components: {
-      Tab,
-      BottomLine,
-      RoofTabWrap,
-      Option,
-      InfoText,
-      Uppercase,
-    },
+  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: '' },
-    },
+  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,67 +1,61 @@
 <template>
-  <SubtitleText
-    :color="color"
-    :has-info-text="!!infoText"
-    :margin-bottom="marginBottom"
-  >
+  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
     <span>
       {{ text }}
     </span>
-    <InfoText v-if="!!infoText" :text="infoText" />
-  </SubtitleText>
+    <info-text
+      v-if="!!infoText"
+      :text="infoText"
+    />
+  </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 'vue3-styled-components'
-  import InfoText from '../infoText'
+// 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 "vue3-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;
-  `
+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: 'PageSubtitle',
-    components: {
-      SubtitleText,
-      InfoText,
+export default {
+  name: "page-subtitle",
+  components: {
+    SubtitleText,
+    InfoText,
+  },
+  props: {
+    text: {
+      required: true,
     },
-    props: {
-      text: {
-        required: true,
-      },
-      color: {
-        required: false,
-      },
-      infoText: {
-        required: false,
-        default: null,
-      },
-      marginBottom: {
-        required: false,
-        default: '30px',
-      },
+    color: {
+      required: false,
     },
-  }
+    infoText: {
+      required: false,
+      default: null,
+    },
+    marginBottom: {
+      required: false,
+      default: "30px",
+    }
+  },
+}
 </script>

package/src/components/pageTitle/index.vue

@@ -1,68 +1,68 @@
 <template>
-  <TitleWrap :has-info-text="!!infoText">
-    <TitleText :color="color" :font-size="fontSize" :uppercase="uppercase">
+  <title-wrap :hasInfoText="!!infoText">
+    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
       {{ text }}
-    </TitleText>
-    <InfoText v-if="!!infoText" :align-arrow="infoAlign" :text="infoText" />
-  </TitleWrap>
+    </title-text>
+    <info-text v-if="!!infoText" :text="infoText" :alignArrow="infoAlign" />
+  </title-wrap>
 </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 'vue3-styled-components'
-  import InfoText from '../infoText'
+// import PageTitle from "@eturnity/eturnity_reusable_components/src/components/pageTitle"
+// To use:
+// <page-title
+//   text="My Page Title"
+//   color="red"
+// />
+import styled from 'vue3-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 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)`
-    color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
-    font-weight: bold;
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '18px')};
-    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
-  `
+const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
+const TitleText = styled('span', titleAttrs)`
+  color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
+  font-weight: bold;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '18px')};
+  text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
+`
 
-  export default {
-    name: 'PageTitle',
-    components: {
-      TitleText,
-      TitleWrap,
-      InfoText,
+export default {
+  name: 'page-title',
+  components: {
+    TitleText,
+    TitleWrap,
+    InfoText
+  },
+  props: {
+    text: {
+      required: true
     },
-    props: {
-      text: {
-        required: true,
-      },
-      color: {
-        required: false,
-      },
-      fontSize: {
-        required: false,
-      },
-      uppercase: {
-        required: false,
-        default: true,
-      },
-      infoText: {
-        required: false,
-        default: null,
-      },
-      infoAlign: {
-        required: false,
-      },
+    color: {
+      required: false
     },
+    fontSize: {
+      required: false
+    },
+    uppercase: {
+      required: false,
+      default: true
+    },
+    infoText: {
+      required: false,
+      default: null
+    },
+    infoAlign: {
+      required: false
+    }
   }
+}
 </script>