@availity/mui-link 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.4.1](https://github.com/Availity/element/compare/@availity/mui-link@0.4.0...@availity/mui-link@0.4.1) (2024-07-22)
+
+### Dependency Updates
+
+* `mui-icon` updated to version `0.4.0`
+## [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)
 
 

package/dist/index.d.mts

@@ -15,6 +15,10 @@ type LinkProps = {
     onClick?: (event: React.MouseEvent, url: string) => void;
     children?: ReactNode;
     rel?: string;
+    /** 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>>;
 

package/dist/index.d.ts

@@ -15,6 +15,10 @@ type LinkProps = {
     onClick?: (event: React.MouseEvent, url: string) => void;
     children?: ReactNode;
     rel?: string;
+    /** 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>>;
 

package/dist/index.js

@@ -94,11 +94,13 @@ 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({
@@ -109,9 +111,11 @@ var Link = (0, import_react.forwardRef)((props, ref) => {
     }, rest), {
       ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-        NewWindowIcon,
-        "  ",
-        children
+        startIcon && NewWindowIcon,
+        " ",
+        children,
+        " ",
+        endIcon && NewWindowIcon
       ] })
     })
   );

package/dist/index.mjs

@@ -61,11 +61,13 @@ 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({
@@ -76,9 +78,11 @@ var Link = forwardRef((props, ref) => {
     }, rest), {
       ref,
       children: /* @__PURE__ */ jsxs("span", { children: [
-        NewWindowIcon,
-        "  ",
-        children
+        startIcon && NewWindowIcon,
+        " ",
+        children,
+        " ",
+        endIcon && NewWindowIcon
       ] })
     })
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-link",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Availity MUI Link Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -46,6 +46,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@availity/mui-icon": "^0.8.2"
+    "@availity/mui-icon": "^0.9.0"
   }
 }

package/src/lib/Link.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SystemPropsList } from '../../../../data/MuiSystemProperties';
 import { Link, LinkProps } from './Link';
 
-const excludedProps = [...SystemPropsList, "align"]
+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
@@ -45,9 +45,17 @@ export const _Link: StoryObj<typeof Link> = {
 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>
+      <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>
   ),
 };
@@ -60,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: {
@@ -79,12 +94,30 @@ export const _RelativeUrl: StoryObj<typeof Link> = {
 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 />
+      <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' >;
+  /** 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
@@ -72,7 +78,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
       ref={ref}
     >
       <span>
-        {NewWindowIcon}  {children}
+        {startIcon && NewWindowIcon} {children} {endIcon && NewWindowIcon}
       </span>
     </MuiLink>
   );