Merge pull request #101 from vercel/develop

Removing HTML Content and enhancing capabilities of Text Component

components/common/HTMLContent/HTMLContent.module.css

@@ -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;
-}

components/common/HTMLContent/HTMLContent.tsx

@@ -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 (
-    <div
-      className={cn(s.root, className)}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  )
-}

components/common/HTMLContent/index.ts

@@ -1 +0,0 @@
-export { default } from './HTMLContent'

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'

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 { Button, Container, Text } from '@components/ui'
-import { HTMLContent } from '@components/common'
 
 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<Props> = ({ product }) => {
             ))}
 
             <div className="pb-14 break-words w-full max-w-xl">
-              <HTMLContent html={product.description} />
+              <Text html={product.description} />
             </div>
           </section>
           <div>

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<Props> = ({
   className = '',
   variant = 'body',
   children,
+  html,
 }) => {
   const componentsMap: {
     [P in Variant]: React.ComponentType<any> | string
@@ -36,6 +38,12 @@ const Text: FunctionComponent<Props> = ({
     | React.ComponentType<any>
     | string = componentsMap![variant!]
 
+  const htmlContentProps = html
+    ? {
+        dangerouslySetInnerHTML: { __html: html },
+      }
+    : {}
+
   return (
     <Component
       className={cn(
@@ -49,6 +57,7 @@ const Text: FunctionComponent<Props> = ({
         className
       )}
       style={style}
+      {...htmlContentProps}
     >
       {children}
     </Component>

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 { Button, Text } from '@components/ui'
-import { HTMLContent } from '@components/common'
 import { Trash } from '@components/icons'
 import s from './WishlistCard.module.css'
 
@@ -72,7 +71,7 @@ const WishlistCard: FC<Props> = ({ item }) => {
           </Link>
         </h3>
         <div className="mb-4">
-          <HTMLContent html={product.description!} />
+          <Text html={product.description} />
         </div>
         <Button
           aria-label="Add to Cart"

pages/[...pages].tsx

@@ -3,12 +3,14 @@ import type {
   GetStaticPropsContext,
   InferGetStaticPropsType,
 } from 'next'
+import getSlug from '@lib/get-slug'
+import { missingLocaleInPages } from '@lib/usage-warns'
+import { Layout } from '@components/common'
+import { Text } from '@components/ui'
 import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
 import getPage from '@bigcommerce/storefront-data-hooks/api/operations/get-page'
 import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
-import getSlug from '@lib/get-slug'
+import { defatultPageProps } from '@lib/defaults'
-import { missingLocaleInPages } from '@lib/usage-warns'
-import { Layout, HTMLContent } from '@components/common'
 
 export async function getStaticProps({
   preview,
@@ -32,7 +34,7 @@ export async function getStaticProps({
   }
 
   return {
-    props: { pages, page },
+    props: { ...defatultPageProps, pages, page },
     revalidate: 60 * 60, // Every hour
   }
 }
@@ -64,7 +66,7 @@ export default function Pages({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <div className="max-w-2xl mx-auto py-20">
-      {page?.body && <HTMLContent html={page.body} />}
+      {page?.body && <Text html={page.body} />}
     </div>
   )
 }