Social / Share Links | CAAT Design System

Live Demo

Social profiles (brand-coloured)

Rendered

Hover fills with the platform's brand colour.

Share this page (neutral)

Rendered

1. Summary

Component name	Social / Share Links
AEM resource type	`caat/components/social-links`
Tier	Composite (molecule) — composes Icon Button
Purpose	A horizontal group of Icon Buttons for (a) linking to CAAT social profiles or (b) sharing the current page.
Variants	Social profiles (brand) · Share actions (outline)
Status	New
Replaces	`.caat-footer-social` (navigation) + `.caat-article__share-btn` (article) — two prior copies

Composed of

This is a composite: it composes Icon Button and adds layout + per-platform brand colours. It does not restyle the control. (See docs/design-system-recommendations.md §F.)

Constituent	Role	Status
Icon Button	Each social/share affordance (`--circle` + `--brand` or `--outline`)	✓ has page · composed

2. Design Tokens

Token	Role
(inherits all Icon Button tokens)	Control styling
`--caat-icon-btn-brand`	Set per platform via `.caat-social--linkedin`, `.caat-social--youtube`, etc.

Platform brand colours (LinkedIn #0a66c2, YouTube #ff0000, etc.) are external brand constants, not design tokens — defined in social-links.css.

3. Authoring Fields

Field	Type	Required	Notes
Mode	Select	Yes	Social profiles · Share this page
Links (social mode)	Multifield	Yes	Per item: platform + URL. Brand colour auto-set by platform.
Share targets (share mode)	Multi-checkbox	Yes	LinkedIn, X, Email, Copy link

4. Validation Rules

No author-managed content beyond an accessible label, so there are no authoring validation rules. Accessibility requirements are covered in Section 8 (Accessibility).

5. Content Guidance

Social profiles use brand colours and open in a new tab (external).
Share uses neutral outline buttons and shares the current page.
Order social platforms by audience priority (LinkedIn first for CAAT).
Keep to ≤ 5 items to avoid a cluttered row.

6. Semantic HTML

<!-- Social profiles -->
<div class="caat-social-links">
  <a href="…" class="caat-icon-btn caat-icon-btn--circle caat-icon-btn--brand caat-social--linkedin"
     aria-label="CAAT on LinkedIn (opens in a new tab)" target="_blank" rel="noopener">
    <i class="bi bi-linkedin" aria-hidden="true"></i>
  </a>
</div>

<!-- Share this page -->
<div class="caat-social-links" role="group" aria-label="Share this article">
  <a href="…" class="caat-icon-btn caat-icon-btn--circle caat-icon-btn--outline" aria-label="Share on LinkedIn">…</a>
  <button type="button" class="caat-icon-btn caat-icon-btn--circle caat-icon-btn--outline" aria-label="Copy link">…</button>
</div>

7. CSS Contract

Selector	Purpose
`.caat-social-links`	Flex row wrapper (gap, wrap)
`.caat-social--linkedin / .caat-social--youtube / .caat-social--facebook / .caat-social--x / .caat-social--instagram`	Set `--caat-icon-btn-brand` on a child Icon Button
(control)	Provided by `.caat-icon-btn`

8. Accessibility

Requirement	Implementation
Group semantics	Share group uses `role="group"` + `aria-label="Share this …"`.
Per-item label	Each Icon Button has an `aria-label` naming the platform/action; external links note "(opens in a new tab)".
Keyboard / focus	Inherited from Icon Button — focusable, `:focus-visible` ring.
Colour	Brand hover fills (white-on-brand) verified ≥ 3:1 for the icon glyph.

9. SEO

Transient / structural UI with no indexable content of its own — no SEO markup required. Ensure any content this component wraps or reveals stays server-rendered and crawlable.

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Implementation Notes

Resource type: caat/components/social-links; delegates each item to caat/components/icon-button.
Sling model exposes mode and a list of items (platform, url) or share targets.
Brand colour is derived from the platform value — authors don't pick colours.

12. Dialog Model (cq:dialog)

Not authored directly. The social links is a sub-element emitted and configured by its host component (or generated from page structure), so it has no standalone cq:dialog — any options are exposed through the host component's dialog.

13. QA Checklist

#	Check	Pass?
1	Each link/button is an Icon Button with an aria-label
2	Social mode applies correct brand colour + new-tab
3	Share mode is neutral outline; Copy link is a `<button>`
4	Keyboard focus ring visible on every item
5	No bespoke share/social CSS remains in article or navigation

14. Definition of Done

Composes Icon Button — no reimplemented control styling.
article-layout and navigation refactored to consume it (duplication removed).
Both modes accessible; external links labelled + rel="noopener".
QA checklist signed off.