[email protected], [email protected]: Various minor tweaks and enhancements

packages/commerce/components/facets-widget.tsx

@@ -17,6 +17,7 @@ const FacetsWidget: React.FC<PropsWithChildren & {
   id?: string
   className?: string
   tabSize?: string 
+  childrenAfter?: boolean
 }> = ({
   children,
   facets,
@@ -27,11 +28,13 @@ const FacetsWidget: React.FC<PropsWithChildren & {
   isMobile=false,
   className='',
   tabSize,
-  id='FacetsWidget'
+  id='FacetsWidget',
+  childrenAfter=true
 }) => {
   const horiz = className.includes('flex-row')
   return (
     <div id={id} className={className} >
+    {!childrenAfter && children}
     {Object.keys(facets).map((key, i) => (
       <FacetTogglesWidget 
         key={i}
@@ -44,7 +47,7 @@ const FacetsWidget: React.FC<PropsWithChildren & {
         tabSize={tabSize}
       />
     ))}
-      {children}
+      {childrenAfter && children}
     </div>
   )
 }

packages/commerce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

packages/ui/blocks/components/cta-block.tsx

@@ -44,13 +44,30 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
   }
 
   const mobile2Columns = containsToken(specifiers, 'mobile-2-columns')
+    // normally 'default' buttons have a min width only at > lg.
+    // generally if more than one we don't want this and override it,
+    // but this specifier asks to observe the default behavior.
+  const fillEvenly = !containsToken(specifiers, 'desktop-dont-fill')
   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 '
+  let layoutclx: string | undefined = undefined
+  if (elements.length > 1) {
+    let resetMinWidth = false
+    if (mobile2Columns) {
+      layoutclx = 'grid grid-cols-2 gap-2 self-stretch '   
+      resetMinWidth = true 
+    }
+    if (fillEvenly) {
+      layoutclx = (layoutclx ?? 'grid grid-cols-2 gap-2 self-stretch') 
+      resetMinWidth = true 
+    }
+    else {
+      layoutclx = layoutclx ? (layoutclx + 'md:flex md:flex-row md:justify-center ') : 'flex flex-row justify-center '    
+    }
+    itemclx += resetMinWidth ? '!min-w-0 ' : ''
+  }
+  layoutclx = layoutclx ?? '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

packages/ui/blocks/components/screenful-block/content.tsx

@@ -91,7 +91,7 @@ const Content: React.FC<{
 }) => {
 
 
-  const layoutClx = 'flex flex-col gap-6 ' + ((agent !== 'phone') ? ('md:grid md:gap-8 ' + `md:grid-cols-${b.contentColumns.length} `) : '')
+  const layoutClx = 'flex flex-col gap-2 sm:gap-4 ' + ((agent !== 'phone') ? ('md:grid md:gap-8 ' + `md:grid-cols-${b.contentColumns.length} `) : '')
 
   const orderclx = (columnIndex: number): string => {
     const orderIndex = b.mobileOrder?.indexOf(columnIndex)

packages/ui/blocks/components/screenful-block/index.tsx

@@ -15,12 +15,14 @@ const ScreenfulComponent: React.FC<{
   initialInView?: boolean
   snapTile?: boolean
   className?: string
+  contentClx?: string
 }> = ({
   block,
   agent,
   initialInView=false,
   snapTile=false,
-  className=''
+  className='',
+  contentClx=''
 }) => {
 
   if (block.blockType !== 'screenful') {
@@ -46,7 +48,7 @@ const ScreenfulComponent: React.FC<{
       // desktop header: 80px / pt-20
       // mobile header: 44px / pt-11  
     narrowGutters ? 
-      'px-6 lg:px-8 2xl:px-2 pb-6 pt-15 md:pt-26 lg:pt-28 ' 
+      'px-6 lg:px-8 2xl:px-2 pb-6 ' + (snapTile  ? 'pt-15 md:pt-26 lg:pt-28 ' : '') // otherwise assume there is a Main
       : 
       'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)] ',
 
@@ -66,7 +68,7 @@ const ScreenfulComponent: React.FC<{
             initialInView={initialInView}
           />
         )}
-        <div className={cn(...cwclx, snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full')} >
+        <div className={cn(...cwclx, snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full', contentClx)} >
           <Content block={b} agent={agent}  className='w-full'/>
           {b.footer}
         </div>

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",