@zplane-web/craft-licensing

Link: Internal 

<a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Internal link</span></a>
 
{% set link = link | default(null) %}
{% set current = current ?? false %}
{% set showInternal = showInternal ?? false %}
{% set linkType = linkType ??? link_type(link) %}
{% set icon = icon ?? link_icon(link=link, type=linkType, showInternal=showInternal) %}
{% set iconPosition = iconPosition ?? 'before' %}
{% set block = block ?? false %}
{% set whitespace = block ? '' : '&#65279;' %}
{% set tag = link ? 'a' : 'button' -%}

{% set linkComponent = html_cva(
  base: 'link',
  variants: {
    overlay: {
      false: null,
      true: 'u-overlay-link',
    },
  },
) %}

<{{ tag }} {{ html_attributes({
  id: id ?? false,
  class: linkComponent.apply({
    overlay: overlay ?? false,
  }),
  type: not link ? (type ??? 'button'),
  title: title ?? false,
  'data-link-block': block,
  'data-link-type': linkType,
  'aria-current': current is same as true ? 'true' : current,
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>{% apply spaceless %}
  {%- if (icon and iconPosition == 'before') or leftIcon|default -%}
    <span class="link__icon">
      {%- include '@icon' with { icon: leftIcon ?? icon } only -%}
      {{- whitespace | raw -}}
    </span>
  {%- endif -%}

  <span class="link__text u-underline">
    {{- text | componentize(inline_only=true) -}}
  </span>

  {%- if (icon and iconPosition == 'after') or rightIcon|default -%}
    <span class="link__icon">
      {{- whitespace | raw -}}
      {%- include '@icon' with { icon: rightIcon ?? icon } only -%}
    </span>
  {%- endif -%}
{% endapply %}</{{ tag }}>
 
{
  "text": "Internal link",
  "link": "#"
}
  • Content: 
    .link {
  --_link-icon-size: var(--link-icon-size, 0.9em);

  background-color: var(--link-background-color, transparent);
  border-radius: var(--link-border-radius, 0);
  box-decoration-break: clone;
  color: var(--link-color, var(--color-orange-700));
  display: var(--link-display, inline);
  font-family: inherit;
  font-size: inherit;
  font-variation-settings: inherit;
  font-weight: var(--link-font-weight, inherit);
  line-height: inherit;
  padding-block: var(--link-padding-block, 0);
  padding-inline: var(--link-padding-inline, 0);
  transition-property: color;

  &:is(button:not([disabled]), :any-link):is(:hover, :focus-visible) {
    color: var(--link-color--engaged, var(--color-steel-800));
  }

  &:is([data-link-block]) {
    --link-icon-margin-block: calc((1lh - var(--_link-icon-size)) / 2);
    --link-icon-vertical-align: 0;
    --link-icon-display: flex;

    align-items: flex-start;
    display: flex;
    inline-size: 100%;
    justify-content: flex-start;
  }
}

.link__text {
  --underline-color: var(--link-underline-color, currentColor);
  --underline-color--engaged: var(--link-underline-color--engaged, transparent);
  --underline-thickness: var(--link-underline-thickness, 1px);
  --underline-offset: var(--link-underline-offset, 0.25em);
}

.link__icon {
  --icon-size: var(--_link-icon-size);

  color: var(--link-icon-color, inherit);
  display: var(--link-icon-display, inline);
  flex-shrink: 0;
  margin-block: var(--link-icon-margin-block, 0);
  transition-property: color;
  vertical-align: var(--link-icon-vertical-align, 0.1em);
  white-space: nowrap;

  &:first-child {
    margin-inline-end: var(--link-icon-gap, 0.5em);
    margin-inline-start: var(--link-icon-puffer, 0.1em);
  }

  &:last-child {
    margin-inline-end: var(--link-icon-puffer, 0.1em);
    margin-inline-start: var(--link-icon-gap, 0.5em);
  }
}
  • URL: /components/raw/link/link.scss
  • Filesystem Path: src/components/2-atoms/link/link.scss
  • Size: 1.9 KB

No notes defined.