Skip to content

chore: add new badge, fix text stories, update core #290 #293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
airikej merged 1 commit into from
Jan 26, 2026
Merged

chore: add new badge, fix text stories, update core #290 #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,12 @@ const preview: Preview = {
description:
'This component lacks some TEDI-Ready functionality, e.g it may rely on another component that has not yet been developed',
},
mobileViewDifference: {
background: '#99BDDA',
color: '#000',
description:
'This component has a different layout on mobile. Use the mobile breakpoint or resize the browser window to review the mobile design.',
},
},
},
},
Expand Down
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"ngx-float-ui": "^19.0.1 || ^20.0.0"
},
"dependencies": {
"@tedi-design-system/core": "^3.0.0"
"@tedi-design-system/core": "^3.0.1"
},
"devDependencies": {
"@angular-devkit/core": "19.2.15",
Expand Down
195 changes: 138 additions & 57 deletions src/docs/badges.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,146 @@
import { Meta } from '@storybook/blocks';
import { Meta } from "@storybook/blocks";

<Meta name="Welcome" title="Documentation/Badge guide" />

# Component badges

In our Storybook, we use status badges to indicate key attributes of components at a glance. These badges provide information about a component's development status, feature support, and other relevant characteristics.

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', alignItems: 'center', gap: '1rem' }}>
<div style={{
width: 'fit-content',
backgroundColor: '#ff8000',
padding: '4px 8px',
borderRadius: '4px',
}}>
<span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Dev Component</span>
</div>
<p style={{ gridColumn: 'span 4' }}>This badge indicates that the component is intended for developers only and is not available in Figma.</p>
<div style={{
height: 'fit-content',
width: 'fit-content',
backgroundColor: '#308653',
padding: '4px 8px',
borderRadius: '4px',
}}>
<span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Breakpoint support</span>
</div>
<p style={{ gridColumn: 'span 4' }}>This badge signifies that the component supports breakpoints, allowing props to be overridden at different.</p>
<div style={{
width: 'fit-content',
backgroundColor: '#fff',
padding: '4px 8px',
borderRadius: '4px',
}}>
<span style={{ color: '#000', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Internal Component</span>
</div>
<p style={{ gridColumn: 'span 4' }}>This badge indicates that the component is used internally within TEDI and is not exported for public use.</p>
<div style={{
width: 'fit-content',
backgroundColor: '#f02c2c',
padding: '4px 8px',
borderRadius: '4px',
}}>
<span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Deprecated</span>
</div>
<p style={{ gridColumn: 'span 4' }}>This badge indicates that the component is being phased out and will be removed in a future release.</p>
<div style={{
width: 'fit-content',
backgroundColor: '#005aa3',
padding: '4px 8px',
borderRadius: '4px',
}}>
<span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Exists in TEDI Ready</span>
</div>
<p style={{ gridColumn: 'span 4' }}>This badge means that an equivalent version of the component is available in the TEDI-Ready component set.</p>
<div style={{
width: 'fit-content',
backgroundColor: '#9bbb5f',
padding: '4px 8px',
borderRadius: '4px',
}}>
<span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Partially TEDI-Ready</span>
</div>
<p style={{ gridColumn: 'span 4' }}>This badge indicates that the component lacks some TEDI-Ready functionality. For example, it may rely on another component that has not yet been developed.</p>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(5, 1fr)",
alignItems: "center",
gap: "1rem",
}}
>
<div
style={{
width: "fit-content",
backgroundColor: "#ff8000",
padding: "4px 8px",
borderRadius: "4px",
color: "#fff",
fontSize: "14px",
fontWeight: "bold",
textTransform: "uppercase",
}}
>
{"Dev Component"}
</div>
<p style={{ gridColumn: "span 4" }}>
This badge indicates that the component is intended for developers only and
is not available in Figma.
</p>
<div
style={{
height: "fit-content",
width: "fit-content",
backgroundColor: "#308653",
padding: "4px 8px",
borderRadius: "4px",
color: "#fff",
fontSize: "14px",
fontWeight: "bold",
textTransform: "uppercase",
}}
>
{"Breakpoint support"}
</div>
<p style={{ gridColumn: "span 4" }}>
This badge signifies that the component supports breakpoints, allowing props
to be overridden at different.
</p>
<div
style={{
width: "fit-content",
backgroundColor: "#fff",
padding: "4px 8px",
borderRadius: "4px",
color: "#000",
fontSize: "14px",
fontWeight: "bold",
textTransform: "uppercase",
}}
>
{"Internal Component"}
</div>
<p style={{ gridColumn: "span 4" }}>
This badge indicates that the component is used internally within TEDI and
is not exported for public use.
</p>
<div
style={{
width: "fit-content",
backgroundColor: "#f02c2c",
padding: "4px 8px",
borderRadius: "4px",
color: "#fff",
fontSize: "14px",
fontWeight: "bold",
textTransform: "uppercase",
}}
>
{"Deprecated"}
</div>
<p style={{ gridColumn: "span 4" }}>
This badge indicates that the component is being phased out and will be
removed in a future release.
</p>
<div
style={{
width: "fit-content",
backgroundColor: "#005aa3",
padding: "4px 8px",
borderRadius: "4px",
color: "#fff",
fontSize: "14px",
fontWeight: "bold",
textTransform: "uppercase",
}}
>
{"Exists in TEDI Ready"}
</div>
<p style={{ gridColumn: "span 4" }}>
This badge means that an equivalent version of the component is available in
the TEDI-Ready component set.
</p>
<div
style={{
width: "fit-content",
backgroundColor: "#9bbb5f",
padding: "4px 8px",
borderRadius: "4px",
color: "#fff",
fontSize: "14px",
fontWeight: "bold",
textTransform: "uppercase",
}}
>
{"Partially TEDI-Ready"}
</div>
<p style={{ gridColumn: "span 4" }}>
This badge indicates that the component lacks some TEDI-Ready functionality.
For example, it may rely on another component that has not yet been
developed.
</p>
<div
style={{
width: "fit-content",
backgroundColor: "#99BDDA",
padding: "4px 8px",
borderRadius: "4px",
color: "#000",
fontSize: "14px",
fontWeight: "bold",
textTransform: "uppercase",
textAlign: "center",
}}
>
{"Mobile view difference"}
</div>
<p style={{ gridColumn: "span 4" }}>
This component has a different layout on mobile. Use the mobile breakpoint
or resize the browser window to review the mobile design.
</p>
</div>
50 changes: 7 additions & 43 deletions tedi/components/base/text/text.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ export default {
],
}),
],
parameters: {
status: {
type: ["mobileViewDifference"],
},
},
argTypes: {
ngContent: {
name: "ng-content",
Expand Down Expand Up @@ -124,58 +129,25 @@ export const Default: StoryObj<TextComponent & { ngContent: string }> = {
export const Headings: StoryObj<TextComponent> = {
render: (args) => ({
props: args,
styles: [
`
h1.mobile {
font-size: var(--heading-h1-size-mobile);
}
h2.mobile {
font-size: var(--heading-h2-size-mobile);
}
h3.mobile {
font-size: var(--heading-h3-size-mobile);
}
h4.mobile {
font-size: var(--heading-h4-size-mobile);
}
h5.mobile {
font-size: var(--heading-h5-size-mobile);
}
h6.mobile {
font-size: var(--heading-h6-size-mobile);
}
}
`,
],
template: `
<div class="example-list">
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom border-bottom--3x'">
<b>Desktop</b>
<b>Mobile</b>
</tedi-row>
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
<h1 tedi-text>Heading H1</h1>
<h1 tedi-text class="mobile">Heading H1</h1>
</tedi-row>
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
<h2 tedi-text>Heading H2</h2>
<h2 tedi-text class="mobile">Heading H2</h2>
</tedi-row>
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
<h3 tedi-text>Heading H3</h3>
<h3 tedi-text class="mobile">Heading H3</h3>
</tedi-row>
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
<h4 tedi-text>Heading H4</h4>
<h4 tedi-text class="mobile">Heading H4</h4>
</tedi-row>
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
<h5 tedi-text>Heading H5</h5>
<h5 tedi-text class="mobile">Heading H5</h5>
</tedi-row>
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
<tedi-row [cols]="2" [class]="'padding-14-16'">
<h6 tedi-text>Heading H6</h6>
<h6 tedi-text class="mobile">Heading H6</h6>
</tedi-row>
</div>
`,
Expand All @@ -187,25 +159,17 @@ export const Subtitles: StoryObj<TextComponent> = {
props: args,
template: `
<div class="example-list">
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom border-bottom--3x'">
<b>Desktop</b>
<b>Mobile</b>
</tedi-row>
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
<p tedi-text modifiers="subtitle">Subtitle</p>
<p tedi-text modifiers="subtitle" class="mobile">Subtitle</p>
</tedi-row>
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
<p tedi-text [modifiers]="['small', 'subtitle']">Subtitle small</p>
<p tedi-text [modifiers]="['small', 'subtitle']" class="mobile">Subtitle small</p>
</tedi-row>
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
<label tedi-text>Label</label>
<label tedi-text class="mobile">Label</label>
</tedi-row>
<tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
<tedi-row [cols]="2" [class]="'padding-14-16'">
<label tedi-text modifiers="bold">Label bold</label>
<label tedi-text modifiers="bold" class="mobile">Label bold</label>
</tedi-row>
</div>
`,
Expand Down