New specifiers, grid definitions and minor style changes (#14)

Main commits squashed: new BulletCardComp specifier, card specifier, grid def, center video, EnhHeadingBlock icon gap, reverse formatting fixed ChatWidget z index, added new specifier to CarteBlancheBlock fixed grid table layout gap added new specifier to EnhHeadingBlock added new specifier for CarteBlancheBlock --------- Co-authored-by: artem ash <[email protected]>
hanzoai · Feb 15, 2024 · 9946652 · 9946652
1 parent 7a5920d
commit 9946652
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 16 deletions.
diff --git a/pkgs/hanzo-ui/blocks/components/bullet-cards-block.tsx b/pkgs/hanzo-ui/blocks/components/bullet-cards-block.tsx
@@ -19,20 +19,22 @@ const BulletCardsBlockComponent: React.FC<BlockComponentProps> = ({
   const b = block as BulletCardsBlock
   const specified = (s: string) => (containsToken(b.specifiers, s))
 
+  const noBorder = specified('no-card-border') ? 'border-0' : 'md:border'
+
   const borderclx = specified('border-muted-3') ? 
     'md:border-muted-3' 
     : 
     (specified('border-muted-1') ? 'md:border-muted-1' : 'md:border-muted-2')
 
-
   return (
     <GridBlockComponent block={{blockType: 'grid', grid: b.grid} as Block} className={className} agent={agent}>
     {b.cards.map((card, index) => (
-      <div key={index} className={cn('px-0 sm:px-4 py-1 md:py-4 md:border rounded ' + 
+      <div key={index} className={cn('px-0 sm:px-4 py-1 md:py-4 rounded-lg ' + 
         'flex flex-row justify-start items-center not-typography text-foreground',
+        noBorder,
         borderclx
       )}>
-        <InlineIcon icon={card.icon} size={b.iconSize ?? 28} agent={agent} className='shrink-0 mr-2 w-6 md:mr-4 md:w-7 '/>
+        <InlineIcon icon={card.icon} size={b.iconSize ?? 28} agent={agent} className='shrink-0 mr-2 md:mr-4 '/>
         <p className='m-0 text-sm sm:text-base'>{card.text}</p>
       </div>
     ))}

diff --git a/pkgs/hanzo-ui/blocks/components/card-block.tsx b/pkgs/hanzo-ui/blocks/components/card-block.tsx
@@ -83,7 +83,7 @@ const CardBlockComponent: React.FC<
 
   const ghost = has('ghost') // no outer padding, no borders, larger title, all left-aligned bg is same (default)
 
-  const contentclx = (has('content-left') ? 'items-start ' : 'items-center ') + contentClassName
+  const contentclx = (has('content-left') ? 'items-start ' : ' items-center ') + (has('content-top') ? '!justify-start' : '') + contentClassName
   const disabledBorder = (has('appear-disabled' ) ? ' border-muted-4' : ' border-muted-3')
   const outerBorder = ((has('no-outer-border') || ghost) ? ' border-0' : '')
   const innerBorder = (ghost ? ' border-0' : '')

diff --git a/pkgs/hanzo-ui/blocks/components/carte-blanche-block/index.tsx b/pkgs/hanzo-ui/blocks/components/carte-blanche-block/index.tsx
@@ -34,6 +34,13 @@ const _getClx = (specifier: string, section: CardSection): string => {
       } break
     }
   }
+  if (specifier === 'big-padding-content') {
+    switch (section) {
+      case 'content': {
+        result = 'md:p-8 lg:p-12 xl:p-16'
+      } break
+    }
+  }
   else if (specifier === 'no-inner-borders') {
     switch (section) {
       case 'header': {
@@ -71,8 +78,14 @@ const CarteBlancheBlockComponent: React.FC<
     getClx('no-inner-borders', 'header'),
   ].join(' ')
 
+  const contentclx = [
+    getClx('big-padding-content', 'content'),
+  ].join(' ')
+
+  const noOuterBorders = specified('no-outer-borders')
+
   return (
-    <Card className={cn('flex flex-col ', className)} >
+    <Card className={cn('flex flex-col ', className, noOuterBorders ? 'border-none' : '')} >
     {b.heading && (
       <CardHeader className={cn('typography-img:m-0', headingclx)} >
       {b.topContent && (
@@ -82,7 +95,7 @@ const CarteBlancheBlockComponent: React.FC<
       </CardHeader>
     )}
     {b.content && (
-      <CardContent className={cn('typography flex flex-col justify-center', className)}>
+      <CardContent className={cn('typography flex flex-col justify-center', contentclx, className)}>
         <Content blocks={b.content} agent={agent}/>
       </CardContent>
     )}

diff --git a/pkgs/hanzo-ui/blocks/components/enh-heading-block.tsx b/pkgs/hanzo-ui/blocks/components/enh-heading-block.tsx
@@ -124,6 +124,7 @@ const EnhHeadingBlockComponent: React.FC<
   const specified = (s: string) => (containsToken(b.specifiers + extraSpecifiers, s))
   const preheadingHeadingFont = specified('preheading-heading-font')
   const phFontClx = preheadingHeadingFont ? 'font-heading' : ''
+  const alignMiddleClx = specified('align-middle') ? 'my-auto' : ''
 
   const positionclx = getPositionClx(specified, agent)
 
@@ -167,7 +168,7 @@ const EnhHeadingBlockComponent: React.FC<
         if (b.icon && !iconRendered) {
           iconRendered = true
           return (
-            <div className={cn('flex flex-row items-center', clx)} key={`div-${index}`}>
+            <div className={cn('flex flex-row items-center gap-2 sm:gap-4', clx)} key={`div-${index}`}>
               <InlineIcon icon={b.icon} size={b.iconSize ?? 32} agent={agent}/>
               <Element asTag={tag} text={text} />
             </div>
@@ -181,11 +182,11 @@ const EnhHeadingBlockComponent: React.FC<
   }
 
   return applyTypography ? (
-    <ApplyTypography className={cn('flex flex-col w-full !gap-0', className)}>
+    <ApplyTypography className={cn('flex flex-col w-full !gap-0', className, alignMiddleClx)}>
       <Inner />
     </ApplyTypography>
   ) : (
-    <div className={cn('flex flex-col w-full gap-0', className)}>
+    <div className={cn('flex flex-col w-full gap-0', className, alignMiddleClx)}>
       <Inner />  
     </div>
   )

diff --git a/pkgs/hanzo-ui/blocks/components/grid-block/table-borders.mutator.ts b/pkgs/hanzo-ui/blocks/components/grid-block/table-borders.mutator.ts
@@ -39,7 +39,7 @@ const getCellClx = (
   return clx
 } 
 
-const gapClx = 'gap-0 md:gap-0 xl:gap-9'
+const gapClx = 'gap-0 md:gap-0 xl:gap-0'
 
 export default {
   getCellClx,

diff --git a/pkgs/hanzo-ui/blocks/components/video-block.tsx b/pkgs/hanzo-ui/blocks/components/video-block.tsx
@@ -108,7 +108,7 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
       }
       return ((
         <VideoPlayer 
-          className={className} 
+          className={cn('mx-auto', className)} 
           sources={b.sources} 
           width={dim.w} 
           height={dim.h} 
@@ -125,7 +125,7 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
     <Image src={b.poster!} alt='image' width={conDim.w} height={conDim.h} className={className}/>
   ) : (
     <VideoPlayer 
-      className={className} 
+      className={cn('mx-auto', className)} 
       sources={b.sources} 
       width={conDim.w} 
       height={conDim.h} 

diff --git a/pkgs/hanzo-ui/blocks/def/bullet-cards-block.ts b/pkgs/hanzo-ui/blocks/def/bullet-cards-block.ts
@@ -5,6 +5,7 @@ import type { BulletItem, GridDef } from '../../types'
 interface BulletCardsBlock extends Block {
   blockType: 'bullet-cards'
     /**
+     * no-card-border
      * borders-muted-1 / borders-muted-3 
      * default: 2 
      */

diff --git a/pkgs/hanzo-ui/blocks/def/carte-blanche-block.ts b/pkgs/hanzo-ui/blocks/def/carte-blanche-block.ts
@@ -6,6 +6,7 @@ import type EnhHeadingBlock from './enh-heading-block'
 interface CarteBlancheBlock extends Block {
   blockType: 'carte-blanche'
     // big-padding
+    // no-outer-borders
     // no-internal-borders
     // style-ghost (no-internal-borders, no outer border, no padding)
   specifiers?: string 

diff --git a/pkgs/hanzo-ui/common/chat-widget.tsx b/pkgs/hanzo-ui/common/chat-widget.tsx
@@ -47,7 +47,7 @@ const ChatWidget: React.FC<{
   return (<>
     <div className={
       'fixed bottom-0 sm:bottom-20 right-0 w-full h-full ' +
-      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-[1001] ' +
+      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-[1002] ' +
       (showChatbot ? 'flex' : 'hidden')
     }>
       <Card className='flex flex-col h-full w-full'>
@@ -65,7 +65,7 @@ const ChatWidget: React.FC<{
       variant='outline'
       size='link'
       onClick={onClick}
-      className='fixed bottom-4 right-0 h-12 w-12 mx-4 rounded-full'
+      className='fixed bottom-4 right-0 h-12 w-12 mx-4 rounded-full z-[1001]'
     >
       {showChatbot ? <X /> : <LuxLogo width={24} height={24} className='mt-2' />}
     </Button>

diff --git a/pkgs/hanzo-ui/types/grid-def.ts b/pkgs/hanzo-ui/types/grid-def.ts
@@ -10,6 +10,15 @@ interface GridDef {
   mobile?: GridColumnSpec
 }
 
+const COMMON_GRID_1_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 1, gap: 3 },
+    lg: { columns: 1, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+}
+
 const COMMON_GRID_2_COL = { 
     at: { 
       xs: {columns: 1, gap: 2}, 
@@ -28,10 +37,20 @@ const COMMON_GRID_3_COL = {
   mobile: {columns: 1, gap: 2}
 } as GridDef
 
+const COMMON_GRID_4_COL = { 
+  at: { 
+    xs: {columns: 1, gap: 2}, 
+    md: {columns: 2, gap: 3}, 
+    lg: {columns: 4, gap: 6}
+  },  
+  mobile: {columns: 1, gap: 2}
+} as GridDef
 
 export {
   type GridDef as default,
   type GridColumnSpec,
+  COMMON_GRID_1_COL,
   COMMON_GRID_2_COL,
-  COMMON_GRID_3_COL
+  COMMON_GRID_3_COL,
+  COMMON_GRID_4_COL
 }
diff --git a/pkgs/hanzo-ui/types/index.ts b/pkgs/hanzo-ui/types/index.ts
@@ -6,7 +6,7 @@ export {
   type ButtonModalDef,
 } from './button-def'
 
-export { COMMON_GRID_2_COL, COMMON_GRID_3_COL } from './grid-def'
+export { COMMON_GRID_1_COL, COMMON_GRID_2_COL, COMMON_GRID_3_COL, COMMON_GRID_4_COL } from './grid-def'
 export type {default as GridDef, GridColumnSpec} from './grid-def'
 export type { TShirtDimensions, Dimensions } from './dimensions' 
 export type { ContactInfo, ContactInfoFields } from './contact-info'