@eturnity/eturnity_reusable_components 7.51.2 → 7.51.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.2",
+  "version": "7.51.4",
   "files": [
     "dist",
     "src"
@@ -16,8 +16,7 @@
     "build-storybook": "storybook build",
     "prettier": "prettier --write 'src/**/*.{js,vue}'",
     "test": "jest",
-    "test-coverage": "jest --coverage",
-    "prepublishOnly": "npm run test"
+    "test-coverage": "jest --coverage"
   },
   "dependencies": {
     "@originjs/vite-plugin-commonjs": "1.0.3",

package/src/assets/svgIcons/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0686 17.0686C20.9771 13.1601 20.9771 6.83992 17.0686 2.93139C13.1601 -0.977131 6.83992 -0.977131 2.93139 2.93139C-0.977131 6.83992 -0.977131 13.1601 2.93139 17.0686C6.83992 20.9771 13.1601 20.9771 17.0686 17.0686ZM6.42412 8.50312L8.66944 10.7484L13.5759 5.842L15.3222 7.58836L10.4158 12.4948L8.66944 14.158L6.92308 12.4948L4.67775 10.2495L6.42412 8.50312Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/collapse_all.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M3 2L7 5L11 2" stroke="white" stroke-width="1.27273" class="fix"/>
+  <path d="M3 12L7 9L11 12" stroke="white" stroke-width="1.27273" class="fix"/>
+</svg>

package/src/assets/svgIcons/expand_all.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99998 1.20459L11.3818 4.49095L10.6182 5.50914L6.99998 2.7955L3.3818 5.50914L2.61816 4.49095L6.99998 1.20459Z" fill="#263238"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99998 12.7954L11.3818 9.50905L10.6182 8.49086L6.99998 11.2045L3.3818 8.49086L2.61816 9.50905L6.99998 12.7954Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/export_document.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 0H8.33405L11.7467 3.41264V6.7202H10.5248V4.88741H6.85927V1.22185H1.97185V12.2185H5.63741V13.4404H0.75V0ZM8.08112 1.47478V3.66556H10.2719L8.08112 1.47478ZM10.5554 7.99581L13.5233 10.9979L10.5554 14L9.68664 13.141L11.2017 11.6088H6.85805V10.387H11.2017L9.68664 8.85477L10.5554 7.99581Z" fill="#0D0D0D"/>
+</svg>

package/src/assets/svgIcons/hybrid.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.22998 11.8962H10.5006H12.2505V10.1463V8.97906H14.0004V5.47917H12.2505V4.31283V2.56289V2.55151H10.5006V2.56289H8.58218L7.76617 4.31283H10.5006V10.1463H5.04599L4.22998 11.8962Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.2622 4.79738C6.91629 4.63687 6.53076 4.54729 6.12431 4.54729C4.63054 4.54729 3.41919 5.75796 3.41919 7.25241C3.41919 8.33588 4.05591 9.26984 4.97534 9.70158L7.2622 4.79738ZM5.44786 3.11681C5.44786 3.49042 5.7507 3.79326 6.12431 3.79326C6.49793 3.79326 6.80077 3.49042 6.80077 3.11681V1.76459C6.80077 1.39097 6.49793 1.08813 6.12431 1.08813C5.7507 1.08813 5.44786 1.39097 5.44786 1.76459V3.11681ZM2.02818 7.88939H0.675962C0.302349 7.88939 -0.000488281 7.58655 -0.000488281 7.21294C-0.000488281 6.83932 0.302349 6.53649 0.675962 6.53649H2.02818C2.4018 6.53649 2.70463 6.83932 2.70463 7.21294C2.70463 7.58655 2.4018 7.88939 2.02818 7.88939ZM3.7057 10.5877L2.74955 11.5439C2.4855 11.8079 2.05745 11.8079 1.7934 11.5439C1.52935 11.2798 1.52935 10.8518 1.7934 10.5877L2.74955 9.63155C3.0136 9.36751 3.44165 9.36751 3.7057 9.63155C3.96975 9.8956 3.96975 10.3237 3.7057 10.5877ZM2.74955 4.79432L1.7934 3.83817C1.52935 3.57412 1.52935 3.14607 1.7934 2.88202C2.05745 2.61797 2.4855 2.61797 2.74955 2.88202L3.7057 3.83817C3.96975 4.10222 3.96975 4.53027 3.7057 4.79432C3.44165 5.05837 3.0136 5.05837 2.74955 4.79432Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/module.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0722 3.6H1.6V10.4H11.0722L7.87332 7.60217L7.18484 7L7.87332 6.39783L11.0722 3.6ZM12.4 9.43572V4.56428L9.61516 7L12.4 9.43572ZM0 2H1.6H12.4H14V3.6V10.4V12H12.4H1.6H0V10.4V3.6V2Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/move_down.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.875 7.63636H4.55V0H9.45V7.63636H13.125L7 14L0.875 7.63636Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/move_up.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.875 6.36364H4.55V14H9.45V6.36364H13.125L7 0L0.875 6.36364Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/optimizer.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.11079" y="3.10981" width="7.77778" height="7.77778" stroke="white" stroke-width="1.55556"/>
+<line x1="3.72749" y1="10.3387" x2="10.7275" y2="3.3387" stroke="white" stroke-width="1.55556"/>
+<line x1="-0.000366211" y1="7.05425" x2="2.99963" y2="7.05425" stroke="white" stroke-width="1.55556"/>
+<line x1="10.9994" y1="6.99957" x2="13.9994" y2="6.99957" stroke="white" stroke-width="1.55556"/>
+</svg>

package/src/assets/svgIcons/string_design.svg

@@ -0,0 +1,5 @@
+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.85714 1.92857C2.85714 2.71755 2.21755 3.35714 1.42857 3.35714C0.639593 3.35714 0 2.71755 0 1.92857C0 1.13959 0.639593 0.5 1.42857 0.5C2.21755 0.5 2.85714 1.13959 2.85714 1.92857Z" fill="white"/>
+<path d="M10 9.07143C10 9.86041 9.36041 10.5 8.57143 10.5C7.78245 10.5 7.14286 9.86041 7.14286 9.07143C7.14286 8.28245 7.78245 7.64286 8.57143 7.64286C9.36041 7.64286 10 8.28245 10 9.07143Z" fill="white"/>
+<path d="M5.71429 3C5.71429 2.40827 6.19398 1.92857 6.78571 1.92857C7.37745 1.92857 7.85714 2.40827 7.85714 3V6.21429H9.28571V3C9.28571 1.61929 8.16643 0.5 6.78571 0.5C5.405 0.5 4.28571 1.61929 4.28571 3V8C4.28571 8.59173 3.80602 9.07143 3.21429 9.07143C2.62255 9.07143 2.14286 8.59173 2.14286 8V4.78571H0.714286V8C0.714286 9.38071 1.83357 10.5 3.21429 10.5C4.595 10.5 5.71429 9.38071 5.71429 8V3Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/string_directions.svg

@@ -0,0 +1,10 @@
+<svg width="30" height="30" viewBox="8 8 14 14" fill="#263238" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_908_47480)" fill="#263238">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 19.75V8.5H9.5V19.75C9.5 20.1642 9.83579 20.5 10.25 20.5C10.6642 20.5 11 20.1642 11 19.75V10.25C11 9.2835 11.7835 8.5 12.75 8.5C13.7165 8.5 14.5 9.2835 14.5 10.25V21.5H13.5V10.25C13.5 9.83579 13.1642 9.5 12.75 9.5C12.3358 9.5 12 9.83579 12 10.25V19.75C12 20.7165 11.2165 21.5 10.25 21.5C9.2835 21.5 8.5 20.7165 8.5 19.75ZM20 9.5H15.5V8.5H20C20.8284 8.5 21.5 9.17157 21.5 10C21.5 10.8284 20.8284 11.5 20 11.5H17C16.7239 11.5 16.5 11.7239 16.5 12C16.5 12.2761 16.7239 12.5 17 12.5H20C20.8284 12.5 21.5 13.1716 21.5 14C21.5 14.8284 20.8284 15.5 20 15.5H17C16.7239 15.5 16.5 15.7239 16.5 16C16.5 16.2761 16.7239 16.5 17 16.5H20C20.8284 16.5 21.5 17.1716 21.5 18C21.5 18.8284 20.8284 19.5 20 19.5H17C16.7239 19.5 16.5 19.7239 16.5 20C16.5 20.2761 16.7239 20.5 17 20.5H21.5V21.5H17C16.1716 21.5 15.5 20.8284 15.5 20C15.5 19.1716 16.1716 18.5 17 18.5H20C20.2761 18.5 20.5 18.2761 20.5 18C20.5 17.7239 20.2761 17.5 20 17.5H17C16.1716 17.5 15.5 16.8284 15.5 16C15.5 15.1716 16.1716 14.5 17 14.5H20C20.2761 14.5 20.5 14.2761 20.5 14C20.5 13.7239 20.2761 13.5 20 13.5H17C16.1716 13.5 15.5 12.8284 15.5 12C15.5 11.1716 16.1716 10.5 17 10.5H20C20.2761 10.5 20.5 10.2761 20.5 10C20.5 9.72386 20.2761 9.5 20 9.5Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_908_47480">
+<rect width="14" height="14" fill="white" transform="translate(8 8)"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/banner/notificationBanner/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <PageContainer v-if="showBanner">
+    <BannerContainer
+      :background-color="backgroundColor"
+      :text-color="textColor"
+    >
+      <IconContainer>
+        <RCIcon color="white" :name="iconName" size="20px" />
+      </IconContainer>
+      <TextContainer>
+        <TextContent>
+          {{ mainText }}
+        </TextContent>
+      </TextContainer>
+      <ButtonContainer>
+        <MainButton
+          :custom-color="theme.colors.white"
+          :font-color="theme.colors.black"
+          :text="buttonText"
+          @click="$emit('on-button-click')"
+        />
+      </ButtonContainer>
+    </BannerContainer>
+  </PageContainer>
+</template>
+
+<script>
+  // import NotificationBanner from "@eturnity/eturnity_reusable_components/src/components/banner/notificationBanner"
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../../icon'
+  import MainButton from '../../buttons/mainButton'
+  import theme from '@/assets/theme'
+
+  const PageContainer = styled.div`
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999999;
+  `
+
+  const bannerAttrs = { backgroundColor: String, textColor: String }
+  const BannerContainer = styled('div', bannerAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 20px;
+    padding: 10px 20px;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.theme.colors[props.backgroundColor]};
+    color: ${(props) => props.theme.colors[props.textColor]};
+    font-size: 14px;
+  `
+
+  const IconContainer = styled.div``
+
+  const TextContainer = styled.div``
+
+  const TextContent = styled.div`
+    line-height: 150%;
+  `
+
+  const ButtonContainer = styled.div`
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    justify-content: center;
+  `
+
+  export default {
+    name: 'NotificationBanner',
+    components: {
+      PageContainer,
+      BannerContainer,
+      RCIcon,
+      IconContainer,
+      TextContainer,
+      TextContent,
+      ButtonContainer,
+      MainButton,
+    },
+    props: {
+      backgroundColor: {
+        type: String,
+        default: 'green',
+        required: false,
+      },
+      textColor: {
+        type: String,
+        default: 'white',
+        required: false,
+      },
+      iconName: {
+        type: String,
+        default: 'checkmark',
+        required: false,
+      },
+      mainText: {
+        type: String,
+        required: true,
+      },
+      buttonText: {
+        type: String,
+        required: true,
+      },
+      isOpen: {
+        type: Boolean,
+        default: false,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        theme,
+        showBanner: false,
+      }
+    },
+    watch: {
+      isOpen(newVal) {
+        if (newVal) {
+          this.showBanner = true
+          setTimeout(() => {
+            this.showBanner = false
+            this.$emit('on-close')
+          }, 10000)
+        }
+      },
+    },
+  }
+</script>

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

@@ -52,7 +52,9 @@
       props.isDisabled
         ? props.theme.colors.disabled
         : props.customColor
-        ? props.customColor
+        ? props.theme.colors[props.customColor]
+          ? props.theme.colors[props.customColor]
+          : props.customColor
         : props.theme.colors.yellow};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
@@ -81,7 +83,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 15px;
+    padding: 0 14px;
   `
 
   const IconContainerAttrs = {

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

@@ -5,13 +5,14 @@
       :custom-color="customColor"
       :data-id="dataId"
       :font-color="fontColor"
+      :height="height"
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
       :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>
@@ -43,12 +44,19 @@
     customColor: String,
     fontColor: String,
     noWrap: Boolean,
+    height: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
+    display: flex;
+    justify-content: center;
     padding: 7px 15px;
-    font-size: 13px;
+    font-size: 14px;
     color: ${(props) =>
-      props.fontColor ? props.fontColor : props.theme.colors.white};
+      props.isDisabled
+        ? props.theme.colors.white
+        : props.fontColor
+        ? props.fontColor
+        : props.theme.colors.white};
     background-color: ${(props) =>
       props.isDisabled
         ? props.theme.colors.disabled
@@ -67,6 +75,7 @@
     user-select: none;
     ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
     ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
+    height: ${(props) => props.height};
 
     &:hover {
       opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
@@ -112,6 +121,11 @@
         default: null,
         type: String,
       },
+      iconColor: {
+        required: false,
+        default: '',
+        type: String,
+      },
       text: {
         required: true,
         type: String,
@@ -136,6 +150,11 @@
         default: null,
         type: String,
       },
+      height: {
+        required: false,
+        default: 'auto',
+        type: String,
+      },
       id: {
         required: false,
         default: null,

package/src/components/icon/index.vue

@@ -35,6 +35,7 @@
     },
     name: {
       required: true,
+      type: String,
     },
     color: {
       required: false,

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
       },
     },
   }