@muonic/muon 0.0.2-experimental-126-4fb60a6.0 → 0.0.2-experimental-127-d2b1c67.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/form/src/config-tokens.json +11 -0
  2. package/components/form/src/design-tokens.json +9 -0
  3. package/components/form/src/form-component.js +7 -4
  4. package/components/form/src/form-styles.css +10 -0
  5. package/components/form/story.js +0 -1
  6. package/muon-element/index.js +2 -2
  7. package/package.json +1 -1
  8. package/tests/components/form/__snapshots__/form.test.snap.js +30 -60
  9. package/tests/components/form/form.test.js +7 -21
package/components/form/src/config-tokens.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "form": {
3
+ "config": {
4
+ "type": {
5
+ "description": "Default value for `type` property which renders the template.",
6
+ "value": "standard",
7
+ "type": "string"
8
+ }
9
+ }
10
+ }
11
+ }
package/components/form/src/design-tokens.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "form": {
3
+ "row": {
4
+ "gap": {
5
+ "value": "{ theme.spacer.lg.value }"
6
+ }
7
+ }
8
+ }
9
+ }
package/components/form/src/form-component.js CHANGED
@@ -1,5 +1,6 @@
1
- import { html, MuonElement } from '@muonic/muon';
1
+ import { html, MuonElement, css, unsafeCSS } from '@muonic/muon';
2
2
  import scrollTo from '@muon/utils/scroll';
3
+ import styles from './form-styles.css';
3
4
 
4
5
  /**
5
6
  * A form.
@@ -15,6 +16,10 @@ export class Form extends MuonElement {
15
16
  this._reset = this._reset.bind(this);
16
17
  }
17
18
 
19
+ static get styles() {
20
+ return css`${unsafeCSS(styles)}`;
21
+ }
22
+
18
23
  connectedCallback() {
19
24
  super.connectedCallback();
20
25
 
@@ -178,9 +183,7 @@ export class Form extends MuonElement {
178
183
 
179
184
  get standardTemplate() {
180
185
  return html`
181
- <div class="form">
182
- <slot></slot>
183
- </div>
186
+ <slot></slot>
184
187
  `;
185
188
  }
186
189
  }
package/components/form/src/form-styles.css ADDED
@@ -0,0 +1,10 @@
1
+ @import "@muonic/muon/css/default.css";
2
+
3
+ :host {
4
+ display: block;
5
+
6
+ & ::slotted(.layout-row) {
7
+ display: grid;
8
+ row-gap: $FORM_ROW_GAP;
9
+ }
10
+ }
package/components/form/story.js CHANGED
@@ -30,7 +30,6 @@ const innerDetail = (args) => staticHTML`
30
30
  <form>`;
31
31
 
32
32
  export const Standard = (args) => details.template(args, innerDetail);
33
-
34
33
  Standard.args = {
35
34
  Text: {
36
35
  ...InputterStories.Text.args,
package/muon-element/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { html, LitElement, adoptStyles, supportsAdoptingStyleSheets } from '@muonic/muon';
2
- // eslint-disable-next-line jsdoc/valid-types
2
+
3
3
  /**
4
- * @typedef {import('@lit/reactive-element').CSSResultOrNative} CSSResultOrNative
4
+ * @typedef {module:lit.CSSResultOrNative} CSSResultOrNative - define css type
5
5
  */
6
6
 
7
7
  export const MuonElementMixin = (superClass) => class extends superClass {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muonic/muon",
3
- "version": "0.0.2-experimental-126-4fb60a6.0",
3
+ "version": "0.0.2-experimental-127-d2b1c67.0",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/tests/components/form/__snapshots__/form.test.snap.js CHANGED
@@ -2,58 +2,44 @@
2
2
  export const snapshots = {};
3
3
 
4
4
  snapshots["form implements standard self [with form]"] =
5
- `<div class="form">
6
- <slot>
7
- </slot>
8
- </div>
5
+ `<slot>
6
+ </slot>
9
7
  `;
10
8
  /* end snapshot form implements standard self [with form] */
11
9
 
12
10
  snapshots["form form with submit button"] =
13
- `<div class="form">
14
- <slot>
15
- </slot>
16
- </div>
11
+ `<slot>
12
+ </slot>
17
13
  `;
18
14
  /* end snapshot form form with submit button */
19
15
 
20
16
  snapshots["form form with submit input"] =
21
- `<div class="form">
22
- <slot>
23
- </slot>
24
- </div>
17
+ `<slot>
18
+ </slot>
25
19
  `;
26
20
  /* end snapshot form form with submit input */
27
21
 
28
22
  snapshots["form form with reset button"] =
29
- `<div class="form">
30
- <slot>
31
- </slot>
32
- </div>
23
+ `<slot>
24
+ </slot>
33
25
  `;
34
26
  /* end snapshot form form with reset button */
35
27
 
36
28
  snapshots["form form with reset input"] =
37
- `<div class="form">
38
- <slot>
39
- </slot>
40
- </div>
29
+ `<slot>
30
+ </slot>
41
31
  `;
42
32
  /* end snapshot form form with reset input */
43
33
 
44
34
  snapshots["form form submitting"] =
45
- `<div class="form">
46
- <slot>
47
- </slot>
48
- </div>
35
+ `<slot>
36
+ </slot>
49
37
  `;
50
38
  /* end snapshot form form submitting */
51
39
 
52
40
  snapshots["form form button disabled submitting"] =
53
- `<div class="form">
54
- <slot>
55
- </slot>
56
- </div>
41
+ `<slot>
42
+ </slot>
57
43
  `;
58
44
  /* end snapshot form form button disabled submitting */
59
45
 
@@ -66,42 +52,32 @@ snapshots["form form submitting validation"] =
66
52
  /* end snapshot form form submitting validation */
67
53
 
68
54
  snapshots["form form submitting with input"] =
69
- `<div class="form">
70
- <slot>
71
- </slot>
72
- </div>
55
+ `<slot>
56
+ </slot>
73
57
  `;
74
58
  /* end snapshot form form submitting with input */
75
59
 
76
60
  snapshots["form form submitting with inputter"] =
77
- `<div class="form">
78
- <slot>
79
- </slot>
80
- </div>
61
+ `<slot>
62
+ </slot>
81
63
  `;
82
64
  /* end snapshot form form submitting with inputter */
83
65
 
84
66
  snapshots["form form submitting with inputter parent"] =
85
- `<div class="form">
86
- <slot>
87
- </slot>
88
- </div>
67
+ `<slot>
68
+ </slot>
89
69
  `;
90
70
  /* end snapshot form form submitting with inputter parent */
91
71
 
92
72
  snapshots["form form with reset cta"] =
93
- `<div class="form">
94
- <slot>
95
- </slot>
96
- </div>
73
+ `<slot>
74
+ </slot>
97
75
  `;
98
76
  /* end snapshot form form with reset cta */
99
77
 
100
78
  snapshots["form form with submit cta"] =
101
- `<div class="form">
102
- <slot>
103
- </slot>
104
- </div>
79
+ `<slot>
80
+ </slot>
105
81
  `;
106
82
  /* end snapshot form form with submit cta */
107
83
 
@@ -114,26 +90,20 @@ snapshots["form form button loading submitting"] =
114
90
  /* end snapshot form form button loading submitting */
115
91
 
116
92
  snapshots["form form cta loading submitting"] =
117
- `<div class="form">
118
- <slot>
119
- </slot>
120
- </div>
93
+ `<slot>
94
+ </slot>
121
95
  `;
122
96
  /* end snapshot form form cta loading submitting */
123
97
 
124
98
  snapshots["form form cta loading reset"] =
125
- `<div class="form">
126
- <slot>
127
- </slot>
128
- </div>
99
+ `<slot>
100
+ </slot>
129
101
  `;
130
102
  /* end snapshot form form cta loading reset */
131
103
 
132
104
  snapshots["form form submitting with inputter [validate]"] =
133
- `<div class="form">
134
- <slot>
135
- </slot>
136
- </div>
105
+ `<slot>
106
+ </slot>
137
107
  `;
138
108
  /* end snapshot form form submitting with inputter [validate] */
139
109
 
package/tests/components/form/form.test.js CHANGED
@@ -32,14 +32,12 @@ describe('form', () => {
32
32
  await defaultChecks(el);
33
33
 
34
34
  const shadowRoot = el.shadowRoot;
35
- const form = shadowRoot.querySelector('.form');
36
- const slot = form.querySelector('slot');
35
+ const slot = shadowRoot.querySelector('slot');
37
36
  const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
38
37
 
39
38
  expect(el.type).to.equal('standard', '`type` property has default value `standard`');
40
39
  expect(el._submitButton).to.equal(null, 'no `submit` button added');
41
40
  expect(el._resetButton).to.equal(null, 'no `reset` button added');
42
- expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
43
41
  expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
44
42
  expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
45
43
  expect(el._nativeForm).to.not.be.null; // eslint-disable-line no-unused-expressions
@@ -50,15 +48,13 @@ describe('form', () => {
50
48
  await defaultChecks(el);
51
49
 
52
50
  const shadowRoot = el.shadowRoot;
53
- const form = shadowRoot.querySelector('.form');
54
- const slot = form.querySelector('slot');
51
+ const slot = shadowRoot.querySelector('slot');
55
52
  const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
56
53
 
57
54
  expect(el.type).to.equal('standard', '`type` property has default value `standard`');
58
55
  expect(el._submitButton.nodeName).to.equal('BUTTON', 'has submit button');
59
56
  expect(el._submitButton.type).to.equal('submit', 'has submit type button');
60
57
  expect(el._resetButton).to.equal(null, 'no `reset` button added');
61
- expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
62
58
  expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
63
59
  expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
64
60
  });
@@ -68,15 +64,13 @@ describe('form', () => {
68
64
  await defaultChecks(el);
69
65
 
70
66
  const shadowRoot = el.shadowRoot;
71
- const form = shadowRoot.querySelector('.form');
72
- const slot = form.querySelector('slot');
67
+ const slot = shadowRoot.querySelector('slot');
73
68
  const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
74
69
 
75
70
  expect(el.type).to.equal('standard', '`type` property has default value `standard`');
76
71
  expect(el._submitButton.nodeName.toLowerCase()).to.equal(ctaTagName, 'has submit cta');
77
72
  expect(el._submitButton.type).to.equal('submit', 'has submit type button');
78
73
  expect(el._resetButton).to.equal(null, 'no `reset` cta added');
79
- expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
80
74
  expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
81
75
  expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
82
76
  });
@@ -86,15 +80,13 @@ describe('form', () => {
86
80
  await defaultChecks(el);
87
81
 
88
82
  const shadowRoot = el.shadowRoot;
89
- const form = shadowRoot.querySelector('.form');
90
- const slot = form.querySelector('slot');
83
+ const slot = shadowRoot.querySelector('slot');
91
84
  const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
92
85
 
93
86
  expect(el.type).to.equal('standard', '`type` property has default value `standard`');
94
87
  expect(el._submitButton.nodeName).to.equal('INPUT', 'has submit input');
95
88
  expect(el._submitButton.type).to.equal('submit', 'has submit type input');
96
89
  expect(el._resetButton).to.equal(null, 'no `reset` button added');
97
- expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
98
90
  expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
99
91
  expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
100
92
  });
@@ -104,15 +96,13 @@ describe('form', () => {
104
96
  await defaultChecks(el);
105
97
 
106
98
  const shadowRoot = el.shadowRoot;
107
- const form = shadowRoot.querySelector('.form');
108
- const slot = form.querySelector('slot');
99
+ const slot = shadowRoot.querySelector('slot');
109
100
  const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
110
101
 
111
102
  expect(el.type).to.equal('standard', '`type` property has default value `standard`');
112
103
  expect(el._resetButton.nodeName).to.equal('BUTTON', 'has reset button');
113
104
  expect(el._resetButton.type).to.equal('reset', 'has reset type button');
114
105
  expect(el._submitButton).to.equal(null, 'no `submit` button added');
115
- expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
116
106
  expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
117
107
  expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
118
108
  });
@@ -122,15 +112,13 @@ describe('form', () => {
122
112
  await defaultChecks(el);
123
113
 
124
114
  const shadowRoot = el.shadowRoot;
125
- const form = shadowRoot.querySelector('.form');
126
- const slot = form.querySelector('slot');
115
+ const slot = shadowRoot.querySelector('slot');
127
116
  const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
128
117
 
129
118
  expect(el.type).to.equal('standard', '`type` property has default value `standard`');
130
119
  expect(el._resetButton.nodeName.toLowerCase()).to.equal(ctaTagName, 'has reset cta');
131
120
  expect(el._resetButton.type).to.equal('reset', 'has reset type button');
132
121
  expect(el._submitButton).to.equal(null, 'no `submit` cta added');
133
- expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
134
122
  expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
135
123
  expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
136
124
  });
@@ -140,15 +128,13 @@ describe('form', () => {
140
128
  await defaultChecks(el);
141
129
 
142
130
  const shadowRoot = el.shadowRoot;
143
- const form = shadowRoot.querySelector('.form');
144
- const slot = form.querySelector('slot');
131
+ const slot = shadowRoot.querySelector('slot');
145
132
  const hiddenSubmit = el.querySelector('input[hidden][type="submit"]');
146
133
 
147
134
  expect(el.type).to.equal('standard', '`type` property has default value `standard`');
148
135
  expect(el._resetButton.nodeName).to.equal('INPUT', 'has reset input');
149
136
  expect(el._resetButton.type).to.equal('reset', 'has reset type input');
150
137
  expect(el._submitButton).to.equal(null, 'no `submit` button added');
151
- expect(form).to.not.be.null; // eslint-disable-line no-unused-expressions
152
138
  expect(slot).to.not.be.null; // eslint-disable-line no-unused-expressions
153
139
  expect(hiddenSubmit).to.not.be.null; // eslint-disable-line no-unused-expressions
154
140
  });