@instructure/ui-navigation 8.50.1-snapshot-1 → 8.50.1-snapshot-14

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 (5) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +24 -24
  3. package/src/AppNav/README.md +114 -28
  4. package/src/Navigation/README.md +3 -3
  5. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [8.50.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.50.1-snapshot-1) (2023-12-06)
6
+ ## [8.50.1-snapshot-14](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.50.1-snapshot-14) (2023-12-08)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-navigation
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-navigation",
3
- "version": "8.50.1-snapshot-1",
3
+ "version": "8.50.1-snapshot-14",
4
4
  "description": "Main and application level navigational components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,32 +23,32 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.50.1-snapshot-1",
27
- "@instructure/ui-color-utils": "8.50.1-snapshot-1",
28
- "@instructure/ui-test-locator": "8.50.1-snapshot-1",
29
- "@instructure/ui-test-utils": "8.50.1-snapshot-1",
30
- "@instructure/ui-themes": "8.50.1-snapshot-1"
26
+ "@instructure/ui-babel-preset": "8.50.1-snapshot-14",
27
+ "@instructure/ui-color-utils": "8.50.1-snapshot-14",
28
+ "@instructure/ui-test-locator": "8.50.1-snapshot-14",
29
+ "@instructure/ui-test-utils": "8.50.1-snapshot-14",
30
+ "@instructure/ui-themes": "8.50.1-snapshot-14"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.23.2",
34
- "@instructure/console": "8.50.1-snapshot-1",
35
- "@instructure/debounce": "8.50.1-snapshot-1",
36
- "@instructure/emotion": "8.50.1-snapshot-1",
37
- "@instructure/shared-types": "8.50.1-snapshot-1",
38
- "@instructure/ui-a11y-content": "8.50.1-snapshot-1",
39
- "@instructure/ui-a11y-utils": "8.50.1-snapshot-1",
40
- "@instructure/ui-badge": "8.50.1-snapshot-1",
41
- "@instructure/ui-dom-utils": "8.50.1-snapshot-1",
42
- "@instructure/ui-focusable": "8.50.1-snapshot-1",
43
- "@instructure/ui-icons": "8.50.1-snapshot-1",
44
- "@instructure/ui-menu": "8.50.1-snapshot-1",
45
- "@instructure/ui-prop-types": "8.50.1-snapshot-1",
46
- "@instructure/ui-react-utils": "8.50.1-snapshot-1",
47
- "@instructure/ui-testable": "8.50.1-snapshot-1",
48
- "@instructure/ui-tooltip": "8.50.1-snapshot-1",
49
- "@instructure/ui-truncate-list": "8.50.1-snapshot-1",
50
- "@instructure/ui-utils": "8.50.1-snapshot-1",
51
- "@instructure/ui-view": "8.50.1-snapshot-1",
34
+ "@instructure/console": "8.50.1-snapshot-14",
35
+ "@instructure/debounce": "8.50.1-snapshot-14",
36
+ "@instructure/emotion": "8.50.1-snapshot-14",
37
+ "@instructure/shared-types": "8.50.1-snapshot-14",
38
+ "@instructure/ui-a11y-content": "8.50.1-snapshot-14",
39
+ "@instructure/ui-a11y-utils": "8.50.1-snapshot-14",
40
+ "@instructure/ui-badge": "8.50.1-snapshot-14",
41
+ "@instructure/ui-dom-utils": "8.50.1-snapshot-14",
42
+ "@instructure/ui-focusable": "8.50.1-snapshot-14",
43
+ "@instructure/ui-icons": "8.50.1-snapshot-14",
44
+ "@instructure/ui-menu": "8.50.1-snapshot-14",
45
+ "@instructure/ui-prop-types": "8.50.1-snapshot-14",
46
+ "@instructure/ui-react-utils": "8.50.1-snapshot-14",
47
+ "@instructure/ui-testable": "8.50.1-snapshot-14",
48
+ "@instructure/ui-tooltip": "8.50.1-snapshot-14",
49
+ "@instructure/ui-truncate-list": "8.50.1-snapshot-14",
50
+ "@instructure/ui-utils": "8.50.1-snapshot-14",
51
+ "@instructure/ui-view": "8.50.1-snapshot-14",
52
52
  "prop-types": "^15.8.1"
53
53
  },
54
54
  "peerDependencies": {
package/src/AppNav/README.md CHANGED
@@ -12,40 +12,126 @@ that contains the truncated items. The example below shows how you can use both
12
12
  these props to create a hamburger menu when the number of visible nav items is less
13
13
  than two.
14
14
 
15
- ```javascript
16
- ---
17
- example: true
18
- render: false
19
- ---
15
+ - ```js
16
+ const totalItemsCount = 5
17
+
18
+ class AppNavExample extends React.Component {
19
+ constructor(props) {
20
+ super(props)
20
21
 
21
- const totalItemsCount = 5
22
+ this.state = {
23
+ visibleItemsCount: totalItemsCount
24
+ }
25
+ }
22
26
 
23
- class AppNavExample extends React.Component {
27
+ handleUpdate = ({ visibleItemsCount }) => {
28
+ this.setState({ visibleItemsCount })
29
+ }
24
30
 
25
- constructor (props) {
26
- super(props)
31
+ render() {
32
+ const visibleItemsCount = this.state.visibleItemsCount
27
33
 
28
- this.state = {
29
- visibleItemsCount: totalItemsCount
34
+ return (
35
+ <AppNav
36
+ screenReaderLabel="App navigation"
37
+ visibleItemsCount={visibleItemsCount >= 2 ? visibleItemsCount : 0}
38
+ onUpdate={this.handleUpdate}
39
+ renderBeforeItems={
40
+ <AppNav.Item
41
+ renderLabel={
42
+ <ScreenReaderContent>Instructure</ScreenReaderContent>
43
+ }
44
+ renderIcon={
45
+ <IconCommonsLine inline={false} size="medium" color="primary" />
46
+ }
47
+ href="http://instructure.com"
48
+ />
49
+ }
50
+ renderAfterItems={
51
+ <IconButton
52
+ onClick={() => console.log('Add')}
53
+ renderIcon={IconPlusSolid}
54
+ margin="0 0 0 x-small"
55
+ screenReaderLabel="Add something"
56
+ withBorder={false}
57
+ withBackground={false}
58
+ />
59
+ }
60
+ renderTruncateLabel={function () {
61
+ const hiddenItemsCount = totalItemsCount - visibleItemsCount
62
+ if (visibleItemsCount >= 2) {
63
+ return `${hiddenItemsCount} More`
64
+ } else {
65
+ return (
66
+ <span>
67
+ <IconHamburgerLine size="small" inline={false} />
68
+ <ScreenReaderContent>{`${hiddenItemsCount} More`}</ScreenReaderContent>
69
+ </span>
70
+ )
71
+ }
72
+ }}
73
+ >
74
+ <AppNav.Item
75
+ renderLabel="instructure-ui"
76
+ href="http://instructure.design"
77
+ renderAfter={
78
+ <Badge
79
+ type="notification"
80
+ variant="success"
81
+ standalone
82
+ formatOutput={function () {
83
+ return (
84
+ <ScreenReaderContent>
85
+ You have notifications from instructure-ui
86
+ </ScreenReaderContent>
87
+ )
88
+ }}
89
+ />
90
+ }
91
+ />
92
+ <AppNav.Item
93
+ isSelected
94
+ renderLabel="Canvas"
95
+ href="https://www.instructure.com/canvas/"
96
+ />
97
+ <AppNav.Item renderLabel="Canvas Network" href="https://canvas.net" />
98
+ <AppNav.Item
99
+ renderLabel={() => 'Canvas Community'}
100
+ href="https://community.canvaslms.com/"
101
+ />
102
+ <AppNav.Item
103
+ renderLabel="Bridge"
104
+ href="https://www.instructure.com/bridge/"
105
+ />
106
+ </AppNav>
107
+ )
30
108
  }
31
109
  }
32
110
 
33
- handleUpdate = ({ visibleItemsCount }) => {
34
- this.setState({ visibleItemsCount })
35
- }
111
+ render(<AppNavExample />)
112
+ ```
36
113
 
37
- render () {
38
- const visibleItemsCount = this.state.visibleItemsCount
114
+ - ```js
115
+ const totalItemsCount = 5
116
+
117
+ const AppNavExample = () => {
118
+ const [visibleItemsCount, setVisibleItemsCount] = useState(totalItemsCount)
119
+
120
+ const handleUpdate = ({ visibleItemsCount }) => {
121
+ setVisibleItemsCount(visibleItemsCount)
122
+ }
39
123
 
40
124
  return (
41
125
  <AppNav
42
126
  screenReaderLabel="App navigation"
43
127
  visibleItemsCount={visibleItemsCount >= 2 ? visibleItemsCount : 0}
44
- onUpdate={this.handleUpdate}
128
+ onUpdate={handleUpdate}
45
129
  renderBeforeItems={
46
130
  <AppNav.Item
47
131
  renderLabel={<ScreenReaderContent>Instructure</ScreenReaderContent>}
48
- renderIcon={<IconCommonsLine inline={false} size="medium" color="primary" />}
132
+ renderIcon={
133
+ <IconCommonsLine inline={false} size="medium" color="primary" />
134
+ }
49
135
  href="http://instructure.com"
50
136
  />
51
137
  }
@@ -59,7 +145,7 @@ class AppNavExample extends React.Component {
59
145
  withBackground={false}
60
146
  />
61
147
  }
62
- renderTruncateLabel={function () {
148
+ renderTruncateLabel={() => {
63
149
  const hiddenItemsCount = totalItemsCount - visibleItemsCount
64
150
  if (visibleItemsCount >= 2) {
65
151
  return `${hiddenItemsCount} More`
@@ -81,8 +167,12 @@ class AppNavExample extends React.Component {
81
167
  type="notification"
82
168
  variant="success"
83
169
  standalone
84
- formatOutput={function () {
85
- return <ScreenReaderContent>You have notifications from instructure-ui</ScreenReaderContent>
170
+ formatOutput={() => {
171
+ return (
172
+ <ScreenReaderContent>
173
+ You have notifications from instructure-ui
174
+ </ScreenReaderContent>
175
+ )
86
176
  }}
87
177
  />
88
178
  }
@@ -92,10 +182,7 @@ class AppNavExample extends React.Component {
92
182
  renderLabel="Canvas"
93
183
  href="https://www.instructure.com/canvas/"
94
184
  />
95
- <AppNav.Item
96
- renderLabel="Canvas Network"
97
- href="https://canvas.net"
98
- />
185
+ <AppNav.Item renderLabel="Canvas Network" href="https://canvas.net" />
99
186
  <AppNav.Item
100
187
  renderLabel={() => 'Canvas Community'}
101
188
  href="https://community.canvaslms.com/"
@@ -107,7 +194,6 @@ class AppNavExample extends React.Component {
107
194
  </AppNav>
108
195
  )
109
196
  }
110
- }
111
197
 
112
- render(<AppNavExample />)
113
- ```
198
+ render(<AppNavExample />)
199
+ ```
package/src/Navigation/README.md CHANGED
@@ -6,7 +6,7 @@ A top-level `Navigation` component.
6
6
 
7
7
  ```js
8
8
  ---
9
- embed: true
9
+ type: embed
10
10
  ---
11
11
  <ToggleBlockquote
12
12
  summary="DEPRECATED"
@@ -19,7 +19,7 @@ embed: true
19
19
 
20
20
  ```js
21
21
  ---
22
- example: true
22
+ type: example
23
23
  ---
24
24
  <div style={{height: '35rem'}}>
25
25
  <Navigation
@@ -71,7 +71,7 @@ example: true
71
71
 
72
72
  ```js
73
73
  ---
74
- guidelines: true
74
+ type: embed
75
75
  ---
76
76
  <Guidelines>
77
77
  <Figure recommendation="yes" title="Do">