@getflip/swirl-components 0.176.0 → 0.177.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 (15) hide show
  1. package/components.json +9 -1
  2. package/dist/cjs/swirl-description-list-item.cjs.entry.js +4 -2
  3. package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
  4. package/dist/collection/components/swirl-description-list/swirl-description-list.stories.js +3 -0
  5. package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.css +17 -4
  6. package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.js +4 -1
  7. package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.spec.js +11 -6
  8. package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
  9. package/dist/components/swirl-description-list-item.js +4 -2
  10. package/dist/esm/swirl-description-list-item.entry.js +4 -2
  11. package/dist/swirl-components/p-d5c10d1e.entry.js +1 -0
  12. package/dist/swirl-components/swirl-components.esm.js +1 -1
  13. package/dist/types/components/swirl-description-list-item/swirl-description-list-item.d.ts +1 -0
  14. package/package.json +1 -1
  15. package/dist/swirl-components/p-85eeb993.entry.js +0 -1
package/dist/collection/components/swirl-description-list/swirl-description-list.stories.js CHANGED
@@ -21,6 +21,9 @@ const Template = (args) => {
21
21
  consectetur vestibulum tempus, nulla lobortis ipsum. Odio a ipsum purus
22
22
  pellentesque maecenas.
23
23
  <swirl-button label="A button" slot="tools" variant="outline"></swirl-button>
24
+ <swirl-inline-notification heading="Notification title" slot="additional-content">
25
+ Lorem ipsum dolor sit amet. <swirl-link href="#" label="With a link."></swirl-link>
26
+ </swirl-inline-notification>
24
27
  </swirl-description-list-item>
25
28
  <swirl-description-list-item term="Term #3">
26
29
  A short description
package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.css CHANGED
@@ -6,12 +6,12 @@
6
6
  box-sizing: border-box;
7
7
  }
8
8
 
9
- .description-list-item {
9
+ .description-list-item__inner {
10
10
  display: flex;
11
11
  max-width: 100%;
12
12
  padding-top: var(--s-space-8);
13
13
  padding-bottom: var(--s-space-8);
14
- align-items: center;
14
+ align-items: flex-start;
15
15
  color: var(--s-text-default);
16
16
  line-height: var(--s-line-height-base);
17
17
  justfiy-content: space-between;
@@ -20,7 +20,7 @@
20
20
 
21
21
  @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
22
22
 
23
- .description-list-item {
23
+ .description-list-item__inner {
24
24
  font-size: var(--s-font-size-sm);
25
25
  line-height: var(--s-line-height-sm)
26
26
  }
@@ -36,6 +36,10 @@
36
36
  display: none;
37
37
  }
38
38
 
39
+ .description-list-item:not(.description-list-item--has-additional-content) .description-list-item__additional-content {
40
+ display: none;
41
+ }
42
+
39
43
  .description-list-item__text-container {
40
44
  flex-grow: 1;
41
45
  }
@@ -56,8 +60,8 @@
56
60
 
57
61
  .description-list-item__tooltip {
58
62
  display: inline-flex;
59
- vertical-align: middle;
60
63
  margin-left: var(--s-space-4);
64
+ vertical-align: middle;
61
65
  }
62
66
 
63
67
  .description-list-item__description {
@@ -68,5 +72,14 @@
68
72
  }
69
73
 
70
74
  .description-list-item__tools {
75
+ display: flex;
76
+ min-height: 2.625rem;
77
+ flex-shrink: 0;
78
+ align-items: center;
79
+ }
80
+
81
+ .description-list-item__additional-content {
82
+ padding-bottom: var(--s-space-8);
83
+ flex-basis: 100%;
71
84
  flex-shrink: 0;
72
85
  }
package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.js CHANGED
@@ -3,6 +3,7 @@ import classNames from "classnames";
3
3
  /**
4
4
  * @slot slot - The description
5
5
  * @slot tools - Optional tools to be displayed on the right side of the item
6
+ * @slot additional-content - Optional additional content displayed at the bottom of the item
6
7
  */
7
8
  export class SwirlDescriptionListItem {
8
9
  constructor() {
@@ -13,11 +14,13 @@ export class SwirlDescriptionListItem {
13
14
  }
14
15
  render() {
15
16
  const hasTools = Boolean(this.el.querySelector('[slot="tools"]'));
17
+ const hasAdditionalContent = Boolean(this.el.querySelector('[slot="additional-content"]'));
16
18
  const className = classNames("description-list-item", {
17
19
  "description-list-item--bordered": this.bordered,
20
+ "description-list-item--has-additional-content": hasAdditionalContent,
18
21
  "description-list-item--has-tools": hasTools,
19
22
  });
20
- return (h(Host, { role: "listitem" }, h("div", { class: className, part: "description-list-item", role: "group" }, h("div", { class: "description-list-item__text-container" }, h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { class: "description-list-item__tooltip" }, h("swirl-tooltip", { content: this.tooltip, position: "right" }, h("swirl-icon-info", { size: 16, tabIndex: 0 }))))), h("div", { style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", null))), h("div", { class: "description-list-item__tools" }, h("slot", { name: "tools" })))));
23
+ return (h(Host, { role: "listitem" }, h("div", { class: className, part: "description-list-item", role: "group" }, h("div", { class: "description-list-item__inner" }, h("div", { class: "description-list-item__text-container" }, h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (h("span", { class: "description-list-item__tooltip" }, h("swirl-tooltip", { content: this.tooltip, position: "right" }, h("swirl-icon-info", { size: 16, tabIndex: 0 }))))), h("div", { style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", null))), h("div", { class: "description-list-item__tools" }, h("slot", { name: "tools" }))), h("div", { class: "description-list-item__additional-content" }, h("slot", { name: "additional-content" })))));
21
24
  }
22
25
  static get is() { return "swirl-description-list-item"; }
23
26
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.spec.js CHANGED
@@ -10,14 +10,19 @@ describe("swirl-description-list-item", () => {
10
10
  <swirl-description-list-item role="listitem" term="Term">
11
11
  <mock:shadow-root>
12
12
  <div class="description-list-item description-list-item--bordered" part="description-list-item" role="group">
13
- <div class="description-list-item__text-container">
14
- <div class="description-list-item__term" part="description-list-item__term" role="term">Term</div>
15
- <div class="description-list-item__description" role="definition">
16
- <slot></slot>
13
+ <div class="description-list-item__inner">
14
+ <div class="description-list-item__text-container">
15
+ <div class="description-list-item__term" part="description-list-item__term" role="term">Term</div>
16
+ <div class="description-list-item__description" role="definition">
17
+ <slot></slot>
18
+ </div>
19
+ </div>
20
+ <div class="description-list-item__tools">
21
+ <slot name="tools"></slot>
17
22
  </div>
18
23
  </div>
19
- <div class="description-list-item__tools">
20
- <slot name="tools"></slot>
24
+ <div class="description-list-item__additional-content">
25
+ <slot name="additional-content"></slot>
21
26
  </div>
22
27
  </div>
23
28
  </mock:shadow-root>