@availity/mui-link 0.2.9 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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,7 @@ type LinkProps = {
     onClick?: (event: React.MouseEvent, url: string) => void;
     children?: ReactNode;
     rel?: string;
-} & Omit<LinkProps$1, 'underline' | 'noWrap' | 'variantMapping' | 'variant'>;
+} & 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,7 @@ type LinkProps = {
     onClick?: (event: React.MouseEvent, url: string) => void;
     children?: ReactNode;
     rel?: string;
-} & Omit<LinkProps$1, 'underline' | 'noWrap' | 'variantMapping' | 'variant'>;
+} & 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

@@ -105,14 +105,13 @@ var Link = (0, import_react.forwardRef)((props, ref) => {
       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: [
-        children,
-        " ",
-        NewWindowIcon
+        NewWindowIcon,
+        "  ",
+        children
       ] })
     })
   );

package/dist/index.mjs

@@ -72,14 +72,13 @@ var Link = forwardRef((props, ref) => {
       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: [
-        children,
-        " ",
-        NewWindowIcon
+        NewWindowIcon,
+        "  ",
+        children
       ] })
     })
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-link",
-  "version": "0.2.9",
+  "version": "0.3.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,17 @@ 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" />,
@@ -61,3 +74,17 @@ 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.tsx

@@ -53,7 +53,7 @@ export type LinkProps = {
   onClick?: (event: React.MouseEvent, url: string) => void;
   children?: ReactNode;
   rel?: string;
-} & Omit<MuiLinkProps, 'underline' | 'noWrap' | 'variantMapping' | 'variant'>;
+} & Omit<MuiLinkProps, 'underline' | 'noWrap' | 'variantMapping' >;
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
   const { href, target = '_self', children, onClick, loadApp = true, rel, ...rest } = props;
@@ -68,12 +68,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}
+        {NewWindowIcon}  {children}
       </span>
     </MuiLink>
   );