@eturnity/eturnity_reusable_components 7.51.16-EPDM-6306.0 → 7.51.16-qa-04-deploy.0

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/InfoCard.stories.js

@@ -1,144 +1,170 @@
-import defaultInfoCardProps from './defaultProps'
-import InfoCard from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'InfoCard',
-  component: InfoCard,
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      description: 'Defines preset styles',
-      control: 'select',
-      options: ['info', 'warning'],
-    },
-    minWidth: {
-      description: '',
-    },
-    color: {
-      description: 'Color of text and icon (can overwrite preset styles)',
-      control: {
-        type: 'color',
-        presetColors: [
-          theme.colors.grey3,
-          theme.colors.grey4,
-          theme.colors.red,
-        ],
-      },
-    },
-    alignItems: {
-      description: 'Icon and text alignment (can overwrite preset styles)',
-      control: 'select',
-      options: ['flex-start', 'flex-end', 'center'],
-    },
-    padding: {
-      description: 'Info card padding (can overwrite preset styles)',
-    },
-    borderColor: {
-      description: 'Info card border color (can overwrite preset styles)',
-      control: {
-        type: 'color',
-        presetColors: [
-          theme.colors.grey3,
-          theme.colors.grey4,
-          theme.colors.red,
-        ],
-      },
-    },
-    borderStyle: {
-      description: 'Info card border style (can overwrite preset styles)',
-      control: 'select',
-      options: ['dashed', 'dotted', 'inset', 'dashed solid', 'none'],
-    },
-
-    // info card content slot
-    default: {
-      description: 'Info card slot content',
-    },
-  },
-}
-
-// To use:
-// <InfoCard
-//   type="warning"
-//   min-width="auto'
-//   color="red"
-//   align-items="center"
-//   padding="100px"
-//   border-color="red"
-//   border-style="solid"
-// >
-//   Some Text
-// </InfoCard>
-// all props after "min-width" are used to overwrite the preset styles set by "type"
-
-const Template = (args) => {
-  return {
-    components: { InfoCard },
-    setup() {
-      return { args }
-    },
-    template: `
-      <InfoCard v-bind="args">
-        {{ args.default }}
-      </InfoCard>
-    `,
-  }
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  ...defaultInfoCardProps,
-}
-
-export const InfoCardTypeWarning = Template.bind({})
-InfoCardTypeWarning.args = {
-  ...defaultInfoCardProps,
-  type: 'warning',
-}
-
-export const InfoCardTypeInfoMinWidth = Template.bind({})
-InfoCardTypeInfoMinWidth.args = {
-  ...defaultInfoCardProps,
-
-  minWidth: '250px',
-}
-
-export const InfoCardTypeInfoColorOverwritten = Template.bind({})
-InfoCardTypeInfoColorOverwritten.args = {
-  ...defaultInfoCardProps,
-
-  color: theme.colors.red,
-}
-
-export const InfoCardTypeWarningAlignItemsOverwritten = Template.bind({})
-InfoCardTypeWarningAlignItemsOverwritten.args = {
-  ...defaultInfoCardProps,
-  type: 'warning',
-  default:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-
-  alignItems: 'center',
-}
-
-export const InfoCardTypeWarningPaddingOverwritten = Template.bind({})
-InfoCardTypeWarningPaddingOverwritten.args = {
-  ...defaultInfoCardProps,
-  type: 'warning',
-
-  padding: '50px',
-}
-
-export const InfoCardTypeInfoBorderColorOverwritten = Template.bind({})
-InfoCardTypeInfoBorderColorOverwritten.args = {
-  ...defaultInfoCardProps,
-
-  borderColor: theme.colors.red,
-}
-
-export const InfoCardTypeInfoBorderStyleOverwritten = Template.bind({})
-InfoCardTypeInfoBorderStyleOverwritten.args = {
-  ...defaultInfoCardProps,
-
-  borderStyle: 'solid none',
-}
+import defaultInfoCardProps from './defaultProps'
+import InfoCard from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'InfoCard',
+  component: InfoCard,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      description: 'Defines preset styles',
+      control: 'select',
+      options: ['info', 'warning'],
+    },
+    minWidth: {
+      description: '',
+    },
+    color: {
+      description: 'Color of the text (can overwrite preset styles)',
+      control: {
+        type: 'color',
+        presetColors: [
+          theme.colors.grey3,
+          theme.colors.grey4,
+          theme.colors.red,
+        ],
+      },
+    },
+    iconColor: {
+      description: 'Color of the icon (can overwrite preset styles)',
+      control: {
+        type: 'color',
+        presetColors: [
+          theme.colors.grey3,
+          theme.colors.grey4,
+          theme.colors.red,
+        ],
+      },
+    },
+    alignItems: {
+      description: 'Icon and text alignment (can overwrite preset styles)',
+      control: 'select',
+      options: ['flex-start', 'flex-end', 'center'],
+    },
+    padding: {
+      description: 'Info card padding (can overwrite preset styles)',
+    },
+    borderColor: {
+      description: 'Info card border color (can overwrite preset styles)',
+      control: {
+        type: 'color',
+        presetColors: [
+          theme.colors.grey3,
+          theme.colors.grey4,
+          theme.colors.red,
+        ],
+      },
+    },
+    borderStyle: {
+      description: 'Info card border style (can overwrite preset styles)',
+      control: 'select',
+      options: ['dashed', 'dotted', 'inset', 'dashed solid', 'none'],
+    },
+
+    // info card content slot
+    default: {
+      description: 'Info card slot content',
+    },
+  },
+}
+
+// To use:
+// <InfoCard
+//   type="warning"
+//   min-width="auto'
+//   color="red"
+//   align-items="center"
+//   padding="100px"
+//   border-color="red"
+//   border-style="solid"
+// >
+//   Some Text
+// </InfoCard>
+// all props after "min-width" are used to overwrite the preset styles set by "type"
+
+const Template = (args) => {
+  return {
+    components: { InfoCard },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoCard v-bind="args">
+        {{ args.default }}
+      </InfoCard>
+    `,
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  ...defaultInfoCardProps,
+}
+
+export const InfoCardTypeWarning = Template.bind({})
+InfoCardTypeWarning.args = {
+  ...defaultInfoCardProps,
+  type: 'warning',
+}
+
+export const InfoCardTypeErrorMinor = Template.bind({})
+InfoCardTypeErrorMinor.args = {
+  ...defaultInfoCardProps,
+  type: 'error_minor',
+}
+
+export const InfoCardTypeInfoMinWidth = Template.bind({})
+InfoCardTypeInfoMinWidth.args = {
+  ...defaultInfoCardProps,
+
+  minWidth: '250px',
+}
+
+export const InfoCardTypeInfoColorOverwritten = Template.bind({})
+InfoCardTypeInfoColorOverwritten.args = {
+  ...defaultInfoCardProps,
+
+  color: theme.colors.green,
+}
+
+export const InfoCardTypeInfoIconColorOverwritten = Template.bind({})
+InfoCardTypeInfoIconColorOverwritten.args = {
+  ...defaultInfoCardProps,
+
+  iconColor: theme.colors.green,
+}
+
+export const InfoCardTypeWarningAlignItemsOverwritten = Template.bind({})
+InfoCardTypeWarningAlignItemsOverwritten.args = {
+  ...defaultInfoCardProps,
+  type: 'warning',
+  default:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+
+  alignItems: 'center',
+}
+
+export const InfoCardTypeWarningPaddingOverwritten = Template.bind({})
+InfoCardTypeWarningPaddingOverwritten.args = {
+  ...defaultInfoCardProps,
+  type: 'warning',
+
+  padding: '50px',
+}
+
+export const InfoCardTypeErrorMinorBorderColorOverwritten = Template.bind({})
+InfoCardTypeErrorMinorBorderColorOverwritten.args = {
+  ...defaultInfoCardProps,
+  type: 'error_minor',
+
+  borderColor: theme.colors.green,
+}
+
+export const InfoCardTypeErrorMinorBorderStyleOverwritten = Template.bind({})
+InfoCardTypeErrorMinorBorderStyleOverwritten.args = {
+  ...defaultInfoCardProps,
+  type: 'error_minor',
+
+  borderStyle: 'solid none',
+}