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/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 }) => {
-
+