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

package/src/components/card/index.vue

@@ -2,21 +2,17 @@
   <Wrapper
     v-show="!isLoading"
     :class="viewCardClass"
-    :min-width="minWidth"
     :width="width"
+    :minWidth="minWidth"
   >
-    <Spinner
-      v-if="isLoading"
-      :limited-to-modal="true"
-      size="50px"
-    />
+    <Spinner v-if="isLoading" size="50px" :limitedToModal="true" />
     <CardWrapper v-else>
       <CardTitle :class="titleClass">
         {{ $gettext(title) }}
-        <EtPopover
+        <et-popover
           v-if="showPopover && popoverText !== ''"
           :text="popoverText"
-        />
+        ></et-popover>
       </CardTitle>
       <slot></slot>
     </CardWrapper>
@@ -24,11 +20,11 @@
 </template>
 
 <script>
-  import styled from 'vue3-styled-components'
-  import Spinner from '../spinner'
+import styled from 'vue3-styled-components'
+import Spinner from '../spinner'
 
-  const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
-  const Wrapper = styled('div', WrapperProps)`
+const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
+const Wrapper = styled('div', WrapperProps)`
   max-width: ${(props) => props.width};
   min-width: ${(props) => props.minWidth};
   padding: 20px;
@@ -39,12 +35,12 @@
   height: 100%;
 `
 
-  const CardWrapper = styled('div')`
+const CardWrapper = styled('div')`
   height: 100%;
   width: auto;
 `
 
-  const CardTitle = styled('p')`
+const CardTitle = styled('p')`
   font-size: 14px;
   line-height: 1;
   color: ${(props) => props.theme.colors.black};
@@ -52,49 +48,49 @@
   margin-bottom: 10px;
 `
 
-  export default {
-    name: 'Card',
-    components: {
-      Spinner,
-      Wrapper,
-      CardTitle,
-      CardWrapper
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: ''
     },
-    props: {
-      title: {
-        type: String,
-        default: ''
-      },
-      width: {
-        type: [Number, String],
-        required: false,
-        default: '400px'
-      },
-      minWidth: {
-        type: [Number, String],
-        required: false,
-        default: null
-      },
-      titleClass: {
-        type: String,
-        default: ''
-      },
-      showPopover: {
-        type: Boolean,
-        default: false
-      },
-      viewCardClass: {
-        type: String,
-        default: ''
-      },
-      popoverText: {
-        type: String,
-        default: ''
-      },
-      isLoading: {
-        type: Boolean,
-        default: false
-      }
+    width: {
+      type: [Number, String],
+      required: false,
+      default: '400px'
+    },
+    minWidth: {
+      type: [Number, String],
+      required: false,
+      default: null
+    },
+    titleClass: {
+      type: String,
+      default: ''
+    },
+    showPopover: {
+      type: Boolean,
+      default: false
+    },
+    viewCardClass: {
+      type: String,
+      default: ''
+    },
+    popoverText: {
+      type: String,
+      default: ''
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
     }
+  },
+  components: {
+    Spinner,
+    Wrapper,
+    CardTitle,
+    CardWrapper
   }
+}
 </script>

package/src/components/collapsableInfoText/index.vue

@@ -1,23 +1,18 @@
 <template>
   <div>
-    <Text
-      :expand="showButton && showAll"
-      :font-size="fontSize"
-    >
-      {{ text }}
-    </Text>
+    <Text :expand="showButton && showAll" :fontSize="fontSize">{{ text }}</Text>
     <ToggleContainer>
       <ToggleButton
-        v-if="showButton && !showAll"
-        :font-size="fontSize"
         @click="toggleHandler"
+        v-if="showButton && !showAll"
+        :fontSize="fontSize"
       >
         {{ $gettext('Show more') }}
       </ToggleButton>
       <ToggleButton
-        v-if="showButton && showAll"
-        :font-size="fontSize"
         @click="toggleHandler"
+        v-if="showButton && showAll"
+        :fontSize="fontSize"
       >
         {{ $gettext('Show less') }}
       </ToggleButton>
@@ -26,14 +21,14 @@
 </template>
 
 <script>
-  import styled from 'vue3-styled-components'
-  import theme from '@/assets/theme.js'
+import styled from 'vue3-styled-components'
+import theme from '@/assets/theme.js'
 
-  const TextAttrs = {
-    expand: Boolean,
-    fontSize: String
-  }
-  const Text = styled('p', TextAttrs)`
+const TextAttrs = {
+  expand: Boolean,
+  fontSize: String
+}
+const Text = styled('p', TextAttrs)`
   display: block;
   display: -webkit-box;
   line-height: 1.3em;
@@ -44,87 +39,87 @@
   text-overflow: ellipsis;
 `
 
-  const ToggleContainer = styled.div`
+const ToggleContainer = styled.div`
   display: flex;
   width: 100%;
 `
 
-  const ToggleButton = styled('p', TextAttrs)`
+const ToggleButton = styled('p', TextAttrs)`
   font-size: ${(props) => props.fontSize}px;
   cursor: pointer;
   color: ${(props) => props.theme.colors.blue};
 `
 
-  export default {
-    name: 'CollapsableInfoText',
-    components: {
-      Text,
-      ToggleButton,
-      ToggleContainer
+export default {
+  name: 'collapsable-info-text',
+  props: {
+    text: {
+      type: String,
+      required: true
     },
-    props: {
-      text: {
-        type: String,
-        required: true
-      },
-      fontSize: {
-        type: String,
-        default: '16px'
-      },
-      lineCount: {
-        type: Number,
-        default: 3
-      },
-      minWidth: {
-        type: String,
-        default: '100%'
-      }
+    fontSize: {
+      type: String,
+      default: '16px'
     },
-    data() {
-      return {
-        showButton: true,
-        showAll: false,
-        lineBreaks: []
-      }
+    lineCount: {
+      type: Number,
+      default: 3
     },
-    computed: {
-      theme() {
-        return theme
+    minWidth: {
+      type: String,
+      default: '100%'
+    }
+  },
+  components: {
+    Text,
+    ToggleButton,
+    ToggleContainer
+  },
+  data() {
+    return {
+      showButton: true,
+      showAll: false,
+      lineBreaks: []
+    }
+  },
+  computed: {
+    theme() {
+      return theme
+    }
+  },
+  methods: {
+    displayText() {
+      if (!this.showButton) {
+        return this.text
       }
-    },
-    created() {
-      // TODO: this should divide the text into lines based on with. Currently it's just splitting by line breaks
-      // this.lineBreaks = this.text.split('\n')
-
-      // if (this.lineBreaks.length <= this.lineCount) {
-      //   this.showButton = false
-      // }
+      if (!this.showAll) {
+        let countIndex = 0
+        this.lineBreaks.forEach((el, index) => {
+          if (index < this.lineCount) {
+            countIndex += el.length
+          }
+        })
 
-      if (this.text.length <= 170) {
-        this.showButton = false
+        return this.text.slice(0, countIndex + 2) + '...'
+      } else {
+        return this.text
       }
     },
-    methods: {
-      displayText() {
-        if (!this.showButton) {
-          return this.text
-        }
-        if (!this.showAll) {
-          let countIndex = 0
-          this.lineBreaks.forEach((el, index) => {
-            if (index < this.lineCount) {
-              countIndex += el.length
-            }
-          })
+    toggleHandler() {
+      this.showAll = !this.showAll
+    }
+  },
+  created() {
+    // TODO: this should divide the text into lines based on with. Currently it's just splitting by line breaks
+    // this.lineBreaks = this.text.split('\n')
 
-          return this.text.slice(0, countIndex + 2) + '...'
-        } else {
-          return this.text
-        }
-      },
-      toggleHandler() {
-        this.showAll = !this.showAll
-      }
+    // if (this.lineBreaks.length <= this.lineCount) {
+    //   this.showButton = false
+    // }
+
+    if (this.text.length <= 170) {
+      this.showButton = false
     }
   }
+}
 </script>

package/src/components/deleteIcon/index.vue

@@ -1,22 +1,19 @@
 <template>
-  <Wrapper :is-disabled="isDisabled">
-    <DeleteIconRed
-      class="icon-red"
-      :hover-bg="hoverBg"
-    />
-    <DeleteIconGray class="icon-gray" />
-  </Wrapper>
+  <wrapper :isDisabled="isDisabled">
+    <delete-icon-red class="icon-red" :hoverBg="hoverBg" />
+    <delete-icon-gray class="icon-gray" />
+  </wrapper>
 </template>
 
 <script>
 // To use:
 // <delete-icon @click="onDeleteItem(item)" :isDisabled="true" />
-  import styled from 'vue3-styled-components'
-  import SvgDelete from '../../assets/icons/delete_icon.svg'
-  import SvgDeleteGray from '../../assets/icons/delete_icon_gray.svg'
+import styled from 'vue3-styled-components'
+import SvgDelete from '../../assets/icons/delete_icon.svg'
+import SvgDeleteGray from '../../assets/icons/delete_icon_gray.svg'
 
-  const wrapperAttrs = { isDisabled: Boolean }
-  const Wrapper = styled('div', wrapperAttrs)`
+const wrapperAttrs = { isDisabled: Boolean }
+const Wrapper = styled('div', wrapperAttrs)`
   width: 30px;
   height: 30px;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -44,38 +41,38 @@
     `}
 `
 
-  const IconImageAttrs = { hoverBg: String }
-  const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
+const IconImageAttrs = { hoverBg: String }
+const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
   &:hover {
     background-color: ${(props) =>
-  props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
+      props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
     border-radius: 4px;
   }
 `
 
-  const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
+const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
   &:hover {
     background-color: ${(props) => props.theme.colors.grey5};
     border-radius: 4px;
   }
 `
 
-  export default {
-    name: 'DeleteIcon',
-    components: {
-      Wrapper,
-      DeleteIconRed,
-      DeleteIconGray
+export default {
+  name: 'delete-icon',
+  components: {
+    Wrapper,
+    DeleteIconRed,
+    DeleteIconGray
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false
     },
-    props: {
-      isDisabled: {
-        required: false,
-        default: false
-      },
-      hoverBg: {
-        required: false,
-        default: ''
-      }
+    hoverBg: {
+      required: false,
+      default: ''
     }
   }
+}
 </script>

package/src/components/draggableInputHandle/index.vue

@@ -1,18 +1,15 @@
 <template>
-  <Handle
-    class="handle"
-    :height="height"
-  >
-    <Dot />
-    <Dot />
-    <Dot />
+  <Handle :height="height" class="handle">
+    <Dot></Dot>
+    <Dot></Dot>
+    <Dot></Dot>
   </Handle>
 </template>
 
 <script>
-  import styled from 'vue3-styled-components'
+import styled from 'vue3-styled-components'
 
-  const Handle = styled('div', { height: String })`
+const Handle = styled('div', { height: String })`
   position: absolute;
   left: 0;
   margin-right: 10px;
@@ -27,7 +24,7 @@
   cursor: pointer;
   align-items: center;
 `
-  const Dot = styled.div`
+const Dot = styled.div`
   display: inline-block;
   width: 4px;
   height: 4px;
@@ -35,15 +32,15 @@
   background-color: #0068de;
 `
 
-  export default {
-    name: 'DraggableInputHandle',
-    components: {
-      Handle,
-      Dot
-    },
-    props: ['height'],
-    data() {
-      return {}
-    }
+export default {
+  name: 'draggableInputHandle',
+  props: ['height'],
+  components: {
+    Handle,
+    Dot
+  },
+  data() {
+    return {}
   }
+}
 </script>

package/src/components/dropdown/Dropdown.stories.js

@@ -38,17 +38,17 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({})
 Default.args = {
-  openingMode: "click",
-  gap: "0px",
-  justify: "left",
-  width: "150px"
+  openingMode:"click",
+  gap:"0px",
+  justify:"left",
+  width:"150px"
 }
 
 export const withHover = Template.bind({})
 withHover.args = {
-  openingMode: "hover",
-  gap: "20px",
-  justify: "right",
-  width: "250px"
+  openingMode:"hover",
+  gap:"20px",
+  justify:"right",
+  width:"250px"
 }