Removed BlockFactory in favor of ContentComponent

 can render one block or an array
Moved wrapped exceptions for CTA, Group, Heading
into their respective Components
Added spacing to HeadingBlock
minor bug fixes

pkgs/luxdefi-ui/blocks/components/block-factory.tsx → pkgs/luxdefi-ui/blocks/components/content.tsx

@@ -49,4 +49,22 @@ const BlockFactory: React.FC<{
   return <>unknown block type</>
 }
 
-export default BlockFactory
+const ContentComponent: React.FC<{
+  blocks: B.Block | B.Block[] | undefined
+}> = ({
+  blocks
+}) => {
+  if (!blocks) return null
+  if (Array.isArray(blocks)) {
+    return (<>
+      {blocks.map((block, index) => {
+        return (<BlockFactory block={block} key={`content-block-${index}`}/>)
+      })}
+    </>)
+  }
+  return (
+    (<BlockFactory block={blocks}/>)   
+  )
+}
+
+export default ContentComponent

pkgs/luxdefi-ui/blocks/components/cta-block.tsx

@@ -3,11 +3,12 @@ import React from 'react'
 import type { LinkDef, ButtonDef} from '../../types'
 import  { type ButtonSizes, ActionButton, LinkElement } from '../../primitives'
 import type { Block, CTABlock } from '../def'
+import { cn, containsToken } from '../../util'
 
 const CtaBlockComponent: React.FC<{
   block: Block,
   itemClassName?: string,
-  itemSize?: ButtonSizes
+  itemSize?: ButtonSizes,
   renderLink?: (def: LinkDef, key: any) => JSX.Element
   renderButton?: (def: ButtonDef, key: any) => JSX.Element
 }> = ({
@@ -22,10 +23,25 @@ const CtaBlockComponent: React.FC<{
     return <>cta block required</>
   }
 
-  const { elements } = block as CTABlock
+  const { elements, specifiers } = block as CTABlock
+  let wrapperClasses = ''
+  let itemClasses = ''
+  if (containsToken(specifiers, 'fill')) {
+    wrapperClasses += 'w-full '
+    itemClasses += 'grow ' 
+  }
+  else if (containsToken(specifiers, 'left')) {
+    wrapperClasses += 'sm:justify-start '
+  }
+  else if (containsToken(specifiers, 'right')) {
+    wrapperClasses += 'sm:justify-end '
+  }
 
   return (
-    <>
+    <div className={cn(
+      'flex flex-col items-stretch gap-2 self-stretch sm:flex-row sm:justify-center ', 
+      wrapperClasses
+    )}>
     {elements.map((element, index) => {
       if ((element as any).title) {
         const def = element as LinkDef
@@ -50,7 +66,7 @@ const CtaBlockComponent: React.FC<{
         ) 
       }
     })}
-    </>
+    </div>
   )
 }
 

pkgs/luxdefi-ui/blocks/components/group-block.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
-import { type Breakpoint, Breakpoints} from '../../types'
+import { Breakpoints} from '../../types'
 import { cn } from '../../util'
 
 import type { Block, GroupBlock } from '../def'
-import BlockFactory from './block-factory'
+import Content from './content'
 
-// eg: 'layout-grid-2-starting-md'
-// see comments below regarding dynamic classes and the safelist
+  // eg: 'layout-grid-2-starting-md'
+  // see comments below regarding dynamic classes and the safelist
 const getLayoutInfo = (s: string): {
   layout: string
   spec: any
@@ -72,14 +72,12 @@ const GroupBlockComponent: React.FC<{
         className)
       return (
         <div className={clazzName}>
-        {elements.map((block, index) => (
-          <BlockFactory block={block} key={index} />
-        ))}
+          <Content blocks={elements} />
         </div>
       )
     }
   }
-  return <></>
+  return null
 }
 
 export default GroupBlockComponent

pkgs/luxdefi-ui/blocks/components/heading-block.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 
 import type { Block, HeadingBlock } from '../def'
+import { cn } from '../../util'
+import { ApplyTypography } from '../../primitives'
 
 const HeadingBlockComponent: React.FC<{
   block: Block,
@@ -15,41 +17,73 @@ const HeadingBlockComponent: React.FC<{
   }
   const heading = block as HeadingBlock
 
-  let Tag: React.ElementType = 'h3' // default 
-  let BylineTag: React.ElementType = 'h5' // default: two levels below main
-
+  let Tag: React.ElementType  
+  let BylineTag: React.ElementType | undefined = undefined 
+
+  switch (heading.bylineLevel) {
+    case 0: {
+      BylineTag = 'p'
+    } break
+    case 1: {
+      BylineTag = 'h1'
+    } break
+    case 2: {
+      BylineTag = 'h2'
+    } break
+    case 3: {
+      BylineTag = 'h3'
+    } break
+    case 4: {
+      BylineTag = 'h4'
+    } break
+    case 5: {
+      BylineTag = 'h5'
+    } break
+    case 6: {
+      BylineTag = 'h6'
+    } break
+  }
+    // bylineLevel default is two levels below the main heading
   switch (heading.level) {
     case 0: {
       Tag = 'p'
-      BylineTag = 'p'
+      BylineTag = BylineTag ?? 'p'
     } break
     case 1: {
       Tag = 'h1'
-      BylineTag = 'h3'
+      BylineTag = BylineTag ?? 'h3'
     } break
     case 2: {
       Tag = 'h2'
-      BylineTag = 'h4'
+      BylineTag = BylineTag ?? 'h4'
     } break
-
+    // 3 is default
     case 4: {
       Tag = 'h4'
-      BylineTag = 'h6'
+      BylineTag = BylineTag ?? 'h6'
     } break
     case 5: {
       Tag = 'h5'
-      BylineTag = 'p'
+      BylineTag = BylineTag ?? 'p'
     } break
     case 6: {
       Tag = 'h6'
-      BylineTag = 'p'
+      BylineTag = BylineTag ?? 'p'
     } break
+    default: {
+      Tag = 'h3'
+      BylineTag = BylineTag ?? 'h5'
+    }
   }
-
-  return (<>
-    <Tag className={className}>{heading.heading}</Tag>
-    {heading.byline && (<BylineTag >{heading.byline}</BylineTag>)}
-  </>)
+    // Had to do this way, since tw typo plugin does support overrding typo styling wiithout .not-typography
+  return (
+    <ApplyTypography>
+      <Tag className={className}>{heading.heading}</Tag>
+      {heading.spaceBetween && <div className={'w-[1px] ' + `h-${heading.spaceBetween}`} />}
+      {heading.byline && (<BylineTag>{heading.byline}</BylineTag>)}
+      {heading.spaceAfter && <div className={'w-[1px] ' + `h-${heading.spaceAfter}`} />}
+    </ApplyTypography>
+  )
 }
 
 export default HeadingBlockComponent

pkgs/luxdefi-ui/blocks/components/index.ts

@@ -1,5 +1,6 @@
 import AccordianBlock from './accordian-block'
-import BlockFactory from './block-factory'
+import Content from './content'
+import Blocks from './content'
 import CardBlock from './card-block'
 import CTABlock from './cta-block'
 import GroupBlock from './group-block'
@@ -10,7 +11,8 @@ import SpaceBlock from './space-block'
 
 export { 
    AccordianBlock as AccordianBlockComponent, 
-   BlockFactory,
+   Content as ContentComponent,
+   Blocks as BlocksComponent,
    CardBlock as CardBlockComponent,
    CTABlock as CTABlockComponent,
    GroupBlock as GroupBlockComponent,

pkgs/luxdefi-ui/blocks/components/space-block.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import type { Block, SpaceBlock } from '../def'
+import { ApplyTypography } from '../../primitives'
 
 const SpaceBlockComponent: React.FC<{
   block?: Block
@@ -40,7 +41,9 @@ const SpaceBlockComponent: React.FC<{
   }
 
   return (
-    <Tag className={`invisible m-0 ${Tag === 'div' ? 'h-[1px]' : ''} ${className}`} >&nbsp;</Tag> 
+    <ApplyTypography>
+      <Tag className={`invisible m-0 ${Tag === 'div' ? 'h-[1px]' : ''} ${className}`} >&nbsp;</Tag> 
+    </ApplyTypography>
   )
 }
 

pkgs/luxdefi-ui/blocks/def/heading-block.ts

@@ -5,6 +5,9 @@ interface HeadingBlock extends Block {
   heading: string
   byline?: string
   level?: number
+  bylineLevel?: number
+  spaceBetween?: number 
+  spaceAfter?: number 
 }
 
 export {

pkgs/luxdefi-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxdefi/ui",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "Library that contains shared UI primitives, styles, and core types",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

pkgs/luxdefi-ui/primitives/button.tsx

@@ -7,7 +7,7 @@ import { cn } from "../util"
 const variant = {
   primary: "bg-primary-lux text-primary-fg hover:bg-primary-hover font-heading whitespace-nowrap not-typography",
   secondary: "bg-secondary-lux text-secondary-fg hover:bg-secondary/80 font-heading whitespace-nowrap not-typography",
-  outline: "text-foreground border border-muted-4 hover:bg-level-1 hover:text-accent hover:border-accent font-heading whitespace-nowrap not-typography",
+  outline: "text-foreground bg-background border border-muted-4 hover:bg-level-1 hover:text-accent hover:border-accent font-heading whitespace-nowrap not-typography",
   destructive: "bg-destructive text-destructive-fg font-sans whitespace-nowrap hover:bg-destructive-hover",
   ghost: "text-foreground hover:bg-level-1 hover:text-accent whitespace-nowrap font-sans ",
   link: "text-foreground hover:text-muted-1 font-sans ",
@@ -19,7 +19,7 @@ const size = {
   sm: "h-9 px-3 text-xs ",
   square: 'h-10 py-2 px-2 text-sm aspect-square',
   default: "h-10 py-2 px-4 text-sm lg:min-w-[220px]",
-  lg: "h-10 px-8 text-base rounded-lg min-w-[260px] lg:min-w-[300px] lg:h-10 xs:min-w-0 xs:text-sm",
+  lg: "h-10 px-8 text-base rounded-lg min-w-[260px] lg:min-w-[300px] xs:min-w-0 xs:text-sm",
   icon: "h-10 w-10",
 }
 

pkgs/luxdefi-ui/tailwind/safelist.tailwind.js

@@ -24,5 +24,18 @@ export default [
   'lg:columns-5',
   'lg:columns-6',
   'lg:columns-7',
-  'font-sans'
+  'font-sans',
+    // for headling block spacing
+  'h-1',
+  'h-2',
+  'h-3',
+  'h-4',
+  'h-5',
+  'h-6',
+  'h-7',
+  'h-9',
+  'h-10',
+  'h-11',
+  'h-12',
+
 ]

pkgs/luxdefi-ui/tailwind/typo-plugin/get-plugin-styles.js

@@ -433,15 +433,7 @@ const defaultModifiers = (base) => ({
         'tbody td:last-child, tfoot td:last-child': {
           paddingRight: '0',
         },
-      },
-      {
-        '> :first-child': {
-          marginTop: '0',
-        },
-        '> :last-child': {
-          marginBottom: '0',
-        },
-      },
+      }
     ],
   },
   sm: {
@@ -510,11 +502,7 @@ const defaultModifiers = (base) => ({
         'tbody td, tfoot td': {},
         'tbody td:first-child, tfoot td:first-child': {},
         'tbody td:last-child, tfoot td:last-child': {},
-      },
-      {
-        '> :first-child': {},
-        '> :last-child': {},
-      },
+      }
     ],
   },
   lg: {
@@ -596,11 +584,7 @@ const defaultModifiers = (base) => ({
         'tbody td, tfoot td': {},
         'tbody td:first-child, tfoot td:first-child': {},
         'tbody td:last-child, tfoot td:last-child': {},
-      },
-      {
-        '> :first-child': {},
-        '> :last-child': {},
-      },
+      }
     ],
   },
 })

pkgs/luxdefi-ui/util/index.ts

@@ -64,3 +64,5 @@ export const constrain = (dim: Dimensions, constraint: Dimensions): Dimensions =
     h: Math.round(d.h * ratio)
   }
 }
+
+export const containsToken = (s: string | undefined, toFind: string): boolean => (s ? s.split(' ').includes(toFind) : false)