feat: Add typography props to Text (#188)

pancakeswap · Feb 19, 2021 · 9fb672d · 9fb672d
1 parent e3ab69a
commit 9fb672d
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 22 deletions.
diff --git a/src/__tests__/components/alert.test.tsx b/src/__tests__/components/alert.test.tsx
@@ -29,13 +29,13 @@ it("renders correctly", () => {
           class="sc-gKsewC bkaskd"
         >
           <div
-            class="sc-gsTCUz cFAeYW"
+            class="sc-gsTCUz TrMyr"
             color="text"
           >
             Alert title
           </div>
           <p
-            class="sc-gsTCUz doXHqk"
+            class="sc-gsTCUz fgiAxh"
             color="text"
           >
             Description

diff --git a/src/__tests__/components/heading.test.tsx b/src/__tests__/components/heading.test.tsx
@@ -7,7 +7,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <h2
-        class="sc-bdfBwQ sc-gsTCUz iEFWFe euWWbB"
+        class="sc-bdfBwQ sc-gsTCUz gWEhOj euWWbB"
         color="text"
       >
         Title

diff --git a/src/__tests__/components/link.test.tsx b/src/__tests__/components/link.test.tsx
@@ -7,7 +7,7 @@ it("renders link correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <a
-        class="sc-bdfBwQ sc-gsTCUz cxXgLd djpNeP"
+        class="sc-bdfBwQ sc-gsTCUz eiaRqE djpNeP"
         color="primary"
         href="https://pancakeswap.finance"
       >
@@ -22,7 +22,7 @@ it("renders link external link correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <a
-        class="sc-bdfBwQ sc-gsTCUz cxXgLd djpNeP"
+        class="sc-bdfBwQ sc-gsTCUz eiaRqE djpNeP"
         color="primary"
         href="https://pancakeswap.finance"
         rel="noreferrer noopener"

diff --git a/src/__tests__/components/text.test.tsx b/src/__tests__/components/text.test.tsx
@@ -7,7 +7,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-bdfBwQ jodyWs"
+        class="sc-bdfBwQ ljuVMZ"
         color="text"
       >
         pancake

diff --git a/src/__tests__/widgets/modal.test.tsx b/src/__tests__/widgets/modal.test.tsx
@@ -21,7 +21,7 @@ it("renders correctly", () => {
             class="sc-dlfnbm sc-fubCfw fcyuqz kApDsK"
           >
             <h2
-              class="sc-bdfBwQ sc-gsTCUz iEFWFe euWWbB"
+              class="sc-bdfBwQ sc-gsTCUz gWEhOj euWWbB"
               color="text"
             >
               Title

diff --git a/src/__tests__/widgets/walletModal.test.tsx b/src/__tests__/widgets/walletModal.test.tsx
@@ -18,7 +18,7 @@ it("renders ConnectModal correctly", () => {
             class="sc-eCssSg sc-pFZIQ cntkGK ePMCIJ"
           >
             <h2
-              class="sc-bdfBwQ sc-hKgILt iEFWFe bCnOmg"
+              class="sc-bdfBwQ sc-hKgILt gWEhOj bCnOmg"
               color="text"
             >
               Connect to a wallet
@@ -52,7 +52,7 @@ it("renders ConnectModal correctly", () => {
             type="button"
           >
             <div
-              class="sc-bdfBwQ OmpVE"
+              class="sc-bdfBwQ fEwDKZ"
               color="primary"
             >
               Metamask
@@ -195,7 +195,7 @@ it("renders ConnectModal correctly", () => {
             type="button"
           >
             <div
-              class="sc-bdfBwQ OmpVE"
+              class="sc-bdfBwQ fEwDKZ"
               color="primary"
             >
               TrustWallet
@@ -239,7 +239,7 @@ it("renders ConnectModal correctly", () => {
             type="button"
           >
             <div
-              class="sc-bdfBwQ OmpVE"
+              class="sc-bdfBwQ fEwDKZ"
               color="primary"
             >
               MathWallet
@@ -272,7 +272,7 @@ it("renders ConnectModal correctly", () => {
             type="button"
           >
             <div
-              class="sc-bdfBwQ OmpVE"
+              class="sc-bdfBwQ fEwDKZ"
               color="primary"
             >
               TokenPocket
@@ -307,7 +307,7 @@ it("renders ConnectModal correctly", () => {
             type="button"
           >
             <div
-              class="sc-bdfBwQ OmpVE"
+              class="sc-bdfBwQ fEwDKZ"
               color="primary"
             >
               WalletConnect
@@ -336,7 +336,7 @@ it("renders ConnectModal correctly", () => {
             type="button"
           >
             <div
-              class="sc-bdfBwQ OmpVE"
+              class="sc-bdfBwQ fEwDKZ"
               color="primary"
             >
               Binance Chain Wallet
@@ -395,7 +395,7 @@ it("renders ConnectModal correctly", () => {
             </svg>
           </button>
           <a
-            class="sc-bdfBwQ sc-gsTCUz cxXgLd djpNeP sc-iqHYGH hzLTbV"
+            class="sc-bdfBwQ sc-gsTCUz eiaRqE djpNeP sc-iqHYGH hzLTbV"
             color="primary"
             href="https://docs.pancakeswap.finance/guides/faq#how-do-i-set-up-my-wallet-on-binance-smart-chain"
             rel="noreferrer noopener"
@@ -436,7 +436,7 @@ it("renders AccountModal correctly", () => {
             class="sc-eCssSg sc-pFZIQ cntkGK ePMCIJ"
           >
             <h2
-              class="sc-bdfBwQ sc-hKgILt iEFWFe bCnOmg"
+              class="sc-bdfBwQ sc-hKgILt gWEhOj bCnOmg"
               color="text"
             >
               Your wallet
@@ -464,7 +464,7 @@ it("renders AccountModal correctly", () => {
           class="sc-eCssSg gIvwGY"
         >
           <div
-            class="sc-bdfBwQ dSimpj"
+            class="sc-bdfBwQ krzIlW"
             color="text"
             font-size="20px"
             style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px;"
@@ -475,7 +475,7 @@ it("renders AccountModal correctly", () => {
             class="sc-eCssSg gZPLzm"
           >
             <a
-              class="sc-bdfBwQ sc-gsTCUz kgxXAa djpNeP"
+              class="sc-bdfBwQ sc-gsTCUz bnSWIP djpNeP"
               color="primary"
               href="https://bscscan.com/address/0xb218C5D6aF1F979aC42BC68d98A5A0D796C6aB01"
               rel="noreferrer noopener"
@@ -495,7 +495,7 @@ it("renders AccountModal correctly", () => {
               </svg>
             </a>
             <div
-              class="sc-bdfBwQ sc-crrsfI gRgLU bApUkG"
+              class="sc-bdfBwQ sc-crrsfI czOnMt bApUkG"
               color="text"
               role="button"
             >

diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -1,5 +1,5 @@
 import styled, { DefaultTheme } from "styled-components";
-import { space } from "styled-system";
+import { space, typography } from "styled-system";
 import getThemeValue from "../../util/getThemeValue";
 import { TextProps } from "./types";
 
@@ -22,6 +22,7 @@ const Text = styled.div<TextProps>`
   line-height: 1.5;
   ${({ textTransform }) => textTransform && `text-transform: ${textTransform};`}
   ${space}
+  ${typography}
 `;
 
 Text.defaultProps = {

diff --git a/src/components/Text/index.stories.tsx b/src/components/Text/index.stories.tsx
@@ -50,6 +50,7 @@ export const Default: React.FC = () => {
       <Text color="secondary" textTransform="uppercase">
         with text transform
       </Text>
+      <Text textAlign="center">center</Text>
     </div>
   );
 };
diff --git a/src/components/Text/types.ts b/src/components/Text/types.ts
@@ -1,6 +1,6 @@
-import { SpaceProps } from "styled-system";
+import { SpaceProps, TypographyProps } from "styled-system";
 
-export interface TextProps extends SpaceProps {
+export interface TextProps extends SpaceProps, TypographyProps {
   color?: string;
   fontSize?: string;
   bold?: boolean;