Skip to content

Commit

Permalink
fix(coachmark): add "step-count" slot for custom/internationalized pa…
Browse files Browse the repository at this point in the history 
…gination content (#4215)

* chore(coachmark): added separator property

* chore(coachmark): updated tests

* chore(coachmark): updated golden image cache

* fix(coachmark): localized the step count

* chore(coachmark): updated golden image cache

* chore(coachmark): update readme and coachmark to default to english

* chore(coachmark): removed separator from the props

* chore(coachmark): updated to check for 1 of 4 stepcount context

* chore(coachmark): updated golden image cache

* chore(coachmark): added locallixation story for step count

* chore(coachmark): updated golden image cache

* chore(coachmark): update readme to include slot for docs site

---------

Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>
  • Loading branch information
@Rajdeepc
Rajdeepc and Rajdeep Chandra committed Apr 2, 2024
1 parent 50b2c22 commit f4136a6
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 44 deletions.
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Expand Up @@ -10,7 +10,7 @@ executors:
parameters:
current_golden_images_hash:
type: string
default: 862fed6296aa9e1a69e901ed053555705c92b320
default: fa04f9511c2ba8d512fa189d6e511f3c6c51d933
wireit_cache_name:
type: string
default: wireit
Expand Down
5 changes: 4 additions & 1 deletion packages/coachmark/src/Coachmark.ts
View file
Expand Up @@ -39,6 +39,7 @@ import '@spectrum-web-components/quick-actions/sp-quick-actions.js';
* @slot heading - HTML content to be listed as the heading
* @slot description - A description of the card
* @slot actions - an `sp-action-menu` element outlining actions to take on the represened object
* @slot step-count - Override the default pagination delivery with your own internationalized content
*/
export class Coachmark extends Popover {
public static override get styles(): CSSResultArray {
Expand Down Expand Up @@ -273,7 +274,9 @@ export class Coachmark extends Popover {
return html`
<div class="step" role="status">
<span aria-live="polite">
${this.currentStep} of ${this.totalSteps}
<slot name="step-count">
${this.currentStep} of ${this.totalSteps}
</slot>
</span>
</div>
`;
Expand Down
74 changes: 44 additions & 30 deletions packages/coachmark/stories/coachmark.stories.ts
View file
Expand Up @@ -37,10 +37,10 @@ type Properties = {
open?: boolean;
placement?: Placement;
id?: string;
heading: string;
heading?: string;
shortcutKey?: string;
modifierKeys?: string[];
content: string;
content?: string;
src?: string;
mediaType?: MediaType;
imageAlt?: string;
Expand Down Expand Up @@ -70,14 +70,16 @@ export const InTour = (
open = true,
heading = 'Coachmark in Tour',
content = 'This is a Coachmark with nothing but text in it.',
currentStep = 2,
totalSteps = 8,
} = props;
return html`
<sp-coachmark
?open=${open}
primary-cta="Next"
secondary-cta="Previous"
current-step="2"
total-steps="8"
current-step=${currentStep}
total-steps=${totalSteps}
.content=${{
title: heading,
description: content,
Expand All @@ -95,6 +97,7 @@ export const InTour = (
args.onSecondary?.(event);
}}
>
<div slot="step-count">${currentStep} of ${totalSteps}</div>
<sp-action-menu
placement="bottom-end"
quiet
Expand All @@ -121,7 +124,7 @@ export const single = (): TemplateResult => {
};

export const TriggerOnClick = (props: Properties): TemplateResult => {
const { open = true } = props;
const { open = true, currentStep = 1, totalSteps = 4 } = props;

return html`
<sp-coach-indicator id="trigger"></sp-coach-indicator>
Expand All @@ -133,32 +136,32 @@ export const TriggerOnClick = (props: Properties): TemplateResult => {
>
<sp-coachmark
?open=${open}
current-step="2"
total-steps="8"
primary-cta="Next"
secondary-cta="Previous"
current-step=${currentStep}
total-steps=${totalSteps}
primary-cta="次"
secondary-cta="前の"
>
<div slot="title">Coachmark on Click</div>
<div slot="title">クリック時のコーチマーク</div>
<div slot="content">
This is a Coachmark with nothing but text in it. Kind of
lonely in here.
これはテキストだけが入ったコーチマークです。ここはなんだか寂しいですね。
</div>
<div slot="step-count">4 分の 1</div>
<sp-action-menu
placement="bottom-end"
quiet
slot="actions"
label="More Actions"
>
<sp-menu-item>Skip tour</sp-menu-item>
<sp-menu-item>Restart tour</sp-menu-item>
<sp-menu-item>ツアーをスキップ</sp-menu-item>
<sp-menu-item>ツアー再開</sp-menu-item>
</sp-action-menu>
</sp-coachmark>
</sp-overlay>
`;
};

export const TriggerOnHover = (props: Properties): TemplateResult => {
const { open = true } = props;
const { open = true, currentStep = 2, totalSteps = 8 } = props;

return html`
<sp-coach-indicator id="trigger"></sp-coach-indicator>
Expand All @@ -170,8 +173,8 @@ export const TriggerOnHover = (props: Properties): TemplateResult => {
>
<sp-coachmark
?open=${open}
current-step="2"
total-steps="8"
current-step=${currentStep}
total-steps=${totalSteps}
primary-cta="Next"
secondary-cta="Previous"
>
Expand All @@ -180,6 +183,7 @@ export const TriggerOnHover = (props: Properties): TemplateResult => {
This is a Coachmark with nothing but text in it. Kind of
lonely in here.
</div>
<div slot="step-count">${currentStep} of ${totalSteps}</div>
<sp-action-menu
placement="bottom-end"
quiet
Expand All @@ -194,22 +198,24 @@ export const TriggerOnHover = (props: Properties): TemplateResult => {
`;
};

export const withImage = (): TemplateResult => {
export const withImage = (props: Properties): TemplateResult => {
const { open = true, currentStep = 2, totalSteps = 8 } = props;
return html`
<sp-coachmark
open
?open=${open}
src=${cave}
media-type="image"
primary-cta="Next"
secondary-cta="Previous"
current-step="2"
total-steps="8"
current-step=${currentStep}
total-steps=${totalSteps}
>
<div slot="title">Coachmark with Media</div>
<div slot="content">
This is a Coachmark with nothing but text in it. Kind of lonely
in here.
</div>
<div slot="step-count">${currentStep} of ${totalSteps}</div>
<sp-action-menu
placement="bottom-end"
quiet
Expand All @@ -223,22 +229,25 @@ export const withImage = (): TemplateResult => {
`;
};

export const withGif = (): TemplateResult => {
export const withGif = (props: Properties): TemplateResult => {
const { open = true, currentStep = 2, totalSteps = 8 } = props;

return html`
<sp-coachmark
open
?open=${open}
src=${gif}
media-type="image"
primary-cta="Next"
secondary-cta="Previous"
current-step="2"
total-steps="8"
current-step=${currentStep}
total-steps=${totalSteps}
>
<div slot="title">Coachmark with GIF</div>
<div slot="content">
This is a Coachmark with nothing but text in it. Kind of lonely
in here.
</div>
<div slot="step-count">${currentStep} of ${totalSteps}</div>
<sp-action-menu
placement="bottom-end"
quiet
Expand All @@ -261,6 +270,8 @@ export const withKeys = (props: Properties): TemplateResult => {
modifierKeys = ['⇧ Shift', '⌘'],
heading = 'Coachmark with Keys',
content = 'This is a Coachmark with nothing but text in it.',
currentStep = 2,
totalSteps = 8,
} = props;
return html`
<sp-coachmark
Expand All @@ -272,9 +283,10 @@ export const withKeys = (props: Properties): TemplateResult => {
}}
primary-cta="Next"
secondary-cta="Previous"
current-step="2"
total-steps="8"
current-step=${currentStep}
total-steps=${totalSteps}
>
<div slot="step-count">${currentStep} of ${totalSteps}</div>
<sp-action-menu
placement="bottom-end"
quiet
Expand All @@ -288,21 +300,23 @@ export const withKeys = (props: Properties): TemplateResult => {
`;
};

export const withShortCut = (): TemplateResult => {
export const withShortCut = (props: Properties): TemplateResult => {
const { currentStep = 2, totalSteps = 8 } = props;
return html`
<sp-coachmark
open
primary-cta="Next"
secondary-cta="Previous"
current-step="2"
total-steps="8"
current-step=${currentStep}
total-steps=${totalSteps}
shortcut-key="Z"
.content=${{
title: 'Coachmark Shortcut',
description:
'This is a Coachmark with nothing but text in it. Kind of lonely in here',
}}
>
<div slot="step-count">${currentStep} of ${totalSteps}</div>
<sp-action-menu
placement="bottom-end"
quiet
Expand Down
34 changes: 22 additions & 12 deletions packages/coachmark/test/coachmark.test.ts
View file
Expand Up @@ -81,7 +81,6 @@ describe('Coachmark', () => {
);
});
it('if in tour coachmark loads with pagination with previous, next buttons and action menu', async () => {
const stepText = '2 of 8';
const el = await fixture<Coachmark>(
InTour(
{
Expand All @@ -100,10 +99,10 @@ describe('Coachmark', () => {
'span[aria-live="polite"]'
);

expect((stepCount as HTMLElement).textContent).to.contain(
stepText,
'the slotted content renders in the element'
);
const stepCountSlot = el.querySelector(
'[slot="step-count"]'
) as HTMLSlotElement;
expect(stepCountSlot?.textContent?.trim()).to.equal('2 of 8');

expect(stepCount?.textContent);
const nextButton = el.shadowRoot.querySelector(
Expand All @@ -125,16 +124,17 @@ describe('Coachmark', () => {
open: true,
heading: 'Coachmark In Tour',
content: 'This is a Coachmark with nothing but text in it.',
currentStep: 2,
totalSteps: 8,
},
{}
)
);
await elementUpdated(el);
const content = el.shadowRoot.querySelector(
'.step span[aria-live="polite"]'
);

expect(content?.textContent?.trim()).to.equal('2 of 8');
const stepCountSlot = el.querySelector(
'[slot="step-count"]'
) as HTMLSlotElement;
expect(stepCountSlot?.textContent?.trim()).to.equal('2 of 8');

await expect(el).to.be.accessible();
});
Expand Down Expand Up @@ -166,7 +166,12 @@ describe('Coachmark', () => {
expect(joiner?.textContent?.trim()).to.include('+');
});
it('renders with shortcut', async () => {
const el = await fixture<Coachmark>(withShortCut());
const el = await fixture<Coachmark>(
withShortCut({
currentStep: 1,
totalSteps: 8,
})
);
await elementUpdated(el);

const shortcutKey = el.shadowRoot.querySelector(
Expand All @@ -176,7 +181,12 @@ describe('Coachmark', () => {
expect(shortcutKey?.textContent?.trim()).to.include('Z');
});
it('renders content with image asset', async () => {
const el = await fixture<Coachmark>(withImage());
const el = await fixture<Coachmark>(
withImage({
currentStep: 1,
totalSteps: 8,
})
);
await elementUpdated(el);
const imageElement = el.shadowRoot.querySelector(
'img[src="https://picsum.photos/id/237/200/300"'
Expand Down

0 comments on commit f4136a6

Please sign in to comment.