Merge pull request #21 from computas/link

Link
computas · Jan 13, 2025 · 87caf3a · 87caf3a
2 parents dc2eb0f + a31b660
commit 87caf3a
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,9 @@
-# 0.0.8 - 19.12.2024
+# 0.0.8 - 13.01.2025
 
 - Lagt til checkbox-komponent
 - Lagt til alert-komponent
 - Støtte for ikoner i knapper
+- Lagt til lenker
 
 # 0.0.7 - 19.12.2024
 

diff --git a/packages/lib/components/link/Overview.mdx b/packages/lib/components/link/Overview.mdx
@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title } from '@storybook/blocks';
+
+import * as linkStories from './link.stories';
+
+<Meta of={linkStories} />
+
+<Title>Link</Title>
+
+### Basic link
+
+<Canvas of={linkStories.Link} />
+
+### Standalone link
+
+<Canvas of={linkStories.StandaloneLink} />
diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css
@@ -0,0 +1,72 @@
+.cx-link {
+  --line-height: 1.5rem;
+  --underline-height: 2px;
+  --underline-squiggle-height: 7px;
+  --underline-offset: calc(
+    var(--line-height) +
+    ((var(--underline-squiggle-height) - var(--underline-height)) / 2)
+  );
+  --underline-squiggle-offset: var(--line-height);
+
+  color: var(--cx-color-text-primary);
+  line-height: inherit;
+  font-size: inherit;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cx-spacing-2);
+  text-decoration: none;
+  position: relative;
+
+  cx-icon {
+    width: var(--cx-spacing-6);
+    height: var(--cx-spacing-6);
+  }
+
+  &::before {
+    background: var(--cx-color-border-primary);
+    height: var(--underline-height);
+    top: calc(var(--underline-offset) - 6px);
+  }
+
+  &::after {
+    opacity: 0;
+    animation: cx-waveline 0.5s linear infinite;
+    background-image: url('data:image/svg+xml,<svg width="18" height="7" viewBox="0 0 18 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.57715 4.17283C4.4006 5.46648 2.86064 7 0 7V5C1.96863 5 3.00041 4.03352 4.09755 2.82717C4.18247 2.7338 4.26911 2.63679 4.3579 2.53738C5.35523 1.42077 6.62422 0 8.78049 0C10.9089 0 12.2699 1.38741 13.3632 2.50189C13.4613 2.6018 13.5571 2.69953 13.6512 2.79386C14.8672 4.01314 16.0118 5 18 5V7C15.1589 7 13.5123 5.48686 12.2351 4.20614C12.1748 4.14575 12.1157 4.08635 12.0576 4.02798C10.814 2.77827 10.0395 2 8.78049 2C7.54894 2 6.87361 2.74423 5.73842 3.99523C5.68569 4.05335 5.63196 4.11255 5.57715 4.17283Z" fill="%2329CFF5"/></svg>');
+    background-repeat: repeat-x;
+    height: var(--underline-squiggle-height);
+    top: calc(var(--underline-squiggle-offset) - 6px);
+  }
+
+  &::after,
+  &::before {
+    position: absolute;
+    content: "";
+    left: 0;
+    width: 100%;
+    background-size: 1rem;
+    background-position: 0;
+    transition: all ease 0.5s;
+  }
+
+  &:hover::before {
+    opacity: 0;
+  }
+
+  &:hover::after {
+    opacity: 1;
+  }
+
+  &.cx-link--standalone {
+    line-height: var(--line-height);
+    font-size: 1.125rem;
+    font-weight: 600;
+
+    &::before {
+      top: var(--underline-offset);
+    }
+    &::after {
+      top: var(--underline-squiggle-offset);
+    }
+  }
+}
diff --git a/packages/lib/components/link/link.stories.ts b/packages/lib/components/link/link.stories.ts
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import '../icon';
+
+export default {
+  title: 'Components/Link',
+} satisfies Meta;
+
+export const Link: StoryObj = {
+  render: () => html`
+  <div class="cx-body-2">Lorem ipsum dolor sit amet <a class="cx-link" href="https://designsystem.computas.com/?path=/docs/basics-colors--overview">basic link</a> consectetur. Justo orci pellentesque magna quis. Lorem ipsum dolor sit amet consectetur. Justo orci pellentesque magna quis.</div>
+  `,
+};
+
+export const StandaloneLink: StoryObj = {
+  render: () => html`
+<a class="cx-link cx-link--standalone cx-mr-6" href="https://designsystem.computas.com/?path=/docs/basics-colors--overview">Standalone link</a>
+<a class="cx-link cx-link--standalone cx-mr-6" href="https://designsystem.computas.com/?path=/docs/basics-colors--overview">Standalone link with icon <cx-icon name="edit"></cx-icon></a>
+  `,
+};
diff --git a/packages/lib/components/tabs/tab-group.ts b/packages/lib/components/tabs/tab-group.ts
@@ -4,6 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 
 import { provide } from '@lit/context';
 import a11yStyles from '../../global-css/a11y.css?inline';
+import animationStyles from '../../global-css/animations.css?inline';
 import type { Tab } from './tab';
 import { activeIndexContext } from './tab-context';
 import tabStyles from './tab.css?inline';
@@ -13,6 +14,7 @@ export class TabGroup extends LitElement {
   static styles = [
     unsafeCSS(tabStyles),
     unsafeCSS(a11yStyles),
+    unsafeCSS(animationStyles),
     css`
       :host {
         display: flex;

diff --git a/packages/lib/components/tabs/tab.css b/packages/lib/components/tabs/tab.css
@@ -1,52 +1,66 @@
 .cx-tab {
+  --line-height: 1.5rem;
+  --underline-squiggle-height: 7px;
   --underline-height: 6px;
+  --underline-squiggle-offset: calc(
+    var(--line-height) +
+    (var(--cx-spacing-1) * 2) +
+    (var(--underline-height) / 2)
+  );
+
   display: inline-flex;
   position: relative;
   padding: 7px 0px calc(var(--cx-spacing-1) + var(--underline-height));
-
   color: var(--cx-color-text-primary);
-  line-height: 1rem;
+  line-height: var(--line-height);
   font-size: 1rem;
   font-weight: 500;
-
-  text-decoration-thickness: 2px;
-  text-decoration-style: wavy;
-  text-decoration-line: underline;
-  text-decoration-skip-ink: none;
-  text-underline-offset: 0.125rem;
-  text-underline-position: from-font;
-  text-decoration-color: transparent;
-  transition: text-decoration-color 100ms ease, text-underline-offset 100ms ease;
+  text-decoration: none;
   user-select: none;
 
   &:hover {
     text-underline-offset: 0.25rem;
     text-decoration-color: var(--cx-color-text-primary);
   }
 
-  &:active {
-    text-underline-offset: 0.5rem;
+  &::before {
+    content: "";
+    position: absolute;
+    inset: auto 0 0;
+    transition: background-color 0.3s ease;
+    height: var(--underline-height);
+    background: transparent;
+    border-radius: var(--cx-radius-mini) var(--cx-radius-mini) 0px 0px;
   }
-}
 
-.cx-tab::before {
-  content: "";
-  position: absolute;
-  inset: auto 0 0;
-  transition: background-color 0.3s ease;
-  height: var(--underline-height);
-  background: transparent;
-  border-radius: var(--cx-radius-mini) var(--cx-radius-mini) 0px 0px;
-}
+  &::after {
+    position: absolute;
+    opacity: 0;
+    content: "";
+    top: calc(var(--underline-squiggle-offset));
+    left: 0;
+    width: 100%;
+    height: var(--underline-squiggle-height);
+    background-size: 1rem;
+    background-position: 0;
+    animation: cx-waveline 0.5s linear infinite;
+    transition: all ease 0.5s;
+    background-image: url('data:image/svg+xml,<svg width="18" height="7" viewBox="0 0 18 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.57715 4.17283C4.4006 5.46648 2.86064 7 0 7V5C1.96863 5 3.00041 4.03352 4.09755 2.82717C4.18247 2.7338 4.26911 2.63679 4.3579 2.53738C5.35523 1.42077 6.62422 0 8.78049 0C10.9089 0 12.2699 1.38741 13.3632 2.50189C13.4613 2.6018 13.5571 2.69953 13.6512 2.79386C14.8672 4.01314 16.0118 5 18 5V7C15.1589 7 13.5123 5.48686 12.2351 4.20614C12.1748 4.14575 12.1157 4.08635 12.0576 4.02798C10.814 2.77827 10.0395 2 8.78049 2C7.54894 2 6.87361 2.74423 5.73842 3.99523C5.68569 4.05335 5.63196 4.11255 5.57715 4.17283Z" fill="%2329CFF5"/></svg>');
+    background-repeat: repeat-x;
+  }
 
-.cx-tab--active {
-  &:hover {
-    text-decoration-color: transparent;
+  &:hover::after {
+    opacity: 1;
   }
+}
 
+.cx-tab--active {
   &::before {
     background-color: var(--cx-color-background-accent-5);
   }
+  &:hover::after {
+    opacity: 0;
+  }
 }
 
 .cx-tab ~ .cx-tab {

diff --git a/packages/lib/dist/package.json b/packages/lib/dist/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@computas/designsystem",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "The Computas design system",
   "type": "module",
   "license": "MIT",

diff --git a/packages/lib/global-css/animations.css b/packages/lib/global-css/animations.css
@@ -80,3 +80,9 @@
     background-position: 76% 38%;
   }
 }
+
+@keyframes cx-waveline {
+  to {
+    background-position: 16px;
+  }
+}
diff --git a/packages/lib/global-styles.css b/packages/lib/global-styles.css
@@ -21,4 +21,5 @@
 @import "components/chips/chip.css";
 @import "components/form-field/form-field.css";
 @import "components/input/input.css";
+@import "components/link/link.css";
 @import "components/tabs/tab.css";