Skip to content

Commit e1d5ce9

Browse files
colinsczcolinscz
committed
chore: update example and lib
1 parent 3d0c9ed commit e1d5ce9

File tree

13 files changed

+351
-490
lines changed

13 files changed

+351
-490
lines changed

‎examples/react/app/components/header.module.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.search-icon {
2+
margin-left: auto;
3+
}

‎examples/react/app/components/header.tsx

+61-48
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,25 @@ import {
1616
} from '@six-group/ui-library-react';
1717
import { Language, languages } from '@six-group/ui-library';
1818
import { useLanguage } from '@/app/hooks/useLocaleStorage';
19+
import styles from './header.module.css';
20+
import { useState } from 'react';
1921

2022
interface HeaderProps {
2123
taskCount: number;
22-
open: boolean;
24+
toggleMenu: () => void;
2325
}
2426

25-
export default function Header({ taskCount, open }: HeaderProps) {
27+
const SixHeaderComponent = SixHeader as React.ComponentType<any>;
28+
const SixIconButtonComponent = SixIconButton as React.ComponentType<any>;
29+
30+
export default function Header({ toggleMenu, taskCount }: HeaderProps) {
2631
const availableLangs: Language[] = [...languages];
2732
const apps = ['Application 1', 'Application 2', 'Application 3', 'Application 4'];
2833
let currentApp = 'Application 1';
2934

35+
const [openSearch, setOpenSearch] = useState(false);
36+
const [sideMenuOpen, setsideMenuOpen] = useState(false);
37+
3038
let lang = useLanguage();
3139
if (lang == null || !availableLangs.includes(lang)) {
3240
lang = 'de';
@@ -41,57 +49,62 @@ export default function Header({ taskCount, open }: HeaderProps) {
4149
}
4250

4351
return (
44-
<SixHeader>
45-
<SixHeaderItem>
46-
<SixIconButton name={open ? 'menu_open' : 'menu'} />
47-
</SixHeaderItem>
52+
<>
53+
<SixHeaderComponent slot="header" className={styles} openSearch={openSearch}>
54+
<SixHeaderItem>
55+
<SixIconButtonComponent name={sideMenuOpen ? 'menu_open' : 'menu'} onClick={toggleMenu} />
56+
</SixHeaderItem>
4857

49-
<SixHeaderItem>
50-
<SixIconButton href={'https://six-group.github.io/six-webcomponents/demo/angular/'}>
51-
<SixLogo />
52-
</SixIconButton>
53-
</SixHeaderItem>
58+
<SixHeaderItem>
59+
<SixIconButtonComponent href={'https://six-group.github.io/six-webcomponents/demo/react/'}>
60+
<SixLogo />
61+
</SixIconButtonComponent>
62+
</SixHeaderItem>
5463

55-
<SixHeaderItem className="search-icon">
56-
<SixIconButton name="search"></SixIconButton>
57-
</SixHeaderItem>
64+
<SixHeaderItem className="search-icon">
65+
<SixIconButtonComponent name="search" onClick={() => setOpenSearch(!openSearch)}></SixIconButtonComponent>
66+
</SixHeaderItem>
5867

59-
<SixSearchField slot="search-field" debounce={600} clearable />
68+
<SixSearchField slot="search-field" debounce={600} clearable />
6069

61-
<SixHeaderItem>
62-
<SixIconButton name="notifications_none">
63-
<SixBadge type="danger" pill>
64-
{taskCount}
65-
</SixBadge>
66-
</SixIconButton>
67-
</SixHeaderItem>
70+
<SixHeaderItem>
71+
<SixIconButtonComponent name="notifications_none">
72+
<SixBadge type="danger" pill>
73+
{taskCount}
74+
</SixBadge>
75+
</SixIconButtonComponent>
76+
</SixHeaderItem>
6877

69-
{/* <SixHeaderDropdownItem>
70-
<SixHeaderMenuButton slot="trigger">
71-
<span>{currentApp}</span>
72-
<SixIcon slot="suffix">apps</SixIcon>
73-
</SixHeaderMenuButton>
74-
<SixMenu>
75-
{apps.map((app) => (
76-
<SixMenuItem checked={app === currentApp} onClick={() => (currentApp = app)} key={app}>
77-
{app}
78-
</SixMenuItem>
79-
))}
80-
</SixMenu>
81-
</SixHeaderDropdownItem>
78+
<SixHeaderDropdownItem>
79+
<SixHeaderMenuButton slot="trigger">
80+
<span>{currentApp}</span>
81+
<SixIcon slot="suffix">apps</SixIcon>
82+
</SixHeaderMenuButton>
83+
<SixMenu>
84+
{apps.map((app) => (
85+
<SixMenuItem checked={app === currentApp} onClick={() => (currentApp = app)} key={app}>
86+
{app}
87+
</SixMenuItem>
88+
))}
89+
</SixMenu>
90+
</SixHeaderDropdownItem>
8291

83-
<SixHeaderDropdownItem>
84-
<SixIconButton slot="trigger">
85-
<SixAvatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"></SixAvatar>
86-
</SixIconButton>
87-
<SixMenu>
88-
<SixMenuItem value="change-password">Change password</SixMenuItem>
89-
<SixMenuItem value="logout">Logout</SixMenuItem>
90-
<SixMenuItem>
91-
<SixLanguageSwitcher selected={language} onSixLanguageSwitcherChange={changeLanguage}></SixLanguageSwitcher>
92-
</SixMenuItem>
93-
</SixMenu>
94-
</SixHeaderDropdownItem>*/}
95-
</SixHeader>
92+
<SixHeaderDropdownItem>
93+
<SixIconButtonComponent slot="trigger">
94+
<SixAvatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"></SixAvatar>
95+
</SixIconButtonComponent>
96+
<SixMenu>
97+
<SixMenuItem value="change-password">Change password</SixMenuItem>
98+
<SixMenuItem value="logout">Logout</SixMenuItem>
99+
<SixMenuItem>
100+
<SixLanguageSwitcher
101+
selected={language}
102+
onSixLanguageSwitcherChange={changeLanguage}
103+
></SixLanguageSwitcher>
104+
</SixMenuItem>
105+
</SixMenu>
106+
</SixHeaderDropdownItem>
107+
</SixHeaderComponent>
108+
</>
96109
);
97110
}

‎examples/react/app/components/side-navigation.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { SixSidebar, SixSidebarItemGroup } from '@six-group/ui-library-react';
2+
3+
interface NavigationProps {
4+
open: boolean;
5+
}
6+
7+
export default function SideNavigation({ open }: NavigationProps) {
8+
return (
9+
<SixSidebar position="left" open={open}>
10+
<SixSidebarItemGroup name="Home" icon="home"></SixSidebarItemGroup>
11+
<SixSidebarItemGroup name="Form" icon="assignment"></SixSidebarItemGroup>
12+
<SixSidebarItemGroup name="Alert" icon="notifications_active"></SixSidebarItemGroup>
13+
</SixSidebar>
14+
);
15+
}

‎examples/react/app/globals.css

+57-27
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,16 @@
11
@import '@six-group/ui-library/dist/ui-library/ui-library.css';
22

3-
:root {
4-
--background: #ffffff;
5-
--foreground: #171717;
6-
}
3+
/* You can add global styles to this file, and also import other style files */
74

8-
@media (prefers-color-scheme: dark) {
9-
:root {
10-
--background: #0a0a0a;
11-
--foreground: #ededed;
12-
}
5+
*,
6+
*::before,
7+
*::after {
8+
box-sizing: border-box;
139
}
1410

1511
html,
1612
body {
17-
max-width: 100vw;
18-
overflow-x: hidden;
19-
}
20-
21-
body {
22-
color: var(--foreground);
23-
background: var(--background);
24-
-webkit-font-smoothing: antialiased;
25-
-moz-osx-font-smoothing: grayscale;
13+
height: 100%;
2614
}
2715

2816
input,
@@ -41,19 +29,61 @@ select {
4129
padding: 0;
4230
}
4331

44-
* {
45-
box-sizing: border-box;
32+
textarea {
33+
font-family: 'Noto Sans Mono', monospace;
34+
}
35+
36+
blockquote,
37+
dl,
38+
dd,
39+
h1,
40+
h2,
41+
h3,
42+
h4,
43+
h5,
44+
h6,
45+
hr,
46+
figure,
47+
p,
48+
pre {
49+
margin: 0;
50+
}
51+
52+
fieldset {
53+
margin: 0;
54+
padding: 0;
55+
}
56+
57+
legend {
58+
padding: 0;
59+
}
60+
61+
p,
62+
h1,
63+
h2,
64+
h3,
65+
h4,
66+
h5,
67+
h6 {
68+
overflow-wrap: break-word;
69+
}
70+
71+
ul,
72+
li {
4673
padding: 0;
4774
margin: 0;
75+
text-indent: 0;
76+
list-style-type: none;
4877
}
4978

50-
a {
51-
color: inherit;
52-
text-decoration: none;
79+
dd,
80+
dt {
81+
padding: 0;
82+
margin: 0;
5383
}
5484

55-
@media (prefers-color-scheme: dark) {
56-
html {
57-
color-scheme: dark;
58-
}
85+
[slot='main'] {
86+
padding-left: var(--six-spacing-xxx-large);
87+
padding-right: var(--six-spacing-xxx-large);
88+
padding-top: var(--six-spacing-xx-large);
5989
}

‎examples/react/app/hooks/useModalState.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { useState } from 'react';
2+
3+
export const useModalState = (initialOpen = false) => {
4+
const [isOpen, setIsOpen] = useState(initialOpen);
5+
6+
const open = () => {
7+
setIsOpen(true);
8+
};
9+
10+
const close = () => {
11+
setIsOpen(false);
12+
};
13+
14+
const toggle = () => {
15+
setIsOpen(!isOpen);
16+
};
17+
18+
return { isOpen, open, close, toggle, setIsOpen };
19+
};

‎examples/react/app/layout.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1-
import type { Metadata } from 'next';
1+
'use client';
22
import './globals.css';
33
import { SixRoot } from '@six-group/ui-library-react';
44
import Header from '@/app/components/header';
5+
import SideNavigation from '@/app/components/side-navigation';
6+
import { useModalState } from '@/app/hooks/useModalState';
57

6-
export const metadata: Metadata = {
7-
title: 'Create Next App',
8-
description: 'Generated by create next app',
9-
};
8+
const SixRootComponent = SixRoot as React.ComponentType<any>;
109

1110
export default function RootLayout({
1211
children,
1312
}: Readonly<{
1413
children: React.ReactNode;
1514
}>) {
15+
const leftSidebar = useModalState(true);
16+
1617
return (
1718
<html lang="en">
18-
<body>
19-
<SixRoot>
20-
<Header open={false} taskCount={1} />
19+
<body className="">
20+
<SixRootComponent stage="DEV" version="DEV-1.2.3">
21+
<Header taskCount={1} toggleMenu={leftSidebar.toggle} />
22+
<SideNavigation open={leftSidebar.isOpen} />
2123
<main>{children}</main>
22-
</SixRoot>
24+
</SixRootComponent>
2325
</body>
2426
</html>
2527
);

0 commit comments

Comments
 (0)