feat: add application layout components

[huwshimi]

Done

• Add Vanilla application layout components.

Note: this PR requires the follow to land first:

• feat: add application layout Panel component #1088
• feat: add application layout side navigation components #1089

Original PR and discussion: #1031.

A number of tests were performed using these components:

canonical/lxd-ui#768
canonical/identity-platform-admin-ui#309
canonical/maas-ui#5434
canonical/juju-dashboard#1752
canonical/rebac-admin#106
https://github.com/canonical/anbox-cloud-dashboard/pull/806

QA

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

Note: the following PRs need to merge before this can be QAed:

• feat: add application layout Panel component #1088
• feat: add application layout side navigation components #1089
• Go to the demo storybook.
• Go to the application layout components and check the docs look OK.

Percy steps

• New components expected.

Fixes

Fixes: #420.

[webteam-app]

Demo

Jenkins

demos.haus

[huwshimi]

This will fail CI until the following PRs land:

• feat: add application layout Panel component #1088
• feat: add application layout side navigation components #1089

[edlerd]

The other PRs landed, and this one was rebased on main. There is a type confusion in the AppNavigation.stories.tsx file. I am not sure how to resolve or why it doesn't automatically pick up the right type with the icon prop. @huwshimi can you please have a look at this.

[huwshimi]

The other PRs landed, and this one was rebased on main. There is a type confusion in the AppNavigation.stories.tsx file. I am not sure how to resolve or why it doesn't automatically pick up the right type with the icon prop. @huwshimi can you please have a look at this.

Fixed!

[edlerd]

The "Default" view in storybook for AppNavigation, AppStatus, AppAside and others are empty. Should we change those?

[huwshimi]

The "Default" view in storybook for AppNavigation, AppStatus, AppAside and others are empty. Should we change those?

Fixed! I merged these with stories that had content.

[edlerd]

LGTM

[github-actions]

🎉 This PR is included in version 0.59.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀