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

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

@@ -100,7 +100,7 @@
 
   import Icon from '../../icon'
   import styled from 'vue3-styled-components'
-  import Theme from '@/assets/theme'
+  import Theme from '../../../assets/theme'
 
   const PageContainer = styled.div`
     position: relative;
@@ -158,15 +158,17 @@
     overflow: visible;
     min-width: ${(props) => props.minWidth || 'initial'};
 
-    &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.customColor
-          ? props.customColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover.backgroundColor};
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background-color: ${(props) =>
+          props.isDisabled
+            ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+                .disabled.backgroundColor
+            : props.customColor
+            ? props.customColor
+            : props.theme.mainButton[props.appTheme][props.type][props.variant]
+                .hover.backgroundColor};
+      }
     }
 
     &:active {

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

@@ -1,5 +1,5 @@
 <template>
-  <PageContainer>
+  <PageContainer :height="height" :width="width">
     <ButtonContainer
       :id="id"
       :app-theme="appTheme"
@@ -51,7 +51,10 @@
   import Icon from '../../icon'
   import theme from '../../../assets/theme'
 
-  const PageContainer = styled.div``
+  const PageContainer = styled('div', { height: String, width: String })`
+    height: ${(props) => props.height};
+    width: ${(props) => props.width};
+  `
 
   const ButtonAttrs = {
     type: String,
@@ -105,13 +108,16 @@
     height: ${(props) => props.height};
     line-height: 1;
     width: ${(props) => props.width};
-    &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover.backgroundColor};
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background-color: ${(props) =>
+          props.isDisabled
+            ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+                .disabled.backgroundColor
+            : props.theme.mainButton[props.appTheme][props.type][props.variant]
+                .hover.backgroundColor};
+      }
     }
 
     &:active {

package/src/components/infoCard/index.vue

@@ -10,15 +10,13 @@
     :padding="padding"
     :preset-styles="presetStyles"
   >
-    <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>
+    <RCIcon
+      :color="iconColor ? iconColor : presetStyles.iconColor"
+      data-test-id="info_card_icon"
+      :hovered-color="iconColor ? iconColor : presetStyles.iconColor"
+      :name="getIconName()"
+      size="18px"
+    />
     <TextContainer data-test-id="info_card_text_container">
       <slot></slot>
     </TextContainer>
@@ -67,23 +65,12 @@
     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: {
@@ -141,16 +128,6 @@
         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,7 +25,6 @@
               : 'eturnityGrey'
           "
           :font-size="fontSize"
-          :font-weight="labelFontWeight"
           >{{ label }}
           <IsRequiredLabelStar v-if="isRequiredLabel" />
           <OptionalLabel v-if="labelOptional">
@@ -288,14 +287,14 @@
     overflow: hidden;`}
   `
 
-  const labelAttrs = { fontSize: String, fontColor: String, fontWeight: String }
+  const labelAttrs = { fontSize: String, fontColor: 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: ${(props) => props.fontWeight};
+    font-weight: 700;
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
@@ -540,11 +539,6 @@
       label: {
         required: false,
       },
-      labelFontWeight: {
-        required: false,
-        default: '700',
-        type: String,
-      },
       isRequiredLabel: {
         required: false,
         default: false,

package/src/components/modals/modal/index.vue

@@ -5,13 +5,17 @@
     :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
     class="rc-modal-wrapper"
+    :disable-default-media-query="disableDefaultMediaQuery"
     :full-screen="fullScreen"
     :is-open="isOpen"
     :position="position"
   >
     <ModalContainer
       v-if="isOpen"
+      :disable-default-media-query="disableDefaultMediaQuery"
       :is-loading="isLoading"
+      :max-width="maxWidth"
+      :modal-container-alignment="modalContainerAlignment"
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
@@ -51,6 +55,7 @@
     position: String,
     addPaddingTop: Boolean,
     fullScreen: Boolean,
+    disableDefaultMediaQuery: Boolean,
   }
   const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
@@ -69,22 +74,30 @@
   overflow: auto;
   padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
-    @media (max-width: 425px) {
+  ${(props) =>
+    !props.disableDefaultMediaQuery &&
+    `@media (max-width: 425px) {
       background: white;
-    }
+    }`}
   `
 
-  const modalContainerAttrs = { overflow: String, isLoading: Boolean }
+  const modalContainerAttrs = {
+    overflow: String,
+    isLoading: Boolean,
+    disableDefaultMediaQuery: Boolean,
+    maxWidth: String,
+    modalContainerAlignment: Object,
+  }
   const ModalContainer = styled('div', modalContainerAttrs)`
-    align-self: center;
-    justify-self: center;
+    align-self: ${(props) => props.modalContainerAlignment.alignSelf};
+    justify-self: ${(props) => props.modalContainerAlignment.justifySelf};
     position: relative;
     box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
     background: white;
     margin: 0 auto;
     overflow: ${(props) => props.overflow};
-    max-width: 95%;
+    max-width: ${(props) => props.maxWidth};
     max-height: 95%;
     min-width: ${(props) => (props.isLoading ? '400px' : '100px')};
     min-height: ${(props) => (props.isLoading ? '500px' : '100px')};
@@ -110,20 +123,24 @@
       right: 20px;
       top: 20px;
 
-      @media (max-width: 425px) {
-        right: 14px;
-        top: 12px;
-        background: white;
-        position: fixed;
-        z-index: 99;
-      }
+      ${(props) =>
+        !props.disableDefaultMediaQuery &&
+        `@media (max-width: 425px) {
+          right: 14px;
+          top: 12px;
+          background: white;
+          position: fixed;
+          z-index: 99;
+        }`}
     }
 
-    @media (max-width: 425px) {
-      width: 100%;
-      height: 100%;
-      box-shadow: none;
-    }
+    ${(props) =>
+      !props.disableDefaultMediaQuery &&
+      `@media (max-width: 425px) {
+        width: 100%;
+        height: 100%;
+        box-shadow: none;
+      }`}
   `
 
   export default {
@@ -138,22 +155,27 @@
     props: {
       isOpen: {
         required: true,
+        type: Boolean,
         default: false,
       },
       isLoading: {
         required: false,
+        type: Boolean,
         default: false,
       },
       hideClose: {
         required: false,
+        type: Boolean,
         default: false,
       },
       backdrop: {
         required: false,
+        type: String,
         default: 'white',
       },
       position: {
         required: false,
+        type: String,
         default: 'fixed',
       },
       stopPropagation: {
@@ -173,6 +195,21 @@
         type: Boolean,
         default: true,
       },
+      maxWidth: {
+        type: String,
+        default: '95%',
+      },
+      disableDefaultMediaQuery: {
+        type: Boolean,
+        default: false,
+      },
+      modalContainerAlignment: {
+        type: Object,
+        default: () => ({
+          alignSelf: 'center',
+          justifySelf: 'center',
+        }),
+      },
     },
     setup() {
       const modalRef = ref(null)

package/src/components/styledText/index.js

@@ -1,76 +0,0 @@
-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