@eturnity/eturnity_reusable_components 8.40.8 → 8.46.1-EPDM-13987.0

package/src/assets/svgIcons/polygon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 2C13.5523 2 14 2.44772 14 3C14 3.36979 13.7984 3.69123 13.5 3.86426V12.1348C13.7987 12.3077 14 12.63 14 13C14 13.5523 13.5523 14 13 14C12.5598 14 12.1863 13.7154 12.0527 13.3203L3.74902 11.6592C3.56577 11.8672 3.29906 12 3 12C2.44772 12 2 11.5523 2 11C2 10.63 2.20133 10.3077 2.5 10.1348V5.86426C2.20157 5.69123 2 5.36979 2 5C2 4.44772 2.44772 4 3 4C3.29879 4 3.56578 4.1321 3.74902 4.33984L12.0527 2.67871C12.1866 2.28404 12.5601 2 13 2ZM3.94629 5.31934C3.86817 5.55092 3.70817 5.74357 3.5 5.86426V10.1348C3.70785 10.2551 3.8679 10.4477 3.94629 10.6787L12.25 12.3389C12.3214 12.2579 12.406 12.1892 12.5 12.1348V3.86426C12.4056 3.8095 12.3206 3.74069 12.249 3.65918L3.94629 5.31934Z" fill="black"/>
+</svg>

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

@@ -118,6 +118,7 @@
   const ButtonWrapper = styled('div', ButtonAttrs)`
     position: relative;
     display: grid;
+    align-content: center
     grid-template-columns: auto 1fr auto;
     height: ${({ height }) => height};
     font-size: ${(props) =>

package/src/components/infoText/templates/iconTextContent.vue

@@ -1,11 +1,13 @@
 <template>
   <Container data-test-id="iconTextContent_container">
-    <RCIcon
-      :color="iconColor"
-      data-test-id="iconTextContent_icon"
-      :name="iconName"
-      :size="iconSize"
-    />
+    <IconWrapper :icon-padding="iconPadding">
+      <RCIcon
+        :color="iconColor"
+        data-test-id="iconTextContent_icon"
+        :name="iconName"
+        :size="iconSize"
+      />
+    </IconWrapper>
     <TextWrapper
       data-test-id="iconTextContent_text"
       :font-color="fontColor"
@@ -64,12 +66,19 @@
     vertical-align: middle;
   `
 
+  const IconWrapper = styled('div', {
+    iconPadding: String,
+  })`
+    padding: ${(props) => props.iconPadding};
+  `
+
   export default {
     name: 'IconTextContent',
     components: {
       Container,
       TextWrapper,
       RCIcon,
+      IconWrapper,
     },
     props: {
       iconName: {
@@ -83,13 +92,18 @@
       iconSize: {
         type: String,
         required: false,
-        default: '18px',
+        default: '16px',
       },
       iconColor: {
         type: String,
         required: false,
         default: '',
       },
+      iconPadding: {
+        type: String,
+        required: false,
+        default: '3px',
+      },
       fontSize: {
         type: String,
         required: false,

package/src/components/pageTitle/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <TitleWrap data-test-id="page_wrapper" :has-info-text="!!infoText">
+  <TitleWrap
+    data-test-id="page_wrapper"
+    :has-info-text="!!infoText"
+    :no-margin="noMargin"
+  >
     <TitleText
       :color="color"
       data-test-id="page_title_text"
@@ -31,21 +35,27 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../infoText'
 
-  const wrapAttrs = { hasInfoText: Boolean }
+  const wrapAttrs = { hasInfoText: Boolean, noMargin: Boolean }
   const TitleWrap = styled('div', wrapAttrs)`
     display: grid;
     align-items: center;
     grid-gap: 12px;
     grid-template-columns: ${(props) =>
       props.hasInfoText ? 'auto auto 1fr' : '1fr'};
-    margin-bottom: 20px;
+    margin-bottom: ${(props) => (props.noMargin ? '0px' : '20px')};
   `
 
   const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
   const TitleText = styled('span', titleAttrs)`
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
-    font-weight: 600;
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
+    font-weight: 500;
+    line-height: 130%;
+    font-size: ${(props) =>
+      props.fontSize === 'large'
+        ? '24px'
+        : props.fontSize === 'small'
+        ? '18px'
+        : '20px'};
   `
 
   export default {
@@ -68,7 +78,7 @@
       fontSize: {
         required: false,
         type: String,
-        default: '',
+        default: 'medium',
       },
       uppercase: {
         required: false,
@@ -85,6 +95,11 @@
         type: String,
         default: 'center',
       },
+      noMargin: {
+        required: false,
+        type: Boolean,
+        default: false,
+      },
     },
   }
 </script>