From d8b2820dce2a963ab010e8c27d7ab287df24f445 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Wed, 8 Jan 2025 14:50:25 +0100 Subject: [PATCH 1/4] Feat(web): Introduce `NavigationItem` subcomponent #DS-1411 --- .../src/scss/components/Navigation/README.md | 39 +++++++++++++--- .../components/Navigation/_Navigation.scss | 4 +- .../Navigation/_NavigationAction.scss | 44 +++++++++++-------- .../Navigation/_NavigationItem.scss | 17 +++++++ .../scss/components/Navigation/_theme.scss | 43 ++++++++++-------- .../src/scss/components/Navigation/index.html | 12 ++--- .../src/scss/components/Navigation/index.scss | 1 + 7 files changed, 108 insertions(+), 52 deletions(-) create mode 100644 packages/web/src/scss/components/Navigation/_NavigationItem.scss diff --git a/packages/web/src/scss/components/Navigation/README.md b/packages/web/src/scss/components/Navigation/README.md index 2b40fcbc58..e11cba6d26 100644 --- a/packages/web/src/scss/components/Navigation/README.md +++ b/packages/web/src/scss/components/Navigation/README.md @@ -5,6 +5,7 @@ The `Navigation` component is a container for the navigation actions of the appl It consists of these parts: - [Navigation](#navigation) + - [NavigationItem](#navigation-item) - [NavigationAction](#navigation-action) ## Navigation @@ -29,6 +30,34 @@ it will insert a gap between them. ℹ️ Don't forget to add the `aria-label` attribute to the `Navigation` component for correct accessible title. +## Navigation Item + +The `NavigationItem` is a container for a navigation action or any other action. + +```html + +``` + +### Navigation Item Alignment + +Use alignment classes to center or stretch the content. If there is a NavigationAction inside, it overrides the class and +stretches its content vertically. + +```html + + + +``` + ## Navigation Action The `NavigationAction` is component that is styled to be used as a navigation action. @@ -58,13 +87,13 @@ With NavigationAction components: ```html