Bump @canva/app-ui-kit to version 4.4.0

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2024-11-28
+
+### 🔧 Changed
+
+- Upgraded `@canva/app-ui-kit` to version `4.4.0` Please see the [changelog](https://www.canva.dev/docs/apps/app-ui-kit/changelog/) for the list of changes.
+- Upgraded `@canva/app-i18n-kit` to version `1.0.1`
+- Upgraded `react-intl` to version `6.8.7`
+
 ## 2024-11-13
 
 ### 🧰 Added

examples/i18n/app.tsx

@@ -90,9 +90,9 @@ export const App = ({
           />
         </Text>
         {/* ==================== Plurals ==================== */}
-        <TokenCount used={0} total={25} />
-        <TokenCount used={1} total={25} />
-        <TokenCount used={25} total={25} />
+        <CreditUsage creditsCost={5} remainingCredits={50} />
+        <CreditUsage creditsCost={1} remainingCredits={1} />
+        <CreditUsage creditsCost={1} remainingCredits={0} />
         {/* ==================== Rich Text ==================== */}
         <FormattedMessage
           defaultMessage="Discover stunning AI-generated example images in our <link>gallery</link> and <callToAction>start exploring now!</callToAction>"
@@ -153,23 +153,23 @@ export const App = ({
   );
 };
 
-export const TokenCount = ({
-  used,
-  total,
+export const CreditUsage = ({
+  creditsCost,
+  remainingCredits,
 }: {
-  used: number;
-  total: number;
+  creditsCost: number;
+  remainingCredits: number;
 }) => (
   <Text>
     <FormattedMessage
-      defaultMessage={`You've used {usedTokens, number} {usedTokens, plural,
-      one {token}
-      other {tokens}
-    } out of {totalTokens, number}.`}
-      description="Message that tells the user how many tokens they have used out of the total available"
+      defaultMessage={`Use {creditsCost, number} of {remainingCredits, plural,
+        one {# credit}
+        other {# credits}
+      }`}
+      description="Informs the user about the number of credits they will use for the image generation task. Appears below the image generation button."
       values={{
-        usedTokens: used,
-        totalTokens: total,
+        creditsCost,
+        remainingCredits,
       }}
     />
   </Text>

examples/i18n/tests/__snapshots__/app.tests.tsx.snap

@@ -5,7 +5,7 @@ exports[`app Renders token counts consistently 🎉 1`] = `
   <p
     class="fFOiLQ _5Ob_nQ fM_HdA"
   >
-    You've used 0 tokens out of 25.
+    Use 5 of 50 credits
   </p>
 </div>
 `;
@@ -15,7 +15,7 @@ exports[`app Renders token counts consistently 🎉 2`] = `
   <p
     class="fFOiLQ _5Ob_nQ fM_HdA"
   >
-    You've used 1 token out of 25.
+    Use 1 of 1 credit
   </p>
 </div>
 `;
@@ -25,7 +25,7 @@ exports[`app Renders token counts consistently 🎉 3`] = `
   <p
     class="fFOiLQ _5Ob_nQ fM_HdA"
   >
-    You've used 10 tokens out of 25.
+    Use 1 of 0 credits
   </p>
 </div>
 `;

examples/i18n/tests/app.tests.tsx

@@ -2,7 +2,7 @@ import type { RenderResult } from "@testing-library/react";
 import { fireEvent, render } from "@testing-library/react";
 import { TestAppUiProvider } from "@canva/app-ui-kit";
 import { TestAppI18nProvider } from "@canva/app-i18n-kit";
-import { App, TokenCount } from "../app";
+import { App, CreditUsage } from "../app";
 
 function renderInTestProvider(node: React.ReactNode): RenderResult {
   return render(
@@ -49,18 +49,18 @@ describe("app", () => {
 
   it("Renders token counts consistently 🎉", () => {
     const resultToken0 = renderInTestProvider(
-      <TokenCount used={0} total={25} />,
+      <CreditUsage creditsCost={5} remainingCredits={50} />,
     );
     // The snapshot test can be used to detect unexpected changes in the rendered output.
     expect(resultToken0.container).toMatchSnapshot();
 
     const resultToken1 = renderInTestProvider(
-      <TokenCount used={1} total={25} />,
+      <CreditUsage creditsCost={1} remainingCredits={1} />,
     );
     expect(resultToken1.container).toMatchSnapshot();
 
     const resultToken10 = renderInTestProvider(
-      <TokenCount used={10} total={25} />,
+      <CreditUsage creditsCost={1} remainingCredits={0} />,
     );
     expect(resultToken10.container).toMatchSnapshot();
   });