@oicl/openbridge-webcomponents 0.0.8 → 0.0.9

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 (22) hide show
  1. package/.release-it.json +12 -0
  2. package/.storybook/main.ts +17 -0
  3. package/CHANGELOG.md +106 -41
  4. package/__snapshots__/button-rich-button--with-graphic-info.png +0 -0
  5. package/custom-elements.json +600 -583
  6. package/dist/components/button/button.css.js +2 -2
  7. package/dist/components/navigation-item/navigation-item.css.js +2 -1
  8. package/dist/components/navigation-item/navigation-item.css.js.map +1 -1
  9. package/dist/components/notification-button/notification-button.css.js +1 -1
  10. package/dist/components/rich-button/rich-button.css.js +20 -10
  11. package/dist/components/rich-button/rich-button.css.js.map +1 -1
  12. package/dist/components/rich-button/rich-button.d.ts +1 -0
  13. package/dist/components/rich-button/rich-button.d.ts.map +1 -1
  14. package/dist/components/rich-button/rich-button.js +5 -0
  15. package/dist/components/rich-button/rich-button.js.map +1 -1
  16. package/fix-generated.cjs +1 -0
  17. package/package.json +3 -2
  18. package/src/components/rich-button/rich-button.css +15 -2
  19. package/src/components/rich-button/rich-button.stories.ts +36 -0
  20. package/src/components/rich-button/rich-button.ts +2 -0
  21. package/.yarnrc.yml +0 -1
  22. package/test.svg +0 -3
package/dist/components/button/button.css.js CHANGED
@@ -195,7 +195,6 @@ const iconStyle = css`.wrapper {
195
195
  color: var(--on-raised-disabled-color);
196
196
  }
197
197
  .wrapper.variant-check:not(.checked) {
198
- color: var(--on-indent-active-color);
199
198
  /* UI/Body */
200
199
  font-family: 'Noto Sans';
201
200
  font-size: 16px;
@@ -204,6 +203,7 @@ const iconStyle = css`.wrapper {
204
203
  line-height: 24px;
205
204
  /* 150% */
206
205
  text-decoration: none;
206
+ color: var(--on-indent-active-color);
207
207
  }
208
208
  .wrapper.variant-check:not(.checked) {
209
209
  cursor: pointer;
@@ -248,7 +248,6 @@ const iconStyle = css`.wrapper {
248
248
  color: var(--on-indent-disabled-color);
249
249
  }
250
250
  .wrapper.variant-check.checked {
251
- color: var(--on-selected-active-color);
252
251
  /* UI/Body-Active */
253
252
  font-family: Noto Sans;
254
253
  font-size: 16px;
@@ -256,6 +255,7 @@ const iconStyle = css`.wrapper {
256
255
  font-weight: 650;
257
256
  line-height: 24px;
258
257
  /* 150% */
258
+ color: var(--on-selected-active-color);
259
259
  }
260
260
  .wrapper.variant-check.checked {
261
261
  cursor: pointer;
package/dist/components/navigation-item/navigation-item.css.js CHANGED
@@ -65,7 +65,6 @@ const compentStyle = css`.wrapper {
65
65
  font-style: normal;
66
66
  font-weight: 650;
67
67
  line-height: 24px;
68
- /* 150% */
69
68
  }
70
69
  .wrapper.checked {
71
70
  border-color: var(--amplified-enabled-border-color);
@@ -100,6 +99,8 @@ const compentStyle = css`.wrapper {
100
99
  cursor: not-allowed;
101
100
  color: var(--on-amplified-disabled-color);
102
101
  }
102
+
103
+ /* 150% */
103
104
  .wrapper.checked .icon {
104
105
  color: var(--instrument-enhanced-secondary-color);
105
106
  }
package/dist/components/navigation-item/navigation-item.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"navigation-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"navigation-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/components/notification-button/notification-button.css.js CHANGED
@@ -19,13 +19,13 @@ const componentStyle = css`* {
19
19
  display: flex;
20
20
  align-items: center;
21
21
  justify-content: center;
22
- color: var(--on-normal-active-color);
23
22
  font-family: 'Noto Sans';
24
23
  font-size: 1rem;
25
24
  font-style: normal;
26
25
  font-weight: 570;
27
26
  line-height: 1.5rem;
28
27
  /* 150% */
28
+ color: var(--on-normal-active-color);
29
29
  }
30
30
 
31
31
  .wrapper {
package/dist/components/rich-button/rich-button.css.js CHANGED
@@ -5,17 +5,20 @@ const compentStyle = css`* {
5
5
 
6
6
  .wrapper {
7
7
  position: relative;
8
+ }
9
+
10
+ .wrapper:not(.info) {
8
11
  background-color: var(--container-background-color);
9
12
  box-shadow: var(--shadow-flat);
10
13
  overflow: hidden;
11
14
  }
12
15
 
13
- .wrapper.top, .wrapper.regular {
16
+ .wrapper.top:not(.info), .wrapper.regular:not(.info) {
14
17
  border-top-left-radius: 6px;
15
18
  border-top-right-radius: 6px;
16
19
  }
17
20
 
18
- .wrapper.bottom, .wrapper.regular {
21
+ .wrapper.bottom:not(.info), .wrapper.regular:not(.info) {
19
22
  border-bottom-left-radius: 6px;
20
23
  border-bottom-right-radius: 6px;
21
24
  }
@@ -23,14 +26,15 @@ const compentStyle = css`* {
23
26
  button {
24
27
  width: 100%;
25
28
  appearance: none;
26
- border-width: 0 !important;
27
29
  display: flex;
28
30
  flex-direction: column;
29
31
  text-align: left;
30
32
  padding: 0;
33
+ border-width: 0 !important;
34
+ background-color: transparent;
31
35
  }
32
36
 
33
- button {
37
+ .wrapper:not(.info) button {
34
38
  border-color: var(--flat-enabled-border-color);
35
39
  background-color: var(--flat-enabled-background-color);
36
40
  border-width: 1px;
@@ -38,32 +42,32 @@ button {
38
42
  cursor: pointer;
39
43
  }
40
44
 
41
- button:focus {
45
+ .wrapper:not(.info) button:focus {
42
46
  outline: none;
43
47
  }
44
48
 
45
- button.activated {
49
+ .wrapper:not(.info) button.activated {
46
50
  border-color: var(--flat-activated-border-color);
47
51
  background-color: var(--flat-activated-background-color);
48
52
  }
49
53
 
50
- button:focus-visible {
54
+ .wrapper:not(.info) button:focus-visible {
51
55
  outline-color: hsla(211, 100%, 44%, 0.3);
52
56
  outline-width: 4px;
53
57
  outline-style: solid;
54
58
  }
55
59
 
56
- button:hover {
60
+ .wrapper:not(.info) button:hover {
57
61
  border-color: var(--flat-hover-border-color);
58
62
  background-color: var(--flat-hover-background-color);
59
63
  }
60
64
 
61
- button:active {
65
+ .wrapper:not(.info) button:active {
62
66
  border-color: var(--flat-pressed-border-color);
63
67
  background-color: var(--flat-pressed-background-color);
64
68
  }
65
69
 
66
- button:disabled {
70
+ .wrapper:not(.info) button:disabled {
67
71
  border-color: var(--flat-disabled-border-color);
68
72
  background-color: var(--flat-disabled-background-color);
69
73
  cursor: not-allowed;
@@ -175,6 +179,12 @@ button:disabled {
175
179
  border-bottom: 1px solid var(--border-outline-color);
176
180
  margin-bottom: -1px;
177
181
  }
182
+
183
+ .info .graphic {
184
+ border-radius: 6px;
185
+ box-shadow: var(--shadow-flat);
186
+ overflow: hidden;
187
+ }
178
188
  `;
179
189
  export {
180
190
  compentStyle as default
package/dist/components/rich-button/rich-button.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"rich-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"rich-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/components/rich-button/rich-button.d.ts CHANGED
@@ -15,6 +15,7 @@ export type ObcRichButtonSizeType = 'single-line' | 'double-line' | 'multi-line'
15
15
  export declare class ObcRichButton extends LitElement {
16
16
  position: ObcRichButtonPositionType;
17
17
  size: ObcRichButtonSizeType;
18
+ info: boolean;
18
19
  hasLeadingIcon: boolean;
19
20
  hasTrailingIcon: boolean;
20
21
  hasStatus: boolean;
package/dist/components/rich-button/rich-button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"rich-button.d.ts","sourceRoot":"","sources":["../../../src/components/rich-button/rich-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,oBAAY,qBAAqB;IAC/B,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AACD,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhF,oBAAY,iBAAiB;IAC3B,UAAU,gBAAgB;IAC1B,UAAU,gBAAgB;IAC1B,SAAS,eAAe;CACzB;AACD,MAAM,MAAM,qBAAqB,GAC7B,aAAa,GACb,aAAa,GACb,YAAY,CAAC;AAEjB,qBACa,aAAc,SAAQ,UAAU;IACjB,QAAQ,EAAE,yBAAyB,CAC7B;IACN,IAAI,EAAE,qBAAqB,CACtB;IAC2B,cAAc,UAChE;IACmD,eAAe,UAClE;IAC4C,SAAS,UAAS;IACjB,UAAU,UAAS;IAChB,aAAa,UAAS;IACnD,MAAM,UAAS;IAEjC,MAAM;IAiDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
1
+ {"version":3,"file":"rich-button.d.ts","sourceRoot":"","sources":["../../../src/components/rich-button/rich-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,oBAAY,qBAAqB;IAC/B,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AACD,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhF,oBAAY,iBAAiB;IAC3B,UAAU,gBAAgB;IAC1B,UAAU,gBAAgB;IAC1B,SAAS,eAAe;CACzB;AACD,MAAM,MAAM,qBAAqB,GAC7B,aAAa,GACb,aAAa,GACb,YAAY,CAAC;AAEjB,qBACa,aAAc,SAAQ,UAAU;IACjB,QAAQ,EAAE,yBAAyB,CAC7B;IACN,IAAI,EAAE,qBAAqB,CACtB;IACJ,IAAI,UAAS;IACkB,cAAc,UAChE;IACmD,eAAe,UAClE;IAC4C,SAAS,UAAS;IACjB,UAAU,UAAS;IAChB,aAAa,UAAS;IACnD,MAAM,UAAS;IAEjC,MAAM;IAkDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
package/dist/components/rich-button/rich-button.js CHANGED
@@ -31,6 +31,7 @@ let ObcRichButton = class extends LitElement {
31
31
  super(...arguments);
32
32
  this.position = "regular";
33
33
  this.size = "single-line";
34
+ this.info = false;
34
35
  this.hasLeadingIcon = false;
35
36
  this.hasTrailingIcon = false;
36
37
  this.hasStatus = false;
@@ -46,6 +47,7 @@ let ObcRichButton = class extends LitElement {
46
47
  [this.position]: true,
47
48
  [this.size]: true,
48
49
  "graphic-border": this.graphicBorder,
50
+ info: this.info,
49
51
  border: this.border
50
52
  })}
51
53
  >
@@ -84,6 +86,9 @@ __decorateClass([
84
86
  __decorateClass([
85
87
  property({ type: String })
86
88
  ], ObcRichButton.prototype, "size", 2);
89
+ __decorateClass([
90
+ property({ type: Boolean })
91
+ ], ObcRichButton.prototype, "info", 2);
87
92
  __decorateClass([
88
93
  property({ type: Boolean, attribute: "has-leading-icon" })
89
94
  ], ObcRichButton.prototype, "hasLeadingIcon", 2);
package/dist/components/rich-button/rich-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"rich-button.js","sources":["../../../src/components/rich-button/rich-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './rich-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum ObcRichButtonPosition {\n Regular = 'regular',\n Top = 'top',\n Bottom = 'bottom',\n Center = 'center',\n}\nexport type ObcRichButtonPositionType = 'regular' | 'top' | 'bottom' | 'center';\n\nexport enum ObcRichButtonSize {\n SingleLine = 'single-line',\n DoubleLine = 'double-line',\n MultiLine = 'multi-line',\n}\nexport type ObcRichButtonSizeType =\n | 'single-line'\n | 'double-line'\n | 'multi-line';\n\n@customElement('obc-rich-button')\nexport class ObcRichButton extends LitElement {\n @property({type: String}) position: ObcRichButtonPositionType =\n ObcRichButtonPosition.Regular;\n @property({type: String}) size: ObcRichButtonSizeType =\n ObcRichButtonSize.SingleLine;\n @property({type: Boolean, attribute: 'has-leading-icon'}) hasLeadingIcon =\n false;\n @property({type: Boolean, attribute: 'has-trailing-icon'}) hasTrailingIcon =\n false;\n @property({type: Boolean, attribute: 'has-status'}) hasStatus = false;\n @property({type: Boolean, attribute: 'has-graphic'}) hasGraphic = false;\n @property({type: Boolean, attribute: 'graphic-border'}) graphicBorder = false;\n @property({type: Boolean}) border = false;\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n [this.position]: true,\n [this.size]: true,\n 'graphic-border': this.graphicBorder,\n border: this.border,\n })}\n >\n <button>\n ${this.hasGraphic\n ? html`<div class=\"graphic\"><slot name=\"graphic\"></slot></div>`\n : nothing}\n <div class=\"container\">\n <div class=\"container-content\">\n ${this.hasLeadingIcon\n ? html`<div class=\"leading-icon\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"content\">\n <slot name=\"label\"></slot>\n ${this.size === ObcRichButtonSize.SingleLine\n ? nothing\n : html`<slot name=\"description\"></slot>`}\n </div>\n </div>\n ${this.hasStatus\n ? html`\n <div class=\"status\">\n <slot name=\"status\"></slot>\n </div>\n `\n : nothing}\n ${this.hasTrailingIcon\n ? html`\n <div class=\"trailing-icon\">\n <slot name=\"trailing-icon\"></slot>\n </div>\n `\n : nothing}\n </div>\n </button>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-rich-button': ObcRichButton;\n }\n}\n"],"names":["ObcRichButtonPosition","ObcRichButtonSize"],"mappings":";;;;;;;;;;;;;;;AAKY,IAAA,0CAAAA,2BAAL;AACLA,yBAAA,SAAU,IAAA;AACVA,yBAAA,KAAM,IAAA;AACNA,yBAAA,QAAS,IAAA;AACTA,yBAAA,QAAS,IAAA;AAJCA,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAQA,IAAA,sCAAAC,uBAAL;AACLA,qBAAA,YAAa,IAAA;AACbA,qBAAA,YAAa,IAAA;AACbA,qBAAA,WAAY,IAAA;AAHFA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAWC,IAAA,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,WAAA;AAEA,SAAA,OAAA;AAEA,SAAA,iBAAA;AAEA,SAAA,kBAAA;AAC8D,SAAA,YAAA;AACE,SAAA,aAAA;AACM,SAAA,gBAAA;AACpC,SAAA,SAAA;AAAA,EAAA;AAAA,EAE3B,SAAS;AACT,WAAA;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,KAAK,QAAQ,GAAG;AAAA,MACjB,CAAC,KAAK,IAAI,GAAG;AAAA,MACb,kBAAkB,KAAK;AAAA,MACvB,QAAQ,KAAK;AAAA,IAAA,CACd,CAAC;AAAA;AAAA;AAAA,YAGE,KAAK,aACH,gEACA,OAAO;AAAA;AAAA;AAAA,gBAGL,KAAK,iBACH;AAAA;AAAA,4BAGA,OAAO;AAAA;AAAA;AAAA,kBAGP,KAAK,SAAS,gBACZ,UACA,sCAAsC;AAAA;AAAA;AAAA,cAG5C,KAAK,YACH;AAAA;AAAA;AAAA;AAAA,oBAKA,OAAO;AAAA,cACT,KAAK,kBACH;AAAA;AAAA;AAAA;AAAA,oBAKA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AAGF;AAhEa,cA+DK,SAAS,UAAU,YAAY;AA9DrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,cACe,WAAA,YAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,cAGe,WAAA,QAAA,CAAA;AAEgC,gBAAA;AAAA,EAAzD,SAAS,EAAC,MAAM,SAAS,WAAW,oBAAmB;AAAA,GAL7C,cAK+C,WAAA,kBAAA,CAAA;AAEC,gBAAA;AAAA,EAA1D,SAAS,EAAC,MAAM,SAAS,WAAW,qBAAoB;AAAA,GAP9C,cAOgD,WAAA,mBAAA,CAAA;AAEP,gBAAA;AAAA,EAAnD,SAAS,EAAC,MAAM,SAAS,WAAW,cAAa;AAAA,GATvC,cASyC,WAAA,aAAA,CAAA;AACC,gBAAA;AAAA,EAApD,SAAS,EAAC,MAAM,SAAS,WAAW,eAAc;AAAA,GAVxC,cAU0C,WAAA,cAAA,CAAA;AACG,gBAAA;AAAA,EAAvD,SAAS,EAAC,MAAM,SAAS,WAAW,kBAAiB;AAAA,GAX3C,cAW6C,WAAA,iBAAA,CAAA;AAC7B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAZd,cAYgB,WAAA,UAAA,CAAA;AAZhB,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}
1
+ {"version":3,"file":"rich-button.js","sources":["../../../src/components/rich-button/rich-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './rich-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum ObcRichButtonPosition {\n Regular = 'regular',\n Top = 'top',\n Bottom = 'bottom',\n Center = 'center',\n}\nexport type ObcRichButtonPositionType = 'regular' | 'top' | 'bottom' | 'center';\n\nexport enum ObcRichButtonSize {\n SingleLine = 'single-line',\n DoubleLine = 'double-line',\n MultiLine = 'multi-line',\n}\nexport type ObcRichButtonSizeType =\n | 'single-line'\n | 'double-line'\n | 'multi-line';\n\n@customElement('obc-rich-button')\nexport class ObcRichButton extends LitElement {\n @property({type: String}) position: ObcRichButtonPositionType =\n ObcRichButtonPosition.Regular;\n @property({type: String}) size: ObcRichButtonSizeType =\n ObcRichButtonSize.SingleLine;\n @property({type: Boolean}) info = false;\n @property({type: Boolean, attribute: 'has-leading-icon'}) hasLeadingIcon =\n false;\n @property({type: Boolean, attribute: 'has-trailing-icon'}) hasTrailingIcon =\n false;\n @property({type: Boolean, attribute: 'has-status'}) hasStatus = false;\n @property({type: Boolean, attribute: 'has-graphic'}) hasGraphic = false;\n @property({type: Boolean, attribute: 'graphic-border'}) graphicBorder = false;\n @property({type: Boolean}) border = false;\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n [this.position]: true,\n [this.size]: true,\n 'graphic-border': this.graphicBorder,\n info: this.info,\n border: this.border,\n })}\n >\n <button>\n ${this.hasGraphic\n ? html`<div class=\"graphic\"><slot name=\"graphic\"></slot></div>`\n : nothing}\n <div class=\"container\">\n <div class=\"container-content\">\n ${this.hasLeadingIcon\n ? html`<div class=\"leading-icon\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"content\">\n <slot name=\"label\"></slot>\n ${this.size === ObcRichButtonSize.SingleLine\n ? nothing\n : html`<slot name=\"description\"></slot>`}\n </div>\n </div>\n ${this.hasStatus\n ? html`\n <div class=\"status\">\n <slot name=\"status\"></slot>\n </div>\n `\n : nothing}\n ${this.hasTrailingIcon\n ? html`\n <div class=\"trailing-icon\">\n <slot name=\"trailing-icon\"></slot>\n </div>\n `\n : nothing}\n </div>\n </button>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-rich-button': ObcRichButton;\n }\n}\n"],"names":["ObcRichButtonPosition","ObcRichButtonSize"],"mappings":";;;;;;;;;;;;;;;AAKY,IAAA,0CAAAA,2BAAL;AACLA,yBAAA,SAAU,IAAA;AACVA,yBAAA,KAAM,IAAA;AACNA,yBAAA,QAAS,IAAA;AACTA,yBAAA,QAAS,IAAA;AAJCA,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAQA,IAAA,sCAAAC,uBAAL;AACLA,qBAAA,YAAa,IAAA;AACbA,qBAAA,YAAa,IAAA;AACbA,qBAAA,WAAY,IAAA;AAHFA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAWC,IAAA,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,WAAA;AAEA,SAAA,OAAA;AACgC,SAAA,OAAA;AAEhC,SAAA,iBAAA;AAEA,SAAA,kBAAA;AAC8D,SAAA,YAAA;AACE,SAAA,aAAA;AACM,SAAA,gBAAA;AACpC,SAAA,SAAA;AAAA,EAAA;AAAA,EAE3B,SAAS;AACT,WAAA;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,KAAK,QAAQ,GAAG;AAAA,MACjB,CAAC,KAAK,IAAI,GAAG;AAAA,MACb,kBAAkB,KAAK;AAAA,MACvB,MAAM,KAAK;AAAA,MACX,QAAQ,KAAK;AAAA,IAAA,CACd,CAAC;AAAA;AAAA;AAAA,YAGE,KAAK,aACH,gEACA,OAAO;AAAA;AAAA;AAAA,gBAGL,KAAK,iBACH;AAAA;AAAA,4BAGA,OAAO;AAAA;AAAA;AAAA,kBAGP,KAAK,SAAS,gBACZ,UACA,sCAAsC;AAAA;AAAA;AAAA,cAG5C,KAAK,YACH;AAAA;AAAA;AAAA;AAAA,oBAKA,OAAO;AAAA,cACT,KAAK,kBACH;AAAA;AAAA;AAAA;AAAA,oBAKA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AAGF;AAlEa,cAiEK,SAAS,UAAU,YAAY;AAhErB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,cACe,WAAA,YAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,cAGe,WAAA,QAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GALd,cAKgB,WAAA,QAAA,CAAA;AAC+B,gBAAA;AAAA,EAAzD,SAAS,EAAC,MAAM,SAAS,WAAW,oBAAmB;AAAA,GAN7C,cAM+C,WAAA,kBAAA,CAAA;AAEC,gBAAA;AAAA,EAA1D,SAAS,EAAC,MAAM,SAAS,WAAW,qBAAoB;AAAA,GAR9C,cAQgD,WAAA,mBAAA,CAAA;AAEP,gBAAA;AAAA,EAAnD,SAAS,EAAC,MAAM,SAAS,WAAW,cAAa;AAAA,GAVvC,cAUyC,WAAA,aAAA,CAAA;AACC,gBAAA;AAAA,EAApD,SAAS,EAAC,MAAM,SAAS,WAAW,eAAc;AAAA,GAXxC,cAW0C,WAAA,cAAA,CAAA;AACG,gBAAA;AAAA,EAAvD,SAAS,EAAC,MAAM,SAAS,WAAW,kBAAiB;AAAA,GAZ3C,cAY6C,WAAA,iBAAA,CAAA;AAC7B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAbd,cAagB,WAAA,UAAA,CAAA;AAbhB,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}
package/fix-generated.cjs CHANGED
@@ -20,6 +20,7 @@ function addRepositoryToPackageJsonVue() {
20
20
  url: 'git+https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents.git',
21
21
  directory: 'packages/openbridge-webcomponents-vue',
22
22
  };
23
+
23
24
  // add license
24
25
  packageJson.license = 'Apache-2.0';
25
26
  fs.writeFileSync(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oicl/openbridge-webcomponents",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
@@ -39,7 +39,7 @@
39
39
  "@lit-labs/cli": "^0.6.2",
40
40
  "@lit-labs/gen-wrapper-react": "^0.3.1",
41
41
  "@lit-labs/gen-wrapper-vue": "^0.3.2",
42
- "@open-wc/lit-helpers": "^0.6.0",
42
+ "@open-wc/lit-helpers": "^0.7.0",
43
43
  "@storybook/addon-essentials": "^7.6.7",
44
44
  "@storybook/addon-interactions": "^7.6.17",
45
45
  "@storybook/addon-links": "^7.6.7",
@@ -70,6 +70,7 @@
70
70
  "prettier": "^3.1.1",
71
71
  "react": "^18.2.0",
72
72
  "react-dom": "^18.2.0",
73
+ "release-it": "^17.1.1",
73
74
  "rollup-plugin-postcss-lit": "^2.1.0",
74
75
  "storybook": "^7.6.7",
75
76
  "tsx": "^3.14.0",
package/src/components/rich-button/rich-button.css CHANGED
@@ -4,6 +4,9 @@
4
4
 
5
5
  .wrapper {
6
6
  position: relative;
7
+ }
8
+
9
+ .wrapper:not(.info) {
7
10
  background-color: var(--container-background-color);
8
11
  box-shadow: var(--shadow-flat);
9
12
  overflow: hidden;
@@ -22,12 +25,16 @@
22
25
  button {
23
26
  width: 100%;
24
27
  appearance: none;
25
- @mixin style style=flat;
26
- border-width: 0 !important;
27
28
  display: flex;
28
29
  flex-direction: column;
29
30
  text-align: left;
30
31
  padding: 0;
32
+ border-width: 0 !important;
33
+ background-color: transparent;
34
+ }
35
+
36
+ .wrapper:not(.info) button {
37
+ @mixin style style=flat;
31
38
  }
32
39
 
33
40
  .top.border button, .center.border button {
@@ -116,3 +123,9 @@ button {
116
123
  border-bottom: 1px solid var(--border-outline-color);
117
124
  margin-bottom: -1px;
118
125
  }
126
+
127
+ .info .graphic {
128
+ border-radius: 6px;
129
+ box-shadow: var(--shadow-flat);
130
+ overflow: hidden;
131
+ }
package/src/components/rich-button/rich-button.stories.ts CHANGED
@@ -5,6 +5,7 @@ import {html} from 'lit';
5
5
  import '../../icons/icon-01-placeholder';
6
6
  import '../../icons/icon-02-chevron-right';
7
7
  import '../../icons/icon-01-print';
8
+ import '../../icons/icon-03-support';
8
9
  import {spread} from '@open-wc/lit-helpers';
9
10
 
10
11
  const meta: Meta<typeof ObcRichButton> = {
@@ -194,3 +195,38 @@ export const WithGraphicBorder: Story = {
194
195
  <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
195
196
  </obc-rich-button> `,
196
197
  };
198
+
199
+ export const WithGraphicInfo: Story = {
200
+ args: {
201
+ size: 'multi-line',
202
+ hasLeadingIcon: false,
203
+ hasTrailingIcon: false,
204
+ hasGraphic: true,
205
+ graphicBorder: false,
206
+ info: true,
207
+ },
208
+ render: (args) =>
209
+ html`<obc-rich-button
210
+ position=${args.position}
211
+ size=${args.size}
212
+ ?has-graphic=${args.hasGraphic}
213
+ ?has-leading-icon=${args.hasLeadingIcon}
214
+ ?has-trailing-icon=${args.hasTrailingIcon}
215
+ ?graphic-border=${args.graphicBorder}
216
+ ?info=${args.info}
217
+ >
218
+ <div
219
+ slot="graphic"
220
+ style="width: 100%; height: 120px; color: var(--element-active-inverted-color); background: var(--instrument-enhanced-secondary-color); padding-top: 40px; padding-bottom: 32px"
221
+ >
222
+ <obi-03-support></obi-03-support>
223
+ </div>
224
+ <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
225
+ <div slot="label">Title</div>
226
+ <div slot="description">
227
+ A long description, with a text spanning over multiple lines. Lorem
228
+ ipsum dolor sit amet, consectetur adipiscing elit.
229
+ </div>
230
+ <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
231
+ </obc-rich-button> `,
232
+ };
package/src/components/rich-button/rich-button.ts CHANGED
@@ -27,6 +27,7 @@ export class ObcRichButton extends LitElement {
27
27
  ObcRichButtonPosition.Regular;
28
28
  @property({type: String}) size: ObcRichButtonSizeType =
29
29
  ObcRichButtonSize.SingleLine;
30
+ @property({type: Boolean}) info = false;
30
31
  @property({type: Boolean, attribute: 'has-leading-icon'}) hasLeadingIcon =
31
32
  false;
32
33
  @property({type: Boolean, attribute: 'has-trailing-icon'}) hasTrailingIcon =
@@ -44,6 +45,7 @@ export class ObcRichButton extends LitElement {
44
45
  [this.position]: true,
45
46
  [this.size]: true,
46
47
  'graphic-border': this.graphicBorder,
48
+ info: this.info,
47
49
  border: this.border,
48
50
  })}
49
51
  >
package/.yarnrc.yml DELETED
@@ -1 +0,0 @@
1
- nodeLinker: node-modules
package/test.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" fill="none" viewBox="0 0 512 512">
2
- <path fill="#fff" stroke="#D9D9D9" stroke-width="5" d="M453.5 256c0 109.076-88.424 197.5-197.5 197.5S58.5 365.076 58.5 256 146.924 58.5 256 58.5 453.5 146.924 453.5 256ZM256 434.5c98.583 0 178.5-79.917 178.5-178.5S354.583 77.5 256 77.5 77.5 157.417 77.5 256 157.417 434.5 256 434.5Z" vector-effect="non-scaling-stroke"/>
3
- </svg>