agroptima-design-system 1.2.1 → 1.2.3-beta.1

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 (12) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/Menu/Menu.scss +7 -32
  3. package/src/atoms/Menu/MenuDropdown.tsx +2 -2
  4. package/src/atoms/Notification/NotificationCenter.scss +1 -3
  5. package/src/atoms/Notification/NotificationCenter.tsx +4 -0
  6. package/src/settings/_config.scss +1 -5
  7. package/src/stories/Changelog.mdx +2 -3
  8. package/src/stories/Header.stories.tsx +10 -8
  9. package/src/stories/Menu.stories.tsx +0 -24
  10. package/src/stories/Notification.stories.tsx +123 -112
  11. package/tests/Menu.spec.tsx +0 -26
  12. package/.env.sample +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agroptima-design-system",
3
- "version": "1.2.1",
3
+ "version": "1.2.3-beta.1",
4
4
  "scripts": {
5
5
  "dev": "npm run storybook",
6
6
  "storybook": "storybook dev -p 6006 --ci",
package/src/atoms/Menu/Menu.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  @use '../../settings/typography/content' as typography;
2
2
  @use '../../settings/config';
3
3
  @use '../../settings/depth';
4
- @use '../../settings/breakpoints';
5
4
 
6
5
  .menu {
7
6
  @include typography.body-regular-primary;
@@ -55,13 +54,14 @@
55
54
  }
56
55
  }
57
56
 
58
- details[open]>.menu-item .arrow {
59
- transform: rotate(180deg);
57
+ details[open] {
58
+ .arrow {
59
+ transform: rotate(180deg);
60
+ }
60
61
  }
61
-
62
62
  .menu-dropdown .menu {
63
63
  .menu-item {
64
- padding-left: config.$space-3x;
64
+ padding-left: config.$space-8x;
65
65
  background: var(--neutral-color-100);
66
66
  color: var(--neutral-color-1000);
67
67
 
@@ -69,38 +69,13 @@
69
69
  background: var(--primary-color-100);
70
70
  }
71
71
  }
72
-
73
- .arrow > svg {
74
- fill: var(--primary-color-600);
75
- path {
76
- fill: var(--primary-color-600);
77
- }
78
- }
79
-
80
72
  .active {
81
73
  background: var(--primary-color-100);
82
- box-shadow: inset -3px 0px 0px 0px var(--primary-color-100);
74
+ box-shadow: inset -3px 0px 0px 0px var(--primary-color-600);
83
75
  }
84
76
  }
85
77
 
86
- .menu-dropdown .menu .menu-dropdown .menu{
87
- .menu-item {
88
- padding-left: config.$space-8x;
89
- background: var(--neutral-color-50);
90
- color: var(--neutral-color-1000);
91
-
92
- &:hover {
93
- background: var(--primary-color-100);
94
- }
95
- }
96
-
97
- .active {
98
- background: var(--primary-color-100);
99
- box-shadow: inset -3px 0px 0px 0px var(--primary-color-100);
100
- }
101
- }
102
-
103
78
  .menu-item::-webkit-details-marker {
104
79
  display: none;
105
80
  }
106
- }
81
+ }
package/src/atoms/Menu/MenuDropdown.tsx CHANGED
@@ -27,9 +27,9 @@ export function MenuDropdown({
27
27
  <li tabIndex={0} role="menuitem" className="menu-dropdown" {...props}>
28
28
  <details open={isOpen} name={name}>
29
29
  <summary className={classNames('menu-item', variant, className)}>
30
- {icon && <Icon name={icon} size="3" />}
30
+ {icon && <Icon name={icon} />}
31
31
  <span className="title">{title}</span>
32
- <Icon className="arrow" name="AngleDown" size="3" />
32
+ <Icon className="arrow" name="AngleDown" />
33
33
  </summary>
34
34
  <ul className="menu" role="menu">
35
35
  {children}
package/src/atoms/Notification/NotificationCenter.scss CHANGED
@@ -4,8 +4,6 @@
4
4
  @use '../../settings/breakpoints';
5
5
  @use '../../settings/mixins';
6
6
 
7
- $header-height: 50px;
8
-
9
7
  .notification-center-container {
10
8
  .notification-button-container {
11
9
  position: relative;
@@ -156,7 +154,7 @@ $header-height: 50px;
156
154
 
157
155
  .notification-center {
158
156
  width: 100%;
159
- height: calc(100vh - $header-height);
157
+ height: calc(100vh - config.$header-height-mobile);
160
158
 
161
159
  .notification-header {
162
160
  .notification-header-title {
package/src/atoms/Notification/NotificationCenter.tsx CHANGED
@@ -5,6 +5,7 @@ import { classNames } from '../../utils/classNames'
5
5
  import { Badge } from '../Badge'
6
6
  import { IconButton } from '../Button'
7
7
  import type { Variant } from '../Button/IconButton'
8
+ import type { IconSize } from '../Icon'
8
9
  import { Popover, type Position } from '../Popover'
9
10
 
10
11
  export interface NotificationCenterProps {
@@ -13,11 +14,13 @@ export interface NotificationCenterProps {
13
14
  variant?: Variant
14
15
  accessibilityLabel?: string
15
16
  hasNewNotifications?: boolean
17
+ size?: IconSize
16
18
  children: React.ReactNode
17
19
  }
18
20
 
19
21
  function NotificationCenter({
20
22
  position = 'right',
23
+ size = '6',
21
24
  className,
22
25
  variant = 'secondary',
23
26
  hasNewNotifications = false,
@@ -41,6 +44,7 @@ function NotificationCenter({
41
44
  icon="Notification"
42
45
  variant={variant}
43
46
  accessibilityLabel={accessibilityLabel}
47
+ size={size}
44
48
  onClick={toggle}
45
49
  />
46
50
  </div>
package/src/settings/_config.scss CHANGED
@@ -25,9 +25,5 @@ $icon-size-6x: 24px;
25
25
  $icon-size-7x: 28px;
26
26
  $icon-size-8x: 32px;
27
27
 
28
- $breakpoints-small: 375px;
29
- $breakpoints-medium: 900px;
30
- $breakpoints-large: 1200px;
31
-
32
28
  $header-height: 3.75rem;
33
- $header-height-mobile: 3.125rem;
29
+ $header-height-mobile: 3.125rem;
package/src/stories/Changelog.mdx CHANGED
@@ -4,14 +4,13 @@ import { Meta } from "@storybook/addon-docs/blocks";
4
4
 
5
5
  # Changelog
6
6
 
7
- ## 1.2.1
8
-
9
- * Add a third level to the MenuDropdown component
7
+ ## 1.2.3
10
8
 
11
9
  ## 1.2.0
12
10
 
13
11
  * Add NotificationCenter components
14
12
 
13
+
15
14
  ## 1.1.2
16
15
 
17
16
  * Fix selection clearing in InfiniteSelect selector
package/src/stories/Header.stories.tsx CHANGED
@@ -34,14 +34,16 @@ type Story = StoryObj<typeof meta>
34
34
 
35
35
  export const Primary: Story = {
36
36
  render: (props: HeaderProps) => (
37
- <Header {...props}>
38
- <h1>Header Title</h1>
37
+ <div style={{ position: 'absolute', top: 0, left: 0 }}>
38
+ <Header {...props}>
39
+ <h1>Header Title</h1>
39
40
 
40
- <IconButton
41
- icon="UserMenu"
42
- variant="secondary"
43
- accessibilityLabel="User menu button"
44
- />
45
- </Header>
41
+ <IconButton
42
+ icon="UserMenu"
43
+ variant="secondary"
44
+ accessibilityLabel="User menu button"
45
+ />
46
+ </Header>
47
+ </div>
46
48
  ),
47
49
  }
package/src/stories/Menu.stories.tsx CHANGED
@@ -75,30 +75,6 @@ export const MenuWithLinks: Story = {
75
75
  <MenuLink title="Dark souls" href="some-link" />
76
76
  <MenuLink title="Elder ring" href="some-link" />
77
77
  </MenuDropdown>
78
- <MenuDropdown
79
- title="Three level menu"
80
- icon="AddCircle"
81
- name="menu"
82
- isOpen
83
- >
84
- <MenuDropdown title="Second Level" name="submenu">
85
- <MenuLink title="Third Level 1" href="some-link" />
86
- <MenuLink title="Third Level 2" href="some-link" />
87
- </MenuDropdown>
88
- </MenuDropdown>
89
- </Menu>
90
- ),
91
- }
92
- export const MenuThirdLevel: Story = {
93
- render: () => (
94
- <Menu>
95
- <MenuDropdown title="Final Fantasy" icon="AddCircle" name="menu" isOpen>
96
- <MenuDropdown title="Bestiary" name="submenu">
97
- <MenuLink title="Chocobo" href="some-link" />
98
- <MenuLink title="Moguri" href="some-link" isActive />
99
- </MenuDropdown>
100
- </MenuDropdown>
101
- <MenuLink title="Metroid" icon="Delete" href="#" />
102
78
  </Menu>
103
79
  ),
104
80
  }
package/src/stories/Notification.stories.tsx CHANGED
@@ -43,127 +43,138 @@ type Story = StoryObj<typeof meta>
43
43
 
44
44
  export const NotificationCenterWithNotifications: Story = {
45
45
  render: (props: NotificationCenterProps) => (
46
- <Header {...props}>
47
- <h1>Header Title</h1>
46
+ <div style={{ position: 'absolute', top: 0, left: 0 }}>
47
+ <Header {...props}>
48
+ <h1>Header Title</h1>
48
49
 
49
- <div style={{ display: 'flex', gap: '10px', marginRight: '30px' }}>
50
- <NotificationCenter hasNewNotifications={true}>
51
- <NotificationHeader title="Notifications">
52
- <CheckableTagGroup>
53
- <CheckableTag
54
- variant="primary"
55
- label="All"
56
- aria-label="All notifications"
57
- onSelect={() => alert('click')}
58
- isChecked={true}
50
+ <div style={{ display: 'flex', gap: '10px' }}>
51
+ <NotificationCenter hasNewNotifications={true}>
52
+ <NotificationHeader title="Notifications">
53
+ <CheckableTagGroup>
54
+ <CheckableTag
55
+ variant="primary"
56
+ label="All"
57
+ aria-label="All notifications"
58
+ onSelect={() => alert('click')}
59
+ isChecked={true}
60
+ />
61
+ <CheckableTag
62
+ variant="primary"
63
+ label="Errors"
64
+ aria-label="Notification errors"
65
+ onSelect={() => alert('click')}
66
+ isChecked={false}
67
+ />
68
+ <CheckableTag
69
+ variant="primary"
70
+ label="Updates"
71
+ aria-label="Notification updates"
72
+ onSelect={() => alert('click')}
73
+ isChecked={false}
74
+ />
75
+ </CheckableTagGroup>
76
+ <Button
77
+ onClick={() => alert('mark all as read')}
78
+ label="Mark all as read"
59
79
  />
60
- <CheckableTag
61
- variant="primary"
62
- label="Errors"
63
- aria-label="Notification errors"
64
- onSelect={() => alert('click')}
65
- isChecked={false}
66
- />
67
- <CheckableTag
68
- variant="primary"
69
- label="Updates"
70
- aria-label="Notification updates"
71
- onSelect={() => alert('click')}
72
- isChecked={false}
73
- />
74
- </CheckableTagGroup>
75
- <Button
76
- onClick={() => alert('mark all as read')}
77
- label="Mark all as read"
78
- />
79
- </NotificationHeader>
80
- <NotificationList>
81
- <NotificationLine
82
- title="Trophy: Parting on Good Terms"
83
- date="Jan 04"
84
- onClick={() => alert('Notification clicked')}
85
- >
86
- Good terms? No. I&apos;m here to burn bridges.
87
- </NotificationLine>
88
- <NotificationLine title="New operating system update" date="Jan 02">
89
- Enjoy the new UI and performance improvements. <br /> Contact{' '}
90
- <a href="support@fakemail.com">support@fakemail.com</a> for help.
91
- </NotificationLine>
92
- <NotificationLine title="Trophy: Shell of the Past" date="Dec 30">
93
- What exactly have we learned?
94
- </NotificationLine>
95
- <NotificationLine
96
- title="New SHf game patch update"
97
- date="Dec 29"
98
- isRead={true}
99
- >
100
- Fixes a bug when saving the game in certain conditions.
101
- </NotificationLine>
102
- <NotificationLine
103
- title="Trophy: On the Way to School"
104
- date="Dec 28"
105
- isRead={true}
106
- onClick={() => alert('Notification clicked')}
107
- >
108
- The little sparrow escapes with its friends, wings flapping
109
- nervously...
110
- </NotificationLine>
111
- </NotificationList>
112
- </NotificationCenter>
113
- <IconButton
114
- icon="UserMenu"
115
- accessibilityLabel="User menu button"
116
- variant="secondary"
117
- />
118
- </div>
119
- </Header>
80
+ </NotificationHeader>
81
+ <NotificationList>
82
+ <NotificationLine
83
+ title="Trophy: Parting on Good Terms"
84
+ date="Jan 04"
85
+ onClick={() => alert('Notification clicked')}
86
+ >
87
+ Good terms? No. I&apos;m here to burn bridges.
88
+ </NotificationLine>
89
+ <NotificationLine
90
+ title="New operating system update"
91
+ date="Jan 02"
92
+ >
93
+ Enjoy the new UI and performance improvements. <br /> Contact{' '}
94
+ <a href="support@fakemail.com">support@fakemail.com</a> for
95
+ help.
96
+ </NotificationLine>
97
+ <NotificationLine title="Trophy: Shell of the Past" date="Dec 30">
98
+ What exactly have we learned?
99
+ </NotificationLine>
100
+ <NotificationLine
101
+ title="New SHf game patch update"
102
+ date="Dec 29"
103
+ isRead={true}
104
+ >
105
+ Fixes a bug when saving the game in certain conditions.
106
+ </NotificationLine>
107
+ <NotificationLine
108
+ title="Trophy: On the Way to School"
109
+ date="Dec 28"
110
+ isRead={true}
111
+ onClick={() => alert('Notification clicked')}
112
+ >
113
+ The little sparrow escapes with its friends, wings flapping
114
+ nervously...
115
+ </NotificationLine>
116
+ </NotificationList>
117
+ </NotificationCenter>
118
+ <IconButton
119
+ icon="UserMenu"
120
+ accessibilityLabel="User menu button"
121
+ variant="secondary"
122
+ />
123
+ </div>
124
+ </Header>
125
+ </div>
120
126
  ),
121
127
  } as unknown as Story
122
128
 
123
129
  export const NotificationCenterEmptyState: Story = {
124
130
  render: (props: NotificationCenterProps) => (
125
- <Header {...props}>
126
- <h1>Header Title</h1>
131
+ <div style={{ position: 'absolute', top: 0, left: 0 }}>
132
+ <Header {...props}>
133
+ <h1>Header Title</h1>
127
134
 
128
- <div style={{ display: 'flex', gap: '10px', marginRight: '30px' }}>
129
- <NotificationCenter {...props}>
130
- <NotificationHeader title="Notifications">
131
- <CheckableTagGroup>
132
- <CheckableTag
133
- variant="primary"
134
- label="All"
135
- aria-label="All notifications"
136
- onSelect={() => alert('click')}
137
- isChecked={true}
138
- />
139
- <CheckableTag
140
- variant="primary"
141
- label="Errors"
142
- aria-label="Notification errors"
143
- onSelect={() => alert('click')}
144
- isChecked={false}
145
- />
146
- <CheckableTag
147
- variant="primary"
148
- label="Updates"
149
- aria-label="Notification updates"
150
- onSelect={() => alert('click')}
151
- isChecked={false}
135
+ <div style={{ display: 'flex', gap: '10px' }}>
136
+ <NotificationCenter {...props}>
137
+ <NotificationHeader title="Notifications">
138
+ <CheckableTagGroup>
139
+ <CheckableTag
140
+ variant="primary"
141
+ label="All"
142
+ aria-label="All notifications"
143
+ onSelect={() => alert('click')}
144
+ isChecked={true}
145
+ />
146
+ <CheckableTag
147
+ variant="primary"
148
+ label="Errors"
149
+ aria-label="Notification errors"
150
+ onSelect={() => alert('click')}
151
+ isChecked={false}
152
+ />
153
+ <CheckableTag
154
+ variant="primary"
155
+ label="Updates"
156
+ aria-label="Notification updates"
157
+ onSelect={() => alert('click')}
158
+ isChecked={false}
159
+ />
160
+ </CheckableTagGroup>
161
+ <Button
162
+ onClick={() => alert('mark all as read')}
163
+ label="Mark all as read"
152
164
  />
153
- </CheckableTagGroup>
154
- <Button
155
- onClick={() => alert('mark all as read')}
156
- label="Mark all as read"
165
+ </NotificationHeader>
166
+ <NotificationEmptyState
167
+ title="No new notifications"
168
+ date="Jan 21"
157
169
  />
158
- </NotificationHeader>
159
- <NotificationEmptyState title="No new notifications" date="Jan 21" />
160
- </NotificationCenter>
161
- <IconButton
162
- icon="UserMenu"
163
- accessibilityLabel="User menu button"
164
- variant="secondary"
165
- />
166
- </div>
167
- </Header>
170
+ </NotificationCenter>
171
+ <IconButton
172
+ icon="UserMenu"
173
+ accessibilityLabel="User menu button"
174
+ variant="secondary"
175
+ />
176
+ </div>
177
+ </Header>
178
+ </div>
168
179
  ),
169
180
  } as unknown as Story
package/tests/Menu.spec.tsx CHANGED
@@ -54,30 +54,4 @@ describe('Menu', () => {
54
54
  expect(getByRole('img', { name: 'AngleDown' })).toBeInTheDocument()
55
55
  expect(getByRole('img', { name: 'Delete' })).toBeInTheDocument()
56
56
  })
57
- it('renders third-level menu', () => {
58
- const { getAllByRole, getByText } = render(
59
- <Menu>
60
- <MenuDropdown title="Final Fantasy">
61
- <MenuDropdown title="Final Fantasy VIII">
62
- <MenuLink title="Walkthrough" href="#" />
63
- <MenuLink title="Characters" href="#" />
64
- <MenuLink title="Story" href="#" />
65
- </MenuDropdown>
66
- </MenuDropdown>
67
- <MenuLink
68
- title="The Legend of Zelda: Tears of the Kingdom"
69
- icon="Delete"
70
- href="#"
71
- />
72
- </Menu>,
73
- )
74
-
75
- expect(getAllByRole('menu').length).toBe(3)
76
- expect(getByText('Final Fantasy')).toBeInTheDocument()
77
- expect(getByText(/VIII/i)).toBeInTheDocument()
78
- expect(getByText(/Walkthrough/i)).toBeInTheDocument()
79
- expect(getByText(/Characters/i)).toBeInTheDocument()
80
- expect(getByText(/Story/i)).toBeInTheDocument()
81
- expect(getByText(/Zelda/i)).toBeInTheDocument()
82
- })
83
57
  })
package/.env.sample DELETED
@@ -1 +0,0 @@
1
- CHROMATIC_PROJECT_TOKEN= "The Token is in LastPass"