@hanzo/ui 0.5.12 → 0.5.14

package/blocks/components/screenful-block/content.tsx

@@ -58,7 +58,12 @@ const ContentColumn: React.FC<{
     }
   }
   else {
-    modifiers += 'justify-start ' 
+    if (specified('mobile-vert-center')) {
+      modifiers += 'justify-center ' 
+    }
+    else {
+      modifiers += 'justify-start ' 
+    }
   }
 
   if (agent === 'phone' && specified('mobile-center-headings')) {

package/blocks/components/screenful-block/index.tsx

@@ -42,7 +42,7 @@ const ScreenfulComponent: React.FC<{
     //    p&m-modifiers
     // ]
   const cwclx = [
-    'z-10 absolute left-0 right-0  top-0 bottom-0 xl:mx-auto max-w-screen-xl overflow-y-hidden ',
+    'z-10 xl:mx-auto max-w-screen-xl overflow-y-hidden ',
       // desktop header: 80px / pt-20
       // mobile header: 44px / pt-11  
     narrowGutters ? 
@@ -53,9 +53,11 @@ const ScreenfulComponent: React.FC<{
     (agent && agent !== 'desktop') ? 'pt-15 sm:pt-17 pb-0 px-3 sm:px-8' : '' 
   ]
 
+  const spreadId = (b.anchorId) ? {id: b.anchorId} : {}
+
   return (
-    <section className={cn('h-[100vh]', (snapTile ? 'snap-start snap-always' : ''), className)}>
-      <ApplyTypography className={tileHeight + 'w-full flex flex-row justify-center self-stretch'} >
+    <section {...spreadId} className={cn((snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen'), className)}>
+      <ApplyTypography className={cn('w-full flex flex-row justify-center self-stretch', snapTile ? tileHeight : '')} >
         <Poster banner={b.banner}>
         {hasBannerVideo() && (
           <Video 
@@ -64,7 +66,7 @@ const ScreenfulComponent: React.FC<{
             initialInView={initialInView}
           />
         )}
-        <div className={cn(...cwclx)} >
+        <div className={cn(...cwclx, snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full')} >
           <Content block={b} agent={agent}  className='w-full'/>
           {b.footer}
         </div>

package/blocks/components/space-block.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { ldMerge } from '../../util'
+import { ldMerge, cn } from '../../util'
 
 import type { Breakpoint } from '../../types'
 import { SPACE_DEFAULTS , type TWSpaceUnit, type HeadingLevel} from '../def/space-block'
@@ -33,7 +33,7 @@ const SpaceBlockComponent: React.FC<BlockComponentProps> = ({
     // This code path should handle a undefined or empty sizes field.
   if (!b.level) {
     if (typeof b.sizes == 'number') {
-      return <div className={`invisible w-[1px] h-${b.sizes}` } /> 
+      return <div className={cn(`invisible w-[1px] h-${b.sizes}`, className) } /> 
     }
     const _sizes: {
       [key in (Breakpoint)]?: TWSpaceUnit
@@ -50,14 +50,14 @@ const SpaceBlockComponent: React.FC<BlockComponentProps> = ({
       console.log(clx)
     }
 
-    return <div className={'invisible w-[1px] ' +  clx} />
+    return <div className={cn('invisible w-[1px] ' +  clx, className)} />
   }
 
   const Tag = TAGS[b.level]
   const heightClx = (b.level === (0 satisfies HeadingLevel as HeadingLevel)) ? 'h-4' : ''
 
   return (
-    <ApplyTypography>
+    <ApplyTypography className={className}>
       <Tag className={'invisible m-0 ' + heightClx} >&nbsp;</Tag> 
     </ApplyTypography>
   )

package/blocks/def/screenful-block.ts

@@ -44,6 +44,9 @@ interface ScreenfulBlock extends Block {
 
     /** optional footer element below the grid */
   footer?: ReactNode
+
+    /** optional id for linking to this slide / screenful */
+  anchorId?: string  
 }
 
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "0.5.12",
+  "version": "0.5.14",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -36,7 +36,7 @@
     "hanzo"
   ],
   "scripts": {
-    "latest": "npm show @hanzo/ui version",
+    "lat": "npm show @hanzo/ui version",
     "pub": "npm publish",
     "build": "tsc",
     "tc": "tsc",

package/tailwind/fonts.tailwind.ts

@@ -17,7 +17,7 @@ export const fontFamily = (ignoreTheme: any): {
 }
 
 export const fontSize = {
-  xxs: ['0.7rem', { lineHeight: '0.9rem' }],    // very fine print               
+  xxs: ['0.6.5rem', { lineHeight: '0.8rem' }],    // very fine print               
   xs: ['0.8rem', { lineHeight: '1rem' }],       // fine print               
   sm: ['0.9rem', { lineHeight: '1.2rem' }],     // 'standard' some news article cards  (set manually when using typography-sm)
   base: ['1rem', { lineHeight: 1.4 }],     

package/tailwind/spacing.tailwind.js

@@ -1,4 +1,11 @@
+const percentages = {}
+for (let i = 0; i <= 100; i++) {
+  percentages[`pr-${i}`] = `${i}%` 
+}
+
+
 export default {
+  ...percentages,
   px: '1px',
   0: '0px',
   0.5: '0.125rem',
@@ -55,3 +62,4 @@ export default {
   80: '20rem',
   96: '24rem',
 }
+

package/tailwind/tailwind.config.base.js

@@ -589,6 +589,7 @@ export default {
       fit: 'fit-content',
     },
     maxWidth: ({ theme, breakpoints }) => ({
+      ...spacing,
       none: 'none',
       0: '0rem',
       xs: '20rem',

package/types/site-def.ts

@@ -26,6 +26,9 @@ interface SiteDef {
     /** default (undefined or absent): @ui/sideDef/footer/legal are rendered */
     /** [] renders nothing above the copyright */
   aboveCopyright?: LinkDef[] 
+
+      /** any site-specific stuff we'd like access to (link urls, etc) */
+  ext?: any 
 }
 
 export { type SiteDef as default }

package/util/index.ts

@@ -74,3 +74,8 @@ export const ldMerge = (
   result: any,
   ...sources: any[]
 ): any => (_merge(result, ...sources))
+
+export const capitalize = (str: string): string => (
+  str.charAt(0).toUpperCase() + str.slice(1)
+)
+