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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @dt-ui/react-link
2
2
 
3
+ ## 1.0.0-beta.87
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: implement new Link design variants
8
+
9
+ ### Patch Changes
10
+
11
+ - chore: update to ESLint 10
12
+ - chore: update to ESLint 9
13
+ - fix: default icon type in themes
14
+ - Updated dependencies
15
+ - Updated dependencies
16
+ - Updated dependencies
17
+ - @dt-dds/icons@1.0.0-beta.7
18
+ - @dt-dds/react-core@1.0.0-beta.60
19
+ - @dt-dds/react-icon@1.0.0-beta.64
20
+ - @dt-dds/react-button@1.0.0-beta.109
21
+ - @dt-dds/themes@1.0.0-beta.15
22
+
3
23
  ## 1.0.0-beta.86
4
24
 
5
25
  ### Patch Changes
package/README.md CHANGED
@@ -14,15 +14,18 @@ export const App = () => {
14
14
 
15
15
  ## Properties
16
16
 
17
- | Property | Type | Default | Description |
18
- | ------------ | ------------- | ------------ | ----------------------------------------------- |
19
- | `children` | `ReactNode` | - | Child components to be rendered |
20
- | `dataTestId` | `string` | tag | Customizable test identifier |
21
- | `onClick` | `function` | - | The triggered function when the Link is clicked |
22
- | `isDisabled` | `boolean` | `false` | Specifies if the element should be disabled |
23
- | `size` | `LinkSize` | `medium` | Specifies the text size of the element |
24
- | `variant` | `LinkVariant` | `standalone` | Specifies the type of link |
25
- | `color` | `LinkColor` | `accent` | Specifies the color of the link |
17
+ | Property | Type | Default | Description |
18
+ | ------------ | ---------------- | ------------ | ----------------------------------------------- |
19
+ | `as` | `ElementType` | `a` | Renders the link as a different element or component |
20
+ | `children` | `ReactNode` | - | Child components to be rendered |
21
+ | `dataTestId` | `string` | `link` | Customizable test identifier |
22
+ | `onClick` | `function` | - | The triggered function when the Link is clicked |
23
+ | `isDisabled` | `boolean` | `false` | Specifies if the element should be disabled |
24
+ | `size` | `LinkSize` | `medium` | Specifies the text size of the element |
25
+ | `variant` | `LinkVariant` | `standalone` | Specifies the type of link |
26
+ | `color` | `LinkColor` | `primary` | Specifies the color of the link |
27
+ | `fontWeight` | `LinkFontWeight` | `regular` | Specifies the font weight of the link |
28
+ | `icon` | `Code` | - | Adds an icon next to the link text |
26
29
 
27
30
  This component inherits all native anchor properties. [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
28
31
 
package/dist/index.d.mts CHANGED
@@ -1,19 +1,23 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react from 'react';
3
+ import { ElementType } from 'react';
3
4
  import { Code } from '@dt-dds/icons';
4
5
  import { BaseProps, ComponentSize } from '@dt-dds/react-core';
5
6
 
6
7
  interface LinkProps extends BaseProps, React.AnchorHTMLAttributes<HTMLAnchorElement> {
8
+ as?: ElementType;
7
9
  isDisabled?: boolean;
8
10
  onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
9
11
  size?: LinkSize;
10
12
  color?: LinkColor;
13
+ fontWeight?: LinkFontWeight;
11
14
  icon?: Code;
12
15
  variant?: LinkVariant;
13
16
  }
14
17
  declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
15
18
 
16
- type LinkColor = 'accent' | 'secondary';
19
+ type LinkColor = 'primary' | 'secondary';
20
+ type LinkFontWeight = 'regular' | 'bold';
17
21
  type LinkSize = Extract<ComponentSize, 'small' | 'medium' | 'large'>;
18
22
  type LinkVariant = 'standalone' | 'inline';
19
23
 
@@ -22,4 +26,4 @@ declare module '@emotion/react' {
22
26
  }
23
27
  }
24
28
 
25
- export { Link, type LinkColor, type LinkProps, type LinkSize, type LinkVariant };
29
+ export { Link, type LinkColor, type LinkFontWeight, type LinkProps, type LinkSize, type LinkVariant };
package/dist/index.d.ts CHANGED
@@ -1,19 +1,23 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react from 'react';
3
+ import { ElementType } from 'react';
3
4
  import { Code } from '@dt-dds/icons';
4
5
  import { BaseProps, ComponentSize } from '@dt-dds/react-core';
5
6
 
6
7
  interface LinkProps extends BaseProps, React.AnchorHTMLAttributes<HTMLAnchorElement> {
8
+ as?: ElementType;
7
9
  isDisabled?: boolean;
8
10
  onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
9
11
  size?: LinkSize;
10
12
  color?: LinkColor;
13
+ fontWeight?: LinkFontWeight;
11
14
  icon?: Code;
12
15
  variant?: LinkVariant;
13
16
  }
14
17
  declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
15
18
 
16
- type LinkColor = 'accent' | 'secondary';
19
+ type LinkColor = 'primary' | 'secondary';
20
+ type LinkFontWeight = 'regular' | 'bold';
17
21
  type LinkSize = Extract<ComponentSize, 'small' | 'medium' | 'large'>;
18
22
  type LinkVariant = 'standalone' | 'inline';
19
23
 
@@ -22,4 +26,4 @@ declare module '@emotion/react' {
22
26
  }
23
27
  }
24
28
 
25
- export { Link, type LinkColor, type LinkProps, type LinkSize, type LinkVariant };
29
+ export { Link, type LinkColor, type LinkFontWeight, type LinkProps, type LinkSize, type LinkVariant };
package/dist/index.js CHANGED
@@ -69,67 +69,83 @@ var import_react_icon = require("@dt-dds/react-icon");
69
69
 
70
70
  // src/Link.styled.ts
71
71
  var import_styled = __toESM(require("@emotion/styled"));
72
+ var fontStyleMap = {
73
+ inline: {
74
+ large: { regular: "linkLgRegular", bold: "linkLgBold" },
75
+ medium: { regular: "linkMdRegular", bold: "linkMdBold" },
76
+ small: { regular: "linkSmRegular", bold: "linkSmBold" }
77
+ },
78
+ standalone: {
79
+ large: { regular: "bodyLgRegular", bold: "bodyLgBold" },
80
+ medium: { regular: "bodyMdRegular", bold: "bodyMdBold" },
81
+ small: { regular: "bodySmRegular", bold: "bodySmBold" }
82
+ }
83
+ };
84
+ var colorMap = (palette) => ({
85
+ inline: {
86
+ primary: {
87
+ default: palette.accent.default,
88
+ hover: palette.accent.dark,
89
+ active: palette.accent.medium,
90
+ disabled: palette.content.light
91
+ },
92
+ secondary: {
93
+ default: palette.accent.default,
94
+ hover: palette.accent.dark,
95
+ active: palette.accent.medium,
96
+ disabled: palette.content.light
97
+ }
98
+ },
99
+ standalone: {
100
+ primary: {
101
+ default: palette.primary.default,
102
+ hover: palette.accent.default,
103
+ active: palette.accent.default,
104
+ disabled: palette.primary.light
105
+ },
106
+ secondary: {
107
+ default: palette.secondary.default,
108
+ hover: palette.secondary.dark,
109
+ active: palette.secondary.medium,
110
+ disabled: palette.secondary.light
111
+ }
112
+ }
113
+ });
72
114
  var LinkStyled = import_styled.default.a`
73
- ${({ theme, disabled, size, variant = "standalone", color = "accent" }) => {
74
- const linkColor = variant === "inline" ? "accent" : color;
115
+ ${({
116
+ theme,
117
+ $disabled,
118
+ $size = "medium",
119
+ $variant = "standalone",
120
+ $color = "primary",
121
+ $fontWeight = "regular"
122
+ }) => {
123
+ const colors = colorMap(theme.palette)[$variant][$color];
75
124
  return `
76
- color: ${theme.palette[linkColor].default};
77
- display: inline-flex;
78
- align-items: center;
79
- gap: ${theme.spacing.spacing_20};
125
+ color: ${colors.default};
126
+ display: inline-flex;
127
+ align-items: center;
128
+ gap: ${theme.spacing.spacing_10};
80
129
 
130
+ ${theme.fontStyles[fontStyleMap[$variant][$size][$fontWeight]]};
81
131
 
82
- ${size == "large" && `
83
- ${theme.fontStyles.bodyLgBold}
84
- `};
132
+ ${$disabled ? `
133
+ color: ${colors.disabled};
134
+ cursor: not-allowed;
135
+ ` : `
136
+ &:hover {
137
+ color: ${colors.hover};
138
+ }
85
139
 
86
- ${size == "medium" && `
87
- ${theme.fontStyles.bodyMdBold}
88
- `};
140
+ &:active {
141
+ color: ${colors.active};
142
+ }
143
+ `};
89
144
 
90
- ${size == "small" && `
91
- ${theme.fontStyles.bodySmBold}
92
- `};
93
-
94
- ${disabled && `
95
- color: ${theme.palette[linkColor].light};
96
- cursor: not-allowed;
97
-
98
- ${variant === "inline" && `
99
- text-decoration: underline;
100
- `}
101
- `};
102
-
103
- ${!disabled && `
104
- ${variant === "inline" ? `
105
- text-decoration: underline;
106
-
107
- &:hover {
108
- color: ${theme.palette[linkColor].medium};
109
- }
110
- ` : `
111
- &:hover {
112
- text-decoration: underline;
113
- }
114
-
115
- &:has(span):hover {
116
- text-decoration: none;
117
-
118
- span {
119
- text-decoration: underline;
120
- }
121
- }
122
-
123
- &:active {
124
- color: ${theme.palette[linkColor].dark};
125
- text-decoration: none;
126
- }`}
127
- `};
128
-
129
- &:focus-visible {
130
- outline: 2px solid ${theme.palette.primary.default};
131
- }
132
- `;
145
+ &:focus-visible {
146
+ outline: 2px solid ${theme.palette.primary.default};
147
+ }
148
+ `;
133
149
  }}
134
150
  `;
135
151
 
@@ -144,6 +160,7 @@ var Link = (0, import_react.forwardRef)(
144
160
  dataTestId,
145
161
  onClick,
146
162
  variant,
163
+ fontWeight = "regular",
147
164
  href,
148
165
  style,
149
166
  icon,
@@ -155,6 +172,7 @@ var Link = (0, import_react.forwardRef)(
155
172
  "dataTestId",
156
173
  "onClick",
157
174
  "variant",
175
+ "fontWeight",
158
176
  "href",
159
177
  "style",
160
178
  "icon",
@@ -163,13 +181,14 @@ var Link = (0, import_react.forwardRef)(
163
181
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
164
182
  LinkStyled,
165
183
  __spreadProps(__spreadValues(__spreadValues({
166
- color,
184
+ $color: color,
167
185
  "data-testid": dataTestId != null ? dataTestId : "link",
168
- disabled: isDisabled,
186
+ $disabled: isDisabled,
187
+ $fontWeight: fontWeight,
169
188
  ref,
170
- size,
189
+ $size: size,
171
190
  style,
172
- variant
191
+ $variant: variant
173
192
  }, !isDisabled && { href, onClick }), rest), {
174
193
  children: variant === "inline" || !icon ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
175
194
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children }),
package/dist/index.mjs CHANGED
@@ -36,67 +36,83 @@ import { Icon } from "@dt-dds/react-icon";
36
36
 
37
37
  // src/Link.styled.ts
38
38
  import styled from "@emotion/styled";
39
+ var fontStyleMap = {
40
+ inline: {
41
+ large: { regular: "linkLgRegular", bold: "linkLgBold" },
42
+ medium: { regular: "linkMdRegular", bold: "linkMdBold" },
43
+ small: { regular: "linkSmRegular", bold: "linkSmBold" }
44
+ },
45
+ standalone: {
46
+ large: { regular: "bodyLgRegular", bold: "bodyLgBold" },
47
+ medium: { regular: "bodyMdRegular", bold: "bodyMdBold" },
48
+ small: { regular: "bodySmRegular", bold: "bodySmBold" }
49
+ }
50
+ };
51
+ var colorMap = (palette) => ({
52
+ inline: {
53
+ primary: {
54
+ default: palette.accent.default,
55
+ hover: palette.accent.dark,
56
+ active: palette.accent.medium,
57
+ disabled: palette.content.light
58
+ },
59
+ secondary: {
60
+ default: palette.accent.default,
61
+ hover: palette.accent.dark,
62
+ active: palette.accent.medium,
63
+ disabled: palette.content.light
64
+ }
65
+ },
66
+ standalone: {
67
+ primary: {
68
+ default: palette.primary.default,
69
+ hover: palette.accent.default,
70
+ active: palette.accent.default,
71
+ disabled: palette.primary.light
72
+ },
73
+ secondary: {
74
+ default: palette.secondary.default,
75
+ hover: palette.secondary.dark,
76
+ active: palette.secondary.medium,
77
+ disabled: palette.secondary.light
78
+ }
79
+ }
80
+ });
39
81
  var LinkStyled = styled.a`
40
- ${({ theme, disabled, size, variant = "standalone", color = "accent" }) => {
41
- const linkColor = variant === "inline" ? "accent" : color;
82
+ ${({
83
+ theme,
84
+ $disabled,
85
+ $size = "medium",
86
+ $variant = "standalone",
87
+ $color = "primary",
88
+ $fontWeight = "regular"
89
+ }) => {
90
+ const colors = colorMap(theme.palette)[$variant][$color];
42
91
  return `
43
- color: ${theme.palette[linkColor].default};
44
- display: inline-flex;
45
- align-items: center;
46
- gap: ${theme.spacing.spacing_20};
47
-
92
+ color: ${colors.default};
93
+ display: inline-flex;
94
+ align-items: center;
95
+ gap: ${theme.spacing.spacing_10};
48
96
 
49
- ${size == "large" && `
50
- ${theme.fontStyles.bodyLgBold}
51
- `};
97
+ ${theme.fontStyles[fontStyleMap[$variant][$size][$fontWeight]]};
52
98
 
53
- ${size == "medium" && `
54
- ${theme.fontStyles.bodyMdBold}
55
- `};
99
+ ${$disabled ? `
100
+ color: ${colors.disabled};
101
+ cursor: not-allowed;
102
+ ` : `
103
+ &:hover {
104
+ color: ${colors.hover};
105
+ }
56
106
 
57
- ${size == "small" && `
58
- ${theme.fontStyles.bodySmBold}
59
- `};
107
+ &:active {
108
+ color: ${colors.active};
109
+ }
110
+ `};
60
111
 
61
- ${disabled && `
62
- color: ${theme.palette[linkColor].light};
63
- cursor: not-allowed;
64
-
65
- ${variant === "inline" && `
66
- text-decoration: underline;
67
- `}
68
- `};
69
-
70
- ${!disabled && `
71
- ${variant === "inline" ? `
72
- text-decoration: underline;
73
-
74
- &:hover {
75
- color: ${theme.palette[linkColor].medium};
76
- }
77
- ` : `
78
- &:hover {
79
- text-decoration: underline;
80
- }
81
-
82
- &:has(span):hover {
83
- text-decoration: none;
84
-
85
- span {
86
- text-decoration: underline;
87
- }
88
- }
89
-
90
- &:active {
91
- color: ${theme.palette[linkColor].dark};
92
- text-decoration: none;
93
- }`}
94
- `};
95
-
96
- &:focus-visible {
97
- outline: 2px solid ${theme.palette.primary.default};
98
- }
99
- `;
112
+ &:focus-visible {
113
+ outline: 2px solid ${theme.palette.primary.default};
114
+ }
115
+ `;
100
116
  }}
101
117
  `;
102
118
 
@@ -111,6 +127,7 @@ var Link = forwardRef(
111
127
  dataTestId,
112
128
  onClick,
113
129
  variant,
130
+ fontWeight = "regular",
114
131
  href,
115
132
  style,
116
133
  icon,
@@ -122,6 +139,7 @@ var Link = forwardRef(
122
139
  "dataTestId",
123
140
  "onClick",
124
141
  "variant",
142
+ "fontWeight",
125
143
  "href",
126
144
  "style",
127
145
  "icon",
@@ -130,13 +148,14 @@ var Link = forwardRef(
130
148
  return /* @__PURE__ */ jsx(
131
149
  LinkStyled,
132
150
  __spreadProps(__spreadValues(__spreadValues({
133
- color,
151
+ $color: color,
134
152
  "data-testid": dataTestId != null ? dataTestId : "link",
135
- disabled: isDisabled,
153
+ $disabled: isDisabled,
154
+ $fontWeight: fontWeight,
136
155
  ref,
137
- size,
156
+ $size: size,
138
157
  style,
139
- variant
158
+ $variant: variant
140
159
  }, !isDisabled && { href, onClick }), rest), {
141
160
  children: variant === "inline" || !icon ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
142
161
  /* @__PURE__ */ jsx("span", { children }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-link",
3
- "version": "1.0.0-beta.86",
3
+ "version": "1.0.0-beta.87",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -20,11 +20,11 @@
20
20
  "test:update:snapshot": "jest -u"
21
21
  },
22
22
  "dependencies": {
23
- "@dt-dds/icons": "1.0.0-beta.6",
24
- "@dt-dds/react-button": "1.0.0-beta.108",
25
- "@dt-dds/react-core": "1.0.0-beta.59",
26
- "@dt-dds/react-icon": "1.0.0-beta.63",
27
- "@dt-dds/themes": "1.0.0-beta.14"
23
+ "@dt-dds/icons": "1.0.0-beta.7",
24
+ "@dt-dds/react-button": "1.0.0-beta.109",
25
+ "@dt-dds/react-core": "1.0.0-beta.60",
26
+ "@dt-dds/react-icon": "1.0.0-beta.64",
27
+ "@dt-dds/themes": "1.0.0-beta.15"
28
28
  },
29
29
  "devDependencies": {
30
30
  "@babel/core": "^7.22.9",