dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
72 lines (71 loc) • 5.7 kB
TypeScript
import { EventName } from '@lit/react';
import { default as Component } from '../../components/link/link.js';
import { DdsClickEvent } from '../../events/events';
export type { DdsClickEvent } from '../../events/events';
/**
* `dap-ds-link`
* @summary A link is a reference to a web resource.
* @element dap-ds-link
* @title - Link
*
* @event {{ event: Event }} dds-click - Emitted when the link is clicked.
*
* @slot - The text of the link.
* @slot link - A router link element (e.g. Next.js Link) used for SPA navigation.
* Rendered outside the visible link so it is always accessible to programmatic clicks.
*
* @csspart base - The main link container.
* @csspart text - The text of the link.
*
* @cssproperty --dds-link-color - The color of the link text (default: var(--dds-link-enabled)).
* @cssproperty --dds-link-hover-color - The color of the link text on hover (default: var(--dds-link-hover)).
* @cssproperty --dds-link-active-color - The color of the link text when active (default: var(--dds-link-pressed)).
* @cssproperty --dds-link-visited-color - The color of the visited link text (default: var(--dds-link-pressed)).
* @cssproperty --dds-link-font-size - The font size of the link text (default: var(--dds-font-base)).
* @cssproperty --dds-link-line-height - The line height of the link text (default: var(--dds-font-line-height-xlarge)).
* @cssproperty --dds-link-font-weight - The font weight of the link text (default: var(--dds-font-weight-medium)).
* @cssproperty --dds-link-text-decoration - The text decoration of the link (default: underline).
*
* @cssproperty --dds-link-neutral-color - The color of the neutral variant link (default: var(--dds-link-neutral-enabled)).
* @cssproperty --dds-link-neutral-hover-color - The hover color of the neutral variant link (default: var(--dds-link-neutral-hover)).
* @cssproperty --dds-link-neutral-active-color - The active color of the neutral variant link (default: var(--dds-link-neutral-pressed)).
* @cssproperty --dds-link-neutral-visited-color - The visited color of the neutral variant link (default: var(--dds-link-neutral-pressed)).
*
* @cssproperty --dds-link-brand-color - The color of the brand variant link (default: var(--dds-link-enabled)).
* @cssproperty --dds-link-brand-hover-color - The hover color of the brand variant link (default: var(--dds-link-hover)).
* @cssproperty --dds-link-brand-active-color - The active color of the brand variant link (default: var(--dds-link-pressed)).
* @cssproperty --dds-link-brand-visited-color - The visited color of the brand variant link (default: var(--dds-link-pressed)).
*
* @cssproperty --dds-link-inverted-color - The color of the inverted variant link (default: var(--dds-link-inverted-enabled)).
* @cssproperty --dds-link-inverted-hover-color - The hover color of the inverted variant link (default: var(--dds-link-inverted-hover)).
* @cssproperty --dds-link-inverted-active-color - The active color of the inverted variant link (default: var(--dds-link-inverted-pressed)).
* @cssproperty --dds-link-inverted-visited-color - The visited color of the inverted variant link (default: var(--dds-link-inverted-visited)).
*
* @cssproperty --dds-link-warning-color - The color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)).
* @cssproperty --dds-link-warning-hover-color - The hover color of the warning variant link (default: var(--dds-banner-action-inverted-hover)).
* @cssproperty --dds-link-warning-active-color - The active color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)).
* @cssproperty --dds-link-warning-visited-color - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)).
*
* @cssproperty --dds-link-disabled-color - The color of the disabled link (default: var(--dds-text-neutral-disabled)).
* @cssproperty --dds-link-disabled-hover-color - The hover color of the disabled link (default: var(--dds-text-neutral-disabled)).
* @cssproperty --dds-link-disabled-active-color - The active color of the disabled link (default: var(--dds-text-neutral-disabled)).
* @cssproperty --dds-link-disabled-visited-color - The visited color of the disabled link (default: var(--dds-text-neutral-disabled)).
*
* @cssproperty --dds-link-lg-font-size - The font size of the large link (default: var(--dds-font-lg)).
* @cssproperty --dds-link-lg-line-height - The line height of the large link (default: var(--dds-font-line-height-xlarge)).
* @cssproperty --dds-link-md-font-size - The font size of the medium link (default: var(--dds-font-base)).
* @cssproperty --dds-link-md-line-height - The line height of the medium link (default: var(--dds-font-line-height-xlarge)).
* @cssproperty --dds-link-sm-font-size - The font size of the small link (default: var(--dds-font-sm)).
* @cssproperty --dds-link-sm-line-height - The line height of the small link (default: var(--dds-font-line-height-xlarge)).
* @cssproperty --dds-link-xs-font-size - The font size of the extra small link (default: var(--dds-font-xs)).
* @cssproperty --dds-link-xs-line-height - The line height of the extra small link (default: var(--dds-font-line-height-xlarge)).
*
* @cssproperty --dds-link-normal-font-weight - The font weight of the normal link (default: var(--dds-font-weight-medium)).
* @cssproperty --dds-link-bold-font-weight - The font weight of the bold link (default: var(--dds-font-weight-bold)).
*
* @cssproperty --dds-link-no-underline-text-decoration - The text decoration when underline is removed (default: none).
*/
declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
onDdsClick: EventName<DdsClickEvent>;
}>;
export default reactWrapper;