4
0
forked from crowetic/commerce

Merge pull request #101 from vercel/develop

Removing HTML Content and enhancing capabilities of Text Component
This commit is contained in:
B 2020-11-26 13:39:54 -03:00 committed by GitHub
commit 4358b9219e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 21 additions and 56 deletions

View File

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

View File

@ -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 }}
/>
)
}

View File

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

View File

@ -7,5 +7,4 @@ export { default as Searchbar } from './Searchbar'
export { default as UserNav } from './UserNav' export { default as UserNav } from './UserNav'
export { default as Toggle } from './Toggle' export { default as Toggle } from './Toggle'
export { default as Head } from './Head' export { default as Head } from './Head'
export { default as HTMLContent } from './HTMLContent'
export { default as I18nWidget } from './I18nWidget' export { default as I18nWidget } from './I18nWidget'

View File

@ -6,8 +6,7 @@ import { NextSeo } from 'next-seo'
import s from './ProductView.module.css' import s from './ProductView.module.css'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import { Swatch, ProductSlider } from '@components/product' 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 usePrice from '@bigcommerce/storefront-data-hooks/use-price'
import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item' 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"> <div className="pb-14 break-words w-full max-w-xl">
<HTMLContent html={product.description} /> <Text html={product.description} />
</div> </div>
</section> </section>
<div> <div>

View File

@ -10,7 +10,8 @@ interface Props {
variant?: Variant variant?: Variant
className?: string className?: string
style?: CSSProperties style?: CSSProperties
children: React.ReactNode | any children?: React.ReactNode | any
html?: string
} }
type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading' type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading'
@ -20,6 +21,7 @@ const Text: FunctionComponent<Props> = ({
className = '', className = '',
variant = 'body', variant = 'body',
children, children,
html,
}) => { }) => {
const componentsMap: { const componentsMap: {
[P in Variant]: React.ComponentType<any> | string [P in Variant]: React.ComponentType<any> | string
@ -36,6 +38,12 @@ const Text: FunctionComponent<Props> = ({
| React.ComponentType<any> | React.ComponentType<any>
| string = componentsMap![variant!] | string = componentsMap![variant!]
const htmlContentProps = html
? {
dangerouslySetInnerHTML: { __html: html },
}
: {}
return ( return (
<Component <Component
className={cn( className={cn(
@ -49,6 +57,7 @@ const Text: FunctionComponent<Props> = ({
className className
)} )}
style={style} style={style}
{...htmlContentProps}
> >
{children} {children}
</Component> </Component>

View File

@ -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 useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item' import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
import { useUI } from '@components/ui/context' 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 { Trash } from '@components/icons'
import s from './WishlistCard.module.css' import s from './WishlistCard.module.css'
@ -72,7 +71,7 @@ const WishlistCard: FC<Props> = ({ item }) => {
</Link> </Link>
</h3> </h3>
<div className="mb-4"> <div className="mb-4">
<HTMLContent html={product.description!} /> <Text html={product.description} />
</div> </div>
<Button <Button
aria-label="Add to Cart" aria-label="Add to Cart"

View File

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