@electroplix/components 0.4.1 → 0.5.0-alpha.2

package/metadata/site-identity.json

@@ -0,0 +1,555 @@
+{
+  "$schema": "electroplix-component-metadata-v1",
+  "category": "site-identity",
+  "label": "Site Identity",
+  "description": "Brand identity components for logos, taglines, favicons, and brand mark displays",
+  "themeKey": "siteIdentity",
+  "icon": "flag",
+  "sortOrder": 15,
+  "components": [
+    {
+      "id": "siteIdentity.LogoDisplay",
+      "name": "LogoDisplay",
+      "description": "Logo image display with optional link wrapping. Renders a responsive brand logo that can link to any page.",
+      "whenToUse": "Use on every page to display the brand logo, typically in the header. Links to the homepage by default.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "src",
+          "type": "string",
+          "required": true,
+          "default": null,
+          "description": "URL or path to the logo image"
+        },
+        {
+          "name": "alt",
+          "type": "string",
+          "required": false,
+          "default": "\"Logo\"",
+          "description": "Alt text for the logo image"
+        },
+        {
+          "name": "width",
+          "type": "number",
+          "required": false,
+          "default": "140",
+          "description": "Width of the logo in pixels"
+        },
+        {
+          "name": "height",
+          "type": "number",
+          "required": false,
+          "default": "auto",
+          "description": "Height of the logo in pixels (auto preserves aspect ratio)"
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Optional link URL; wraps the logo in an anchor tag when provided"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color override"
+        },
+        {
+          "name": "borderColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Border color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing"
+      ],
+      "aiHints": {
+        "pageTypes": [
+          "landing",
+          "marketing",
+          "dashboard",
+          "blog",
+          "ecommerce",
+          "portfolio",
+          "saas"
+        ],
+        "placement": "header",
+        "priority": 8,
+        "sequenceOrder": 1,
+        "pairsWellWith": [
+          "navigation.PrimaryNav",
+          "siteIdentity.Taglines",
+          "siteIdentity.BrandingShell"
+        ],
+        "maxPerPage": 1,
+        "isContainer": false
+      }
+    },
+    {
+      "id": "siteIdentity.AnimatedBrandMark",
+      "name": "AnimatedBrandMark",
+      "description": "Animated text-based brand mark with color gradient and transition effects. Renders the brand name with eye-catching motion.",
+      "whenToUse": "Use on landing pages, marketing pages, or portfolio sites where an animated brand mark creates a strong first impression.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "text",
+          "type": "string",
+          "required": true,
+          "default": null,
+          "description": "Brand text to display and animate"
+        },
+        {
+          "name": "fontSize",
+          "type": "number",
+          "required": false,
+          "default": "32",
+          "description": "Font size of the brand mark in pixels"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color used for animation effects"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family for the brand mark text"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "borderColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Border color override"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing"
+      ],
+      "aiHints": {
+        "pageTypes": ["landing", "marketing", "portfolio"],
+        "placement": "header",
+        "priority": 5,
+        "sequenceOrder": 1,
+        "pairsWellWith": ["siteIdentity.LogoDisplay", "hero.StaticHero", "navigation.PrimaryNav"],
+        "maxPerPage": 1,
+        "isContainer": false
+      }
+    },
+    {
+      "id": "siteIdentity.Taglines",
+      "name": "Taglines",
+      "description": "Rotating or static tagline display. Shows one or more brand taglines with optional automatic rotation.",
+      "whenToUse": "Use on landing pages and marketing pages to reinforce brand messaging with a tagline below the logo or hero section.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "lines",
+          "type": "string[]",
+          "required": true,
+          "default": null,
+          "description": "Array of tagline strings to display"
+        },
+        {
+          "name": "rotate",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to automatically rotate through taglines"
+        },
+        {
+          "name": "interval",
+          "type": "number",
+          "required": false,
+          "default": "3000",
+          "description": "Rotation interval in milliseconds (when rotate is true)"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color override"
+        },
+        {
+          "name": "borderColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Border color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing"
+      ],
+      "aiHints": {
+        "pageTypes": ["landing", "marketing"],
+        "placement": "header",
+        "priority": 4,
+        "sequenceOrder": 2,
+        "pairsWellWith": [
+          "siteIdentity.LogoDisplay",
+          "hero.StaticHero",
+          "siteIdentity.BrandingShell"
+        ],
+        "maxPerPage": 1,
+        "isContainer": false
+      }
+    },
+    {
+      "id": "siteIdentity.BrandingShell",
+      "name": "BrandingShell",
+      "description": "Brand section container that composes a logo, brand name, and tagline into a cohesive branding block. Accepts children for additional content.",
+      "whenToUse": "Use as a wrapper to group brand identity elements (logo, name, tagline) together in the header or any brand-focused section.",
+      "isShell": true,
+      "props": [
+        {
+          "name": "logoSrc",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "URL or path to the brand logo image"
+        },
+        {
+          "name": "brandName",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Brand or company name text"
+        },
+        {
+          "name": "tagline",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Brand tagline or slogan"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Additional content rendered inside the branding shell"
+        },
+        {
+          "name": "maxW",
+          "type": "number",
+          "required": false,
+          "default": "900",
+          "description": "Maximum width of the branding shell in pixels"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color override"
+        },
+        {
+          "name": "borderColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Border color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing"
+      ],
+      "aiHints": {
+        "pageTypes": [
+          "landing",
+          "marketing",
+          "dashboard",
+          "blog",
+          "ecommerce",
+          "portfolio",
+          "saas"
+        ],
+        "placement": "header",
+        "priority": 3,
+        "sequenceOrder": 1,
+        "pairsWellWith": [
+          "siteIdentity.LogoDisplay",
+          "siteIdentity.Taglines",
+          "siteIdentity.AnimatedBrandMark"
+        ],
+        "maxPerPage": 1,
+        "isContainer": true
+      }
+    },
+    {
+      "id": "siteIdentity.BrandIconGrid",
+      "name": "BrandIconGrid",
+      "description": "Responsive grid of brand or partner icons/logos. Each icon can optionally link to an external page. Use to display technology stack icons, integration partner logos, client brand marks, hackathon sponsors, or trust indicators.",
+      "whenToUse": "Use on landing pages, marketing pages, or about pages to showcase partner logos, client brands, or technology stack icons.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "icons",
+          "type": "BrandIcon[]",
+          "required": true,
+          "default": null,
+          "description": "Array of brand icons: {id, src, name, href?}"
+        },
+        {
+          "name": "columns",
+          "type": "number",
+          "required": false,
+          "default": "6",
+          "description": "Number of columns in the grid"
+        },
+        {
+          "name": "iconSize",
+          "type": "number",
+          "required": false,
+          "default": "48",
+          "description": "Size of each icon in pixels"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color override"
+        },
+        {
+          "name": "borderColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Border color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing"
+      ],
+      "aiHints": {
+        "pageTypes": ["landing", "marketing", "about", "event", "agency", "education", "saas"],
+        "placement": "body",
+        "priority": 5,
+        "sequenceOrder": 7,
+        "pairsWellWith": [
+          "marketing.TrustBadges",
+          "siteIdentity.BrandingShell",
+          "content.HeadingSection"
+        ],
+        "maxPerPage": 2,
+        "isContainer": false
+      }
+    },
+    {
+      "id": "siteIdentity.FaviconUploader",
+      "name": "FaviconUploader",
+      "description": "Favicon upload widget with preview. Allows users to upload a new favicon and displays the current one.",
+      "whenToUse": "Use in settings or admin pages where site administrators can upload or change the site favicon.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "onUpload",
+          "type": "(file: File) => void",
+          "required": false,
+          "default": null,
+          "description": "Callback invoked with the selected file when a favicon is uploaded"
+        },
+        {
+          "name": "currentSrc",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "URL of the currently active favicon for preview"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color override"
+        },
+        {
+          "name": "borderColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Border color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing"
+      ],
+      "aiHints": {
+        "pageTypes": ["settings", "admin"],
+        "placement": "body",
+        "priority": 3,
+        "sequenceOrder": 6,
+        "pairsWellWith": ["siteIdentity.BrandingShell", "siteIdentity.LogoDisplay"],
+        "maxPerPage": 1,
+        "isContainer": false
+      }
+    }
+  ]
+}