Skip to content

Commit 36d5cf3

Browse files
Lukas742Lukas742
committed
wip
1 parent f9dfa0e commit 36d5cf3

File tree

22 files changed

+4795
-24
lines changed

22 files changed

+4795
-24
lines changed

‎.storybook/docs/DesignCompliantExampleSection.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Design-Compliant Examples
2+
3+
These examples demonstrate the implementation of design specifications. They primarily illustrate design concepts and mostly do not provide additional functionality. You can reference them to select the appropriate design patterns.

‎packages/main/src/components/ObjectPage/ObjectPage.stories.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import fullscreenIcon from '@ui5/webcomponents-icons/dist/full-screen.js';
1111
import sunIcon from '@ui5/webcomponents-icons/dist/general-leave-request.js';
1212
import { useRef } from 'react';
1313
import { Toolbar as LegacyToolbar, ToolbarSpacer as LegacyToolbarSpacer } from '../../../../compat/src/index.js';
14-
import type { ObjectPageDomRef } from '../../index.js';
14+
import type { ButtonPropTypes, ObjectPageDomRef } from '../../index.js';
1515
import {
1616
Bar,
1717
Breadcrumbs,
@@ -41,6 +41,16 @@ import {
4141
ToolbarButton,
4242
} from '../../index.js';
4343
import { ObjectPage } from './index.js';
44+
import { fn } from '@storybook/test';
45+
46+
const accessibilityAttributes = {
47+
objectPageAnchorBar: {
48+
expandButton: {
49+
expanded: undefined,
50+
accessibleName: '',
51+
},
52+
},
53+
};
4454

4555
const meta = {
4656
title: 'Layouts & Floorplans / ObjectPage',
@@ -54,11 +64,14 @@ const meta = {
5464
accessibilityAttributes: { table: { category: 'Accessibility props' } },
5565
},
5666
args: {
67+
onToggleHeaderArea: fn(),
68+
headerPinned: true,
5769
mode: ObjectPageMode.Default,
5870
selectedSectionId: 'goals',
5971
imageShapeCircle: true,
6072
image: SampleImage,
6173
style: { height: '700px', maxHeight: '90vh' },
74+
accessibilityAttributes,
6275
footerArea: (
6376
<Bar
6477
design={BarDesign.FloatingFooter}

‎packages/main/src/webComponents/ShellBar/ShellBar.mdx‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
22
import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
3+
import DesignExamples from '@sb/docs/DesignCompliantExampleSection.md?raw';
34
import { ArgTypes, Canvas, Description, Markdown, Meta } from '@storybook/blocks';
45
import { ShellBarItem } from '../ShellBarItem/index';
56
import { ShellBarSpacer } from '../ShellBarSpacer/index';
@@ -21,13 +22,41 @@ import { excludePropsForAbstract } from '@sb/utils';
2122

2223
<ControlsWithNote of={ComponentStories.Default} />
2324

24-
<br />
25+
<Markdown>{DesignExamples}</Markdown>
2526

26-
# More Examples
27+
### All Features
2728

28-
<br />
29+
A comprehensive ShellBar demonstrating all available features including notifications, search, content items, and profile.
30+
31+
<Canvas of={ComponentStories.AllFeatures} />
32+
33+
### Embedded Back Navigation
34+
35+
ShellBar with embedded back navigation button in the start area.
36+
37+
<Canvas of={ComponentStories.EmbeddedBackNavigation} />
38+
39+
### Trial Example
40+
41+
ShellBar configured for trial environments with trial tags and remaining days indicator.
42+
43+
<Canvas of={ComponentStories.TrialExample} />
44+
45+
### Multiple Productive Instances
46+
47+
ShellBar setup for multiple productive system instances with region indicators.
48+
49+
<Canvas of={ComponentStories.ProductiveInstances} />
50+
51+
### Multiple Non-Productive Instances
52+
53+
ShellBar setup for multiple non-productive system instances with system and region tags.
54+
55+
<Canvas of={ComponentStories.NonProductiveInstances} />
56+
57+
## More examples
2958

30-
## Open a Popover on ShellBarItem click
59+
### Open a Popover on ShellBarItem click
3160

3261
To open a popover with the `ShellBarItem` you can use the `detail.targetRef` property of the `onClick` event.
3362

‎packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx‎

Lines changed: 121 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import image from '@sb/demoImages/Person.png';
22
import type { Meta, StoryObj } from '@storybook/react';
3-
import addIcon from '@ui5/webcomponents-icons/dist/add.js';
4-
import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
5-
import { Avatar, Icon, Input, ListItemStandard, ShellBarItem } from '../index';
6-
import { ShellBar } from './index';
3+
import menu2Icon from '@ui5/webcomponents-icons/dist/menu2.js';
4+
import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js';
5+
import sysHelpIcon from '@ui5/webcomponents-icons/dist/sys-help.js';
6+
import { FlexBox } from '../../components/FlexBox/index.js';
7+
import { Button } from '../Button/index.js';
8+
import { Avatar, ShellBarItem, ShellBarSpacer } from '../index.js';
9+
import { Label } from '../Label/index.js';
10+
import { ShellBarSearch } from '../ShellBarSearch/index.js';
11+
import { Switch } from '../Switch/index.js';
12+
import { Tag } from '../Tag/index.js';
13+
import { Text } from '../Text/index.js';
14+
import { ShellBar } from './index.js';
715

816
const meta = {
917
title: 'Layouts & Floorplans / ShellBar',
@@ -17,30 +25,124 @@ const meta = {
1725
startButton: { control: { disable: true } },
1826
},
1927
args: {
28+
primaryTitle: 'Shell Bar',
29+
notificationsCount: '10',
30+
showNotifications: true,
2031
logo: <img src="https://sap.github.io/ui5-webcomponents/images/sap-logo-svg.svg" alt="SAP Logo" />,
2132
profile: (
2233
<Avatar>
23-
<img src={image} />
34+
<img src={image} alt="person-placeholder" />
2435
</Avatar>
2536
),
26-
menuItems: (
27-
<>
28-
<ListItemStandard data-key="1" text="Menu Item 1" />
29-
<ListItemStandard data-key="2" text="Menu Item 2" />
30-
<ListItemStandard data-key="3" text="Menu Item 3" />
31-
</>
32-
),
33-
searchField: <Input showClearIcon icon={<Icon name={searchIcon} />} />,
34-
notificationsCount: '10',
35-
primaryTitle: 'Shell Bar',
36-
secondaryTitle: 'Secondary Title',
37-
showNotifications: true,
38-
showProductSwitch: true,
39-
children: <ShellBarItem count="3" text={'ShellBarItem'} icon={addIcon} />,
37+
startButton: <Button icon={menu2Icon} tooltip="Menu" accessibleName="Menu" />,
38+
searchField: <ShellBarSearch showClearIcon placeholder="Search Apps, Products" />,
39+
children: <ShellBarItem text={'Help'} icon={sysHelpIcon} />,
4040
},
4141
tags: ['package:@ui5/webcomponents-fiori'],
4242
} satisfies Meta<typeof ShellBar>;
4343
export default meta;
4444
type Story = StoryObj<typeof meta>;
4545

4646
export const Default: Story = {};
47+
48+
export const AllFeatures: Story = {
49+
args: {
50+
showProductSwitch: true,
51+
startButton: (
52+
<>
53+
<Button icon={menu2Icon} tooltip="Menu" accessibleName="Menu" />
54+
<Button icon={navBackIcon} tooltip="Back" accessibleName="Back" />
55+
</>
56+
),
57+
content: (
58+
<>
59+
<Tag design="Set2" colorScheme="7">
60+
Trial
61+
</Tag>
62+
<Text>30 days remaining</Text>
63+
<ShellBarSpacer />
64+
<FlexBox gap="0 5px" alignItems="Center">
65+
<Switch />
66+
<Label>Try Beta Version</Label>
67+
</FlexBox>
68+
</>
69+
),
70+
},
71+
};
72+
73+
export const EmbeddedBackNavigation: Story = {
74+
args: {
75+
startButton: <Button icon={navBackIcon} tooltip="Back" accessibleName="Back" />,
76+
},
77+
};
78+
79+
export const TrialExample: Story = {
80+
args: {
81+
content: (
82+
<>
83+
<Tag design="Set2" colorScheme="7">
84+
Trial
85+
</Tag>
86+
<Text>30 days remaining</Text>
87+
</>
88+
),
89+
},
90+
};
91+
92+
export const ProductiveInstances: Story = {
93+
args: {
94+
content: (
95+
<Tag design="Set2" colorScheme="10">
96+
Region EMEA
97+
</Tag>
98+
),
99+
},
100+
101+
render(args) {
102+
return (
103+
<>
104+
<ShellBar {...args} />
105+
<ShellBar
106+
{...args}
107+
content={
108+
<Tag design="Set2" colorScheme="10">
109+
Region APJ
110+
</Tag>
111+
}
112+
/>
113+
</>
114+
);
115+
},
116+
};
117+
118+
export const NonProductiveInstances: Story = {
119+
args: {
120+
content: (
121+
<>
122+
<Tag design="Set2" colorScheme="8">
123+
Q System
124+
</Tag>
125+
<Text>Region EMEA</Text>
126+
</>
127+
),
128+
},
129+
130+
render(args) {
131+
return (
132+
<>
133+
<ShellBar {...args} />
134+
<ShellBar
135+
{...args}
136+
content={
137+
<>
138+
<Tag design="Set2" colorScheme="8">
139+
Q System
140+
</Tag>
141+
<Text>Region APJ</Text>
142+
</>
143+
}
144+
/>
145+
</>
146+
);
147+
},
148+
};

‎patterns/navigation-layout/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎patterns/navigation-layout/README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# UI5 Web Components for React - Navigation Layout Page Pattern
2+
3+
## How to use this pattern
4+
5+
```bash
6+
npx degit SAP/ui5-webcomponents-react/patterns/tool-page#main my-project
7+
cd my-project
8+
```
9+
10+
## Getting Started
11+
12+
First, install the `node_modules`:
13+
14+
```bash
15+
npm install
16+
```
17+
18+
Then, run the development server:
19+
20+
```bash
21+
npm run dev
22+
```

‎patterns/navigation-layout/eslint.config.mjs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import js from '@eslint/js';
2+
import globals from 'globals';
3+
import reactHooks from 'eslint-plugin-react-hooks';
4+
import reactRefresh from 'eslint-plugin-react-refresh';
5+
import tseslint from 'typescript-eslint';
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
23+
},
24+
},
25+
);

‎patterns/navigation-layout/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>UI5 Web Components React - Navigation Layout Page</title>
8+
<script data-ui5-config type="application/json">
9+
{
10+
"theme": "sap_horizon"
11+
}
12+
</script>
13+
</head>
14+
<body>
15+
<div id="root"></div>
16+
<script type="module" src="/src/main.tsx"></script>
17+
</body>
18+
</html>

0 commit comments

Comments
 (0)