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

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.50.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.50.1-snapshot-1) (2023-12-06)
+## [8.50.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.50.1-snapshot-13) (2023-12-07)
 
 **Note:** Version bump only for package @instructure/ui-navigation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-navigation",
-  "version": "8.50.1-snapshot-1",
+  "version": "8.50.1-snapshot-13",
   "description": "Main and application level navigational components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,32 +23,32 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.50.1-snapshot-1",
-    "@instructure/ui-color-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-test-locator": "8.50.1-snapshot-1",
-    "@instructure/ui-test-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-themes": "8.50.1-snapshot-1"
+    "@instructure/ui-babel-preset": "8.50.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.50.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-themes": "8.50.1-snapshot-13"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.50.1-snapshot-1",
-    "@instructure/debounce": "8.50.1-snapshot-1",
-    "@instructure/emotion": "8.50.1-snapshot-1",
-    "@instructure/shared-types": "8.50.1-snapshot-1",
-    "@instructure/ui-a11y-content": "8.50.1-snapshot-1",
-    "@instructure/ui-a11y-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-badge": "8.50.1-snapshot-1",
-    "@instructure/ui-dom-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-focusable": "8.50.1-snapshot-1",
-    "@instructure/ui-icons": "8.50.1-snapshot-1",
-    "@instructure/ui-menu": "8.50.1-snapshot-1",
-    "@instructure/ui-prop-types": "8.50.1-snapshot-1",
-    "@instructure/ui-react-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-testable": "8.50.1-snapshot-1",
-    "@instructure/ui-tooltip": "8.50.1-snapshot-1",
-    "@instructure/ui-truncate-list": "8.50.1-snapshot-1",
-    "@instructure/ui-utils": "8.50.1-snapshot-1",
-    "@instructure/ui-view": "8.50.1-snapshot-1",
+    "@instructure/console": "8.50.1-snapshot-13",
+    "@instructure/debounce": "8.50.1-snapshot-13",
+    "@instructure/emotion": "8.50.1-snapshot-13",
+    "@instructure/shared-types": "8.50.1-snapshot-13",
+    "@instructure/ui-a11y-content": "8.50.1-snapshot-13",
+    "@instructure/ui-a11y-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-badge": "8.50.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-focusable": "8.50.1-snapshot-13",
+    "@instructure/ui-icons": "8.50.1-snapshot-13",
+    "@instructure/ui-menu": "8.50.1-snapshot-13",
+    "@instructure/ui-prop-types": "8.50.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-testable": "8.50.1-snapshot-13",
+    "@instructure/ui-tooltip": "8.50.1-snapshot-13",
+    "@instructure/ui-truncate-list": "8.50.1-snapshot-13",
+    "@instructure/ui-utils": "8.50.1-snapshot-13",
+    "@instructure/ui-view": "8.50.1-snapshot-13",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/AppNav/README.md

@@ -12,40 +12,126 @@ that contains the truncated items. The example below shows how you can use both
 these props to create a hamburger menu when the number of visible nav items is less
 than two.
 
-```javascript
----
-example: true
-render: false
----
+- ```js
+  const totalItemsCount = 5
+
+  class AppNavExample extends React.Component {
+    constructor(props) {
+      super(props)
 
-const totalItemsCount = 5
+      this.state = {
+        visibleItemsCount: totalItemsCount
+      }
+    }
 
-class AppNavExample extends React.Component {
+    handleUpdate = ({ visibleItemsCount }) => {
+      this.setState({ visibleItemsCount })
+    }
 
-  constructor (props) {
-    super(props)
+    render() {
+      const visibleItemsCount = this.state.visibleItemsCount
 
-    this.state = {
-      visibleItemsCount: totalItemsCount
+      return (
+        <AppNav
+          screenReaderLabel="App navigation"
+          visibleItemsCount={visibleItemsCount >= 2 ? visibleItemsCount : 0}
+          onUpdate={this.handleUpdate}
+          renderBeforeItems={
+            <AppNav.Item
+              renderLabel={
+                <ScreenReaderContent>Instructure</ScreenReaderContent>
+              }
+              renderIcon={
+                <IconCommonsLine inline={false} size="medium" color="primary" />
+              }
+              href="http://instructure.com"
+            />
+          }
+          renderAfterItems={
+            <IconButton
+              onClick={() => console.log('Add')}
+              renderIcon={IconPlusSolid}
+              margin="0 0 0 x-small"
+              screenReaderLabel="Add something"
+              withBorder={false}
+              withBackground={false}
+            />
+          }
+          renderTruncateLabel={function () {
+            const hiddenItemsCount = totalItemsCount - visibleItemsCount
+            if (visibleItemsCount >= 2) {
+              return `${hiddenItemsCount} More`
+            } else {
+              return (
+                <span>
+                  <IconHamburgerLine size="small" inline={false} />
+                  <ScreenReaderContent>{`${hiddenItemsCount} More`}</ScreenReaderContent>
+                </span>
+              )
+            }
+          }}
+        >
+          <AppNav.Item
+            renderLabel="instructure-ui"
+            href="http://instructure.design"
+            renderAfter={
+              <Badge
+                type="notification"
+                variant="success"
+                standalone
+                formatOutput={function () {
+                  return (
+                    <ScreenReaderContent>
+                      You have notifications from instructure-ui
+                    </ScreenReaderContent>
+                  )
+                }}
+              />
+            }
+          />
+          <AppNav.Item
+            isSelected
+            renderLabel="Canvas"
+            href="https://www.instructure.com/canvas/"
+          />
+          <AppNav.Item renderLabel="Canvas Network" href="https://canvas.net" />
+          <AppNav.Item
+            renderLabel={() => 'Canvas Community'}
+            href="https://community.canvaslms.com/"
+          />
+          <AppNav.Item
+            renderLabel="Bridge"
+            href="https://www.instructure.com/bridge/"
+          />
+        </AppNav>
+      )
     }
   }
 
-  handleUpdate = ({ visibleItemsCount }) => {
-    this.setState({ visibleItemsCount })
-  }
+  render(<AppNavExample />)
+  ```
 
-  render () {
-    const visibleItemsCount = this.state.visibleItemsCount
+- ```js
+  const totalItemsCount = 5
+
+  const AppNavExample = () => {
+    const [visibleItemsCount, setVisibleItemsCount] = useState(totalItemsCount)
+
+    const handleUpdate = ({ visibleItemsCount }) => {
+      setVisibleItemsCount(visibleItemsCount)
+    }
 
     return (
       <AppNav
         screenReaderLabel="App navigation"
         visibleItemsCount={visibleItemsCount >= 2 ? visibleItemsCount : 0}
-        onUpdate={this.handleUpdate}
+        onUpdate={handleUpdate}
         renderBeforeItems={
           <AppNav.Item
             renderLabel={<ScreenReaderContent>Instructure</ScreenReaderContent>}
-            renderIcon={<IconCommonsLine inline={false} size="medium" color="primary" />}
+            renderIcon={
+              <IconCommonsLine inline={false} size="medium" color="primary" />
+            }
             href="http://instructure.com"
           />
         }
@@ -59,7 +145,7 @@ class AppNavExample extends React.Component {
             withBackground={false}
           />
         }
-        renderTruncateLabel={function () {
+        renderTruncateLabel={() => {
           const hiddenItemsCount = totalItemsCount - visibleItemsCount
           if (visibleItemsCount >= 2) {
             return `${hiddenItemsCount} More`
@@ -81,8 +167,12 @@ class AppNavExample extends React.Component {
               type="notification"
               variant="success"
               standalone
-              formatOutput={function () {
-                return <ScreenReaderContent>You have notifications from instructure-ui</ScreenReaderContent>
+              formatOutput={() => {
+                return (
+                  <ScreenReaderContent>
+                    You have notifications from instructure-ui
+                  </ScreenReaderContent>
+                )
               }}
             />
           }
@@ -92,10 +182,7 @@ class AppNavExample extends React.Component {
           renderLabel="Canvas"
           href="https://www.instructure.com/canvas/"
         />
-        <AppNav.Item
-          renderLabel="Canvas Network"
-          href="https://canvas.net"
-        />
+        <AppNav.Item renderLabel="Canvas Network" href="https://canvas.net" />
         <AppNav.Item
           renderLabel={() => 'Canvas Community'}
           href="https://community.canvaslms.com/"
@@ -107,7 +194,6 @@ class AppNavExample extends React.Component {
       </AppNav>
     )
   }
-}
 
-render(<AppNavExample />)
-```
+  render(<AppNavExample />)
+  ```

package/src/Navigation/README.md

@@ -6,7 +6,7 @@ A top-level `Navigation` component.
 
 ```js
 ---
-embed: true
+type: embed
 ---
 <ToggleBlockquote
   summary="DEPRECATED"
@@ -19,7 +19,7 @@ embed: true
 
 ```js
 ---
-example: true
+type: example
 ---
   <div style={{height: '35rem'}}>
     <Navigation
@@ -71,7 +71,7 @@ example: true
 
 ```js
 ---
-guidelines: true
+type: embed
 ---
 <Guidelines>
   <Figure recommendation="yes" title="Do">