@eturnity/eturnity_reusable_components 1.2.25-EPDM-5202.2 → 1.2.26-3d-master.0

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,55 +1,55 @@
-<template>
-  <wrapper
-    @mouseover="isHovered = true"
-    @mouseleave="isHovered = false"
-    :isDisabled="isDisabled"
-  >
-    <icon-image
-      v-if="isHovered && !isDisabled"
-      :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 IconImage = styled.img`
-  &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
-    border-radius: 4px;
-  }
-`
-
-export default {
-  name: "delete-icon",
-  components: {
-    Wrapper,
-    IconImage,
-  },
-  props: {
-    isDisabled: {
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      isHovered: false,
-    }
-  },
-}
-</script>
+<template>
+  <wrapper
+    @mouseover="isHovered = true"
+    @mouseleave="isHovered = false"
+    :isDisabled="isDisabled"
+  >
+    <icon-image
+      v-if="isHovered && !isDisabled"
+      :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 IconImage = styled.img`
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+    border-radius: 4px;
+  }
+`
+
+export default {
+  name: "delete-icon",
+  components: {
+    Wrapper,
+    IconImage,
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isHovered: false,
+    }
+  },
+}
+</script>

package/src/components/errorMessage/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <component-wrapper>
+    <text-overlay>
+      <slot></slot>
+    </text-overlay>
+  </component-wrapper>
+</template>
+
+<script>
+// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+//To use:
+// <error-message
+//     alignText="right" // default is left
+// />
+
+import styled from 'vue-styled-components'
+
+const TextOverlay = styled.div`
+  position: absolute;
+  top: calc(100% + 13px);
+  background: ${(props) => props.theme.colors.red};
+  padding: 10px;
+  width: max-content;
+  max-width: 100%;
+  min-width: 200px;
+  font-size: 11px;
+  font-weight: 400;
+  border-radius: 4px;
+  font-family: 'Lato-Bold', Arial;
+  z-index: 10;
+  color: ${(props) => props.theme.colors.white};
+
+  :before {
+    content: '';
+    background-color: ${(props) => props.theme.colors.red};
+    position: absolute;
+    top: 2px;
+    left: 40px;
+    height: 11px;
+    width: 11px;
+    transform-origin: center center;
+    transform: translate(-2em, -0.5em) rotate(45deg);
+  }
+`
+
+const ComponentWrapper = styled.div`
+  display: block;
+`
+
+export default {
+  name: 'info-text',
+  components: {
+    TextOverlay,
+    ComponentWrapper
+  },
+  props: {},
+  methods: {},
+  data() {
+    return {}
+  }
+}
+</script>

package/src/components/icon/Icons.stories.js

@@ -1,41 +1,41 @@
-import iconCollection from './iconCollection.vue'
-
-export default {
-  title: 'icon',
-  component: iconCollection
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { iconCollection },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<iconCollection v-bind="$props" />'
-
-  // 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 = {
-  size: '30px'
-}
-
-export const withColor = Template.bind({})
-withColor.args = {
-  size: '30px',
-  color: 'red',
-  hoveredColor: 'crimson'
-}
-
-export const large = Template.bind({})
-large.args = {
-  size: '60px'
-}
+import iconCollection from './iconCollection.vue'
+
+export default {
+  title: 'icon',
+  component: iconCollection
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { iconCollection },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<iconCollection v-bind="$props" />'
+
+  // 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 = {
+  size: '30px'
+}
+
+export const withColor = Template.bind({})
+withColor.args = {
+  size: '30px',
+  color: 'red',
+  hoveredColor: 'crimson'
+}
+
+export const large = Template.bind({})
+large.args = {
+  size: '60px'
+}

package/src/components/icon/iconCollection.vue

@@ -1,68 +1,68 @@
-<template>
-  <wrapper>
-    <icon-wrapper v-for="iconItem in iconList" :key="iconItem.name">
-      <div>
-        <icon
-          :name="iconItem.name"
-          :size="size"
-          :hoveredColor="hoveredColor"
-          :color="color"
-        />
-      </div>
-      <h3>{{ iconItem.name }}</h3>
-    </icon-wrapper>
-  </wrapper>
-</template>
-
-<script>
-import icon from './index.vue'
-import styled from 'vue-styled-components'
-
-const Wrapper = styled.div`
-  display: block;
-  text-align:center;
-  justify-items:center
-  width:100%;
-  background-color:#ccc;
-`
-const IconWrapper = styled.div`
-  display:inline-flex
-  flex-direction: column;
-  background-color: white;
-  border-radius: 6px;
-  padding: 10px;
-  width: 220px;
-  text-align: center;
-  margin: 10px;
-`
-export default {
-  name: 'collection',
-  components: { icon, IconWrapper, Wrapper },
-  props: {
-    size: { required: false },
-    color: { required: false },
-    hoveredColor: { required: false }
-  },
-  data() {
-    return {
-      iconList: []
-    }
-  },
-
-  mounted() {
-    this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
-  },
-
-  methods: {
-    importAll(r) {
-      r.keys().forEach((key) =>
-        this.iconList.push({
-          pathLong: r(key),
-          pathShort: key,
-          name: key.replace('.svg', '').replace('./', '')
-        })
-      )
-    }
-  }
-}
-</script>
+<template>
+  <wrapper>
+    <icon-wrapper v-for="iconItem in iconList" :key="iconItem.name">
+      <div>
+        <icon
+          :name="iconItem.name"
+          :size="size"
+          :hoveredColor="hoveredColor"
+          :color="color"
+        />
+      </div>
+      <h3>{{ iconItem.name }}</h3>
+    </icon-wrapper>
+  </wrapper>
+</template>
+
+<script>
+import icon from './index.vue'
+import styled from 'vue-styled-components'
+
+const Wrapper = styled.div`
+  display: block;
+  text-align:center;
+  justify-items:center
+  width:100%;
+  background-color:#ccc;
+`
+const IconWrapper = styled.div`
+  display:inline-flex
+  flex-direction: column;
+  background-color: white;
+  border-radius: 6px;
+  padding: 10px;
+  width: 220px;
+  text-align: center;
+  margin: 10px;
+`
+export default {
+  name: 'collection',
+  components: { icon, IconWrapper, Wrapper },
+  props: {
+    size: { required: false },
+    color: { required: false },
+    hoveredColor: { required: false }
+  },
+  data() {
+    return {
+      iconList: []
+    }
+  },
+
+  mounted() {
+    this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
+  },
+
+  methods: {
+    importAll(r) {
+      r.keys().forEach((key) =>
+        this.iconList.push({
+          pathLong: r(key),
+          pathShort: key,
+          name: key.replace('.svg', '').replace('./', '')
+        })
+      )
+    }
+  }
+}
+</script>

package/src/components/icon/index.vue

@@ -1,83 +1,84 @@
-<template>
-  <wrapper :isDisabled="isDisabled" :size="size" :cursor="cursor">
-    <icon-image
-      :size="size"
-      :color="color"
-      :hoveredColor="hoveredColor"
-      v-html="
-        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
-      "
-    ></icon-image>
-  </wrapper>
-</template>
-
-<script>
-// 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
-//   cursor="default"
-// />
-
-import styled from 'vue-styled-components'
-
-const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
-const Wrapper = styled('div', wrapperAttrs)`
-  display: inline-block;
-  width: ${(props) => props.size};
-  height: ${(props) => props.size};
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
-  line-height: 0;
-`
-const IconImageProps = { color: String, hoveredColor: String, size: String }
-const IconImage = styled('div', IconImageProps)`
-  svg {
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-  }
-  svg > path {
-    ${(props) =>
-      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
-  }
-  &:hover > svg > path {
-    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
-  }
-`
-
-export default {
-  name: 'icon',
-  components: {
-    Wrapper,
-    IconImage
-  },
-  props: {
-    isDisabled: {
-      required: false,
-      default: false
-    },
-    name: {
-      required: true
-    },
-    color: {
-      required: false
-    },
-    hoveredColor: {
-      required: false
-    },
-    size: {
-      required: false,
-      default: '30px'
-    },
-    cursor: {
-      required: false,
-      default: 'pointer'
-    }
-  },
-  data() {
-    return {}
-  }
-}
-</script>
+<template>
+  <Wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
+    <icon-image
+      :disabled="disabled"
+      :size="size"
+      :color="color"
+      :hoveredColor="hoveredColor"
+      v-html="
+        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
+      "
+    ></icon-image>
+  </Wrapper>  
+</template>
+
+<script>
+// 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
+//   cursor="default"
+// />
+
+import styled from 'vue-styled-components'
+
+const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
+const Wrapper = styled('div', wrapperAttrs)`
+  display: inline-block;
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
+  line-height: 0;
+`
+const IconImageProps = { color: String, hoveredColor: String, size: String }
+const IconImage = styled('div', IconImageProps)`
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+  svg path {
+    ${(props) =>
+      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
+  }
+  &:hover > svg path {
+    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
+  }
+`
+
+export default {
+  name: 'icon',
+  components: {
+    IconImage,
+    Wrapper
+  },
+  props: {
+    disabled: {
+      required: false,
+      default: false
+    },
+    name: {
+      required: true
+    },
+    color: {
+      required: false
+    },
+    hoveredColor: {
+      required: false
+    },
+    size: {
+      required: false,
+      default: '30px'
+    },
+    cursor: {
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>