@gemeente-denhaag/link - npm Package Compare versions

Comparing version 0.2.3-alpha.369 to 0.2.3-alpha.370

dist/cjs/index.d.ts

@@ -1,96 +0,12 @@
-import React from 'react';
+import React, { AnchorHTMLAttributes, ComponentType } from 'react';
 import { SvgIconProps } from '@gemeente-denhaag/icons';
 import './index.scss';
-type OverrideProps<M, C extends React.ElementType> = M & Omit<React.ComponentPropsWithRef<C>, keyof M>;
-interface OverridableComponent<M> {
-    <C extends React.ElementType>(props: {
-        /**
-         * The component used for the root node.
-         * Either a string to use a HTML element or a component.
-         */
-        component: C;
-    } & OverrideProps<M, C>): JSX.Element;
-    (props: M): JSX.Element;
-}
-export interface LinkProps {
-    /**
-     * The id attribute is used to specify a unique id for an HTML element.
-     */
-    id?: string;
-    /**
-     * The contents of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Extend the styles of the component by adding new classes.
-     */
-    className?: string;
-    /**
-     * The tab-index applied to the root element of the component.
-     */
-    tabIndex?: number;
-    /**
-     * The URL that the hyperlink points to. Links are not restricted to HTTP-based
-     * URLs — they can use any URL scheme supported by browsers.
-     *
-     * [(See MDN Web Docs for details)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href)
-     */
-    href?: string;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-hreflang)
-     */
-    hrefLang?: string;
-    /**
-     * Icon to display at the start or the end of the link
-     */
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     icon?: React.ReactElement<SvgIconProps>;
-    /**
-     * If an `icon` is specified, should it be aligned on the left or the right?
-     */
     iconAlign?: 'start' | 'end';
-    /**
-     * Disables the link.
-     */
     disabled?: boolean;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download)
-     */
-    download?: string | boolean;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-media)
-     */
-    media?: string;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-ping)
-     */
-    ping?: string;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel)
-     */
-    rel?: string;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
-     */
-    target?: React.HTMLAttributeAnchorTarget;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-type)
-     */
-    type?: string;
-    /**
-     * ⚠️ Experimental.
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy)
-     */
-    referrerPolicy?: React.HTMLAttributeReferrerPolicy;
-    /**
-     * Override base component
-     */
-    component?: React.ElementType;
+    Link?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
 }
-/**
- * An easily customizable anchor element.
- * @param props The properties of a Link component.
- * @constructor Constructs an instance of Link.
- */
-export declare const Link: OverridableComponent<LinkProps>;
+export declare const Link: ({ disabled, icon, iconAlign, tabIndex, children, Link, ...props }: LinkProps) => React.JSX.Element;
 export default Link;
-export * from './CustomLink';
+export * from './BasicLink';

dist/cjs/index.js

@@ -44,2 +44,5 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react');/******************************************************************************
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};var BasicLink = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement("a", __assign({}, props), children));
 };function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}var css_248z = ".denhaag-link{color:var(--denhaag-link-color);cursor:var(--denhaag-link-cursor,pointer);font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;padding-inline-end:var(--denhaag-link-padding-inline-end,0);padding-inline-start:var(--denhaag-link-padding-inline-start,0);position:relative;text-decoration:var(--denhaag-link-text-decoration)}.denhaag-link--with-icon{align-items:center;display:inline-flex;gap:var(--denhaag-link-icon-gap);text-decoration:none;vertical-align:var(--denhaag-link-with-icon-vertical-align,baseline)}.denhaag-link--with-small-icon{--denhaag-link-icon-font-size:var(--denhaag-link-small-icon-font-size);--denhaag-link-icon-size:var(--denhaag-link-small-icon-size)}.denhaag-link--with-icon-start{--denhaag-link-icon-order:0;--denhaag-link-padding-inline-start:0}.denhaag-link--external,.denhaag-link--focus,.denhaag-link--hover,.denhaag-link:focus-visible,.denhaag-link:hover{text-decoration:var(--denhaag-link-text-decoration)}.denhaag-link--with-icon-end{--denhaag-link-icon-order:2;--denhaag-link-padding-inline-end:0}.denhaag-link--external{--denhaag-link-icon-align:var(--denhaag-link-external-icon-align)}.denhaag-link--focus,.denhaag-link:focus-visible{--denhaag-link-color:var(--denhaag-link-focus-color);outline:var(--denhaag-link-focus-outline)}.denhaag-link--hover,.denhaag-link:hover{--denhaag-link-color:var(--denhaag-link-hover-color);--denhaag-link-cursor:pointer}.denhaag-link--disabled,.denhaag-link--disabled--hover,.denhaag-link--disabled:hover{--denhaag-link-color:var(--denhaag-link-disabled-color);--denhaag-link-cursor:none;pointer-events:none}.denhaag-link__icon{align-items:var(--denhaag-link-icon-align);display:inline-flex;height:var(--denhaag-link-icon-size);justify-content:center;order:var(--denhaag-link-icon-order,0);position:relative;vertical-align:text-top;width:var(--denhaag-link-icon-size)}li .denhaag-link__icon{align-self:start;flex:1 0 auto}.denhaag-link__icon>:first-child{aspect-ratio:1/1;font-size:var(--denhaag-link-icon-font-size);height:var(--denhaag-link-icon-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--denhaag-link-icon-size)}.denhaag-link__sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin-block-end:-1px;margin-block-start:-1px;margin-inline-end:-1px;margin-inline-start:-1px;overflow:hidden;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0;position:absolute;width:1px}";
@@ -59,9 +62,4 @@ const head = document.head || document.getElementsByTagName('head')[0];
             style.appendChild(document.createTextNode(css_248z));
-          }/**
- * An easily customizable anchor element.
- * @param props The properties of a Link component.
- * @constructor Constructs an instance of Link.
- */
-var Link = function (_a) {
-    var href = _a.href, id = _a.id, _b = _a.children, children = _b === void 0 ? undefined : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.icon, icon = _d === void 0 ? undefined : _d, _e = _a.iconAlign, iconAlign = _e === void 0 ? 'end' : _e, _f = _a.tabIndex, tabIndex = _f === void 0 ? 0 : _f, props = __rest(_a, ["href", "id", "children", "disabled", "icon", "iconAlign", "tabIndex"]);
+          }var Link = function (_a) {
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.icon, icon = _c === void 0 ? undefined : _c, _d = _a.iconAlign, iconAlign = _d === void 0 ? 'end' : _d, _e = _a.tabIndex, tabIndex = _e === void 0 ? 0 : _e, children = _a.children, _f = _a.Link, Link = _f === void 0 ? BasicLink : _f, props = __rest(_a, ["disabled", "icon", "iconAlign", "tabIndex", "children", "Link"]);
     var rootClassNames = clsx('denhaag-link', {
@@ -75,6 +73,6 @@ 'denhaag-link--disabled': disabled,
     var iconWrapped = React.createElement("span", { className: iconClassName }, icon);
-    return (React.createElement("a", __assign({ id: id, href: href, tabIndex: disabled ? -1 : tabIndex }, props, { className: rootClassNames }),
+    return (React.createElement(Link, __assign({ tabIndex: disabled ? -1 : tabIndex }, props, { className: rootClassNames }),
         icon !== undefined && iconAlign === 'start' ? iconWrapped : '',
         React.createElement("span", null, children),
         icon !== undefined && iconAlign === 'end' ? iconWrapped : ''));
-};exports.Link=Link;exports.default=Link;
+};exports.BasicLink=BasicLink;exports.Link=Link;exports.default=Link;

dist/mjs/index.d.ts

@@ -1,96 +0,12 @@
-import React from 'react';
+import React, { AnchorHTMLAttributes, ComponentType } from 'react';
 import { SvgIconProps } from '@gemeente-denhaag/icons';
 import './index.scss';
-type OverrideProps<M, C extends React.ElementType> = M & Omit<React.ComponentPropsWithRef<C>, keyof M>;
-interface OverridableComponent<M> {
-    <C extends React.ElementType>(props: {
-        /**
-         * The component used for the root node.
-         * Either a string to use a HTML element or a component.
-         */
-        component: C;
-    } & OverrideProps<M, C>): JSX.Element;
-    (props: M): JSX.Element;
-}
-export interface LinkProps {
-    /**
-     * The id attribute is used to specify a unique id for an HTML element.
-     */
-    id?: string;
-    /**
-     * The contents of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Extend the styles of the component by adding new classes.
-     */
-    className?: string;
-    /**
-     * The tab-index applied to the root element of the component.
-     */
-    tabIndex?: number;
-    /**
-     * The URL that the hyperlink points to. Links are not restricted to HTTP-based
-     * URLs — they can use any URL scheme supported by browsers.
-     *
-     * [(See MDN Web Docs for details)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href)
-     */
-    href?: string;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-hreflang)
-     */
-    hrefLang?: string;
-    /**
-     * Icon to display at the start or the end of the link
-     */
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     icon?: React.ReactElement<SvgIconProps>;
-    /**
-     * If an `icon` is specified, should it be aligned on the left or the right?
-     */
     iconAlign?: 'start' | 'end';
-    /**
-     * Disables the link.
-     */
     disabled?: boolean;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download)
-     */
-    download?: string | boolean;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-media)
-     */
-    media?: string;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-ping)
-     */
-    ping?: string;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel)
-     */
-    rel?: string;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
-     */
-    target?: React.HTMLAttributeAnchorTarget;
-    /**
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-type)
-     */
-    type?: string;
-    /**
-     * ⚠️ Experimental.
-     * [See MDN Web Docs for details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy)
-     */
-    referrerPolicy?: React.HTMLAttributeReferrerPolicy;
-    /**
-     * Override base component
-     */
-    component?: React.ElementType;
+    Link?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
 }
-/**
- * An easily customizable anchor element.
- * @param props The properties of a Link component.
- * @constructor Constructs an instance of Link.
- */
-export declare const Link: OverridableComponent<LinkProps>;
+export declare const Link: ({ disabled, icon, iconAlign, tabIndex, children, Link, ...props }: LinkProps) => React.JSX.Element;
 export default Link;
-export * from './CustomLink';
+export * from './BasicLink';

dist/mjs/index.js

@@ -44,2 +44,5 @@ import React from'react';/******************************************************************************
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};var BasicLink = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement("a", __assign({}, props), children));
 };function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}var css_248z = ".denhaag-link{color:var(--denhaag-link-color);cursor:var(--denhaag-link-cursor,pointer);font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;padding-inline-end:var(--denhaag-link-padding-inline-end,0);padding-inline-start:var(--denhaag-link-padding-inline-start,0);position:relative;text-decoration:var(--denhaag-link-text-decoration)}.denhaag-link--with-icon{align-items:center;display:inline-flex;gap:var(--denhaag-link-icon-gap);text-decoration:none;vertical-align:var(--denhaag-link-with-icon-vertical-align,baseline)}.denhaag-link--with-small-icon{--denhaag-link-icon-font-size:var(--denhaag-link-small-icon-font-size);--denhaag-link-icon-size:var(--denhaag-link-small-icon-size)}.denhaag-link--with-icon-start{--denhaag-link-icon-order:0;--denhaag-link-padding-inline-start:0}.denhaag-link--external,.denhaag-link--focus,.denhaag-link--hover,.denhaag-link:focus-visible,.denhaag-link:hover{text-decoration:var(--denhaag-link-text-decoration)}.denhaag-link--with-icon-end{--denhaag-link-icon-order:2;--denhaag-link-padding-inline-end:0}.denhaag-link--external{--denhaag-link-icon-align:var(--denhaag-link-external-icon-align)}.denhaag-link--focus,.denhaag-link:focus-visible{--denhaag-link-color:var(--denhaag-link-focus-color);outline:var(--denhaag-link-focus-outline)}.denhaag-link--hover,.denhaag-link:hover{--denhaag-link-color:var(--denhaag-link-hover-color);--denhaag-link-cursor:pointer}.denhaag-link--disabled,.denhaag-link--disabled--hover,.denhaag-link--disabled:hover{--denhaag-link-color:var(--denhaag-link-disabled-color);--denhaag-link-cursor:none;pointer-events:none}.denhaag-link__icon{align-items:var(--denhaag-link-icon-align);display:inline-flex;height:var(--denhaag-link-icon-size);justify-content:center;order:var(--denhaag-link-icon-order,0);position:relative;vertical-align:text-top;width:var(--denhaag-link-icon-size)}li .denhaag-link__icon{align-self:start;flex:1 0 auto}.denhaag-link__icon>:first-child{aspect-ratio:1/1;font-size:var(--denhaag-link-icon-font-size);height:var(--denhaag-link-icon-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--denhaag-link-icon-size)}.denhaag-link__sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin-block-end:-1px;margin-block-start:-1px;margin-inline-end:-1px;margin-inline-start:-1px;overflow:hidden;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0;position:absolute;width:1px}";
@@ -59,9 +62,4 @@ const head = document.head || document.getElementsByTagName('head')[0];
             style.appendChild(document.createTextNode(css_248z));
-          }/**
- * An easily customizable anchor element.
- * @param props The properties of a Link component.
- * @constructor Constructs an instance of Link.
- */
-var Link = function (_a) {
-    var href = _a.href, id = _a.id, _b = _a.children, children = _b === void 0 ? undefined : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.icon, icon = _d === void 0 ? undefined : _d, _e = _a.iconAlign, iconAlign = _e === void 0 ? 'end' : _e, _f = _a.tabIndex, tabIndex = _f === void 0 ? 0 : _f, props = __rest(_a, ["href", "id", "children", "disabled", "icon", "iconAlign", "tabIndex"]);
+          }var Link = function (_a) {
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.icon, icon = _c === void 0 ? undefined : _c, _d = _a.iconAlign, iconAlign = _d === void 0 ? 'end' : _d, _e = _a.tabIndex, tabIndex = _e === void 0 ? 0 : _e, children = _a.children, _f = _a.Link, Link = _f === void 0 ? BasicLink : _f, props = __rest(_a, ["disabled", "icon", "iconAlign", "tabIndex", "children", "Link"]);
     var rootClassNames = clsx('denhaag-link', {
@@ -75,6 +73,6 @@ 'denhaag-link--disabled': disabled,
     var iconWrapped = React.createElement("span", { className: iconClassName }, icon);
-    return (React.createElement("a", __assign({ id: id, href: href, tabIndex: disabled ? -1 : tabIndex }, props, { className: rootClassNames }),
+    return (React.createElement(Link, __assign({ tabIndex: disabled ? -1 : tabIndex }, props, { className: rootClassNames }),
         icon !== undefined && iconAlign === 'start' ? iconWrapped : '',
         React.createElement("span", null, children),
         icon !== undefined && iconAlign === 'end' ? iconWrapped : ''));
-};export{Link,Link as default};
+};export{BasicLink,Link,Link as default};

package.json

 {
   "name": "@gemeente-denhaag/link",
-  "version": "0.2.3-alpha.369",
+  "version": "0.2.3-alpha.370",
   "description": "A Link component",
@@ -33,3 +33,3 @@ "bugs": "https://github.com/nl-design-system/denhaag/issues",
   "dependencies": {
-    "@gemeente-denhaag/icons": "0.2.3-alpha.369"
+    "@gemeente-denhaag/icons": "0.2.3-alpha.370"
   },
@@ -39,3 +39,3 @@ "peerDependencies": {
   },
-  "gitHead": "b2381705e559872c9bd8dd192370273eb8ffdf57"
+  "gitHead": "3940c0dacbd44e66c7896362fb11b961a4ab77dc"
 }

No alert changes

Worsened metrics

Total package byte prevSize

36259

decreased by-12.52%

Lines of code

281

decreased by-37.97%

Dependency changes

• + Added@gemeente-denhaag/icons@0.2.3-alpha.370(transitive)

• - Removed@gemeente-denhaag/icons@0.2.3-alpha.369(transitive)

• Updated@gemeente-denhaag/icons@0.2.3-alpha.370