@muraldevkit/ui-toolkit 2.8.0 → 2.9.0
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { LinkColor, LinkKind, LinkSize, LinkTargetType } from '../constants';
|
|
3
3
|
import { AttrsObject } from '../../../utils';
|
|
4
4
|
export interface MrlLinkProptypes {
|
|
5
5
|
/** The textual label describing the link's purpose */
|
|
@@ -8,6 +8,12 @@ export interface MrlLinkProptypes {
|
|
|
8
8
|
href: string;
|
|
9
9
|
/** Specifies how to open the linked document */
|
|
10
10
|
target?: LinkTargetType;
|
|
11
|
+
/**
|
|
12
|
+
* Color scheme to use based on the link's container background
|
|
13
|
+
* - bold (default): a thicker underline to help a link stand out in a large amount of body copy
|
|
14
|
+
* - simple: a thinner underline to help address visual hierarchy issues when many links are in a list
|
|
15
|
+
*/
|
|
16
|
+
kind?: LinkKind;
|
|
11
17
|
/**
|
|
12
18
|
* Color scheme to use based on the link's container background
|
|
13
19
|
* - default: most use cases
|
|
@@ -40,4 +46,4 @@ export interface MrlLinkProptypes {
|
|
|
40
46
|
* @param {MrlLinkProptypes} props the props for your MrlLink
|
|
41
47
|
* @returns {React.ReactElement} an a element containing the text you pass
|
|
42
48
|
*/
|
|
43
|
-
export declare const MrlLink: ({ target, className, color, size, href, attrs, onClick, text }: MrlLinkProptypes) => React.ReactElement;
|
|
49
|
+
export declare const MrlLink: ({ target, className, color, kind, size, href, attrs, onClick, text }: MrlLinkProptypes) => React.ReactElement;
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
export declare const allowedValues: {
|
|
2
2
|
colors: readonly ["default", "mono", "inverse"];
|
|
3
|
+
kind: readonly ["bold", "simple"];
|
|
3
4
|
sizes: readonly ["default", "large", "medium", "small", "xsmall"];
|
|
4
5
|
targets: readonly ["_blank", "_parent", "_top", "_self"];
|
|
5
6
|
};
|
|
6
7
|
export type LinkColor = (typeof allowedValues.colors)[number];
|
|
8
|
+
export type LinkKind = (typeof allowedValues.kind)[number];
|
|
7
9
|
export type LinkSize = (typeof allowedValues.sizes)[number];
|
|
8
10
|
export type LinkTargetType = (typeof allowedValues.targets)[number];
|
|
9
11
|
export interface LinkDefaults {
|
|
10
12
|
color: LinkColor;
|
|
13
|
+
kind: LinkKind;
|
|
11
14
|
size: LinkSize;
|
|
12
15
|
target: LinkTargetType;
|
|
13
16
|
}
|