chore(deps): convert Typeography to transient props

bigcommerce · Jan 24, 2024 · 634d6e2 · 634d6e2
1 parent fb5f9d5
commit 634d6e2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 28 deletions.
diff --git a/packages/big-design/src/components/Typography/Typography.tsx b/packages/big-design/src/components/Typography/Typography.tsx
@@ -1,5 +1,7 @@
 import React, { memo } from 'react';
 
+import { withTransients } from '../../utils';
+
 import {
   h4Styles as _h4Styles,
   StyledH0,
@@ -28,34 +30,34 @@ export const StyleableHR = StyledHR;
 
 // Public
 export const Text: React.FC<TextProps> = memo(({ className, style, ...props }) => (
-  <StyleableText {...props} />
+  <StyleableText {...withTransients(props)} />
 ));
 export const Small: React.FC<TextProps> = memo(({ className, style, ...props }) => (
-  <StyleableSmall {...props} />
+  <StyleableSmall {...withTransients(props)} />
 ));
 
 export const HR: React.FC<HRProps> = memo(({ className, style, ...props }) => (
-  <StyleableHR {...props} />
+  <StyleableHR {...withTransients(props)} />
 ));
 
 export const H0: React.FC<HeadingProps> = memo(({ className, style, as, ...props }) => (
-  <StyleableH0 as={getHeadingTag('h1', as)} {...props} />
+  <StyleableH0 as={getHeadingTag('h1', as)} {...withTransients(props)} />
 ));
 
 export const H1: React.FC<HeadingProps> = memo(({ className, style, as, ...props }) => (
-  <StyleableH1 as={getHeadingTag('h1', as)} {...props} />
+  <StyleableH1 as={getHeadingTag('h1', as)} {...withTransients(props)} />
 ));
 
 export const H2: React.FC<HeadingProps> = memo(({ className, style, as, ...props }) => (
-  <StyleableH2 as={getHeadingTag('h2', as)} {...props} />
+  <StyleableH2 as={getHeadingTag('h2', as)} {...withTransients(props)} />
 ));
 
 export const H3: React.FC<HeadingProps> = memo(({ className, style, as, ...props }) => (
-  <StyleableH3 as={getHeadingTag('h3', as)} {...props} />
+  <StyleableH3 as={getHeadingTag('h3', as)} {...withTransients(props)} />
 ));
 
 export const H4: React.FC<HeadingProps> = memo(({ className, style, as, ...props }) => (
-  <StyleableH4 as={getHeadingTag('h4', as)} {...props} />
+  <StyleableH4 as={getHeadingTag('h4', as)} {...withTransients(props)} />
 ));
 
 const getHeadingTag = (defaultTag: HeadingTag, tag?: HeadingTag): HeadingTag => {

diff --git a/packages/big-design/src/components/Typography/styled.tsx b/packages/big-design/src/components/Typography/styled.tsx
@@ -2,62 +2,63 @@ import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { ellipsis } from 'polished';
 import { css, styled } from 'styled-components';
 
-import { withMargins } from '../../mixins';
+import { MarginProps, withMargins } from '../../mixins';
+import { WithTransients } from '../../utils';
 
 import { HeadingProps, HRProps, TextProps, TypographyProps } from './types';
 
-const commonTextStyles = (props: TypographyProps) => css`
+const commonTextStyles = (props: WithTransients<TypographyProps>) => css`
   color: ${({ theme }) => (props.color ? theme.colors[props.color] : theme.colors.secondary70)};
   margin: 0 0 ${({ theme }) => theme.spacing.medium};
 
-  ${props.ellipsis && ellipsis()};
+  ${props.$ellipsis && ellipsis()};
 `;
 
-const textModifiers = (props: TextProps) => css`
+const textModifiers = (props: WithTransients<TextProps>) => css`
   ${({ theme }) =>
-    props.bold &&
+    props.$bold &&
     css`
       font-weight: ${theme.typography.fontWeight.semiBold};
     `}
 
   ${() =>
-    props.italic &&
+    props.$italic &&
     css`
       font-style: italic;
     `}
 
   ${() =>
-    props.underline &&
+    props.$underline &&
     css`
       text-decoration: underline;
     `}
 
   ${() =>
-    props.strikethrough &&
+    props.$strikethrough &&
     css`
       text-decoration: line-through;
     `}
 
   ${() =>
-    props.capitalize &&
+    props.$capitalize &&
     css`
       text-transform: capitalize;
     `}
 
   ${() =>
-    props.lowercase &&
+    props.$lowercase &&
     css`
       text-transform: lowercase;
     `}
 
   ${() =>
-    props.uppercase &&
+    props.$uppercase &&
     css`
       text-transform: uppercase;
     `}
 `;
 
-export const StyledH0 = styled.h1<HeadingProps>`
+export const StyledH0 = styled.h1<WithTransients<HeadingProps>>`
   ${(props) => commonTextStyles(props)};
   font-size: ${({ theme }) => theme.typography.fontSize.xxxLarge};
   font-weight: ${({ theme }) => theme.typography.fontWeight.extraLight};
@@ -66,7 +67,7 @@ export const StyledH0 = styled.h1<HeadingProps>`
   ${withMargins()};
 `;
 
-export const StyledH1 = styled.h1<HeadingProps>`
+export const StyledH1 = styled.h1<WithTransients<HeadingProps>>`
   ${(props) => commonTextStyles(props)};
   font-size: ${({ theme }) => theme.typography.fontSize.xxLarge};
   font-weight: ${({ theme }) => theme.typography.fontWeight.light};
@@ -75,15 +76,15 @@ export const StyledH1 = styled.h1<HeadingProps>`
   ${withMargins()};
 `;
 
-export const StyledH2 = styled.h2<HeadingProps>`
+export const StyledH2 = styled.h2<WithTransients<HeadingProps>>`
   ${(props) => commonTextStyles(props)};
   font-size: ${({ theme }) => theme.typography.fontSize.xLarge};
   font-weight: ${({ theme }) => theme.typography.fontWeight.regular};
   line-height: ${({ theme }) => theme.lineHeight.xLarge};
   ${withMargins()};
 `;
 
-export const StyledH3 = styled.h3<HeadingProps>`
+export const StyledH3 = styled.h3<WithTransients<HeadingProps>>`
   ${(props) => commonTextStyles(props)};
   font-size: ${({ theme }) => theme.typography.fontSize.large};
   font-weight: ${({ theme }) => theme.typography.fontWeight.regular};
@@ -92,7 +93,7 @@ export const StyledH3 = styled.h3<HeadingProps>`
   ${withMargins()};
 `;
 
-export const h4Styles = css`
+export const h4Styles = css<WithTransients<TypographyProps & MarginProps>>`
   ${(props) => commonTextStyles(props)};
   font-size: ${({ theme }) => theme.typography.fontSize.medium};
   font-weight: ${({ theme }) => theme.typography.fontWeight.semiBold};
@@ -101,11 +102,11 @@ export const h4Styles = css`
   ${withMargins()};
 `;
 
-export const StyledH4 = styled.h4<HeadingProps>`
+export const StyledH4 = styled.h4<WithTransients<HeadingProps>>`
   ${h4Styles};
 `;
 
-export const StyledText = styled.p<TextProps>`
+export const StyledText = styled.p<WithTransients<TextProps>>`
   ${(props) => commonTextStyles(props)}
   font-size: ${({ theme }) => theme.typography.fontSize.medium};
   font-weight: ${({ theme }) => theme.typography.fontWeight.regular};
@@ -119,7 +120,7 @@ export const StyledText = styled.p<TextProps>`
   ${withMargins()};
 `;
 
-export const StyledSmall = styled.p<TextProps>`
+export const StyledSmall = styled.p<WithTransients<TextProps>>`
   ${(props) => commonTextStyles(props)};
   color: ${({ color, theme }) => (color ? theme.colors[color] : theme.colors.secondary60)};
   font-size: ${({ theme }) => theme.typography.fontSize.small};
@@ -135,7 +136,7 @@ export const StyledSmall = styled.p<TextProps>`
   ${withMargins()};
 `;
 
-export const StyledHR = styled.hr<HRProps>`
+export const StyledHR = styled.hr<WithTransients<HRProps>>`
   ${withMargins()};
 
   border: 0;