Skip to content

Commit c1e6936

Browse files
Lukas742Lukas742
authored
docs: add badges (#7689)
1 parent 9de75d6 commit c1e6936

File tree

66 files changed

+277
-42
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+277
-42
lines changed

‎.storybook/components/Badge.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import '@ui5/webcomponents/dist/Tag.js';
2+
import type Tag from '@ui5/webcomponents/dist/Tag.js';
3+
// with sb 9.1.2 the explicit React import is required for components used in manager.tsx - not sure if this is a bug
4+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
5+
import React from 'react';
6+
7+
declare global {
8+
interface JSX {
9+
IntrinsicElements: {
10+
'ui5-tag': Tag;
11+
};
12+
}
13+
}
14+
15+
const TAGS = {
16+
deprecated: { design: 'Set1', colorScheme: '3', title: 'Deprecated', label: 'Depr' },
17+
custom: { design: 'Set2', colorScheme: '6', title: 'No / Limited Design', label: 'Custom' },
18+
experimental: { design: 'Set1', colorScheme: '8', title: 'Experimental', label: 'Exp' },
19+
};
20+
21+
function Badge({ type }: { type: 'deprecated' | 'custom' | 'experimental' }) {
22+
return (
23+
<ui5-tag
24+
design={TAGS[type].design}
25+
color-scheme={TAGS[type].colorScheme}
26+
class="side-nav-badge"
27+
title={TAGS[type].title}
28+
>
29+
{TAGS[type].label}
30+
</ui5-tag>
31+
);
32+
}
33+
34+
Badge.displayName = 'Badge';
35+
export { Badge };

‎.storybook/components/DocsHeader.tsx

Lines changed: 64 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Badge } from '@sb/components/Badge';
12
import type { Controls } from '@storybook/addon-docs/blocks';
23
import { Description, Subtitle, Title, useOf } from '@storybook/addon-docs/blocks';
34
import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
@@ -45,14 +46,25 @@ interface InfoTableProps {
4546
isChart?: boolean;
4647
experimental?: boolean;
4748
of: ComponentProps<typeof Controls>['of'];
49+
deprecationText?: string;
4850
}
4951

50-
export const InfoTable = ({ of, since, subComponents, mergeSubComponents }: InfoTableProps) => {
52+
export const InfoTable = ({
53+
of,
54+
since,
55+
subComponents,
56+
mergeSubComponents,
57+
deprecationText,
58+
isChart,
59+
}: InfoTableProps) => {
5160
const context = useOf<'meta'>(of);
5261
const { csfFile, preparedMeta } = context;
62+
const { tags } = preparedMeta;
5363
const moduleName = csfFile.meta.component.displayName;
64+
const isDeprecated = tags.includes('deprecated');
65+
const isCustom = tags.includes('custom') || isChart;
5466

55-
const wcSubComponents = useGetSubComponentsOfModule(moduleName.replace('V2', ''), preparedMeta.tags);
67+
const wcSubComponents = useGetSubComponentsOfModule(moduleName.replace('V2', ''), tags);
5668
const subComps = mergeSubComponents
5769
? [...(subComponents ?? []), ...(wcSubComponents ?? [])]
5870
: (subComponents ?? wcSubComponents);
@@ -68,6 +80,7 @@ export const InfoTable = ({ of, since, subComponents, mergeSubComponents }: Info
6880
await navigator.clipboard.write([data]);
6981
}
7082
};
83+
7184
return (
7285
<table className={classes.infoTable}>
7386
<tbody>
@@ -99,6 +112,30 @@ export const InfoTable = ({ of, since, subComponents, mergeSubComponents }: Info
99112
</td>
100113
</tr>
101114
)}
115+
{isDeprecated && (
116+
<tr>
117+
<th>
118+
<Label>Deprecated</Label>
119+
</th>
120+
<td>
121+
<Text>{deprecationText}</Text>
122+
</td>
123+
</tr>
124+
)}
125+
{isCustom && (
126+
<tr>
127+
<th>
128+
<Label>Custom Component</Label>
129+
</th>
130+
<td>
131+
<Text>
132+
{isChart
133+
? 'Charts are custom-built without defined design specifications! They use the Fiori color palette, but functionality and especially accessibility may not meet standard app requirements.'
134+
: 'This component either only partially follows design specifications or lacks them entirely. Please refer to the component description for details.'}
135+
</Text>
136+
</td>
137+
</tr>
138+
)}
102139
{!!subComps.length && (
103140
<tr className={classes.hoverTr}>
104141
<th>
@@ -124,17 +161,39 @@ export const InfoTable = ({ of, since, subComponents, mergeSubComponents }: Info
124161
);
125162
};
126163

127-
export const DocsHeader = ({ of, since, subComponents, mergeSubComponents, isChart, experimental }: InfoTableProps) => {
164+
export const DocsHeader = ({
165+
of,
166+
since,
167+
subComponents,
168+
mergeSubComponents,
169+
isChart,
170+
experimental,
171+
deprecationText,
172+
}: InfoTableProps) => {
173+
const context = useOf<'meta'>(of);
174+
const { preparedMeta } = context;
175+
const { tags } = preparedMeta;
176+
const isDeprecated = tags.includes('deprecated');
177+
const isCustom = tags.includes('custom') || isChart;
128178
return (
129179
<ThemeProvider>
130180
<FlexBox alignItems={FlexBoxAlignItems.Center} className={classes.titleRow}>
131181
<Title />
132-
{experimental && <Label className={classes.experimentalLabel}>experimental</Label>}
182+
{!isDeprecated && experimental && <Badge type="experimental" />}
183+
{!isDeprecated && isCustom && <Badge type="custom" />}
184+
{isDeprecated && <Badge type="deprecated" />}
133185
<span style={{ flexGrow: 1 }} />
134186
<Links isChart={isChart} />
135187
</FlexBox>
136188
<Subtitle />
137-
<InfoTable of={of} since={since} subComponents={subComponents} mergeSubComponents={mergeSubComponents} />
189+
<InfoTable
190+
of={of}
191+
since={since}
192+
subComponents={subComponents}
193+
mergeSubComponents={mergeSubComponents}
194+
deprecationText={deprecationText}
195+
isChart={isChart}
196+
/>
138197
<TableOfContent />
139198
<Description />
140199
{isChart && (

‎.storybook/manager-head.html

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,28 @@
2121
background-color: transparent !important;
2222
}
2323

24-
/*experimental components */
25-
#ai-promptinput::after,
26-
#ai-button::after,
27-
#inputs-tokenizer::after,
28-
#inputs-search::after,
29-
#modals-popovers-usermenu::after,
30-
#modals-popovers-usersettingsdialog::after,
31-
#charts-timelinechart::after {
32-
content: '(experimental)';
33-
overflow: hidden;
24+
/* hide tags from tags-popover */
25+
#list-item-tag-experimental,
26+
#list-item-tag-deprecated,
27+
#list-item-tag-custom,
28+
#list-item-tag-cem-module\:Dialog,
29+
#list-item-tag-cem-module\:ResponsivePopover,
30+
#list-item-tag-excludeFromSidebar,
31+
#list-item-tag-extends\:\@ui5\/webcomponents {
32+
display: none;
33+
}
34+
35+
/* side-nav badge styles */
36+
.sidebar-item > button,
37+
.sidebar-item > a {
38+
align-items: center;
39+
flex-wrap: wrap;
40+
}
41+
.side-nav-badge {
42+
font-size: var(--sapFontSmallSize);
43+
}
44+
.side-nav-badge::part(root) {
45+
padding-block: 0;
3446
}
3547
</style>
3648

‎.storybook/manager.js renamed to ‎.storybook/manager.tsx

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1+
// with sb 9.1.2 the explicit React import is required - not sure if this is a bug
2+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
3+
import React from 'react';
14
import { addons } from 'storybook/manager-api';
2-
import { Fiori4ReactTheme } from './theme';
5+
import { Badge } from './components/Badge.js';
6+
import { Fiori4ReactTheme } from './theme.js';
7+
8+
const customTags = new Set(['package:@ui5/webcomponents-react-charts', 'custom']);
39

410
addons.setConfig({
511
theme: Fiori4ReactTheme,
@@ -12,12 +18,12 @@ addons.setConfig({
1218
* display left panel that shows a list of stories
1319
* @type {number}
1420
*/
15-
navSize: 240,
21+
navSize: 280,
1622
/**
1723
* display floating search box to search through stories
1824
* @type {Boolean}
1925
*/
20-
showSearchBox: false,
26+
showSearchBox: true,
2127
/**
2228
* The size of the addon panel when in the bottom position
2329
* @type {number}
@@ -52,6 +58,33 @@ addons.setConfig({
5258
return !item.tags.includes('excludeFromSidebar');
5359
},
5460
},
61+
renderLabel: (item) => {
62+
const tags = item.tags ?? [];
63+
const isCustom = tags.some((tag) => customTags.has(tag));
64+
const isExperimental = tags.includes('experimental');
65+
const isDeprecated = tags.includes('deprecated');
66+
67+
if (item.type !== 'component' && item.type !== 'docs') {
68+
return item.name;
69+
}
70+
71+
if (isDeprecated) {
72+
return (
73+
<>
74+
{item.name}
75+
<Badge type="deprecated" />
76+
</>
77+
);
78+
}
79+
80+
return (
81+
<>
82+
{item.name}
83+
{isCustom && <Badge type="custom" />}
84+
{isExperimental && <Badge type="experimental" />}
85+
</>
86+
);
87+
},
5588
},
5689
toolbar: {
5790
'storybook/viewport': { hidden: true },

‎.storybook/preview-head.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,17 @@
165165
}
166166
/*UserSettingsDialog story - end*/
167167

168+
/* Badge styles */
169+
.side-nav-badge {
170+
font-size: var(--sapFontSmallSize);
171+
margin-inline-start: 0.25rem;
172+
padding-block-end: 0.3rem;
173+
align-self: flex-end;
174+
}
175+
.side-nav-badge::part(root) {
176+
padding-block: 0;
177+
}
178+
168179
/* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */
169180
.docs-story > div > div[scale] {
170181
min-height: 20px;

‎.storybook/utils.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,12 @@ export const MAPPED_THEMES = [
2222
export const excludePropsForAbstract = ['className', 'style'];
2323

2424
export function useGetCem(storyTags: string[]) {
25+
const extendsAnnotation = storyTags?.find((tag) => tag.startsWith('extends:'));
2526
const packageAnnotation = storyTags?.find((tag) => tag.startsWith('package:'));
26-
switch (packageAnnotation) {
27+
const annotation = extendsAnnotation ?? packageAnnotation;
28+
29+
switch (annotation) {
30+
case 'extends:@ui5/webcomponents':
2731
case 'package:@ui5/webcomponents':
2832
return cemMain;
2933
case 'package:@ui5/webcomponents-fiori':

‎packages/ai/src/components/Button/Button.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const meta = {
1919
args: {
2020
design: ButtonDesign.Default,
2121
},
22-
tags: ['package:@ui5/webcomponents-ai'],
22+
tags: ['package:@ui5/webcomponents-ai', 'experimental'],
2323
} satisfies Meta<typeof Button>;
2424

2525
export default meta;

‎packages/ai/src/components/PromptInput/PromptInput.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const meta = {
1212
args: {
1313
valueState: ValueState.None,
1414
},
15-
tags: ['package:@ui5/webcomponents-ai'],
15+
tags: ['package:@ui5/webcomponents-ai', 'experimental'],
1616
} satisfies Meta<typeof PromptInput>;
1717

1818
export default meta;

‎packages/charts/src/components/BarChart/BarChart.stories.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { BarChart } from './BarChart.js';
1212
const meta = {
1313
title: 'BarChart',
1414
component: BarChart,
15+
tags: ['package:@ui5/webcomponents-react-charts'],
1516
argTypes: {
1617
dataset: {
1718
control: { disable: true },

‎packages/charts/src/components/BarChart/BarChart.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,8 @@ export interface BarChartProps extends IChartBaseProps {
126126

127127
/**
128128
* A `BarChart` is a data visualization where each category is represented by a rectangle, with the width of the rectangle being proportional to the values being plotted.
129+
*
130+
* __Note:__ Charts are custom-built __without__ defined design specifications! They use the Fiori color palette, but functionality and especially accessibility may not meet standard app requirements.
129131
*/
130132
const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
131133
const {

0 commit comments

Comments
 (0)