@eturnity/eturnity_reusable_components 7.48.1-qa-elisee-7.51.1 → 7.48.5

package/dist/main.es92.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "6",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M21.75 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu = { render };
+export {
+  context_menu as default,
+  render
+};

package/dist/main.es93.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "6",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#B2B9C5",
+  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const context_menu_tabs = { render };
+export {
+  context_menu_tabs as default,
+  render
+};

package/dist/main.es94.js

@@ -0,0 +1,24 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "800",
+  height: "800",
+  viewBox: "0 0 512 512"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "none",
+  "fill-rule": "evenodd",
+  d: "M426.667 128v320h-256V128zM384 170.667H213.333v234.666H384zm-64-128v42.666H128v256H85.333V42.667z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const copy = { render };
+export {
+  copy as default,
+  render
+};

package/dist/main.es95.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "10",
+  height: "10",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m9.879 8.479-1.4 1.4L.12 1.52l1.4-1.4L5.7 4.3z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#000",
+  d: "m1.521 9.879-1.4-1.4L8.48.12l1.4 1.4z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const cross = { render };
+export {
+  cross as default,
+  render
+};

package/dist/main.es96.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "14",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 16c2.829 0 4.976 1.278 6.69 4.003C24.975 22.724 22.827 24 20 24s-4.975-1.276-6.69-3.997C15.024 17.278 17.171 16 20 16m0-2c-4.273 0-7.094 2.43-9 6.005C12.906 23.57 15.727 26 20 26s7.094-2.43 9-5.995C27.094 16.43 24.273 14 20 14"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M20 22a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const current_variant = { render };
+export {
+  current_variant as default,
+  render
+};

package/dist/main.es97.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#fff",
+  d: "M0 10h8V0H0zm0 8h8v-6H0zm10 0h8V8h-8zm0-18v6h8V0z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const dashboard = { render };
+export {
+  dashboard as default,
+  render
+};

package/dist/main.es98.js

@@ -0,0 +1,23 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4v-2H2V2h14v14h-4v2h4c1.1 0 2-.9 2-2V2a2 2 0 0 0-2-2M9 6l-4 4h3v8h2v-8h3z"
+}, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+const data_transfer = { render };
+export {
+  data_transfer as default,
+  render
+};

package/dist/main.es99.js

@@ -0,0 +1,28 @@
+import "./main.es3.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "16",
+  fill: "none"
+};
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M15 13h2v14h-2z"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M17 21a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h8l-2.857 4L25 21z"
+}, null, -1);
+const _hoisted_4 = [
+  _hoisted_2,
+  _hoisted_3
+];
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+}
+const deadline = { render };
+export {
+  deadline as default,
+  render
+};

package/dist/style.css

@@ -0,0 +1 @@
+html,body{height:100%;margin:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-qa-elisee-7.51.1",
+  "version": "7.48.5",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/lock.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="16" viewbox="14 12 12 16" width="16" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" height="16" viewbox="14 12 12 16" width="12" xmlns="http://www.w3.org/2000/svg">
 <path clip-rule="evenodd" d="M16.5 18.25V16.5C16.5 14.567 18.067 13 20 13C21.933 13 23.5 14.567 23.5 16.5V18.25H25.25V27H14.75V18.25H16.5ZM18.25 16.5C18.25 15.5335 19.0335 14.75 20 14.75C20.9665 14.75 21.75 15.5335 21.75 16.5V18.25H18.25V16.5ZM19.125 24.375V20.875H20.875V24.375H19.125Z" fill="#263238" fill-rule="evenodd"></path>
 </svg>

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

@@ -11,7 +11,7 @@
       :type="type"
     >
       <LabelComponent :has-icon="Boolean(icon)">
-        <Icon v-if="icon" :name="icon" size="14px" />
+        <Icon v-if="icon" :name="icon" :color="iconColor" size="14px" />
         {{ text }}
       </LabelComponent>
     </ButtonContainer>
@@ -112,6 +112,11 @@
         default: null,
         type: String,
       },
+      iconColor: {
+        required: false,
+        default: '',
+        type: String,
+      },
       text: {
         required: true,
         type: String,

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

@@ -3,14 +3,24 @@ import IconCollection from './iconCollection.vue'
 export default {
   title: 'icon',
   component: IconCollection,
+  // argTypes: {},
 }
 
-const Template = (args) => ({
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
   components: { IconCollection },
-  setup() {
-    return { args }
-  },
-  template: '<IconCollection v-bind="args" />',
+  // 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({})
@@ -18,14 +28,14 @@ Default.args = {
   size: '30px',
 }
 
-export const WithColor = Template.bind({})
-WithColor.args = {
+export const withColor = Template.bind({})
+withColor.args = {
   size: '30px',
   color: 'red',
   hoveredColor: 'crimson',
 }
 
-export const Large = Template.bind({})
-Large.args = {
+export const large = Template.bind({})
+large.args = {
   size: '60px',
 }

package/src/components/icon/iconCollection.vue

@@ -2,7 +2,6 @@
   <Wrapper>
     <IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
       <div>
-        color:{{ color }}
         <RCIcon
           :color="color"
           :hovered-color="hoveredColor"
@@ -40,9 +39,9 @@
     name: 'CollectionComponent',
     components: { RCIcon, IconWrapper, Wrapper },
     props: {
-      size: { required: false, type: String, default: '30px' },
-      color: { required: false, type: String, default: 'white' },
-      hoveredColor: { required: false, type: String, default: 'grey' },
+      size: { required: false },
+      color: { required: false },
+      hoveredColor: { required: false },
     },
     data() {
       return {

package/src/components/icon/index.vue

@@ -1,24 +1,14 @@
 <template>
-  <Wrapper
-    :cursor="cursor"
-    data-test-id="icon_wrapper"
-    :disabled="disabled"
-    :size="size"
-  >
+  <Wrapper :cursor="cursor" :disabled="disabled" :size="size">
     <IconImage
       :animation="animation"
       :background-color="backgroundColor"
       :color="color"
-      data-test-id="icon_image"
       :hovered-color="hoveredColor"
     >
-      <i data-test-id="icon_svg" v-html="icon.html"></i>
+      <i v-html="icon.html"></i>
     </IconImage>
-    <StrikedLine
-      v-if="isStriked"
-      :color="color"
-      data-test-id="icon_striked_line"
-    />
+    <StrikedLine v-if="isStriked" :color="color" />
   </Wrapper>
 </template>
 

package/src/components/infoCard/InfoCard.stories.js

@@ -0,0 +1,144 @@
+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',
+}

package/src/components/infoCard/defaultProps.js

@@ -0,0 +1,7 @@
+const defaultInfoCardProps = {
+  // info card content slot
+  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.',
+}
+
+export default defaultInfoCardProps

package/src/components/infoCard/index.vue

@@ -1,11 +1,21 @@
 <template>
   <InfoContainer
-    background-color="backgrounColor"
+    :align-items="alignItems"
     :border-color="borderColor"
-    :has-dashed-border="hasDashedBorder"
+    :border-style="borderStyle"
+    :color="color"
+    data-test-id="info_card_wrapper"
+    :min-width="minWidth"
+    :padding="padding"
+    :preset-styles="presetStyles"
   >
-    <RCIcon :color="color" name="info" size="24px" />
-    <TextContainer>
+    <RCIcon
+      :color="color ? color : presetStyles.iconColor"
+      data-test-id="info_card_icon"
+      name="info"
+      size="24px"
+    />
+    <TextContainer data-test-id="info_card_text_container">
       <slot></slot>
     </TextContainer>
   </InfoContainer>
@@ -13,26 +23,37 @@
 
 <script>
   import styled from 'vue3-styled-components'
+  import theme from '../../assets/theme.js'
   import RCIcon from '../icon'
-  const propsContainer = {
-    backgroundColor: String,
-    hasDashedBorder: Boolean,
+
+  const infoContainerAttrs = {
+    minWidth: String,
+    color: String,
+    alignItems: String,
+    padding: String,
     borderColor: String,
+    borderStyle: String,
+    presetStyles: Object,
   }
-  const InfoContainer = styled('div', propsContainer)`
+  const InfoContainer = styled('div', infoContainerAttrs)`
     display: flex;
+    align-items: ${(props) =>
+      props.alignItems ? props.alignItems : props.presetStyles.alignItems};
     gap: 15px;
-    padding: 15px;
-    border: 1px ${(props) => (props.hasDashedBorder ? 'dashed' : 'solid')}
-      ${(props) =>
-        props.theme.colors[props.borderColor]
-          ? props.theme.colors[props.borderColor]
-          : props.borderColor};
-    background-color: ${(props) =>
-      props.theme.colors[props.backgroundColor]
-        ? props.theme.colors[props.backgroundColor]
-        : props.backgroundColor};
+    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`
@@ -48,19 +69,71 @@
       TextContainer,
     },
     props: {
+      type: {
+        required: false,
+        type: String,
+        default: 'info',
+      },
+      minWidth: {
+        required: false,
+        type: String,
+        default: '',
+      },
       color: {
         required: false,
+        type: String,
+        default: '',
       },
-      backgrounColor: {
+      alignItems: {
         required: false,
+        type: String,
+        default: '',
       },
-      hasDashedBorder: {
+      padding: {
         required: false,
-        default: true,
+        type: String,
+        default: '',
       },
       borderColor: {
         required: false,
-        default: 'grey4',
+        type: String,
+        default: '',
+      },
+      borderStyle: {
+        required: false,
+        type: String,
+        default: '',
+      },
+    },
+    computed: {
+      isInfo() {
+        // this property is used for tests
+        return this.type === 'info'
+      },
+      isWarning() {
+        return this.type === 'warning'
+      },
+      presetStyles() {
+        // the types that doesn't have explicit border anyway have it transparent
+        // to avoid flickering in case the same info card would switch the types
+        let stylesCollection = {
+          alignItems: 'flex-start',
+          padding: '20px',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          borderColor: 'transparent',
+        }
+
+        if (this.isWarning) {
+          stylesCollection.color = theme.colors.white
+          stylesCollection.backgroundColor = theme.colors.yellow
+          stylesCollection.iconColor = theme.colors.white
+        } else {
+          stylesCollection.borderStyle = 'dashed'
+          stylesCollection.borderColor = theme.colors.grey4
+        }
+
+        return stylesCollection
       },
     },
   }