@hashicorp/design-system-components
Version:
Helios Design System Components
61 lines (58 loc) • 3.2 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { eq } from 'ember-truth-helpers';
import { HdsLinkColorValues, HdsLinkIconPositionValues } from './types.js';
import HdsInteractive from '../interactive/index.js';
import HdsIcon from '../icon/index.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const DEFAULT_ICON_POSITION = HdsLinkIconPositionValues.Trailing;
const DEFAULT_COLOR = HdsLinkColorValues.Primary;
const ICON_POSITIONS = Object.values(HdsLinkIconPositionValues);
const COLORS = Object.values(HdsLinkColorValues);
class HdsLinkInline extends Component {
constructor(owner, args) {
super(owner, args);
if (!(this.args.href || this.args.route)) {
assert('@href or @route must be defined for <Hds::Link::Inline>');
}
}
get color() {
const {
color = DEFAULT_COLOR
} = this.args;
assert(`@color for "Hds::Link::Inline" must be one of the following: ${COLORS.join(', ')}; received: ${color}`, COLORS.includes(color));
return color;
}
get iconPosition() {
const {
iconPosition = DEFAULT_ICON_POSITION
} = this.args;
assert(`@iconPosition for "Hds::Link::Inline" must be one of the following: ${ICON_POSITIONS.join(', ')}; received: ${iconPosition}`, ICON_POSITIONS.includes(iconPosition));
return iconPosition;
}
get classNames() {
const classes = ['hds-link-inline'];
// add a class based on the @color argument
classes.push(`hds-link-inline--color-${this.color}`);
// add a class based on the @iconPosition argument
classes.push(`hds-link-inline--icon-${this.iconPosition}`);
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("{{!-- IMPORTANT: we need to add \"squishies\" here (~) because otherwise the whitespace added by Ember becomes visible in the link (being an inline element) - See https://handlebarsjs.com/guide/expressions.html#whitespace-control --}}\n<HdsInteractive class={{this.classNames}} @current-when={{@current-when}} @models={{@models}} @model={{@model}} @query={{@query}} @replace={{@replace}} @route={{@route}} @isRouteExternal={{@isRouteExternal}} @href={{@href}} @isHrefExternal={{@isHrefExternal}} ...attributes>\n {{~#if (eq this.iconPosition \"leading\")~}}\n {{~#if @icon~}}\n <span class=\"hds-link-inline__icon hds-link-inline__icon--leading\">\n <HdsIcon @name={{@icon}} @size=\"16\" @stretched={{true}} />\n </span>\n {{~/if~}}\n {{~/if~}}\n {{yield}}\n {{~#if (eq this.iconPosition \"trailing\")~}}\n {{~#if @icon~}}\n <span class=\"hds-link-inline__icon hds-link-inline__icon--trailing\">\n <HdsIcon @name={{@icon}} @size=\"16\" @stretched={{true}} />\n </span>\n {{~/if~}}\n {{~/if~}}\n</HdsInteractive>", {
strictMode: true,
scope: () => ({
HdsInteractive,
eq,
HdsIcon
})
}), this);
}
}
export { COLORS, DEFAULT_COLOR, DEFAULT_ICON_POSITION, ICON_POSITIONS, HdsLinkInline as default };
//# sourceMappingURL=inline.js.map