@muraldevkit/ui-toolkit 1.5.2 → 1.6.0

package/README.md

@@ -1,4 +1,5 @@
-# shared-components
+# Mural's UI Toolkit
 Shared React components for use across the Mural platform.
 
-- [Component standards](./docs/component-standards.md)
+- [Component standards](./docs/component-standards.md)
+- [Contribution Guide](./CONTRIBUTING.md)

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
 export * from './button';
-export * from "./svg";
-export * from "./tooltip";
+export * from './svg';
+export * from './tooltip';
+export * from './link';

package/dist/components/link/constants.d.ts

@@ -0,0 +1,18 @@
+export declare const allowedValues: {
+    colors: readonly ["default", "mono", "inverse"];
+    sizes: readonly ["default", "large", "medium", "small", "xsmall"];
+    targets: readonly ["_blank", "_parent", "_top", "_self"];
+};
+export type LinkColor = (typeof allowedValues.colors)[number];
+export type LinkSize = (typeof allowedValues.sizes)[number];
+export type LinkTargetType = (typeof allowedValues.targets)[number];
+export interface LinkDefaults {
+    color: LinkColor;
+    size: LinkSize;
+    target: LinkTargetType;
+}
+/**
+ * Default values for props on the Link component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: LinkDefaults;

package/dist/components/link/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { LinkTargetType, LinkColor, LinkSize } from './constants';
+import { AttrsObject } from '../../utils';
+export interface MrlLinkProptypes {
+    /** The textual label describing the link's purpose */
+    text: string;
+    /** Specifies where to redirect the linked document */
+    href: string;
+    /** Specifies how to open the linked document */
+    target?: LinkTargetType;
+    /**
+     * Color scheme to use based on the link's container background
+     * - default: most use cases
+     * - mono: use on colored/saturated backgrounds (e.g. warning notifications)
+     * - inverse: use on dark backgrounds
+     */
+    color?: LinkColor;
+    /**
+     * Allows developers to chose a specific font-size for the link. By default,
+     * it will inherit the font-size of its parent/surrounding text.
+     */
+    size?: LinkSize;
+    /**
+     * Applies additional HTML attributes to the nested anchor (`a`) element.
+     * Example: `attrs='{ "aria-label": "Special message for screen reader users" }'`
+     */
+    attrs?: AttrsObject;
+    /**
+     * classes to apply to the component
+     */
+    className?: string;
+}
+/**
+ * Renders a link component
+ *
+ * @param {MrlLinkProptypes} props the props for your MrlLink
+ * @returns {React.ReactElement} an a element containing the text you pass
+ */
+export declare const MrlLink: ({ target, className, color, size, href, attrs, text }: MrlLinkProptypes) => React.ReactElement;