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 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'
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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"
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user