@justeattakeaway/pie-divider 1.0.0 → 1.1.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 (3) hide show
  1. package/dist/index.js +10 -10
  2. package/package.json +2 -2
  3. package/src/divider.scss +47 -43
package/dist/index.js CHANGED
@@ -1,39 +1,39 @@
1
- import { LitElement as m, html as n, unsafeCSS as f } from "lit";
1
+ import { LitElement as f, html as o, unsafeCSS as m } from "lit";
2
2
  import { property as v } from "lit/decorators.js";
3
3
  import { classMap as b } from "lit/directives/class-map.js";
4
4
  import { validPropertyValues as g, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
5
- const w = "*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-min-width: 16px;--divider-height: 1px;--divider-label-max-width: 90%;width:var(--divider-width)}.c-divider,.c-divider hr{margin:0;border:0;background-color:var(--divider-bg-color)}.c-divider:not(.c-divider--labelled){height:var(--divider-height)}.c-divider.c-divider--labelled{display:flex;align-items:center;text-align:center;gap:var(--dt-spacing-b);background-color:transparent}.c-divider.c-divider--labelled .c-divider-label{max-width:var(--divider-label-max-width);word-wrap:break-word}.c-divider.c-divider--labelled hr{flex-grow:1;height:var(--divider-height);min-width:var(--divider-min-width)}.c-divider.c-divider--labelled.c-divider--inverse{color:var(--dt-color-content-inverse)}.c-divider.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}", x = ["default", "inverse"], y = ["horizontal", "vertical"], a = {
5
+ const w = "*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-min-width: 16px;--divider-height: 1px;--divider-label-max-width: 90%;--divider-font-size: calc(var(--dt-font-body-l-size) * 1px);--divider-line-height: calc(var(--dt-font-body-l-line-height) * 1px);width:var(--divider-width)}.c-divider,.c-divider hr{margin:0;border:0;background-color:var(--divider-bg-color)}.c-divider:not(.c-divider--labelled){height:var(--divider-height)}.c-divider.c-divider--labelled{display:flex;align-items:center;text-align:center;gap:var(--dt-spacing-b);background-color:transparent}.c-divider.c-divider--labelled .c-divider-label{font-size:var(--divider-font-size);line-height:var(--divider-line-height);max-width:var(--divider-label-max-width);word-wrap:break-word}.c-divider.c-divider--labelled hr{flex-grow:1;height:var(--divider-height);min-width:var(--divider-min-width)}.c-divider.c-divider--labelled.c-divider--inverse{color:var(--dt-color-content-inverse)}.c-divider.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}", x = ["default", "inverse"], y = ["horizontal", "vertical"], a = {
6
6
  variant: "default",
7
7
  orientation: "horizontal",
8
8
  label: ""
9
9
  };
10
- var $ = Object.defineProperty, c = (h, l, t, o) => {
10
+ var $ = Object.defineProperty, c = (h, l, t, n) => {
11
11
  for (var i = void 0, r = h.length - 1, p; r >= 0; r--)
12
12
  (p = h[r]) && (i = p(l, t, i) || i);
13
13
  return i && $(l, t, i), i;
14
14
  };
15
- const e = "pie-divider", s = class s extends m {
15
+ const e = "pie-divider", s = class s extends f {
16
16
  constructor() {
17
17
  super(...arguments), this.variant = a.variant, this.orientation = a.orientation, this.label = a.label;
18
18
  }
19
19
  render() {
20
- const { variant: l, orientation: t, label: o } = this, i = o.length > 0 && t === "horizontal", r = {
20
+ const { variant: l, orientation: t, label: n } = this, i = n.length > 0 && t === "horizontal", r = {
21
21
  "c-divider": !0,
22
22
  "c-divider--inverse": l === "inverse",
23
23
  "c-divider--vertical": t === "vertical",
24
24
  "c-divider--labelled": i
25
25
  };
26
- return n`
27
- ${i ? n`
26
+ return o`
27
+ ${i ? o`
28
28
  <div
29
29
  id="${e}"
30
30
  data-test-id="${e}"
31
31
  class="${b(r)}"
32
32
  aria-labelledby="${e}-label">
33
33
  <hr aria-hidden="true"/>
34
- <span id="${e}-label" class="c-divider-label">${o}</span>
34
+ <span id="${e}-label" class="c-divider-label">${n}</span>
35
35
  <hr aria-hidden="true"/>
36
- </div>` : n`
36
+ </div>` : o`
37
37
  <hr id="${e}"
38
38
  data-test-id="${e}"
39
39
  class="${b(r)}"
@@ -41,7 +41,7 @@ const e = "pie-divider", s = class s extends m {
41
41
  />`}`;
42
42
  }
43
43
  };
44
- s.styles = f(w);
44
+ s.styles = m(w);
45
45
  let d = s;
46
46
  c([
47
47
  v({ type: String }),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-divider",
3
3
  "description": "PIE Design System Divider built using Web Components",
4
- "version": "1.0.0",
4
+ "version": "1.1.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -37,7 +37,7 @@
37
37
  "devDependencies": {
38
38
  "@custom-elements-manifest/analyzer": "0.9.0",
39
39
  "@justeattakeaway/pie-components-config": "0.18.0",
40
- "@justeattakeaway/pie-css": "0.13.1",
40
+ "@justeattakeaway/pie-css": "0.14.0",
41
41
  "@justeattakeaway/pie-wrapper-react": "0.14.2",
42
42
  "cem-plugin-module-file-extensions": "0.0.5"
43
43
  },
package/src/divider.scss CHANGED
@@ -1,54 +1,58 @@
1
1
  @use '@justeattakeaway/pie-css/scss' as p;
2
2
 
3
3
  .c-divider {
4
- --divider-bg-color: var(--dt-color-divider-default);
5
- --divider-width: 100%;
6
- --divider-min-width: 16px;
7
- --divider-height: 1px;
8
- --divider-label-max-width: 90%;
9
-
10
- width: var(--divider-width);
11
-
12
- &,
13
- hr {
14
- margin: 0;
15
- border: 0;
16
- background-color: var(--divider-bg-color);
17
- }
18
-
19
- &:not(.c-divider--labelled) {
20
- height: var(--divider-height);
21
- }
22
-
23
- &.c-divider--labelled {
24
- display: flex;
25
- align-items: center;
26
- text-align: center;
27
- gap: var(--dt-spacing-b);
28
- background-color: transparent;
29
-
30
- .c-divider-label {
31
- max-width: var(--divider-label-max-width);
32
- word-wrap: break-word;
33
- }
4
+ --divider-bg-color: var(--dt-color-divider-default);
5
+ --divider-width: 100%;
6
+ --divider-min-width: 16px;
7
+ --divider-height: 1px;
8
+ --divider-label-max-width: 90%;
9
+ --divider-font-size: #{p.font-size(--dt-font-body-l-size)};
10
+ --divider-line-height: #{p.font-size(--dt-font-body-l-line-height)};
11
+
12
+ width: var(--divider-width);
34
13
 
14
+ &,
35
15
  hr {
36
- flex-grow: 1;
37
- height: var(--divider-height);
38
- min-width: var(--divider-min-width);
16
+ margin: 0;
17
+ border: 0;
18
+ background-color: var(--divider-bg-color);
39
19
  }
40
20
 
41
- &.c-divider--inverse {
42
- color: var(--dt-color-content-inverse);
21
+ &:not(.c-divider--labelled) {
22
+ height: var(--divider-height);
23
+ }
24
+
25
+ &.c-divider--labelled {
26
+ display: flex;
27
+ align-items: center;
28
+ text-align: center;
29
+ gap: var(--dt-spacing-b);
30
+ background-color: transparent;
31
+
32
+ .c-divider-label {
33
+ font-size: var(--divider-font-size);
34
+ line-height: var(--divider-line-height);
35
+ max-width: var(--divider-label-max-width);
36
+ word-wrap: break-word;
37
+ }
38
+
39
+ hr {
40
+ flex-grow: 1;
41
+ height: var(--divider-height);
42
+ min-width: var(--divider-min-width);
43
+ }
44
+
45
+ &.c-divider--inverse {
46
+ color: var(--dt-color-content-inverse);
47
+ }
43
48
  }
44
- }
45
49
 
46
- &.c-divider--inverse {
47
- --divider-bg-color: var(--dt-color-divider-inverse);
48
- }
50
+ &.c-divider--inverse {
51
+ --divider-bg-color: var(--dt-color-divider-inverse);
52
+ }
49
53
 
50
- &.c-divider--vertical {
51
- --divider-width: 1px;
52
- --divider-height: 100%;
53
- }
54
+ &.c-divider--vertical {
55
+ --divider-width: 1px;
56
+ --divider-height: 100%;
57
+ }
54
58
  }