@websolutespa/bom-mixer-ui 0.4.2 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-mixer-ui
 
+## 0.4.3
+
+### Patch Changes
+
+- Modified: Text added getFontVariantResponsive.
+
 ## 0.4.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -730,6 +730,34 @@ function getCssResponsive(props, defaultValue) {
   }
   return rules;
 }
+function getVariantResponsive(props, callback) {
+  const keys = ['variant', 'variantSm', 'variantMd', 'variantLg', 'variantXl'];
+  const theme = props.theme;
+  const mediaQuery = theme.mediaQuery;
+  return keys.map(key => {
+    const value = props[key];
+    if (value) {
+      const rule = callback(value, theme);
+      if (key !== 'variant') {
+        const size = key.replace('variant', '').toLowerCase();
+        // console.log('size', size, 'rule', rule);
+        return styled.css`@media(min-width: ${mediaQuery[size]}) {
+            ${rule}
+          }`;
+      } else {
+        return rule;
+      }
+    } else {
+      return undefined;
+    }
+  }).filter(Boolean);
+}
+function getFontVariantResponsive(props, callback) {
+  return getVariantResponsive(props, (key, theme) => {
+    const font = theme.font[key];
+    return font ? callback(key, font) : '';
+  });
+}
 function getAspectResponsive(props, defaultValue) {
   if (defaultValue === void 0) {
     defaultValue = {};
@@ -4514,25 +4542,17 @@ const CssUl = styled.css`
   }
 `;
 const StyledText = styled__default.default.div`
-  ${props => {
-  const variant = props.variant;
-  const font = variant && props.theme.font[variant];
-  // console.log(props.children, variant, size);
-  return styled.css`
-      ${font ? styled.css`
-        font-family: var(--font-${variant}-family, var(--base-font-family));
-        // font-size: var(--font-${variant}-size, 1rem);
-        ${font.size && typeof font.size === 'object' ? eachMedia(props, key => `font-size: var(--font-${variant}-size-${key});`) : `font-size: var(--font-${variant}-size, 1rem)`};
-        font-weight: var(--font-${variant}-font-weight, inherit);
-        line-height: var(--font-${variant}-line-height, 1);
-      ` : ''}
-      ${props.gradient ? styled.css`
-        background: -webkit-linear-gradient(0deg, var(--color-secondary-500), var(--color-primary-500));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      ` : ''}
-    `;
-}}
+  ${props => getFontVariantResponsive(props, (variant, font) => styled.css`
+    ${font.family ? styled.css`font-family: var(--font-${variant}-family, var(--base-font-family));` : ''}
+    ${font.size ? styled.css`font-size: var(--font-${variant}-size, 1rem);` : ''}
+    ${font.lineHeight ? styled.css`line-height: var(--font-${variant}-line-height, 1);` : ''}
+    ${font.fontWeight ? styled.css`font-weight: var(--font-${variant}-font-weight, inherit);` : ''}
+  `)};
+  ${props => props.gradient ? styled.css`
+    background: -webkit-linear-gradient(0deg, var(--color-secondary-500), var(--color-primary-500));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  ` : ''}
   ${CssH}
   ${CssA}
   ${CssP}
@@ -20708,9 +20728,11 @@ exports.getAspectResponsive = getAspectResponsive;
 exports.getChildsByType = getChildsByType;
 exports.getContainer = getContainer;
 exports.getCssResponsive = getCssResponsive;
+exports.getFontVariantResponsive = getFontVariantResponsive;
 exports.getGrid = getGrid;
 exports.getShortName = getShortName;
 exports.getVariant = getVariant;
+exports.getVariantResponsive = getVariantResponsive;
 exports.hasChildOfType = hasChildOfType;
 exports.hypenize = hypenize;
 exports.isChildElement = isChildElement;