@affinda/react 0.0.21 → 0.0.22

package/README.md

@@ -125,6 +125,9 @@ import { Button, Heading, TypographyLockup } from '@affinda/react';
 **Decorative:**
 - **PaperclipDecoration** - Decorative paperclip vector for hero sections
 
+**Footer:**
+- **Footer** / AfFooter - Full-featured footer with navigation, contact info, and social links
+
 ## Quick Start Components
 
 ### HeroSection
@@ -752,6 +755,49 @@ When generating Affinda UI code:
 
 4. **Never use purple colors** - those were placeholder colors and have been removed
 
+### Footer
+
+A comprehensive footer component matching affinda.com's design.
+
+```tsx
+import { Footer, 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"
+  systemsOperational={true}
+>
+  <Logo slot="logo" />
+</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)
+
+**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)
+
+**Features:**
+- Dark inkwell background with mist green text
+- Social media links with hover effects
+- Four-column navigation layout
+- System status indicator
+- Legal links and certification badges
+- Fully responsive design
+
 ## Using Illustrations
 
 The `@affinda/illustrations` package provides themed illustration assets:

package/dist/generated/components.d.ts

@@ -11,6 +11,7 @@ import { AfColorSwatch as AfColorSwatchElement } from "@affinda/wc/dist/componen
 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 { 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";
@@ -43,6 +44,8 @@ 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 AfHeadingEvents = NonNullable<unknown>;
 export declare const AfHeading: StencilReactComponent<AfHeadingElement, AfHeadingEvents>;
 export type AfHeroSectionEvents = NonNullable<unknown>;

package/dist/generated/components.js

@@ -13,6 +13,7 @@ import { AfColorSwatch as AfColorSwatchElement, defineCustomElement as defineAfC
 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 { 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";
@@ -100,6 +101,14 @@ 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 AfHeading = /*@__PURE__*/ createComponent({
     tagName: 'af-heading',
     elementClass: AfHeadingElement,

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, 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 * 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, 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';
 // 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.22",
   "private": false,
   "type": "module",
   "files": [
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@affinda/icons": "^0.0.3",
-    "@affinda/wc": "^0.0.12",
+    "@affinda/wc": "^0.0.13",
     "@stencil/react-output-target": "^1.2.0"
   },
   "scripts": {