@eturnity/eturnity_reusable_components 7.30.3-EPDM-10647.0 → 7.30.3-EPDM-10576.2

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

@@ -1,142 +1,145 @@
 <template>
-  <page-container>
-    <button-wrapper
-      :isDisabled="isDisabled"
-      :minWidth="minWidth"
-      :customColor="customColor"
+  <PageContainer>
+    <ButtonWrapper
+      :custom-color="customColor"
       :height="height"
+      :is-disabled="isDisabled"
+      :min-width="minWidth"
     >
-      <icon-container :width="height">
-        <icon
-            :name="iconName"
-            :color="fontColor ? fontColor : theme.colors.white"
-            size="14px"
+      <IconContainer :width="height">
+        <Icon
+          :color="fontColor ? fontColor : theme.colors.white"
+          :name="iconName"
+          size="14px"
         />
-      </icon-container>
-      <button-container :fontSize="fontSize" :fontColor="fontColor">{{ text }}</button-container>
-    </button-wrapper>
-  </page-container>
+      </IconContainer>
+      <ButtonContainer :font-color="fontColor" :font-size="fontSize">
+        {{ text }}
+      </ButtonContainer>
+    </ButtonWrapper>
+  </PageContainer>
 </template>
 
 <script>
-// import buttonIcon from "@eturnity/eturnity_reusable_components/src/components/buttons/buttonIcon"
-// <button-icon
-//   :isDisabled="true"
-//   text="Click Me"
-//   minWidth="300px"
-//   customColor="#000"
-//   iconName="external_icon"
-//   fontColor="white"
-//   fontSize="12px"
-//   height="24px"
-// />
+  // import buttonIcon from "@eturnity/eturnity_reusable_components/src/components/buttons/buttonIcon"
+  // <button-icon
+  //   :isDisabled="true"
+  //   text="Click Me"
+  //   minWidth="300px"
+  //   customColor="#000"
+  //   iconName="external_icon"
+  //   fontColor="white"
+  //   fontSize="12px"
+  //   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)`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  background-color: ${(props) =>
-    props.isDisabled
-      ? props.theme.colors.disabled
-      : props.customColor
-      ? props.customColor
-      : props.theme.colors.yellow};
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
-  user-select: none;
-  border-radius: 4px;
-  overflow: hidden;
-  min-width: ${(props) => (props.minWidth ? props.minWidth : "initial")};
-  height: ${(props) => props.height};
-
-  &:hover {
-    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
+  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) =>
+      props.isDisabled
+        ? props.theme.colors.disabled
+        : props.customColor
+        ? props.customColor
+        : props.theme.colors.yellow};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    user-select: none;
+    border-radius: 4px;
+    overflow: hidden;
+    min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
+    height: ${(props) => props.height};
 
-  &:active {
-    opacity: 1;
-  }
-`
+    &:hover {
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
+    }
 
-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;
-  align-items: center;
-  justify-content: center;
-  padding: 0 15px;
-`
+    &:active {
+      opacity: 1;
+    }
+  `
 
-const IconContainerAttrs = {
-  width: String
-}
-const IconContainer = styled('div', IconContainerAttrs)`
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  width: ${(props) => props.width};
-  background: ${(props) => props.theme.colors.white + '1a'};
-`
+  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;
+    align-items: center;
+    justify-content: center;
+    padding: 0 15px;
+  `
 
-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
-    },
-    customColor: {
-      required: false,
-      default: null
-    },
-    iconName: {
-      required: true
+  const IconContainerAttrs = {
+    width: String,
+  }
+  const IconContainer = styled('div', IconContainerAttrs)`
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    width: ${(props) => props.width};
+    background: ${(props) => props.theme.colors.white + '1a'};
+  `
+
+  export default {
+    name: 'ButtonIcon',
+    components: {
+      PageContainer,
+      ButtonContainer,
+      ButtonWrapper,
+      IconContainer,
+      Icon,
     },
-    fontColor: {
-      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',
+      },
     },
-    fontSize: {
-      required: false,
-      default: '13px'
+    data() {
+      return {
+        theme: Theme,
+      }
     },
-    height: {
-      required: false,
-      default: '30px'
-    }
-  },
-  data () {
-    return {
-      theme: Theme
-    }
   }
-}
 </script>

package/src/components/buttons/closeButton/CloseButton.stories.js

@@ -1,7 +1,7 @@
-import CloseButton from "./index.vue"
+import CloseButton from './index.vue'
 
 export default {
-  title: "CloseButton",
+  title: 'CloseButton',
   component: CloseButton,
   // argTypes: {},
 }
@@ -25,5 +25,5 @@ Default.args = {}
 
 export const ColorButton = Template.bind({})
 ColorButton.args = {
-  color: "orange",
+  color: 'orange',
 }

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

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

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

@@ -1,21 +1,21 @@
 <template>
-  <page-container>
-    <button-container
+  <PageContainer>
+    <ButtonContainer
       :id="id"
-      :type="type"
-      :minWidth="minWidth"
-      :isDisabled="isDisabled"
-      :customColor="customColor"
-      :noWrap="noWrap"
+      :custom-color="customColor"
       :data-id="dataId"
-      :fontColor="fontColor"
+      :font-color="fontColor"
+      :is-disabled="isDisabled"
+      :min-width="minWidth"
+      :no-wrap="noWrap"
+      :type="type"
     >
-      <Label :hasIcon="Boolean(icon)">
-        <icon v-if="icon" :name="icon" size="14px" />
+      <Label :has-icon="Boolean(icon)">
+        <Icon v-if="icon" :name="icon" size="14px" />
         {{ text }}
       </Label>
-    </button-container>
-  </page-container>
+    </ButtonContainer>
+  </PageContainer>
 </template>
 
 <script>
@@ -31,110 +31,110 @@
 //   :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)`
-  padding: 7px 15px;
-  font-size: 13px;
-  color: ${(props) =>
-    props.fontColor ? props.fontColor : props.theme.colors.white};
-  background-color: ${(props) =>
-    props.isDisabled
-      ? props.theme.colors.disabled
-      : props.customColor
-      ? props.customColor
-      : props.type === 'primary'
-      ? props.theme.colors.black
-      : props.type === 'secondary'
-      ? props.theme.colors.grey3
-      : props.type === 'cancel'
-      ? props.theme.colors.red
-      : props.theme.colors.black};
-  border-radius: 4px;
-  text-align: center;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-  user-select: none;
-  ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
-  ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
-
-  &:hover {
-    opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
+  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};
+    background-color: ${(props) =>
+      props.isDisabled
+        ? props.theme.colors.disabled
+        : props.customColor
+        ? props.customColor
+        : props.type === 'primary'
+        ? props.theme.colors.black
+        : props.type === 'secondary'
+        ? props.theme.colors.grey3
+        : props.type === 'cancel'
+        ? props.theme.colors.red
+        : props.theme.colors.black};
+    border-radius: 4px;
+    text-align: center;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    user-select: none;
+    ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
+    ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
 
-  &:active {
-    opacity: 1;
-  }
-`
+    &:hover {
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
+    }
 
-const LabelAttrs = {
-  hasIcon: Boolean
-}
+    &:active {
+      opacity: 1;
+    }
+  `
 
-const Label = styled('span', LabelAttrs)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${(props) => (props.hasIcon ? '5px' : '0')};
-`
+  const LabelAttrs = {
+    hasIcon: Boolean,
+  }
 
-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
+  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,
     },
-    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>