Skip to content

Commit c2a827b

Browse files
jenndiazjenndiaz
committed
chore(meter): refactor to separate template
1 parent 835e0ca commit c2a827b

File tree

4 files changed

+159
-56
lines changed

4 files changed

+159
-56
lines changed

‎components/progressbar/stories/meter.stories.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
// Import the component markup template
2+
import { Template } from "./metertemplate";
3+
4+
export default {
5+
title: "Components/Meter",
6+
description:
7+
"The meter component is a visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.",
8+
component: "ProgressBar",
9+
argTypes: {
10+
labelPosition: {
11+
name: "Label Position",
12+
type: { name: "string" },
13+
table: {
14+
type: { summary: "string" },
15+
category: "Component",
16+
},
17+
options: ["top", "side"],
18+
control: "select",
19+
},
20+
label: {
21+
name: "Label",
22+
type: { name: "string" },
23+
table: {
24+
type: { summary: "string" },
25+
category: "Content",
26+
},
27+
control: "text",
28+
},
29+
value: {
30+
name: "Percent value for fill",
31+
type: { name: "number" },
32+
table: {
33+
type: { summary: "number" },
34+
category: "Content",
35+
},
36+
control: { type: "range", min: 0, max: 100,},
37+
},
38+
meterFill: {
39+
name: "Meter fill color",
40+
type: { name: "string" },
41+
table: {
42+
type: { summary: "string" },
43+
category: "Component",
44+
},
45+
options: ["notice", "positive", "negative", "default"],
46+
control: "select",
47+
},
48+
size: {
49+
name: "Meter size",
50+
type: { name: "string" },
51+
table: {
52+
type: { summary: "string" },
53+
category: "Component",
54+
},
55+
options: ["s", "l"],
56+
control: "select",
57+
},
58+
},
59+
args: {
60+
rootClass: "spectrum-ProgressBar",
61+
label: "Storage Space",
62+
size: "s",
63+
value: 50,
64+
},
65+
parameters: {
66+
actions: {
67+
handles: [],
68+
},
69+
status: {
70+
type: process.env.MIGRATED_PACKAGES.includes("progressbar")
71+
? "migrated"
72+
: undefined,
73+
},
74+
},
75+
};
76+
77+
export const Default = Template.bind({});
78+
Default.args = {
79+
meterFill: "default",
80+
};
81+
82+
export const Large = Template.bind({});
83+
Large.args = {
84+
meterFill: "default",
85+
size: "l",
86+
};
87+
88+
89+
export const Postive = Template.bind({});
90+
Postive.args = {
91+
meterFill: "positive",
92+
};
93+
94+
export const Negative = Template.bind({});
95+
Negative.args = {
96+
meterFill: "negative",
97+
};
98+
99+
export const Notice = Template.bind({});
100+
Notice.args = {
101+
meterFill: "notice",
102+
};

‎components/progressbar/stories/metertemplate.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { html } from "lit";
2+
import { classMap } from "lit/directives/class-map.js";
3+
import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
4+
5+
import "../index.css";
6+
7+
export const Template = ({
8+
rootClass = "spectrum-ProgressBar",
9+
customClasses = [],
10+
label,
11+
value,
12+
meterFill,
13+
size = "s",
14+
...globals
15+
}) => {
16+
const fillColor =
17+
meterFill === "negative" ? "is-negative" :
18+
meterFill === "positive" ? "is-positive" :
19+
meterFill === "notice" ? "is-notice" : "default";
20+
21+
return html`
22+
<div
23+
class=${classMap({
24+
[rootClass]: true,
25+
["spectrum-Meter"]: true,
26+
[`spectrum-Meter--size${size?.toUpperCase()}`]: size,
27+
[`${fillColor}`]: fillColor !== "default",
28+
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
29+
})}
30+
value="${value}%"
31+
role="progressbar"
32+
aria-valuenow="${value}%"
33+
aria-valuemin="0"
34+
aria-valuemax="100"
35+
>
36+
${FieldLabel({
37+
...globals,
38+
size: `${size}`,
39+
label: `${label}`,
40+
alignment: "",
41+
customClasses: [`${rootClass}-label`],
42+
})}
43+
${FieldLabel({
44+
...globals,
45+
size: `${size}`,
46+
label: `${value}%`,
47+
alignment: "",
48+
customClasses: [`${rootClass}-percentage`],
49+
})}
50+
<div class="${rootClass}-track">
51+
<div class="${rootClass}-fill" style="width: ${value}%;"></div>
52+
</div>
53+
</div>
54+
`;
55+
};

‎components/progressbar/stories/progressbar.stories.js

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ export default {
1919
},
2020
options: ["s", "m", "l", "xl"],
2121
control: "select",
22-
if: { arg: "isMeter", truthy: false },
2322
},
2423
labelPosition: {
2524
name: "Label Position",
@@ -50,43 +49,11 @@ export default {
5049
control: { type: "range", min: 0, max: 100,},
5150
if: { arg: "indeterminate", truthy: false },
5251
},
53-
isMeter: {
54-
name: "Meter component",
55-
type: { name: "boolean" },
56-
table: {
57-
type: { summary: "boolean" },
58-
category: "Component",
59-
},
60-
control: "boolean",
61-
},
62-
meterFill: {
63-
name: "Meter fill color",
64-
type: { name: "string" },
65-
table: {
66-
type: { summary: "string" },
67-
category: "Component",
68-
},
69-
options: ["notice", "positive", "negative", "default"],
70-
control: "select",
71-
if: { arg: "isMeter", truthy: true },
72-
},
73-
meterSize: {
74-
name: "Meter size",
75-
type: { name: "string" },
76-
table: {
77-
type: { summary: "string" },
78-
category: "Component",
79-
},
80-
options: ["s", "l"],
81-
control: "select",
82-
if: { arg: "isMeter", truthy: true },
83-
},
8452
},
8553
args: {
8654
rootClass: "spectrum-ProgressBar",
8755
size: "m",
8856
labelPosition: "top",
89-
isMeter: false,
9057
label: "Loading",
9158
value: 50,
9259
},
@@ -120,12 +87,3 @@ StaticWhite.args = {
12087
backgroundColor: "rgb(15, 121, 125)",
12188
staticWhite: "staticWhite",
12289
};
123-
124-
export const Meter = Template.bind({});
125-
Meter.args = {
126-
isMeter: true,
127-
label: "Storage Space",
128-
meterFill: "positive",
129-
meterSize: "s",
130-
};
131-

‎components/progressbar/stories/template.js

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { html } from "lit";
22
import { classMap } from "lit/directives/class-map.js";
33
import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
4-
import { ifDefined } from "lit/directives/if-defined.js";
54
import { styleMap } from "lit/directives/style-map.js";
65

76
import "../index.css";
@@ -16,9 +15,6 @@ export const Template = ({
1615
indeterminate,
1716
label,
1817
value,
19-
isMeter,
20-
meterFill,
21-
meterSize,
2218
styles = {
2319
width: customWidth ? customWidth : "",
2420
},
@@ -43,24 +39,16 @@ export const Template = ({
4339
console.warn(e);
4440
}
4541

46-
const fillColor =
47-
meterFill === "negative" ? "is-negative" :
48-
meterFill === "positive" ? "is-positive" :
49-
meterFill === "notice" ? "is-notice" : "default";
50-
5142
return html`
5243
<div style="${staticWhite ? styleMap(staticWhiteStyles) : ""}">
5344
<div
5445
class=${classMap({
5546
[rootClass]: true,
5647
[`${rootClass}--size${size?.toUpperCase()}`]:
57-
typeof size !== "undefined" && !isMeter,
48+
typeof size !== "undefined",
5849
[`${rootClass}--${labelPosition}Label`]:
59-
typeof labelPosition !== "undefined" && !isMeter,
50+
typeof labelPosition !== "undefined",
6051
[`${rootClass}--${staticWhite}`]: typeof staticWhite !== "undefined",
61-
["spectrum-Meter"]: isMeter === true,
62-
[`spectrum-Meter--size${meterSize?.toUpperCase()}`]: meterSize,
63-
[`${fillColor}`]: fillColor !== "default",
6452
[`${rootClass}--${indeterminate}`]:
6553
typeof indeterminate !== "undefined",
6654
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),

0 commit comments

Comments
 (0)