@ironsource/shared-ui 2.1.6-rc.42 → 2.1.6-rc.43

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 (7) hide show
  1. package/{FormCard.vue_vue_type_style_index_0_scoped_52ade67c_lang.css → FormCard.vue_vue_type_style_index_0_scoped_c7965a69_lang.css} +1 -1
  2. package/README.md +35 -0
  3. package/components/forms/FormCard.vue.d.ts +5 -0
  4. package/components/forms/FormCard.vue.js +3 -3
  5. package/components/forms/FormCard.vue2.js +23 -22
  6. package/components/forms/index.d.ts +20 -1
  7. package/package.json +1 -1
package/{FormCard.vue_vue_type_style_index_0_scoped_52ade67c_lang.css → FormCard.vue_vue_type_style_index_0_scoped_c7965a69_lang.css} RENAMED
@@ -1 +1 @@
1
- .form-card[data-v-52ade67c]{border-radius:var(--border-radius-sm);border:1px solid var(--common-divider);background:var(--background-paper)}.card-header[data-v-52ade67c]{display:flex;flex-direction:row;align-items:center;min-height:var(--spacing-600);border-radius:calc(var(--border-radius-sm) - 1px) calc(var(--border-radius-sm) - 1px) 0 0;color:var(--text-primary);background:var(--background-paper-elevation-0);padding:0 var(--spacing-300);border-bottom:1px solid var(--common-divider)}.card-header .skeleton-header[data-v-52ade67c]{width:220px;height:20px}.card-content[data-v-52ade67c]{padding:var(--spacing-400) var(--spacing-500) var(--spacing-500) var(--spacing-500)}.card-content--no-padding[data-v-52ade67c]{padding:0}.form-actions[data-v-52ade67c]{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;min-height:var(--spacing-700)}.form-action[data-v-52ade67c]{margin-left:var(--spacing-100)}.content-skeleton-container[data-v-52ade67c]{display:flex;flex-direction:column}.content-skeleton-container .skeleton-long[data-v-52ade67c]{margin-bottom:24px;width:100%;max-width:896px;height:16px}.content-skeleton-container .skeleton-short[data-v-52ade67c]{margin-bottom:24px;width:100%;max-width:436px;height:16px}
1
+ .form-card[data-v-c7965a69]{border-radius:var(--border-radius-sm);border:1px solid var(--common-divider);background:var(--background-paper)}.card-header[data-v-c7965a69]{display:flex;flex-direction:row;align-items:center;min-height:var(--spacing-600);border-radius:calc(var(--border-radius-sm) - 1px) calc(var(--border-radius-sm) - 1px) 0 0;color:var(--text-primary);background:var(--background-paper-elevation-0);padding:0 var(--spacing-300);border-bottom:1px solid var(--common-divider)}.card-header .skeleton-header[data-v-c7965a69]{width:220px;height:20px}.card-content[data-v-c7965a69]{padding:var(--spacing-400) var(--spacing-500) var(--spacing-500) var(--spacing-500)}.card-content--no-padding[data-v-c7965a69]{padding:0}.form-actions[data-v-c7965a69]{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;min-height:var(--spacing-700)}.form-action[data-v-c7965a69]{margin-left:var(--spacing-100)}.content-skeleton-container[data-v-c7965a69]{display:flex;flex-direction:column}.content-skeleton-container .skeleton-long[data-v-c7965a69]{margin-bottom:24px;width:100%;max-width:896px;height:16px}.content-skeleton-container .skeleton-short[data-v-c7965a69]{margin-bottom:24px;width:100%;max-width:436px;height:16px}
package/README.md CHANGED
@@ -130,3 +130,38 @@ npm run pw:ui:local
130
130
  ```
131
131
 
132
132
  Read more about this project <a href="https://github.com/ironsource-mobile/shared-ui-ssp/blob/main/e2e/playwright/README.md">here</a>
133
+
134
+ ## Upload custom icons
135
+
136
+ For uploading a new custom icon like 'ad-network' icon type, follow the next steps:
137
+
138
+ - Compress your SVG
139
+ - Go to <a href="https://svgomg.net/">SVGOMG tool</a> and past your SVG icon
140
+ - Then download the new compressed icon
141
+
142
+ - Validate your SVG
143
+ - Open the SVG file with your editor
144
+ - Make sure the it has `fill="currentColor"` wherever the color should be changeable
145
+ - Make sure it has no width & height hardcoded properties
146
+ - Make sure it has no ids like 'a' or 'b' which possibly won't be unique (change `id="a"` to `id="applovin_a"` for example)
147
+
148
+ - Upload to S3
149
+ - Connect to AWS through Okta
150
+ - Go to S3
151
+ - Search Bucket named 'fusion-assets'
152
+ - Go to the 'fusion-assets/assets/icons/...'
153
+ - Go to the right folder for you
154
+ - Drag your SVG files to the table in order to upload them
155
+
156
+ - Invalidate Cache
157
+ - Connect to AWS through Okta
158
+ - Go to CloudFront
159
+ - Search a distribution named 'fusion.ironsrc.net'
160
+ - Go to the 'Invalidations' tab
161
+ - Create the correct invalidation according to what you've uploaded earlier (example: '/assets/icons/v4/ad-networks/*')
162
+ - Note: you can use the old invalidations by clicking 'Copy to new'
163
+
164
+ - Clear your browser cache
165
+ - Go to your StoryBook link
166
+ - Clear your browser cache
167
+ - New icons should be displayed!!
package/components/forms/FormCard.vue.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
5
5
  saveLabel?: string;
6
6
  cancelLabel?: string;
7
7
  saveLoading?: boolean;
8
+ saveDisabled?: boolean;
8
9
  testId?: string;
9
10
  isLoading?: boolean;
10
11
  }>, {
@@ -14,6 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
14
15
  cancelLabel: string;
15
16
  saveLabel: string;
16
17
  saveLoading: boolean;
18
+ saveDisabled: boolean;
17
19
  testId: string;
18
20
  isLoading: boolean;
19
21
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -26,6 +28,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
26
28
  saveLabel?: string;
27
29
  cancelLabel?: string;
28
30
  saveLoading?: boolean;
31
+ saveDisabled?: boolean;
29
32
  testId?: string;
30
33
  isLoading?: boolean;
31
34
  }>, {
@@ -35,6 +38,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
35
38
  cancelLabel: string;
36
39
  saveLabel: string;
37
40
  saveLoading: boolean;
41
+ saveDisabled: boolean;
38
42
  testId: string;
39
43
  isLoading: boolean;
40
44
  }>>> & {
@@ -49,6 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
49
53
  saveLabel: string;
50
54
  cancelLabel: string;
51
55
  saveLoading: boolean;
56
+ saveDisabled: boolean;
52
57
  }>, {
53
58
  header?(_: {}): any;
54
59
  default?(_: {}): any;
package/components/forms/FormCard.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import o from "./FormCard.vue2.js";
2
- /* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../FormCard.vue_vue_type_style_index_0_scoped_52ade67c_lang.css"; //*');
4
- const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-52ade67c"]]);
2
+ /* empty css */import _ from "../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../FormCard.vue_vue_type_style_index_0_scoped_c7965a69_lang.css"; //*');
4
+ const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-c7965a69"]]);
5
5
  export {
6
6
  t as default
7
7
  };
package/components/forms/FormCard.vue2.js CHANGED
@@ -1,14 +1,14 @@
1
- import "../../FormCard.vue_vue_type_style_index_0_scoped_52ade67c_lang.css"; import { defineComponent as T, openBlock as d, createElementBlock as c, createElementVNode as f, mergeProps as l, unref as e, renderSlot as u, createVNode as a, withCtx as m, createTextVNode as g, toDisplayString as v, createBlock as B, createCommentVNode as C } from "vue";
2
- import N from "../typography/v4/Typography.vue.js";
3
- import y from "../button/v4/ButtonV4.vue.js";
1
+ import "../../FormCard.vue_vue_type_style_index_0_scoped_c7965a69_lang.css"; import { defineComponent as B, openBlock as d, createElementBlock as c, createElementVNode as f, mergeProps as n, unref as e, renderSlot as u, createVNode as a, withCtx as m, createTextVNode as g, toDisplayString as v, createBlock as T, createCommentVNode as C } from "vue";
2
+ import b from "../typography/v4/Typography.vue.js";
3
+ import k from "../button/v4/ButtonV4.vue.js";
4
4
  import "../button/v4/IconButtonV4.vue.js";
5
5
  import { FormCardTestIdModifiers as o } from "../../testids/index.js";
6
- import { useTestIdAttrs as b } from "../../utils/testIds.js";
6
+ import { useTestIdAttrs as N } from "../../utils/testIds.js";
7
7
  import i from "../skeleton/v4/SkeletonV4.vue.js";
8
8
  const h = { class: "form-card" }, p = {
9
9
  key: 1,
10
10
  class: "content-skeleton-container"
11
- }, z = /* @__PURE__ */ T({
11
+ }, P = /* @__PURE__ */ B({
12
12
  __name: "FormCard",
13
13
  props: {
14
14
  title: { default: "" },
@@ -17,22 +17,23 @@ const h = { class: "form-card" }, p = {
17
17
  saveLabel: { default: "Save" },
18
18
  cancelLabel: { default: "Cancel" },
19
19
  saveLoading: { type: Boolean, default: !1 },
20
+ saveDisabled: { type: Boolean, default: !1 },
20
21
  testId: { default: "" },
21
22
  isLoading: { type: Boolean, default: !1 }
22
23
  },
23
24
  emits: ["save", "cancel"],
24
- setup(t, { emit: k }) {
25
- const n = b(t.testId, o);
25
+ setup(t, { emit: y }) {
26
+ const l = N(t.testId, o);
26
27
  return (r, s) => (d(), c("div", null, [
27
28
  f("div", h, [
28
- f("header", l({ class: "card-header" }, e(n)[e(o).TITLE]), [
29
- t.isLoading ? (d(), B(e(i), {
29
+ f("header", n({ class: "card-header" }, e(l)[e(o).TITLE]), [
30
+ t.isLoading ? (d(), T(e(i), {
30
31
  key: 1,
31
32
  type: "rectangle",
32
33
  size: 20,
33
34
  class: "skeleton-header"
34
35
  })) : u(r.$slots, "header", { key: 0 }, () => [
35
- a(e(N), { variant: "h3" }, {
36
+ a(e(b), { variant: "h3" }, {
36
37
  default: m(() => [
37
38
  g(v(t.title), 1)
38
39
  ]),
@@ -40,9 +41,9 @@ const h = { class: "form-card" }, p = {
40
41
  })
41
42
  ], !0)
42
43
  ], 16),
43
- f("div", l({
44
+ f("div", n({
44
45
  class: ["card-content", { "card-content--no-padding": t.noPadding }]
45
- }, e(n)[e(o).CONTENT]), [
46
+ }, e(l)[e(o).CONTENT]), [
46
47
  t.isLoading ? (d(), c("div", p, [
47
48
  a(e(i), {
48
49
  type: "rectangle",
@@ -60,30 +61,30 @@ const h = { class: "form-card" }, p = {
60
61
  ])) : u(r.$slots, "default", { key: 0 }, void 0, !0)
61
62
  ], 16)
62
63
  ]),
63
- t.actionButtons ? (d(), c("div", l({
64
+ t.actionButtons ? (d(), c("div", n({
64
65
  key: 0,
65
66
  class: "form-actions"
66
- }, e(n)[e(o).ACTIONS]), [
67
+ }, e(l)[e(o).ACTIONS]), [
67
68
  u(r.$slots, "footer", {}, () => [
68
- a(e(y), l({
69
+ a(e(k), n({
69
70
  class: "form-action",
70
71
  variant: "outlined",
71
72
  color: "default"
72
- }, e(n)[e(o).CANCEL_BUTTON], {
73
+ }, e(l)[e(o).CANCEL_BUTTON], {
73
74
  disabled: t.isLoading || t.saveLoading,
74
- onClick: s[0] || (s[0] = (L) => k("cancel"))
75
+ onClick: s[0] || (s[0] = (L) => y("cancel"))
75
76
  }), {
76
77
  default: m(() => [
77
78
  g(v(t.cancelLabel), 1)
78
79
  ]),
79
80
  _: 1
80
81
  }, 16, ["disabled"]),
81
- a(e(y), l({
82
+ a(e(k), n({
82
83
  class: "form-action",
83
84
  loading: t.saveLoading
84
- }, e(n)[e(o).SAVE_BUTTON], {
85
- disabled: t.isLoading,
86
- onClick: s[1] || (s[1] = (L) => k("save"))
85
+ }, e(l)[e(o).SAVE_BUTTON], {
86
+ disabled: t.saveDisabled || t.isLoading,
87
+ onClick: s[1] || (s[1] = (L) => y("save"))
87
88
  }), {
88
89
  default: m(() => [
89
90
  g(v(t.saveLabel), 1)
@@ -96,5 +97,5 @@ const h = { class: "form-card" }, p = {
96
97
  }
97
98
  });
98
99
  export {
99
- z as default
100
+ P as default
100
101
  };
package/components/forms/index.d.ts CHANGED
@@ -163,6 +163,7 @@ declare const FormCardTypes: () => (({
163
163
  saveLabel: string;
164
164
  cancelLabel: string;
165
165
  saveLoading: boolean;
166
+ saveDisabled: boolean;
166
167
  }> & Omit<Readonly<import("vue").ExtractPropTypes<{
167
168
  title: {
168
169
  type: import("vue").PropType<string>;
@@ -196,10 +197,14 @@ declare const FormCardTypes: () => (({
196
197
  type: import("vue").PropType<boolean>;
197
198
  default: boolean;
198
199
  };
200
+ saveDisabled: {
201
+ type: import("vue").PropType<boolean>;
202
+ default: boolean;
203
+ };
199
204
  }>> & {
200
205
  onCancel?: () => any;
201
206
  onSave?: () => any;
202
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "testId" | "actionButtons" | "isLoading" | "noPadding" | "saveLabel" | "cancelLabel" | "saveLoading">;
207
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "testId" | "actionButtons" | "isLoading" | "noPadding" | "saveLabel" | "cancelLabel" | "saveLoading" | "saveDisabled">;
203
208
  $attrs: {
204
209
  [x: string]: unknown;
205
210
  };
@@ -246,6 +251,10 @@ declare const FormCardTypes: () => (({
246
251
  type: import("vue").PropType<boolean>;
247
252
  default: boolean;
248
253
  };
254
+ saveDisabled: {
255
+ type: import("vue").PropType<boolean>;
256
+ default: boolean;
257
+ };
249
258
  }>> & {
250
259
  onCancel?: () => any;
251
260
  onSave?: () => any;
@@ -261,6 +270,7 @@ declare const FormCardTypes: () => (({
261
270
  saveLabel: string;
262
271
  cancelLabel: string;
263
272
  saveLoading: boolean;
273
+ saveDisabled: boolean;
264
274
  }, {}, string> & {
265
275
  beforeCreate?: (() => void) | (() => void)[];
266
276
  created?: (() => void) | (() => void)[];
@@ -314,6 +324,10 @@ declare const FormCardTypes: () => (({
314
324
  type: import("vue").PropType<boolean>;
315
325
  default: boolean;
316
326
  };
327
+ saveDisabled: {
328
+ type: import("vue").PropType<boolean>;
329
+ default: boolean;
330
+ };
317
331
  }>> & {
318
332
  onCancel?: () => any;
319
333
  onSave?: () => any;
@@ -354,6 +368,10 @@ declare const FormCardTypes: () => (({
354
368
  type: import("vue").PropType<boolean>;
355
369
  default: boolean;
356
370
  };
371
+ saveDisabled: {
372
+ type: import("vue").PropType<boolean>;
373
+ default: boolean;
374
+ };
357
375
  }>> & {
358
376
  onCancel?: () => any;
359
377
  onSave?: () => any;
@@ -369,6 +387,7 @@ declare const FormCardTypes: () => (({
369
387
  saveLabel: string;
370
388
  cancelLabel: string;
371
389
  saveLoading: boolean;
390
+ saveDisabled: boolean;
372
391
  }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
373
392
  $slots: {
374
393
  header?(_: {}): any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ironsource/shared-ui",
3
- "version": "2.1.6-rc.42",
3
+ "version": "2.1.6-rc.43",
4
4
  "engines": {
5
5
  "npm": ">=7.0.0",
6
6
  "node": ">=16.0.0"