@eturnity/eturnity_reusable_components 7.12.7 → 7.16.0-qa-dev03.0

package/src/assets/svgIcons/workflow_template.svg

@@ -1,12 +1,12 @@
-<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2.4 1.2C2.4 1.86274 1.86274 2.4 1.2 2.4C0.537258 2.4 0 1.86274 0 1.2C0 0.537258 0.537258 0 1.2 0C1.86274 0 2.4 0.537258 2.4 1.2Z" fill="#263238" />
-  <path d="M6 1.2C6 1.86274 5.46274 2.4 4.8 2.4C4.13726 2.4 3.6 1.86274 3.6 1.2C3.6 0.537258 4.13726 0 4.8 0C5.46274 0 6 0.537258 6 1.2Z" fill="#263238" />
-  <path d="M2.4 4.8C2.4 5.46274 1.86274 6 1.2 6C0.537258 6 0 5.46274 0 4.8C0 4.13726 0.537258 3.6 1.2 3.6C1.86274 3.6 2.4 4.13726 2.4 4.8Z" fill="#263238" />
-  <path d="M6 4.8C6 5.46274 5.46274 6 4.8 6C4.13726 6 3.6 5.46274 3.6 4.8C3.6 4.13726 4.13726 3.6 4.8 3.6C5.46274 3.6 6 4.13726 6 4.8Z" fill="#263238" />
-  <path fill="#263238" d="M10 1h6s2 0 2 2v0s0 2 -2 2h-6s-2 0 -2 -2v0s0 -2 2 -2" />
-  <path d="M2.4 11.2C2.4 11.8627 1.86274 12.4 1.2 12.4C0.537258 12.4 0 11.8627 0 11.2C0 10.5373 0.537258 10 1.2 10C1.86274 10 2.4 10.5373 2.4 11.2Z" fill="#263238" />
-  <path d="M6 11.2C6 11.8627 5.46274 12.4 4.8 12.4C4.13726 12.4 3.6 11.8627 3.6 11.2C3.6 10.5373 4.13726 10 4.8 10C5.46274 10 6 10.5373 6 11.2Z" fill="#263238" />
-  <path d="M2.4 14.8C2.4 15.4627 1.86274 16 1.2 16C0.537258 16 0 15.4627 0 14.8C0 14.1373 0.537258 13.6 1.2 13.6C1.86274 13.6 2.4 14.1373 2.4 14.8Z" fill="#263238" />
-  <path d="M6 14.8C6 15.4627 5.46274 16 4.8 16C4.13726 16 3.6 15.4627 3.6 14.8C3.6 14.1373 4.13726 13.6 4.8 13.6C5.46274 13.6 6 14.1373 6 14.8Z" fill="#263238" />
-  <path fill="#263238" d="M10 11h6s2 0 2 2v0s0 2 -2 2h-6s-2 0 -2 -2v0s0 -2 2 -2" />
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.4 1.2C2.4 1.86274 1.86274 2.4 1.2 2.4C0.537258 2.4 0 1.86274 0 1.2C0 0.537258 0.537258 0 1.2 0C1.86274 0 2.4 0.537258 2.4 1.2Z" fill="#263238" />
+  <path d="M6 1.2C6 1.86274 5.46274 2.4 4.8 2.4C4.13726 2.4 3.6 1.86274 3.6 1.2C3.6 0.537258 4.13726 0 4.8 0C5.46274 0 6 0.537258 6 1.2Z" fill="#263238" />
+  <path d="M2.4 4.8C2.4 5.46274 1.86274 6 1.2 6C0.537258 6 0 5.46274 0 4.8C0 4.13726 0.537258 3.6 1.2 3.6C1.86274 3.6 2.4 4.13726 2.4 4.8Z" fill="#263238" />
+  <path d="M6 4.8C6 5.46274 5.46274 6 4.8 6C4.13726 6 3.6 5.46274 3.6 4.8C3.6 4.13726 4.13726 3.6 4.8 3.6C5.46274 3.6 6 4.13726 6 4.8Z" fill="#263238" />
+  <path fill="#263238" d="M10 1h6s2 0 2 2v0s0 2 -2 2h-6s-2 0 -2 -2v0s0 -2 2 -2" />
+  <path d="M2.4 11.2C2.4 11.8627 1.86274 12.4 1.2 12.4C0.537258 12.4 0 11.8627 0 11.2C0 10.5373 0.537258 10 1.2 10C1.86274 10 2.4 10.5373 2.4 11.2Z" fill="#263238" />
+  <path d="M6 11.2C6 11.8627 5.46274 12.4 4.8 12.4C4.13726 12.4 3.6 11.8627 3.6 11.2C3.6 10.5373 4.13726 10 4.8 10C5.46274 10 6 10.5373 6 11.2Z" fill="#263238" />
+  <path d="M2.4 14.8C2.4 15.4627 1.86274 16 1.2 16C0.537258 16 0 15.4627 0 14.8C0 14.1373 0.537258 13.6 1.2 13.6C1.86274 13.6 2.4 14.1373 2.4 14.8Z" fill="#263238" />
+  <path d="M6 14.8C6 15.4627 5.46274 16 4.8 16C4.13726 16 3.6 15.4627 3.6 14.8C3.6 14.1373 4.13726 13.6 4.8 13.6C5.46274 13.6 6 14.1373 6 14.8Z" fill="#263238" />
+  <path fill="#263238" d="M10 11h6s2 0 2 2v0s0 2 -2 2h-6s-2 0 -2 -2v0s0 -2 2 -2" />
 </svg>

package/src/assets/theme.js

@@ -1,41 +1,41 @@
-const theme = {
-  colors: {
-    primary: '#48a2d0',
-    secondary: '#fdb813',
-    tertiary: '#d5d5d5',
-    black: '#263238',
-    yellow: '#fdb813',
-    darkGray: '#818181',
-    gray1: '#666',
-    mediumGray: '#d5d5d5',
-    lightGray: '#f2f2f2',
-    white: '#ffffff',
-    blue: '#48a2d0',
-    red: '#ff5656',
-    blue1: '#e4efff',
-    brightBlue: '#0068DE',
-    grey1: '#666',
-    grey2: '#c4c4c4',
-    grey3: '#b2b9c5',
-    grey4: '#dee2eb',
-    grey5: '#fafafa',
-    grey6: '#555d61',
-    green: '#99db0c',
-    transparentWhite1: '#ffffff32',
-    transparentWhite2: '#ffffff16',
-    transparentWhite3: '#ffffff48',
-    transparentBlack1: '#263238e6',
-    disabled: '#dfe1e1',
-    eturnityGrey: '#263238'
-  },
-  screen: {
-    mobileSmall: '345px',
-    mobile: '425px',
-    mobileLarge: '530px',
-    tablet: '768px',
-    tabletLarge: '950px'
-  },
-  borderRadius: '4px'
-}
-
-export default theme
+const theme = {
+  colors: {
+    primary: '#48a2d0',
+    secondary: '#fdb813',
+    tertiary: '#d5d5d5',
+    black: '#263238',
+    yellow: '#fdb813',
+    darkGray: '#818181',
+    gray1: '#666',
+    mediumGray: '#d5d5d5',
+    lightGray: '#f2f2f2',
+    white: '#ffffff',
+    blue: '#48a2d0',
+    red: '#ff5656',
+    blue1: '#e4efff',
+    brightBlue: '#0068DE',
+    grey1: '#666',
+    grey2: '#c4c4c4',
+    grey3: '#b2b9c5',
+    grey4: '#dee2eb',
+    grey5: '#fafafa',
+    grey6: '#555d61',
+    green: '#99db0c',
+    transparentWhite1: '#ffffff32',
+    transparentWhite2: '#ffffff16',
+    transparentWhite3: '#ffffff48',
+    transparentBlack1: '#263238e6',
+    disabled: '#dfe1e1',
+    eturnityGrey: '#263238'
+  },
+  screen: {
+    mobileSmall: '345px',
+    mobile: '425px',
+    mobileLarge: '530px',
+    tablet: '768px',
+    tabletLarge: '950px'
+  },
+  borderRadius: '4px'
+}
+
+export default theme

package/src/components/addNewButton/AddNewButton.stories.js

@@ -1,24 +1,24 @@
-import AddNewButton from "./index.vue"
-
-export default {
-  title: "AddNewButton",
-  component: AddNewButton,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { AddNewButton },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<add-new-button v-bind="$props" />',
-
-  // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-  // To use:
-  // <add-new-button :shouldPosition="true" />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  shouldPosition: true,
-}
+import AddNewButton from "./index.vue"
+
+export default {
+  title: "AddNewButton",
+  component: AddNewButton,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { AddNewButton },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<add-new-button v-bind="$props" />',
+
+  // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
+  // To use:
+  // <add-new-button :shouldPosition="true" />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  shouldPosition: true,
+}

package/src/components/addNewButton/index.vue

@@ -1,62 +1,62 @@
-<template>
-  <page-container :shouldPosition="shouldPosition">
-    <button-container :data-id="dataId">
-      <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
-    },
-    dataId: {
-      type: String,
-      default: ''
-    }
-  }
-}
-</script>
+<template>
+  <page-container :shouldPosition="shouldPosition">
+    <button-container :data-id="dataId">
+      <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
+    },
+    dataId: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

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

@@ -1,142 +1,142 @@
-<template>
-  <page-container>
-    <button-wrapper
-      :isDisabled="isDisabled"
-      :minWidth="minWidth"
-      :customColor="customColor"
-      :height="height"
-    >
-      <icon-container :width="height">
-        <icon
-            :name="iconName"
-            :color="fontColor ? fontColor : theme.colors.white"
-            size="14px"
-        />
-      </icon-container>
-      <button-container :fontSize="fontSize" :fontColor="fontColor">{{ text }}</button-container>
-    </button-wrapper>
-  </page-container>
-</template>
-
-<script>
-// import buttonIcon from "@eturnity/eturnity_reusable_components/src/components/buttons/buttonIcon"
-// <button-icon
-//   :isDisabled="true"
-//   text="Click Me"
-//   minWidth="300px"
-//   customColor="#000"
-//   iconName="external_icon"
-//   fontColor="white"
-//   fontSize="12px"
-//   height="24px"
-// />
-
-import Icon from "../../icon"
-import styled from "vue-styled-components"
-import Theme from "@/assets/theme";
-
-const PageContainer = styled.div``
-
-const ButtonAttrs = {
-  isDisabled: Boolean,
-  minWidth: String,
-  customColor: String,
-  height: 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;
-  overflow: hidden;
-  min-width: ${(props) => (props.minWidth ? props.minWidth : "initial")};
-  height: ${(props) => props.height};
-
-  &:hover {
-    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
-  }
-
-  &:active {
-    opacity: 1;
-  }
-`
-
-const ButtonContainerAttrs = {
-  fontSize: String,
-  fontColor: String
-}
-const ButtonContainer = styled('div', ButtonContainerAttrs)`
-  font-size: ${(props) => props.fontSize};
-  color: ${(props) => props.fontColor ? props.fontColor : props.theme.colors.white};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 15px;
-`
-
-const IconContainerAttrs = {
-  width: String
-}
-const IconContainer = styled('div', IconContainerAttrs)`
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  width: ${(props) => props.width};
-  background: ${(props) => props.theme.colors.white + '1a'};
-`
-
-export default {
-  name: "button-icon",
-  components: {
-    PageContainer,
-    ButtonContainer,
-    ButtonWrapper,
-    IconContainer,
-    Icon
-  },
-  props: {
-    isDisabled: {
-      required: false,
-      default: false
-    },
-    text: {
-      required: true
-    },
-    minWidth: {
-      required: false,
-      default: null
-    },
-    customColor: {
-      required: false,
-      default: null
-    },
-    iconName: {
-      required: true
-    },
-    fontColor: {
-      required: false,
-      default: null
-    },
-    fontSize: {
-      required: false,
-      default: '13px'
-    },
-    height: {
-      required: false,
-      default: '30px'
-    }
-  },
-  data () {
-    return {
-      theme: Theme
-    }
-  }
-}
-</script>
+<template>
+  <page-container>
+    <button-wrapper
+      :isDisabled="isDisabled"
+      :minWidth="minWidth"
+      :customColor="customColor"
+      :height="height"
+    >
+      <icon-container :width="height">
+        <icon
+            :name="iconName"
+            :color="fontColor ? fontColor : theme.colors.white"
+            size="14px"
+        />
+      </icon-container>
+      <button-container :fontSize="fontSize" :fontColor="fontColor">{{ text }}</button-container>
+    </button-wrapper>
+  </page-container>
+</template>
+
+<script>
+// import buttonIcon from "@eturnity/eturnity_reusable_components/src/components/buttons/buttonIcon"
+// <button-icon
+//   :isDisabled="true"
+//   text="Click Me"
+//   minWidth="300px"
+//   customColor="#000"
+//   iconName="external_icon"
+//   fontColor="white"
+//   fontSize="12px"
+//   height="24px"
+// />
+
+import Icon from "../../icon"
+import styled from "vue-styled-components"
+import Theme from "@/assets/theme";
+
+const PageContainer = styled.div``
+
+const ButtonAttrs = {
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: String,
+  height: 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;
+  overflow: hidden;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : "initial")};
+  height: ${(props) => props.height};
+
+  &:hover {
+    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
+  }
+
+  &:active {
+    opacity: 1;
+  }
+`
+
+const ButtonContainerAttrs = {
+  fontSize: String,
+  fontColor: String
+}
+const ButtonContainer = styled('div', ButtonContainerAttrs)`
+  font-size: ${(props) => props.fontSize};
+  color: ${(props) => props.fontColor ? props.fontColor : props.theme.colors.white};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 15px;
+`
+
+const IconContainerAttrs = {
+  width: String
+}
+const IconContainer = styled('div', IconContainerAttrs)`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  width: ${(props) => props.width};
+  background: ${(props) => props.theme.colors.white + '1a'};
+`
+
+export default {
+  name: "button-icon",
+  components: {
+    PageContainer,
+    ButtonContainer,
+    ButtonWrapper,
+    IconContainer,
+    Icon
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    text: {
+      required: true
+    },
+    minWidth: {
+      required: false,
+      default: null
+    },
+    customColor: {
+      required: false,
+      default: null
+    },
+    iconName: {
+      required: true
+    },
+    fontColor: {
+      required: false,
+      default: null
+    },
+    fontSize: {
+      required: false,
+      default: '13px'
+    },
+    height: {
+      required: false,
+      default: '30px'
+    }
+  },
+  data () {
+    return {
+      theme: Theme
+    }
+  }
+}
+</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",
+}