@ironsource/shared-ui 1.4.2-andyk.0 → 1.4.2-andyk.2

package/assets/Toggle.vue_vue_type_style_index_0_scoped_true_lang.css

@@ -1 +1 @@
-.label[data-v-6627e5c5]{color:#41454d}.toggle-body[data-v-6627e5c5]{background-color:#d2d5d8;border-radius:100px;width:1.75rem;height:1rem;position:relative;cursor:pointer;display:inline-block}.toggle-body.toggle-disabled[data-v-6627e5c5]{cursor:default;background-color:#d2d5d8b3}.toggle-body.toggle-active.toggle-disabled[data-v-6627e5c5]{background-color:var(--a1fed734);opacity:.7}.toggle-head[data-v-6627e5c5]{background-color:#fff;border-radius:100px;width:.75rem;height:.75rem;position:absolute;left:.125rem;top:.125rem;transition:transform .25s linear}.toggle-active.toggle-body[data-v-6627e5c5]{background-color:var(--a1fed734)}.toggle-active .toggle-head[data-v-6627e5c5]{transform:translate(.75rem)}.checkbox[data-v-6627e5c5]{display:none}.item-text[data-v-6627e5c5]{display:inline-block;padding-left:.5rem;line-height:1rem;color:#53575b}.item-text.text-disabled[data-v-6627e5c5]{color:#8e959d}.helper-text[data-v-6627e5c5]{display:block;color:#696a6b;padding-top:.375rem}.error-text[data-v-6627e5c5]{display:block;color:#da564f;padding-top:.375rem}.error-and-help[data-v-6627e5c5]{padding-top:0}.toggle-wrap[data-v-6627e5c5]{height:1rem}
+.label[data-v-27275176]{color:#41454d}.loader[data-v-27275176]{width:10px;height:10px;border:1.2px solid #D2D5D8;border-bottom-color:transparent;border-radius:100%;display:inline-block;box-sizing:border-box;animation:rotation-27275176 1s linear infinite}.loader.loader-active[data-v-27275176]{border:1.2px solid var(--7a6f4588);border-bottom-color:transparent}@keyframes rotation-27275176{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toggle-body[data-v-27275176]{background-color:#d2d5d8;border-radius:100px;width:1.75rem;height:1rem;position:relative;cursor:pointer;display:inline-block}.toggle-body.toggle-disabled[data-v-27275176]{cursor:default;background-color:#d2d5d8b3}.toggle-body.toggle-active.toggle-disabled[data-v-27275176]{background-color:var(--7a6f4588);opacity:.7}.toggle-head[data-v-27275176]{background-color:#fff;border-radius:100px;width:.75rem;height:.75rem;position:absolute;left:.125rem;top:.125rem;transition:transform .25s linear;display:flex;justify-content:center;align-items:center}.toggle-active.toggle-body[data-v-27275176]{background-color:var(--7a6f4588)}.toggle-active .toggle-head[data-v-27275176]{transform:translate(.75rem)}.checkbox[data-v-27275176]{display:none}.item-text[data-v-27275176]{display:inline-block;padding-left:.5rem;line-height:1rem;color:#53575b}.item-text.text-disabled[data-v-27275176]{color:#8e959d}.helper-text[data-v-27275176]{display:block;color:#696a6b;padding-top:.375rem}.error-text[data-v-27275176]{display:block;color:#da564f;padding-top:.375rem}.error-and-help[data-v-27275176]{padding-top:0}.toggle-wrap[data-v-27275176]{height:1rem}

package/assets/Typography.vue_vue_type_style_index_0_scoped_true_lang.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";.font-chart-2[data-v-16019926],.font-chart-1[data-v-16019926]{font-family:Inter,sans-serif;font-weight:700}.font-chip-label[data-v-16019926],.font-table-header[data-v-16019926],.font-button[data-v-16019926],.font-heading-6[data-v-16019926],.font-heading-5[data-v-16019926],.font-heading-4[data-v-16019926],.font-heading-3[data-v-16019926],.font-heading-2[data-v-16019926],.font-heading-1[data-v-16019926],.font-title[data-v-16019926]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label[data-v-16019926],.font-input-label[data-v-16019926],.font-overline[data-v-16019926],.font-subtitle-2[data-v-16019926],.font-subtitle-1[data-v-16019926]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-16019926],.font-body-2[data-v-16019926],.font-body-1[data-v-16019926]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-16019926]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-16019926]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-16019926]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-16019926]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-16019926]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-16019926]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-16019926]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-16019926]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-16019926]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-16019926]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-16019926]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-16019926]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-16019926]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-16019926]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-16019926]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-16019926]{font-size:.75rem;line-height:1rem}.font-table-header[data-v-16019926]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-16019926]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label[data-v-16019926]{font-size:.875rem;line-height:1rem}.font-chip-label[data-v-16019926]{font-size:.75rem;line-height:1rem}h1[data-v-16019926],h2[data-v-16019926],h3[data-v-16019926],h4[data-v-16019926],h5[data-v-16019926],h6[data-v-16019926]{margin:0}.truncate[data-v-16019926]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}

package/components/toggle/Toggle.vue.d.ts

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     errorText?: string;
     helperText?: string;
     isDisabled?: boolean;
+    isLoading?: boolean;
     color?: string;
 }>, {
     activeText: any;
@@ -12,6 +13,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     errorText: any;
     helperText: any;
     isDisabled: boolean;
+    isLoading: boolean;
     color: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => void;
@@ -22,6 +24,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     errorText?: string;
     helperText?: string;
     isDisabled?: boolean;
+    isLoading?: boolean;
     color?: string;
 }>, {
     activeText: any;
@@ -29,12 +32,14 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     errorText: any;
     helperText: any;
     isDisabled: boolean;
+    isLoading: boolean;
     color: string;
 }>>> & {
     "onUpdate:modelValue"?: (value: boolean) => any;
 }, {
     helperText: string;
     color: string;
+    isLoading: boolean;
     errorText: string;
     activeText: string;
     inactiveText: string;

package/components/toggle/Toggle.vue.js

@@ -1,16 +1,12 @@
-import { defineComponent, useCssVars, openBlock, createElementBlock, createElementVNode, normalizeClass, createVNode, unref, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, pushScopeId, popScopeId } from 'vue';
+import { defineComponent, useCssVars, openBlock, createElementBlock, createElementVNode, normalizeClass, createCommentVNode, createVNode, unref, withCtx, createTextVNode, toDisplayString, createBlock } from 'vue';
 /* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 import Text from '../typography/Text.vue.js';
 import { COLORS } from '../../consts/colors.vue.js';
 /* empty css                                                        */
 import "../../assets/Toggle.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _withScopeId = (n) => (pushScopeId("data-v-6627e5c5"), n = n(), popScopeId(), n);
 const _hoisted_1 = { class: "toggle-wrap" };
-const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "toggle-head" }, null, -1));
-const _hoisted_3 = [
-  _hoisted_2
-];
-const _hoisted_4 = ["disabled", "checked"];
+const _hoisted_2 = { class: "toggle-head" };
+const _hoisted_3 = ["disabled", "checked"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Toggle",
   props: {
@@ -20,13 +16,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     errorText: { default: void 0 },
     helperText: { default: void 0 },
     isDisabled: { type: Boolean, default: false },
+    isLoading: { type: Boolean, default: false },
     color: { default: COLORS.PRIMARY_500 }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "a1fed734": __props.color
+      "7a6f4588": __props.color
     }));
     const toggleValue = () => {
       if (props.isDisabled)
@@ -39,13 +36,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(["toggle-body", { "toggle-active": __props.modelValue, "toggle-disabled": __props.isDisabled }]),
             onClick: toggleValue
-          }, _hoisted_3, 2),
+          }, [
+            createElementVNode("div", _hoisted_2, [
+              __props.isLoading ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(["loader", {
+                  "loader-active": __props.modelValue
+                }])
+              }, null, 2)) : createCommentVNode("", true)
+            ])
+          ], 2),
           createElementVNode("input", {
             type: "checkbox",
             disabled: __props.isDisabled,
             checked: __props.modelValue,
             class: "checkbox"
-          }, null, 8, _hoisted_4),
+          }, null, 8, _hoisted_3),
           createVNode(unref(Text), {
             size: "sm",
             "is-truncated": "",
@@ -83,6 +89,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Toggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6627e5c5"]]);
+var Toggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-27275176"]]);
 
 export { Toggle as default };

package/components/toggle/index.d.ts

@@ -13,6 +13,11 @@ declare const ToggleTypes: () => import("vue").DefineComponent<{
     } & {
         default: string;
     };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
     errorText: {
         type: import("vue").PropType<string>;
     } & {
@@ -50,6 +55,11 @@ declare const ToggleTypes: () => import("vue").DefineComponent<{
     } & {
         default: string;
     };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
     errorText: {
         type: import("vue").PropType<string>;
     } & {
@@ -75,6 +85,7 @@ declare const ToggleTypes: () => import("vue").DefineComponent<{
 }, {
     helperText: string;
     color: string;
+    isLoading: boolean;
     errorText: string;
     activeText: string;
     inactiveText: string;

package/components/typography/v4/Typography.vue.js

@@ -0,0 +1,67 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, unref, normalizeClass, withCtx, renderSlot } from 'vue';
+/* empty css                                                            */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+////import "../../assets/Typography.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Typography",
+  props: {
+    isTruncated: { type: Boolean },
+    variant: { default: "body1" }
+  },
+  setup(__props) {
+    const props = __props;
+    const variantToClassMap = {
+      title: "font-title",
+      h1: "font-heading-1",
+      h2: "font-heading-2",
+      h3: "font-heading-3",
+      h4: "font-heading-4",
+      h5: "font-heading-5",
+      h6: "font-heading-6",
+      body1: "font-body-1",
+      body2: "font-body-2",
+      subtitle1: "font-subtitle-1",
+      subtitle2: "font-subtitle-2",
+      button: "font-button",
+      caption: "font-caption",
+      tableHeader: "font-table-header",
+      inputLabel: "font-input-label",
+      tabLabel: "font-tab-label",
+      chipLabel: "font-chip-label",
+      chart1: "font-chart-1",
+      chart2: "font-chart-2",
+      overline: "font-overline"
+    };
+    const tag = computed(() => {
+      switch (props.variant) {
+        case "title":
+          return "h1";
+        case "h1":
+        case "h2":
+        case "h3":
+        case "h4":
+        case "h5":
+        case "h6":
+          return props.variant;
+        default:
+          return "span";
+      }
+    });
+    const fontClass = computed(() => {
+      return variantToClassMap[props.variant];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(tag)), {
+        class: normalizeClass({ [unref(fontClass)]: true, truncate: __props.isTruncated })
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+});
+var Typography = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-16019926"]]);
+
+export { Typography as default };

package/components/typography/v4/index.d.ts

@@ -1,4 +1,4 @@
-declare const TypographyTypes: () => import("vue").DefineComponent<{
+declare const TypographyTypesV4: () => import("vue").DefineComponent<{
     isTruncated: {
         type: import("vue").PropType<boolean>;
     };
@@ -20,4 +20,4 @@ declare const TypographyTypes: () => import("vue").DefineComponent<{
     variant: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "tableHeader" | "inputLabel" | "tabLabel" | "chipLabel" | "chart1" | "chart2";
 }>[];
 export { default as Typography } from './Typography.vue';
-export { TypographyTypes };
+export { TypographyTypesV4 };

package/components/typography/v4/index.vue.js

@@ -0,0 +1,6 @@
+import Typography from './Typography.vue.js';
+export { default as Typography } from './Typography.vue.js';
+
+const TypographyTypesV4 = () => [Typography];
+
+export { TypographyTypesV4 };

package/index.d.ts

@@ -23,6 +23,7 @@ export * from '@/components/icon';
 export * from '@/components/search';
 export * from '@/components/skeleton';
 export * from '@/components/typography';
+export * from '@/components/typography/v4';
 export * from '@/components/popover';
 export * from '@/components/chip';
 export * from '@/components/toggle';

package/index.vue.js

@@ -23,6 +23,7 @@ export { IconTypes } from './components/icon/index.vue.js';
 export { SearchTypes } from './components/search/index.vue.js';
 export { SkeletonTypes } from './components/skeleton/index.vue.js';
 export { TypographyTypes } from './components/typography/index.vue.js';
+export { TypographyTypesV4 } from './components/typography/v4/index.vue.js';
 export { PopoverTypes } from './components/popover/index.vue.js';
 export { ChipTypes } from './components/chip/index.vue.js';
 export { ToggleTypes } from './components/toggle/index.vue.js';
@@ -78,6 +79,7 @@ export { default as Search } from './components/search/Search.vue.js';
 export { default as Skeleton } from './components/skeleton/Skeleton.vue.js';
 export { default as Heading } from './components/typography/Heading.vue.js';
 export { default as Text } from './components/typography/Text.vue.js';
+export { default as Typography } from './components/typography/v4/Typography.vue.js';
 export { default as Chip } from './components/chip/Chip.vue.js';
 export { default as Toggle } from './components/toggle/Toggle.vue.js';
 export { default as Input } from './components/input/Input.vue.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "1.4.2-andyk.0",
+  "version": "1.4.2-andyk.2",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
@@ -62,8 +62,6 @@
     "@babel/core": "7.17.9",
     "@babel/node": "7.16.8",
     "@commitlint/cli": "^17.0.3",
-    "i": "^0.3.7",
-    "npm": "^8.19.2",
     "@commitlint/config-conventional": "^17.0.3",
     "@figus/cli": "^2.0.8",
     "@mdx-js/react": "^2.1.2",
@@ -78,6 +76,7 @@
     "@storybook/mdx2-csf": "^0.0.3",
     "@storybook/test-runner": "^0.5.0",
     "@storybook/vue3": "^6.5.9",
+    "@ironsource/storybook-addon-stackblitz": "^0.1.5",
     "@types/download": "^8.0.1",
     "@types/node": "^18.0.0",
     "@types/prismjs": "^1.26.0",
@@ -103,6 +102,7 @@
     "happy-dom": "^2.49.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.1",
+    "i": "^0.3.7",
     "jest": "^27.5.1",
     "jest-image-snapshot": "^6.1.0",
     "jest-puppeteer": "^6.2.0",
@@ -110,6 +110,7 @@
     "lodash.kebabcase": "^4.1.1",
     "mustache": "^4.2.0",
     "nodejs-file-downloader": "^4.10.1",
+    "npm": "^8.19.2",
     "postcss": "^8.4.14",
     "prettier": "^2.6.0",
     "prismjs": "^1.29.0",
@@ -175,7 +176,8 @@
     "./percentageInput": "./components/input/PercentageInput.vue.js",
     "./textArea": "./components/textArea/TextArea.vue.js",
     "./banner": "./components/banner/Banner.vue.js",
-    "./styleguide": "./styleguide.scss"
+    "./styleguide": "./styleguide.scss",
+    "./typography": "./components/typography/v4/Typography.vue.js"
   },
   "typesVersions": {
     "*": {
@@ -298,6 +300,9 @@
       ],
       "textArea": [
         "./components/textArea/TextArea.vue.d.ts"
+      ],
+      "typography": [
+        "./components/typography/v4/Typography.vue.d.ts"
       ]
     }
   },