Skip to content
This repository was archived by the owner on Apr 25, 2025. It is now read-only.

Commit 60b3299

Browse files
agligaagliga
committed
fix(ccd): hide when min and max are not set
1 parent 6980584 commit 60b3299

File tree

5 files changed

+138
-26
lines changed

5 files changed

+138
-26
lines changed

‎.changeset/wise-ravens-wink.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/ebayui-core": minor
3+
---
4+
5+
fix(ccd): hide when min and max are not set

‎src/components/ebay-ccd/ccd.stories.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ export default {
1818
argTypes: {
1919
max: {
2020
control: { type: "text" },
21-
description: "The maximum range",
21+
description: "The maximum range. If min and max are both not set, then will not show the charger label.",
2222
},
2323
min: {
2424
control: { type: "text" },
25-
description: "The minimum range",
25+
description: "The minimum range. If min and max are both not set, then will not show the charger label.",
2626
},
2727
chargerIcon: {
2828
control: { type: "select" },
29-
options: [undefined, "included", "not-included"],
29+
options: ['none', "included", "not-included"],
3030
description:
3131
"Toggles the charger icon visible or if its included or not",
3232
table: {

‎src/components/ebay-ccd/index.marko‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,33 +27,40 @@ $ const {
2727
} = input;
2828
$ (input as any).toJSON = noop;
2929

30-
$ const hasFastCharging = secondaryType === "usbpd";
30+
$ {
31+
const hasFastCharging = secondaryType === "usbpd";
32+
const a11yCharger = `${
33+
chargerIcon
34+
? `Charger ${chargerIcon === "included" ? "" : "not "}included.`
35+
: ""
36+
} `.trim();
37+
const a11yFigure = min || max ? `${min} - ${max} ${a11yUnits}. ${hasFastCharging ? secondaryText : ""}` : ''.trim();
38+
const a11yCombined = `${a11yCharger} ${a11yFigure}`.trim();
39+
}
3140

3241
<div
3342
...processHtmlAttributes(htmlInput)
3443
role="figure"
3544
style=style
36-
aria-label=a11yText || `${
37-
chargerIcon
38-
? `Charger ${chargerIcon === "included" ? "" : "not "} included.`
39-
: ""
40-
} ${min} - ${max} ${a11yUnits}. ${hasFastCharging ? secondaryText : ""}`
41-
class=["ccd", inputClass]
45+
aria-label=a11yText || a11yCombined
46+
class=["ccd", inputClass]
4247
>
4348
<if(chargerIcon === "included")>
4449
<ebay-ccd-charger-included-icon class="ccd__charger-icon"/>
4550
</if>
4651
<else-if(chargerIcon === "not-included")>
4752
<ebay-ccd-charger-not-included-icon class="ccd__charger-icon"/>
4853
</else-if>
49-
<div class="ccd__description-figure">
50-
<ebay-ccd-top-icon class="ccd__top-icon"/>
51-
<div class="ccd__body">
52-
<div>${min} - ${max}</div>
53-
<div>${units}</div>
54-
<if(hasFastCharging)>
55-
<div>${secondaryText}</div>
56-
</if>
54+
<if (min || max)>
55+
<div class="ccd__description-figure">
56+
<ebay-ccd-top-icon class="ccd__top-icon"/>
57+
<div class="ccd__body">
58+
<div>${min} - ${max}</div>
59+
<div>${units}</div>
60+
<if(hasFastCharging)>
61+
<div>${secondaryText}</div>
62+
</if>
63+
</div>
5764
</div>
58-
</div>
65+
</if>
5966
</div>

‎src/components/ebay-ccd/test/__snapshots__/test.server.js.snap‎

Lines changed: 87 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`ccd > passes through additional html attributes 1`] = `
44
<div
5-
aria-label=" 1000 - 2000 watts. "
5+
aria-label="1000 - 2000 watts."
66
class="ccd class1"
77
data-passed-through="true"
88
data-testid="AttributePassthrough"
@@ -63,7 +63,7 @@ exports[`ccd > passes through additional html attributes 1`] = `
6363

6464
exports[`ccd > passes through additional html attributes 2`] = `
6565
<div
66-
aria-label=" 1000 - 2000 watts. "
66+
aria-label="1000 - 2000 watts."
6767
class="ccd class1"
6868
data-passed-through="true"
6969
data-testid="AttributePassthrough"
@@ -125,7 +125,7 @@ exports[`ccd > passes through additional html attributes 2`] = `
125125
exports[`ccd > renders ccd with charger included 1`] = `
126126
"<DocumentFragment>
127127
<div
128-
[33maria-label[39m=[32m"Charger included. 1000 - 2000 watts. "[39m
128+
[33maria-label[39m=[32m"Charger included. 1000 - 2000 watts."[39m
129129
class="ccd"
130130
role="figure"
131131
>
@@ -206,7 +206,7 @@ exports[`ccd > renders ccd with charger included 1`] = `
206206
exports[`ccd > renders ccd with charger included and usbpd 1`] = `
207207
"<DocumentFragment>
208208
<div
209-
[33maria-label[39m=[32m"Charger included. 1000 - 2000 watts. "[39m
209+
[33maria-label[39m=[32m"Charger included. 1000 - 2000 watts."[39m
210210
class="ccd"
211211
role="figure"
212212
secondary="usbpd"
@@ -288,7 +288,7 @@ exports[`ccd > renders ccd with charger included and usbpd 1`] = `
288288
exports[`ccd > renders ccd with charger not included 1`] = `
289289
"<DocumentFragment>
290290
<div
291-
[33maria-label[39m=[32m"Charger not included. 1000 - 2000 watts. "[39m
291+
[33maria-label[39m=[32m"Charger not included. 1000 - 2000 watts."[39m
292292
class="ccd"
293293
role="figure"
294294
>
@@ -451,7 +451,7 @@ exports[`ccd > renders ccd with custom a11y 1`] = `
451451
exports[`ccd > renders ccd with usbpd included 1`] = `
452452
"<DocumentFragment>
453453
<div
454-
[33maria-label[39m=[32m" 1000 - 2000 watts. "[39m
454+
[33maria-label[39m=[32m"1000 - 2000 watts."[39m
455455
class="ccd"
456456
role="figure"
457457
secondary="usbpd"
@@ -509,7 +509,7 @@ exports[`ccd > renders ccd with usbpd included 1`] = `
509509
exports[`ccd > renders default ccd 1`] = `
510510
"<DocumentFragment>
511511
<div
512-
[33maria-label[39m=[32m" 1000 - 2000 watts. "[39m
512+
[33maria-label[39m=[32m"1000 - 2000 watts."[39m
513513
class="ccd"
514514
role="figure"
515515
>
@@ -562,3 +562,83 @@ exports[`ccd > renders default ccd 1`] = `
562562
</div>
563563
</DocumentFragment>"
564564
`;
565+
566+
exports[`ccd > renders with no min and max 1`] = `
567+
"<DocumentFragment>
568+
<div
569+
aria-label=""
570+
class="ccd"
571+
role="figure"
572+
/>
573+
</DocumentFragment>"
574+
`;
575+
576+
exports[`ccd > renders with no min and max but with charger included 1`] = `
577+
"<DocumentFragment>
578+
<div
579+
aria-label="Charger included."
580+
class="ccd"
581+
role="figure"
582+
>
583+
<svg
584+
aria-hidden="true"
585+
class="ccd__charger-icon icon icon--ccd-charger-included"
586+
data-marko-key="@svg s0-0-1-0"
587+
focusable="false"
588+
>
589+
<defs
590+
data-marko-key="@defs s0-0-1-0"
591+
>
592+
<symbol
593+
id="icon-ccd-charger-included"
594+
viewBox="0 0 58 78"
595+
>
596+
<path
597+
clip-rule="evenodd"
598+
d="M0 0h58v78H0V0Zm1 1v76h56V1H1Zm7 28.75c0-.966.784-1.75 1.75-1.75H15V18h5V8h4v10h10V8h4v10h5v10h5.25c.967 0 1.75.784 1.75 1.75v38.5A1.75 1.75 0 0 1 48.25 70H9.75A1.75 1.75 0 0 1 8 68.25v-38.5ZM23 18V9h-2v9h2Zm14 0h-2V9h2v9Zm5 10v-9H16v9h26ZM9.75 29a.75.75 0 0 0-.75.75v38.5c0 .414.336.75.75.75h38.5a.75.75 0 0 0 .75-.75v-38.5a.75.75 0 0 0-.75-.75H9.75Z"
599+
fill-rule="evenodd"
600+
/>
601+
</symbol>
602+
</defs>
603+
<use
604+
href="#icon-ccd-charger-included"
605+
/>
606+
</svg>
607+
</div>
608+
</DocumentFragment>"
609+
`;
610+
611+
exports[`ccd > renders with no min and max but with no charger included 1`] = `
612+
"<DocumentFragment>
613+
<div
614+
aria-label="Charger not included."
615+
class="ccd"
616+
role="figure"
617+
>
618+
<svg
619+
aria-hidden="true"
620+
class="ccd__charger-icon icon icon--ccd-charger-not-included"
621+
data-marko-key="@svg s0-0-2-0"
622+
focusable="false"
623+
>
624+
<defs
625+
data-marko-key="@defs s0-0-2-0"
626+
>
627+
<symbol
628+
id="icon-ccd-charger-not-included"
629+
viewBox="0 0 58 78"
630+
>
631+
<path
632+
clip-rule="evenodd"
633+
d="M.5 0H0v78h58V0H.5ZM1 2.686V77h54.758l-5.914-8.026A1.75 1.75 0 0 1 48.25 70H9.75A1.75 1.75 0 0 1 8 68.25v-38.5c0-.966.784-1.75 1.75-1.75H15v-6.314l-14-19Zm15 20.357V28h3.653L16 23.043ZM22.137 28 16 19.671V19h26v9H22.137Zm-1.748 1H9.75a.75.75 0 0 0-.75.75v38.5c0 .414.336.75.75.75h38.5a.75.75 0 0 0 .75-.75v-.421L20.39 29ZM49 64.457 22.874 29H48.25a.75.75 0 0 1 .75.75v34.707Zm1 1.357V29.75A1.75 1.75 0 0 0 48.25 28H43V18h-5V8h-4v10H24V8h-4v10h-5v.314L2.242 1H57v74.314l-7-9.5ZM37 9v9h-2V9h2Zm-16 9h2V9h-2v9Z"
634+
fill-rule="evenodd"
635+
/>
636+
</symbol>
637+
</defs>
638+
<use
639+
href="#icon-ccd-charger-not-included"
640+
/>
641+
</svg>
642+
</div>
643+
</DocumentFragment>"
644+
`;

‎src/components/ebay-ccd/test/test.server.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,5 +38,25 @@ describe("ccd", () => {
3838
});
3939
});
4040

41+
it("renders with no min and max", async () => {
42+
await htmlSnap(Default, { min: null, max: null });
43+
});
44+
45+
it("renders with no min and max but with charger included", async () => {
46+
await htmlSnap(Default, {
47+
min: null,
48+
max: null,
49+
chargerIcon: "included",
50+
});
51+
});
52+
53+
it("renders with no min and max but with no charger included", async () => {
54+
await htmlSnap(Default, {
55+
min: null,
56+
max: null,
57+
chargerIcon: "not-included",
58+
});
59+
});
60+
4161
testPassThroughAttributes(Default);
4262
});

0 commit comments

Comments
 (0)