Skip to content

Commit dd44292

Browse files
hirsch88hirsch88
committed
feat(nav): mark as deprecated
1 parent 95601b4 commit dd44292

9 files changed

Lines changed: 109 additions & 63 deletions

File tree

‎.changeset/eight-socks-yawn.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@baloise/ds-core': minor
3+
---
4+
5+
**nav**: mark as deprecated

‎docs/stories/components/bal-button/bal-button.mdx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Canvas, Meta, Markdown } from '@storybook/blocks'
2-
import { Banner, Lead, PlaygroundBar, StoryHeading, Footer } from '../../../.storybook/blocks'
2+
import { Banner, Lead, PlaygroundBar, StoryHeading, Footer, InfoQuote } from '../../../.storybook/blocks'
33
import * as ButtonStories from './bal-button.stories'
44

55
<Meta of={ButtonStories} />
@@ -14,13 +14,28 @@ import * as ButtonStories from './bal-button.stories'
1414
way.
1515
</Lead>
1616

17+
<InfoQuote>
18+
We recommend using standard <b>HTML elements</b> such as `<button>` and `<a>` whenever possible instead of web
19+
components. However in combination with a spinner or icon use the component.
20+
This helps improve the rendering speed of your application or website.
21+
</InfoQuote>
22+
1723
<Canvas of={ButtonStories.Basic} sourceState="shown" />
1824

1925
<PlaygroundBar of={ButtonStories.Basic}></PlaygroundBar>
2026

2127
{/* STORIES */}
2228
{/* ------------------------------------------------------ */}
2329

30+
<StoryHeading of={ButtonStories.Component}></StoryHeading>
31+
32+
We recommend using the <b>web component</b> in combination with a `<bal-spinner>` or `<bal-icon>`,
33+
as it provides all necessary styles, library integrations and performance updates.
34+
35+
<Canvas of={ButtonStories.Component} />
36+
37+
{/* ------------------------------------------------------ */}
38+
2439
<StoryHeading of={ButtonStories.Variants}></StoryHeading>
2540

2641
Buttons are available in four main levels: **primary**, **secondary**, **tertiary**, and **link**. The primary level is specifically designed for prominent call-to-action elements.

‎docs/stories/components/bal-button/bal-button.stories.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ export default meta
2626
const Story = StoryFactory<Args>(meta)
2727

2828
export const Basic = Story({
29+
...withRender(() => `<button class="button is-primary">Button</button>`),
30+
})
31+
32+
export const Component = Story({
2933
args: {
3034
content: 'Primary',
3135
icon: 'plus',

‎docs/stories/components/bal-heading/bal-heading.mdx‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Canvas, Meta, Markdown } from '@storybook/blocks'
2-
import { Banner, Lead, PlaygroundBar, StoryHeading, Footer } from '../../../.storybook/blocks'
2+
import { Banner, Lead, PlaygroundBar, StoryHeading, Footer, InfoQuote } from '../../../.storybook/blocks'
33
import * as HeadingStories from './bal-heading.stories'
44

55
<Meta of={HeadingStories} />
@@ -12,28 +12,42 @@ import * as HeadingStories from './bal-heading.stories'
1212
**Heading** is a key component for displaying important titles and headers to organize and emphasize content.
1313
</Lead>
1414

15+
<InfoQuote>
16+
We recommend using standard <b>HTML elements</b> such as `<h1>`, `<h2>`, `<h3>`, and `<h4>` whenever possible instead of web
17+
components. This helps improve the rendering speed of your application or website.
18+
19+
Additionally, explore CSS utilities for more styling options.
20+
21+
</InfoQuote>
22+
1523
<Canvas of={HeadingStories.Basic} sourceState="shown" />
1624

1725
<PlaygroundBar of={HeadingStories.Basic}></PlaygroundBar>
1826

1927
{/* STORIES */}
2028
{/* ------------------------------------------------------ */}
2129

22-
<StoryHeading of={HeadingStories.Subtitle}></StoryHeading>
30+
<StoryHeading of={HeadingStories.Levels}></StoryHeading>
2331

24-
<Canvas of={HeadingStories.Subtitle} />
32+
<Canvas of={HeadingStories.Levels} sourceState={'shown'} />
2533

2634
{/* ------------------------------------------------------ */}
2735

28-
<StoryHeading of={HeadingStories.Levels}></StoryHeading>
36+
<StoryHeading of={HeadingStories.Colors}></StoryHeading>
2937

30-
<Canvas of={HeadingStories.Levels} />
38+
<Canvas of={HeadingStories.Colors} sourceState={'shown'} />
3139

3240
{/* ------------------------------------------------------ */}
3341

34-
<StoryHeading of={HeadingStories.Colors}></StoryHeading>
42+
<StoryHeading of={HeadingStories.Title}></StoryHeading>
3543

36-
<Canvas of={HeadingStories.Colors} />
44+
<Canvas of={HeadingStories.Title} />
45+
46+
{/* ------------------------------------------------------ */}
47+
48+
<StoryHeading of={HeadingStories.Subtitle}></StoryHeading>
49+
50+
<Canvas of={HeadingStories.Subtitle} />
3751

3852
{/* ------------------------------------------------------ */}
3953

@@ -52,12 +66,6 @@ Using `auto-level`, one can specify the minimum visual level at which the headin
5266

5367
{/* ------------------------------------------------------ */}
5468

55-
<StoryHeading of={HeadingStories.CSSUtilities}></StoryHeading>
56-
57-
<Canvas of={HeadingStories.CSSUtilities} />
58-
59-
{/* ------------------------------------------------------ */}
60-
6169
## Component API
6270

6371
import api from './api.md?raw'

‎docs/stories/components/bal-heading/bal-heading.stories.ts‎

Lines changed: 29 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,35 @@ export default meta
2626
const Story = StoryFactory<Args>(meta)
2727

2828
export const Basic = Story({
29+
...withRender(
30+
() => `
31+
<h1 class="title text-xxx-large mb-none">Heading</h1>
32+
<h2 class="subtitle text-xx-large">Subtitle</h2>`,
33+
),
34+
})
35+
36+
export const Levels = Story({
37+
...withRender(
38+
() => `
39+
<h1 class="title text-xxx-large">Heading 1</h1>
40+
<h2 class="title text-xx-large">Heading 2</h2>
41+
<h3 class="title text-x-large">Heading 3</h3>
42+
<h4 class="title text-large">Heading 4</h4>
43+
<h5 class="title text-normal">Heading 5</h5>`,
44+
),
45+
})
46+
47+
export const Colors = Story({
48+
...withRender(
49+
() => `
50+
<h4 class="title text-large">Default / Primary</h4>
51+
<h4 class="title text-large text-success">Success</h4>
52+
<h4 class="title text-large text-warning">Warning</h4>
53+
<h4 class="title text-large text-danger">Danger</h4>`,
54+
),
55+
})
56+
57+
export const Title = Story({
2958
args: {
3059
level: 'h1',
3160
subtitle: false,
@@ -44,38 +73,6 @@ export const Subtitle = Story({
4473
},
4574
})
4675

47-
export const Levels = Story({
48-
...withRender(
49-
() => `<div class="columns">
50-
<div class="column is-half bg-yellow-1">
51-
<bal-heading level="h1">Heading 1</bal-heading>
52-
<bal-heading level="h2">Heading 2</bal-heading>
53-
<bal-heading level="h3">Heading 3</bal-heading>
54-
<bal-heading level="h4">Heading 4</bal-heading>
55-
<bal-heading level="h5">Heading 5</bal-heading>
56-
</div>
57-
<div class="column is-half bg-yellow-2">
58-
<h1 class="title text-xxx-large">Heading 1</h1>
59-
<h2 class="title text-xx-large">Heading 2</h2>
60-
<h3 class="title text-x-large">Heading 3</h3>
61-
<h4 class="title text-large">Heading 4</h4>
62-
<h5 class="title text-normal">Heading 5</h5>
63-
</div>
64-
</div>`,
65-
),
66-
})
67-
68-
export const Colors = Story({
69-
...withRender(
70-
() => `<div>
71-
<bal-heading level="h4" space="none">Default / Primary</bal-heading>
72-
<bal-heading color="success" level="h4" space="none">Success</bal-heading>
73-
<bal-heading color="warning" level="h4" space="none">Warning</bal-heading>
74-
<bal-heading color="danger" level="h4" space="none">Danger</bal-heading>
75-
</div>`,
76-
),
77-
})
78-
7976
export const Spacing = Story({
8077
...withRender(
8178
() => `<div>
@@ -106,15 +103,3 @@ export const AutoLevel = Story({
106103
inverted: false,
107104
},
108105
})
109-
110-
export const CSSUtilities = Story({
111-
...withRender(
112-
() => `<div>
113-
<h1 class="title text-xxx-large">Heading 1</h1>
114-
<h2 class="title text-xx-large">Heading 2</h2>
115-
<h3 class="title text-x-large">Heading 3</h3>
116-
<h4 class="title text-large">Heading 4</h4>
117-
<h5 class="title text-normal">Heading 5</h5>
118-
</div>`,
119-
),
120-
})

‎docs/stories/components/bal-nav/bal-nav.mdx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Canvas, Meta, Markdown } from '@storybook/blocks'
2-
import { Banner, Lead, PlaygroundBar, StoryHeading, Footer } from '../../../.storybook/blocks'
2+
import { Banner, Lead, PlaygroundBar, StoryHeading, Footer, WarningQuote } from '../../../.storybook/blocks'
33
import * as NavStories from './bal-nav.stories'
44

55
<Meta of={NavStories} />
@@ -8,7 +8,13 @@ import * as NavStories from './bal-nav.stories'
88

99
<Banner of={NavStories} />
1010

11-
<Lead>Navigation component serves as a central hub for seamless user navigation within the applications.</Lead>
11+
<Lead>Navigation component serves as a central hub for seamless user navigation within the websites.</Lead>
12+
13+
<WarningQuote>
14+
**Deprecation Warning!** <br />
15+
Please use the components [Navbar](?path=/docs/components-navigation-navbar--documentation), because this component is
16+
marked as deprecated and will be removed with the next major releases.
17+
</WarningQuote>
1218

1319
## Anatomy
1420

‎docs/stories/components/bal-nav/bal-nav.stories.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { buttonLinkItems, logoLinkItem, optionLinkItems } from './bal-nav.data'
66
type Args = JSX.BalNav & { content: string }
77

88
const meta: Meta<Args> = {
9-
title: 'Components/Navigation/Nav',
9+
title: 'Components/Deprecated/Nav',
1010
parameters: {
1111
layout: 'fullscreen',
1212
},
@@ -28,7 +28,7 @@ const meta: Meta<Args> = {
2828
}
2929
})
3030

31-
section.innerHTML = ` <bal-nav content-width="440">
31+
section.innerHTML = `<bal-nav content-width="440">
3232
<bal-popup id="popup-call" label="24h Kundenservice">
3333
<bal-stack layout="vertical">
3434
<bal-button expanded>00800 24 800 800</bal-button>

‎docs/stories/components/bal-text/bal-text.mdx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Canvas, Meta, Markdown } from '@storybook/blocks'
2-
import { Banner, Lead, PlaygroundBar, StoryHeading, Footer } from '../../../.storybook/blocks'
2+
import { Banner, Lead, PlaygroundBar, StoryHeading, Footer, InfoQuote } from '../../../.storybook/blocks'
33
import * as TextStories from './bal-text.stories'
44

55
<Meta of={TextStories} />
@@ -10,13 +10,27 @@ import * as TextStories from './bal-text.stories'
1010

1111
<Lead>**Text** is a fundamental component used to display and present textual content.</Lead>
1212

13+
<InfoQuote>
14+
We recommend using standard <b>HTML elements</b> such as `<p>`, `<span>`, `<b>`, and `<strong>` whenever possible instead of web
15+
components. This helps improve the rendering speed of your application or website.
16+
17+
Additionally, explore CSS utilities for more styling options.
18+
19+
</InfoQuote>
20+
1321
<Canvas of={TextStories.Basic} sourceState="shown" />
1422

1523
<PlaygroundBar of={TextStories.Basic}></PlaygroundBar>
1624

1725
{/* STORIES */}
1826
{/* ------------------------------------------------------ */}
1927

28+
<StoryHeading of={TextStories.Text}></StoryHeading>
29+
30+
<Canvas of={TextStories.Text} sourceState="shown" />
31+
32+
{/* ------------------------------------------------------ */}
33+
2034
<StoryHeading of={TextStories.NoWrap}></StoryHeading>
2135

2236
If the text is longer than the container with the property `no-wrap` the text will be cut.

‎docs/stories/components/bal-text/bal-text.stories.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,15 @@ export default meta
2626
const Story = StoryFactory<Args>(meta)
2727

2828
export const Basic = Story({
29+
...withRender(
30+
() => `
31+
<p><b>Primary paragraph</b> use b or strong to make bold sections</p>
32+
<p class="text-primary-light text-small"><b>Secondary paragraph</b> used for hints</p>
33+
`,
34+
),
35+
})
36+
37+
export const Text = Story({
2938
args: {
3039
content:
3140
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',

0 commit comments

Comments
 (0)