From 1cd548ae3006db4e98638a04613c1e351a70b8b9 Mon Sep 17 00:00:00 2001 From: Ky Lee <132851666+kyhyco@users.noreply.github.com> Date: Thu, 13 Jun 2024 15:08:38 -0700 Subject: [PATCH] feat: added Inter fonts (#506) --- .changeset/fuzzy-eggs-cross.md | 5 +++++ src/internal/text/TextBody.tsx | 13 +++++++++++++ src/internal/text/TextCaption.tsx | 12 ++++++++++++ src/internal/text/TextHeadline.tsx | 13 +++++++++++++ src/internal/text/TextLabel1.tsx | 14 ++++++++++++++ src/internal/text/TextLabel2.tsx | 14 ++++++++++++++ src/internal/text/TextLegal.tsx | 10 ++++++++++ src/internal/text/index.ts | 2 ++ src/styles/index-with-tailwind.css | 4 +++- src/token/components/TokenChip.tsx | 5 ++--- src/token/components/TokenRow.tsx | 5 ++--- src/token/components/TokenSelectButton.tsx | 12 ++++-------- tailwind.config.js | 3 +++ 13 files changed, 97 insertions(+), 15 deletions(-) create mode 100644 .changeset/fuzzy-eggs-cross.md create mode 100644 src/internal/text/TextBody.tsx create mode 100644 src/internal/text/TextCaption.tsx create mode 100644 src/internal/text/TextHeadline.tsx create mode 100644 src/internal/text/TextLabel1.tsx create mode 100644 src/internal/text/TextLabel2.tsx create mode 100644 src/internal/text/TextLegal.tsx create mode 100644 src/internal/text/index.ts diff --git a/.changeset/fuzzy-eggs-cross.md b/.changeset/fuzzy-eggs-cross.md new file mode 100644 index 0000000000..ce72b3d156 --- /dev/null +++ b/.changeset/fuzzy-eggs-cross.md @@ -0,0 +1,5 @@ +--- +"@coinbase/onchainkit": patch +--- + +- **feat**: introduce Inter font-family and internal text components. By @kyhyco #506 diff --git a/src/internal/text/TextBody.tsx b/src/internal/text/TextBody.tsx new file mode 100644 index 0000000000..2339a3ddda --- /dev/null +++ b/src/internal/text/TextBody.tsx @@ -0,0 +1,13 @@ +import { ReactNode } from 'react'; + +type TextBodyReact = { + children: ReactNode; +}; + +export function TextBody({ children }: TextBodyReact) { + return ( + + {children} + + ); +} diff --git a/src/internal/text/TextCaption.tsx b/src/internal/text/TextCaption.tsx new file mode 100644 index 0000000000..ace89ad40c --- /dev/null +++ b/src/internal/text/TextCaption.tsx @@ -0,0 +1,12 @@ +import { ReactNode } from 'react'; + +type TextCaptionReact = { + children: ReactNode; +}; + +/* istanbul ignore next */ +export function TextCaption({ children }: TextCaptionReact) { + return ( + {children} + ); +} diff --git a/src/internal/text/TextHeadline.tsx b/src/internal/text/TextHeadline.tsx new file mode 100644 index 0000000000..c1a184578a --- /dev/null +++ b/src/internal/text/TextHeadline.tsx @@ -0,0 +1,13 @@ +import { ReactNode } from 'react'; + +type TextHeadlineReact = { + children: ReactNode; +}; + +export function TextHeadline({ children }: TextHeadlineReact) { + return ( + + {children} + + ); +} diff --git a/src/internal/text/TextLabel1.tsx b/src/internal/text/TextLabel1.tsx new file mode 100644 index 0000000000..1f6e292e81 --- /dev/null +++ b/src/internal/text/TextLabel1.tsx @@ -0,0 +1,14 @@ +import { ReactNode } from 'react'; + +type TextLabel1React = { + children: ReactNode; +}; + +/* istanbul ignore next */ +export function TextLabel1({ children }: TextLabel1React) { + return ( + + {children} + + ); +} diff --git a/src/internal/text/TextLabel2.tsx b/src/internal/text/TextLabel2.tsx new file mode 100644 index 0000000000..a52032edde --- /dev/null +++ b/src/internal/text/TextLabel2.tsx @@ -0,0 +1,14 @@ +import { ReactNode } from 'react'; + +type TextLabel2React = { + children: ReactNode; +}; + +/* istanbul ignore next */ +export function TextLabel2({ children }: TextLabel2React) { + return ( + + {children} + + ); +} diff --git a/src/internal/text/TextLegal.tsx b/src/internal/text/TextLegal.tsx new file mode 100644 index 0000000000..ee8d1126a7 --- /dev/null +++ b/src/internal/text/TextLegal.tsx @@ -0,0 +1,10 @@ +import { ReactNode } from 'react'; + +type TextLegalReact = { + children: ReactNode; +}; + +/* istanbul ignore next */ +export function TextLegal({ children }: TextLegalReact) { + return {children}; +} diff --git a/src/internal/text/index.ts b/src/internal/text/index.ts new file mode 100644 index 0000000000..94f2fd7cf8 --- /dev/null +++ b/src/internal/text/index.ts @@ -0,0 +1,2 @@ +export { TextBody } from './TextBody'; +export { TextHeadline } from './TextHeadline'; diff --git a/src/styles/index-with-tailwind.css b/src/styles/index-with-tailwind.css index a69ce86e45..fbf90edebd 100644 --- a/src/styles/index-with-tailwind.css +++ b/src/styles/index-with-tailwind.css @@ -1,2 +1,4 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap'); @import url('./tailwind-base.css'); -@import url('./index.css'); +@import url('./index.css'); \ No newline at end of file diff --git a/src/token/components/TokenChip.tsx b/src/token/components/TokenChip.tsx index dddb1916c3..fcedc06981 100644 --- a/src/token/components/TokenChip.tsx +++ b/src/token/components/TokenChip.tsx @@ -1,3 +1,4 @@ +import { TextBody } from '../../internal/text'; import type { TokenChipReact } from '../types'; /** @@ -14,9 +15,7 @@ export function TokenChip({ token, onClick }: TokenChipReact) { onClick={() => onClick?.(token)} > - - {token.symbol} - + {token.symbol} ); } diff --git a/src/token/components/TokenRow.tsx b/src/token/components/TokenRow.tsx index a4698e5567..ae5e252030 100644 --- a/src/token/components/TokenRow.tsx +++ b/src/token/components/TokenRow.tsx @@ -2,6 +2,7 @@ import { memo } from 'react'; import type { TokenRowReact } from '../types'; import { formatAmount } from '../core/formatAmount'; import { TokenImage } from './TokenImage'; +import { TextHeadline } from '../../internal/text'; export const TokenRow = memo(function TokenRow({ token, @@ -19,9 +20,7 @@ export const TokenRow = memo(function TokenRow({ {!hideImage && } - - {token.name} - + {token.name} {!hideSymbol && ( {token.symbol} diff --git a/src/token/components/TokenSelectButton.tsx b/src/token/components/TokenSelectButton.tsx index 6b9fc1d52e..1a089d9247 100644 --- a/src/token/components/TokenSelectButton.tsx +++ b/src/token/components/TokenSelectButton.tsx @@ -1,6 +1,7 @@ import { type ForwardedRef, forwardRef } from 'react'; import type { TokenSelectButtonReact } from '../types'; import { TokenImage } from './TokenImage'; +import { TextBody } from '../../internal/text'; function CaretUp() { return ( @@ -52,17 +53,12 @@ export const TokenSelectButton = forwardRef(function TokenSelectButton( {token ? ( <> - + {token.symbol} - + ) : ( - - Select - + Select )} {isOpen ? : } diff --git a/tailwind.config.js b/tailwind.config.js index 0f68916442..9940e062e6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,6 +2,9 @@ export default { content: ['./src/**/*.{ts,tsx}'], theme: { + fontFamily: { + sans: ['Inter', 'sans-serif'], + }, extend: {}, }, plugins: [],