@affinda/react 0.0.21 → 0.0.23

package/README.md

@@ -125,6 +125,13 @@ import { Button, Heading, TypographyLockup } from '@affinda/react';
 **Decorative:**
 - **PaperclipDecoration** - Decorative paperclip vector for hero sections
 
+**Footer:**
+- **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
 
 ### HeroSection
@@ -752,6 +759,107 @@ When generating Affinda UI code:
 
 4. **Never use purple colors** - those were placeholder colors and have been removed
 
+### Footer
+
+A flexible, slot-based footer component for composing marketing page footers.
+
+```tsx
+import { 
+  Footer, 
+  FooterColumn, 
+  FooterLink, 
+  SocialLink, 
+  ContactItem,
+  Logo 
+} from '@affinda/react';
+
+<Footer
+  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>
+```
+
+**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
+
+**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
+- Fully composable via slots
+- Built-in social media icons
+- External link indicators
+- System status indicator
+- Fully responsive design
+
 ## Using Illustrations
 
 The `@affinda/illustrations` package provides themed illustration assets:

package/dist/generated/components.d.ts

@@ -8,9 +8,13 @@ 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";
 import { AfIconButton as AfIconButtonElement } from "@affinda/wc/dist/components/af-icon-button.js";
@@ -19,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";
@@ -37,12 +42,20 @@ 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>;
 export declare const AfCtaSection: StencilReactComponent<AfCtaSectionElement, AfCtaSectionEvents>;
 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>;
@@ -59,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,13 @@ 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";
 import { AfIconButton as AfIconButtonElement, defineCustomElement as defineAfIconButton } from "@affinda/wc/dist/components/af-icon-button.js";
@@ -21,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";
@@ -76,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,
@@ -100,6 +113,30 @@ export const AfFeatureAccordion = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineAfFeatureAccordion
 });
+export const AfFooter = /*@__PURE__*/ createComponent({
+    tagName: 'af-footer',
+    elementClass: AfFooterElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    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,
@@ -164,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, 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, 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.21",
+  "version": "0.0.23",
   "private": false,
   "type": "module",
   "files": [
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@affinda/icons": "^0.0.3",
-    "@affinda/wc": "^0.0.12",
+    "@affinda/wc": "^0.0.14",
     "@stencil/react-output-target": "^1.2.0"
   },
   "scripts": {