9756: Hide icon for external during print (#26)

README.md

@@ -53,30 +53,14 @@ npm run storybook
 
 ## Publishing
 
-### For design and component library inclusion
-
-This project is hosted on [Chromatic](https://www.chromatic.com/builds?appId={id}).
-Feel free to [invite yourself](https://www.chromatic.com/builds?appId={id}&inviteToken={id}).
-
-```bash
-npm run-script chromatic
-```
-
-### For application consumption
-
 This package is published into a private npm registery.
 
 Documentation changes do not require a version publishing.
 For functional changes, follow [SemVer](https://semver.org/)
 standards updating the `package.json` and `package-lock.json`
 files in your pull request.
 
-Once the changes are merged through PR into `main`
-you may run this command to publish a new package:
-
-```bash
-npm publish
-```
+When you are ready to publish a new verison, use the Github Release action.
 
 ### Chromatic
 

src/components/Typography/Link/Link.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Link } from ".";
-import { Paragraph } from "..";
+import { LineClamp, Paragraph } from "..";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<typeof Link> = {
@@ -45,3 +45,39 @@ export const CustomClasses: Story = {
     className: "font-black",
   },
 };
+
+export const Truncated: Story = {
+  args: { external: true },
+  render: ({ children, ...args }) => (
+    <>
+      <Paragraph className="">Paragraph:</Paragraph>
+      <Paragraph marginBottom className="w-16 truncate">
+        <Link {...args}>{children}</Link>
+      </Paragraph>
+
+      <Paragraph className="">List:</Paragraph>
+      <ul className="w-16 mb-2">
+        <li>
+          <Link className="block truncate" {...args}>
+            {children}
+          </Link>
+        </li>
+      </ul>
+
+      <Paragraph className="">Line clamp:</Paragraph>
+      <LineClamp lines={2}>
+        <Link {...args}>
+          {children}
+          <br />
+          {children}
+          <br />
+          {children}
+          <br />
+          {children}
+          <br />
+          {children}
+        </Link>
+      </LineClamp>
+    </>
+  ),
+};

src/components/Typography/Link/Link.tsx

@@ -21,16 +21,17 @@ export const Link: FC<LinkProps> = (props) => {
  * - className
  * - External icon in children
  */
-export const getLinkProps = (props: LinkProps): LinkProps => ({
+export const getLinkProps = ({ external, ...props }: LinkProps): LinkProps => ({
   ...props,
   className: twMerge(linkClasses, props.className),
   children: (
     <>
       {props.children}
-      {props.external && <NewWindowIcon className="inline-block ml-[.25ch]" />}
+      {external && (
+        <NewWindowIcon className="inline-block ml-[.25ch] print:hidden" />
+      )}
     </>
   ),
 });
 
-const linkClasses =
-  "inline-flex items-center text-primary-600 underline dark:text-primary-400";
+const linkClasses = "text-primary-600 underline dark:text-primary-400";