Merge pull request #66 from PxTools/feature/PXWEB2-46-link-take2

Feature/pxweb2 46 link
PxTools · Apr 5, 2024 · fadccd0 · fadccd0
2 parents 95c7fa4 + 00588ca
commit fadccd0
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 13 deletions.
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
@@ -1,12 +1,69 @@
+@use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixvar;
+
 .link {
-  font-family: 'Roboto', sans-serif;
+  text-decoration-line: underline;
   color: var(--px-color-text-action);
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 4px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  align-items: center;
+
   &:hover {
     text-decoration: none;
+    background-color: var(--px-color-surface-subtle-hover);
   }
 
   &:focus {
+    text-decoration-line: none;
+    color: var(--px-color-text-on-action-subtle);
+    background-color: var(--px-color-surface-subtle-active);
+  }
+
+  &:focus-visible {
+    text-decoration-line: none;
+    color: var(--px-color-text-on-action-subtle);
+    background-color: var(--px-color-surface-subtle-active);
+  }
+
+  &:active {
+    text-decoration-line: none;
     color: var(--px-color-text-on-action-subtle);
     background-color: var(--px-color-surface-subtle-active);
   }
 }
+.no_underline {
+  text-decoration-line: none;
+}
+.inline {
+  display: inline-flex;
+  gap: 0px;
+  padding: 0px;
+}
+
+.padding-small {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.padding-medium {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.bodylong-small {
+  font-family: PxWeb-font-400;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.bodylong-medium {
+  font-family: PxWeb-font-400;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.75rem;
+}
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.stories.tsx
@@ -1,18 +1,106 @@
-import type { Meta } from '@storybook/react';
-import { Link } from './Link';
+import type { Meta, StoryObj, StoryFn } from '@storybook/react';
 
-/* import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest'; */
+import { Link } from './Link';
+import { BodyLong } from '../Typography/BodyLong/BodyLong';
 
 const meta: Meta<typeof Link> = {
   component: Link,
   title: 'Components/Link',
 };
 export default meta;
 
-export const Primary = {
+type Story = StoryObj<typeof Link>;
+
+export const variants: Story = {
   args: {
     href: '#',
     children: 'En godt skrevet lenketekst',
+    size: 'medium',
   },
 };
+
+export const inlineAndStandalone: StoryFn<typeof BodyLong> = () => {
+  return (
+    <>
+      <h1>Inline link in BodyLong</h1>
+
+      <h2>medium without icon:</h2>
+      <BodyLong>
+        This is a story about Little Red Ridinghood. One day she went into the
+        wood to visit her grandmother. The day after too, She visited her every
+        day, every week, every month, every year. She never saw a wolf, no even
+        a little fox. Go to{' '}
+        <Link href="#" inline>
+          Statistikkbanken
+        </Link>{' '}
+        to read more. This is a story about Little Red Ridinghood. One day she
+        went into the wood to visit her grandmother. The day after too, She
+        visited her every day, every week, every month, every year. She never
+        saw a wolf, no even a little fox.
+      </BodyLong>
+
+      <h2>medium icon right:</h2>
+      <BodyLong>
+        This is a story about Little Red Ridinghood. One day she went into the
+        wood to visit her grandmother. The day after too, She visited her every
+        day, every week, every month, every year. She never saw a wolf, no even
+        a little fox. Go to{' '}
+        <Link href="#" inline icon="FileText" iconPosition="right">
+          Statistikkbanken
+        </Link>{' '}
+        to read more This is a story about Little Red Ridinghood. One day she
+        went into the wood to visit her grandmother. The day after too, She
+        visited her every day, every week, every month, every year. She never
+        saw a wolf, no even a little fox.
+      </BodyLong>
+
+      <h2>small without icon:</h2>
+      <BodyLong size="small">
+        This is a story about Little Red Ridinghood. One day she went into the
+        wood to visit her grandmother. The day after too, She visited her every
+        day, every week, every month, every year. She never saw a wolf, no even
+        a little fox. Go to{' '}
+        <Link href="#" inline>
+          Statistikkbanken
+        </Link>{' '}
+        to read more. This is a story about Little Red Ridinghood. One day she
+        went into the wood to visit her grandmother. The day after too, She
+        visited her every day, every week, every month, every year. She never
+        saw a wolf, no even a little fox.
+      </BodyLong>
+
+      <h1>Standalone link </h1>
+
+      <h2>medium without icon:</h2>
+      <Link href="#" size="medium">
+        Statistikkbanken
+      </Link>
+
+      <h2>medium icon left:</h2>
+      <Link href="#" icon="FileText" iconPosition="left" size="medium">
+        Statistikkbanken
+      </Link>
+
+      <h2>medium icon right:</h2>
+      <Link href="#" icon="FileText" iconPosition="right" size="medium">
+        Statistikkbanken
+      </Link>
+
+      <h2>small without icon:</h2>
+      <Link href="#" size="small">
+        Statistikkbanken
+      </Link>
+
+      <h2>small icon left:</h2>
+      <Link href="#" icon="FileText" iconPosition="left" size="small">
+        Statistikkbanken{' '}
+      </Link>
+
+      <h2>small icon right:</h2>
+      <Link href="#" icon="FileText" iconPosition="right" size="small">
+        Statistikkbanken
+      </Link>
+      <br />
+    </>
+  );
+};
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
@@ -1,17 +1,46 @@
 import React from 'react';
-import styles from './Link.module.scss';
+import cl from 'clsx';
 
-interface LinkProps {
+import classes from './Link.module.scss';
+import { Icon, IconProps } from '../Icon/Icon';
+
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  size?: 'small' | 'medium';
+  icon?: IconProps['iconName'];
+  iconPosition?: 'left' | 'right';
   children: React.ReactNode;
   href: string;
+  inline?: boolean;
+  noUnderline?: boolean;
 }
-
-export const Link: React.FC<LinkProps> = ({ children, href }) => {
+export function Link({
+  children,
+  size,
+  href,
+  icon,
+  iconPosition,
+  inline = false,
+  noUnderline = false,
+  ...rest
+}: LinkProps) {
   return (
-    <a href={href} className={styles.link}>
+    <a
+      href={href}
+      className={cl(classes.link, {
+        [classes.no_underline]: noUnderline,
+        [classes.inline]: inline,
+        [classes[`bodylong-${size}`]]: size,
+        [classes[`padding-${size}`]]: size,
+      })}
+    >
+      {icon && iconPosition === 'left' && (
+        <Icon iconName={icon} className=""></Icon>
+      )}
       {children}
+      {icon && iconPosition === 'right' && (
+        <Icon iconName={icon} className=""></Icon>
+      )}
     </a>
   );
-};
-
+}
 export default Link;