@hanzo/ui 0.5.10

package/blocks/components/accordian-block.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { 
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  ApplyTypography
+} from '../../primitives'
+
+import { cn } from '../../util'
+
+import type { AccordianBlock } from '../def'
+import type BlockComponentProps from './block-component-props'
+
+const AccordianBlockComponent: React.FC<BlockComponentProps> = ({
+  block,
+  className=''
+}) => {
+
+  if (block.blockType !== 'accordian') {
+    return <>accordian block required</>
+  }
+
+  const accordian = block as AccordianBlock
+
+  return (
+    <Accordion type="single" collapsible className={cn('w-full border rounded-xl overflow-hidden', className)}>
+      {accordian.items.map((item, index) => (
+      <AccordionItem className='border-b last:border-0 overflow-hidden' value={`value-${index}`} key={index}>
+        <AccordionTrigger className='px-3 md:px-4 lg:px-6 hover:no-underline hover:bg-level-3' >
+          <ApplyTypography>
+            {/* styles specific to accordion.  From old site */}
+            <h6 className='leading-[1.2] text-[1.05rem] font-semibold ' >{item.trigger}</h6>
+          </ApplyTypography>
+        </AccordionTrigger>
+        <AccordionContent className='p-4 border-t bg-level-1'>
+        <ApplyTypography className='flex flex-col justify-start items-start '>
+          {(typeof item.content === 'string') ? (<p>{item.content}</p>) : item.content} 
+        </ApplyTypography>
+        </AccordionContent>
+      </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
+
+export default AccordianBlockComponent

package/blocks/components/block-component-props.ts

@@ -0,0 +1,11 @@
+import type { Block } from "../def";
+
+interface BlockComponentProps {
+  block: Block
+  className?: string
+  agent?: string
+}
+
+export {
+  type BlockComponentProps as default
+}

package/blocks/components/bullet-cards-block.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import { containsToken, cn } from '../../util'
+import type { Block, BulletCardsBlock } from '../def'
+import InlineIcon from '../../primitives/inline-icon'
+
+import type BlockComponentProps from './block-component-props'
+import GridBlockComponent from './grid-block'
+
+const BulletCardsBlockComponent: React.FC<BlockComponentProps> = ({
+  block,
+  className='',
+  agent
+}) => {
+
+  if (block.blockType !== 'bullet-cards') {
+    return <>bullet cards block required</>
+  }
+  const b = block as BulletCardsBlock
+  const specified = (s: string) => (containsToken(b.specifiers, s))
+  
+  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 ' + 
+        'flex flex-row justify-start items-center not-typography text-foreground',
+        borderclx
+      )}>
+        <InlineIcon icon={card.icon} size={b.iconSize ?? 28} agent={agent} className='shrink-0 mr-2 w-6 md:mr-4 md:w-7 '/>
+        <p className='m-0 text-sm sm:text-base'>{card.text}</p>
+      </div>
+    ))}
+    </GridBlockComponent>
+  )
+}
+
+export default BulletCardsBlockComponent

package/blocks/components/card-block.tsx

@@ -0,0 +1,213 @@
+import React from 'react'
+
+import type { Dimensions, LinkDef, TShirtDimensions  } from  '../../types'
+
+import {
+  ApplyTypography,  
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  LinkElement,
+  type TypographySize
+} from '../../primitives'
+
+import { Icons } from '../../common'
+
+import {
+  getSpecifierData, 
+  getPrimaryStartingWith, 
+  getDim, 
+} from '../../util/specifier'
+
+import type { Block, CardBlock } from '../def'
+
+
+import ImageBlockComponent from './image-block'
+import VideoBlockComponent from './video-block'
+import CTABlockComponent from './cta-block'
+import type BlockComponentProps from './block-component-props'
+import { cn } from '../../util'
+
+const ArrowLinkElement: React.FC<{
+  def: LinkDef,
+}> = ({
+  def
+}) => (
+  <LinkElement
+    def={def}
+    className='justify-between'
+    variant='link'
+    icon={<Icons.linkOut className='w-[18px] h-[18px]' />}
+    iconAfter
+  />
+) 
+
+const getTypographySize = (s: string): TypographySize => (
+  getSpecifierData<TypographySize>(
+    s,
+    (s: string) => (getPrimaryStartingWith(s, 'typography')),
+    (s: string): TypographySize | undefined => {
+      const subTokenArray = s.split('-')
+      return subTokenArray[subTokenArray.length - 1] as TypographySize
+    },
+    'responsive'
+  ) as TypographySize
+)
+
+const getSmallIconDim = (s: string): Dimensions | undefined => (
+  getSpecifierData<Dimensions>(
+    s,
+    (s: string) => (getPrimaryStartingWith(s, 'small-icon')),
+    getDim,
+  ) 
+)
+
+const CardBlockComponent: React.FC<
+  BlockComponentProps & {
+  contentClassName?: string
+}> = ({
+  block,
+  className='',
+  contentClassName=''
+}) => {
+
+  if (block.blockType !== 'card') {
+    return <>card block required</>
+  }
+
+  const card = block as CardBlock
+  const has = (s: string) => (card.specifiers?.includes(s))  
+
+  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 disabledBorder = (has('appear-disabled' ) ? ' border-muted-4' : ' border-muted-3')
+  const outerBorder = ((has('no-outer-border') || ghost) ? ' border-0' : '')
+  const innerBorder = (ghost ? ' border-0' : '')
+  const paddingclx = ghost ? ' px-0 py-0' : ' px-6 py-3'
+  const mainGap = ghost ? ' gap-2' : ''
+  const disabledText = (has('appear-disabled') ? ' text-muted-2' : '')
+  const disabledTypoText = (has('appear-disabled') ? ' typography-p:text-muted-2' : '')
+  const bgclx = (has('bg-card') ? ' bg-level-1' : '')
+  const titleclx = (has('heading-style-title') ? ' font-heading text-base leading-tight' : '') + 
+    (ghost ? ' text-left md:text-xl' : '') 
+  
+  const typoSize: TypographySize = (card.specifiers) ? getTypographySize(card.specifiers) : 'responsive'
+  const typoclx = (typoSize === 'sm') ? 'typography-sm typography-p:text-sm ' : (typoSize === 'lg') ? 'typography-lg ' : '' 
+
+  const contentBefore = has('content-before')
+  const iconInline = has('icon-inline')
+  const contentOnHover = has('reveal-content-on-hover')
+  //const smallIconDim = (contentOnHover && card.specifiers) ? getSmallIconDim(card.specifiers) : undefined
+  
+  const Header: React.FC<{
+    inContent?: boolean
+    className?: string
+  }> = ({
+    inContent=false,
+    className=''
+  }) => (
+    (card.title || card.byline || card.icon) ? (
+      <CardHeader className={'not-typography' + ' text-accent' + disabledText + paddingclx + innerBorder + className}>
+      <div className={(iconInline || inContent) ? 'flex flex-row justify-start items-end my-3' : ''}>        
+      {(card.icon && !card.iconAfter ) && (<div className={iconInline ? 'mr-1' : 'mb-2'}>{card.icon}</div>)}
+      {card.title && (
+        <CardTitle className={'text-center text-lg font-medium' + titleclx + (iconInline ? ' md:text-xl/none' : '') }>
+          {card.title}
+        </CardTitle>
+      )}
+      {(card.icon && card.iconAfter) && (<div className={iconInline ? 'ml-1' : 'my-1'}>{card.icon}</div>)}
+      </div>
+      {card.byline && (<CardDescription>{card.byline}</CardDescription>)}
+      </CardHeader>      
+    ) : null
+  )
+
+  const MediaAndContent: React.FC<{
+    className?: string
+  }> = ({
+    className=''
+  }) => (has('media-left') ? ( 
+    // media left layout
+    <CardContent className={'flex flex-row justify-start items-stretch p-0 grow ' + disabledBorder + bgclx + contentclx + className}>
+    {card.media && (
+      <div className={'box-content grow-0 not-typography' + paddingclx} style={{
+          // If this layout has been specified, assume video, and that the 'sm' variant is there.
+        width: (card.media.dim as TShirtDimensions).sm!.w 
+      }}>
+        <VideoBlockComponent 
+          block={card.media} 
+          usePoster={has('video-use-poster')} 
+          size='sm' 
+          className={has('appear-disabled') ? 'opacity-[0.6]' : ''}
+        />
+      </div>
+    )}
+    {card.content && (
+      <ApplyTypography className={'grow border-l flex flex-col justify-center '  + disabledTypoText + paddingclx + disabledBorder + contentclx} size={typoSize}>
+        {(typeof card.content === 'string') ? (<p>{card.content}</p>) : card.content} 
+      </ApplyTypography>
+    )}
+    </CardContent>
+  ) : ( // default layout
+    <CardContent className={
+      'grow typography flex flex-col justify-center ' + 
+      typoclx + disabledTypoText + bgclx + paddingclx + contentclx + (has('full-width') ? ' p-0 ' : ' ') +
+      className
+    }>
+      {contentOnHover && (<Header inContent/>)}
+      {card.content && contentBefore && (
+        (typeof card.content === 'string') ? (<p>{card.content}</p>) : card.content
+      )}
+      {card.media && (card.media.blockType === 'image' ? (
+        <ImageBlockComponent block={card.media} />
+      ) : (
+        <VideoBlockComponent block={card.media} />
+      ))}
+      {card.content && !contentBefore && (
+        (typeof card.content === 'string') ? (<p>{card.content}</p>) : card.content
+      )}
+    </CardContent>
+  ))
+
+  const Footer: React.FC = () => ( !card.cta ? null : (has('links-w-arrow') ? (
+      // links w arrow
+    <CardFooter className={
+      'typography typography-a:text-muted-2 typography-a:hover:text-muted-1 typography-a:text-xs typography-a:no-underline typography-a:hover:underline ' + 
+      'flex flex-col justify-start items-stretch ' + paddingclx
+    }>
+      <CTABlockComponent 
+        block={card.cta} 
+        renderLink={(def: LinkDef, key: any) => (<ArrowLinkElement def={def} key={key} />)}
+      />
+    </CardFooter>
+  ) : ( // default 
+    <CardFooter className={'grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center ' + paddingclx} >
+      <CTABlockComponent block={card.cta} />
+    </CardFooter>
+  )))
+
+  return (
+    <Card className={cn(
+      'flex flex-col self-stretch ' + 
+      (contentOnHover ? 'group relative' : '') + 
+      disabledBorder + 
+      outerBorder + 
+      bgclx + 
+      mainGap, 
+      className
+    )}>
+      <Header className={(contentOnHover ? ' absolute top-[0px] left-[0px] w-full hidden ' : '')}/>
+      <MediaAndContent className={(contentOnHover ? 
+        ' bg-gradient-to-t from-secondary to-65%' + 
+        ' items-start justify-start rounded-lg p-4' + 
+        ' transition-opacity duration-500 ease-out opacity-100  ' : '')}/>
+      <Footer />
+    </Card>  
+  )
+}
+
+export default CardBlockComponent

package/blocks/components/carte-blanche-block/index.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from '../../../primitives'
+
+import { cn, containsToken } from '../../../util'
+
+import {
+  getSpecifierData, 
+  getPrimaryStartingWith, 
+  getDim, 
+} from '../../../util/specifier'
+
+import type CarteBlancheBlock from '../../def/carte-blanche-block'
+
+import CTABlockComponent from '../cta-block'
+import Content from '../content'
+import type BlockComponentProps from '../block-component-props'
+import { EnhHeadingBlockComponent } from '..'
+
+type CardSection = 'entire' | 'header' | 'content' | 'footer'
+
+const _getClx = (specifier: string, section: CardSection): string => {
+  let result = ''
+  if (specifier === 'big-padding') {
+    switch (section) {
+        // defaults: p-4 lg:p-6 xl:p-8 
+      case 'header': {
+        result = 'md:p-8 lg:p-12 xl:p-16'
+      } break
+    }
+  }
+  else if (specifier === 'no-inner-borders') {
+    switch (section) {
+      case 'header': {
+        result = 'border-none'
+      } break
+    }
+  }
+
+  return result
+}
+
+const CarteBlancheBlockComponent: React.FC<
+  BlockComponentProps 
+> = ({
+  block,
+  className='',
+  agent,
+}) => {
+
+  if (block.blockType !== 'carte-blanche') {
+    return <>carte blanche block required</>
+  }
+
+  const b = block as CarteBlancheBlock
+
+  const specified = (s: string): boolean => (containsToken(b.specifiers, s))
+  const getClx = (specifier: string, section: CardSection): string => (
+    (specified(specifier)) ? _getClx(specifier, section) : ''
+  )
+
+  //const bigPadding = specified('big-padding')
+  
+  const headingclx = [
+    getClx('big-padding', 'header'),
+    getClx('no-inner-borders', 'header'),
+  ].join(' ')
+
+  return (
+    <Card className={cn('flex flex-col ', className)} >
+    {b.heading && (
+      <CardHeader className={cn('typography-img:m-0', headingclx)} >
+      {b.topContent && (
+        <Content blocks={b.topContent} agent={agent} className=''/>
+      )}
+        <EnhHeadingBlockComponent block={b.heading} className='text-accent' agent={agent}/>
+      </CardHeader>
+    )}
+    {b.content && (
+      <CardContent className={cn('typography flex flex-col justify-center', className)}>
+        <Content blocks={b.content} agent={agent}/>
+      </CardContent>
+    )}
+    {b.cta && (
+      <CardFooter className={'grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center ' /*+ paddingclx*/} >
+        <CTABlockComponent block={b.cta} agent={agent}/>
+      </CardFooter>
+    )}
+    </Card> 
+  )
+}
+
+export default CarteBlancheBlockComponent

package/blocks/components/content.tsx

@@ -0,0 +1,70 @@
+import React, { type ComponentType, type ReactNode} from 'react'
+
+import type * as B from '../def'
+
+import AccordianBlockComponent from './accordian-block'
+import BulletCardsBlockComponent from './bullet-cards-block'
+import CTABlockComponent from './cta-block'
+import CardBlockComponent from './card-block'
+import CarteBlancheBlockComponent from './carte-blanche-block'
+import EnhHeadingBlockComponent from './enh-heading-block'
+import HeadingBlockComponent from './heading-block'
+import GroupBlockComponent from './group-block'
+import GridBlockComponent from './grid-block'
+import ImageBlockComponent from './image-block'
+import SpaceBlockComponent from './space-block'
+import VideoBlockComponent from './video-block'
+
+import type BlockComponentProps from './block-component-props'
+
+const map = new Map<string, ComponentType<BlockComponentProps>>()
+map.set('accordian', AccordianBlockComponent)
+map.set('bullet-cards', BulletCardsBlockComponent)
+map.set('card', CardBlockComponent)
+map.set('carte-blanche', CarteBlancheBlockComponent)
+map.set('cta', CTABlockComponent)
+map.set('heading', HeadingBlockComponent)
+map.set('enh-heading', EnhHeadingBlockComponent as ComponentType<BlockComponentProps>)
+map.set('space', SpaceBlockComponent)
+map.set('image', ImageBlockComponent)
+map.set('video', VideoBlockComponent)
+map.set('group', GroupBlockComponent)
+map.set('grid', GridBlockComponent)
+
+const registerBlockType = (key: string, type: ComponentType<BlockComponentProps>): void => {
+  map.set(key, type)
+}
+
+const renderBlock = (block: B.Block, className: string, agent?: string, keyStr?: string): ReactNode => {
+  if (block.blockType === 'element') {
+    return (block as B.ElementBlock).element
+  }
+  const CompType = map.get(block.blockType)
+  if (!CompType) return null
+  return <CompType block={block} className={className} agent={agent} key={keyStr ?? ''} /> 
+}
+
+const ContentComponent: React.FC<{
+  blocks: B.Block | B.Block[] | undefined
+  className?: string
+  agent?: string
+}> = ({
+  blocks,
+  className='',
+  agent
+}) => {
+  if (!blocks) return null
+  if (Array.isArray(blocks)) {
+    return (
+      blocks.map((block, index) => (
+        renderBlock(block, className, agent, `content-block-${block.blockType}-${index}`)
+      ))
+    )
+  }
+  return renderBlock(blocks, className, agent)
+}
+
+export {
+  ContentComponent as default,
+  registerBlockType
+}

package/blocks/components/cta-block.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+
+import type { LinkDef, ButtonDef} from '../../types'
+import  { type ButtonSizes, ActionButton, LinkElement } from '../../primitives'
+import type { CTABlock } from '../def'
+import { cn, containsToken } from '../../util'
+
+import type BlockComponentProps from './block-component-props'
+
+const CtaBlockComponent: React.FC<BlockComponentProps & {
+  itemClasses?: string
+  itemSize?: ButtonSizes,
+  renderLink?: (def: LinkDef, key: any) => JSX.Element
+  renderButton?: (def: ButtonDef, key: any) => JSX.Element
+}> = ({
+  block,
+  className='', // assigned to each item
+  itemClasses='',
+  itemSize, // do not provide default.  this is an override to the def
+  renderLink,
+  renderButton,
+  agent
+}) => {
+  
+  if (block.blockType !== 'cta') {
+    return <>cta block required</>
+  }
+
+  const { elements, specifiers } = block as CTABlock
+  let wrapperClasses = ''
+  let itemclx = ''
+  if (containsToken(specifiers, 'fill')) {
+    wrapperClasses += 'w-full '
+    itemclx += 'grow shrink !min-w-0' 
+  }
+  else if (containsToken(specifiers, 'left')) {
+    wrapperClasses += 'md:justify-start '
+  }
+  else if (containsToken(specifiers, 'right')) {
+    wrapperClasses += 'md:justify-end '
+  }
+  else {
+    wrapperClasses += 'md:justify-center '
+  }
+
+  const mobile2Columns = containsToken(specifiers, 'mobile-2-columns')
+  const mobileCenterFirstIfOdd = containsToken(specifiers, 'mobile-center-first-if-odd')
+  const mobileOddFullWidth = containsToken(specifiers, 'mobile-odd-full-width')
+  
+  const layoutclx = (mobile2Columns && elements.length > 1) ? 
+    'grid grid-cols-2 gap-2 self-stretch md:flex md:flex-sm md:justify-center '
+    :
+    'flex flex-col items-stretch gap-2 self-stretch md:flex-row sm:justify-center '
+
+  const getMobileColSpanClx = (index: number, total: number) => {
+    const indexToCenter = (total % 2 === 0) ? -1 : (mobileCenterFirstIfOdd) ? 0 : total - 1
+    const widthclx = mobileOddFullWidth ? 'w-full ' : 'w-3/5 mx-auto '
+    return (
+      (agent === 'phone' && mobile2Columns && (index === indexToCenter)) ? ('col-span-2 ' + widthclx) : ''  
+    )
+  } 
+
+  return (
+    <div className={cn(
+      layoutclx, 
+      wrapperClasses,
+      className
+    )}>
+    {elements.map((element, index) => {
+      const twoColClx = getMobileColSpanClx(index, elements.length)
+      if ((element as any).title) {
+        const def = element as LinkDef
+        return renderLink ? renderLink(def, index) : (
+          <LinkElement 
+            def={def}
+            key={index}
+            size={itemSize}
+            className={cn(itemclx, itemClasses, twoColClx)}
+          />
+        )
+      } 
+      else {
+        const def = element as ButtonDef
+        return renderButton ? renderButton(def, index) : (
+          <ActionButton 
+            def={def}
+            key={index}
+            size={itemSize}
+            className={cn(itemclx, itemClasses, twoColClx)}
+          />
+        ) 
+      }
+    })}
+    </div>
+  )
+}
+
+export default CtaBlockComponent