fix(NotificationsPanel): new date-time formatting function

[paul-balchin-ibm]

Closes #6761

Introduced new Carbon utilities dateTimeFormat() function, which follows official date and time and language guidance.

dateTimeFormat() and 2 new props replaces:

• 13 existing date/time props, which must be filled out by the app developer, for each supported language,
• bespoke code to support those 13 props.

What did you change?

packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx
packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.stories.jsx

Deleted bespoke code.

packages/ibm-products/src/components/NotificationsPanel/utils.js

Added @carbon/utilities.

packages/core/package.json

How did you test and verify your work?

• Storybook

[netlify]

✅ Deploy Preview for ibm-products-web-components ready!

Name	Link
🔨 Latest commit	21d8f37
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/67b6188c4d25ff0008e93386
😎 Deploy Preview	https://deploy-preview-6904--ibm-products-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	21d8f37
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/67b6188ccce76e0009b75f21
😎 Deploy Preview	https://deploy-preview-6904--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.70%. Comparing base (cdaceb2) to head (21d8f37).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6904      +/-   ##
==========================================
+ Coverage   81.56%   81.70%   +0.13%     
==========================================
  Files         403      402       -1     
  Lines       13050    12991      -59     
  Branches     4297     4267      -30     
==========================================
- Hits        10644    10614      -30     
+ Misses       2406     2377      -29     

Components	Coverage Δ
ibm-products	∅ <ø> (∅)
ibm-products-web-components	∅ <ø> (∅)

[elycheea]

Since this is being used by the actual NotificationsPanel component, we would need to move this into the packages/ibm-products/package.json.

However, re-reading the original issue, it looks like we actually intended for the user to use dateTimeFormat, which means we would probably want to use the utility in the data or story rather than in the component itself.

[elycheea]

I think our intention was to introduce a new timeAgoText prop and deprecating but not removing the existing props. Since we’re in a major version, we don’t want to remove functionality that could break for adopters when they update to the latest version. Deprecation first is the softer approach and allows us to direct adopters to the new recommended implementation.

You can see an example of how we’ve previously deprecated props here.

[paul-balchin-ibm]

Put into draft mode.

After further discussion, there are still open questions on how to deprecate the old props gracefully.

We can keep the old props, mark them as deprecated, and remove the timeAgo() function. The new, internal dateTimeFormat() will take over gracefully.

But, if the app developer was providing translations using the old props, these will now only render the default English, since the old functionality has been removed. For the app developer to specify other languages, they will need to know to use the new dateTimeLocale prop (i.e. 'en-US', 'fr_CA', etc).