@instructure/ui-alerts 8.50.1-snapshot-2 → 8.50.1-snapshot-14

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-2](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.50.1-snapshot-2) (2023-12-06)
+## [8.50.1-snapshot-14](https://github.com/instructure/instructure-ui/compare/v8.50.0...v8.50.1-snapshot-14) (2023-12-08)
 
 **Note:** Version bump only for package @instructure/ui-alerts
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-alerts",
-  "version": "8.50.1-snapshot-2",
+  "version": "8.50.1-snapshot-14",
   "description": "An alert component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,24 +23,24 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.50.1-snapshot-2",
-    "@instructure/ui-color-utils": "8.50.1-snapshot-2",
-    "@instructure/ui-test-utils": "8.50.1-snapshot-2"
+    "@instructure/ui-babel-preset": "8.50.1-snapshot-14",
+    "@instructure/ui-color-utils": "8.50.1-snapshot-14",
+    "@instructure/ui-test-utils": "8.50.1-snapshot-14"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.50.1-snapshot-2",
-    "@instructure/emotion": "8.50.1-snapshot-2",
-    "@instructure/shared-types": "8.50.1-snapshot-2",
-    "@instructure/ui-a11y-content": "8.50.1-snapshot-2",
-    "@instructure/ui-buttons": "8.50.1-snapshot-2",
-    "@instructure/ui-icons": "8.50.1-snapshot-2",
-    "@instructure/ui-motion": "8.50.1-snapshot-2",
-    "@instructure/ui-react-utils": "8.50.1-snapshot-2",
-    "@instructure/ui-themes": "8.50.1-snapshot-2",
-    "@instructure/ui-utils": "8.50.1-snapshot-2",
-    "@instructure/ui-view": "8.50.1-snapshot-2",
-    "@instructure/uid": "8.50.1-snapshot-2",
+    "@instructure/console": "8.50.1-snapshot-14",
+    "@instructure/emotion": "8.50.1-snapshot-14",
+    "@instructure/shared-types": "8.50.1-snapshot-14",
+    "@instructure/ui-a11y-content": "8.50.1-snapshot-14",
+    "@instructure/ui-buttons": "8.50.1-snapshot-14",
+    "@instructure/ui-icons": "8.50.1-snapshot-14",
+    "@instructure/ui-motion": "8.50.1-snapshot-14",
+    "@instructure/ui-react-utils": "8.50.1-snapshot-14",
+    "@instructure/ui-themes": "8.50.1-snapshot-14",
+    "@instructure/ui-utils": "8.50.1-snapshot-14",
+    "@instructure/ui-view": "8.50.1-snapshot-14",
+    "@instructure/uid": "8.50.1-snapshot-14",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },

package/src/Alert/README.md

@@ -12,7 +12,7 @@ space above or below the alert.
 
 ```js
 ---
-example: true
+type: example
 ---
 <div>
   <Alert
@@ -53,7 +53,7 @@ The `timeout` prop can be used to automatically dismiss an alert after a time.
 
 ```js
 ---
-example: true
+type: example
 ---
 <Alert
   variant="info"
@@ -76,132 +76,210 @@ ensure that element has the correct ARIA attributes.
 For more information about live regions, see
 [this MDN article](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).
 
-```js
----
-example: true
-render: false
----
-class Example extends React.Component {
-  constructor (props) {
-    super(props)
+- ```js
+  class Example extends React.Component {
+    constructor(props) {
+      super(props)
 
-    this.state = {
-      alerts: []
+      this.state = {
+        alerts: []
+      }
+
+      this.i = 0
+      this.variants = ['info', 'success', 'warning', 'error']
+      this.politeness = ['polite', 'assertive']
     }
 
-    this.i = 0
-    this.variants = ['info', 'success', 'warning', 'error']
-    this.politeness = ['polite', 'assertive']
-  }
+    addAlert() {
+      const variant = this.variants[this.i++ % this.variants.length]
+      const politeness = Math.random() < 0.5 ? 'polite' : 'assertive'
+      const alerts = [...this.state.alerts]
+      const key = new Number(this.i)
+      alerts.push({
+        key,
+        variant,
+        politeness,
+        onDismiss: () => this.closeAlert(key)
+      })
+      this.setState({ alerts })
+    }
 
-  addAlert () {
-    const variant = this.variants[this.i++ % this.variants.length]
-    const politeness = Math.random() < 0.5 ? 'polite' : 'assertive'
-    const alerts = [...this.state.alerts]
-    const key = new Number(this.i)
-    alerts.push({
-      key,
-      variant,
-      politeness,
-      onDismiss: () => this.closeAlert(key)
-    })
-    this.setState({ alerts })
-  }
+    closeAlert(key) {
+      const alerts = this.state.alerts.filter((alert) => {
+        return alert.key !== key
+      })
+      this.setState({ alerts })
+    }
 
-  closeAlert (key) {
-    const alerts = this.state.alerts.filter((alert) => {
-      return alert.key !== key
-    })
-    this.setState({ alerts })
+    render() {
+      return (
+        <div>
+          <Button onClick={this.addAlert.bind(this)}>Add Alert</Button>
+          {this.state.alerts.map((alert) => {
+            return (
+              <View key={alert.key} display="block" margin="small 0">
+                <Alert
+                  variant={alert.variant}
+                  renderCloseButtonLabel="Close"
+                  onDismiss={alert.onDismiss}
+                  liveRegion={() => document.getElementById('flash-messages')}
+                  liveRegionPoliteness={alert.politeness}
+                  margin="small 0"
+                >
+                  This is {alert.politeness === 'polite' ? 'a' : 'an'}{' '}
+                  {alert.politeness} {alert.variant} alert
+                </Alert>
+              </View>
+            )
+          })}
+        </div>
+      )
+    }
   }
 
-  render () {
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [alerts, setAlerts] = useState([])
+    const [count, setcount] = useState(0)
+
+    const variants = ['info', 'success', 'warning', 'error']
+
+    const addAlert = () => {
+      const variant = variants[count % variants.length]
+      const politeness = Math.random() < 0.5 ? 'polite' : 'assertive'
+      setAlerts([
+        ...alerts,
+        {
+          key: count,
+          variant,
+          politeness
+        }
+      ])
+      setcount(count + 1)
+    }
+
+    const closeAlert = (key) =>
+      setAlerts(alerts.filter((alert) => alert.key !== key))
+
     return (
       <div>
-        <Button onClick={this.addAlert.bind(this)}>Add Alert</Button>
-        {this.state.alerts.map((alert) => {
+        <Button onClick={addAlert}>Add Alert</Button>
+        {alerts.map((alert) => {
           return (
-            <View
-              key={alert.key}
-              display="block"
-              margin="small 0"
-            >
+            <View key={alert.key} display="block" margin="small 0">
               <Alert
                 variant={alert.variant}
                 renderCloseButtonLabel="Close"
-                onDismiss={alert.onDismiss}
+                onDismiss={() => closeAlert(alert.key)}
                 liveRegion={() => document.getElementById('flash-messages')}
                 liveRegionPoliteness={alert.politeness}
                 margin="small 0"
               >
-                This is {alert.politeness === 'polite' ? 'a' : 'an'} {alert.politeness} {alert.variant} alert
+                This is {alert.politeness === 'polite' ? 'a' : 'an'}{' '}
+                {alert.politeness} {alert.variant} alert
               </Alert>
             </View>
           )
         })}
       </div>
-    );
+    )
   }
-}
 
-render(<Example />)
-```
+  render(<Example />)
+  ```
 
 Alerts can be used to emit screenreader only messages too
 
-```js
----
-example: true
-render: false
----
-class Example extends React.Component {
-  constructor (props) {
-    super(props)
+- ```js
+  class Example extends React.Component {
+    constructor(props) {
+      super(props)
 
-    this.state = {
-      message: null,
-      count: 1
+      this.state = {
+        message: null,
+        count: 1
+      }
     }
-  }
 
-  changeMessage = () => {
-    this.setState({
-      message: `this is message ${this.state.count}`,
-      count: this.state.count + 1
+    changeMessage = () => {
+      this.setState({
+        message: `this is message ${this.state.count}`,
+        count: this.state.count + 1
       })
-  }
+    }
 
-  clearMessage  =() => {
-    this.setState({
-      message: null,
-      count: this.state.count + 1})
+    clearMessage = () => {
+      this.setState({
+        message: null,
+        count: this.state.count + 1
+      })
+    }
+
+    render() {
+      return (
+        <div>
+          <Button onClick={this.changeMessage}>Change Message</Button>
+          <Button onClick={this.clearMessage} margin="0 0 0 small">
+            Clear Message
+          </Button>
+          <Alert
+            liveRegion={() => document.getElementById('flash-messages')}
+            isLiveRegionAtomic
+            screenReaderOnly
+          >
+            {this.state.message}
+          </Alert>
+        </div>
+      )
+    }
   }
 
-  render () {
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [message, setMessage] = useState(null)
+    const [count, setCount] = useState(1)
+
+    const changeMessage = () => {
+      setMessage(`this is message ${count}`)
+      setCount(count + 1)
+    }
+
+    const clearMessage = () => {
+      setMessage(null)
+      setCount(count + 1)
+    }
+
     return (
       <div>
-        <Button onClick={this.changeMessage}>Change Message</Button>
-        <Button onClick={this.clearMessage} margin="0 0 0 small">Clear Message</Button>
+        <Button onClick={changeMessage}>Change Message</Button>
+        <Button onClick={clearMessage} margin="0 0 0 small">
+          Clear Message
+        </Button>
         <Alert
           liveRegion={() => document.getElementById('flash-messages')}
           isLiveRegionAtomic
           screenReaderOnly
-         >
-            {this.state.message}
+        >
+          {message}
         </Alert>
       </div>
-    );
+    )
   }
-}
 
-render(<Example />)
-```
+  render(<Example />)
+  ```
 
 When Alerts are used inline, the shadow can be removed with the `hasShadow` property.
 
 ```js
 ---
-example: true
+type: example
 ---
 <View as="div" background="primary" padding="large">
   <View
@@ -239,7 +317,7 @@ example: true
 
 ```js
 ---
-guidelines: true
+type: embed
 ---
 <Guidelines>
   <Figure recommendation="yes" title="Do">
@@ -257,7 +335,7 @@ guidelines: true
 
 ```js
 ---
-guidelines: true
+type: embed
 ---
 <Guidelines>
   <Figure recommendation="a11y" title="Accessibility">