@eturnity/eturnity_reusable_components 8.19.8-EPDM-12618.6 → 8.19.8-EPDM-13618.0

package/src/components/card/index.vue

@@ -1,116 +1,116 @@
-<template>
-  <Wrapper
-    v-show="!isLoading"
-    :class="viewCardClass"
-    data-test-id="card_main_wrapper"
-    :min-width="minWidth"
-    :width="width"
-  >
-    <Spinner
-      v-if="isLoading"
-      data-test-id="card_spinner"
-      :limited-to-modal="true"
-      size="50px"
-    />
-    <CardWrapper v-else>
-      <CardTitle :class="titleClass" data-test-id="card_title">
-        {{ $gettext(title) }}
-        <InfoText
-          v-if="showPopover && popoverText !== ''"
-          data-test-id="card_popover"
-          :text="popoverText"
-        />
-      </CardTitle>
-      <slot></slot>
-    </CardWrapper>
-  </Wrapper>
-</template>
-
-<script>
-  // To use:
-  // import RCCard from "@eturnity/eturnity_reusable_components/src/components/card"
-  // <RCCard
-  //   :isLoading="true"
-  //   minWidth="150px"
-  //   popoverText="Sample popover text"
-  //   :showPopover="true"
-  //   title="Sample title"
-  //   titleClass="sampleTitleClass"
-  //   viewCardClass="sampleViewCardClass"
-  //   width="200px"
-  // />
-
-  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 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;
-  `
-
-  export default {
-    name: 'Card',
-    components: {
-      Spinner,
-      Wrapper,
-      CardTitle,
-      CardWrapper,
-    },
-    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,
-      },
-    },
-  }
-</script>
+<template>
+  <Wrapper
+    v-show="!isLoading"
+    :class="viewCardClass"
+    data-test-id="card_main_wrapper"
+    :min-width="minWidth"
+    :width="width"
+  >
+    <Spinner
+      v-if="isLoading"
+      data-test-id="card_spinner"
+      :limited-to-modal="true"
+      size="50px"
+    />
+    <CardWrapper v-else>
+      <CardTitle :class="titleClass" data-test-id="card_title">
+        {{ $gettext(title) }}
+        <InfoText
+          v-if="showPopover && popoverText !== ''"
+          data-test-id="card_popover"
+          :text="popoverText"
+        />
+      </CardTitle>
+      <slot></slot>
+    </CardWrapper>
+  </Wrapper>
+</template>
+
+<script>
+  // To use:
+  // import RCCard from "@eturnity/eturnity_reusable_components/src/components/card"
+  // <RCCard
+  //   :isLoading="true"
+  //   minWidth="150px"
+  //   popoverText="Sample popover text"
+  //   :showPopover="true"
+  //   title="Sample title"
+  //   titleClass="sampleTitleClass"
+  //   viewCardClass="sampleViewCardClass"
+  //   width="200px"
+  // />
+
+  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 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;
+  `
+
+  export default {
+    name: 'Card',
+    components: {
+      Spinner,
+      Wrapper,
+      CardTitle,
+      CardWrapper,
+    },
+    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,
+      },
+    },
+  }
+</script>

package/src/components/collapsableInfoText/index.vue

@@ -1,127 +1,127 @@
-<template>
-  <div>
-    <Text :expand="showButton && showAll" :font-size="fontSize">
-      {{ text }}
-    </Text>
-    <ToggleContainer>
-      <ToggleButton
-        v-if="showButton && !showAll"
-        :font-size="fontSize"
-        @click="toggleHandler"
-      >
-        {{ $gettext('Show more') }}
-      </ToggleButton>
-      <ToggleButton
-        v-if="showButton && showAll"
-        :font-size="fontSize"
-        @click="toggleHandler"
-      >
-        {{ $gettext('Show less') }}
-      </ToggleButton>
-    </ToggleContainer>
-  </div>
-</template>
-
-<script>
-  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.5;
-    -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 ToggleButton = styled('p', TextAttrs)`
-    font-size: ${(props) => props.fontSize}px;
-    cursor: pointer;
-    color: ${(props) => props.theme.semanticColors.purple[500]};
-  `
-
-  export default {
-    name: 'CollapsableInfoText',
-    components: {
-      Text,
-      ToggleButton,
-      ToggleContainer,
-    },
-    props: {
-      text: {
-        type: String,
-        required: true,
-      },
-      fontSize: {
-        type: String,
-        default: '16px',
-      },
-      lineCount: {
-        type: Number,
-        default: 3,
-      },
-      minWidth: {
-        type: String,
-        default: '100%',
-      },
-    },
-    data() {
-      return {
-        showButton: true,
-        showAll: false,
-        lineBreaks: [],
-      }
-    },
-    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
-      // }
-
-      if (this.text.length <= 170) {
-        this.showButton = false
-      }
-    },
-    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
-            }
-          })
-
-          return this.text.slice(0, countIndex + 2) + '...'
-        } else {
-          return this.text
-        }
-      },
-      toggleHandler() {
-        this.showAll = !this.showAll
-      },
-    },
-  }
-</script>
+<template>
+  <div>
+    <Text :expand="showButton && showAll" :font-size="fontSize">
+      {{ text }}
+    </Text>
+    <ToggleContainer>
+      <ToggleButton
+        v-if="showButton && !showAll"
+        :font-size="fontSize"
+        @click="toggleHandler"
+      >
+        {{ $gettext('Show more') }}
+      </ToggleButton>
+      <ToggleButton
+        v-if="showButton && showAll"
+        :font-size="fontSize"
+        @click="toggleHandler"
+      >
+        {{ $gettext('Show less') }}
+      </ToggleButton>
+    </ToggleContainer>
+  </div>
+</template>
+
+<script>
+  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.5;
+    -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 ToggleButton = styled('p', TextAttrs)`
+    font-size: ${(props) => props.fontSize}px;
+    cursor: pointer;
+    color: ${(props) => props.theme.semanticColors.purple[500]};
+  `
+
+  export default {
+    name: 'CollapsableInfoText',
+    components: {
+      Text,
+      ToggleButton,
+      ToggleContainer,
+    },
+    props: {
+      text: {
+        type: String,
+        required: true,
+      },
+      fontSize: {
+        type: String,
+        default: '16px',
+      },
+      lineCount: {
+        type: Number,
+        default: 3,
+      },
+      minWidth: {
+        type: String,
+        default: '100%',
+      },
+    },
+    data() {
+      return {
+        showButton: true,
+        showAll: false,
+        lineBreaks: [],
+      }
+    },
+    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
+      // }
+
+      if (this.text.length <= 170) {
+        this.showButton = false
+      }
+    },
+    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
+            }
+          })
+
+          return this.text.slice(0, countIndex + 2) + '...'
+        } else {
+          return this.text
+        }
+      },
+      toggleHandler() {
+        this.showAll = !this.showAll
+      },
+    },
+  }
+</script>

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

@@ -1,29 +1,29 @@
-import DeleteIcon from './index.vue'
-
-export default {
-  title: 'DeleteIcon',
-  component: DeleteIcon,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  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" />',
-
-  // import DeleteIcon from "@eturnity/eturnity_reusable_components/src/components/deleteIcon"
-  // To use:
-  // <delete-icon color="gray" @click="onDeleteItem(item)" :isDisabled="true" />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  isDisabled: false,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  isDisabled: true,
-}
+import DeleteIcon from './index.vue'
+
+export default {
+  title: 'DeleteIcon',
+  component: DeleteIcon,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  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" />',
+
+  // import DeleteIcon from "@eturnity/eturnity_reusable_components/src/components/deleteIcon"
+  // To use:
+  // <delete-icon color="gray" @click="onDeleteItem(item)" :isDisabled="true" />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isDisabled: false,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  isDisabled: true,
+}