@availity/mui-link 0.2.9 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.4.0](https://github.com/Availity/element/compare/@availity/mui-link@0.3.0...@availity/mui-link@0.4.0) (2024-06-10)
+
+
+### Features
+
+* **mui-link:** allow link icon to display at the end ([f101b52](https://github.com/Availity/element/commit/f101b52edb293f16ee32fa942ec8e71675ee28c1))
+
+## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-link@0.2.9...@availity/mui-link@0.3.0) (2024-05-02)
+
+
+### Features
+
+* **mui-link:** inline link styles ([7ee4587](https://github.com/Availity/element/commit/7ee458780be5cbb5ca97595aa7bf8bb7e3c36423))
+
 ## [0.2.9](https://github.com/Availity/element/compare/@availity/mui-link@0.2.8...@availity/mui-link@0.2.9) (2024-04-19)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -15,7 +15,11 @@ type LinkProps = {
     onClick?: (event: React.MouseEvent, url: string) => void;
     children?: ReactNode;
     rel?: string;
-} & Omit<LinkProps$1, 'underline' | 'noWrap' | 'variantMapping' | 'variant'>;
+    /** The position of the icon relative to the text when target is `_blank`
+     *
+     * @default 'start' */
+    iconPosition?: 'start' | 'end';
+} & Omit<LinkProps$1, 'underline' | 'noWrap' | 'variantMapping'>;
 declare const Link: react.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & react.RefAttributes<HTMLAnchorElement>>;
 
 export { Link, type LinkProps };

package/dist/index.d.ts

@@ -15,7 +15,11 @@ type LinkProps = {
     onClick?: (event: React.MouseEvent, url: string) => void;
     children?: ReactNode;
     rel?: string;
-} & Omit<LinkProps$1, 'underline' | 'noWrap' | 'variantMapping' | 'variant'>;
+    /** The position of the icon relative to the text when target is `_blank`
+     *
+     * @default 'start' */
+    iconPosition?: 'start' | 'end';
+} & Omit<LinkProps$1, 'underline' | 'noWrap' | 'variantMapping'>;
 declare const Link: react.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & react.RefAttributes<HTMLAnchorElement>>;
 
 export { Link, type LinkProps };

package/dist/index.js

@@ -94,25 +94,28 @@ var setRel = (url, target, absolute) => {
   return void 0;
 };
 var Link = (0, import_react.forwardRef)((props, ref) => {
-  const _a = props, { href, target = "_self", children, onClick, loadApp = true, rel } = _a, rest = __objRest(_a, ["href", "target", "children", "onClick", "loadApp", "rel"]);
+  const _a = props, { href, target = "_self", children, onClick, loadApp = true, rel, iconPosition = "start" } = _a, rest = __objRest(_a, ["href", "target", "children", "onClick", "loadApp", "rel", "iconPosition"]);
   const absolute = isAbsoluteUrl(href);
   const encode = !(absolute || !loadApp);
   const url = encode ? getUrl(href) : href;
   const NewWindowIcon = target === "_blank" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.OpenInNewIcon, {}) : null;
+  const startIcon = iconPosition === "start";
+  const endIcon = iconPosition === "end";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Link.default,
     __spreadProps(__spreadValues({
       href: url,
       target,
       onClick: (event) => onClick && onClick(event, url),
-      rel: rel || setRel(url, target, absolute),
-      underline: "hover"
+      rel: rel || setRel(url, target, absolute)
     }, rest), {
       ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+        startIcon && NewWindowIcon,
+        " ",
         children,
         " ",
-        NewWindowIcon
+        endIcon && NewWindowIcon
       ] })
     })
   );

package/dist/index.mjs

@@ -61,25 +61,28 @@ var setRel = (url, target, absolute) => {
   return void 0;
 };
 var Link = forwardRef((props, ref) => {
-  const _a = props, { href, target = "_self", children, onClick, loadApp = true, rel } = _a, rest = __objRest(_a, ["href", "target", "children", "onClick", "loadApp", "rel"]);
+  const _a = props, { href, target = "_self", children, onClick, loadApp = true, rel, iconPosition = "start" } = _a, rest = __objRest(_a, ["href", "target", "children", "onClick", "loadApp", "rel", "iconPosition"]);
   const absolute = isAbsoluteUrl(href);
   const encode = !(absolute || !loadApp);
   const url = encode ? getUrl(href) : href;
   const NewWindowIcon = target === "_blank" ? /* @__PURE__ */ jsx(OpenInNewIcon, {}) : null;
+  const startIcon = iconPosition === "start";
+  const endIcon = iconPosition === "end";
   return /* @__PURE__ */ jsx(
     MuiLink,
     __spreadProps(__spreadValues({
       href: url,
       target,
       onClick: (event) => onClick && onClick(event, url),
-      rel: rel || setRel(url, target, absolute),
-      underline: "hover"
+      rel: rel || setRel(url, target, absolute)
     }, rest), {
       ref,
       children: /* @__PURE__ */ jsxs("span", { children: [
+        startIcon && NewWindowIcon,
+        " ",
         children,
         " ",
-        NewWindowIcon
+        endIcon && NewWindowIcon
       ] })
     })
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-link",
-  "version": "0.2.9",
+  "version": "0.4.0",
   "description": "Availity MUI Link Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/Link.stories.tsx

@@ -3,6 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SystemPropsList } from '../../../../data/MuiSystemProperties';
 import { Link, LinkProps } from './Link';
 
+const excludedProps = [...SystemPropsList, 'align'];
+
 /**
  * Simple link component that renders an `<a>` tag with the href formatted to leverage loadApp so the link gets loaded inside the home page's iframe
  *
@@ -15,12 +17,12 @@ const meta: Meta<typeof Link> = {
   parameters: {
     docs: {
       controls: {
-        exclude: SystemPropsList,
+        exclude: excludedProps,
       },
     },
     canvas: {
       controls: {
-        exclude: SystemPropsList,
+        exclude: excludedProps,
       },
     },
   },
@@ -39,6 +41,25 @@ export const _Link: StoryObj<typeof Link> = {
   },
 };
 
+/** Inline styling is achieved with the `inherit` variant. */
+export const _Variants: StoryObj<typeof Link> = {
+  render: () => (
+    <div>
+      <Link href="#" gutterBottom>
+        Medium standalone link (default)
+      </Link>
+      <br />
+      <Link href="#" gutterBottom variant="body2">
+        Small standalone link
+      </Link>
+      <br />
+      <Link href="#" gutterBottom variant="inherit">
+        Inline link
+      </Link>
+    </div>
+  ),
+};
+
 /** The `OpenInNewIcon` has an accessible name to tell screenreaders that it opens in a new window.  */
 export const _NewWindow: StoryObj<typeof Link> = {
   render: (args: LinkProps) => <Link {...args} loadApp={false} target="_blank" />,
@@ -47,6 +68,13 @@ export const _NewWindow: StoryObj<typeof Link> = {
   },
 };
 
+export const _NewWindowEndIcon: StoryObj<typeof Link> = {
+  render: (args: LinkProps) => <Link {...args} loadApp={false} target="_blank" iconPosition="end" />,
+  args: {
+    children: 'Link opens in new window',
+  },
+};
+
 export const _AbsoluteUrl: StoryObj<typeof Link> = {
   render: (args: LinkProps) => <Link {...args} href="https://github.com/Availity" target="_blank" />,
   args: {
@@ -61,3 +89,35 @@ export const _RelativeUrl: StoryObj<typeof Link> = {
     children: 'Portal App',
   },
 };
+
+/** The `gutterBottom` prop achieves correct spacing for a list of links. */
+export const _Lists: StoryObj<typeof Link> = {
+  render: () => (
+    <div>
+      <Link href="#" gutterBottom>
+        Link 1
+      </Link>
+      <br />
+      <Link href="#" gutterBottom>
+        Link 2
+      </Link>
+      <br />
+      <Link href="#" gutterBottom>
+        Link 3
+      </Link>
+      <br />
+      <Link href="#" gutterBottom>
+        Link 4
+      </Link>
+      <br />
+      <Link href="#" gutterBottom>
+        Link 5
+      </Link>
+      <br />
+      <Link href="#" gutterBottom>
+        Link 6
+      </Link>
+      <br />
+    </div>
+  ),
+};

package/src/lib/Link.test.tsx

@@ -8,6 +8,42 @@ describe('Link', () => {
     expect(getByText('Test')).toBeTruthy();
   });
 
+  test('should render icon on left if no iconPosition passed', () => {
+    const { container } = render(
+      <Link target="_blank" href="#">
+        Test
+      </Link>
+    );
+
+    const spanChildren = container.getElementsByTagName('span')[0].children;
+
+    expect(spanChildren[0].tagName).toBe('svg');
+  });
+
+  test('should render icon on left if iconPosition is set to `start` passed', () => {
+    const { container } = render(
+      <Link target="_blank" href="#" iconPosition="start">
+        Test
+      </Link>
+    );
+
+    const spanChildren = container.getElementsByTagName('span')[0].children;
+
+    expect(spanChildren[0].tagName).toBe('svg');
+  });
+
+  test('should render icon on right if iconPosition is set to `end` passed', () => {
+    const { container } = render(
+      <Link target="_blank" href="#" iconPosition="end">
+        Test
+      </Link>
+    );
+
+    const spanChildren = container.getElementsByTagName('span')[0].children;
+
+    expect(spanChildren[spanChildren.length - 1].tagName).toBe('svg');
+  });
+
   test('should render absolute url', () => {
     const { getByRole } = render(<Link href="https://github.com/Availity">Test</Link>);
 

package/src/lib/Link.tsx

@@ -53,14 +53,20 @@ export type LinkProps = {
   onClick?: (event: React.MouseEvent, url: string) => void;
   children?: ReactNode;
   rel?: string;
-} & Omit<MuiLinkProps, 'underline' | 'noWrap' | 'variantMapping' | 'variant'>;
+  /** The position of the icon relative to the text when target is `_blank`
+   *
+   * @default 'start' */
+  iconPosition?: 'start' | 'end';
+} & Omit<MuiLinkProps, 'underline' | 'noWrap' | 'variantMapping'>;
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  const { href, target = '_self', children, onClick, loadApp = true, rel, ...rest } = props;
+  const { href, target = '_self', children, onClick, loadApp = true, rel, iconPosition = 'start', ...rest } = props;
   const absolute = isAbsoluteUrl(href);
   const encode = !(absolute || !loadApp);
   const url = encode ? getUrl(href) : href;
   const NewWindowIcon = target === '_blank' ? <OpenInNewIcon /> : null;
+  const startIcon = iconPosition === 'start';
+  const endIcon = iconPosition === 'end';
 
   return (
     <MuiLink
@@ -68,12 +74,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
       target={target}
       onClick={(event: React.MouseEvent) => onClick && onClick(event, url)}
       rel={rel || setRel(url, target, absolute)}
-      underline="hover"
       {...rest}
       ref={ref}
     >
       <span>
-        {children} {NewWindowIcon}
+        {startIcon && NewWindowIcon} {children} {endIcon && NewWindowIcon}
       </span>
     </MuiLink>
   );