@oicl/openbridge-webcomponents 0.0.8 → 0.0.9

Sign up to get free protection for your applications and to get access to all the features.
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>