feat(apollo-wind): add Logos page with brand and product logo library#390
feat(apollo-wind): add Logos page with brand and product logo library#3901980computer wants to merge 4 commits intomainfrom
Conversation
Adds a new Logos page to the Theme section in Storybook, sitting between Colors and Icons in the sidebar. The page provides a browsable library of brand and product logos with one-click import path copying. - Creates packages/apollo-core/src/icons/svg/brand-logo/ with favicon, logo-full-dark, logo-full-light, and logo-icon-light SVGs - Brand logos section displays 5 assets (Logo Full Light, Logo Full Dark, Logo Icon Dark, App Icon & Favicon, Autopilot) each with theme-appropriate solid backgrounds; Autopilot rendered inline with hardcoded colors - Product logos section loads all 24 SVGs from apollo-core via import.meta.glob plus 5 studio/agent desktop logos, displayed in a 3-column card grid - Updates storySort to place Logos at root Theme level: Colors > Logos > Icons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency License Review
License distribution
Excluded packages
|
| ); | ||
|
|
||
| const brandLogos = [ | ||
| { displayName: 'Logo Full Light', url: logoFullLightUrl, importPath: 'packages/apollo-core/src/icons/svg/brand-logo/logo-full-light.svg', bg: LIGHT_BG, preview: undefined }, |
There was a problem hiding this comment.
These are paths to the logos from within apollo-core, which other developers won't be able to use out of the box. To be consumable by other packages, we need to export the image so that consumers can import them like this: import { <SvgName> } @uipath/apollo-core/icons (e.g. import { Favicon } from '@uipath/apollo-core/icons').
You can do this by adding this code to packages/apollo-core/src/icons/index.ts (preferably right behind the // product-logo section:
// brand-logo
export { default as Favicon } from './svg/brand-logo/favicon.svg';
export { default as LogoFullDark } from './svg/brand-logo/logo-full-dark.svg';
export { default as LogoFullLight } from './svg/brand-logo/logo-full-light.svg';
export { default as LogoIconLight } from './svg/brand-logo/logo-icon-light.svg';
There was a problem hiding this comment.
As a result, the import path for every icon on this page should just be @uipath/apollo-core/icons. This means you can replace the importPath field in the brandLogos and productLogos arrays with 'componentName' (e.g. 'Favicon', 'LogoFullDark', etc.) to be used in the import path copies.
| const [copied, setCopied] = React.useState(false); | ||
|
|
||
| const handleCopy = () => { | ||
| navigator.clipboard.writeText(importPath).then(() => { |
There was a problem hiding this comment.
If I were a developer clicking on "Copy import" here, I would want to get a line of code I can copy-paste.
Assuming we're using correct paths, I'll just get @uipath/apollo-core/icons. I'd prefer import { <IconName> } from @uipath/apollo-core-icons.
There was a problem hiding this comment.
e.g. assuming you replaced importPath with a field like componentName/iconComponentName, you could do something like this: import { ${componentName} } from '@uipath/apollo-core/icons'.
This would give the user import { Academy } from '@uipath/apollo-core/icons', which would work when they paste it into their code.
There was a problem hiding this comment.
Agreed. Adding a secondary option is ideal. There are two consumer paths we are aimming for
- Current - The svg path in the repo
- Need to add - Usage in code
So instead of just one option (1) I can add the second in as well.
There was a problem hiding this comment.
sounds good. In my opinion, the options we have matter less than the correctness of the import path (e.g. @uipath/apollo-core/icons). Everything else is a nice-to-have 😄
There was a problem hiding this comment.
@david-rios-uipath pushed this update for your review : )
| ); | ||
|
|
||
| const brandLogos = [ | ||
| { displayName: 'Logo Full Light', url: logoFullLightUrl, importPath: 'packages/apollo-core/src/icons/svg/brand-logo/logo-full-light.svg', bg: LIGHT_BG, preview: undefined }, |
There was a problem hiding this comment.
| { displayName: 'Logo Full Light', url: logoFullLightUrl, importPath: 'packages/apollo-core/src/icons/svg/brand-logo/logo-full-light.svg', bg: LIGHT_BG, preview: undefined }, | |
| { displayName: 'Logo Full Light', url: logoFullLightUrl, componentName: 'LogoFullLight', bg: LIGHT_BG, preview: undefined }, |
repeated for all icon entries
There was a problem hiding this comment.
should the name of this file be logo-icon-dark.svg?
There was a problem hiding this comment.
Yes, everything is setup identical to how we structure in Figma. This update just made it available in Storybook which we haven't had.
Each logo card now has two copy actions — Copy path (the SVG file path in the repo) and Copy usage (a ready-to-use import statement mapped to the published package path). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…bels Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2 participants
Summary
packages/apollo-core/src/icons/svg/brand-logo/— a new dedicated folder for UiPath brand SVGs (favicon, logo-full-dark, logo-full-light, logo-icon-light)apollo-coreplus 5 studio/agent desktop logos in a 3-column card gridstorySortto reflect the new sidebar order: Colors → Logos → Icons → Spacing → Typography → FutureTest plan
import LogoFullLight from '@uipath/apollo-core/icons/svg/brand-logo/logo-full-light.svg';) and shows "Copied!" feedback🤖 Generated with Claude Code