@instructure/ui-top-nav-bar 8.48.0 → 8.48.1-snapshot-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 (4) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +29 -29
  3. package/src/TopNavBar/README.md +46 -25
  4. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.48.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v8.48.0...v8.48.1-snapshot-1) (2023-11-15)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-top-nav-bar
9
+
10
+
11
+
12
+
13
+
6
14
  # [8.48.0](https://github.com/instructure/instructure-ui/compare/v8.47.1...v8.48.0) (2023-11-10)
7
15
 
8
16
  **Note:** Version bump only for package @instructure/ui-top-nav-bar
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-top-nav-bar",
3
- "version": "8.48.0",
3
+ "version": "8.48.1-snapshot-1",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,37 +24,37 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.23.2",
27
- "@instructure/console": "8.48.0",
28
- "@instructure/emotion": "8.48.0",
29
- "@instructure/shared-types": "8.48.0",
30
- "@instructure/ui-a11y-content": "8.48.0",
31
- "@instructure/ui-avatar": "8.48.0",
32
- "@instructure/ui-breadcrumb": "8.48.0",
33
- "@instructure/ui-buttons": "8.48.0",
34
- "@instructure/ui-dialog": "8.48.0",
35
- "@instructure/ui-dom-utils": "8.48.0",
36
- "@instructure/ui-drilldown": "8.48.0",
37
- "@instructure/ui-icons": "8.48.0",
38
- "@instructure/ui-link": "8.48.0",
39
- "@instructure/ui-popover": "8.48.0",
40
- "@instructure/ui-prop-types": "8.48.0",
41
- "@instructure/ui-react-utils": "8.48.0",
42
- "@instructure/ui-responsive": "8.48.0",
43
- "@instructure/ui-testable": "8.48.0",
44
- "@instructure/ui-tooltip": "8.48.0",
45
- "@instructure/ui-tray": "8.48.0",
46
- "@instructure/ui-truncate-list": "8.48.0",
47
- "@instructure/ui-utils": "8.48.0",
48
- "@instructure/ui-view": "8.48.0",
27
+ "@instructure/console": "8.48.1-snapshot-1",
28
+ "@instructure/emotion": "8.48.1-snapshot-1",
29
+ "@instructure/shared-types": "8.48.1-snapshot-1",
30
+ "@instructure/ui-a11y-content": "8.48.1-snapshot-1",
31
+ "@instructure/ui-avatar": "8.48.1-snapshot-1",
32
+ "@instructure/ui-breadcrumb": "8.48.1-snapshot-1",
33
+ "@instructure/ui-buttons": "8.48.1-snapshot-1",
34
+ "@instructure/ui-dialog": "8.48.1-snapshot-1",
35
+ "@instructure/ui-dom-utils": "8.48.1-snapshot-1",
36
+ "@instructure/ui-drilldown": "8.48.1-snapshot-1",
37
+ "@instructure/ui-icons": "8.48.1-snapshot-1",
38
+ "@instructure/ui-link": "8.48.1-snapshot-1",
39
+ "@instructure/ui-popover": "8.48.1-snapshot-1",
40
+ "@instructure/ui-prop-types": "8.48.1-snapshot-1",
41
+ "@instructure/ui-react-utils": "8.48.1-snapshot-1",
42
+ "@instructure/ui-responsive": "8.48.1-snapshot-1",
43
+ "@instructure/ui-testable": "8.48.1-snapshot-1",
44
+ "@instructure/ui-tooltip": "8.48.1-snapshot-1",
45
+ "@instructure/ui-tray": "8.48.1-snapshot-1",
46
+ "@instructure/ui-truncate-list": "8.48.1-snapshot-1",
47
+ "@instructure/ui-utils": "8.48.1-snapshot-1",
48
+ "@instructure/ui-view": "8.48.1-snapshot-1",
49
49
  "prop-types": "^15.8.1"
50
50
  },
51
51
  "devDependencies": {
52
- "@instructure/ui-axe-check": "8.48.0",
53
- "@instructure/ui-babel-preset": "8.48.0",
54
- "@instructure/ui-color-utils": "8.48.0",
55
- "@instructure/ui-test-locator": "8.48.0",
56
- "@instructure/ui-test-utils": "8.48.0",
57
- "@instructure/ui-themes": "8.48.0",
52
+ "@instructure/ui-axe-check": "8.48.1-snapshot-1",
53
+ "@instructure/ui-babel-preset": "8.48.1-snapshot-1",
54
+ "@instructure/ui-color-utils": "8.48.1-snapshot-1",
55
+ "@instructure/ui-test-locator": "8.48.1-snapshot-1",
56
+ "@instructure/ui-test-utils": "8.48.1-snapshot-1",
57
+ "@instructure/ui-themes": "8.48.1-snapshot-1",
58
58
  "@testing-library/jest-dom": "^6.1.4",
59
59
  "@testing-library/react": "^14.1.0"
60
60
  },
package/src/TopNavBar/README.md CHANGED
@@ -18,6 +18,8 @@ render: false
18
18
  class PlaygroundExample extends React.Component {
19
19
  state = {
20
20
  rtlMode: false,
21
+ showBreadcrumb: false,
22
+ inverseColor: false,
21
23
  isSecondaryNavigation: false,
22
24
  hasBrandSection: true,
23
25
  hasMenuItemsSection: true,
@@ -287,15 +289,20 @@ class PlaygroundExample extends React.Component {
287
289
  },
288
290
  checkboxes: ['rtlMode']
289
291
  },
290
- inverseColor: {
291
- label: 'Inverse color mode',
292
+ secondaryNav: {
293
+ label: 'Secondary navigation',
292
294
  checkboxes: [
293
295
  'isSecondaryNavigation',
294
296
  ]
295
297
  },
298
+ breadcrumb: {
299
+ label: 'Display Breadcrumb',
300
+ checkboxes: ['showBreadcrumb']
301
+ },
296
302
  global: {
297
303
  label: 'Global settings',
298
304
  checkboxes: [
305
+ 'inverseColor',
299
306
  'hasBrandSection',
300
307
  'hasMenuItemsSection',
301
308
  'hasActionItemsSection',
@@ -365,7 +372,9 @@ class PlaygroundExample extends React.Component {
365
372
  const settingLabels = {
366
373
  exampleViewport: 'Toggle example viewport',
367
374
  rtlMode: 'RTL mode',
375
+ showBreadcrumb: 'Show Breadcrumb',
368
376
  isSecondaryNavigation: 'Display as secondary navigation',
377
+ inverseColor: '"inverseColor" prop',
369
378
  hasBrandSection: '"renderBrand" prop',
370
379
  hasMenuItemsSection: '"renderMenuItems" prop',
371
380
  hasActionItemsSection: '"renderActionItems" prop',
@@ -385,7 +394,8 @@ class PlaygroundExample extends React.Component {
385
394
  }
386
395
 
387
396
  const settingDescriptions = {
388
- isSecondaryNavigation: 'When the navbar is used as a secondary navigation (e.g.: under Canvas main navbar), using the inverse color mode is recommended',
397
+ isSecondaryNavigation: 'When the navbar is used as a secondary navigation (e.g.: under Canvas main navbar), using the inverse color mode is recommended. For using Breadcumbs in the navbar, inverse color is necessary.',
398
+ showBreadcrumb: 'Display a Breadcrumb in the navbar. Requires the `renderBrand` and `renderMenuItems` props to be null and `inverseColor` to be true.',
389
399
  hasBrandSection: 'Displays brand section',
390
400
  hasMenuItemsSection: 'Displays main navbar items',
391
401
  hasActionItemsSection: 'Displays action items',
@@ -426,28 +436,28 @@ class PlaygroundExample extends React.Component {
426
436
 
427
437
  const checkboxSettings = checkboxes.length ? (
428
438
  <CheckboxGroup
429
- description={label}
430
- name={name}
431
- key={name}
432
- layout="stacked"
433
- defaultValue={checkboxes.filter(setting => this.state[setting])}
439
+ description={label}
440
+ name={name}
441
+ key={name}
442
+ layout="stacked"
443
+ defaultValue={checkboxes.filter(setting => this.state[setting])}
434
444
  >
435
- {checkboxes.map((setting) => (
436
- <Checkbox
437
- key={`${setting}Setting`}
438
- variant="toggle"
439
- value={setting}
440
- label={settingLabels[setting] || `"${setting}" prop`}
441
- checked={this.state[setting]}
442
- messages={settingDescriptions[setting]
443
- ? [{ text: settingDescriptions[setting], type: 'hint' }]
444
- : undefined
445
- }
446
- onChange={() => {
447
- this.setState({ [setting]: !this.state[setting] })
448
- }}
449
- />
450
- ))}
445
+ {checkboxes.map((setting) => (
446
+ <Checkbox
447
+ key={`${setting}Setting`}
448
+ variant="toggle"
449
+ value={setting}
450
+ label={settingLabels[setting] || `"${setting}" prop`}
451
+ checked={false}
452
+ messages={settingDescriptions[setting]
453
+ ? [{ text: settingDescriptions[setting], type: 'hint' }]
454
+ : undefined
455
+ }
456
+ onChange={() => {
457
+ this.setState({ [setting]: !this.state[setting] })
458
+ }}
459
+ />
460
+ ))}
451
461
  </CheckboxGroup>
452
462
  ) : null
453
463
 
@@ -581,7 +591,7 @@ class PlaygroundExample extends React.Component {
581
591
 
582
592
  return (
583
593
  <TopNavBar
584
- inverseColor={this.state.isSecondaryNavigation}
594
+ inverseColor={this.state.inverseColor}
585
595
  mediaQueryMatch="element"
586
596
  >
587
597
  {({ currentLayout, inverseColor }) => {
@@ -832,6 +842,17 @@ class PlaygroundExample extends React.Component {
832
842
  </TopNavBar.Item>
833
843
  </TopNavBar.User>
834
844
  ) : undefined }
845
+ renderBreadcrumb={this.state.showBreadcrumb && (
846
+ <TopNavBar.Breadcrumb>
847
+ <Breadcrumb label="You are here:">
848
+ <Breadcrumb.Link href="#">Course page 1</Breadcrumb.Link>
849
+ <Breadcrumb.Link href="#">Course page 2</Breadcrumb.Link>
850
+ <Breadcrumb.Link href="#">Course page 3</Breadcrumb.Link>
851
+ <Breadcrumb.Link href="#">Course page 4</Breadcrumb.Link>
852
+ <Breadcrumb.Link href="#">Course page 5</Breadcrumb.Link>
853
+ </Breadcrumb>
854
+ </TopNavBar.Breadcrumb>
855
+ )}
835
856
  themeOverride={{
836
857
  // For example demo
837
858
  smallViewportZIndex: 9999,