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:
commit
4358b9219e
@ -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;
|
||||
}
|
@ -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 }}
|
||||
/>
|
||||
)
|
||||
}
|
@ -1 +0,0 @@
|
||||
export { default } from './HTMLContent'
|
@ -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'
|
||||
|
@ -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<Props> = ({ product }) => {
|
||||
))}
|
||||
|
||||
<div className="pb-14 break-words w-full max-w-xl">
|
||||
<HTMLContent html={product.description} />
|
||||
<Text html={product.description} />
|
||||
</div>
|
||||
</section>
|
||||
<div>
|
||||
|
@ -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>
|
||||
|
@ -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<Props> = ({ item }) => {
|
||||
</Link>
|
||||
</h3>
|
||||
<div className="mb-4">
|
||||
<HTMLContent html={product.description!} />
|
||||
<Text html={product.description} />
|
||||
</div>
|
||||
<Button
|
||||
aria-label="Add to Cart"
|
||||
|
@ -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 { missingLocaleInPages } from '@lib/usage-warns'
|
||||
import { Layout, HTMLContent } from '@components/common'
|
||||
import { defatultPageProps } from '@lib/defaults'
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user