@eturnity/eturnity_reusable_components 7.39.4-EPDM-10609.0 → 7.39.4-EPDM-11314.1

package/src/components/iconWrapper/index.vue

@@ -1,179 +1,179 @@
-<template>
-  <Wrapper
-    :background-color="backgroundColor"
-    :border-radius="borderRadius"
-    :color="iconColor"
-    :data-id="dataId"
-    :disabled="disabled"
-    :has-border="hasBorder"
-    :hovered-background-color="hoveredBackgroundColor"
-    :is-hovered="isHovered"
-    :no-cursor="noCursor"
-    :size="size"
-  >
-    <RCIcon
-      :animation="isLoading ? 'fade 3s infinite' : 'none'"
-      :color="iconColor"
-      :disabled="disabled"
-      :hovered-color="hoveredIconColor"
-      :is-striked="isStriked"
-      :name="name"
-      :size="iconSize"
-    />
-
-    <CaretIcon v-if="hasCaret">
-      <IconWrapper
-        border-radius="1px"
-        :disabled="disabled"
-        :hovered-background-color="hoveredIconColor"
-        :icon-color="iconColor"
-        name="arrow_down"
-        size="10px"
-      />
-    </CaretIcon>
-    <LockContainer v-if="hasLock">
-      <RCIcon color="yellow" name="lock" size="9px" />
-    </LockContainer>
-  </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
-  // />
-
-  import styled from 'vue3-styled-components'
-  import RCIcon from '../icon'
-
-  const wrapperAttrs = {
-    color: String,
-    isHovered: Boolean,
-    borderRadius: String,
-    disabled: Boolean,
-    size: String,
-    backgroundColor: String,
-    hoveredBackgroundColor: String,
-    hasBorder: Boolean,
-    noCursor: Boolean,
-  }
-  const LockContainer = styled.div`
-    position: absolute;
-    bottom: 6px;
-    right: 6px;
-  `
-  const Wrapper = styled('div', wrapperAttrs)`
-    position: relative;
-    display: inline-flex;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    border: ${(props) =>
-      props.hasBorder
-        ? 'solid 1px ' + props.theme.colors[props.color] || props.color
-        : ''};
-    justify-content: center;
-    align-items: center;
-    cursor: ${(props) =>
-      props.noCursor ? 'auto' : props.disabled ? 'not-allowed' : 'pointer'};
-    background-color: ${(props) =>
-      props.theme.colors[props.backgroundColor] || props.backgroundColor};
-    border-radius: ${(props) => props.borderRadius};
-    ${(props) =>
-      props.isHovered
-        ? 'background-color:' +
-            props.theme.colors[props.hoveredBackgroundColor] ||
-          props.hoveredBackgroundColor
-        : ''};
-    &:hover {
-      background-color: ${(props) =>
-        props.theme.colors[props.hoveredBackgroundColor] ||
-        props.hoveredBackgroundColor};
-    }
-  `
-  const CaretIcon = styled.div`
-    position: absolute;
-    bottom: 3px;
-    right: 2px;
-    height: 10px;
-  `
-
-  export default {
-    name: 'IconWrapper',
-    components: {
-      Wrapper,
-      RCIcon,
-      CaretIcon,
-      LockContainer,
-    },
-    props: {
-      disabled: {
-        required: false,
-        default: false,
-      },
-      name: {
-        required: true,
-      },
-      iconColor: {
-        required: false,
-        default: 'white',
-      },
-      hoveredIconColor: {
-        required: false,
-      },
-      backgroundColor: {
-        required: false,
-      },
-      hasBorder: {
-        required: false,
-      },
-      hoveredBackgroundColor: {
-        required: false,
-        default: 'transparentWhite2',
-      },
-      size: {
-        required: false,
-        default: '32px',
-      },
-      iconSize: {
-        required: false,
-        default: '18px',
-      },
-      hasCaret: {
-        required: false,
-        default: false,
-      },
-      borderRadius: {
-        required: false,
-        default: '6px',
-      },
-      dataId: {
-        type: String,
-        default: '',
-      },
-      isHovered: {
-        required: false,
-        default: false,
-      },
-      isStriked: {
-        required: false,
-        default: false,
-      },
-      isLoading: {
-        required: false,
-        default: false,
-      },
-      noCursor: {
-        required: false,
-        default: false,
-      },
-      hasLock: {
-        required: false,
-        default: false,
-      },
-    },
-  }
-</script>
+<template>
+  <Wrapper
+    :background-color="backgroundColor"
+    :border-radius="borderRadius"
+    :color="iconColor"
+    :data-id="dataId"
+    :disabled="disabled"
+    :has-border="hasBorder"
+    :hovered-background-color="hoveredBackgroundColor"
+    :is-hovered="isHovered"
+    :no-cursor="noCursor"
+    :size="size"
+  >
+    <RCIcon
+      :animation="isLoading ? 'fade 3s infinite' : 'none'"
+      :color="iconColor"
+      :disabled="disabled"
+      :hovered-color="hoveredIconColor"
+      :is-striked="isStriked"
+      :name="name"
+      :size="iconSize"
+    />
+
+    <CaretIcon v-if="hasCaret">
+      <IconWrapper
+        border-radius="1px"
+        :disabled="disabled"
+        :hovered-background-color="hoveredIconColor"
+        :icon-color="iconColor"
+        name="arrow_down"
+        size="10px"
+      />
+    </CaretIcon>
+    <LockContainer v-if="hasLock">
+      <RCIcon color="yellow" name="lock" size="9px" />
+    </LockContainer>
+  </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
+  // />
+
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
+
+  const wrapperAttrs = {
+    color: String,
+    isHovered: Boolean,
+    borderRadius: String,
+    disabled: Boolean,
+    size: String,
+    backgroundColor: String,
+    hoveredBackgroundColor: String,
+    hasBorder: Boolean,
+    noCursor: Boolean,
+  }
+  const LockContainer = styled.div`
+    position: absolute;
+    bottom: 6px;
+    right: 6px;
+  `
+  const Wrapper = styled('div', wrapperAttrs)`
+    position: relative;
+    display: inline-flex;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    border: ${(props) =>
+      props.hasBorder
+        ? 'solid 1px ' + props.theme.colors[props.color] || props.color
+        : ''};
+    justify-content: center;
+    align-items: center;
+    cursor: ${(props) =>
+      props.noCursor ? 'auto' : props.disabled ? 'not-allowed' : 'pointer'};
+    background-color: ${(props) =>
+      props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: ${(props) => props.borderRadius};
+    ${(props) =>
+      props.isHovered
+        ? 'background-color:' +
+            props.theme.colors[props.hoveredBackgroundColor] ||
+          props.hoveredBackgroundColor
+        : ''};
+    &:hover {
+      background-color: ${(props) =>
+        props.theme.colors[props.hoveredBackgroundColor] ||
+        props.hoveredBackgroundColor};
+    }
+  `
+  const CaretIcon = styled.div`
+    position: absolute;
+    bottom: 3px;
+    right: 2px;
+    height: 10px;
+  `
+
+  export default {
+    name: 'IconWrapper',
+    components: {
+      Wrapper,
+      RCIcon,
+      CaretIcon,
+      LockContainer,
+    },
+    props: {
+      disabled: {
+        required: false,
+        default: false,
+      },
+      name: {
+        required: true,
+      },
+      iconColor: {
+        required: false,
+        default: 'white',
+      },
+      hoveredIconColor: {
+        required: false,
+      },
+      backgroundColor: {
+        required: false,
+      },
+      hasBorder: {
+        required: false,
+      },
+      hoveredBackgroundColor: {
+        required: false,
+        default: 'transparentWhite2',
+      },
+      size: {
+        required: false,
+        default: '32px',
+      },
+      iconSize: {
+        required: false,
+        default: '18px',
+      },
+      hasCaret: {
+        required: false,
+        default: false,
+      },
+      borderRadius: {
+        required: false,
+        default: '6px',
+      },
+      dataId: {
+        type: String,
+        default: '',
+      },
+      isHovered: {
+        required: false,
+        default: false,
+      },
+      isStriked: {
+        required: false,
+        default: false,
+      },
+      isLoading: {
+        required: false,
+        default: false,
+      },
+      noCursor: {
+        required: false,
+        default: false,
+      },
+      hasLock: {
+        required: false,
+        default: false,
+      },
+    },
+  }
+</script>

package/src/components/infoCard/index.vue

@@ -1,40 +1,126 @@
-<template>
-  <InfoContainer>
-    <RCIcon name="info" size="24px" :color="color" />
-    <TextContainer>
-      <slot></slot>
-    </TextContainer>
-  </InfoContainer>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import RCIcon from '../icon'
-
-  const InfoContainer = styled.div`
-    display: flex;
-    gap: 15px;
-    padding: 20px;
-    border: 1px dashed ${(props) => props.theme.colors.grey4};
-    border-radius: 4px;
-  `
-
-  const TextContainer = styled.div`
-    font-size: 13px;
-    width: 100%;
-  `
-
-  export default {
-    name: 'InfoCard',
-    components: {
-      RCIcon,
-      InfoContainer,
-      TextContainer,
-    },
-    props: {
-      color: {
-        required: false
-      }
-    }
-  }
-</script>
+<template>
+  <InfoContainer
+    :min-width="minWidth"
+    :color="color"
+    :align-items="alignItems"
+    :padding="padding"
+    :border-color="borderColor"
+    :border-style="borderStyle"
+    :preset-styles="presetStyles"
+  >
+    <RCIcon
+      name="info"
+      size="24px"
+      :color="color ? color : presetStyles.iconColor"
+    />
+    <TextContainer>
+      <slot></slot>
+    </TextContainer>
+  </InfoContainer>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import theme from '../../assets/theme.js'
+  import RCIcon from '../icon'
+
+  const infoContainerAttrs = {
+    minWidth: String,
+    color: String,
+    alignItems: String,
+    padding: String,
+    borderColor: String,
+    borderStyle: String,
+    presetStyles: Object,
+  }
+  const InfoContainer = styled('div', infoContainerAttrs)`
+    display: flex;
+    align-items: ${(props) =>
+      props.alignItems ? props.alignItems : props.presetStyles.alignItems};
+    gap: 15px;
+    min-width: ${(props) => props.minWidth};
+    padding: ${(props) =>
+      props.padding ? props.padding : props.presetStyles.padding};
+    color: ${(props) => (props.color ? props.color : props.presetStyles.color)};
+    border-radius: 4px;
+    background-color: ${(props) =>
+      props.backgroundColor
+        ? props.backgroundColor
+        : props.presetStyles.backgroundColor};
+    border-width: ${(props) => props.presetStyles.borderWidth};
+    border-style: ${(props) =>
+      props.borderStyle ? props.borderStyle : props.presetStyles.borderStyle};
+    border-color: ${(props) =>
+      props.borderColor ? props.borderColor : props.presetStyles.borderColor};
+  `
+
+  const TextContainer = styled.div`
+    font-size: 13px;
+    width: 100%;
+  `
+
+  export default {
+    name: 'InfoCard',
+    components: {
+      RCIcon,
+      InfoContainer,
+      TextContainer,
+    },
+    props: {
+      type: {
+        required: false,
+        type: String,
+        default: 'info',
+      },
+      minWidth: {
+        required: false,
+        type: String,
+      },
+      color: {
+        required: false,
+      },
+      alignItems: {
+        required: false,
+        type: String,
+      },
+      padding: {
+        required: false,
+        type: String,
+      },
+      borderColor: {
+        required: false,
+        type: String,
+      },
+      borderStyle: {
+        required: false,
+        type: String,
+      },
+    },
+    computed: {
+      isInfo() {
+        return this.type === 'info'
+      },
+      isWarning() {
+        return this.type === 'warning'
+      },
+      presetStyles() {
+        let stylesCollection = {}
+
+        if (this.isWarning) {
+          stylesCollection.alignItems = 'center'
+          stylesCollection.padding = '6px 10px'
+          stylesCollection.color = theme.colors.white
+          stylesCollection.backgroundColor = theme.colors.yellow
+          stylesCollection.iconColor = theme.colors.white
+        } else {
+          stylesCollection.padding = '20px'
+          stylesCollection.borderWidth = '1px'
+          stylesCollection.borderStyle = 'dashed'
+          stylesCollection.borderColor = theme.colors.grey4
+        }
+
+        return stylesCollection
+      },
+    },
+  }
+</script>