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

package/src/components/card/index.vue

@@ -2,17 +2,17 @@
   <Wrapper
     v-show="!isLoading"
     :class="viewCardClass"
+    :min-width="minWidth"
     :width="width"
-    :minWidth="minWidth"
   >
-    <Spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+    <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
     <CardWrapper v-else>
       <CardTitle :class="titleClass">
         {{ $gettext(title) }}
-        <et-popover
+        <EtPopover
           v-if="showPopover && popoverText !== ''"
           :text="popoverText"
-        ></et-popover>
+        />
       </CardTitle>
       <slot></slot>
     </CardWrapper>
@@ -20,77 +20,77 @@
 </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)`
-  max-width: ${(props) => props.width};
-  min-width: ${(props) => props.minWidth};
-  padding: 20px;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-  background-color: ${(props) => props.theme.colors.white};
-  height: 100%;
-`
+  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;
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+    background-color: ${(props) => props.theme.colors.white};
+    height: 100%;
+  `
 
-const CardWrapper = styled('div')`
-  height: 100%;
-  width: auto;
-`
+  const CardWrapper = styled('div')`
+    height: 100%;
+    width: auto;
+  `
 
-const CardTitle = styled('p')`
-  font-size: 14px;
-  line-height: 1;
-  color: ${(props) => props.theme.colors.black};
-  font-weight: 700;
-  margin-bottom: 10px;
-`
+  const CardTitle = styled('p')`
+    font-size: 14px;
+    line-height: 1;
+    color: ${(props) => props.theme.colors.black};
+    font-weight: 700;
+    margin-bottom: 10px;
+  `
 
-export default {
-  name: 'Card',
-  props: {
-    title: {
-      type: String,
-      default: ''
+  export default {
+    name: 'Card',
+    components: {
+      Spinner,
+      Wrapper,
+      CardTitle,
+      CardWrapper,
     },
-    width: {
-      type: [Number, String],
-      required: false,
-      default: '400px'
+    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,
+      },
     },
-    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,18 +1,20 @@
 <template>
   <div>
-    <Text :expand="showButton && showAll" :fontSize="fontSize">{{ text }}</Text>
+    <Text :expand="showButton && showAll" :font-size="fontSize">
+      {{ text }}
+    </Text>
     <ToggleContainer>
       <ToggleButton
-        @click="toggleHandler"
         v-if="showButton && !showAll"
-        :fontSize="fontSize"
+        :font-size="fontSize"
+        @click="toggleHandler"
       >
         {{ $gettext('Show more') }}
       </ToggleButton>
       <ToggleButton
-        @click="toggleHandler"
         v-if="showButton && showAll"
-        :fontSize="fontSize"
+        :font-size="fontSize"
+        @click="toggleHandler"
       >
         {{ $gettext('Show less') }}
       </ToggleButton>
@@ -21,105 +23,105 @@
 </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)`
-  display: block;
-  display: -webkit-box;
-  line-height: 1.3em;
-  -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-size: ${(props) => props.fontSize}px;
-  text-overflow: ellipsis;
-`
+  const TextAttrs = {
+    expand: Boolean,
+    fontSize: String,
+  }
+  const Text = styled('p', TextAttrs)`
+    display: block;
+    display: -webkit-box;
+    line-height: 1.3em;
+    -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    font-size: ${(props) => props.fontSize}px;
+    text-overflow: ellipsis;
+  `
 
-const ToggleContainer = styled.div`
-  display: flex;
-  width: 100%;
-`
+  const ToggleContainer = styled.div`
+    display: flex;
+    width: 100%;
+  `
 
-const ToggleButton = styled('p', TextAttrs)`
-  font-size: ${(props) => props.fontSize}px;
-  cursor: pointer;
-  color: ${(props) => props.theme.colors.blue};
-`
+  const ToggleButton = styled('p', TextAttrs)`
+    font-size: ${(props) => props.fontSize}px;
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.blue};
+  `
 
-export default {
-  name: 'collapsable-info-text',
-  props: {
-    text: {
-      type: String,
-      required: true
-    },
-    fontSize: {
-      type: String,
-      default: '16px'
+  export default {
+    name: 'CollapsableInfoText',
+    components: {
+      Text,
+      ToggleButton,
+      ToggleContainer,
     },
-    lineCount: {
-      type: Number,
-      default: 3
+    props: {
+      text: {
+        type: String,
+        required: true,
+      },
+      fontSize: {
+        type: String,
+        default: '16px',
+      },
+      lineCount: {
+        type: Number,
+        default: 3,
+      },
+      minWidth: {
+        type: String,
+        default: '100%',
+      },
     },
-    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
+    data() {
+      return {
+        showButton: true,
+        showAll: false,
+        lineBreaks: [],
       }
-      if (!this.showAll) {
-        let countIndex = 0
-        this.lineBreaks.forEach((el, index) => {
-          if (index < this.lineCount) {
-            countIndex += el.length
-          }
-        })
+    },
+    computed: {
+      theme() {
+        return theme
+      },
+    },
+    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
+      // }
 
-        return this.text.slice(0, countIndex + 2) + '...'
-      } else {
-        return this.text
+      if (this.text.length <= 170) {
+        this.showButton = false
       }
     },
-    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')
+    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
+            }
+          })
 
-    // if (this.lineBreaks.length <= this.lineCount) {
-    //   this.showButton = false
-    // }
-
-    if (this.text.length <= 170) {
-      this.showButton = false
-    }
+          return this.text.slice(0, countIndex + 2) + '...'
+        } else {
+          return this.text
+        }
+      },
+      toggleHandler() {
+        this.showAll = !this.showAll
+      },
+    },
   }
-}
 </script>

package/src/components/deleteIcon/DeleteIcon.stories.js

@@ -2,7 +2,7 @@ import DeleteIcon from './index.vue'
 
 export default {
   title: 'DeleteIcon',
-  component: DeleteIcon
+  component: DeleteIcon,
   // argTypes: {},
 }
 
@@ -11,7 +11,7 @@ const Template = (args, { argTypes }) => ({
   components: { DeleteIcon },
   // The story's `args` need to be mapped into the template through the `setup()` method
   props: Object.keys(argTypes),
-  template: '<delete-icon v-bind="$props" />'
+  template: '<delete-icon v-bind="$props" />',
 
   // import DeleteIcon from "@eturnity/eturnity_reusable_components/src/components/deleteIcon"
   // To use:
@@ -20,10 +20,10 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({})
 Default.args = {
-  isDisabled: false
+  isDisabled: false,
 }
 
 export const Disabled = Template.bind({})
 Disabled.args = {
-  isDisabled: true
+  isDisabled: true,
 }

package/src/components/deleteIcon/index.vue

@@ -1,34 +1,34 @@
 <template>
-  <wrapper :isDisabled="isDisabled">
-    <delete-icon-red class="icon-red" :hoverBg="hoverBg" />
-    <delete-icon-gray class="icon-gray" />
-  </wrapper>
+  <Wrapper :is-disabled="isDisabled">
+    <DeleteIconRed class="icon-red" :hover-bg="hoverBg" />
+    <DeleteIconGray 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'
+  // 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'
 
-const wrapperAttrs = { isDisabled: Boolean }
-const Wrapper = styled('div', wrapperAttrs)`
-  width: 30px;
-  height: 30px;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  const wrapperAttrs = { isDisabled: Boolean }
+  const Wrapper = styled('div', wrapperAttrs)`
+    width: 30px;
+    height: 30px;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
 
-  .icon-red {
-    display: none;
-  }
+    .icon-red {
+      display: none;
+    }
 
-  .icon-gray {
-    display: inline;
-  }
+    .icon-gray {
+      display: inline;
+    }
 
-  ${(props) =>
-    !props.isDisabled &&
-    `
+    ${(props) =>
+      !props.isDisabled &&
+      `
       &:hover {
         .icon-red {
           display: inline;
@@ -39,40 +39,40 @@ const Wrapper = styled('div', wrapperAttrs)`
         }
       }
     `}
-`
+  `
 
-const IconImageAttrs = { hoverBg: String }
-const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
-  &:hover {
-    background-color: ${(props) =>
-      props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
-    border-radius: 4px;
-  }
-`
+  const IconImageAttrs = { hoverBg: String }
+  const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
+    &:hover {
+      background-color: ${(props) =>
+        props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
+      border-radius: 4px;
+    }
+  `
 
-const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
-  &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
-    border-radius: 4px;
-  }
-`
+  const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
+    &:hover {
+      background-color: ${(props) => props.theme.colors.grey5};
+      border-radius: 4px;
+    }
+  `
 
-export default {
-  name: 'delete-icon',
-  components: {
-    Wrapper,
-    DeleteIconRed,
-    DeleteIconGray
-  },
-  props: {
-    isDisabled: {
-      required: false,
-      default: false
+  export default {
+    name: 'DeleteIcon',
+    components: {
+      Wrapper,
+      DeleteIconRed,
+      DeleteIconGray,
+    },
+    props: {
+      isDisabled: {
+        required: false,
+        default: false,
+      },
+      hoverBg: {
+        required: false,
+        default: '',
+      },
     },
-    hoverBg: {
-      required: false,
-      default: ''
-    }
   }
-}
 </script>

package/src/components/draggableInputHandle/index.vue

@@ -1,46 +1,46 @@
 <template>
-  <Handle :height="height" class="handle">
-    <Dot></Dot>
-    <Dot></Dot>
-    <Dot></Dot>
+  <Handle class="handle" :height="height">
+    <Dot />
+    <Dot />
+    <Dot />
   </Handle>
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
+  import styled from 'vue3-styled-components'
 
-const Handle = styled('div', { height: String })`
-  position: absolute;
-  left: 0;
-  margin-right: 10px;
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
-  justify-content: center;
-  width: 14px;
-  height: ${(props) => props.height};
-  padding: 0 5px;
-  background-color: #f3f3f7;
-  cursor: pointer;
-  align-items: center;
-`
-const Dot = styled.div`
-  display: inline-block;
-  width: 4px;
-  height: 4px;
-  margin: 2px;
-  background-color: #0068de;
-`
+  const Handle = styled('div', { height: String })`
+    position: absolute;
+    left: 0;
+    margin-right: 10px;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    justify-content: center;
+    width: 14px;
+    height: ${(props) => props.height};
+    padding: 0 5px;
+    background-color: #f3f3f7;
+    cursor: pointer;
+    align-items: center;
+  `
+  const Dot = styled.div`
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    margin: 2px;
+    background-color: #0068de;
+  `
 
-export default {
-  name: 'draggableInputHandle',
-  props: ['height'],
-  components: {
-    Handle,
-    Dot
-  },
-  data() {
-    return {}
+  export default {
+    name: 'DraggableInputHandle',
+    components: {
+      Handle,
+      Dot,
+    },
+    props: ['height'],
+    data() {
+      return {}
+    },
   }
-}
 </script>

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

@@ -2,7 +2,7 @@ import Dropdown from './index.vue'
 
 export default {
   title: 'Dropdown',
-  component: Dropdown
+  component: Dropdown,
   // argTypes: {},
 }
 
@@ -38,17 +38,16 @@ 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',
 }
-