@dt-dds/react-link 1.0.0-beta.86 → 1.0.0-beta.88

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @dt-ui/react-link
 
+## 1.0.0-beta.88
+
+### Minor Changes
+
+- feat: prevent transient props from leaking on Link
+
+## 1.0.0-beta.87
+
+### Minor Changes
+
+- feat: implement new Link design variants
+
+### Patch Changes
+
+- chore: update to ESLint 10
+- chore: update to ESLint 9
+- fix: default icon type in themes
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - @dt-dds/icons@1.0.0-beta.7
+  - @dt-dds/react-core@1.0.0-beta.60
+  - @dt-dds/react-icon@1.0.0-beta.64
+  - @dt-dds/react-button@1.0.0-beta.109
+  - @dt-dds/themes@1.0.0-beta.15
+
 ## 1.0.0-beta.86
 
 ### Patch Changes

package/README.md

@@ -14,15 +14,18 @@ export const App = () => {
 
 ## Properties
 
-| Property     | Type          | Default      | Description                                     |
-| ------------ | ------------- | ------------ | ----------------------------------------------- |
-| `children`   | `ReactNode`   | -            | Child components to be rendered                 |
-| `dataTestId` | `string`      | tag          | Customizable test identifier                    |
-| `onClick`    | `function`    | -            | The triggered function when the Link is clicked |
-| `isDisabled` | `boolean`     | `false`      | Specifies if the element should be disabled     |
-| `size`       | `LinkSize`    | `medium`     | Specifies the text size of the element          |
-| `variant`    | `LinkVariant` | `standalone` | Specifies the type of link                      |
-| `color`      | `LinkColor`   | `accent`     | Specifies the color of the link                 |
+| Property     | Type             | Default      | Description                                     |
+| ------------ | ---------------- | ------------ | ----------------------------------------------- |
+| `as`         | `ElementType`    | `a`          | Renders the link as a different element or component |
+| `children`   | `ReactNode`      | -            | Child components to be rendered                 |
+| `dataTestId` | `string`         | `link`       | Customizable test identifier                    |
+| `onClick`    | `function`       | -            | The triggered function when the Link is clicked |
+| `isDisabled` | `boolean`        | `false`      | Specifies if the element should be disabled     |
+| `size`       | `LinkSize`       | `medium`     | Specifies the text size of the element          |
+| `variant`    | `LinkVariant`    | `standalone` | Specifies the type of link                      |
+| `color`      | `LinkColor`      | `primary`    | Specifies the color of the link                 |
+| `fontWeight` | `LinkFontWeight` | `regular`    | Specifies the font weight of the link           |
+| `icon`       | `Code`           | -            | Adds an icon next to the link text              |
 
 This component inherits all native anchor properties. [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
 

package/dist/index.d.mts

@@ -1,19 +1,23 @@
 import { CustomTheme } from '@dt-dds/themes';
 import * as react from 'react';
+import { ElementType } from 'react';
 import { Code } from '@dt-dds/icons';
 import { BaseProps, ComponentSize } from '@dt-dds/react-core';
 
 interface LinkProps extends BaseProps, React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    as?: ElementType;
     isDisabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
     size?: LinkSize;
     color?: LinkColor;
+    fontWeight?: LinkFontWeight;
     icon?: Code;
     variant?: LinkVariant;
 }
 declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
-type LinkColor = 'accent' | 'secondary';
+type LinkColor = 'primary' | 'secondary';
+type LinkFontWeight = 'regular' | 'bold';
 type LinkSize = Extract<ComponentSize, 'small' | 'medium' | 'large'>;
 type LinkVariant = 'standalone' | 'inline';
 
@@ -22,4 +26,4 @@ declare module '@emotion/react' {
     }
 }
 
-export { Link, type LinkColor, type LinkProps, type LinkSize, type LinkVariant };
+export { Link, type LinkColor, type LinkFontWeight, type LinkProps, type LinkSize, type LinkVariant };

package/dist/index.d.ts

@@ -1,19 +1,23 @@
 import { CustomTheme } from '@dt-dds/themes';
 import * as react from 'react';
+import { ElementType } from 'react';
 import { Code } from '@dt-dds/icons';
 import { BaseProps, ComponentSize } from '@dt-dds/react-core';
 
 interface LinkProps extends BaseProps, React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    as?: ElementType;
     isDisabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
     size?: LinkSize;
     color?: LinkColor;
+    fontWeight?: LinkFontWeight;
     icon?: Code;
     variant?: LinkVariant;
 }
 declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
-type LinkColor = 'accent' | 'secondary';
+type LinkColor = 'primary' | 'secondary';
+type LinkFontWeight = 'regular' | 'bold';
 type LinkSize = Extract<ComponentSize, 'small' | 'medium' | 'large'>;
 type LinkVariant = 'standalone' | 'inline';
 
@@ -22,4 +26,4 @@ declare module '@emotion/react' {
     }
 }
 
-export { Link, type LinkColor, type LinkProps, type LinkSize, type LinkVariant };
+export { Link, type LinkColor, type LinkFontWeight, type LinkProps, type LinkSize, type LinkVariant };

package/dist/index.js

@@ -68,68 +68,87 @@ var import_react = require("react");
 var import_react_icon = require("@dt-dds/react-icon");
 
 // src/Link.styled.ts
+var import_is_prop_valid = __toESM(require("@emotion/is-prop-valid"));
 var import_styled = __toESM(require("@emotion/styled"));
-var LinkStyled = import_styled.default.a`
-  ${({ theme, disabled, size, variant = "standalone", color = "accent" }) => {
-  const linkColor = variant === "inline" ? "accent" : color;
+var fontStyleMap = {
+  inline: {
+    large: { regular: "linkLgRegular", bold: "linkLgBold" },
+    medium: { regular: "linkMdRegular", bold: "linkMdBold" },
+    small: { regular: "linkSmRegular", bold: "linkSmBold" }
+  },
+  standalone: {
+    large: { regular: "bodyLgRegular", bold: "bodyLgBold" },
+    medium: { regular: "bodyMdRegular", bold: "bodyMdBold" },
+    small: { regular: "bodySmRegular", bold: "bodySmBold" }
+  }
+};
+var colorMap = (palette) => ({
+  inline: {
+    primary: {
+      default: palette.accent.default,
+      hover: palette.accent.dark,
+      active: palette.accent.medium,
+      disabled: palette.content.light
+    },
+    secondary: {
+      default: palette.accent.default,
+      hover: palette.accent.dark,
+      active: palette.accent.medium,
+      disabled: palette.content.light
+    }
+  },
+  standalone: {
+    primary: {
+      default: palette.primary.default,
+      hover: palette.accent.default,
+      active: palette.accent.default,
+      disabled: palette.primary.light
+    },
+    secondary: {
+      default: palette.secondary.default,
+      hover: palette.secondary.dark,
+      active: palette.secondary.medium,
+      disabled: palette.secondary.light
+    }
+  }
+});
+var LinkStyled = (0, import_styled.default)("a", {
+  shouldForwardProp: (prop) => (0, import_is_prop_valid.default)(prop) && !prop.startsWith("$")
+})`
+  ${({
+  theme,
+  $disabled,
+  $size = "medium",
+  $variant = "standalone",
+  $color = "primary",
+  $fontWeight = "regular"
+}) => {
+  const colors = colorMap(theme.palette)[$variant][$color];
   return `
-    color: ${theme.palette[linkColor].default};
-    display: inline-flex;
-    align-items: center;
-    gap: ${theme.spacing.spacing_20};
+      color: ${colors.default};
+      display: inline-flex;
+      align-items: center;
+      gap: ${theme.spacing.spacing_10};
 
+      ${theme.fontStyles[fontStyleMap[$variant][$size][$fontWeight]]};
 
-    ${size == "large" && `
-        ${theme.fontStyles.bodyLgBold}
-      `};
+      ${$disabled ? `
+            color: ${colors.disabled};
+            cursor: not-allowed;
+          ` : `
+            &:hover {
+              color: ${colors.hover};
+            }
 
-    ${size == "medium" && `
-        ${theme.fontStyles.bodyMdBold}
-      `};
+            &:active {
+              color: ${colors.active};
+            }
+          `};
 
-    ${size == "small" && `
-        ${theme.fontStyles.bodySmBold}
-      `};
-
-    ${disabled && `
-        color: ${theme.palette[linkColor].light};
-        cursor: not-allowed;
-
-      ${variant === "inline" && `       
-          text-decoration: underline;
-        `}
-      `};
-
-    ${!disabled && `
-       ${variant === "inline" ? ` 
-           text-decoration: underline;
-            
-           &:hover {
-             color: ${theme.palette[linkColor].medium};
-           }
-         ` : `
-        &:hover {
-          text-decoration: underline;
-        }
-        
-        &:has(span):hover {
-          text-decoration: none; 
-          
-          span {
-            text-decoration: underline;
-          }
-        }
-
-        &:active {
-          color: ${theme.palette[linkColor].dark};
-          text-decoration: none;
-        }`}
-      `};
-
-    &:focus-visible {
-      outline: 2px solid ${theme.palette.primary.default};
-    }
-  `;
+      &:focus-visible {
+        outline: 2px solid ${theme.palette.primary.default};
+      }
+    `;
 }}
 `;
 
@@ -144,6 +163,7 @@ var Link = (0, import_react.forwardRef)(
       dataTestId,
       onClick,
       variant,
+      fontWeight = "regular",
       href,
       style,
       icon,
@@ -155,6 +175,7 @@ var Link = (0, import_react.forwardRef)(
       "dataTestId",
       "onClick",
       "variant",
+      "fontWeight",
       "href",
       "style",
       "icon",
@@ -163,13 +184,14 @@ var Link = (0, import_react.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       LinkStyled,
       __spreadProps(__spreadValues(__spreadValues({
-        color,
+        $color: color,
         "data-testid": dataTestId != null ? dataTestId : "link",
-        disabled: isDisabled,
+        $disabled: isDisabled,
+        $fontWeight: fontWeight,
         ref,
-        size,
+        $size: size,
         style,
-        variant
+        $variant: variant
       }, !isDisabled && { href, onClick }), rest), {
         children: variant === "inline" || !icon ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children }),

package/dist/index.mjs

@@ -35,68 +35,87 @@ import { forwardRef } from "react";
 import { Icon } from "@dt-dds/react-icon";
 
 // src/Link.styled.ts
+import isPropValid from "@emotion/is-prop-valid";
 import styled from "@emotion/styled";
-var LinkStyled = styled.a`
-  ${({ theme, disabled, size, variant = "standalone", color = "accent" }) => {
-  const linkColor = variant === "inline" ? "accent" : color;
+var fontStyleMap = {
+  inline: {
+    large: { regular: "linkLgRegular", bold: "linkLgBold" },
+    medium: { regular: "linkMdRegular", bold: "linkMdBold" },
+    small: { regular: "linkSmRegular", bold: "linkSmBold" }
+  },
+  standalone: {
+    large: { regular: "bodyLgRegular", bold: "bodyLgBold" },
+    medium: { regular: "bodyMdRegular", bold: "bodyMdBold" },
+    small: { regular: "bodySmRegular", bold: "bodySmBold" }
+  }
+};
+var colorMap = (palette) => ({
+  inline: {
+    primary: {
+      default: palette.accent.default,
+      hover: palette.accent.dark,
+      active: palette.accent.medium,
+      disabled: palette.content.light
+    },
+    secondary: {
+      default: palette.accent.default,
+      hover: palette.accent.dark,
+      active: palette.accent.medium,
+      disabled: palette.content.light
+    }
+  },
+  standalone: {
+    primary: {
+      default: palette.primary.default,
+      hover: palette.accent.default,
+      active: palette.accent.default,
+      disabled: palette.primary.light
+    },
+    secondary: {
+      default: palette.secondary.default,
+      hover: palette.secondary.dark,
+      active: palette.secondary.medium,
+      disabled: palette.secondary.light
+    }
+  }
+});
+var LinkStyled = styled("a", {
+  shouldForwardProp: (prop) => isPropValid(prop) && !prop.startsWith("$")
+})`
+  ${({
+  theme,
+  $disabled,
+  $size = "medium",
+  $variant = "standalone",
+  $color = "primary",
+  $fontWeight = "regular"
+}) => {
+  const colors = colorMap(theme.palette)[$variant][$color];
   return `
-    color: ${theme.palette[linkColor].default};
-    display: inline-flex;
-    align-items: center;
-    gap: ${theme.spacing.spacing_20};
-
+      color: ${colors.default};
+      display: inline-flex;
+      align-items: center;
+      gap: ${theme.spacing.spacing_10};
 
-    ${size == "large" && `
-        ${theme.fontStyles.bodyLgBold}
-      `};
+      ${theme.fontStyles[fontStyleMap[$variant][$size][$fontWeight]]};
 
-    ${size == "medium" && `
-        ${theme.fontStyles.bodyMdBold}
-      `};
+      ${$disabled ? `
+            color: ${colors.disabled};
+            cursor: not-allowed;
+          ` : `
+            &:hover {
+              color: ${colors.hover};
+            }
 
-    ${size == "small" && `
-        ${theme.fontStyles.bodySmBold}
-      `};
+            &:active {
+              color: ${colors.active};
+            }
+          `};
 
-    ${disabled && `
-        color: ${theme.palette[linkColor].light};
-        cursor: not-allowed;
-
-      ${variant === "inline" && `       
-          text-decoration: underline;
-        `}
-      `};
-
-    ${!disabled && `
-       ${variant === "inline" ? ` 
-           text-decoration: underline;
-            
-           &:hover {
-             color: ${theme.palette[linkColor].medium};
-           }
-         ` : `
-        &:hover {
-          text-decoration: underline;
-        }
-        
-        &:has(span):hover {
-          text-decoration: none; 
-          
-          span {
-            text-decoration: underline;
-          }
-        }
-
-        &:active {
-          color: ${theme.palette[linkColor].dark};
-          text-decoration: none;
-        }`}
-      `};
-
-    &:focus-visible {
-      outline: 2px solid ${theme.palette.primary.default};
-    }
-  `;
+      &:focus-visible {
+        outline: 2px solid ${theme.palette.primary.default};
+      }
+    `;
 }}
 `;
 
@@ -111,6 +130,7 @@ var Link = forwardRef(
       dataTestId,
       onClick,
       variant,
+      fontWeight = "regular",
       href,
       style,
       icon,
@@ -122,6 +142,7 @@ var Link = forwardRef(
       "dataTestId",
       "onClick",
       "variant",
+      "fontWeight",
       "href",
       "style",
       "icon",
@@ -130,13 +151,14 @@ var Link = forwardRef(
     return /* @__PURE__ */ jsx(
       LinkStyled,
       __spreadProps(__spreadValues(__spreadValues({
-        color,
+        $color: color,
         "data-testid": dataTestId != null ? dataTestId : "link",
-        disabled: isDisabled,
+        $disabled: isDisabled,
+        $fontWeight: fontWeight,
         ref,
-        size,
+        $size: size,
         style,
-        variant
+        $variant: variant
       }, !isDisabled && { href, onClick }), rest), {
         children: variant === "inline" || !icon ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { children }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-link",
-  "version": "1.0.0-beta.86",
+  "version": "1.0.0-beta.88",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,11 +20,11 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/icons": "1.0.0-beta.6",
-    "@dt-dds/react-button": "1.0.0-beta.108",
-    "@dt-dds/react-core": "1.0.0-beta.59",
-    "@dt-dds/react-icon": "1.0.0-beta.63",
-    "@dt-dds/themes": "1.0.0-beta.14"
+    "@dt-dds/icons": "1.0.0-beta.7",
+    "@dt-dds/react-button": "1.0.0-beta.109",
+    "@dt-dds/react-core": "1.0.0-beta.60",
+    "@dt-dds/react-icon": "1.0.0-beta.64",
+    "@dt-dds/themes": "1.0.0-beta.15"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",