@0.4.8

BulletCardsBlock: added specifiers; added 'border-muted-1' / 'border-muted-3' to override default of 2
CTABlock, ScreenfulBlock: fixed agent === 'phone' over-specificity
InlineIcons from blocks/components --> primitives

pkgs/luxdefi-ui/blocks/components/bullet-cards-block.tsx

@@ -1,9 +1,11 @@
 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'
-import type { Block, BulletCardsBlock } from '../def'
-import InlineIcon from './inline-icon'
 
 const BulletCardsBlockComponent: React.FC<BlockComponentProps> = ({
   block,
@@ -15,12 +17,22 @@ const BulletCardsBlockComponent: React.FC<BlockComponentProps> = ({
     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='md:border md:border-muted-2 rounded px-6 py-1 md:py-4 flex flex-row justify-start items-center not-typography'>
-        <InlineIcon icon={card.icon} size={b.iconSize ?? 28} agent={agent}/>
+      <div key={index} className={cn('md:border rounded px-6 py-1 md:py-4 ' + 
+        'flex flex-row justify-start items-center not-typography text-foreground',
+        borderclx
+      )}>
+        <InlineIcon icon={card.icon} size={b.iconSize ?? 28} agent={agent} className='mr-2 md:mr-4'/>
         <p className='m-0'>{card.text}</p>
       </div>
     ))}

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

@@ -47,15 +47,8 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
   const mobileCenterFirstIfOdd = containsToken(specifiers, 'mobile-center-first-if-odd')
   const mobileOddFullWidth = containsToken(specifiers, 'mobile-odd-full-width')
 
-  const containerclx = (
-    agent === 'phone'
-    &&
-    mobile2Columns
-    && 
-    elements.length > 1 
-  ) 
-    ? 
-    'grid grid-cols-2 gap-2 self-stretch'
+  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 '
 
@@ -69,7 +62,7 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
 
   return (
     <div className={cn(
-      containerclx, 
+      layoutclx, 
       wrapperClasses,
       className
     )}>

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

@@ -6,7 +6,7 @@ import { ApplyTypography } from '../../primitives'
 import { cn, containsToken } from '../../util'
 
 import type BlockComponentProps from './block-component-props'
-import InlineIcon from './inline-icon'
+import InlineIcon from '../../primitives/inline-icon'
 
 const DEFAULTS = {
   preheading: {

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

@@ -8,7 +8,6 @@ import EnhHeadingBlock from './enh-heading-block'
 import GroupBlock from './group-block'
 import HeadingBlock from './heading-block'
 import ImageBlock from './image-block'
-import InlineIcon from './inline-icon'
 import SpaceBlock from './space-block'
 import ScreenfulBlock from './screenful-block'
 import VideoBlock from './video-block'
@@ -24,7 +23,6 @@ export {
    GroupBlock as GroupBlockComponent,
    HeadingBlock as HeadingBlockComponent,
    ImageBlock as ImageBlockComponent,
-   InlineIcon,
    registerBlockType,
    SpaceBlock as SpaceBlockComponent,
    ScreenfulBlock as ScreenfulBlockComponent,

pkgs/luxdefi-ui/blocks/components/screenful-block/content.tsx

@@ -83,15 +83,11 @@ const Content: React.FC<{
 }) => {
 
 
-  const multiColumnLayoutClx = (agent === 'phone') ? 
-    'flex flex-col gap-6'
-    :
-    `grid grid-cols-${b.contentColumns.length} gap-8`
+  const layoutClx = 'flex flex-col gap-6 ' + (agent !== 'phone') ? 'md:grid md:gap-8 ' + `md:grid-cols-${b.contentColumns.length} ` : ''
 
   const orderclx = (columnIndex: number): string => {
-    if ((agent !== 'phone') || !b.mobileOrder || !b.mobileOrder.includes(columnIndex)) return ''
-    const orderIndex = b.mobileOrder.indexOf(columnIndex)
-    return (orderIndex >= 0) ? `order-${orderIndex}` : '' // one-based in flexbox slec
+    const orderIndex = b.mobileOrder?.indexOf(columnIndex)
+    return (orderIndex && orderIndex >= 0) ? `order-${orderIndex} md:order-none` : '' // one-based in flexbox slec
   }
 
   return  b.contentColumns.length == 1 ? (
@@ -102,7 +98,7 @@ const Content: React.FC<{
       className={cn(className)}
     />
   ) : (
-    <div className={cn(multiColumnLayoutClx, className)}>
+    <div className={cn(layoutClx, className)}>
     {b.contentColumns.map((column, index) => (
       <ContentColumn 
         blocks={column} 

pkgs/luxdefi-ui/blocks/def/bullet-cards-block.ts

@@ -4,6 +4,11 @@ import type { BulletItem, GridDef } from '../../types'
 
 interface BulletCardsBlock extends Block {
   blockType: 'bullet-cards'
+    /**
+     * borders-muted-1 / borders-muted-3 
+     * default: 2 
+     */
+  specifiers?: string
   grid: GridDef
   cards: BulletItem[]
     /** in px */

pkgs/luxdefi-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxdefi/ui",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "Library that contains shared UI primitives, common design system components, and boilerplate.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -35,6 +35,8 @@
     "luxdefi"
   ],
   "scripts": {
+    "latest": "npm show @luxdefi/ui version",
+    "pub": "npm publish",
     "build": "tsc",
     "tc": "tsc",
     "clean": "rm -rf dist && rm -rf node_modules"

pkgs/luxdefi-ui/primitives/index.ts

@@ -127,4 +127,5 @@ export { default as Checkbox } from './checkbox'
 export { default as Progress } from './progress' 
 export { default as Separator } from './separator' 
 export { default as Skeleton } from './skeleton' 
+export { default as InlineIcon } from './inline-icon' 
 

pkgs/luxdefi-ui/blocks/components/inline-icon.tsx → pkgs/luxdefi-ui/primitives/inline-icon.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import Image from 'next/image'
 
-import type { Icon } from '../../types'
-import { cn } from '../../util'
-
+import type { Icon } from '../types'
 
 const InlineIcon: React.FC<{
   icon: Icon | string
@@ -19,13 +17,15 @@ const InlineIcon: React.FC<{
   if (!icon) return null
 
   const phone = agent === 'phone'
-
   if (typeof icon === 'string') {
-    const sz = (phone && size) ? (size * .75) : size
-    const mclx = phone ? 'mr-2' : 'mr-4'
-    return <Image src={icon} width={sz} height={sz} alt='icon' className={cn(mclx, className)}/>
+    const _size = (phone && size) ? (size * .75) : size
+    return (<Image src={icon} width={_size} height={_size} alt='icon' className={className}/>)
   }
-  return icon as Icon
+  return (
+    <div className={className}>
+      {icon as Icon}
+    </div>
+  )
 }
 
 export default InlineIcon