@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.0 → 7.24.3-EPDM-11143.1

package/src/components/banner/infoBanner/index.vue

@@ -1,9 +1,6 @@
 <template>
-  <ActionModal
-    :is-open="isOpen"
-    @on-close="closeModal"
-  >
-    <ModalContainer>
+  <ActionModal :is-open="isOpen" @on-close="closeModal">
+    <modalContainer>
       <template name="title">
         <slot name="title"></slot>
       </template>
@@ -11,51 +8,62 @@
         <slot name="body"></slot>
       </template>
       <template name="buttons">
-        <ButtonContainer>
-          <Button
-            min-width="150px"
-            :text="$gettext('Got it')"
-            type="primary"
-            @click="closeModal"
-          />
-        </ButtonContainer>
+        <buttonContainer>
+          <Button type="primary" :text="$gettext('Got it')" minWidth="150px" @click="closeModal" />
+        </buttonContainer>
       </template>
-    </ModalContainer>
+
+    </modalContainer>
   </ActionModal>
 </template>
 <script>
 
-  import styled from 'vue3-styled-components'
-  import ActionModal from '../actionModal'
+import styled from 'vue3-styled-components'
+import ActionModal from '../actionModal'
 
-  const ModalContainer = styled.div`
+const modalContainer = styled.div`
   width: 450px;
   min-height: 205px;
   padding: 40px 40px 30px 40px;
 `
-  const ButtonContainer = styled.div`
+const modalTitle = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%;
+  text-transform: uppercase;
+`
+const buttonContainer = styled.div`
   display: inline-flex;
   align-items: flex-start;
   gap: 20px;
 `
-  export default {
-    name: 'InfoModal',
-    components: {
-      ModalContainer,
-      ButtonContainer,
-      ActionModal
-    },
-    props: {
-      isOpen: {
-        required: false,
-        default: false,
-        type: Boolean
-      }
-    },
-    methods: {
-      closeModal() {
-        this.$emit('on-close')
-      }
+const textContainer = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 30px 0px;
+  white-space: pre-wrap;
+`
+export default {
+  name: 'InfoModal',
+  props: ['isOpen'],
+  components: {
+    Modal,
+    modalContainer,
+    modalTitle,
+    buttonContainer,
+    textContainer
+  },
+  methods: {
+    closeModal() {
+      this.$emit('on-close')
     }
   }
+}
 </script>

package/src/components/buttons/buttonIcon/index.vue

@@ -1,26 +1,21 @@
 <template>
-  <PageContainer>
-    <ButtonWrapper
-      :custom-color="customColor"
+  <page-container>
+    <button-wrapper
+      :isDisabled="isDisabled"
+      :minWidth="minWidth"
+      :customColor="customColor"
       :height="height"
-      :is-disabled="isDisabled"
-      :min-width="minWidth"
     >
-      <IconContainer :width="height">
-        <Icon
-          :color="fontColor ? fontColor : theme.colors.white"
-          :name="iconName"
-          size="14px"
+      <icon-container :width="height">
+        <icon
+            :name="iconName"
+            :color="fontColor ? fontColor : theme.colors.white"
+            size="14px"
         />
-      </IconContainer>
-      <ButtonContainer
-        :font-color="fontColor"
-        :font-size="fontSize"
-      >
-        {{ text }}
-      </ButtonContainer>
-    </ButtonWrapper>
-  </PageContainer>
+      </icon-container>
+      <button-container :fontSize="fontSize" :fontColor="fontColor">{{ text }}</button-container>
+    </button-wrapper>
+  </page-container>
 </template>
 
 <script>
@@ -36,19 +31,19 @@
 //   height="24px"
 // />
 
-  import Icon from "../../icon"
-  import styled from "vue3-styled-components"
-  import Theme from "@/assets/theme";
+import Icon from "../../icon"
+import styled from "vue3-styled-components"
+import Theme from "@/assets/theme";
 
-  const PageContainer = styled.div``
+const PageContainer = styled.div``
 
-  const ButtonAttrs = {
-    isDisabled: Boolean,
-    minWidth: String,
-    customColor: String,
-    height: String
-  }
-  const ButtonWrapper = styled("div", ButtonAttrs)`
+const ButtonAttrs = {
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: String,
+  height: String
+}
+const ButtonWrapper = styled("div", ButtonAttrs)`
   display: grid;
   grid-template-columns: auto 1fr;
   background-color: ${(props) =>
@@ -56,7 +51,7 @@
       ? props.theme.colors.disabled
       : props.customColor
       ? props.customColor
-  : props.theme.colors.yellow};
+      : props.theme.colors.yellow};
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   user-select: none;
   border-radius: 4px;
@@ -73,11 +68,11 @@
   }
 `
 
-  const ButtonContainerAttrs = {
-    fontSize: String,
-    fontColor: String
-  }
-  const ButtonContainer = styled('div', ButtonContainerAttrs)`
+const ButtonContainerAttrs = {
+  fontSize: String,
+  fontColor: String
+}
+const ButtonContainer = styled('div', ButtonContainerAttrs)`
   font-size: ${(props) => props.fontSize};
   color: ${(props) => props.fontColor ? props.fontColor : props.theme.colors.white};
   display: flex;
@@ -86,10 +81,10 @@
   padding: 0 15px;
 `
 
-  const IconContainerAttrs = {
-    width: String
-  }
-  const IconContainer = styled('div', IconContainerAttrs)`
+const IconContainerAttrs = {
+  width: String
+}
+const IconContainer = styled('div', IconContainerAttrs)`
   display: grid;
   align-items: center;
   justify-items: center;
@@ -97,51 +92,51 @@
   background: ${(props) => props.theme.colors.white + '1a'};
 `
 
-  export default {
-    name: "ButtonIcon",
-    components: {
-      PageContainer,
-      ButtonContainer,
-      ButtonWrapper,
-      IconContainer,
-      Icon
+export default {
+  name: "button-icon",
+  components: {
+    PageContainer,
+    ButtonContainer,
+    ButtonWrapper,
+    IconContainer,
+    Icon
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    text: {
+      required: true
+    },
+    minWidth: {
+      required: false,
+      default: null
     },
-    props: {
-      isDisabled: {
-        required: false,
-        default: false
-      },
-      text: {
-        required: true
-      },
-      minWidth: {
-        required: false,
-        default: null
-      },
-      customColor: {
-        required: false,
-        default: null
-      },
-      iconName: {
-        required: true
-      },
-      fontColor: {
-        required: false,
-        default: null
-      },
-      fontSize: {
-        required: false,
-        default: '13px'
-      },
-      height: {
-        required: false,
-        default: '30px'
-      }
+    customColor: {
+      required: false,
+      default: null
     },
-    data() {
-      return {
-        theme: Theme
-      }
+    iconName: {
+      required: true
+    },
+    fontColor: {
+      required: false,
+      default: null
+    },
+    fontSize: {
+      required: false,
+      default: '13px'
+    },
+    height: {
+      required: false,
+      default: '30px'
+    }
+  },
+  data () {
+    return {
+      theme: Theme
     }
   }
+}
 </script>

package/src/components/buttons/closeButton/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <Wrapper>
-    <Container>
-      <LeftLine :color="color" />
-      <RightLine :color="color" />
-    </Container>
-  </Wrapper>
+  <wrapper>
+    <container>
+      <left-line :color="color" />
+      <right-line :color="color" />
+    </container>
+  </wrapper>
 </template>
 
 <script>
@@ -13,49 +13,49 @@
 // <close-button
 //   color="#fff"
 // />
-  import styled from 'vue3-styled-components'
+import styled from 'vue3-styled-components'
 
-  const Container = styled.div`
+const Container = styled.div`
   position: relative;
   width: 26px;
   height: 25px;
 `
 
-  const Wrapper = styled.div`
+const Wrapper = styled.div`
   display: inline-block;
   cursor: pointer;
 `
 
-  const lineAttrs = { color: String }
-  const Line = styled('div', lineAttrs)`
+const lineAttrs = { color: String }
+const Line = styled('div', lineAttrs)`
   width: 20px;
   height: 2px;
   background-color: ${(props) =>
-  props.color ? props.color : props.theme.colors.red};
+    props.color ? props.color : props.theme.colors.red};
   position: absolute;
   top: 11px; //half of the height of the parent
 `
 
-  const LeftLine = styled(Line)`
+const LeftLine = styled(Line)`
   transform: rotate(135deg);
 `
 
-  const RightLine = styled(Line)`
+const RightLine = styled(Line)`
   transform: rotate(45deg);
 `
 
-  export default {
-    name: 'CloseButton',
-    components: {
-      Container,
-      Wrapper,
-      LeftLine,
-      RightLine
-    },
-    props: {
-      color: {
-        required: false
-      }
+export default {
+  name: 'close-button',
+  components: {
+    Container,
+    Wrapper,
+    LeftLine,
+    RightLine
+  },
+  props: {
+    color: {
+      required: false
     }
   }
+}
 </script>

package/src/components/buttons/mainButton/index.vue

@@ -1,25 +1,21 @@
 <template>
-  <PageContainer>
-    <ButtonContainer
+  <page-container>
+    <button-container
       :id="id"
-      :custom-color="customColor"
-      :data-id="dataId"
-      :font-color="fontColor"
-      :is-disabled="isDisabled"
-      :min-width="minWidth"
-      :no-wrap="noWrap"
       :type="type"
+      :minWidth="minWidth"
+      :isDisabled="isDisabled"
+      :customColor="customColor"
+      :noWrap="noWrap"
+      :data-id="dataId"
+      :fontColor="fontColor"
     >
-      <Label :has-icon="Boolean(icon)">
-        <Icon
-          v-if="icon"
-          :name="icon"
-          size="14px"
-        />
+      <Label :hasIcon="Boolean(icon)">
+        <icon v-if="icon" :name="icon" size="14px" />
         {{ text }}
       </Label>
-    </ButtonContainer>
-  </PageContainer>
+    </button-container>
+  </page-container>
 </template>
 
 <script>
@@ -35,24 +31,24 @@
 //   :data-id="test_data_id"
 // />
 
-  import styled from 'vue3-styled-components'
-  import Icon from '../../icon'
+import styled from 'vue3-styled-components'
+import Icon from '../../icon'
 
-  const PageContainer = styled.div``
+const PageContainer = styled.div``
 
-  const ButtonAttrs = {
-    type: String,
-    isDisabled: Boolean,
-    minWidth: String,
-    customColor: String,
-    fontColor: String,
-    noWrap: Boolean
-  }
-  const ButtonContainer = styled('div', ButtonAttrs)`
+const ButtonAttrs = {
+  type: String,
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: String,
+  fontColor: String,
+  noWrap: Boolean
+}
+const ButtonContainer = styled('div', ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
   color: ${(props) =>
-  props.fontColor ? props.fontColor : props.theme.colors.white};
+    props.fontColor ? props.fontColor : props.theme.colors.white};
   background-color: ${(props) =>
     props.isDisabled
       ? props.theme.colors.disabled
@@ -64,7 +60,7 @@
       ? props.theme.colors.grey3
       : props.type === 'cancel'
       ? props.theme.colors.red
-  : props.theme.colors.black};
+      : props.theme.colors.black};
   border-radius: 4px;
   text-align: center;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -81,64 +77,64 @@
   }
 `
 
-  const LabelAttrs = {
-    hasIcon: Boolean
-  }
+const LabelAttrs = {
+  hasIcon: Boolean
+}
 
-  const Label = styled('span', LabelAttrs)`
+const Label = styled('span', LabelAttrs)`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: ${(props) => (props.hasIcon ? '5px' : '0')};
 `
 
-  export default {
-    name: 'MainButton',
-    components: {
-      Icon,
-      Label,
-      PageContainer,
-      ButtonContainer
+export default {
+  name: 'main-button',
+  components: {
+    Icon,
+    Label,
+    PageContainer,
+    ButtonContainer
+  },
+  props: {
+    type: {
+      required: false,
+      default: 'primary'
+    },
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    icon: {
+      required: false,
+      default: null
+    },
+    text: {
+      required: true
+    },
+    customColor: {
+      required: false,
+      default: null
+    },
+    fontColor: {
+      required: false
+    },
+    noWrap: {
+      required: false,
+      default: false
+    },
+    minWidth: {
+      required: false,
+      default: null
+    },
+    id: {
+      required: false,
+      default: null
     },
-    props: {
-      type: {
-        required: false,
-        default: 'primary'
-      },
-      isDisabled: {
-        required: false,
-        default: false
-      },
-      icon: {
-        required: false,
-        default: null
-      },
-      text: {
-        required: true
-      },
-      customColor: {
-        required: false,
-        default: null
-      },
-      fontColor: {
-        required: false
-      },
-      noWrap: {
-        required: false,
-        default: false
-      },
-      minWidth: {
-        required: false,
-        default: null
-      },
-      id: {
-        required: false,
-        default: null
-      },
-      dataId: {
-        type: String,
-        default: ''
-      }
+    dataId: {
+      type: String,
+      default: ''
     }
   }
+}
 </script>