@duetds/components
Version:
This package includes Duet Core Components and related tools.
186 lines (180 loc) • 12.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const core = require('./core-e5cda7d4.js');
const jsUtils = require('./js-utils-286cf29e.js');
const tokens_common = require('./tokens.common-5057aed3.js');
const DuetHero = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
/**
* Theme of the hero area. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* The heading of the hero area, rendered in an H1 tag. P.S. you can control the level of the HTML heading by using “level” prop. If empty, heading will be hidden.
*/
this.heading = "";
/**
* The level of the heading. Can be one of: "h1", "h2", "h3", "h4", "h5", "h6".
*/
this.level = "h1";
/**
* The description of the hero area, rendered in a P tag. If empty, description will be hidden.
*/
this.description = "";
/**
* Icon to display to the left of the button content. If empty, icon will be hidden.
*/
this.icon = "";
/**
* Icon size for the button. Can be on of: "medium", "large".
*/
this.iconSize = "medium";
/**
* Show icon on the right side of the button content.
*/
this.iconRight = false;
/**
* Text label shown inside the button. If empty, button will be hidden.
*/
this.buttonLabel = "";
/**
* URL that the button links to.
*/
this.buttonUrl = "#";
/**
* ID for the button.
*/
this.buttonId = "";
/**
* URL of the image shown inside the hero area. The width of the displayed image should be 800px. Optimal aspect ratio is 3:2. If empty, image will be hidden.
*/
this.image = "";
/**
* Adjust hero area’s distance to duet navigation component using this property. Basically adds top margin that matches the sizing of Duet Navigation. Can be one of: "none", "with-links", "without-links".
*/
this.navDistance = "none";
/**
* Style variation of the hero area. Can be one of: "default", "light", "gray".
*/
this.variation = "default";
/**
* Component event handling.
*/
this.handleClick = (ev, data) => {
this.emitChange(ev, data);
ev.cancelBubble = true;
};
this.duetClick = core.createEvent(this, "duetClick", 7);
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
/**
* Local methods
*/
emitChange(ev, data) {
if (!data) {
data = {};
}
data["label"] = this.buttonLabel;
data["href"] = this.buttonUrl;
data["id"] = this.buttonId || "No ID defined via buttonId prop";
this.duetClick.emit({
originalEvent: ev,
data: data,
component: "duet-hero-area",
});
}
/**
* render() function
* Always the last one in the class.
*/
render() {
const styles = {
backgroundImage: "url(" + this.image + ")",
};
let buttonVariation = this.theme === "turva" ? "negative" : "primary";
let textColor = "colorGrayLightest";
if (this.variation === "light" || this.variation === "gray") {
textColor = "colorSecondary";
if (this.theme === "turva") {
textColor = "colorSecondaryTurva";
buttonVariation = "primary";
}
}
return (core.h(core.Host, { class: { "duet-m-0": this.margin === "none" } }, core.h("div", { role: "region", class: {
"duet-hero": true,
"duet-theme-turva": this.theme === "turva",
"duet-with-links": this.navDistance === "with-links",
"duet-without-links": this.navDistance === "without-links",
"duet-hero-light": this.variation === "light",
"duet-hero-gray": this.variation === "gray",
} }, core.h("div", { class: "duet-hero-wrapper" }, this.variation === "gray" ? (core.h("div", null, core.h("duet-icon", { class: "duet-hero-icon", size: "x-large", "mobile-size": "large", background: "color-category-pet", name: "category-pet" }))) : (""), core.h("div", { class: "duet-hero-text" }, this.heading !== "" && this.variation === "light" ? (core.h("duet-heading", { theme: this.theme, level: this.level, "visual-level": "h1" }, this.heading)) : (""), this.heading !== "" && this.variation === "default" ? (core.h("duet-heading", { theme: this.theme, color: "color-gray-lightest", level: this.level, "visual-level": "h1" }, this.heading)) : (""), this.heading !== "" && this.variation === "gray" ? (core.h("duet-heading", { theme: this.theme, level: this.level, "visual-level": "h2" }, this.heading)) : (""), this.description !== "" ? (core.h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)) : (""), this.buttonLabel !== "" ? (core.h("duet-button", { url: this.buttonUrl, icon: this.icon, "icon-right": this.iconRight, "icon-size": this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)) : ("")), this.image !== "" ? core.h("div", { class: "duet-hero-image", style: styles }) : ""))));
}
get element() { return core.getElement(this); }
static get style() { return ":host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-bottom:40px!important;display:block;width:100%}\@media only screen and (min-width:62em){:host{margin-bottom:56px!important}}:host(.duet-m-0){margin:0!important}.duet-hero{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;padding:48px 28px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;background:#00294d;font-weight:400;line-height:1.5;font-style:normal;text-transform:none;text-decoration:none;text-shadow:none;width:100%;position:relative;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.duet-hero.duet-p-0{padding:0!important}.duet-hero.duet-m-0{margin:0!important}.duet-hero.duet-hero-light{padding-bottom:0!important;color:#00294d;background-color:#fff;background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#e6f2f8));background-image:linear-gradient(#fff,#e6f2f8)}.duet-hero.duet-hero-light:before{content:\"\";position:absolute;background:#e6f2f8;z-index:-1;top:100%;left:0;width:100%;height:210px}.duet-hero.duet-hero-light.duet-theme-turva{color:#111;background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f7f7f7));background-image:linear-gradient(#fff,#f7f7f7)}.duet-hero.duet-hero-light.duet-theme-turva:before{background:#f7f7f7}.duet-hero.duet-hero-gray{color:#00294d;background:#f5f8fa}.duet-hero.duet-with-links,.duet-hero.duet-without-links{margin-top:4rem}\@media only screen and (min-width:62em){.duet-hero.duet-with-links{margin-top:7rem}}.duet-hero.duet-theme-turva{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;background:#c60c30}\@media only screen and (min-width:62em){.duet-hero{min-height:400px;padding:72px 56px}.duet-hero:after{content:\"\";min-height:300px}}\@media only screen and (min-width:62em){.duet-hero-icon{position:absolute;top:0;left:0}}.duet-hero-wrapper{position:relative;text-align:center;max-width:1110px;width:100%}\@media only screen and (min-width:62em){.duet-hero-wrapper{text-align:left}}.duet-hero-text{margin:0 auto;max-width:50rem}\@media only screen and (min-width:48em){.duet-hero-text{width:80%}}\@media only screen and (min-width:62em){.duet-hero-text{margin-left:0;max-width:none;margin-top:-10px;width:52%}.duet-hero-gray .duet-hero-text{margin-left:96px}}.duet-hero-image{width:100%;height:0;max-width:400px;background-size:contain;background-repeat:no-repeat;background-position:50% 50%;padding-bottom:50%;margin:28px auto 0}\@media only screen and (min-width:36em){.duet-hero-image{padding-bottom:40%}}\@media only screen and (min-width:48em){.duet-hero-image{padding-bottom:34%;max-width:420px}.duet-hero-light .duet-hero-image{max-width:540px}}\@media only screen and (min-width:62em){.duet-hero-image{position:absolute;padding-bottom:30%;-webkit-transform:translateY(-50%);transform:translateY(-50%);top:50%;right:0;margin:0}.duet-hero-light .duet-hero-image{padding-bottom:26%;right:-60px}.duet-hero-gray .duet-hero-image{padding-bottom:20%;right:-34px}}duet-heading+duet-button{margin-top:12px!important}"; }
};
const DuetParagraph = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
/**
* Theme of the card. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Controls the size of the paragraph. Can be one of: "medium", "small".
*/
this.size = "medium";
/**
* Style variation of the paragraph. Can be one of: "default", "intro".
*/
this.variation = "default";
/**
* Custom color to be used for text, as a design token entered in camelCase or kebab-case.
* Example: "color-primary".
*/
this.color = "";
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
/**
* render() function
* Always the last one in the class.
*/
render() {
const styles = {
color: tokens_common.tokens[jsUtils.jsUtils_7(this.color)],
};
return (core.h("p", { class: {
"duet-paragraph": true,
"duet-paragraph-small": this.size === "small",
"duet-m-0": this.margin === "none",
[this.variation]: true,
"duet-theme-turva": this.theme === "turva",
}, style: styles }, core.h("slot", null)));
}
get element() { return core.getElement(this); }
static get style() { return ":host{position:relative}.duet-paragraph,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;display:block;width:100%}.duet-paragraph{margin-bottom:16px!important;font-size:1rem;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;line-height:1.5;color:#00294d;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;font-style:normal}.duet-paragraph.duet-p-0{padding:0!important}.duet-paragraph.duet-theme-turva,.duet-theme-turva .duet-paragraph{color:#111;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.duet-paragraph.duet-paragraph-small{font-size:.875rem}.duet-paragraph.duet-m-0{margin:0!important}.duet-paragraph.intro{font-size:2.7vw;margin-bottom:28px!important;-webkit-hyphens:inherit;-ms-hyphens:inherit;hyphens:inherit}\@media (max-width:37.037037037rem){.duet-paragraph.intro{font-size:1rem}}\@media (min-width:46.2962962963rem){.duet-paragraph.intro{font-size:1.25rem}}"; }
};
exports.duet_hero = DuetHero;
exports.duet_paragraph = DuetParagraph;