Merge pull request #399 from eduzz/feature/typography-bem-again

Feature/typography bem again
eduzz · Aug 9, 2022 · aca33d4 · aca33d4
2 parents e056886 + 1d51f6a
commit aca33d4
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 28 deletions.
diff --git a/src/pages/ui-components/Overlay/index.tsx b/src/pages/ui-components/Overlay/index.tsx
@@ -17,7 +17,7 @@ export interface OverlayProps {
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 
-const Overlay = ({ className, visible, color = 'low', children, ...rest }: OverlayProps & StyledProp) => {
+const Overlay = ({ className, visible, color = 'low', children, underTopbar, ...rest }: OverlayProps & StyledProp) => {
   const { disableScroll, enableScroll } = useScrollBlock();
 
   React.useEffect(() => {
@@ -34,7 +34,11 @@ const Overlay = ({ className, visible, color = 'low', children, ...rest }: Overl
     <div
       aria-hidden='true'
       tabIndex={-1}
-      className={cx(className, { '--overlay-visible': visible, '--overlay-color-high': color === 'high' })}
+      className={cx(className, {
+        '--hts-visible': visible,
+        '--hts-color-high': color === 'high',
+        '--hts-under-topbar': underTopbar
+      })}
       {...rest}
     >
       {children}
@@ -43,29 +47,32 @@ const Overlay = ({ className, visible, color = 'low', children, ...rest }: Overl
 };
 
 export default styled(Overlay, {
-  label: 'houston-overlay',
-  shouldForwardProp: propName => propName !== 'underTopbar'
+  label: 'houston-overlay'
 })(
-  ({ theme, underTopbar }) => css`
+  ({ theme }) => css`
     background: ${theme.hexToRgba(theme.neutralColor.low.pure, theme.opacity.level[6])};
     width: 100vw;
     height: 100vh;
     position: fixed;
     top: 0;
     left: 0;
-    z-index: ${underTopbar ? 104 : 106};
+    z-index: 106;
     opacity: ${theme.opacity.level[0]};
     visibility: hidden;
     inset: 0;
     backdrop-filter: blur(${theme.pxToRem(8)}rem);
 
-    &.--overlay-color-high {
+    &.--hts-color-high {
       background: ${theme.hexToRgba(theme.neutralColor.high.pure, theme.opacity.level[6])};
     }
 
-    &.--overlay-visible {
+    &.--hts-visible {
       opacity: 1;
       visibility: visible;
     }
+
+    &.--hts-under-topbar {
+      z-index: 104;
+    }
   `
 );
diff --git a/src/pages/ui-components/Typography/index.tsx b/src/pages/ui-components/Typography/index.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 
-import { HoustonThemeProps } from '@eduzz/houston-styles';
-import styled, { css, StyledProp } from '@eduzz/houston-styles/styled';
+import styled, { HoustonThemeProps, css, cx, StyledProp } from '@eduzz/houston-styles';
 import type { HoustonTokens } from '@eduzz/houston-tokens';
 
 import nestedComponent from '../utils/nestedComponent';
@@ -34,6 +33,35 @@ export type TypographyTags =
 
 export type TypographyMargin = keyof Omit<HoustonTokens['spacing'], 'fn' | 'squish' | 'inline' | 'stack' | 'inset'>;
 
+const SUPPORTED_COLORS: TypographyColors[] = [
+  'primary',
+  'inherit',
+  'neutralColor.low.pure',
+  'neutralColor.low.light',
+  'neutralColor.low.medium',
+  'neutralColor.low.dark',
+  'neutralColor.high.pure',
+  'neutralColor.high.light',
+  'neutralColor.high.medium',
+  'neutralColor.high.dark'
+];
+
+const SUPPORTED_MARGINS: TypographyMargin[] = [
+  'quarck',
+  'nano',
+  'xxxs',
+  'xxs',
+  'xs',
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  'xxl',
+  'xxxl',
+  'huge',
+  'giant'
+];
+
 export interface TypographyProps extends StyledProp, React.HTMLAttributes<HTMLElement> {
   id?: string;
   /**
@@ -63,10 +91,35 @@ export interface TypographyProps extends StyledProp, React.HTMLAttributes<HTMLEl
 
 const Typography = React.forwardRef<any, TypographyProps>(({ as: Tag = 'p', className, ...props }, ref) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { size, lineHeight, weight, marginBottom, color, ...forwardProps } = props;
-  return <Tag ref={ref} className={className} {...forwardProps} />;
+  const {
+    size = 'xs',
+    lineHeight = 'md',
+    weight = 'regular',
+    color = 'neutralColor.low.pure',
+    marginBottom = false,
+    ...forwardProps
+  } = props;
+  const margin: TypographyMargin | null = marginBottom === true ? 'nano' : marginBottom === false ? null : marginBottom;
+
+  return (
+    <Tag
+      ref={ref}
+      className={cx(className, {
+        [`--hst-size-${size}`]: true,
+        [`--hst-line-${lineHeight}`]: true,
+        [`--hst-weight-${weight}`]: true,
+        [`--hts-margin-${margin}`]: !!margin,
+        [`--hst-color-${getColorName(color)}`]: true
+      })}
+      {...forwardProps}
+    />
+  );
 });
 
+function getColorName(color: string) {
+  return color.replace(/\./gim, '-');
+}
+
 function getColor(theme: HoustonThemeProps, color: TypographyColors) {
   if (color === 'inherit') {
     return 'inherit';
@@ -86,22 +139,51 @@ function getColor(theme: HoustonThemeProps, color: TypographyColors) {
   return result;
 }
 
-const TypographyWrapper = styled(Typography)`
-  ${({ theme, size = 'xs', lineHeight = 'md', weight = 'regular', color = 'neutralColor.low.pure', marginBottom }) => {
-    return css`
-      margin: 0;
-      font-size: ${theme.font.size[size]};
-      font-weight: ${theme.font.weight[weight]};
-      line-height: ${theme.line.height[lineHeight]};
-      color: ${getColor(theme, color)};
-
-      ${marginBottom &&
-      css`
-        margin-bottom: ${typeof marginBottom === 'boolean' ? theme.spacing.nano : theme.spacing[marginBottom]};
-      `}
-    `;
-  }}
-`;
+const TypographyWrapper = styled(Typography, { label: 'houston-typography' })(({ theme }) => {
+  return css`
+    margin: 0;
+
+    ${Object.keys(theme.font.size).map(
+      size => css`
+        &.--hst-size-${size} {
+          font-size: ${theme.font.size[size]};
+        }
+      `
+    )}
+
+    ${Object.keys(theme.line.height).map(
+      lineHeight => css`
+        &.--hst-line-${lineHeight} {
+          line-height: ${theme.line.height[lineHeight]};
+        }
+      `
+    )}
+
+    ${Object.keys(theme.font.weight).map(
+      weight => css`
+        &.--hst-weight-${weight} {
+          font-weight: ${theme.font.weight[weight]};
+        }
+      `
+    )}
+
+    ${SUPPORTED_COLORS.map(
+      color => css`
+        &.--hst-color-${getColorName(color)} {
+          color: ${getColor(theme, color)};
+        }
+      `
+    )}
+
+    ${SUPPORTED_MARGINS.map(
+      margin => css`
+        &.--hst-margin-${margin} {
+          margin-bottom: ${theme.spacing[margin]};
+        }
+      `
+    )}
+  `;
+});
 
 export default nestedComponent(TypographyWrapper, {
   Caption,