Flexible sidebar

[jamesscottbrown]

What does this change?

Why?

How?

Related issues:

Does this introduce new dependencies?

How is it tested?

How is it documented?

Are light and dark themes considered?

Is it complete?

• [ ] Have you included changeset file?
• [ ] If this adds a new component, is it exported via index.js?

[jamesscottbrown]

This enables sidebars containing tab icons.

It has two types of sidebar headings: SidebarAppHeader for app headings with the blue flash, and SidebarHeader that matches the header in Figma.

[jamesscottbrown]

Preview: https://dev.ldn-gis.co.uk/storybook-flexible-sidebar/?path=/docs/ldn-viz-introduction--documentation

Preview of the components that go inside the sidebar: https://dev.ldn-gis.co.uk/storybook-flexible-sidebar/?path=/story/ui-sidebarelements-sidebarappheader--with-description-and-more-info

[mikeldn]

• Horizontal Siderbar Tabs in Storybook docs, aren't showing as Horizontal.
• Selected tab state not correct by default in strory
• Icon placement within tabs is different between Horz & Vert Tabs.

[mikeldn]

Sidebar toggle (custom icon) not showing a different icon in docs, so a bit confusing?!?

[ChrisKnightLDN]

• Horizontal Siderbar Tabs in Storybook docs, aren't showing as Horizontal.
• Selected tab state not correct by default in strory
• Icon placement within tabs is different between Horz & Vert Tabs.

This was due to the use of context within the component. I have updated the story to use a context wrapper to reflect this.

[ChrisKnightLDN]

Sidebar toggle (custom icon) not showing a different icon in docs, so a bit confusing?!?

This was also due to context that is provided by the sidebar component - therefore absent in the story where the component is isolated. I have updated the story to provide the context that the functionality requires.