@hanzo/ui 0.5.14 → 0.5.16

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

@@ -21,6 +21,7 @@ import CTABlockComponent from '../cta-block'
 import Content from '../content'
 import type BlockComponentProps from '../block-component-props'
 import { EnhHeadingBlockComponent } from '..'
+import VariantContentLeft from './variant-content-left'
 
 type CardSection = 'entire' | 'header' | 'content' | 'footer'
 
@@ -46,6 +47,9 @@ const _getClx = (specifier: string, section: CardSection): string => {
       case 'header': {
         result = 'border-none'
       } break
+      case 'footer': {
+        result = 'border-t-0'
+      } break
     }
   }
 
@@ -82,28 +86,40 @@ const CarteBlancheBlockComponent: React.FC<
     getClx('big-padding-content', 'content'),
   ].join(' ')
 
+  const footerclx = [
+    getClx('no-inner-borders', 'footer'),
+  ].join(' ')
+
   const noOuterBorders = specified('no-outer-borders')
+  const contentLeft = specified('variant-content-left')
+  const mobileContentLeft = specified('variant-mobile-content-left')
 
   return (
-    <Card className={cn('flex flex-col ', className, noOuterBorders ? 'border-none' : '')} >
-    {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', contentclx, 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 className={cn('flex flex-col', className, noOuterBorders ? 'border-none' : '')} >
+      {contentLeft || (mobileContentLeft && agent === 'phone') ? (
+        <VariantContentLeft block={b} agent={agent} className={className} headingclx={headingclx} contentclx={contentclx} footerclx={footerclx}/>
+      ) : (<>
+        {(b.heading || b.topContent) && (
+          <CardHeader className={cn('typography-img:m-0', headingclx)} >
+            {b.topContent && (
+              <Content blocks={b.topContent} agent={agent} className=''/>
+            )}
+            {b.heading && (
+              <EnhHeadingBlockComponent block={b.heading} className='text-accent' agent={agent}/>
+            )}
+          </CardHeader>
+        )}
+        {b.content && (
+          <CardContent className={cn('typography flex flex-col justify-center', contentclx, className)}>
+            <Content blocks={b.content} agent={agent}/>
+          </CardContent>
+        )}
+        {b.cta && (
+          <CardFooter className={cn('grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center', footerclx)} >
+            <CTABlockComponent block={b.cta} agent={agent}/>
+          </CardFooter>
+        )}
+      </>)}
     </Card> 
   )
 }

package/blocks/components/carte-blanche-block/variant-content-left.tsx

@@ -0,0 +1,49 @@
+import { EnhHeadingBlockComponent, type CarteBlancheBlock, CTABlockComponent } from '../..'
+import {
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from '../../../primitives'
+import { cn } from '../../../util'
+import Content from '../content'
+
+const VariantContentLeft: React.FC<{
+  block: CarteBlancheBlock,
+  agent?: string
+  className?: string
+  headingclx?: string
+  contentclx?: string
+  footerclx?: string
+}> = ({
+  block,
+  agent,
+  className,
+  headingclx,
+  contentclx,
+  footerclx,
+}) => {
+  return (<>
+    <div className='flex gap-2'>
+      {block.topContent && <Content blocks={block.topContent} agent={agent} className='self-center ml-6 mt-6'/>}
+      <div className='flex flex-col'>
+        {block.heading && (
+          <CardHeader className={cn('typography-img:m-0', headingclx)} >
+            <EnhHeadingBlockComponent block={block.heading} className='text-accent' agent={agent}/>
+          </CardHeader>
+        )}
+        {block.content && (
+          <CardContent className={cn('typography flex flex-col justify-start', contentclx, className)}>
+            <Content blocks={block.content} agent={agent}/>
+          </CardContent>
+        )}
+      </div>
+    </div>
+    {block.cta && (
+      <CardFooter className={cn('grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center mx-auto', footerclx)}>
+        <CTABlockComponent block={block.cta} agent={agent}/>
+      </CardFooter>
+    )}
+  </>)
+}
+
+export default VariantContentLeft

package/blocks/components/enh-heading-block.tsx

@@ -73,15 +73,28 @@ const getPositionClx = (
 } => {
 
   const mobileHeadingCentered = specified('mobile-heading-centered')
+  const mobileHeadingLeft = specified('mobile-heading-left')
   const headingCentered = specified('center')
   const headingRight = specified('right')
   const bylineCentered = specified('byline-center')
   const bylineRight = specified('byline-right')
+  const mobileBylineLeft = specified('mobile-byline-left')
 
   let headerclx = ''
+  let bylineclx = (bylineCentered) ? 
+    'self-center !text-center' : (bylineRight ? 'self-end !text-right' : 'self-start !text-left')
+
   if (agent === 'phone') {
-    headerclx = (mobileHeadingCentered || headingCentered) ? 
-      'self-center text-center' : (headingRight ? 'self-end text-right' : 'self-start text-left')
+    if (mobileHeadingLeft) {
+      headerclx = 'self-start text-left'
+    } else {
+      headerclx = (mobileHeadingCentered || headingCentered) ? 
+        'self-center text-center' : (headingRight ? 'self-end text-right' : 'self-start text-left')
+    }
+
+    if (mobileBylineLeft) {
+      bylineclx = 'self-start !text-left'
+    }
   }
   else {
     const largerclx = (headingCentered) ? 
@@ -95,9 +108,6 @@ const getPositionClx = (
     }
   }
 
-  const bylineclx = (bylineCentered) ? 
-    'self-center' : (bylineRight ? 'self-end' : 'self-start')
-
   return {
     preheading: headerclx,
     heading: headerclx,

package/common/contact-dialog/disclaimer.tsx

@@ -5,7 +5,7 @@ const Disclaimer: React.FC = () => (
     By entering your mobile number and submitting, you consent to receive text messages from Lux at the number provided. 
     Message and data rates may apply. Message frequency varies. 
     You can unsubscribe at any time by replying STOP. 
-    View our <a href='/assets/standard-docs/LUX-Privacy-Policy.pdf'>Privacy Policy</a> and <a href='/assets/standard-docs/LUX-NFT-Terms-and-Conditions.pdf'>Terms & conditions</a>.
+    View our <a href='/privacy'>Privacy Policy</a> and <a href='/terms'>Terms & conditions</a>.
   </div>
 )
 

package/common/contact-dialog/index.tsx

@@ -30,8 +30,8 @@ const ContactDialog: React.FC<ButtonModalProps> = ({
     <DialogTrigger asChild>
       <Button {...buttonProps} >{buttonText}</Button>
     </DialogTrigger>
-    <DialogContent className="sm:max-w-[500px] p-0 gap-0 light-theme">
-      <DialogHeader className='py-6  text-foreground'>
+    <DialogContent className="sm:max-w-[500px] p-0 gap-0 bg-background border">
+      <DialogHeader className='py-6 text-foreground'>
         <DialogTitle className='text-4xl font-heading text-center text-inherit'>{title}</DialogTitle>
         {byline && (<DialogDescription className='text-inherit text-xl text-center'>{byline} </DialogDescription>)}
       </DialogHeader>

package/package.json

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

package/primitives/dialog.tsx

@@ -50,7 +50,7 @@ const DialogClose = React.forwardRef<
     <DialogPrimitive.Close
         ref={ref}
         className={cn(
-            "absolute right-4 top-3 p-1 justify-self-start hover:brightness-105 hover:scale-110 duration-100 ring-1 ring-secondary-400 transition bg-secondary-500 hover:text-primary-text focus:outline-none rounded-full items-center",
+            "absolute right-4 top-3 p-1 justify-self-start hover:brightness-105 hover:scale-110 duration-100 ring-1 ring-muted transition bg-secondary-500 hover:text-primary-text focus:outline-none rounded-full items-center",
             className
         )}
         {...props}

package/siteDef/footer/legal.ts

@@ -3,12 +3,12 @@ import type { LinkDef } from '../../types'
 const legal: LinkDef[] = [
   {
     title: 'Terms and Conditions',
-    href: '/assets/standard-docs/LUX-NFT-Terms-and-Conditions.pdf',
+    href: '/terms',
     newTab: true,
   },
   {
     title: 'Privacy Policy',
-    href: '/assets/standard-docs/LUX-Privacy-Policy.pdf',
+    href: '/privacy',
     newTab: true,
   },
 ]