fix(coachmark): add "step-count" slot for custom/internationalized pagination content

[Rajdeepc]

Description

This PR adds the ability for users to customize the separator between the current step and the total steps in the YourComponent component. By default, the separator is 'of', but users can now specify a custom separator using the separator attribute.

Changes Made

Added a new separator property to the YourComponent component to allow customization of the separator.
Updated the component's template to use the separator property for the separator between the current step and the total steps.

Related issue(s)

• [Feat]: Add localization to "1 of 8" step indicator in coachmark #4213

Motivation and context

How has this been tested?

• Test case 1
  1. Go here
  2. Use the separator attribute to specify a custom separator.
  3. Verify that the component renders with the custom separator between the current step and the total steps.
• Test case 2
  1. Go here
  2. Do this

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[github-actions]

Branch preview

• Documentation Site
• Storybook

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• High Contrast Mode | Medium | LTR
• Classic | Lightest | Medium | LTR
• Classic | Lightest | Medium | RTL
• Classic | Lightest | Large | LTR
• Classic | Lightest | Large | RTL
• Classic | Light | Medium | LTR
• Classic | Light | Medium | RTL
• Classic | Light | Large | LTR
• Classic | Light | Large | RTL
• Classic | Dark | Medium | LTR
• Classic | Dark | Medium | RTL
• Classic | Dark | Large | LTR
• Classic | Dark | Large | RTL
• Classic | Darkest | Medium | LTR
• Classic | Darkest | Medium | RTL
• Classic | Darkest | Large | LTR
• Classic | Darkest | Large | RTL
• Express | Lightest | Medium | LTR
• Express | Lightest | Medium | RTL
• Express | Lightest | Large | LTR
• Express | Lightest | Large | RTL
• Express | Light | Medium | LTR
• Express | Light | Medium | RTL
• Express | Light | Large | LTR
• Express | Light | Large | RTL
• Express | Dark | Medium | LTR
• Express | Dark | Medium | RTL
• Express | Dark | Large | LTR
• Express | Dark | Large | RTL
• Express | Darkest | Medium | LTR
• Express | Darkest | Medium | RTL
• Express | Darkest | Large | LTR
• Express | Darkest | Large | RTL

[github-actions]

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.93	0.98	0.98
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	228.512 kB	217.371 kB 🏆	217.46 kB
Scripts	60.393 kB	54.42 kB 🏆	54.524 kB
Stylesheet	35.524 kB	30.924 kB	30.914 kB 🏆
Document	5.883 kB	5.255 kB	5.25 kB 🏆
Third Party	126.712 kB 🏆	126.772 kB	126.772 kB

Request Count

Category	Latest	Main	Branch
Total	43	43	43
Scripts	35	35	35
Stylesheet	5	5	5
Document	1	1	1
Third Party	2	2	2

[github-actions]

Tachometer results

Chrome

coachmark permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	626 kB	127.46ms - 130.68ms	-	unsure 🔍 -2% - +2% -2.24ms - +2.13ms
branch	617 kB	127.64ms - 130.60ms	unsure 🔍 -2% - +2% -2.13ms - +2.24ms	-

Firefox

coachmark permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	626 kB	356.76ms - 364.52ms	-	unsure 🔍 -2% - +1% -5.77ms - +4.85ms
branch	617 kB	357.47ms - 364.73ms	unsure 🔍 -1% - +2% -4.85ms - +5.77ms	-

[Westbrook]

Can you sync with the internationalization team to confirm that this works across the actual usage of our target languages? Naively, I've seeing 1 of 4 translate to 4 件中 1 件 in Japanese which I'm not sure how this API covers. Even a greatly simplified ４分の１ which might benefit from this change requires a content order change that I'm not sure a good path to managing here.

[Rajdeepc]

Can you sync with the internationalization team to confirm that this works across the actual usage of our target languages? Naively, I've seeing 1 of 4 translate to 4 件中 1 件 in Japanese which I'm not sure how this API covers. Even a greatly simplified ４分の１ which might benefit from this change requires a content order change that I'm not sure a good path to managing here.

Based on the feedback from the Internationalisation team, we'll need to update our component to allow users to provide the entire string for the step count dynamically using a slot.

protected renderSteps = (): TemplateResult => {
   return html`
       <div class="step" role="status">
           <span aria-live="polite">
               <slot name="step-count"></slot>
           </span>
       </div>
   `;
};

[Westbrook]

I'd like one of the stories to deliver a previously unachievable page count text to ensure that we can continue to achieve it over time.

[Rajdeepc]

@Westbrook Let me know if we are good to land this or do you see any additional work that needs to be done here?

[Westbrook]

I'd like one of the stories to deliver a previously unachievable page count text to ensure that we can continue to achieve it over time.

Can we see this in a story that surfaces to VRT to ensure we're covered over time? Something like ４分の１ or other.

[Westbrook]

LGTM! 🎆

[Westbrook]

Sorry, I missed one thing that I can't place inline...

Can you add:

 * @slot step-count - Override the default pagination delivery with your own internationalized content

At or around line 40 so that it gets into the docs site.

[Westbrook]

but, like, for real this time 😉