From 634d6e2e0ff55ebda6bd668fb93e2f691ba034ee Mon Sep 17 00:00:00 2001 From: leeBigCommerce Date: Thu, 25 Jan 2024 09:52:52 +1100 Subject: [PATCH] chore(deps): convert Typeography to transient props --- .../src/components/Typography/Typography.tsx | 18 ++++---- .../src/components/Typography/styled.tsx | 41 ++++++++++--------- 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/packages/big-design/src/components/Typography/Typography.tsx b/packages/big-design/src/components/Typography/Typography.tsx index 378a57097..b34ad660b 100644 --- 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 = memo(({ className, style, ...props }) => ( - + )); export const Small: React.FC = memo(({ className, style, ...props }) => ( - + )); export const HR: React.FC = memo(({ className, style, ...props }) => ( - + )); export const H0: React.FC = memo(({ className, style, as, ...props }) => ( - + )); export const H1: React.FC = memo(({ className, style, as, ...props }) => ( - + )); export const H2: React.FC = memo(({ className, style, as, ...props }) => ( - + )); export const H3: React.FC = memo(({ className, style, as, ...props }) => ( - + )); export const H4: React.FC = memo(({ className, style, as, ...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 index 429429375..b26392bbb 100644 --- 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) => 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) => 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` +export const StyledH0 = styled.h1>` ${(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` ${withMargins()}; `; -export const StyledH1 = styled.h1` +export const StyledH1 = styled.h1>` ${(props) => commonTextStyles(props)}; font-size: ${({ theme }) => theme.typography.fontSize.xxLarge}; font-weight: ${({ theme }) => theme.typography.fontWeight.light}; @@ -75,7 +76,7 @@ export const StyledH1 = styled.h1` ${withMargins()}; `; -export const StyledH2 = styled.h2` +export const StyledH2 = styled.h2>` ${(props) => commonTextStyles(props)}; font-size: ${({ theme }) => theme.typography.fontSize.xLarge}; font-weight: ${({ theme }) => theme.typography.fontWeight.regular}; @@ -83,7 +84,7 @@ export const StyledH2 = styled.h2` ${withMargins()}; `; -export const StyledH3 = styled.h3` +export const StyledH3 = styled.h3>` ${(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` ${withMargins()}; `; -export const h4Styles = css` +export const h4Styles = css>` ${(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` +export const StyledH4 = styled.h4>` ${h4Styles}; `; -export const StyledText = styled.p` +export const StyledText = styled.p>` ${(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` ${withMargins()}; `; -export const StyledSmall = styled.p` +export const StyledSmall = styled.p>` ${(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` ${withMargins()}; `; -export const StyledHR = styled.hr` +export const StyledHR = styled.hr>` ${withMargins()}; border: 0;