@rhds/elements
Version:
Red Hat Design System Elements
124 lines • 16.6 kB
JavaScript
var _RhCta_logger;
import { __classPrivateFieldGet, __decorate } from "tslib";
import { LitElement, html, isServer } from 'lit';
import { customElement } from 'lit/decorators/custom-element.js';
import { property } from 'lit/decorators/property.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
import { themable } from '@rhds/elements/lib/themable.js';
import { css } from "lit";
const style = css `:host{display:inline-flex;position:relative;z-index:0;align-items:center;max-width:max-content}::slotted(:is(a,button,input)),a{vertical-align:middle!important;word-break:break-word!important;white-space:normal!important;display:inline!important;color:inherit!important;font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;text-decoration:var(--_text-decoration)!important;text-underline-offset:var(--_text-underline-offset)!important;z-index:2!important}::slotted(a):after,a:after{display:block;content:"";position:absolute;inset:0;z-index:3}::slotted(button),::slotted(input){background-color:initial;border:none;margin:0;padding:0;text-align:left}#container{position:relative;white-space:var(--_rh-cta-white-space,nowrap);color:var(--_color);font-family:var(--rh-font-family-heading,RedHatDisplay,"Red Hat Display",Helvetica,Arial,sans-serif);font-size:var(--rh-font-size-body-text-lg,1.125rem);font-weight:600;line-height:var(--rh-line-height-body-text,1.5);background-color:var(--_background-color);border-color:var(--_border-color,#0000);border-radius:var(--rh-border-radius-default,3px);border-width:var(--rh-border-width-sm,1px);--_icon-size:var(--rh-icon-size,var(--rh-font-size-body-text-lg,1.125rem))}#container:has(rh-icon){padding-inline-end:calc(var(--rh-icon-size) + var(--rh-space-md, 8px) + 2px)}#container{--rh-color-surface:var(--_background-color)!important;--_arrow-size:13px;--_rh-icon-plus-padding:calc(5px + var(--rh-icon-size))}:dir(rtl){text-align:right}#container:after{--_offset:2px;content:"";display:block;height:calc(100% - var(--_offset)*2);width:calc(100% - var(--_offset)*2);box-sizing:border-box;position:absolute;top:var(--_offset);left:var(--_offset);border-width:var(--rh-border-width-sm,1px);border-radius:2px;outline:none;pointer-events:none}rh-icon{vertical-align:middle;margin-inline-start:var(--rh-space-md,8px);display:inline-block;fill:currentcolor;translate:0 0;transition:translate var(--_trans);--_trans:var(--rh-animation-speed,0.3s) var(--rh-animation-timing,cubic-bezier(0.465,0.183,0.153,0.946))}#container:dir(rtl) rh-icon{rotate:180deg}::slotted(:focus),:host(:is(:focus,:focus-within)),:host(:is(:focus,:focus-within)) ::slotted(:is(a,button,input)),a:focus,a:focus-within{outline:none!important}:host(:is(:focus,:focus-within)) #container{--_background-color:var(--rh-cta-focus-background-color);--_color:var(--_focus-color);--_text-decoration:var(--_focus-text-decoration);--_text-underline-offset:var(--rh-cta-focus-text-underline-offset,var(--rh-cta-hover-text-underline-offset));border-color:var(--_focus-border-color);background-color:var(--_focus-container-background-color,var(--_focus-background-color));color:var(--rh-cta-focus-color,var(--_color));outline:var(--rh-border-width-md,2px) solid var(--rh-cta-focus-container-outline-color,var(--rh-cta-focus-outline-color));outline-offset:2px}:host(:is(:focus,:focus-within)) #container:after{border-style:solid;border-color:var(--_focus-inner-border-color)}:host(:hover) #container{color:var(--_hover-color);border-color:var(--_hover-border-color);background-color:var(--_hover-background-color);--_text-decoration:var(--rh-cta-hover-text-decoration,var(--_hover-text-decoration));--_text-underline-offset:var(--rh-cta-hover-text-underline-offset)}:host(:hover) #container rh-icon{translate:3px 0}:host(:hover) #container:dir(rtl) rh-icon{translate:-3px 0}:host(:active) #container{background-color:var(--_background-color);color:var(--_active-color);--_background-color:var(--rh-cta-background-color,var(--rh-cta-active-container-background-color,var(--rh-cta-active-background-color)))}:host(:active) #container:after{border-style:solid;border-color:var(--_active-inner-border-color)!important}:host([variant]) #container{font-size:var(--rh-font-size-body-text-md,1rem);border-radius:var(--rh-border-radius-default,3px);border-width:var(--rh-border-width-sm,1px);padding-inline:var(--rh-space-2xl,32px);padding-block:var(--rh-space-lg,16px)}:is(:host([variant]) #container) ::slotted(:is(a,button,input)),:is(:host([variant]) #container) a{display:inline-flex!important;text-align:center!important}.icon:is(:host([variant]) #container) ::slotted(:is(a,button,input)),.icon:is(:host([variant]) #container) a{display:inline!important}.icon:is(:host([variant]) #container) rh-icon{margin-inline-start:var(--rh-space-md,8px)}.svg:is(:host([variant]) #container) ::slotted(:is(a,button,input)),.svg:is(:host([variant]) #container) a{--_arrow-plus-padding:calc(var(--rh-space-md, 8px) + var(--_arrow-size));padding-inline-end:calc(var(--_arrow-plus-padding) + var(--rh-space-xl, 24px))!important}:is(:host([variant$=ary]) #container) ::slotted(:is(a,button,input)),:is(:host([variant$=ary]) #container) a{font-size:var(--rh-cta-font-size-priority,var(--rh-font-size-body-text-md,1rem))}:host(:not([variant])) #container{--_background-color:var(--rh-cta-background-color,#0000);--_border-color:var(--rh-cta-border-color,#0000);--_color:var(--rh-cta-color,var(--rh-color-interactive-primary-default));--_hover-background-color:var(--rh-cta-hover-background-color,#0000);--_hover-border-color:var(--rh-cta-hover-border-color,#0000);--_hover-color:var(--rh-cta-hover-color,var(--rh-color-interactive-primary-hover));--_hover-text-decoration:var(--rh-cta-hover-text-decoration,none);--_focus-background-color:var(--rh-cta-focus-background-color,#0000);--_focus-container-background-color:light-dark(var(--rh-cta-focus-container-background-color,#0066cc1a),var(--rh-cta-focus-container-background-color,#73bcf740));--_focus-border-color:var(--rh-cta-focus-border-color,#0000);--_focus-color:var(--rh-cta-focus-color,var(--rh-color-interactive-primary-default));--_focus-inner-border-color:var(--rh-cta-focus-inner-border-color,#0000);--_focus-text-decoration:var(--rh-cta-focus-text-decoration,none);--_active-container-background-color:light-dark(var(--rh-cta-active-container-background-color,#0066cc1a),var(--rh-cta-active-container-background-color,#73bcf740));--_active-inner-border-color:var(--rh-cta-active-inner-border-color,#0000);--_active-text-decoration:var(--rh-cta-active-text-decoration,none)}:host([variant=primary]) #container{border-style:solid;--_background-color:var(--rh-cta-background-color,var(--rh-color-brand-red));--_border-color:var(--rh-cta-border-color,var(--rh-color-brand-red));--_color:var(--rh-cta-color,var(--rh-color-text-primary-on-dark,#fff));--_active-color:var(--rh-cta-color,var(--rh-color-text-primary-on-dark,#fff));--_hover-background-color:var(--rh-cta-hover-background-color,var(--rh-color-brand-red-dark,#a60000));--_hover-border-color:var(--rh-cta-hover-border-color,var(--rh-color-brand-red-dark,#a60000));--_hover-color:var(--rh-cta-hover-color,var(--rh-color-text-primary-on-dark,#fff));--_focus-background-color:var(--rh-cta-focus-background-color,var(--rh-color-brand-red-dark,#a60000));--_focus-border-color:var(--rh-cta-focus-border-color,var(--rh-color-brand-red-dark,#a60000));--_focus-color:var(--rh-cta-focus-color,var(--rh-color-text-primary-on-dark,#fff))!important;--_focus-inner-border-color:var(--rh-cta-focus-inner-border-color,var(--rh-color-text-primary-on-dark,#fff));--_focus-text-decoration:var(--rh-cta-focus-text-decoration,none);--_active-background-color:var(--rh-cta-active-background-color,var(--rh-color-brand-red-dark,#a60000));--_active-inner-border-color:var(--rh-cta-active-inner-border-color,var(--rh-color-text-primary-on-dark,#fff))}:host([variant=secondary]) #container{border-style:solid;--_background-color:var(--rh-cta-background-color,#0000);--_border-color:var(--rh-cta-border-color,var(--rh-color-border-strong));--_color:light-dark(var(--rh-cta-color,var(--rh-color-text-primary-on-light,#151515)),var(--rh-cta-color,var(--rh-color-text-primary-on-dark,#fff)));--_hover-background-color:light-dark(var(--rh-cta-hover-background-color,var(--rh-color-surface-darkest,#151515)),var(--rh-cta-hover-background-color,var(--rh-color-surface-lightest,#fff)));--_hover-border-color:var(--rh-cta-hover-border-color,var(--rh-color-border-strong));--_hover-color:light-dark(var(--rh-cta-hover-color,var(--rh-color-text-primary-on-dark,#fff)),var(--rh-cta-hover-color,var(--rh-color-text-primary-on-light,#151515)));--_focus-background-color:light-dark(var(--rh-cta-focus-background-color,var(--rh-color-surface-lighter,#f2f2f2)),var(--rh-cta-focus-background-color,var(--rh-color-surface-dark,#383838)));--_focus-border-color:var(--rh-cta-focus-border-color,var(--rh-color-border-strong));--_focus-color:var(--rh-color-text-primary);--_focus-inner-border-color:var(--rh-cta-focus-inner-border-color,var(--rh-color-border-strong));--_focus-text-decoration:var(--rh-cta-focus-text-decoration,none);--_active-color:var(--rh-cta-active-color,var(--rh-color-text-primary));--_active-background-color:light-dark(var(--rh-cta-active-background-color,var(--rh-color-border-strong)),var(--rh-cta-active-background-color,var(--rh-color-surface-lightest,#fff)));--_active-inner-border-color:light-dark(var(--rh-cta-active-inner-border-color,var(--rh-color-surface-light,#e0e0e0)),var(--rh-cta-active-inner-border-color,var(--rh-color-border-strong-on-light,#151515)))}:host([variant=brick]){display:inline-block!important;max-width:100%;width:100%}:host([variant=brick]) #container{border-style:solid;font-family:var(--rh-font-family-body-text,RedHatText,"Red Hat Text",Helvetica,Arial,sans-serif);font-weight:var(--rh-font-weight-body-text-regular,400);display:flex;flex-flow:row wrap;gap:var(--rh-space-md,8px);justify-content:center;align-items:center;--_background-color:var(--rh-cta-background-color,#0000);--_border-color:var(--rh-cta-border-color,var(--rh-color-border-subtle));--_color:var(--rh-cta-color,var(--rh-color-interactive-primary-default));--_hover-background-color:light-dark(var(--rh-cta-hover-background-color,var(--rh-color-surface-lighter,#f2f2f2)),var(--rh-cta-hover-background-color,var(--rh-color-surface-darker,#1f1f1f)));--_hover-border-color:var(--rh-cta-hover-border-color,var(--rh-color-border-subtle));--_hover-color:var(--rh-cta-hover-color,var(--rh-color-interactive-primary-hover));--_hover-text-decoration:light-dark(var(--rh-cta-hover-text-decoration,none),var(--rh-cta-hover-text-decoration,underline));--_focus-color:var(--rh-cta-focus-color,var(--rh-color-interactive-primary-default));--_focus-border-color:var(--rh-cta-focus-border-color,var(--rh-color-border-subtle));--_focus-inner-border-color:var(--rh-cta-focus-inner-border-color,var(--rh-color-border-subtle));--_focus-text-decoration:light-dark(var(--rh-cta-focus-text-decoration,none),var(--rh-cta-focus-text-decoration,none));--_active-background-color:light-dark(var(--rh-cta-active-background-color,var(--rh-color-surface-lighter,#f2f2f2)),var(--rh-cta-active-background-color,var(--rh-color-surface-darker,#1f1f1f)));--_active-inner-border-color:var(--rh-cta-active-inner-border-color,var(--rh-color-border-subtle));--_active-text-decoration:light-dark(var(--rh-cta-active-text-decoration,none),var(--rh-cta-active-text-decoration,underline))}.icon:is(:host([variant=brick]) #container) rh-icon{margin-inline:0} not (translate:0 0){rh-icon{transform:translate(0);transition:transform var(--_trans)}#container:dir(rtl) rh-icon{transform:translate(0) rotate(180deg)}:host(:hover) #container rh-icon{transform:translate(3px)}:host(:hover) #container:dir(rtl) rh-icon{transform:translate(-3px) rotate(180deg)}}`;
function isSupportedContent(el) {
return el instanceof HTMLAnchorElement || el instanceof HTMLButtonElement;
}
/**
* Provides a styled link or button for prominent user actions when you need to
* draw attention to a key interaction. Must contain an `href` attribute or a
* slotted `<a>` / `<button>`. Screen readers announce the slotted text. Used
* primarily for linking to other pages. Users should prefer to use the `href`
* attribute or slotted links with this component. Avoid `<button>` with the
* default (no variant) style.
*
* @summary Styled link or button for prominent user actions
*
* @alias call-to-action
*
*/
let RhCta = class RhCta extends LitElement {
constructor() {
super(...arguments);
/** Icon set to load from. Defaults to `ui`. */
this.iconSet = 'ui';
_RhCta_logger.set(this, new Logger(this));
}
async scheduleUpdate() {
if (this.icon || !this.variant && !customElements.get('rh-icon')) {
await import('@rhds/elements/rh-icon/rh-icon.js');
}
super.scheduleUpdate();
}
render() {
const { download, href, referrerpolicy, rel, target, icon, iconSet, variant, } = this;
const isDefault = !variant;
const svg = isDefault;
const follower = (variant !== 'brick' && icon) ? html `<rh-icon icon="${icon}" set="${iconSet ?? 'ui'}"></rh-icon>`
: (variant === undefined) ? html `<rh-icon icon="arrow-right" set="ui"></rh-icon>`
: '';
const iconContent = !(variant === 'brick' && icon) ? '' : html `<rh-icon .icon=${icon} set="${iconSet ?? 'ui'}"></rh-icon>`;
const slot = html `<!--
summary: CTA link text
description: |
Slot an anchor or button as the first child, or set href on the host. Screen readers
announce this content as the CTA label. For long words, supply wbr at appropriate break points.
--><slot></slot>`;
const linkContent = !href ? slot
: html `<a href=${href}
download="${ifDefined(download)}"
rel="${ifDefined(rel)}"
referrerpolicy="${ifDefined(referrerpolicy)}"
target="${ifDefined(target)}">${slot}</a>`;
return html `
<!-- container element for slotted CTA -->
<span id="container"
part="container"
class=${classMap({ icon: !!icon, svg })}
=${this.firstUpdated}>${iconContent}${linkContent}${follower}</span>`;
}
firstUpdated() {
// workaround for lit-ssr bugs
if (!isServer) {
this.removeAttribute('defer-hydration');
const [, ...duplicateContainers] = this.shadowRoot?.querySelectorAll('#container') ?? [];
for (const dupe of duplicateContainers) {
dupe.remove();
}
}
// TODO: remove in next major version, recommend static HTML audits instead
const { href, variant } = this;
const cta = this.shadowRoot?.querySelector('a')
?? this.shadowRoot?.querySelector('slot')?.assignedElements().find(isSupportedContent)
?? null;
if (href && cta !== this.shadowRoot?.querySelector('a')) {
return __classPrivateFieldGet(this, _RhCta_logger, "f").warn(`When the href attribute is used, slotted content must not be a link`);
}
else if (!href && !cta) {
return __classPrivateFieldGet(this, _RhCta_logger, "f").warn(`The first child in the light DOM must be a supported call-to-action tag (<a>, <button>)`);
}
else if (!href && cta instanceof HTMLButtonElement && !variant) {
return __classPrivateFieldGet(this, _RhCta_logger, "f").warn(`Button tag is not supported semantically by the default link styles`);
}
}
};
_RhCta_logger = new WeakMap();
RhCta.styles = [style];
__decorate([
property({ reflect: true })
], RhCta.prototype, "variant", void 0);
__decorate([
property({ reflect: true })
], RhCta.prototype, "href", void 0);
__decorate([
property()
], RhCta.prototype, "download", void 0);
__decorate([
property()
], RhCta.prototype, "referrerpolicy", void 0);
__decorate([
property()
], RhCta.prototype, "rel", void 0);
__decorate([
property()
], RhCta.prototype, "target", void 0);
__decorate([
property({ reflect: true })
], RhCta.prototype, "icon", void 0);
__decorate([
property({ attribute: 'icon-set' })
], RhCta.prototype, "iconSet", void 0);
RhCta = __decorate([
customElement('rh-cta'),
themable
], RhCta);
export { RhCta };
//# sourceMappingURL=rh-cta.js.map