feat(nav): mark as deprecated

baloise · Jan 31, 2025 · dd44292 · dd44292
1 parent 95601b4
commit dd44292
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 63 deletions.
diff --git a/.changeset/eight-socks-yawn.md b/.changeset/eight-socks-yawn.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**nav**: mark as deprecated
diff --git a/docs/stories/components/bal-button/bal-button.mdx b/docs/stories/components/bal-button/bal-button.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta, Markdown } from '@storybook/blocks'
-import { Banner, Lead, PlaygroundBar, StoryHeading, Footer } from '../../../.storybook/blocks'
+import { Banner, Lead, PlaygroundBar, StoryHeading, Footer, InfoQuote } from '../../../.storybook/blocks'
 import * as ButtonStories from './bal-button.stories'
 
 <Meta of={ButtonStories} />
@@ -14,13 +14,28 @@ import * as ButtonStories from './bal-button.stories'
   way.
 </Lead>
 
+<InfoQuote>
+  We recommend using standard <b>HTML elements</b> such as `<button>` and `<a>` whenever possible instead of web
+  components. However in combination with a spinner or icon use the component.
+  This helps improve the rendering speed of your application or website.
+</InfoQuote>
+
 <Canvas of={ButtonStories.Basic} sourceState="shown" />
 
 <PlaygroundBar of={ButtonStories.Basic}></PlaygroundBar>
 
 {/* STORIES */}
 {/* ------------------------------------------------------ */}
 
+<StoryHeading of={ButtonStories.Component}></StoryHeading>
+
+We recommend using the <b>web component</b> in combination with a `<bal-spinner>` or `<bal-icon>`,
+as it provides all necessary styles, library integrations and performance updates.
+
+<Canvas of={ButtonStories.Component} />
+
+{/* ------------------------------------------------------ */}
+
 <StoryHeading of={ButtonStories.Variants}></StoryHeading>
 
 Buttons are available in four main levels: **primary**, **secondary**, **tertiary**, and **link**. The primary level is specifically designed for prominent call-to-action elements.

diff --git a/docs/stories/components/bal-button/bal-button.stories.ts b/docs/stories/components/bal-button/bal-button.stories.ts
@@ -26,6 +26,10 @@ export default meta
 const Story = StoryFactory<Args>(meta)
 
 export const Basic = Story({
+  ...withRender(() => `<button class="button is-primary">Button</button>`),
+})
+
+export const Component = Story({
   args: {
     content: 'Primary',
     icon: 'plus',

diff --git a/docs/stories/components/bal-heading/bal-heading.mdx b/docs/stories/components/bal-heading/bal-heading.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta, Markdown } from '@storybook/blocks'
-import { Banner, Lead, PlaygroundBar, StoryHeading, Footer } from '../../../.storybook/blocks'
+import { Banner, Lead, PlaygroundBar, StoryHeading, Footer, InfoQuote } from '../../../.storybook/blocks'
 import * as HeadingStories from './bal-heading.stories'
 
 <Meta of={HeadingStories} />
@@ -12,28 +12,42 @@ import * as HeadingStories from './bal-heading.stories'
   **Heading** is a key component for displaying important titles and headers to organize and emphasize content.
 </Lead>
 
+<InfoQuote>
+  We recommend using standard <b>HTML elements</b> such as `<h1>`, `<h2>`, `<h3>`, and `<h4>` whenever possible instead of web
+  components. This helps improve the rendering speed of your application or website.
+
+Additionally, explore CSS utilities for more styling options.
+
+</InfoQuote>
+
 <Canvas of={HeadingStories.Basic} sourceState="shown" />
 
 <PlaygroundBar of={HeadingStories.Basic}></PlaygroundBar>
 
 {/* STORIES */}
 {/* ------------------------------------------------------ */}
 
-<StoryHeading of={HeadingStories.Subtitle}></StoryHeading>
+<StoryHeading of={HeadingStories.Levels}></StoryHeading>
 
-<Canvas of={HeadingStories.Subtitle} />
+<Canvas of={HeadingStories.Levels} sourceState={'shown'} />
 
 {/* ------------------------------------------------------ */}
 
-<StoryHeading of={HeadingStories.Levels}></StoryHeading>
+<StoryHeading of={HeadingStories.Colors}></StoryHeading>
 
-<Canvas of={HeadingStories.Levels} />
+<Canvas of={HeadingStories.Colors} sourceState={'shown'} />
 
 {/* ------------------------------------------------------ */}
 
-<StoryHeading of={HeadingStories.Colors}></StoryHeading>
+<StoryHeading of={HeadingStories.Title}></StoryHeading>
 
-<Canvas of={HeadingStories.Colors} />
+<Canvas of={HeadingStories.Title} />
+
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={HeadingStories.Subtitle}></StoryHeading>
+
+<Canvas of={HeadingStories.Subtitle} />
 
 {/* ------------------------------------------------------ */}
 
@@ -52,12 +66,6 @@ Using `auto-level`, one can specify the minimum visual level at which the headin
 
 {/* ------------------------------------------------------ */}
 
-<StoryHeading of={HeadingStories.CSSUtilities}></StoryHeading>
-
-<Canvas of={HeadingStories.CSSUtilities} />
-
-{/* ------------------------------------------------------ */}
-
 ## Component API
 
 import api from './api.md?raw'

diff --git a/docs/stories/components/bal-heading/bal-heading.stories.ts b/docs/stories/components/bal-heading/bal-heading.stories.ts
@@ -26,6 +26,35 @@ export default meta
 const Story = StoryFactory<Args>(meta)
 
 export const Basic = Story({
+  ...withRender(
+    () => `
+<h1 class="title text-xxx-large mb-none">Heading</h1>
+<h2 class="subtitle text-xx-large">Subtitle</h2>`,
+  ),
+})
+
+export const Levels = Story({
+  ...withRender(
+    () => `
+<h1 class="title text-xxx-large">Heading 1</h1>
+<h2 class="title text-xx-large">Heading 2</h2>
+<h3 class="title text-x-large">Heading 3</h3>
+<h4 class="title text-large">Heading 4</h4>
+<h5 class="title text-normal">Heading 5</h5>`,
+  ),
+})
+
+export const Colors = Story({
+  ...withRender(
+    () => `
+<h4 class="title text-large">Default / Primary</h4>
+<h4 class="title text-large text-success">Success</h4>
+<h4 class="title text-large text-warning">Warning</h4>
+<h4 class="title text-large text-danger">Danger</h4>`,
+  ),
+})
+
+export const Title = Story({
   args: {
     level: 'h1',
     subtitle: false,
@@ -44,38 +73,6 @@ export const Subtitle = Story({
   },
 })
 
-export const Levels = Story({
-  ...withRender(
-    () => `<div class="columns">
-  <div class="column is-half bg-yellow-1">
-    <bal-heading level="h1">Heading 1</bal-heading>
-    <bal-heading level="h2">Heading 2</bal-heading>
-    <bal-heading level="h3">Heading 3</bal-heading>
-    <bal-heading level="h4">Heading 4</bal-heading>
-    <bal-heading level="h5">Heading 5</bal-heading>
-  </div>
-  <div class="column is-half bg-yellow-2">
-    <h1 class="title text-xxx-large">Heading 1</h1>
-    <h2 class="title text-xx-large">Heading 2</h2>
-    <h3 class="title text-x-large">Heading 3</h3>
-    <h4 class="title text-large">Heading 4</h4>
-    <h5 class="title text-normal">Heading 5</h5>
-  </div>
-</div>`,
-  ),
-})
-
-export const Colors = Story({
-  ...withRender(
-    () => `<div>
-    <bal-heading level="h4" space="none">Default / Primary</bal-heading>
-    <bal-heading color="success" level="h4" space="none">Success</bal-heading>
-    <bal-heading color="warning" level="h4" space="none">Warning</bal-heading>
-    <bal-heading color="danger" level="h4" space="none">Danger</bal-heading>
-  </div>`,
-  ),
-})
-
 export const Spacing = Story({
   ...withRender(
     () => `<div>
@@ -106,15 +103,3 @@ export const AutoLevel = Story({
     inverted: false,
   },
 })
-
-export const CSSUtilities = Story({
-  ...withRender(
-    () => `<div>
-    <h1 class="title text-xxx-large">Heading 1</h1>
-    <h2 class="title text-xx-large">Heading 2</h2>
-    <h3 class="title text-x-large">Heading 3</h3>
-    <h4 class="title text-large">Heading 4</h4>
-    <h5 class="title text-normal">Heading 5</h5>
-  </div>`,
-  ),
-})
diff --git a/docs/stories/components/bal-nav/bal-nav.mdx b/docs/stories/components/bal-nav/bal-nav.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta, Markdown } from '@storybook/blocks'
-import { Banner, Lead, PlaygroundBar, StoryHeading, Footer } from '../../../.storybook/blocks'
+import { Banner, Lead, PlaygroundBar, StoryHeading, Footer, WarningQuote } from '../../../.storybook/blocks'
 import * as NavStories from './bal-nav.stories'
 
 <Meta of={NavStories} />
@@ -8,7 +8,13 @@ import * as NavStories from './bal-nav.stories'
 
 <Banner of={NavStories} />
 
-<Lead>Navigation component serves as a central hub for seamless user navigation within the applications.</Lead>
+<Lead>Navigation component serves as a central hub for seamless user navigation within the websites.</Lead>
+
+<WarningQuote>
+  **Deprecation Warning!** <br />
+  Please use the components [Navbar](?path=/docs/components-navigation-navbar--documentation), because this component is
+  marked as deprecated and will be removed with the next major releases.
+</WarningQuote>
 
 ## Anatomy
 

diff --git a/docs/stories/components/bal-nav/bal-nav.stories.ts b/docs/stories/components/bal-nav/bal-nav.stories.ts
@@ -6,7 +6,7 @@ import { buttonLinkItems, logoLinkItem, optionLinkItems } from './bal-nav.data'
 type Args = JSX.BalNav & { content: string }
 
 const meta: Meta<Args> = {
-  title: 'Components/Navigation/Nav',
+  title: 'Components/Deprecated/Nav',
   parameters: {
     layout: 'fullscreen',
   },
@@ -28,7 +28,7 @@ const meta: Meta<Args> = {
       }
     })
 
-    section.innerHTML = ` <bal-nav content-width="440">
+    section.innerHTML = `<bal-nav content-width="440">
     <bal-popup id="popup-call" label="24h Kundenservice">
       <bal-stack layout="vertical">
         <bal-button expanded>00800 24 800 800</bal-button>

diff --git a/docs/stories/components/bal-text/bal-text.mdx b/docs/stories/components/bal-text/bal-text.mdx
@@ -1,5 +1,5 @@
 import { Canvas, Meta, Markdown } from '@storybook/blocks'
-import { Banner, Lead, PlaygroundBar, StoryHeading, Footer } from '../../../.storybook/blocks'
+import { Banner, Lead, PlaygroundBar, StoryHeading, Footer, InfoQuote } from '../../../.storybook/blocks'
 import * as TextStories from './bal-text.stories'
 
 <Meta of={TextStories} />
@@ -10,13 +10,27 @@ import * as TextStories from './bal-text.stories'
 
 <Lead>**Text** is a fundamental component used to display and present textual content.</Lead>
 
+<InfoQuote>
+  We recommend using standard <b>HTML elements</b> such as `<p>`, `<span>`, `<b>`, and `<strong>` whenever possible instead of web
+  components. This helps improve the rendering speed of your application or website.
+
+Additionally, explore CSS utilities for more styling options.
+
+</InfoQuote>
+
 <Canvas of={TextStories.Basic} sourceState="shown" />
 
 <PlaygroundBar of={TextStories.Basic}></PlaygroundBar>
 
 {/* STORIES */}
 {/* ------------------------------------------------------ */}
 
+<StoryHeading of={TextStories.Text}></StoryHeading>
+
+<Canvas of={TextStories.Text} sourceState="shown" />
+
+{/* ------------------------------------------------------ */}
+
 <StoryHeading of={TextStories.NoWrap}></StoryHeading>
 
 If the text is longer than the container with the property `no-wrap` the text will be cut.

diff --git a/docs/stories/components/bal-text/bal-text.stories.ts b/docs/stories/components/bal-text/bal-text.stories.ts
@@ -26,6 +26,15 @@ export default meta
 const Story = StoryFactory<Args>(meta)
 
 export const Basic = Story({
+  ...withRender(
+    () => `
+<p><b>Primary paragraph</b> use b or strong to make bold sections</p>
+<p class="text-primary-light text-small"><b>Secondary paragraph</b> used for hints</p>
+`,
+  ),
+})
+
+export const Text = Story({
   args: {
     content:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',