diff --git a/README.md b/README.md index cf91b2775..86c99b064 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ This project is currently under development. - Responsive - UI Components - Theming -- Standarized Data Hooks +- Standardized Data Hooks - Integrations - Integrate seamlessly with the most common ecommerce platforms. - Dark Mode Support diff --git a/components/common/HTMLContent/HTMLContent.module.css b/components/common/HTMLContent/HTMLContent.module.css deleted file mode 100644 index 0e6d8f917..000000000 --- a/components/common/HTMLContent/HTMLContent.module.css +++ /dev/null @@ -1,26 +0,0 @@ -.root { - @apply text-lg leading-7 font-medium max-w-6xl mx-auto; -} - -.root p { - @apply text-justify; -} - -.root h1 { - @apply text-5xl mb-12; -} - -.root h2 { - @apply text-3xl mt-12 mb-4 leading-snug; -} - -.root h3 { - @apply text-2xl mt-8 mb-4 leading-snug; -} - -.root p, -.root ul, -.root ol, -.root blockquote { - @apply mb-6; -} diff --git a/components/common/HTMLContent/HTMLContent.tsx b/components/common/HTMLContent/HTMLContent.tsx deleted file mode 100644 index d041ff369..000000000 --- a/components/common/HTMLContent/HTMLContent.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import cn from 'classnames' -import s from './HTMLContent.module.css' - -type Props = { - className?: 'string' - html: string -} - -export default function HTMLContent({ className, html }: Props) { - return ( -
- ) -} diff --git a/components/common/HTMLContent/index.ts b/components/common/HTMLContent/index.ts deleted file mode 100644 index 0a1dcb276..000000000 --- a/components/common/HTMLContent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './HTMLContent' diff --git a/components/common/index.ts b/components/common/index.ts index d39b38065..1d9329f56 100644 --- a/components/common/index.ts +++ b/components/common/index.ts @@ -7,5 +7,4 @@ export { default as Searchbar } from './Searchbar' export { default as UserNav } from './UserNav' export { default as Toggle } from './Toggle' export { default as Head } from './Head' -export { default as HTMLContent } from './HTMLContent' export { default as I18nWidget } from './I18nWidget' diff --git a/components/icons/Github.tsx b/components/icons/Github.tsx index b8cc0c558..1195a3c3a 100644 --- a/components/icons/Github.tsx +++ b/components/icons/Github.tsx @@ -1,4 +1,4 @@ -const Sun = ({ ...props }) => { +const Github = ({ ...props }) => { return ( { ) } -export default Sun +export default Github diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index cb2ec3913..0a43fa5c2 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -6,8 +6,7 @@ import { NextSeo } from 'next-seo' import s from './ProductView.module.css' import { useUI } from '@components/ui/context' import { Swatch, ProductSlider } from '@components/product' -import { Button, Container } from '@components/ui' -import { HTMLContent } from '@components/common' +import { Button, Container, Text } from '@components/ui' import usePrice from '@bigcommerce/storefront-data-hooks/use-price' import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item' @@ -137,7 +136,7 @@ const ProductView: FC = ({ product }) => { ))}
- +
diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx index 962e3543e..29e1bef31 100644 --- a/components/ui/Text/Text.tsx +++ b/components/ui/Text/Text.tsx @@ -10,7 +10,8 @@ interface Props { variant?: Variant className?: string style?: CSSProperties - children: React.ReactNode | any + children?: React.ReactNode | any + html?: string } type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading' @@ -20,6 +21,7 @@ const Text: FunctionComponent = ({ className = '', variant = 'body', children, + html, }) => { const componentsMap: { [P in Variant]: React.ComponentType | string @@ -36,6 +38,12 @@ const Text: FunctionComponent = ({ | React.ComponentType | string = componentsMap![variant!] + const htmlContentProps = html + ? { + dangerouslySetInnerHTML: { __html: html }, + } + : {} + return ( = ({ className )} style={style} + {...htmlContentProps} > {children} diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx index e0601862b..3df36bbe3 100644 --- a/components/wishlist/WishlistCard/WishlistCard.tsx +++ b/components/wishlist/WishlistCard/WishlistCard.tsx @@ -7,8 +7,7 @@ import usePrice from '@bigcommerce/storefront-data-hooks/use-price' import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item' import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item' import { useUI } from '@components/ui/context' -import { Button } from '@components/ui' -import { HTMLContent } from '@components/common' +import { Button, Text } from '@components/ui' import { Trash } from '@components/icons' import s from './WishlistCard.module.css' @@ -72,7 +71,7 @@ const WishlistCard: FC = ({ item }) => {
- +