WD-35460 feat(svelte-ds-app-launchpad): Upstream SideNavigation

[jademathre-canonical]

Done

Added SideNavigation component

Questions

The SideNavigation uses a number of launchpad icons. Do we want to upstream the icons as well? Or should the SideNavigation be refactored to not use the launchpad icons? If we do want to upstream the icons, I can split the upstreaming of the icons to a separate branch.

The SideNavigation uses the launchpad logo and title. This was previously left as a TODO. Do we want to address anything with TODO now or have it remain as is for now?

The --lp color tokens are missing, resulting in the colors not displaying. I added a temporary import to --tmp tokens, but this is not a real solution. Any input on how to address the color tokens for the SideNavigation?

Linked to the Jira issue is design documentation for the side navigation. Do we want to incorporate those designs here, or perhaps as a follow-up feature?

QA

• Verify the Side Navigation component looks and functions as expected

PR readiness check

• PR should have one of the following labels:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• PR title follows the Conventional Commits format.
• The code follows the appropriate code standards
• All packages define the required scripts in package.json:
  • All packages: check, check:fix, and test.
  • Packages with build steps: build to build the package for development or distribution, build:all to build all artifacts. See CONTRIBUTING.md for details.
• If this PR introduces a new package: first-time publish has been done manually from inside the package directory using npm publish --access public (first-time publishing is not automated). Run bun run publish:status from the repo root to verify.

[jademathre-canonical]

@steciuk @goulinkh Hello, I have some outstanding questions above regarding how to proceed with the side navigation. Could you please provide some insight if possible? Thanks

[steciuk]

Hey @jademathre-canonical, thank you for the amazing work!

To answer your questions, here is my take:

• Regarding the icons: I recently spoke with @EnzoYD about upstreaming certain icons to assets/icons (used to build @canonical/svelte-icons components). He is checking with Design to confirm which ones can be moved. Ideally, that is our long-term path forward. In the meantime, let’s temporarily only copy the icons used in the component implementation and refactor the stories to use the icons already available in @canonical/svelte-icons.
• Regarding the missing tokens: I’ll investigate this on Monday and get back to you. If there are any inconsistencies, I’ll resolve them directly within the tokens package.
• Regarding the linked SideNavigation spec: This is a significant undertaking. I think it makes more sense to migrate the current simple version now and then iterate on features and improvements in separate tasks.
• Regarding the product logos: I don't think we have a clear idea of how to handle them properly just yet. @goulinkh, any thoughts? Do you have any additional recommendations?

[steciuk]

The --lp color tokens are missing...

I failed to identify any missing --lp color tokens. Which ones exactly do you miss?

[jademathre-canonical]

The --lp color tokens are missing...

I failed to identify any missing --lp color tokens. Which ones exactly do you miss?

--lp-color-background-neutral-hover, there was no hover highlight.

[steciuk]

--lp-color-background-neutral-hover, there was no hover highlight.

I checked the Storybook build for this PR and the token seems to be defined correctly there (see screenshot below).

Could you maybe try running bun install if you can't see it locally? If it’s still acting up, let’s hop on a quick call, and I'll try to help you hunt down the cause of it. :)