@heliux-org/design-system-core 0.0.44 → 0.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/Dialog/DialogContent/DialogContent.module.scss +1 -0
  3. package/src/components/PageHeader/PageHeader.tsx +140 -134
  4. package/src/components/TopNavigationBar/TopNavigationBar.module.scss +9 -2
  5. package/src/components/TopNavigationBar/TopNavigationBar.tsx +19 -2
  6. package/src/components/TopNavigationBar/components/NotificationItem/NotificationItem.module.scss +13 -1
  7. package/src/components/TopNavigationBar/components/NotificationItem/NotificationItem.tsx +30 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@heliux-org/design-system-core",
3
- "version": "0.0.44",
3
+ "version": "0.0.45",
4
4
  "description": "Official Heliux design system resources for application development in React.js",
5
5
  "main": "./dist/main.js",
6
6
  "types": "./dist/types/index.d.ts",
package/src/components/Dialog/DialogContent/DialogContent.module.scss CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  .contentWrapper {
4
4
  outline: 0;
5
+ z-index: 100;
5
6
 
6
7
  &.top,
7
8
  &.right,
package/src/components/PageHeader/PageHeader.tsx CHANGED
@@ -26,157 +26,163 @@ import { TypographyColor } from "../Typography/TypographyConstants";
26
26
  import IconButton from "../IconButton/IconButton";
27
27
 
28
28
  export interface TabProps {
29
- label: string;
30
- disabled?: boolean;
29
+ label: string;
30
+ disabled?: boolean;
31
31
  }
32
32
 
33
33
  export interface LinkTabProps {
34
- label: string;
35
- link: string;
34
+ label: string;
35
+ link: string;
36
36
  }
37
37
 
38
38
  export interface ButtonProps {
39
- label: string;
40
- onClick?: () => void;
41
- kind?: string;
42
- size?: string;
39
+ label: string;
40
+ onClick?: () => void;
41
+ kind?: string;
42
+ size?: string;
43
43
  }
44
44
  export interface PageHeaderProps extends VibeComponentProps {
45
- /** we support 2 types of page headers */
46
- type?: PageHeaderType;
47
- componentClassName?: string;
45
+ /** we support 2 types of page headers */
46
+ type?: PageHeaderType;
47
+ componentClassName?: string;
48
48
 
49
- title?: string;
50
- secondaryTitle?: string;
51
- editableTitle?: boolean;
52
- divider?: boolean;
53
- description?: string;
54
- linkTabs?: React.ReactNode[];
55
- buttons?: React.ReactNode[];
56
- tabs?: React.ReactNode[];
57
- breadcrumb?: React.ReactNode;
49
+ title?: string;
50
+ secondaryTitle?: string;
51
+ editableTitle?: boolean;
52
+ divider?: boolean;
53
+ description?: string;
54
+ linkTabs?: React.ReactNode[];
55
+ buttons?: React.ReactNode[];
56
+ tabs?: React.ReactNode[];
57
+ breadcrumb?: React.ReactNode;
58
58
  }
59
59
 
60
60
  const PageHeader: React.FC<PageHeaderProps> & {
61
- types?: typeof PageHeaderType;
61
+ types?: typeof PageHeaderType;
62
62
  } = ({
63
- type = PageHeader.types.PRIMARY,
64
- componentClassName,
65
- className,
66
- title,
67
- secondaryTitle = "",
68
- description = "",
69
- id,
70
- "data-testid": dataTestId,
71
- editableTitle = false,
72
- divider = false,
73
- tabs = [],
74
- linkTabs = [],
75
- buttons = [],
76
- breadcrumb,
63
+ type = PageHeader.types.PRIMARY,
64
+ componentClassName,
65
+ className,
66
+ title,
67
+ secondaryTitle = "",
68
+ description = "",
69
+ id,
70
+ "data-testid": dataTestId,
71
+ editableTitle = false,
72
+ divider = false,
73
+ tabs = [],
74
+ linkTabs = [],
75
+ buttons = [],
76
+ breadcrumb,
77
77
  }) => {
78
- [type];
78
+ [type];
79
79
 
80
- const [editValue, setEditValue] = useState(title);
81
- const overrideClassName = backwardCompatibilityForProperties([
82
- className,
83
- componentClassName,
84
- ]);
80
+ const [editValue, setEditValue] = useState(title);
81
+ const overrideClassName = backwardCompatibilityForProperties([
82
+ className,
83
+ componentClassName,
84
+ ]);
85
85
 
86
- return (
87
- <aside
88
- className={cx(
89
- styles.PageHeader,
90
- getStyle(styles, camelCase(`type-${type}`)),
91
- overrideClassName
92
- )}
93
- role="alert"
94
- data-testid={
95
- dataTestId || getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)
96
- }
97
- >
98
- <Container className-={styles.PageHeader}>
99
- <Row>{breadcrumb}</Row>
100
- <Flex gap={5}>
101
- {secondaryTitle && (
102
- <Heading
103
- type={Heading.types.H3}
104
- weight={Heading.weights.BOLD}
105
- color={TypographyColor.PRIMARY}
106
- className={styles.PageHeaderTitle}
107
- >
108
- {secondaryTitle}
109
- </Heading>
110
- )}
111
- {editableTitle ? (
112
- <InlineEdit
113
- defaultValue={editValue}
114
- aria-label="edit value"
115
- onConfirm={setEditValue}
116
- >
117
- <Heading
118
- type={Heading.types.H3}
119
- weight={Heading.weights.BOLD}
120
- className={styles.PageHeaderTitle}
121
- >
122
- {editValue}
123
- </Heading>
124
- </InlineEdit>
125
- ) : (
126
- <Heading
127
- type={Heading.types.H3}
128
- weight={Heading.weights.BOLD}
129
- className={styles.PageHeaderTitle}
130
- >
131
- {title}
132
- </Heading>
133
- )}
134
- </Flex>
135
- <Row>
136
- <Flex gap={2}>
137
- <Text type={Text.types.TEXT1} color={Text.colors.SECONDARY}>
138
- {description}
139
- </Text>
140
- {description ? (
141
- <IconButton
142
- icon={Infomation}
143
- size="xs"
144
- style={{ color: "darkgrey" }}
145
- ariaLabel={description}
146
- />
147
- ) : (
148
- ""
149
- )}
150
- </Flex>
151
- </Row>
152
- <Row>
153
- <div style={{ marginTop: "5px" }}>
154
- <Flex justify={Flex.justify.START} gap={Flex.gaps.SMALL}>
155
- {buttons && buttons.map((button, index) => button)}
156
- </Flex>
157
- </div>
158
- </Row>
159
- {tabs.length !== 0 && (
160
- <Row>
161
- {/* @ts-ignore */}
162
- <TabList divider={false} className={styles.PageHeaderTabs}>
163
- {tabs.map((tab, index) => tab)}
164
- </TabList>
165
- </Row>
166
- )}
167
- {linkTabs.length !== 0 && (
168
- <div className={styles.PageHeaderRightActions}>
169
- <Flex justify={Flex.justify.END} gap={Flex.gaps.SMALL}>
170
- {linkTabs.map((linkTab, index) => linkTab)}
171
- </Flex>
172
- </div>
173
- )}
174
- </Container>
175
- {divider ? <Divider className={styles.PageHeaderDivider} /> : <div></div>}
176
- </aside>
177
- );
86
+ return (
87
+ <aside
88
+ className={cx(
89
+ styles.PageHeader,
90
+ getStyle(styles, camelCase(`type-${type}`)),
91
+ overrideClassName
92
+ )}
93
+ role="alert"
94
+ data-testid={
95
+ dataTestId ||
96
+ getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)
97
+ }
98
+ >
99
+ <Container className-={styles.PageHeader}>
100
+ <Flex>{breadcrumb}</Flex>
101
+ <Flex gap={5}>
102
+ {secondaryTitle && (
103
+ <Heading
104
+ type={Heading.types.H3}
105
+ weight={Heading.weights.BOLD}
106
+ color={TypographyColor.PRIMARY}
107
+ className={styles.PageHeaderTitle}
108
+ >
109
+ {secondaryTitle}
110
+ </Heading>
111
+ )}
112
+ {editableTitle ? (
113
+ <InlineEdit
114
+ defaultValue={editValue}
115
+ aria-label="edit value"
116
+ onConfirm={setEditValue}
117
+ >
118
+ <Heading
119
+ type={Heading.types.H3}
120
+ weight={Heading.weights.BOLD}
121
+ className={styles.PageHeaderTitle}
122
+ >
123
+ {editValue}
124
+ </Heading>
125
+ </InlineEdit>
126
+ ) : (
127
+ <Heading
128
+ type={Heading.types.H3}
129
+ weight={Heading.weights.BOLD}
130
+ className={styles.PageHeaderTitle}
131
+ >
132
+ {title}
133
+ </Heading>
134
+ )}
135
+ </Flex>
136
+ <Flex gap={2}>
137
+ <Text type={Text.types.TEXT1} color={Text.colors.SECONDARY}>
138
+ {description}
139
+ </Text>
140
+ {description ? (
141
+ <IconButton
142
+ icon={Infomation}
143
+ size="xs"
144
+ style={{ color: "darkgrey" }}
145
+ ariaLabel={description}
146
+ />
147
+ ) : (
148
+ ""
149
+ )}
150
+ </Flex>
151
+ <Flex
152
+ justify={Flex.justify.START}
153
+ gap={Flex.gaps.SMALL}
154
+ style={{ marginTop: "5px" }}
155
+ >
156
+ {buttons && buttons.map((button, index) => button)}
157
+ </Flex>
158
+ {tabs.length !== 0 && (
159
+ <Flex>
160
+ {/* @ts-ignore */}
161
+ <TabList
162
+ divider={false}
163
+ className={styles.PageHeaderTabs}
164
+ >
165
+ {tabs.map((tab, index) => tab)}
166
+ </TabList>
167
+ </Flex>
168
+ )}
169
+ {linkTabs.length !== 0 && (
170
+ <div className={styles.PageHeaderRightActions}>
171
+ <Flex justify={Flex.justify.END} gap={Flex.gaps.SMALL}>
172
+ {linkTabs.map((linkTab, index) => linkTab)}
173
+ </Flex>
174
+ </div>
175
+ )}
176
+ </Container>
177
+ {divider ? (
178
+ <Divider className={styles.PageHeaderDivider} />
179
+ ) : (
180
+ <div></div>
181
+ )}
182
+ </aside>
183
+ );
178
184
  };
179
185
 
180
186
  export default withStaticProps(PageHeader, {
181
- types: PageHeaderType,
187
+ types: PageHeaderType,
182
188
  });
package/src/components/TopNavigationBar/TopNavigationBar.module.scss CHANGED
@@ -79,6 +79,11 @@ ul.itemList{
79
79
  .profile{
80
80
  display: flex;
81
81
  flex-direction: row;
82
+ align-items: center;
83
+ gap: 2px;
84
+ .navbarAvatar{
85
+ margin: 0px 0px 0px 8px;
86
+ }
82
87
  }
83
88
  .notifications{
84
89
  margin-right: 8px;
@@ -86,7 +91,7 @@ ul.itemList{
86
91
  align-items: center;
87
92
  }
88
93
  .navbarAvatar{
89
- margin: 4px 0 0;
94
+ margin: 0px 0px 0px 8px;
90
95
  }
91
96
  .navbarCounter {
92
97
  display:flex;
@@ -97,7 +102,9 @@ ul.itemList{
97
102
  .userInfo{
98
103
  display: flex;
99
104
  align-items: center;
100
- padding: 15px 5px 5px 15px;
105
+ padding: 8px;
106
+ gap: 8px;
107
+ min-width: 240px;
101
108
  }
102
109
 
103
110
  .username{
package/src/components/TopNavigationBar/TopNavigationBar.tsx CHANGED
@@ -5,7 +5,7 @@ import Counter from "../Counter/Counter";
5
5
  import Dialog from "../Dialog/Dialog";
6
6
  import DialogContentContainer from "../DialogContentContainer/DialogContentContainer";
7
7
  import IconButton from "../IconButton/IconButton";
8
- import { Lines, Notifications } from "../Icon/Icons";
8
+ import { Lines, Notifications, Update } from "../Icon/Icons";
9
9
  import { Logo } from "../Logo/Logo";
10
10
  import Menu from "../Menu/Menu/Menu";
11
11
  import MenuDivider from "../Menu/MenuDivider/MenuDivider";
@@ -153,7 +153,14 @@ const TopNavigationBar: React.FC<TopNavigationBarProps> = () => {
153
153
  <NavbarContainer>
154
154
  <IconButton ariaLabel="Add" icon={Lines} size="xs" />
155
155
  <LogoContainer>
156
- <Logo height="15" />
156
+ <Logo
157
+ height="15"
158
+ logoType="mark"
159
+ type="dark"
160
+ width="15"
161
+ viewBox="0 0 180 140"
162
+ />
163
+ Test
157
164
  </LogoContainer>
158
165
  <div>
159
166
  <NavList>
@@ -175,19 +182,29 @@ const TopNavigationBar: React.FC<TopNavigationBarProps> = () => {
175
182
  <DialogContentContainerStyled>
176
183
  <Notification>
177
184
  <NotificationItem
185
+ type="Change request"
178
186
  title="You’ve recieved a message from Acme tires"
179
187
  date="04/24/24 at 9:45 PM"
188
+ tagName="In Progress"
180
189
  link="/"
181
190
  />
182
191
  <NotificationItem
192
+ type="Change request"
183
193
  title="You’ve recieved a message from Acme tires"
184
194
  date="04/24/24 at 9:45 PM"
195
+ tagName="In Progress"
196
+ tagColor="Tags.colors.PRIMARY"
185
197
  link="/"
186
198
  />
187
199
  </Notification>
188
200
  </DialogContentContainerStyled>
189
201
  }
190
202
  >
203
+ <IconButton
204
+ ariaLabel="Messages"
205
+ icon={Update}
206
+ size="small"
207
+ />
191
208
  <IconButton
192
209
  ariaLabel="Notifications"
193
210
  icon={Notifications}
package/src/components/TopNavigationBar/components/NotificationItem/NotificationItem.module.scss CHANGED
@@ -7,20 +7,32 @@
7
7
  text-decoration: none;
8
8
  &:hover{
9
9
  text-decoration: none;
10
+ background-color: var(--surface-secondary);
10
11
  }
11
12
  }
12
13
 
13
14
  .content{
14
15
  display: flex;
15
16
  flex-direction: column;
17
+ text-wrap: balance;
18
+ }
19
+
20
+ .type{
21
+ color: var(--text-secondary);
22
+ font-size: 14px;
23
+ margin: 0 0 8px;
16
24
  }
17
25
  .title{
18
26
  color: var(--text-primary);
19
- font-size: 14px;
27
+ font-size: 16px;
28
+ font-weight: 600;
20
29
  width: 80%;
21
30
  margin-bottom: 10px;
22
31
  }
23
32
  .date{
24
33
  color: var(--text-secondary);
25
34
  font-size: 12px;
35
+ }
36
+ .NotificationStatus {
37
+ margin: 8px -2px 12px;
26
38
  }
package/src/components/TopNavigationBar/components/NotificationItem/NotificationItem.tsx CHANGED
@@ -3,25 +3,43 @@ import { IconType } from "../../../../components/Icon/IconConstants";
3
3
  import { DropdownChevronRight } from "../../../../components/Icon/Icons";
4
4
  import styles from "./NotificationItem.module.scss";
5
5
  import Icon from "../../../../components/Icon/Icon";
6
+ import Button from "../../../../components/Button/Button";
7
+ import Tags from "../../../../components/Tags/Tags";
8
+ import Flex from "../../../../components/Flex/Flex";
6
9
 
7
10
  export interface NotificationItemProps {
11
+ type: string;
8
12
  title: string;
9
- link: string;
13
+ link: string;
14
+ tagName: string;
10
15
  date: string;
11
16
  }
12
17
 
13
18
  export const NotificationItem: React.FC<NotificationItemProps> = ({
19
+ type,
14
20
  title,
15
- link,
16
- date,
21
+ link,
22
+ tagName,
23
+ date,
17
24
  }) => {
18
- return (
19
- <a href={link} className={styles.item}>
20
- <div className={styles.content}>
21
- <span className={styles.title}>{title}</span>
22
- <span className={styles.date}>{date}</span>
23
- </div>
24
- <Icon iconType={IconType.SVG} icon={DropdownChevronRight} />
25
- </a>
26
- );
25
+ return (
26
+ <a href={link} className={styles.item}>
27
+ <div className={styles.content}>
28
+ <span className={styles.type}>{type}</span>
29
+ <span className={styles.title}>{title}</span>
30
+ <Flex align={Flex.align.START} justify={Flex.justify.START}>
31
+ <Tags
32
+ label={tagName}
33
+ showBorder
34
+ color={Tags.colors.PRIMARY}
35
+ readOnly
36
+ className={styles.NotificationStatus}
37
+ />
38
+ </Flex>
39
+
40
+ <span className={styles.date}>{date}</span>
41
+ </div>
42
+ <Icon iconType={IconType.SVG} icon={DropdownChevronRight} />
43
+ </a>
44
+ );
27
45
  };