@eturnity/eturnity_reusable_components 1.2.24-EPDM-5477 → 1.2.25-EPDM-5202.2

package/src/components/addNewButton/index.vue

@@ -1,58 +1,58 @@
-<template>
-  <page-container :shouldPosition="shouldPosition">
-    <button-container>
-      <plus-button :src="require('../../assets/icons/plus_button.svg')" />
-    </button-container>
-  </page-container>
-</template>
-
-<script>
-// import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-import styled from "vue-styled-components"
-
-const pageAttrs = { shouldPosition: Boolean }
-const PageContainer = styled("div", pageAttrs)`
-  position: ${(props) => (props.shouldPosition ? "fixed" : "unset")};
-  bottom: 30px;
-  right: 30px;
-`
-
-const ButtonContainer = styled.div`
-  height: 60px;
-  width: 60px;
-  background-color: ${(props) => props.theme.colors.green};
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 100%;
-  cursor: pointer;
-  display: grid;
-  align-items: center;
-  justify-items: center;
-
-  &:hover {
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-      ${(props) => props.theme.colors.green};
-  }
-
-  &:active,
-  &:focus {
-    background: ${(props) => props.theme.colors.green};
-  }
-`
-
-const PlusButton = styled.img``
-
-export default {
-  name: "add-new-button",
-  components: {
-    PageContainer,
-    ButtonContainer,
-    PlusButton,
-  },
-  props: {
-    shouldPosition: {
-      required: false,
-      default: true,
-    },
-  },
-}
-</script>
+<template>
+  <page-container :shouldPosition="shouldPosition">
+    <button-container>
+      <plus-button :src="require('../../assets/icons/plus_button.svg')" />
+    </button-container>
+  </page-container>
+</template>
+
+<script>
+// import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
+import styled from "vue-styled-components"
+
+const pageAttrs = { shouldPosition: Boolean }
+const PageContainer = styled("div", pageAttrs)`
+  position: ${(props) => (props.shouldPosition ? "fixed" : "unset")};
+  bottom: 30px;
+  right: 30px;
+`
+
+const ButtonContainer = styled.div`
+  height: 60px;
+  width: 60px;
+  background-color: ${(props) => props.theme.colors.green};
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 100%;
+  cursor: pointer;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+
+  &:hover {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+      ${(props) => props.theme.colors.green};
+  }
+
+  &:active,
+  &:focus {
+    background: ${(props) => props.theme.colors.green};
+  }
+`
+
+const PlusButton = styled.img``
+
+export default {
+  name: "add-new-button",
+  components: {
+    PageContainer,
+    ButtonContainer,
+    PlusButton,
+  },
+  props: {
+    shouldPosition: {
+      required: false,
+      default: true,
+    },
+  },
+}
+</script>

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

@@ -1,29 +1,29 @@
-import CloseButton from "./index.vue"
-
-export default {
-  title: "CloseButton",
-  component: CloseButton,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { CloseButton },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<close-button v-bind="$props" />',
-
-  // To use:
-  // import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
-  // <close-button
-  //   color="#fff"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {}
-
-export const ColorButton = Template.bind({})
-ColorButton.args = {
-  color: "orange",
-}
+import CloseButton from "./index.vue"
+
+export default {
+  title: "CloseButton",
+  component: CloseButton,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { CloseButton },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<close-button v-bind="$props" />',
+
+  // To use:
+  // import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
+  // <close-button
+  //   color="#fff"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const ColorButton = Template.bind({})
+ColorButton.args = {
+  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>
-</template>
-
-<script>
-// To use:
-// import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
-// <close-button
-//   color="#fff"
-// />
-import styled from 'vue-styled-components'
-
-const Container = styled.div`
-  position: relative;
-  width: 26px;
-  height: 25px;
-`
-
-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 LeftLine = styled(Line)`
-  transform: rotate(135deg);
-`
-
-const RightLine = styled(Line)`
-  transform: rotate(45deg);
-`
-
-export default {
-  name: 'close-button',
-  components: {
-    Container,
-    Wrapper,
-    LeftLine,
-    RightLine
-  },
-  props: {
-    color: {
-      required: false
-    }
-  }
-}
-</script>
+<template>
+  <wrapper>
+    <container>
+      <left-line :color="color" />
+      <right-line :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 'vue-styled-components'
+
+const Container = styled.div`
+  position: relative;
+  width: 26px;
+  height: 25px;
+`
+
+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 LeftLine = styled(Line)`
+  transform: rotate(135deg);
+`
+
+const RightLine = styled(Line)`
+  transform: rotate(45deg);
+`
+
+export default {
+  name: 'close-button',
+  components: {
+    Container,
+    Wrapper,
+    LeftLine,
+    RightLine
+  },
+  props: {
+    color: {
+      required: false
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,101 @@
+<template>
+  <page-container>
+    <button-wrapper
+      :isDisabled="isDisabled"
+      :minWidth="minWidth"
+      :customColor="customColor"
+    >
+      <icon-container>
+        <icon-element
+          :src="require('../../../assets/icons/external_icon.svg')"
+        />
+      </icon-container>
+      <button-container>{{ text }}</button-container>
+    </button-wrapper>
+  </page-container>
+</template>
+
+<script>
+// import ExternalButton from "@eturnity/eturnity_reusable_components/src/components/buttons/externalButton"
+// <main-button
+//   :isDisabled="true"
+//   text="Click Me"
+//   minWidth="300px"
+//   customColor="#000"
+// />
+
+import styled from "vue-styled-components"
+
+const PageContainer = styled.div``
+
+const ButtonAttrs = {
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: 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;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : "initial")};
+
+  &:hover {
+    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
+  }
+
+  &:active {
+    opacity: 1;
+  }
+`
+
+const ButtonContainer = styled.div`
+  padding: 7px 15px;
+  font-size: 13px;
+  color: ${(props) => props.theme.colors.white};
+  text-align: center;
+`
+
+const IconContainer = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+`
+
+const IconElement = styled.img``
+
+export default {
+  name: "external-button",
+  components: {
+    PageContainer,
+    ButtonContainer,
+    ButtonWrapper,
+    IconContainer,
+    IconElement,
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false,
+    },
+    text: {
+      required: true,
+    },
+    minWidth: {
+      required: false,
+      default: null,
+    },
+    customColor: {
+      required: false,
+      default: null,
+    },
+  },
+}
+</script>

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

@@ -1,82 +1,82 @@
-<template>
-  <page-container>
-    <button-container
-      :isDisabled="isDisabled"
-      :type="type"
-      :customColor="customColor"
-    >
-      {{ text }}
-    </button-container>
-  </page-container>
-</template>
-
-<script>
-// To use:
-// import MainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
-// <main-button
-//   type="secondary" // primary, secondary, cancel
-//   :isDisabled="true"
-//   text="Click Me"
-//   customColor="#ab5348"
-// />
-
-import styled from "vue-styled-components"
-
-const PageContainer = styled.div``
-
-const ButtonAttrs = { type: String, isDisabled: Boolean, customColor: String }
-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;
-
-  &: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,
-    },
-  },
-}
-</script>
+<template>
+  <page-container>
+    <button-container
+      :isDisabled="isDisabled"
+      :type="type"
+      :customColor="customColor"
+    >
+      {{ text }}
+    </button-container>
+  </page-container>
+</template>
+
+<script>
+// To use:
+// import MainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
+// <main-button
+//   type="secondary" // primary, secondary, cancel
+//   :isDisabled="true"
+//   text="Click Me"
+//   customColor="#ab5348"
+// />
+
+import styled from "vue-styled-components"
+
+const PageContainer = styled.div``
+
+const ButtonAttrs = { type: String, isDisabled: Boolean, customColor: String }
+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;
+
+  &: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,
+    },
+  },
+}
+</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,
+}