@dt-dds/react-link 1.0.0-beta.18 → 1.0.0-beta.20

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +9 -7
  3. package/dist/index.d.ts +6 -4
  4. package/dist/index.js +51 -26
  5. package/dist/index.mjs +52 -27
  6. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @dt-ui/react-link
2
2
 
3
+ ## 1.0.0-beta.20
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: add link variant
8
+
9
+ ### Patch Changes
10
+
11
+ - @dt-dds/react-button@1.0.0-beta.43
12
+
13
+ ## 1.0.0-beta.19
14
+
15
+ ### Patch Changes
16
+
17
+ - fix: button-responsiveness
18
+ - Updated dependencies
19
+ - @dt-dds/react-button@1.0.0-beta.42
20
+
3
21
  ## 1.0.0-beta.18
4
22
 
5
23
  ### Minor Changes
package/README.md CHANGED
@@ -14,13 +14,15 @@ 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 |
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 |
24
26
 
25
27
  This component inherits all native anchor properties. [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
26
28
 
package/dist/index.d.ts CHANGED
@@ -6,15 +6,17 @@ import { IconProps } from '@dt-dds/react-icon';
6
6
 
7
7
  interface LinkProps extends BaseProps, React.AnchorHTMLAttributes<HTMLAnchorElement> {
8
8
  isDisabled?: boolean;
9
- onClick?: () => void;
9
+ onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
10
10
  size?: LinkSize;
11
- variant?: LinkVariant;
11
+ color?: LinkColor;
12
12
  icon?: Code;
13
+ variant?: LinkVariant;
13
14
  }
14
15
  declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
15
16
 
16
- type LinkVariant = 'primary' | 'secondary';
17
+ type LinkColor = 'accent' | 'secondary';
17
18
  type LinkSize = 'small' | 'medium' | 'large';
19
+ type LinkVariant = 'standalone' | 'inline';
18
20
 
19
21
  declare const iconSize: Record<LinkSize, IconProps['size']>;
20
22
 
@@ -23,4 +25,4 @@ declare module '@emotion/react' {
23
25
  }
24
26
  }
25
27
 
26
- export { Link, LinkProps, LinkSize, LinkVariant, iconSize };
28
+ export { Link, LinkColor, LinkProps, LinkSize, LinkVariant, iconSize };
package/dist/index.js CHANGED
@@ -71,45 +71,67 @@ var import_react = require("react");
71
71
  // src/Link.styled.ts
72
72
  var import_styled = __toESM(require("@emotion/styled"));
73
73
  var LinkStyled = import_styled.default.a`
74
- ${({ theme, disabled, size, variant = "primary" }) => `
75
- color: ${theme.palette[variant].default};
76
- text-decoration: none;
74
+ ${({ theme, disabled, size, variant = "standalone", color = "accent" }) => {
75
+ const linkColor = variant === "inline" ? "accent" : color;
76
+ return `
77
+ color: ${theme.palette[linkColor].default};
77
78
  display: inline-flex;
78
79
  align-items: center;
79
80
  gap: ${theme.spacing["5xs"]};
80
81
 
82
+
83
+ ${size == "large" && `
84
+ ${theme.fontStyles.body1Bold}
85
+ `};
86
+
87
+ ${size == "medium" && `
88
+ ${theme.fontStyles.body2Bold}
89
+ `};
90
+
91
+ ${size == "small" && `
92
+ ${theme.fontStyles.body3Bold}
93
+ `};
94
+
81
95
  ${disabled && `
82
- color: ${theme.palette[variant].light};
96
+ color: ${theme.palette[linkColor].light};
83
97
  cursor: not-allowed;
98
+
99
+ ${variant === "inline" && `
100
+ text-decoration: underline;
101
+ `}
84
102
  `};
85
103
 
86
104
  ${!disabled && `
87
- &:hover > span {
105
+ ${variant === "inline" ? `
106
+ text-decoration: underline;
107
+
108
+ &:hover {
109
+ color: ${theme.palette[linkColor].medium};
110
+ }
111
+ ` : `
112
+ &:hover {
88
113
  text-decoration: underline;
89
114
  }
115
+
116
+ &:has(span):hover {
117
+ text-decoration: none;
118
+
119
+ span {
120
+ text-decoration: underline;
121
+ }
122
+ }
90
123
 
91
124
  &:active {
92
- color: ${theme.palette[variant].dark};
125
+ color: ${theme.palette[linkColor].dark};
93
126
  text-decoration: none;
94
- }
127
+ }`}
95
128
  `};
96
129
 
97
130
  &:focus-visible {
98
131
  outline: 2px solid ${theme.palette.primary.default};
99
132
  }
100
-
101
- ${size == "large" && `
102
- ${theme.fontStyles.body1Bold}
103
- `};
104
-
105
- ${size == "medium" && `
106
- ${theme.fontStyles.body2Bold}
107
- `};
108
-
109
- ${size == "small" && `
110
- ${theme.fontStyles.body3Bold}
111
- `};
112
- `}
133
+ `;
134
+ }}
113
135
  `;
114
136
 
115
137
  // src/Link.tsx
@@ -125,7 +147,8 @@ var Link = (0, import_react.forwardRef)(
125
147
  variant,
126
148
  href,
127
149
  style,
128
- icon
150
+ icon,
151
+ color
129
152
  } = _b, rest = __objRest(_b, [
130
153
  "isDisabled",
131
154
  "children",
@@ -135,11 +158,13 @@ var Link = (0, import_react.forwardRef)(
135
158
  "variant",
136
159
  "href",
137
160
  "style",
138
- "icon"
161
+ "icon",
162
+ "color"
139
163
  ]);
140
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
164
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
141
165
  LinkStyled,
142
166
  __spreadProps(__spreadValues(__spreadValues({
167
+ color,
143
168
  "data-testid": dataTestId != null ? dataTestId : "link",
144
169
  disabled: isDisabled,
145
170
  ref,
@@ -147,10 +172,10 @@ var Link = (0, import_react.forwardRef)(
147
172
  style,
148
173
  variant
149
174
  }, !isDisabled && { href, onClick }), rest), {
150
- children: [
175
+ children: variant === "inline" || !icon ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
151
176
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children }),
152
- icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: icon, color: "inherit", size: iconSize[size] }) : null
153
- ]
177
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: icon, color: "inherit", size: iconSize[size] })
178
+ ] })
154
179
  })
155
180
  );
156
181
  }
package/dist/index.mjs CHANGED
@@ -37,49 +37,71 @@ import { forwardRef } from "react";
37
37
  // src/Link.styled.ts
38
38
  import styled from "@emotion/styled";
39
39
  var LinkStyled = styled.a`
40
- ${({ theme, disabled, size, variant = "primary" }) => `
41
- color: ${theme.palette[variant].default};
42
- text-decoration: none;
40
+ ${({ theme, disabled, size, variant = "standalone", color = "accent" }) => {
41
+ const linkColor = variant === "inline" ? "accent" : color;
42
+ return `
43
+ color: ${theme.palette[linkColor].default};
43
44
  display: inline-flex;
44
45
  align-items: center;
45
46
  gap: ${theme.spacing["5xs"]};
46
47
 
48
+
49
+ ${size == "large" && `
50
+ ${theme.fontStyles.body1Bold}
51
+ `};
52
+
53
+ ${size == "medium" && `
54
+ ${theme.fontStyles.body2Bold}
55
+ `};
56
+
57
+ ${size == "small" && `
58
+ ${theme.fontStyles.body3Bold}
59
+ `};
60
+
47
61
  ${disabled && `
48
- color: ${theme.palette[variant].light};
62
+ color: ${theme.palette[linkColor].light};
49
63
  cursor: not-allowed;
64
+
65
+ ${variant === "inline" && `
66
+ text-decoration: underline;
67
+ `}
50
68
  `};
51
69
 
52
70
  ${!disabled && `
53
- &:hover > span {
71
+ ${variant === "inline" ? `
72
+ text-decoration: underline;
73
+
74
+ &:hover {
75
+ color: ${theme.palette[linkColor].medium};
76
+ }
77
+ ` : `
78
+ &:hover {
54
79
  text-decoration: underline;
55
80
  }
81
+
82
+ &:has(span):hover {
83
+ text-decoration: none;
84
+
85
+ span {
86
+ text-decoration: underline;
87
+ }
88
+ }
56
89
 
57
90
  &:active {
58
- color: ${theme.palette[variant].dark};
91
+ color: ${theme.palette[linkColor].dark};
59
92
  text-decoration: none;
60
- }
93
+ }`}
61
94
  `};
62
95
 
63
96
  &:focus-visible {
64
97
  outline: 2px solid ${theme.palette.primary.default};
65
98
  }
66
-
67
- ${size == "large" && `
68
- ${theme.fontStyles.body1Bold}
69
- `};
70
-
71
- ${size == "medium" && `
72
- ${theme.fontStyles.body2Bold}
73
- `};
74
-
75
- ${size == "small" && `
76
- ${theme.fontStyles.body3Bold}
77
- `};
78
- `}
99
+ `;
100
+ }}
79
101
  `;
80
102
 
81
103
  // src/Link.tsx
82
- import { jsx, jsxs } from "react/jsx-runtime";
104
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
83
105
  var Link = forwardRef(
84
106
  (_a, ref) => {
85
107
  var _b = _a, {
@@ -91,7 +113,8 @@ var Link = forwardRef(
91
113
  variant,
92
114
  href,
93
115
  style,
94
- icon
116
+ icon,
117
+ color
95
118
  } = _b, rest = __objRest(_b, [
96
119
  "isDisabled",
97
120
  "children",
@@ -101,11 +124,13 @@ var Link = forwardRef(
101
124
  "variant",
102
125
  "href",
103
126
  "style",
104
- "icon"
127
+ "icon",
128
+ "color"
105
129
  ]);
106
- return /* @__PURE__ */ jsxs(
130
+ return /* @__PURE__ */ jsx(
107
131
  LinkStyled,
108
132
  __spreadProps(__spreadValues(__spreadValues({
133
+ color,
109
134
  "data-testid": dataTestId != null ? dataTestId : "link",
110
135
  disabled: isDisabled,
111
136
  ref,
@@ -113,10 +138,10 @@ var Link = forwardRef(
113
138
  style,
114
139
  variant
115
140
  }, !isDisabled && { href, onClick }), rest), {
116
- children: [
141
+ children: variant === "inline" || !icon ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
117
142
  /* @__PURE__ */ jsx("span", { children }),
118
- icon ? /* @__PURE__ */ jsx(Icon, { code: icon, color: "inherit", size: iconSize[size] }) : null
119
- ]
143
+ /* @__PURE__ */ jsx(Icon, { code: icon, color: "inherit", size: iconSize[size] })
144
+ ] })
120
145
  })
121
146
  );
122
147
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-link",
3
- "version": "1.0.0-beta.18",
3
+ "version": "1.0.0-beta.20",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@dt-dds/icons": "1.0.0-beta.4",
24
- "@dt-dds/react-button": "1.0.0-beta.41",
24
+ "@dt-dds/react-button": "1.0.0-beta.43",
25
25
  "@dt-dds/react-core": "1.0.0-beta.43",
26
26
  "@dt-dds/react-icon": "1.0.0-beta.44",
27
27
  "@dt-dds/themes": "1.0.0-beta.3"