Skip to content

Commit 27ac354

Browse files
aramos-adobearamos-adobe
committed
chore(illustratedmessage): updating testing env
1 parent 230c342 commit 27ac354

File tree

7 files changed

+1190
-12246
lines changed

7 files changed

+1190
-12246
lines changed

‎components/dropzone/metadata/metadata.json

+12-3
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-DropZone",
5+
".spectrum-DropZone-actions",
56
".spectrum-DropZone-button",
67
".spectrum-DropZone-button:focus",
78
".spectrum-DropZone-button:hover",
89
".spectrum-DropZone-content",
910
".spectrum-DropZone.is-dragged",
1011
".spectrum-DropZone.is-filled",
1112
".spectrum-DropZone.is-filled.is-dragged",
13+
".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-actions",
1214
".spectrum-DropZone:focus-visible",
1315
".spectrum-DropZone:lang(ja)",
1416
".spectrum-DropZone:lang(ko)",
@@ -24,6 +26,7 @@
2426
"--mod-drop-zone-body-font-style",
2527
"--mod-drop-zone-body-font-weight",
2628
"--mod-drop-zone-body-line-height",
29+
"--mod-drop-zone-body-to-action",
2730
"--mod-drop-zone-border-color",
2831
"--mod-drop-zone-border-color-hover",
2932
"--mod-drop-zone-border-style",
@@ -55,6 +58,7 @@
5558
"--mod-drop-zone-illustration-color",
5659
"--mod-drop-zone-illustration-color-hover",
5760
"--mod-drop-zone-illustration-to-heading",
61+
"--mod-drop-zone-illustration-to-title",
5862
"--mod-drop-zone-padding",
5963
"--mod-drop-zone-width"
6064
],
@@ -70,6 +74,7 @@
7074
"--spectrum-drop-zone-body-font-weight",
7175
"--spectrum-drop-zone-body-line-height",
7276
"--spectrum-drop-zone-body-size",
77+
"--spectrum-drop-zone-body-to-action",
7378
"--spectrum-drop-zone-border-color",
7479
"--spectrum-drop-zone-border-color-hover",
7580
"--spectrum-drop-zone-border-width",
@@ -98,6 +103,7 @@
98103
"--spectrum-drop-zone-illustration-color",
99104
"--spectrum-drop-zone-illustration-color-hover",
100105
"--spectrum-drop-zone-illustration-to-heading",
106+
"--spectrum-drop-zone-illustration-to-title",
101107
"--spectrum-drop-zone-padding",
102108
"--spectrum-drop-zone-title-size",
103109
"--spectrum-drop-zone-width"
@@ -125,6 +131,8 @@
125131
"--spectrum-line-height-100",
126132
"--spectrum-neutral-visual-color",
127133
"--spectrum-sans-font-family-stack",
134+
"--spectrum-spacing-200",
135+
"--spectrum-spacing-300",
128136
"--spectrum-spacing-400",
129137
"--spectrum-spacing-75",
130138
"--spectrum-white"
@@ -133,26 +141,27 @@
133141
"--mod-actionbutton-edge-to-text",
134142
"--mod-actionbutton-font-size",
135143
"--mod-actionbutton-label-color",
136-
"--mod-illustrated-message-content-maximum-width",
137144
"--mod-illustrated-message-description-color",
138145
"--mod-illustrated-message-description-font-family",
139146
"--mod-illustrated-message-description-font-size",
140147
"--mod-illustrated-message-description-font-style",
141148
"--mod-illustrated-message-description-font-weight",
142149
"--mod-illustrated-message-description-line-height",
143150
"--mod-illustrated-message-description-position",
151+
"--mod-illustrated-message-description-to-action",
144152
"--mod-illustrated-message-description-z-index",
145153
"--mod-illustrated-message-display",
146-
"--mod-illustrated-message-heading-to-body",
147154
"--mod-illustrated-message-heading-to-description",
148155
"--mod-illustrated-message-illustration-color",
156+
"--mod-illustrated-message-illustration-to-content",
157+
"--mod-illustrated-message-illustration-to-heading",
149158
"--mod-illustrated-message-title-color",
150159
"--mod-illustrated-message-title-font-family",
151160
"--mod-illustrated-message-title-font-size",
152161
"--mod-illustrated-message-title-font-style",
153162
"--mod-illustrated-message-title-font-weight",
154163
"--mod-illustrated-message-title-line-height",
155-
"--mod-illustrated-message-title-to-heading"
164+
"--mod-illustrated-message-vertical-maximum-width"
156165
],
157166
"high-contrast": [
158167
"--highcontrast-drop-zone-border-color-hover",

‎components/dropzone/stories/dropzone.stories.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,16 @@ export default {
2727
if: { arg: "isDragged", truthy: true },
2828
},
2929
...IllustratedMessage.argTypes,
30+
hasButtons: { table: { disable: true }},
31+
isHorizontal: { table: { disable: true }},
3032
label: ActionButton.argTypes.label,
3133
},
3234
args: {
3335
rootClass: "spectrum-DropZone",
3436
isDragged: false,
3537
isFilled: false,
36-
customHeading: "Drag and drop your file",
37-
customDescription: "Or, select a file from your computer.",
38-
customLabel: "Browse files",
39-
hasButton: true
38+
heading: "Drag and drop your file",
39+
description: "Or, select a file from your computer.",
4040
},
4141
parameters: {
4242
design: {

‎components/illustratedmessage/metadata/metadata.json

+46-28
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,18 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-IllustratedMessage",
5-
".spectrum-IllustratedMessage-accent",
5+
".spectrum-IllustratedMessage--horizontal",
6+
".spectrum-IllustratedMessage--horizontal .spectrum-IllustratedMessage-illustration",
7+
".spectrum-IllustratedMessage--sizeL",
8+
".spectrum-IllustratedMessage--sizeL:lang(ja)",
9+
".spectrum-IllustratedMessage--sizeL:lang(ko)",
10+
".spectrum-IllustratedMessage--sizeL:lang(zh)",
11+
".spectrum-IllustratedMessage--sizeS",
12+
".spectrum-IllustratedMessage--sizeS:lang(ja)",
13+
".spectrum-IllustratedMessage--sizeS:lang(ko)",
14+
".spectrum-IllustratedMessage--sizeS:lang(zh)",
15+
".spectrum-IllustratedMessage-actions",
16+
".spectrum-IllustratedMessage-content",
617
".spectrum-IllustratedMessage-description",
718
".spectrum-IllustratedMessage-heading",
819
".spectrum-IllustratedMessage-illustration",
@@ -11,74 +22,81 @@
1122
".spectrum-IllustratedMessage:lang(zh)"
1223
],
1324
"modifiers": [
14-
"--mod-illustrated-message-content-maximum-width",
1525
"--mod-illustrated-message-description-color",
1626
"--mod-illustrated-message-description-font-family",
1727
"--mod-illustrated-message-description-font-size",
1828
"--mod-illustrated-message-description-font-style",
1929
"--mod-illustrated-message-description-font-weight",
2030
"--mod-illustrated-message-description-line-height",
21-
"--mod-illustrated-message-description-max-inline-size",
2231
"--mod-illustrated-message-description-pointer-events",
2332
"--mod-illustrated-message-description-position",
33+
"--mod-illustrated-message-description-to-action",
2434
"--mod-illustrated-message-description-z-index",
2535
"--mod-illustrated-message-display",
26-
"--mod-illustrated-message-heading-max-inline-size",
27-
"--mod-illustrated-message-heading-to-body",
2836
"--mod-illustrated-message-heading-to-description",
29-
"--mod-illustrated-message-illustration-accent-color",
37+
"--mod-illustrated-message-horizontal-maximum-width",
38+
"--mod-illustrated-message-illustrated-inline-size",
39+
"--mod-illustrated-message-illustration-block-size",
3040
"--mod-illustrated-message-illustration-color",
41+
"--mod-illustrated-message-illustration-size",
42+
"--mod-illustrated-message-illustration-to-content",
43+
"--mod-illustrated-message-illustration-to-heading",
3144
"--mod-illustrated-message-pointer-events",
3245
"--mod-illustrated-message-title-color",
3346
"--mod-illustrated-message-title-font-family",
3447
"--mod-illustrated-message-title-font-size",
3548
"--mod-illustrated-message-title-font-style",
3649
"--mod-illustrated-message-title-font-weight",
3750
"--mod-illustrated-message-title-line-height",
38-
"--mod-illustrated-message-title-to-heading"
51+
"--mod-illustrated-message-vertical-maximum-width"
3952
],
4053
"component": [
41-
"--spectrum-illustrated-message-body-size",
42-
"--spectrum-illustrated-message-cjk-title-size",
4354
"--spectrum-illustrated-message-description-color",
4455
"--spectrum-illustrated-message-description-font-family",
4556
"--spectrum-illustrated-message-description-font-size",
4657
"--spectrum-illustrated-message-description-font-style",
4758
"--spectrum-illustrated-message-description-font-weight",
4859
"--spectrum-illustrated-message-description-line-height",
49-
"--spectrum-illustrated-message-description-max-inline-size",
50-
"--spectrum-illustrated-message-heading-max-inline-size",
60+
"--spectrum-illustrated-message-description-to-action",
5161
"--spectrum-illustrated-message-heading-to-description",
52-
"--spectrum-illustrated-message-illustration-accent-color",
62+
"--spectrum-illustrated-message-horizontal-maximum-width",
5363
"--spectrum-illustrated-message-illustration-color",
54-
"--spectrum-illustrated-message-maximum-width",
64+
"--spectrum-illustrated-message-illustration-size",
65+
"--spectrum-illustrated-message-illustration-to-content",
66+
"--spectrum-illustrated-message-illustration-to-heading",
67+
"--spectrum-illustrated-message-large-body-font-size",
68+
"--spectrum-illustrated-message-large-cjk-title-font-size",
69+
"--spectrum-illustrated-message-large-title-font-size",
70+
"--spectrum-illustrated-message-medium-body-font-size",
71+
"--spectrum-illustrated-message-medium-cjk-title-font-size",
72+
"--spectrum-illustrated-message-medium-title-font-size",
73+
"--spectrum-illustrated-message-small-body-font-size",
74+
"--spectrum-illustrated-message-small-cjk-title-font-size",
75+
"--spectrum-illustrated-message-small-title-font-size",
5576
"--spectrum-illustrated-message-title-color",
5677
"--spectrum-illustrated-message-title-font-family",
5778
"--spectrum-illustrated-message-title-font-size",
5879
"--spectrum-illustrated-message-title-font-style",
5980
"--spectrum-illustrated-message-title-font-weight",
6081
"--spectrum-illustrated-message-title-line-height",
61-
"--spectrum-illustrated-message-title-size",
62-
"--spectrum-illustrated-message-title-to-heading"
82+
"--spectrum-illustrated-message-vertical-maximum-width"
6383
],
6484
"global": [
65-
"--spectrum-accent-visual-color",
6685
"--spectrum-body-color",
67-
"--spectrum-body-line-height",
6886
"--spectrum-body-sans-serif-font-style",
6987
"--spectrum-body-sans-serif-font-weight",
7088
"--spectrum-heading-color",
71-
"--spectrum-heading-line-height",
72-
"--spectrum-heading-sans-serif-font-style",
73-
"--spectrum-heading-sans-serif-font-weight",
74-
"--spectrum-neutral-visual-color",
89+
"--spectrum-line-height-200",
90+
"--spectrum-neutral-content-color-default",
7591
"--spectrum-sans-font-family-stack",
76-
"--spectrum-spacing-400",
77-
"--spectrum-spacing-75"
92+
"--spectrum-spacing-100",
93+
"--spectrum-spacing-200",
94+
"--spectrum-spacing-300",
95+
"--spectrum-spacing-75",
96+
"--spectrum-title-line-height",
97+
"--spectrum-title-sans-serif-font-style",
98+
"--spectrum-title-sans-serif-font-weight"
7899
],
79-
"passthroughs": [],
80-
"high-contrast": [
81-
"--highcontrast-illustrated-message-illustration-accent-color",
82-
"--highcontrast-illustrated-message-illustration-color"
83-
]
100+
"passthroughs": ["--mod-buttongroup-justify-content"],
101+
"high-contrast": ["--highcontrast-illustrated-message-illustration-color"]
84102
}

‎components/illustratedmessage/stories/illustratedmessage.stories.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export default {
7878
},
7979
};
8080

81-
export const Default = Template.bind({});
81+
export const Default = IllustratedMessageGroup.bind({});
8282
Default.args = {};
8383

8484
/**

‎components/illustratedmessage/stories/illustratedmessage.test.js

+16-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Template as Link } from "@spectrum-css/link/stories/template.js";
22
import { Variants } from "@spectrum-css/preview/decorators";
33
import { html } from "lit";
4-
import { Template } from "./template.js";
4+
import { SizingTemplate, Template } from "./template.js";
55

66
export const IllustratedMessageGroup = Variants({
77
Template,
@@ -10,16 +10,27 @@ export const IllustratedMessageGroup = Variants({
1010
description: [
1111
"This page isn't available. Try checking the URL or visit a different page.",
1212
],
13-
useAccentColor: false,
14-
}, {
15-
testHeading: "With accent color",
13+
},
14+
{
15+
testHeading: "Horizontal layout",
16+
isHorizontal: true
17+
},
18+
{
19+
testHeading: "With link",
1620
heading: "Drag and drop your file",
1721
description: [
1822
() => {
1923
return html`${Link({ url: "#", text: "Select a file" })} from your computer.`;
2024
},
2125
],
22-
useAccentColor: true,
26+
},
27+
{
28+
testHeading: "W/o button group",
29+
hasButtons: false
30+
},
31+
{
32+
Template: SizingTemplate
2333
}
2434
],
35+
withSizes: false
2536
});

‎tokens/package.json

-19
Original file line numberDiff line numberDiff line change
@@ -48,25 +48,6 @@
4848
"design system",
4949
"adobe"
5050
],
51-
<<<<<<< HEAD
52-
=======
53-
"devDependencies": {
54-
"@adobe/spectrum-tokens": "13.0.0-beta.50",
55-
"@nxkit/style-dictionary": "^5.0.0",
56-
"postcss": "^8.4.38",
57-
"postcss-cli": "^11.0.0",
58-
"postcss-combine-duplicated-selectors": "^10.0.3",
59-
"postcss-discard-comments": "^7.0.0",
60-
"postcss-discard-empty": "^6.0.3",
61-
"postcss-licensing": "^1.0.1",
62-
"postcss-merge-rules": "^7.0.0",
63-
"postcss-rgb-mapping": "^1.1.0",
64-
"postcss-sorting": "^8.0.2",
65-
"prettier": "^2.8.8",
66-
"style-dictionary": "^3.9.2",
67-
"style-dictionary-sets": "^2.3.0"
68-
},
69-
>>>>>>> 547d50c47 (feat(illustratedmessage): work in progress)
7051
"publishConfig": {
7152
"access": "public"
7253
}

0 commit comments

Comments
 (0)