@eturnity/eturnity_reusable_components 7.8.0 → 7.8.1-EPDM-8441.1

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

@@ -1,107 +1,107 @@
-<template>
-  <page-container>
-    <button-container
-      :type="type"
-      :minWidth="minWidth"
-      :isDisabled="isDisabled"
-      :customColor="customColor"
-      :noWrap="noWrap"
-      :data-id="dataId"
-    >
-      {{ text }}
-    </button-container>
-  </page-container>
-</template>
-
-<script>
-// To use:
-// import MainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
-// <main-button
-//   text="Click Me"
-//   customColor="#ab5348"
-//   type="secondary" // primary, secondary, cancel
-//   :isDisabled="true"
-//   :minWidth="minWidth"
-//   :data-id="test_data_id"
-// />
-
-import styled from 'vue-styled-components'
-
-const PageContainer = styled.div``
-
-const ButtonAttrs = {
-  type: String,
-  isDisabled: Boolean,
-  minWidth: String,
-  customColor: String,
-  noWrap: Boolean
-}
-const ButtonContainer = styled('div', ButtonAttrs)`
-  padding: 7px 15px;
-  font-size: 13px;
-  color: ${(props) => 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')};
-  }
-
-  &:active {
-    opacity: 1;
-  }
-`
-
-export default {
-  name: 'main-button',
-  components: {
-    PageContainer,
-    ButtonContainer
-  },
-  props: {
-    type: {
-      required: false,
-      default: 'primary'
-    },
-    isDisabled: {
-      required: false,
-      default: false
-    },
-    text: {
-      required: true
-    },
-    customColor: {
-      required: false,
-      default: null
-    },
-    noWrap: {
-      required: false,
-      default: false
-    },
-    minWidth: {
-      required: false,
-      default: null
-    },
-    dataId: {
-      type: String,
-      default: ''
-    }
-  }
-}
-</script>
+<template>
+  <page-container>
+    <button-container
+      :type="type"
+      :minWidth="minWidth"
+      :isDisabled="isDisabled"
+      :customColor="customColor"
+      :noWrap="noWrap"
+      :data-id="dataId"
+    >
+      {{ text }}
+    </button-container>
+  </page-container>
+</template>
+
+<script>
+// To use:
+// import MainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
+// <main-button
+//   text="Click Me"
+//   customColor="#ab5348"
+//   type="secondary" // primary, secondary, cancel
+//   :isDisabled="true"
+//   :minWidth="minWidth"
+//   :data-id="test_data_id"
+// />
+
+import styled from 'vue-styled-components'
+
+const PageContainer = styled.div``
+
+const ButtonAttrs = {
+  type: String,
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: String,
+  noWrap: Boolean
+}
+const ButtonContainer = styled('div', ButtonAttrs)`
+  padding: 7px 15px;
+  font-size: 13px;
+  color: ${(props) => 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')};
+  }
+
+  &:active {
+    opacity: 1;
+  }
+`
+
+export default {
+  name: 'main-button',
+  components: {
+    PageContainer,
+    ButtonContainer
+  },
+  props: {
+    type: {
+      required: false,
+      default: 'primary'
+    },
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    text: {
+      required: true
+    },
+    customColor: {
+      required: false,
+      default: null
+    },
+    noWrap: {
+      required: false,
+      default: false
+    },
+    minWidth: {
+      required: false,
+      default: null
+    },
+    dataId: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</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.native="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.native="onDeleteItem(item)" :isDisabled="true" />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isDisabled: false,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  isDisabled: true,
+}

package/src/components/deleteIcon/index.vue

@@ -1,61 +1,61 @@
-<template>
-  <wrapper
-    @mouseover="isHovered = true"
-    @mouseleave="isHovered = false"
-    :isDisabled="isDisabled"
-  >
-    <icon-image
-      v-if="isHovered && !isDisabled"
-      :hoverBg="hoverBg"
-      :src="require('../../assets/icons/delete_icon.svg')"
-    />
-    <icon-image
-      v-else
-      :src="require('../../assets/icons/delete_icon_gray.svg')"
-    />
-  </wrapper>
-</template>
-
-<script>
-// To use:
-// <delete-icon @click.native="onDeleteItem(item)" :isDisabled="true" />
-import styled from "vue-styled-components"
-
-const wrapperAttrs = { isDisabled: Boolean }
-const Wrapper = styled("div", wrapperAttrs)`
-  width: 30px;
-  height: 30px;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
-`
-
-const IconImageAttrs = { hoverBg: String }
-const IconImage = styled('img', IconImageAttrs)`
-  &:hover {
-    background-color: ${(props) => props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
-    border-radius: 4px;
-  }
-`
-
-export default {
-  name: "delete-icon",
-  components: {
-    Wrapper,
-    IconImage,
-  },
-  props: {
-    isDisabled: {
-      required: false,
-      default: false,
-    },
-    hoverBg: {
-      required: false,
-      default: '',
-    }
-  },
-  data() {
-    return {
-      isHovered: false,
-    }
-  },
-}
-</script>
+<template>
+  <wrapper
+    @mouseover="isHovered = true"
+    @mouseleave="isHovered = false"
+    :isDisabled="isDisabled"
+  >
+    <icon-image
+      v-if="isHovered && !isDisabled"
+      :hoverBg="hoverBg"
+      :src="require('../../assets/icons/delete_icon.svg')"
+    />
+    <icon-image
+      v-else
+      :src="require('../../assets/icons/delete_icon_gray.svg')"
+    />
+  </wrapper>
+</template>
+
+<script>
+// To use:
+// <delete-icon @click.native="onDeleteItem(item)" :isDisabled="true" />
+import styled from "vue-styled-components"
+
+const wrapperAttrs = { isDisabled: Boolean }
+const Wrapper = styled("div", wrapperAttrs)`
+  width: 30px;
+  height: 30px;
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+`
+
+const IconImageAttrs = { hoverBg: String }
+const IconImage = styled('img', IconImageAttrs)`
+  &:hover {
+    background-color: ${(props) => props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
+    border-radius: 4px;
+  }
+`
+
+export default {
+  name: "delete-icon",
+  components: {
+    Wrapper,
+    IconImage,
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false,
+    },
+    hoverBg: {
+      required: false,
+      default: '',
+    }
+  },
+  data() {
+    return {
+      isHovered: false,
+    }
+  },
+}
+</script>

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

@@ -1,54 +1,54 @@
-import Dropdown from './index.vue'
-
-export default {
-  title: 'Dropdown',
-  component: Dropdown
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { Dropdown },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: `<Dropdown v-bind="$props">
-  <template #trigger>
-      trigger button
-  </template>
-  <template #dropdown>
-      <div>
-        <h3>fully customizable dropdown</h3>
-        <ul>
-          <li>item</li>
-          <li>item</li>
-          <li>item</li>
-        </ul>
-      </div>
-  </template>
-</Dropdown>`,
-  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-  //  How to use:
-  //<icon
-  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-  //   color="red"
-  //   hoveredColor="blue"
-  //   size="60px" by default, this is 30px
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  openingMode:"click",
-  gap:"0px",
-  justify:"left",
-  width:"150px"
-}
-
-export const withHover = Template.bind({})
-withHover.args = {
-  openingMode:"hover",
-  gap:"20px",
-  justify:"right",
-  width:"250px"
-}
-
+import Dropdown from './index.vue'
+
+export default {
+  title: 'Dropdown',
+  component: Dropdown
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Dropdown },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: `<Dropdown v-bind="$props">
+  <template #trigger>
+      trigger button
+  </template>
+  <template #dropdown>
+      <div>
+        <h3>fully customizable dropdown</h3>
+        <ul>
+          <li>item</li>
+          <li>item</li>
+          <li>item</li>
+        </ul>
+      </div>
+  </template>
+</Dropdown>`,
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  openingMode:"click",
+  gap:"0px",
+  justify:"left",
+  width:"150px"
+}
+
+export const withHover = Template.bind({})
+withHover.args = {
+  openingMode:"hover",
+  gap:"20px",
+  justify:"right",
+  width:"250px"
+}
+