@eturnity/eturnity_reusable_components 9.3.1--EPDM-16195.2 → 9.3.1-EPDM-16285.0

package/src/components/infoCard/index.vue

@@ -10,13 +10,15 @@
     :padding="padding"
     :preset-styles="presetStyles"
   >
-    <RCIcon
-      :color="iconColor ? iconColor : presetStyles.iconColor"
-      data-test-id="info_card_icon"
-      :hovered-color="iconColor ? iconColor : presetStyles.iconColor"
-      :name="getIconName()"
-      size="18px"
-    />
+    <IconWrapper :size="iconWrapperSize ? iconWrapperSize : iconSize">
+      <RCIcon
+        :color="iconColor ? iconColor : presetStyles.iconColor"
+        data-test-id="info_card_icon"
+        :hovered-color="iconColor ? iconColor : presetStyles.iconColor"
+        :name="getIconName()"
+        :size="iconSize"
+      />
+    </IconWrapper>
     <TextContainer data-test-id="info_card_text_container">
       <slot></slot>
     </TextContainer>
@@ -65,12 +67,23 @@
     width: 100%;
   `
 
+  const IconWrapper = styled('div', {
+    size: String,
+  })`
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `
+
   export default {
     name: 'InfoCard',
     components: {
       RCIcon,
       InfoContainer,
       TextContainer,
+      IconWrapper,
     },
     props: {
       type: {
@@ -128,6 +141,16 @@
         type: String,
         default: '',
       },
+      iconSize: {
+        required: false,
+        type: String,
+        default: '18px',
+      },
+      iconWrapperSize: {
+        required: false,
+        type: String,
+        default: null,
+      },
     },
     computed: {
       isInfoSimple() {

package/src/components/inputs/select/index.vue

@@ -25,6 +25,7 @@
               : 'eturnityGrey'
           "
           :font-size="fontSize"
+          :font-weight="labelFontWeight"
           >{{ label }}
           <IsRequiredLabelStar v-if="isRequiredLabel" />
           <OptionalLabel v-if="labelOptional">
@@ -287,14 +288,14 @@
     overflow: hidden;`}
   `
 
-  const labelAttrs = { fontSize: String, fontColor: String }
+  const labelAttrs = { fontSize: String, fontColor: String, fontWeight: String }
   const InputLabel = styled('div', labelAttrs)`
     color: ${(props) =>
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     font-size: ${(props) => props.fontSize};
-    font-weight: 700;
+    font-weight: ${(props) => props.fontWeight};
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
@@ -539,6 +540,11 @@
       label: {
         required: false,
       },
+      labelFontWeight: {
+        required: false,
+        default: '700',
+        type: String,
+      },
       isRequiredLabel: {
         required: false,
         default: false,

package/src/components/styledText/index.js

@@ -0,0 +1,76 @@
+import styled from 'vue3-styled-components'
+
+const TEXT_VARIANTS = {
+  HEADING_MEDIUM: 'heading-medium',
+  HEADING_LARGE: 'heading-large',
+  BODY_SMALL: 'body-small',
+  BODY_MEDIUM: 'body-medium',
+  BODY_LARGE: 'body-large',
+  SUBHEADING_SMALL: 'subheading-small',
+  SUBHEADING_MEDIUM: 'subheading-medium',
+  SUBHEADING_LARGE: 'subheading-large',
+}
+
+const textVariants = {
+  [TEXT_VARIANTS.HEADING_MEDIUM]: {
+    fontSize: '20px',
+    fontWeight: '500',
+    lineHeight: '130%',
+    letterSpacing: '-0.3px',
+  },
+  [TEXT_VARIANTS.HEADING_LARGE]: {
+    fontSize: '24px',
+    fontWeight: '500',
+    lineHeight: '130%',
+    letterSpacing: '-0.36px',
+  },
+  [TEXT_VARIANTS.SUBHEADING_SMALL]: {
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: '140%',
+    letterSpacing: '-0.12px',
+  },
+  [TEXT_VARIANTS.SUBHEADING_MEDIUM]: {
+    fontSize: '14px',
+    fontWeight: '500',
+    lineHeight: '140%',
+    letterSpacing: '-0.14px',
+  },
+  [TEXT_VARIANTS.SUBHEADING_LARGE]: {
+    fontSize: '16px',
+    fontWeight: '500',
+    lineHeight: '140%',
+    letterSpacing: '-0.16px',
+  },
+  [TEXT_VARIANTS.BODY_SMALL]: {
+    fontSize: '12px',
+    fontWeight: '400',
+    lineHeight: '150%',
+  },
+  [TEXT_VARIANTS.BODY_MEDIUM]: {
+    fontSize: '14px',
+    fontWeight: '400',
+    lineHeight: '150%',
+  },
+  [TEXT_VARIANTS.BODY_LARGE]: {
+    fontSize: '16px',
+    fontWeight: '400',
+    lineHeight: '150%',
+  },
+}
+
+const StyledText = styled('div', {
+  fontColor: String,
+  type: String,
+})`
+  color: ${(props) => props.fontColor};
+  font-style: normal;
+
+  font-size: ${(props) => textVariants[props.type]?.fontSize ?? '14px'};
+  font-weight: ${(props) => textVariants[props.type]?.fontWeight ?? '400'};
+  line-height: ${(props) => textVariants[props.type]?.lineHeight ?? '150%'};
+  letter-spacing: ${(props) =>
+    textVariants[props.type]?.letterSpacing ?? 'normal'};
+`
+
+export default StyledText

package/src/components/tables/mainTable/index.vue

@@ -54,8 +54,9 @@
 
   const TableTitle = styled.div`
     margin-bottom: 16px;
-    font-weight: 500;
+    font-weight: bold;
     font-size: 14px;
+    text-transform: uppercase;
   `
 
   const tableScrollProps = {
@@ -65,6 +66,12 @@
   const TableScroll = styled('div', tableScrollProps)`
     max-width: 100%;
     height: auto;
+    ${(props) =>
+      props.isPositionAbsolute &&
+      `
+    position: absolute;
+    left: -20px;
+  `}
   `
 
   const wrapperAttrs = { fullWidth: Boolean, isOverflowHidden: Boolean }
@@ -104,24 +111,15 @@
 
   const TableContainer = styled('table', containerAttrs)`
     width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    border-right: ${(props) =>
-      '1px solid ' + props.theme.semanticColors.grey[200]};
-    border-left: ${(props) =>
-      '1px solid ' + props.theme.semanticColors.grey[200]};
-    border-top: ${(props) =>
-      '1px solid ' + props.theme.semanticColors.grey[200]};
-    border-radius: 4px;
-    font-size: 14px;
+    border-collapse: collapse;
+    border: none;
+    font-size: 13px;
 
     thead {
-      font-weight: 500;
-      line-height: 140%;
+      font-weight: bold;
 
       tr {
         border-bottom: none !important;
-        background-color: ${(props) => props.theme.semanticColors.grey[100]};
       }
     }
 
@@ -130,8 +128,6 @@
     }
 
     tbody {
-      font-weight: 400;
-      line-height: 150%;
       tr {
         &:hover,
         td.hovered-column {
@@ -152,23 +148,16 @@
         }
 
         td {
-          height: 48px;
-        }
-
-        .drag-placeholder {
-          min-height: 48px;
-          min-width: 20px;
-          border-bottom: 1px solid
-            ${(props) => props.theme.semanticColors.grey[200]};
+          height: 40px;
         }
       }
     }
 
     th {
-      padding: 8px 16px;
+      padding: 11px 15px;
       background-color: ${(props) => props.theme.semanticColors.grey[100]};
       border-bottom: 1px solid
-        ${(props) => props.theme.semanticColors.grey[200]};
+        ${(props) => props.theme.semanticColors.teal[100]};
       cursor: auto;
       height: 40px;
       font-weight: 500;
@@ -262,10 +251,6 @@
         visibility: hidden;
       }
 
-      &.footer {
-        background-color: ${(props) => props.theme.colors.grey5};
-      }
-
       &.footer,
       &.total-row {
         td {
@@ -298,8 +283,6 @@
         flex-wrap: nowrap;
         background-color: ${(props) => props.theme.colors.white};
         vertical-align: middle;
-        border-bottom: 1px solid
-          ${(props) => props.theme.semanticColors.grey[200]};
       }
 
       .arrow-container {
@@ -318,11 +301,6 @@
         .arrow-container {
           border-bottom: none;
         }
-
-        .drag-container,
-        .icons-container {
-          border-bottom: none !important;
-        }
       }
 
       &:hover {
@@ -348,14 +326,12 @@
         display: table-cell;
         width: 20px;
         min-width: 20px;
-        height: 48px;
-        border-bottom: ${(props) =>
-          '1px solid ' + props.theme.semanticColors.grey[200]};
+        height: 40px;
       }
 
       .drag-wrapper {
         width: 16px;
-        height: 46px;
+        height: 36px;
         display: grid;
         align-items: center;
         justify-items: center;
@@ -401,9 +377,9 @@
     }
 
     input {
-      font-size: 14px;
+      font-size: 13px;
       padding: 5px 10px;
-      background: ${(props) => props.theme.colors.white};
+      background: #fff;
       height: unset;
 
       &:focus {