Update examples 11047934471

.github/workflows/update-example-gallery.yml

@@ -1,5 +1,8 @@
 name: Update example gallery # Updates examples twice a month
 
+env:
+  BRANCH_NAME: update-examples-${{ github.run_id }}
+
 on:
   workflow_dispatch:
   schedule:
@@ -42,17 +45,29 @@ jobs:
             exit 0
           fi
 
+      - name: Commit the changes
+        if: failure() && steps.up_to_date.outcome == 'failure'
+        id: commit_changes
+        run: |
+          git config --global user.email ${{ secrets.CARBON_BOT_EMAIL }}
+          git config --global user.name ${{ secrets.CARBON_BOT_NAME }}
+          git checkout -b ${{ env.BRANCH_NAME }}
+          git add .
+          git commit -m "chore: update examples gallery"
+          git push --set-upstream origin ${{ env.BRANCH_NAME }}
+
       - name: Create pull request
-        if: steps.up_to_date.outcome == 'failure'
+        if: failure() && steps.up_to_date.outcome == 'failure'
         id: create-pr
         uses: peter-evans/create-pull-request@v4
         with:
           token: ${{ secrets.CREATE_PR_ACCESS_TOKEN }}
           commit-message: 'chore: update example gallery'
           committer: GitHub <[email protected]>
           author:
-            ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
-          branch: 'update-examples'
+            ${{ secrets.CARBON_BOT_NAME }} ${{ secrets.CARBON_BOT_EMAIL }}
+          branch: ${{ env.BRANCH_NAME }}
+          # branch: 'update-examples'
           branch-suffix: random
           title: 'chore: update example gallery'
           body: |

README.md

@@ -1,7 +1,7 @@
 # Carbon for IBM Products
 
 > Carbon for IBM Products is an open source implementation of the closed source
-> [IBM Software pattern asset library (PAL)](https://pages.github.ibm.com/cdai-design/pal/).
+> [IBM Software pattern asset library (PAL)](https://pages.github.ibm.com/carbon/ibm-products/).
 > These PAL designs build on the foundation of IBM’s open source Carbon Design
 > System and React implementation to offer components and patterns beyond the
 > typical component library. Carbon for IBM Products was previously known as

docs/guides/VARIANT_COMPONENT_GUIDELINES.md

@@ -1,7 +1,7 @@
 # Variant Component Guidelines
 
 If you are creating a component with variant or themed modes such as the
-[Card](https://pages.github.ibm.com/cdai-design/pal/components/card/overview)
+[Card](https://pages.github.ibm.com/carbon/ibm-products/components/card/overview)
 you'll want to follow these guidelines. Please note that this pattern may not be
 applicable for every scenario, so please use your best judgment.
 

e2e/components/AboutModal/AboutModal-test.avt.e2e.js

@@ -54,4 +54,71 @@ test.describe('AboutModal @avt', () => {
 
     await expect(closeButton).toBeFocused();
   });
+
+  test('@avt-open-close-with-focus-trap', async ({ page }) => {
+    await visitStory(page, {
+      component: 'AboutModal',
+      id: 'ibm-products-components-about-modal-aboutmodal--about-modal-with-all-props-set',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+
+    const modalElement = page.locator(`.${carbon.prefix}--modal`);
+    const openButton = page.getByText(
+      'Open the About modal with all props set'
+    );
+    const closeIcon = page.getByLabel('Close');
+    const linkActions = page.getByText('Link action');
+
+    // Focus the open button
+    await page.keyboard.press('Tab');
+    // Expect open button to be focused
+    await expect(openButton).toBeFocused();
+    // Open modal by pressing 'Enter' key
+    await page.keyboard.press('Enter');
+
+    // Opening modal
+    await modalElement.evaluate((element) =>
+      Promise.all(
+        element.getAnimations().map((animation) => animation.finished)
+      )
+    );
+
+    await expect(page).toHaveNoACViolations(
+      'AboutModal @avt-open-close-with-focus-trap'
+    );
+
+    // Initial focus should be on close button
+    await expect(closeIcon).toBeFocused();
+    // Press tab to move focus to first link element
+    await page.keyboard.press('Tab');
+    await expect(linkActions.first()).toBeFocused();
+
+    // Press tab to move focus to second link element
+    await page.keyboard.press('Tab');
+    await expect(linkActions.nth(1)).toBeFocused();
+
+    // Press tab to move focus to last link element
+    await page.keyboard.press('Tab');
+    await expect(linkActions.last()).toBeFocused();
+
+    // Press tab to move focus back to close button
+    await page.keyboard.press('Tab');
+    await expect(closeIcon).toBeFocused();
+
+    // Press escape to twise
+    // first to close tooltip then close modal
+    await page.keyboard.press('Escape');
+    await page.keyboard.press('Escape');
+
+    // Opening modal
+    await modalElement.evaluate((element) =>
+      Promise.all(
+        element.getAnimations().map((animation) => animation.finished)
+      )
+    );
+
+    await expect(modalElement).toHaveAttribute('aria-hidden', 'true');
+  });
 });

examples/carbon-for-ibm-products/APIKeyModal/index.html

@@ -1,3 +1,12 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020, 2024
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
 <!DOCTYPE html>
 <html lang="en">
 

examples/carbon-for-ibm-products/APIKeyModal/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@carbon/ibm-products": "^2.21.0",
-    "@carbon/react": "^1.51.1",
+    "@carbon/react": "^1.60.3",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/ThemeContext.jsx

@@ -1,6 +1,14 @@
 import React, { createContext, useReducer } from 'react';
 
 export const themeData = [
+  {
+    text: 'System W/90',
+    value: 'carbon-theme--user-preference-white-90',
+  },
+  {
+    text: 'System 10/100',
+    value: 'carbon-theme--user-preference-10-100',
+  },
   {
     text: 'White',
     value: 'carbon-theme--white',
@@ -22,17 +30,16 @@ export const themeData = [
 export const ThemeContext = createContext();
 
 const initialState = {
-  currentTheme: themeData[0],
+  currentTheme: themeData[1],
 };
 
 const themeReducer = (state, action) => {
   switch (action.type.value) {
+    case 'carbon-theme--user-preference-white-90':
+    case 'carbon-theme--user-preference-10-100':
     case 'carbon-theme--white':
-      return { currentTheme: action.type };
     case 'carbon-theme--g10':
-      return { currentTheme: action.type };
     case 'carbon-theme--g90':
-      return { currentTheme: action.type };
     case 'carbon-theme--g100':
       return { currentTheme: action.type };
     default:

examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/_theme-dropdown.scss

@@ -1,8 +1,45 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/config';
 
+// Best to stick with user preference - DARK
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include theme(themes.$g100, true); // dark default
+  }
+
+  .carbon-theme--user-preference-10-100 {
+    @include theme(themes.$g100, true);
+  }
+
+  .carbon-theme--user-preference-white-90 {
+    @include theme(themes.$g90, true);
+  }
+}
+
+// Best to stick with user preference - LIGHT
+@media (prefers-color-scheme: light) {
+  :root {
+    @include theme(themes.$white, true); // light default
+  }
+
+  .carbon-theme--user-preference-10-100 {
+    @include theme(themes.$g10, true);
+  }
+
+  .carbon-theme--user-preference-white-90 {
+    @include theme(themes.$white, true);
+  }
+}
+
 .carbon-theme--white {
   @include theme(themes.$white, true);
 }

examples/carbon-for-ibm-products/APIKeyModal/src/index.scss

@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 @use '@carbon/react' with (
   $font-path: '@ibm/plex'
 );

examples/carbon-for-ibm-products/APIKeyModal/vite.config.js

@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 

examples/carbon-for-ibm-products/AboutModal/index.html

@@ -1,3 +1,12 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020, 2024
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
 <!DOCTYPE html>
 <html lang="en">
 

examples/carbon-for-ibm-products/AboutModal/package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@carbon/ibm-products": "^2.21.0",
-    "@carbon/react": "^1.51.1",
+    "@carbon/react": "^1.60.3",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/ThemeContext.jsx

@@ -1,6 +1,14 @@
 import React, { createContext, useReducer } from 'react';
 
 export const themeData = [
+  {
+    text: 'System W/90',
+    value: 'carbon-theme--user-preference-white-90',
+  },
+  {
+    text: 'System 10/100',
+    value: 'carbon-theme--user-preference-10-100',
+  },
   {
     text: 'White',
     value: 'carbon-theme--white',
@@ -22,17 +30,16 @@ export const themeData = [
 export const ThemeContext = createContext();
 
 const initialState = {
-  currentTheme: themeData[0],
+  currentTheme: themeData[1],
 };
 
 const themeReducer = (state, action) => {
   switch (action.type.value) {
+    case 'carbon-theme--user-preference-white-90':
+    case 'carbon-theme--user-preference-10-100':
     case 'carbon-theme--white':
-      return { currentTheme: action.type };
     case 'carbon-theme--g10':
-      return { currentTheme: action.type };
     case 'carbon-theme--g90':
-      return { currentTheme: action.type };
     case 'carbon-theme--g100':
       return { currentTheme: action.type };
     default:

examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/_theme-dropdown.scss

@@ -1,8 +1,45 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/config';
 
+// Best to stick with user preference - DARK
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include theme(themes.$g100, true); // dark default
+  }
+
+  .carbon-theme--user-preference-10-100 {
+    @include theme(themes.$g100, true);
+  }
+
+  .carbon-theme--user-preference-white-90 {
+    @include theme(themes.$g90, true);
+  }
+}
+
+// Best to stick with user preference - LIGHT
+@media (prefers-color-scheme: light) {
+  :root {
+    @include theme(themes.$white, true); // light default
+  }
+
+  .carbon-theme--user-preference-10-100 {
+    @include theme(themes.$g10, true);
+  }
+
+  .carbon-theme--user-preference-white-90 {
+    @include theme(themes.$white, true);
+  }
+}
+
 .carbon-theme--white {
   @include theme(themes.$white, true);
 }

examples/carbon-for-ibm-products/AboutModal/src/index.scss

@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 @use '@carbon/react' with (
   $font-path: '@ibm/plex'
 );

examples/carbon-for-ibm-products/AboutModal/vite.config.js

@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 

examples/carbon-for-ibm-products/BigNumbers/index.html

@@ -1,3 +1,12 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020, 2024
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
 <!DOCTYPE html>
 <html lang="en">