Add AvatarComponent - #8
Open
PendragonDevelopment wants to merge 4 commits into
Open
Conversation
New Shipwright::IconComponent renders inline SVG icons from a manifest of Feather Icons (https://feathericons.com, MIT licensed). Matches Shipwright Pro's Figma icon set (node 2:163). Starter manifest includes 21 commonly-needed icons: info, alert-circle, alert-triangle, check, check-circle, x, x-circle, chevron-{up,down,left,right}, plus, minus, search, menu, external-link, settings, arrow-{left,right}, help-circle, trash. Icons live in app/components/shipwright/icons.rb as a frozen constant hash of name => inner-SVG fragment. Adding a new icon = paste Feather's inner markup into the hash. API: <%= render Shipwright::IconComponent.new(name: :info) %> <%= render Shipwright::IconComponent.new(name: :check, size: :lg, class: "text-utility-negative-default") %> <%= render Shipwright::IconComponent.new(name: :info, "aria-label": "More info") %> Props: - name: required symbol/string matching a key in ICONS - size: :sm (16px), :md (24px, default), :lg (32px) - class: consumer override - **html_attrs: pass-through (id, data-*, aria-*, etc.) Icons use stroke="currentColor" so they inherit the parent's text color — consumers control color via text-* utilities. Decorative by default (aria-hidden=true); providing aria-label makes the icon meaningful and skips aria-hidden. 13 new component tests pass. Total suite: 38 tests, 81 assertions. Lookbook previews: default, gallery (all 21), sizes, colored, with_aria_label.
Generated from feather-icons@4.29.2 icons.json plus two Shipwright additions to match Figma's icon page (node 2:163): - code-horizontal: alias for Feather's 'code' (matches Shipwright Pro's naming convention) - star-filled: filled variant using the star polygon with fill=currentColor Previously only 21 starter icons were shipped. This adds the remaining ~270 to cover every icon on the Shipwright Pro 'Icons / General' page. Brand icons (payment methods at node 2:824 and social icons at 2:940) are multi-color composite SVGs served from Figma's temporary CDN and need a different rendering approach — they'll ship in a follow-up BrandIconComponent PR. Gallery preview updated to render all icons in an 8-column grid. Showcase page shows a curated sample plus pointer to Lookbook for the full set. All 38 existing tests pass (Icon manifest expansion preserves the starter icons we already shipped).
Brand icons (payment methods + social platforms) from Shipwright Pro's Figma are multi-color composite SVGs that need different rendering than Feather's monochrome stroke icons. Added as a parallel component: <%= render Shipwright::BrandIconComponent.new(name: :visa-color) %> Architecture: - SVGs live in app/assets/images/shipwright/brand/ (one file per icon) - Component loads and memoizes the directory on first access - Renders SVG inline (preserves brand colors, allows CSS styling) - Strips intrinsic width/height, applies h-* class + w-auto so non-square icons (e.g., Visa) keep their aspect ratio - Raises a helpful ArgumentError directing users to the exporter if they reference a missing icon New files: - script/export_brand_icons.rb: downloads all 59 brand SVGs from Shipwright Pro Figma via the Figma REST API. Maps every node ID from the Figma Icons/Payment Method and Icons/Social pages to a normalized kebab-case filename. Requires FIGMA_ACCESS_TOKEN env var. - app/components/shipwright/brand_icon_component.rb: the component. - test fixtures at test/fixtures/brand_icons/ so tests don't need Figma access. BrandIconComponent.asset_path is swappable per-test. - 4 Lookbook previews including an empty_state scenario explaining how to run the exporter. 14 new component tests pass. Total suite: 52 tests, 111 assertions. Usage: FIGMA_ACCESS_TOKEN=xxx ruby script/export_brand_icons.rb # Review, commit the SVGs. 59 icons covering: # Payment: amex, visa, mastercard, applepay, paypal, discover, # cash, cash-dollar, card-default (color/fill/outline) # Social: facebook, instagram, youtube, google, linkedin, apple, # snapchat, pinterest, medium, angelist, slack, dribbble, # figma, discord, clubhouse, tumblr, telegram, tiktok, # vk, signal, reddit, github, fb-messenger, skype, # spectrum, zoom, facetime, google-meet, behance, # invision, microsoft
Matches Shipwright Pro's Avatar atom (Figma node 2013:5694). Renders as
image, initials, or user-icon fallback with an optional status indicator
dot in the bottom-right corner.
API:
<%= render Shipwright::AvatarComponent.new(src: "/john.jpg", alt: "John Legend") %>
<%= render Shipwright::AvatarComponent.new(initials: "WS") %>
<%= render Shipwright::AvatarComponent.new(alt: "Anonymous") %> # user icon fallback
<%= render Shipwright::AvatarComponent.new(src: ..., alt: ..., status: :online) %>
Props:
- src: optional image URL (alt required when given)
- alt: accessible name (required with src; used as aria-label on fallbacks)
- initials: optional string — auto-derives 1-2 char uppercase initials
("Wendy Sullivan" → "WS"). Falls back to using the string as-is if already <= 2 chars.
- size: :xxsm (16), :xsm (24), :sm (32), :md (40), :lg (56). Default :md.
- status: :online, :away, :busy, :offline — optional indicator dot
mapped to utility color tokens (positive/warning/negative/neutral)
- class: consumer override
- **html_attrs: pass-through
Content priority: src > initials > user icon.
New tokens (Shipwright Pro utility palette):
- --color-utility-neutral-default: #292c39
- --color-utility-positive-default: #48a356
- --color-utility-warning-default: #c09c17
- --color-border-inverse: #fdfdfd (for the status dot's ring against the avatar)
BaseComponent MERGER config updated for all four.
21 new tests pass. Total suite: 73 tests, 137 assertions.
Lookbook: image, initials, icon_fallback, sizes, content_types, status, with_meta.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
New `Shipwright::AvatarComponent` matching Shipwright Pro's Avatar atom (Figma node `2013:5694`). Renders as image, initials, or user-icon fallback with optional status indicator.
Stack: `fix/lookbook-button-previews` (#1) → `feat/icon-component` (#4) → this PR (uses IconComponent for the fallback `user` icon).
API
```erb
<%= render Shipwright::AvatarComponent.new(src: "/john.jpg", alt: "John Legend") %>
<%= render Shipwright::AvatarComponent.new(initials: "WS") %>
<%= render Shipwright::AvatarComponent.new(alt: "Anonymous user") %> <%# user icon fallback %>
<%= render Shipwright::AvatarComponent.new(src: ..., alt: ..., status: :online) %>
```
Content priority: `src` > `initials` > user icon.
Status indicator
Absolutely-positioned dot at bottom-right with an inverse-colored ring against the avatar. Maps semantic statuses to our utility color palette:
New tokens
```
--color-utility-neutral-default: #292c39 /* Shipwright Pro sentiment palette /
--color-utility-positive-default: #48a356
--color-utility-warning-default: #c09c17
--color-border-inverse: #fdfdfd / for the status dot's ring */
```
MERGER config extended to include all four. If the Badge PR (#3) merges first, git will see identical additions and merge cleanly.
Test plan
🤖 Generated with Claude Code