From eff89a579fc5ec00585fed6d6f5c75ac7a56a636 Mon Sep 17 00:00:00 2001 From: Balint Gabor <127662+gbalint@users.noreply.github.com> Date: Wed, 29 May 2024 14:55:59 +0200 Subject: [PATCH] Container and Section --- app/components/Layout.jsx | 2 +- .../products.$handle/sections/reviews.jsx | 135 ++++++------------ utopia/layout.utopia.js | 95 ++++++++++-- 3 files changed, 135 insertions(+), 97 deletions(-) diff --git a/app/components/Layout.jsx b/app/components/Layout.jsx index a8ea6fd..96c4afb 100644 --- a/app/components/Layout.jsx +++ b/app/components/Layout.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React from 'react'; import {Await} from '@remix-run/react'; import {Suspense} from 'react'; import {Aside} from '~/components/Aside'; diff --git a/app/routes/products.$handle/sections/reviews.jsx b/app/routes/products.$handle/sections/reviews.jsx index 551f3ae..fe8e7c1 100644 --- a/app/routes/products.$handle/sections/reviews.jsx +++ b/app/routes/products.$handle/sections/reviews.jsx @@ -1,16 +1,10 @@ -import { - Container, - Flex, - Section, - MultiColumn, - Spacer, -} from '@h2/new/Layout' -import { Heading, Span, Strong, Text } from '@h2/new/Text' -import { Button } from '@h2/new/Button' -import { cva, cx } from '@h2/new/utils' -import { Placeholder } from 'utopia-api' -import * as React from 'react' -import { Star } from '/app/components/Star' +import {Container, Flex, Section, MultiColumn, Spacer} from '@h2/new/Layout'; +import {Heading, Span, Strong, Text} from '@h2/new/Text'; +import {Button} from '@h2/new/Button'; +import {cva, cx} from '@h2/new/utils'; +import {Placeholder} from 'utopia-api'; +import * as React from 'react'; +import {Star} from '/app/components/Star'; const reviews = [ { @@ -49,36 +43,34 @@ const reviews = [ 'The perfect blend of functionality and fashion. I take it to work, on weekend getaways, and even to the gym. It’s a must-have for any builder!', customer: 'Sarah M.', }, -] +]; -export default function Reviews({ data = reviews }) { +export default function Reviews({data = reviews}) { return (
- - - - Don’t take our word for it - - - + + + Don’t take our word for it + + 4.8 — 385 Reviews - + - + {data.map((review) => { - return + return ; })}
- ) + ); } const review = cva({ @@ -93,107 +85,74 @@ const review = cva({ defaultVariants: { background: 'white', }, -}) +}); -export function Review({ data, className, ...props }) { - const { id, quote, customer } = data +export function Review({data, className, ...props}) { + const {id, quote, customer} = data; // hack so we have a background from data.id - const moduloId = (parseInt(id) - 1) % 6 + const moduloId = (parseInt(id) - 1) % 6; const background = props.background ?? - (moduloId === 1 - ? 'black' - : moduloId === 5 - ? 'accent' - : 'white') + (moduloId === 1 ? 'black' : moduloId === 5 ? 'accent' : 'white'); - const classes = cx( - review({ ...props, background }), - className, - ) - const { firstSentence, remainingText } = - splitTextIntoSentences(quote) + const classes = cx(review({...props, background}), className); + const {firstSentence, remainingText} = splitTextIntoSentences(quote); - console.log(background) + console.log(background); return ( -
- - +
+ + {background === 'black' && ( - + )} - + {firstSentence} {' '} {remainingText} —{customer}
- ) + ); } function splitTextIntoSentences(text) { - const regex = /([.!?]\s+)(?=[A-Z"'\s])/ + const regex = /([.!?]\s+)(?=[A-Z"'\s])/; - const splitIndex = text.search(regex) + const splitIndex = text.search(regex); if (splitIndex === -1) { - return { firstSentence: text, remainingText: '' } + return {firstSentence: text, remainingText: ''}; } - const endIndex = - splitIndex + - text.slice(splitIndex).match(regex)[0].length + const endIndex = splitIndex + text.slice(splitIndex).match(regex)[0].length; - const firstSentence = text.substring(0, endIndex) - const remainingText = text.substring(endIndex).trim() + const firstSentence = text.substring(0, endIndex); + const remainingText = text.substring(endIndex).trim(); - return { firstSentence, remainingText } + return {firstSentence, remainingText}; } const IconQuote = () => ( - + -) +); diff --git a/utopia/layout.utopia.js b/utopia/layout.utopia.js index b1e71c3..04e3c2e 100644 --- a/utopia/layout.utopia.js +++ b/utopia/layout.utopia.js @@ -1,5 +1,12 @@ import * as Utopia from 'utopia-api'; -import {Background, Flex, MultiColumn, Spacer, Section} from '@h2/new/Layout'; +import { + Background, + Flex, + MultiColumn, + Spacer, + Section, + Container, +} from '@h2/new/Layout'; export const BooleanSegmentControl = Utopia.radioControl([ { @@ -174,8 +181,8 @@ const annotations = { component: MultiColumn, properties: { columns: Utopia.sliderControl(1, 4, 1), - gap: BooleanSegmentControl, - maxWidth: BooleanSegmentControl, + gap: Utopia.checkboxControl(), + maxWidth: Utopia.checkboxControl(), }, focus: 'never', inspector: 'hidden', @@ -228,12 +235,84 @@ const annotations = { }, focus: 'never', inspector: 'hidden', - children: 'not-supported', - variants: { - label: 'Spacer', - imports: "import { Spacer } from '@h2/new/Layout'", - code: ``, + variants: [ + { + label: 'Section', + imports: "import { Section } from '@h2/new/Layout'", + code: `
`, + }, + { + label: 'Section (padded)', + imports: "import { Section } from '@h2/new/Layout'", + code: `
`, + }, + ], + icon: 'dashedframe', + }, + Container: { + component: Container, + properties: { + fluid: BooleanSegmentControl, + paddingY: Utopia.radioControl([ + { + label: 's', + value: 's', + }, + { + label: 'm', + value: 'm', + }, + { + label: 'l', + value: 'l', + }, + ]), + paddingBottom: Utopia.radioControl([ + { + label: 's', + value: 's', + }, + { + label: 'm', + value: 'm', + }, + { + label: 'l', + value: 'l', + }, + ]), + marginBottom: BooleanSegmentControl, }, + focus: 'never', + inspector: 'hidden', + variants: [ + { + label: 'Container with placeholder', + imports: `import { Container } from '@h2/new/Layout' + import { Placeholder } from 'utopia-api'`, + code: ` + + `, + }, + { + label: 'Container (Review Title)', + imports: `import { Container } from '@h2/new/Layout' + import { Placeholder } from 'utopia-api'`, + code: ` + + + `, + }, + { + label: 'Container (Review Content)', + imports: `import { Container } from '@h2/new/Layout' + import { Placeholder } from 'utopia-api'`, + code: ` + + + `, + }, + ], icon: 'dashedframe', }, };