Description

Expected:
Images will render for the Content Block Cards section on Example Page C.

Actual:
Images are not rendering for Content Block Cards on Example Page C.

Component(s) impacted

Content Block Cards
https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/next/example-page-c/index.html

Content Block Cards and Card Link
https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/next/example-page-c/index.html

Browser

Chrome, Safari, Firefox, Microsoft Edge

Carbon for IBM.com version

v1.32.0-rc.1

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/next/

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/next/

Steps to reproduce the issue (if applicable)

1. Navigate to https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/next/ on any platform
2. Use the Table of Contents to navigate down to the Content Block Cards section
3. Observe that images are not rendering

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

Detailed description

Describe in detail the issue you're having.

Currently, all of the JS imports are defined in global.js, as the page level imports are not being generated and loaded in for some reason.

Is this a feature request (new component, new icon), a bug, or a general
issue?

Bug

Is this issue related to a specific component?

Webpack configuration (page level)

What did you expect to happen? What happened instead? What would you like to
see changed?

Each page can have their own import definitions rather than loaded globally

User Story

As a [user role below]:
Carbon for IBM.com tester

I need to:
See test pages built in Carbon for IBM.com web components

so that I can:
see how a test application is built using Carbon for IBM.com web components

Additional information

• Repo: https://github.com/carbon-design-system/carbon-for-ibm-dotcom-web-components-test/
• Environments:
  • Test: http://ibmdotcom-web-components-html-test.mybluemix.net/
  • RTL: http://ibmdotcom-web-components-html-rtl.mybluemix.net/
  • Staging: http://ibmdotcom-web-components-html-staging.mybluemix.net/
• NextJS test application: https://ibmdotcom-nextjs-test.mybluemix.net

Acceptance criteria

• Create Learn, Solutions, and Services test pages in web components test application

Update web component examples in all pages to the latest v2 versions.

https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/canary/

Pages

Beta Give feedback

1. Example page A #140
   +0
   
2. Example page B #141
   +0
   
3. Example page C #142
   +0
4. White theme example page #143
   +0
5. Gray 100 theme example page #144
   +0

Description

Expected:
Images will render for Content Block - With Media on the Cloud example page.

Actual:
Images not rendering for the Content Block - With Media section in the Cloud example page.

Component(s) impacted

Content Block - With Media
https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/next/cloud/index.html

Content Block - Segmented
https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/next/cloud/index.html

Card Section with Images
https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/next/cloud/index.html

Browser

Chrome, Safari, Firefox, Microsoft Edge

Carbon for IBM.com version

v1.32.0-rc.1

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/next/

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/next/

Steps to reproduce the issue (if applicable)

1. Navigate to https://carbon-design-system.github.io/carbon-for-ibm-dotcom-web-components-test/next/cloud/index.html
2. Use the Table of Contents to navigate to the Content Block - With Media section
3. Observe that images are not rendering

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• chore(deps): lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update yarn to v4.3.0

Detected dependencies

github-actions

.github/workflows/deploy-canary.yml

• actions/checkout v2
• actions/setup-node v2
• act10ns/slack v1
• actions/checkout v2
• actions/setup-node v2
• act10ns/slack v1
• ubuntu 20.04
• ubuntu 20.04

.github/workflows/deploy-next.yml

• actions/checkout v2
• actions/setup-node v2
• act10ns/slack v1
• ubuntu 20.04

.github/workflows/e2e-tests.yml

• actions/checkout v4
• actions/setup-node v4
• ubuntu 20.04

.github/workflows/percy-update-base.yml

• actions/setup-node v2
• actions/setup-node v2
• ubuntu 20.04
• ubuntu 20.04

npm

package.json

• @carbon/ibmdotcom-web-components ^2.10.0
• @carbon/styles ^1.55.0
• @carbon/web-components ^2.8.0
• @actions/core ^1.6.0
• @babel/core ^7.16.0
• @babel/preset-env ^7.16.0
• @commitlint/cli ^16.0.0
• @commitlint/config-conventional ^16.0.0
• @percy/cli ^1.0.0-beta.70
• @percy/cypress ^3.1.1
• @percy/dom ^1.0.0-beta.70
• autoprefixer ^9.8.8
• babel-loader ^8.2.3
• babel-preset-carbon ^0.0.14
• browser-sync ^2.26.3
• browser-sync-webpack-plugin ^2.2.2
• clean-webpack-plugin ^0.1.19
• commander ^6.1.0
• copy-webpack-plugin ^4.5.4
• css-loader ^6.8.1
• cypress ^9.0.0
• dotenv ^14.0.0
• eslint ^8.54.0
• eslint-config-carbon ^3.10.0
• fast-sass-loader ^2.0.1
• file-loader ^6.0.0
• handlebars 4.7.8
• handlebars-loader ^1.7.0
• html-webpack-plugin ^4.5.1
• http-server ^14.0.0
• husky ^7.0.0
• lint-staged ^15.1.0
• mini-css-extract-plugin ^0.12.0
• postcss-loader ^3.0.0
• prettier ^2.1.2
• process ^0.11.10
• rtlcss ^2.6.0
• sass ^1.69.5
• sass-loader ^13.3.2
• start-server-and-test ^1.12.6
• style-loader ^3.0.0
• terser-webpack-plugin ^4.1.0
• webpack ^5.89.0
• webpack-cli ^5.1.4
• webpack-dev-server ^4.15.1
• node >=18.x
• yarn 4.0.2

---

• Check this box to trigger a request for Renovate to run again on this repository

User Story

As a [user role below]:
Carbon for IBM.com developer

I need to:
update the component imports to use the simpler entry points

so that I can:
have a cleaner way of managing the imports for all of the test pages

Additional information

• The simpler entry points will be included as part of the Carbon for IBM.com v1.20.0 release
• Should start this work once v1.20.0 is released

Acceptance criteria

• Page imports updated to use the simpler entry points

Detailed description

Describe in detail the issue you're having.

http://ibmdotcom-web-components-html-test.mybluemix.net/learn/index.html has multiple rendering issues

What did you expect to happen? What happened instead? What would you like to
see changed?

Fix all rendering issues on the page

Steps to reproduce the issue

1. Go to http://ibmdotcom-web-components-html-test.mybluemix.net/learn/index.html