@eturnity/eturnity_reusable_components 7.30.3 → 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,112 +1,114 @@
 <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 :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>
+      <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>
 </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
-      ? props.theme.colors[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.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.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',
+  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,61 +1,67 @@
 <template>
-  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
+  <SubtitleText
+    :color="color"
+    :has-info-text="!!infoText"
+    :margin-bottom="marginBottom"
+  >
     <span>
       {{ text }}
     </span>
-    <info-text
-      v-if="!!infoText"
-      :text="infoText"
-    />
-  </subtitle-text>
+    <InfoText v-if="!!infoText" :text="infoText" />
+  </SubtitleText>
 </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: "page-subtitle",
-  components: {
-    SubtitleText,
-    InfoText,
-  },
-  props: {
-    text: {
-      required: true,
+  export default {
+    name: 'PageSubtitle',
+    components: {
+      SubtitleText,
+      InfoText,
     },
-    color: {
-      required: false,
+    props: {
+      text: {
+        required: true,
+      },
+      color: {
+        required: false,
+      },
+      infoText: {
+        required: false,
+        default: null,
+      },
+      marginBottom: {
+        required: false,
+        default: '30px',
+      },
     },
-    infoText: {
-      required: false,
-      default: null,
-    },
-    marginBottom: {
-      required: false,
-      default: "30px",
-    }
-  },
-}
+  }
 </script>

package/src/components/pageTitle/index.vue

@@ -1,68 +1,68 @@
 <template>
-  <title-wrap :hasInfoText="!!infoText">
-    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
+  <TitleWrap :has-info-text="!!infoText">
+    <TitleText :color="color" :font-size="fontSize" :uppercase="uppercase">
       {{ text }}
-    </title-text>
-    <info-text v-if="!!infoText" :text="infoText" :alignArrow="infoAlign" />
-  </title-wrap>
+    </TitleText>
+    <InfoText v-if="!!infoText" :align-arrow="infoAlign" :text="infoText" />
+  </TitleWrap>
 </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 : '20px')};
-  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 : '20px')};
+    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
+  `
 
-export default {
-  name: 'page-title',
-  components: {
-    TitleText,
-    TitleWrap,
-    InfoText
-  },
-  props: {
-    text: {
-      required: true
+  export default {
+    name: 'PageTitle',
+    components: {
+      TitleText,
+      TitleWrap,
+      InfoText,
     },
-    color: {
-      required: false
+    props: {
+      text: {
+        required: true,
+      },
+      color: {
+        required: false,
+      },
+      fontSize: {
+        required: false,
+      },
+      uppercase: {
+        required: false,
+        default: true,
+      },
+      infoText: {
+        required: false,
+        default: null,
+      },
+      infoAlign: {
+        required: false,
+      },
     },
-    fontSize: {
-      required: false
-    },
-    uppercase: {
-      required: false,
-      default: true
-    },
-    infoText: {
-      required: false,
-      default: null
-    },
-    infoAlign: {
-      required: false
-    }
   }
-}
 </script>