@affinda/react 0.0.22 → 0.0.24

package/README.md

@@ -26,13 +26,13 @@ defineCustomElements();
 ### 2. Use Components
 
 ```tsx
-import { Button, Navbar, NavItem, Logo } from '@affinda/react';
+import { Button, Navbar, NavItem } from '@affinda/react';
 
 function App() {
   return (
     <div>
+      {/* Navbar displays the default Affinda logo automatically */}
       <Navbar>
-        <Logo slot="logo" />
         <div slot="start">
           <NavItem href="/products">Products</NavItem>
         </div>
@@ -126,7 +126,11 @@ import { Button, Heading, TypographyLockup } from '@affinda/react';
 - **PaperclipDecoration** - Decorative paperclip vector for hero sections
 
 **Footer:**
-- **Footer** / AfFooter - Full-featured footer with navigation, contact info, and social links
+- **Footer** / AfFooter - Slot-based footer layout component
+- **FooterColumn** / AfFooterColumn - Navigation column for footer
+- **FooterLink** / AfFooterLink - Styled link for footer navigation
+- **SocialLink** / AfSocialLink - Circular social media icon link
+- **ContactItem** / AfContactItem - Label/value pair for contact info
 
 ## Quick Start Components
 
@@ -373,16 +377,22 @@ import { HeroSection, PaperclipDecoration } from '@affinda/react';
 
 Site-wide navigation header with responsive design and mobile menu support.
 
-**Required Slots:**
-- `logo` - Brand logo (left side)
+**Props:**
+- `showDefaultLogo` (boolean, default: `true`) - Whether to show the default Affinda logo when no logo slot content is provided
+
+**Slots:**
+- `logo` - Brand logo (left side) - *optional*, defaults to Affinda logo
 - `start` - Primary navigation links (center-left)
 - `end` - Secondary navigation and actions (right side)
 - `button` - Call-to-action button (far right)
 
 ```tsx
 <Navbar>
-  {/* Logo slot - required */}
-  <Logo slot="logo" />
+  {/* Logo slot - optional, defaults to Affinda logo */}
+  {/* <Logo slot="logo" /> */}
+  
+  {/* Or use a custom logo */}
+  {/* <Logo slot="logo" src="/path/to/custom-logo.svg" alt="My Company" /> */}
   
   {/* Start slot - main navigation items */}
   <div slot="start">
@@ -418,13 +428,19 @@ Site-wide navigation header with responsive design and mobile menu support.
 ```tsx
 // ❌ WRONG - Direct children are ignored
 <Navbar>
-  <Logo />
   <NavItem href="/home">Home</NavItem>
 </Navbar>
 
 // ✅ CORRECT - Use slots
 <Navbar>
-  <Logo slot="logo" />
+  <div slot="start">
+    <NavItem href="/home">Home</NavItem>
+  </div>
+</Navbar>
+
+// ✅ ALSO CORRECT - Custom logo via slot
+<Navbar>
+  <Logo slot="logo" src="/my-logo.svg" alt="My Company" />
   <div slot="start">
     <NavItem href="/home">Home</NavItem>
   </div>
@@ -561,10 +577,19 @@ import { getIllustrationUrlByScene } from '@affinda/illustrations';
 **Logo**
 - Affinda logo component with consistent sizing
 - Use in Navbar and footer
-- Automatically handles light/dark variants
+- Renders as inline SVG for crisp display at any size
+- Supports custom logos via the `src` prop
+
+**Props:**
+- `src` (string, optional) - Custom logo image URL. If provided, displays this instead of the default Affinda logo
+- `alt` (string, default: "Affinda") - Alt text for the logo
 
 ```tsx
+// Default Affinda logo
 <Logo />
+
+// Custom logo
+<Logo src="/path/to/my-logo.svg" alt="My Company" />
 ```
 
 **ColorSwatch**
@@ -653,12 +678,12 @@ function Hero() {
 ### Navigation
 
 ```tsx
-import { Navbar, NavItem, Logo, Button } from '@affinda/react';
+import { Navbar, NavItem, Button } from '@affinda/react';
 
 function Header() {
   return (
+    // Navbar displays the default Affinda logo automatically
     <Navbar>
-      <Logo slot="logo" />
       <div slot="start">
         <NavItem hierarchy="primary" variant="01" href="/">
           Home
@@ -757,45 +782,103 @@ When generating Affinda UI code:
 
 ### Footer
 
-A comprehensive footer component matching affinda.com's design.
+A flexible, slot-based footer component for composing marketing page footers.
 
 ```tsx
-import { Footer, Logo } from '@affinda/react';
+import { 
+  Footer, 
+  FooterColumn, 
+  FooterLink, 
+  SocialLink, 
+  ContactItem,
+  Logo 
+} from '@affinda/react';
 
 <Footer
-  salesEmail="contact@affinda.com"
-  supportEmail="support@affinda.com"
-  linkedinUrl="https://www.linkedin.com/company/affinda/"
-  youtubeUrl="https://www.youtube.com/@affinda"
-  githubUrl="https://github.com/affinda"
-  statusUrl="https://status.affinda.com"
+  copyrightText="© 2025 Your Company. All rights reserved."
+  statusText="All systems are operational"
+  statusUrl="https://status.example.com"
   systemsOperational={true}
+  showStatus={true}
 >
+  {/* Logo */}
   <Logo slot="logo" />
+
+  {/* Social Links */}
+  <div slot="social" style={{ display: 'flex', gap: '12px' }}>
+    <SocialLink href="https://linkedin.com/company/..." icon="linkedin" label="LinkedIn" />
+    <SocialLink href="https://youtube.com/..." icon="youtube" label="YouTube" />
+    <SocialLink href="https://github.com/..." icon="github" label="GitHub" />
+  </div>
+
+  {/* Contact Info */}
+  <div slot="contact" style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+    <ContactItem label="Sales enquiries" value="sales@example.com" />
+    <ContactItem label="Support" value="support@example.com" />
+  </div>
+
+  {/* Navigation Columns */}
+  <div slot="nav" style={{ display: 'contents' }}>
+    <FooterColumn heading="Products">
+      <FooterLink href="/product-a">Product A</FooterLink>
+      <FooterLink href="/product-b">Product B</FooterLink>
+    </FooterColumn>
+
+    <FooterColumn heading="Company">
+      <FooterLink href="/about">About</FooterLink>
+      <FooterLink href="/careers">Careers</FooterLink>
+      <FooterLink href="https://external.com" external>Partner Site</FooterLink>
+    </FooterColumn>
+  </div>
+
+  {/* Legal Links */}
+  <div slot="legal" style={{ display: 'flex', gap: '24px' }}>
+    <a href="/privacy">Privacy policy</a>
+    <a href="/terms">Terms of service</a>
+  </div>
+
+  {/* Certification Badges (optional) */}
+  <div slot="badges">
+    {/* Your certification badge SVGs or images */}
+  </div>
 </Footer>
 ```
 
-**Props:**
-- `salesEmail`: Sales contact email address
-- `supportEmail`: Support contact email address
-- `linkedinUrl`: LinkedIn profile URL
-- `youtubeUrl`: YouTube channel URL
-- `githubUrl`: GitHub organization URL
-- `statusUrl`: Status page URL
-- `systemsOperational`: Boolean indicating system status
-- `copyrightYear`: Copyright year (defaults to current year)
+**Footer Props:**
+- `copyrightText`: Copyright text (e.g., "© 2025 Company. All rights reserved.")
+- `statusText`: Status message text
+- `statusUrl`: Link to status page
+- `systemsOperational`: Boolean for green/red status indicator
+- `showStatus`: Whether to show the status section
 
-**Slots:**
-- `logo`: Custom logo component (defaults to Affinda logo)
-- `nav-columns`: Custom navigation columns (defaults to Affinda navigation)
-- `badges`: Custom certification badges (defaults to GDPR, SOC, ISO badges)
+**Footer Slots:**
+- `logo`: Your logo component
+- `social`: Social media links (use SocialLink components)
+- `contact`: Contact information (use ContactItem components)
+- `nav`: Navigation columns (use FooterColumn + FooterLink components)
+- `legal`: Legal/policy links
+- `badges`: Certification badges
+
+**Helper Components:**
+
+- **FooterColumn**: Navigation column with heading
+  - Props: `heading` (string)
+  
+- **FooterLink**: Styled footer link
+  - Props: `href` (string), `external` (boolean - adds external link icon)
+  
+- **SocialLink**: Circular social media icon link
+  - Props: `href`, `label`, `icon` ('linkedin' | 'youtube' | 'github' | 'twitter' | 'facebook' | 'custom')
+  
+- **ContactItem**: Label + value pair for contact info
+  - Props: `label`, `value`
 
 **Features:**
 - Dark inkwell background with mist green text
-- Social media links with hover effects
-- Four-column navigation layout
+- Fully composable via slots
+- Built-in social media icons
+- External link indicators
 - System status indicator
-- Legal links and certification badges
 - Fully responsive design
 
 ## Using Illustrations

package/dist/generated/components.d.ts

@@ -8,9 +8,12 @@ import { AfButton as AfButtonElement } from "@affinda/wc/dist/components/af-butt
 import { AfCard as AfCardElement } from "@affinda/wc/dist/components/af-card.js";
 import { AfClientCarousel as AfClientCarouselElement } from "@affinda/wc/dist/components/af-client-carousel.js";
 import { AfColorSwatch as AfColorSwatchElement } from "@affinda/wc/dist/components/af-color-swatch.js";
+import { AfContactItem as AfContactItemElement } from "@affinda/wc/dist/components/af-contact-item.js";
 import { AfContainer as AfContainerElement } from "@affinda/wc/dist/components/af-container.js";
 import { AfCtaSection as AfCtaSectionElement } from "@affinda/wc/dist/components/af-cta-section.js";
 import { AfFeatureAccordion as AfFeatureAccordionElement } from "@affinda/wc/dist/components/af-feature-accordion.js";
+import { AfFooterColumn as AfFooterColumnElement } from "@affinda/wc/dist/components/af-footer-column.js";
+import { AfFooterLink as AfFooterLinkElement } from "@affinda/wc/dist/components/af-footer-link.js";
 import { AfFooter as AfFooterElement } from "@affinda/wc/dist/components/af-footer.js";
 import { AfHeading as AfHeadingElement } from "@affinda/wc/dist/components/af-heading.js";
 import { AfHeroSection as AfHeroSectionElement } from "@affinda/wc/dist/components/af-hero-section.js";
@@ -20,6 +23,7 @@ import { AfLogo as AfLogoElement } from "@affinda/wc/dist/components/af-logo.js"
 import { AfNavItem as AfNavItemElement } from "@affinda/wc/dist/components/af-nav-item.js";
 import { AfNavbar as AfNavbarElement } from "@affinda/wc/dist/components/af-navbar.js";
 import { AfSection as AfSectionElement } from "@affinda/wc/dist/components/af-section.js";
+import { AfSocialLink as AfSocialLinkElement } from "@affinda/wc/dist/components/af-social-link.js";
 import { AfTestimonialCarousel as AfTestimonialCarouselElement } from "@affinda/wc/dist/components/af-testimonial-carousel.js";
 import { AfTestimonialStat as AfTestimonialStatElement } from "@affinda/wc/dist/components/af-testimonial-stat.js";
 import { AfTestimonial as AfTestimonialElement } from "@affinda/wc/dist/components/af-testimonial.js";
@@ -38,6 +42,8 @@ export type AfClientCarouselEvents = NonNullable<unknown>;
 export declare const AfClientCarousel: StencilReactComponent<AfClientCarouselElement, AfClientCarouselEvents>;
 export type AfColorSwatchEvents = NonNullable<unknown>;
 export declare const AfColorSwatch: StencilReactComponent<AfColorSwatchElement, AfColorSwatchEvents>;
+export type AfContactItemEvents = NonNullable<unknown>;
+export declare const AfContactItem: StencilReactComponent<AfContactItemElement, AfContactItemEvents>;
 export type AfContainerEvents = NonNullable<unknown>;
 export declare const AfContainer: StencilReactComponent<AfContainerElement, AfContainerEvents>;
 export type AfCtaSectionEvents = NonNullable<unknown>;
@@ -46,6 +52,10 @@ export type AfFeatureAccordionEvents = NonNullable<unknown>;
 export declare const AfFeatureAccordion: StencilReactComponent<AfFeatureAccordionElement, AfFeatureAccordionEvents>;
 export type AfFooterEvents = NonNullable<unknown>;
 export declare const AfFooter: StencilReactComponent<AfFooterElement, AfFooterEvents>;
+export type AfFooterColumnEvents = NonNullable<unknown>;
+export declare const AfFooterColumn: StencilReactComponent<AfFooterColumnElement, AfFooterColumnEvents>;
+export type AfFooterLinkEvents = NonNullable<unknown>;
+export declare const AfFooterLink: StencilReactComponent<AfFooterLinkElement, AfFooterLinkEvents>;
 export type AfHeadingEvents = NonNullable<unknown>;
 export declare const AfHeading: StencilReactComponent<AfHeadingElement, AfHeadingEvents>;
 export type AfHeroSectionEvents = NonNullable<unknown>;
@@ -62,6 +72,8 @@ export type AfNavbarEvents = NonNullable<unknown>;
 export declare const AfNavbar: StencilReactComponent<AfNavbarElement, AfNavbarEvents>;
 export type AfSectionEvents = NonNullable<unknown>;
 export declare const AfSection: StencilReactComponent<AfSectionElement, AfSectionEvents>;
+export type AfSocialLinkEvents = NonNullable<unknown>;
+export declare const AfSocialLink: StencilReactComponent<AfSocialLinkElement, AfSocialLinkEvents>;
 export type AfTestimonialEvents = NonNullable<unknown>;
 export declare const AfTestimonial: StencilReactComponent<AfTestimonialElement, AfTestimonialEvents>;
 export type AfTestimonialCarouselEvents = NonNullable<unknown>;

package/dist/generated/components.js

@@ -10,9 +10,12 @@ import { AfButton as AfButtonElement, defineCustomElement as defineAfButton } fr
 import { AfCard as AfCardElement, defineCustomElement as defineAfCard } from "@affinda/wc/dist/components/af-card.js";
 import { AfClientCarousel as AfClientCarouselElement, defineCustomElement as defineAfClientCarousel } from "@affinda/wc/dist/components/af-client-carousel.js";
 import { AfColorSwatch as AfColorSwatchElement, defineCustomElement as defineAfColorSwatch } from "@affinda/wc/dist/components/af-color-swatch.js";
+import { AfContactItem as AfContactItemElement, defineCustomElement as defineAfContactItem } from "@affinda/wc/dist/components/af-contact-item.js";
 import { AfContainer as AfContainerElement, defineCustomElement as defineAfContainer } from "@affinda/wc/dist/components/af-container.js";
 import { AfCtaSection as AfCtaSectionElement, defineCustomElement as defineAfCtaSection } from "@affinda/wc/dist/components/af-cta-section.js";
 import { AfFeatureAccordion as AfFeatureAccordionElement, defineCustomElement as defineAfFeatureAccordion } from "@affinda/wc/dist/components/af-feature-accordion.js";
+import { AfFooterColumn as AfFooterColumnElement, defineCustomElement as defineAfFooterColumn } from "@affinda/wc/dist/components/af-footer-column.js";
+import { AfFooterLink as AfFooterLinkElement, defineCustomElement as defineAfFooterLink } from "@affinda/wc/dist/components/af-footer-link.js";
 import { AfFooter as AfFooterElement, defineCustomElement as defineAfFooter } from "@affinda/wc/dist/components/af-footer.js";
 import { AfHeading as AfHeadingElement, defineCustomElement as defineAfHeading } from "@affinda/wc/dist/components/af-heading.js";
 import { AfHeroSection as AfHeroSectionElement, defineCustomElement as defineAfHeroSection } from "@affinda/wc/dist/components/af-hero-section.js";
@@ -22,6 +25,7 @@ import { AfLogo as AfLogoElement, defineCustomElement as defineAfLogo } from "@a
 import { AfNavItem as AfNavItemElement, defineCustomElement as defineAfNavItem } from "@affinda/wc/dist/components/af-nav-item.js";
 import { AfNavbar as AfNavbarElement, defineCustomElement as defineAfNavbar } from "@affinda/wc/dist/components/af-navbar.js";
 import { AfSection as AfSectionElement, defineCustomElement as defineAfSection } from "@affinda/wc/dist/components/af-section.js";
+import { AfSocialLink as AfSocialLinkElement, defineCustomElement as defineAfSocialLink } from "@affinda/wc/dist/components/af-social-link.js";
 import { AfTestimonialCarousel as AfTestimonialCarouselElement, defineCustomElement as defineAfTestimonialCarousel } from "@affinda/wc/dist/components/af-testimonial-carousel.js";
 import { AfTestimonialStat as AfTestimonialStatElement, defineCustomElement as defineAfTestimonialStat } from "@affinda/wc/dist/components/af-testimonial-stat.js";
 import { AfTestimonial as AfTestimonialElement, defineCustomElement as defineAfTestimonial } from "@affinda/wc/dist/components/af-testimonial.js";
@@ -77,6 +81,14 @@ export const AfColorSwatch = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineAfColorSwatch
 });
+export const AfContactItem = /*@__PURE__*/ createComponent({
+    tagName: 'af-contact-item',
+    elementClass: AfContactItemElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfContactItem
+});
 export const AfContainer = /*@__PURE__*/ createComponent({
     tagName: 'af-container',
     elementClass: AfContainerElement,
@@ -109,6 +121,22 @@ export const AfFooter = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineAfFooter
 });
+export const AfFooterColumn = /*@__PURE__*/ createComponent({
+    tagName: 'af-footer-column',
+    elementClass: AfFooterColumnElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfFooterColumn
+});
+export const AfFooterLink = /*@__PURE__*/ createComponent({
+    tagName: 'af-footer-link',
+    elementClass: AfFooterLinkElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfFooterLink
+});
 export const AfHeading = /*@__PURE__*/ createComponent({
     tagName: 'af-heading',
     elementClass: AfHeadingElement,
@@ -173,6 +201,14 @@ export const AfSection = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineAfSection
 });
+export const AfSocialLink = /*@__PURE__*/ createComponent({
+    tagName: 'af-social-link',
+    elementClass: AfSocialLinkElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfSocialLink
+});
 export const AfTestimonial = /*@__PURE__*/ createComponent({
     tagName: 'af-testimonial',
     elementClass: AfTestimonialElement,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from './generated/components.js';
-export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContainer as Container, AfCtaSection as CtaSection, AfFeatureAccordion as FeatureAccordion, AfFooter as Footer, AfHeading as Heading, AfHeroSection as HeroSection, AfIconButton as IconButton, AfLogo as Logo, AfLogoWell as LogoWell, AfNavItem as NavItem, AfNavbar as Navbar, AfSection as Section, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
+export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContactItem as ContactItem, AfContainer as Container, AfCtaSection as CtaSection, AfFeatureAccordion as FeatureAccordion, AfFooter as Footer, AfFooterColumn as FooterColumn, AfFooterLink as FooterLink, AfHeading as Heading, AfHeroSection as HeroSection, AfIconButton as IconButton, AfLogo as Logo, AfLogoWell as LogoWell, AfNavItem as NavItem, AfNavbar as Navbar, AfSection as Section, AfSocialLink as SocialLink, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
 export * from '@affinda/icons/react';
 export { PaperclipDecoration } from './components/PaperclipDecoration';

package/dist/index.js

@@ -2,7 +2,7 @@
 export * from './generated/components.js';
 // Note: defineCustomElements should be imported directly from @affinda/wc/loader/index.js in your app
 // Re-export components without the 'Af' prefix for cleaner React usage
-export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContainer as Container, AfCtaSection as CtaSection, AfFeatureAccordion as FeatureAccordion, AfFooter as Footer, AfHeading as Heading, AfHeroSection as HeroSection, AfIconButton as IconButton, AfLogo as Logo, AfLogoWell as LogoWell, AfNavItem as NavItem, AfNavbar as Navbar, AfSection as Section, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
+export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContactItem as ContactItem, AfContainer as Container, AfCtaSection as CtaSection, AfFeatureAccordion as FeatureAccordion, AfFooter as Footer, AfFooterColumn as FooterColumn, AfFooterLink as FooterLink, AfHeading as Heading, AfHeroSection as HeroSection, AfIconButton as IconButton, AfLogo as Logo, AfLogoWell as LogoWell, AfNavItem as NavItem, AfNavbar as Navbar, AfSection as Section, AfSocialLink as SocialLink, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
 // Re-export React icon components from icons package
 export * from '@affinda/icons/react';
 // Export custom React components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affinda/react",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "private": false,
   "type": "module",
   "files": [
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@affinda/icons": "^0.0.3",
-    "@affinda/wc": "^0.0.13",
+    "@affinda/wc": "^0.0.15",
     "@stencil/react-output-target": "^1.2.0"
   },
   "scripts": {