@yoobic/yobi 8.5.0-10 → 8.5.0-12

package/dist/types/components.d.ts

@@ -428,13 +428,6 @@ export namespace Components {
          */
         "withTooltip": boolean;
     }
-    interface YooBackground {
-        "forceMobile": boolean;
-        "imgHeight": number;
-        "imgUrl": string;
-        "imgWidth": number;
-        "scaleValue": number;
-    }
     interface YooBadge {
         /**
           * Defines badge color, by default is set to danger
@@ -8282,12 +8275,6 @@ declare global {
         prototype: HTMLYooAvatarsElement;
         new (): HTMLYooAvatarsElement;
     };
-    interface HTMLYooBackgroundElement extends Components.YooBackground, HTMLStencilElement {
-    }
-    var HTMLYooBackgroundElement: {
-        prototype: HTMLYooBackgroundElement;
-        new (): HTMLYooBackgroundElement;
-    };
     interface HTMLYooBadgeElement extends Components.YooBadge, HTMLStencilElement {
     }
     var HTMLYooBadgeElement: {
@@ -10354,7 +10341,6 @@ declare global {
         "yoo-audio-recorder-dialog": HTMLYooAudioRecorderDialogElement;
         "yoo-avatar": HTMLYooAvatarElement;
         "yoo-avatars": HTMLYooAvatarsElement;
-        "yoo-background": HTMLYooBackgroundElement;
         "yoo-badge": HTMLYooBadgeElement;
         "yoo-banner": HTMLYooBannerElement;
         "yoo-barcode": HTMLYooBarcodeElement;
@@ -11093,13 +11079,6 @@ declare namespace LocalJSX {
          */
         "withTooltip"?: boolean;
     }
-    interface YooBackground {
-        "forceMobile"?: boolean;
-        "imgHeight"?: number;
-        "imgUrl"?: string;
-        "imgWidth"?: number;
-        "scaleValue"?: number;
-    }
     interface YooBadge {
         /**
           * Defines badge color, by default is set to danger
@@ -19115,7 +19094,6 @@ declare namespace LocalJSX {
         "yoo-audio-recorder-dialog": YooAudioRecorderDialog;
         "yoo-avatar": YooAvatar;
         "yoo-avatars": YooAvatars;
-        "yoo-background": YooBackground;
         "yoo-badge": YooBadge;
         "yoo-banner": YooBanner;
         "yoo-barcode": YooBarcode;
@@ -19477,7 +19455,6 @@ declare module "@stencil/core" {
             "yoo-audio-recorder-dialog": LocalJSX.YooAudioRecorderDialog & JSXBase.HTMLAttributes<HTMLYooAudioRecorderDialogElement>;
             "yoo-avatar": LocalJSX.YooAvatar & JSXBase.HTMLAttributes<HTMLYooAvatarElement>;
             "yoo-avatars": LocalJSX.YooAvatars & JSXBase.HTMLAttributes<HTMLYooAvatarsElement>;
-            "yoo-background": LocalJSX.YooBackground & JSXBase.HTMLAttributes<HTMLYooBackgroundElement>;
             "yoo-badge": LocalJSX.YooBadge & JSXBase.HTMLAttributes<HTMLYooBadgeElement>;
             "yoo-banner": LocalJSX.YooBanner & JSXBase.HTMLAttributes<HTMLYooBannerElement>;
             "yoo-barcode": LocalJSX.YooBarcode & JSXBase.HTMLAttributes<HTMLYooBarcodeElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoobic/yobi",
-  "version": "8.5.0-10",
+  "version": "8.5.0-12",
   "description": "Yobi - Yoobic Design System",
   "module": "dist/index.js",
   "main": "dist/index.cjs.js",

package/dist/cjs/yoo-background.cjs.entry.js

@@ -1,35 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7319daa9.js');
-const commonHelpers = require('./common-helpers-175d28d1.js');
-require('./overlays-a6fd4072.js');
-require('./lodash-72d493b9.js');
-require('./index-f08462bf.js');
-require('./_commonjsHelpers-94df2ea7.js');
-require('./index-d6597639.js');
-
-const backgroundCss = "svg:not(:root){overflow:hidden}:host{background:var(--dark, #000000)}:host yoo-img{position:relative;-webkit-transition:-webkit-transform 250ms linear;transition:-webkit-transform 250ms linear;transition:transform 250ms linear;transition:transform 250ms linear, -webkit-transform 250ms linear}:host(.mobile) yoo-img::before{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dark-40-transparent-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent));content:\"\"}:host(.force-mobile) yoo-img::before{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dark-40-transparent-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent));content:\"\"}:host(.web:not(.force-mobile)){margin-top:var(--spacing-16, 1rem)}:host(.web.course-summary){margin-top:0}";
-
-const YooBackgroundComponent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.scaleValue = 1;
-  }
-  render() {
-    const scaleStyle = {
-      transform: `scale(${this.scaleValue})`,
-      width: `${this.imgWidth}px`,
-      height: `${this.imgHeight}px`
-    };
-    return (index.h(index.Host, { class: {
-        ...commonHelpers.getAppContext(this.el),
-        'force-mobile': this.forceMobile
-      } }, index.h("slot", null), index.h("yoo-img", { style: scaleStyle, contained: true, class: "course-image", src: this.imgUrl, cloudinaryOptions: { noRatio: true, fit: true } })));
-  }
-  get el() { return index.getElement(this); }
-};
-YooBackgroundComponent.style = backgroundCss;
-
-exports.yoo_background = YooBackgroundComponent;

package/dist/collection/components/1.atoms/background/background.css

@@ -1,242 +0,0 @@
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-/* Z-Index (Ionic)
---------------------------------------------------
-Grouped by elements which would be siblings */
-/* Hairlines width */
-/* Default Colors
----------------------------------- */
-/* Private color variables */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff;*/
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* Color map should provide
-- base: main color to be used.
-- contrast: Color that will provide readable text against the base color
-- shade: 12% darker version of the base color (mix with black)
-- tint: 10% lighter version of the base color (mix with white) */
-/* Themed Colors
-
- Default Foreground and Background Colors values
- Allows users to override an foreground / background colors
- $background-color-value:            $light !default;
- $background-color-rgb:              255, 255, 255 !default; */
-/* Default Foreground and Background Colors
--------------------------------------------------- */
-/* Default General Colors
--------------------------------------------------- */
-/* Default List & List Items
--------------------------------------------------- */
-/* Item Divider */
-/* iOS List & List Items
--------------------------------------------------- */
-/* Default Toolbar
---------------------------------------------------*/
-/* iOS Toolbar
---------------------------------------------------*/
-/* Default Tabs & Tab bar
---------------------------------------------------*/
-/* iOS Tabs & Tab bar
---------------------------------------------------*/
-/* Function related variables
---------------------------------------------------*/
-/* Gets the active color's css variable from a variation. Alpha is optional.
---------------------------------------------------------------------------------------------
-Example usage:
-current-color(base) => var(--ion-color-base)
-current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
---------------------------------------------------------------------------------------------*/
-/* Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
---------------------------------------------------------------------------------------------
-Example usage:
-ion-color(primary, base) => var(--ion-color-primary, #3880ff)
-ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
-ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
---------------------------------------------------------------------------------------------*/
-/* Mixes a color with black to create its shade.
---------------------------------------------------------------------------------------------*/
-/*Mixes a color with white to create its tint.
---------------------------------------------------------------------------------------------*/
-/* Converts a color to a comma separated rgb.
---------------------------------------------------------------------------------------------*/
-/* Str functions.
-___________________________________________________________________________________________*/
-/* Creates a pulse animation.
-  @param {color} $begin-color [stable-20] - starting color for pulse.
-  @param {color} $end-color [stable-20] - ending color for pulse.
-  @author Ben Morgan
-  @author Damien Arondel 
-*/
-/* Execute a content if the hover state is supported.
-
- @content the content to execute if relevant
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Properly hide overflow on rounded corner elements for Webkit based browsers.
- This mixin must be used at the same level as `overflow: hidden` and `border-radius: ...`.
-
- @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Truncate every overflown elements with an ellipsis.
- This mixin does not work with flex box on the same level.
-
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Truncate text at a specific number of lines.
- */
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
-/* Text Direction - ltr / rtl
-$app-direction: multi | rtl | ltr | null (default)
-multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
-rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
-ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
-null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
----------------------------------------------------------- */
-/* Add property horizontal
- @param {string} $start
- @param {string} $end
-----------------------------------------------------------*/
-/* Add property for all directions
-  @param {string} $prop
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-  @param {boolean} $content include content or use default
-----------------------------------------------------------*/
-/* Add margin for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/* Add padding for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/*Font smoothing
---------------------------------------------------*/
-/* SVG Background Image Mixin
-  @param {string} $svg
-----------------------------------------------------------*/
-/* Add padding horizontal
-  @param {string} $start
-  @param {string} $end
-----------------------------------------------------------*/
-/* Add margin horizontal
- @param {string} $start
- @param {string} $end
-----------------------------------------------------------*/
-/* Add safe area padding horizontal
-  @param {string} $start
-  @param {string} $end
-----------------------------------------------------------*/
-/* Add border radius for all directions
-  @param {string} $top-start
-  @param {string} $top-end
-  @param {string} $bottom-end
-  @param {string} $bottom-start
-----------------------------------------------------------*/
-/* Sets correct text align with support for old browsers
-  @param {string} $direction - text direction
-  @param {string} $decorator - !important
-----------------------------------------------------------*/
-/* Add position for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/* Add position horizontal
-  @param {string} $start - amount to position start
-  @param {string} $end - amount to left: 0; end
-----------------------------------------------------------*/
-/**
- * NOTE DO NOT USE FOR NEW COMPONENTS
- * LEGACY CODE -- Styles maintained only to prevent breaking changes
- * For all Font Sizes please use the appropreate font-size-XX Variables.
- */
-/**
-* Global style mixin for being able to change the background / font-color and border-color
-* programmatically using global classes
-*/
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-svg:not(:root) {
-  overflow: hidden;
-}
-
-:host {
-  background: var(--dark, #000000);
-}
-:host yoo-img {
-  position: relative;
-  transition: transform 250ms linear;
-}
-
-:host(.mobile) yoo-img::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--dark-40-transparent-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent));
-  content: "";
-}
-
-:host(.force-mobile) yoo-img::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--dark-40-transparent-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent));
-  content: "";
-}
-
-:host(.web:not(.force-mobile)) {
-  margin-top: var(--spacing-16, 1rem);
-}
-
-:host(.web.course-summary) {
-  margin-top: 0;
-}

package/dist/collection/components/1.atoms/background/background.js

@@ -1,126 +0,0 @@
-/**
- * @name: Background
- * @author: Andreea, Ugo, Damien
- * Zeplin link: n/a
- */
-import { h, Host } from '@stencil/core';
-import { getAppContext } from '../../../utils/helpers/common-helpers';
-export class YooBackgroundComponent {
-  constructor() {
-    this.scaleValue = 1;
-  }
-  render() {
-    const scaleStyle = {
-      transform: `scale(${this.scaleValue})`,
-      width: `${this.imgWidth}px`,
-      height: `${this.imgHeight}px`
-    };
-    return (h(Host, { class: {
-        ...getAppContext(this.el),
-        'force-mobile': this.forceMobile
-      } }, h("slot", null), h("yoo-img", { style: scaleStyle, contained: true, class: "course-image", src: this.imgUrl, cloudinaryOptions: { noRatio: true, fit: true } })));
-  }
-  static get is() { return "yoo-background"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["background.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["background.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "forceMobile": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "force-mobile",
-        "reflect": false
-      },
-      "imgUrl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "img-url",
-        "reflect": false
-      },
-      "imgHeight": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "img-height",
-        "reflect": false
-      },
-      "imgWidth": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "img-width",
-        "reflect": false
-      },
-      "scaleValue": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "scale-value",
-        "reflect": false,
-        "defaultValue": "1"
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-}

package/dist/design-system/yoo-background.entry.js

@@ -1,31 +0,0 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-0a59e2a1.js';
-import { g as getAppContext } from './common-helpers-9d1399f6.js';
-import './overlays-bd637ed8.js';
-import './lodash-653c0bcd.js';
-import './index-a16ef4a4.js';
-import './_commonjsHelpers-f4d11124.js';
-import './index-71768407.js';
-
-const backgroundCss = "svg:not(:root){overflow:hidden}:host{background:var(--dark, #000000)}:host yoo-img{position:relative;-webkit-transition:-webkit-transform 250ms linear;transition:-webkit-transform 250ms linear;transition:transform 250ms linear;transition:transform 250ms linear, -webkit-transform 250ms linear}:host(.mobile) yoo-img::before{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dark-40-transparent-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent));content:\"\"}:host(.force-mobile) yoo-img::before{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dark-40-transparent-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent));content:\"\"}:host(.web:not(.force-mobile)){margin-top:var(--spacing-16, 1rem)}:host(.web.course-summary){margin-top:0}";
-
-const YooBackgroundComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.scaleValue = 1;
-  }
-  render() {
-    const scaleStyle = {
-      transform: `scale(${this.scaleValue})`,
-      width: `${this.imgWidth}px`,
-      height: `${this.imgHeight}px`
-    };
-    return (h(Host, { class: {
-        ...getAppContext(this.el),
-        'force-mobile': this.forceMobile
-      } }, h("slot", null), h("yoo-img", { style: scaleStyle, contained: true, class: "course-image", src: this.imgUrl, cloudinaryOptions: { noRatio: true, fit: true } })));
-  }
-  get el() { return getElement(this); }
-};
-YooBackgroundComponent.style = backgroundCss;
-
-export { YooBackgroundComponent as yoo_background };

package/dist/esm/yoo-background.entry.js

@@ -1,31 +0,0 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-0a59e2a1.js';
-import { g as getAppContext } from './common-helpers-9d1399f6.js';
-import './overlays-bd637ed8.js';
-import './lodash-653c0bcd.js';
-import './index-a16ef4a4.js';
-import './_commonjsHelpers-f4d11124.js';
-import './index-71768407.js';
-
-const backgroundCss = "svg:not(:root){overflow:hidden}:host{background:var(--dark, #000000)}:host yoo-img{position:relative;-webkit-transition:-webkit-transform 250ms linear;transition:-webkit-transform 250ms linear;transition:transform 250ms linear;transition:transform 250ms linear, -webkit-transform 250ms linear}:host(.mobile) yoo-img::before{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dark-40-transparent-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent));content:\"\"}:host(.force-mobile) yoo-img::before{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dark-40-transparent-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent));content:\"\"}:host(.web:not(.force-mobile)){margin-top:var(--spacing-16, 1rem)}:host(.web.course-summary){margin-top:0}";
-
-const YooBackgroundComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.scaleValue = 1;
-  }
-  render() {
-    const scaleStyle = {
-      transform: `scale(${this.scaleValue})`,
-      width: `${this.imgWidth}px`,
-      height: `${this.imgHeight}px`
-    };
-    return (h(Host, { class: {
-        ...getAppContext(this.el),
-        'force-mobile': this.forceMobile
-      } }, h("slot", null), h("yoo-img", { style: scaleStyle, contained: true, class: "course-image", src: this.imgUrl, cloudinaryOptions: { noRatio: true, fit: true } })));
-  }
-  get el() { return getElement(this); }
-};
-YooBackgroundComponent.style = backgroundCss;
-
-export { YooBackgroundComponent as yoo_background };

package/dist/types/components/1.atoms/background/background.d.ts

@@ -1,15 +0,0 @@
-/**
- * @name: Background
- * @author: Andreea, Ugo, Damien
- * Zeplin link: n/a
- */
-import { ComponentInterface } from '../../../stencil-public-runtime';
-export declare class YooBackgroundComponent implements ComponentInterface {
-  forceMobile: boolean;
-  imgUrl: string;
-  imgHeight: number;
-  imgWidth: number;
-  scaleValue: number;
-  el: HTMLYooBackgroundElement;
-  render(): any;
-}