From f1b417266d569efe4860efb69bda8336441c7fbf Mon Sep 17 00:00:00 2001
From: Tamas Kovacs <tamas.kovacs@instructure.com>
Date: Thu, 5 Dec 2024 12:41:16 +0100
Subject: [PATCH] docs(ui-progress): add renderValue and
 formatScreenreaderValue to each example in ProgressBar

Closes: INSTUI-4283
---
 .../ui-progress/src/ProgressBar/README.md     | 122 ++++++++++++++++++
 1 file changed, 122 insertions(+)

diff --git a/packages/ui-progress/src/ProgressBar/README.md b/packages/ui-progress/src/ProgressBar/README.md
index 3a9dca4eb5..01f168ddac 100644
--- a/packages/ui-progress/src/ProgressBar/README.md
+++ b/packages/ui-progress/src/ProgressBar/README.md
@@ -18,6 +18,16 @@ type: example
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     size="small"
@@ -25,18 +35,48 @@ type: example
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     screenReaderLabel="Loading completion"
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     size="large"
     screenReaderLabel="Loading completion"
     valueNow={40}
     valueMax={60}
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
 </div>
 ```
@@ -56,6 +96,16 @@ type: example
     color="primary-inverse"
     valueNow={30}
     valueMax={60}
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
 </View>
 ```
@@ -75,6 +125,16 @@ type: example
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     screenReaderLabel="Loading completion"
@@ -82,6 +142,16 @@ type: example
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     screenReaderLabel="Loading completion"
@@ -89,6 +159,16 @@ type: example
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     screenReaderLabel="Loading completion"
@@ -96,6 +176,16 @@ type: example
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
   <ProgressBar
     screenReaderLabel="Loading completion"
@@ -103,6 +193,16 @@ type: example
     valueNow={40}
     valueMax={60}
     margin="0 0 small"
+    renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
   />
 </div>
 ```
@@ -128,6 +228,16 @@ type: example
   }}
   valueNow={10}
   valueMax={60}
+  renderValue={({ valueNow, valueMax }) => {
+    return (
+      <Text>
+        {Math.round(valueNow / valueMax * 100)}%
+      </Text>
+    )
+  }}
+  formatScreenReaderValue={({ valueNow, valueMax }) => {
+    return Math.round((valueNow / valueMax * 100)) + ' percent'
+  }}
 />
 ```
 
@@ -259,6 +369,12 @@ The `shouldAnimate` prop makes the progress bar animate the transition between v
             valueNow={this.state.value}
             valueMax={this.MAX}
             shouldAnimate={this.state.shouldAnimate}
+            renderValue={({ valueNow, valueMax }) => {
+              return <Text>{Math.round((valueNow / valueMax) * 100)}%</Text>
+            }}
+            formatScreenReaderValue={({ valueNow, valueMax }) => {
+              return Math.round((valueNow / valueMax) * 100) + ' percent'
+            }}
           />
         </div>
       )
@@ -346,6 +462,12 @@ The `shouldAnimate` prop makes the progress bar animate the transition between v
           valueNow={value}
           valueMax={MAX}
           shouldAnimate={shouldAnimate}
+          renderValue={({ valueNow, valueMax }) => {
+            return <Text>{Math.round((valueNow / valueMax) * 100)}%</Text>
+          }}
+          formatScreenReaderValue={({ valueNow, valueMax }) => {
+            return Math.round((valueNow / valueMax) * 100) + ' percent'
+          }}
         />
       </div>
     )