refactor(link): inline is now default link

computas · Jan 10, 2025 · 3001499 · 3001499
1 parent 07ef237
commit 3001499
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 37 deletions.
diff --git a/packages/lib/components/link/Overview.mdx b/packages/lib/components/link/Overview.mdx
@@ -6,14 +6,10 @@ import * as linkStories from './link.stories';
 
 <Title>Link</Title>
 
-### Link sizes
+### Basic link
 
 <Canvas of={linkStories.Link} />
 
-### Inline link
+### Standalone link
 
-<Canvas of={linkStories.InlineLink} />
-
-### Link with icon
-
-<Canvas of={linkStories.IconLink} />
+<Canvas of={linkStories.StandaloneLink} />
diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css
@@ -15,8 +15,8 @@
   --underline-squiggle-offset: var(--line-height);
 
   color: var(--cx-color-text-primary);
-  line-height: var(--line-height);
-  font-size: 1.125rem;
+  line-height: inherit;
+  font-size: inherit;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
@@ -32,7 +32,7 @@
   &::before {
     background: var(--cx-color-border-primary);
     height: var(--underline-height);
-    top: var(--underline-offset);
+    top: calc(var(--underline-offset) - 6px);
   }
 
   &::after {
@@ -41,7 +41,7 @@
     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: var(--underline-squiggle-offset);
+    top: calc(var(--underline-squiggle-offset) - 6px);
   }
 
   &::after,
@@ -63,26 +63,16 @@
     opacity: 1;
   }
 
-  &.cx-link--sm {
-    --line-height: 1.25rem;
-    font-size: 0.875rem;
-
-    cx-icon {
-      width: var(--cx-spacing-5);
-      height: var(--cx-spacing-5);
-    }
-  }
-
-  &.cx-link--inline {
-    line-height: inherit;
-    font-size: inherit;
+  &.cx-link--standalone {
+    line-height: var(--line-height);
+    font-size: 1.125rem;
     font-weight: 600;
 
     &::before {
-      top: calc(var(--underline-offset) - 6px);
+      top: var(--underline-offset);
     }
     &::after {
-      top: calc(var(--underline-squiggle-offset) - 6px);
+      top: var(--underline-squiggle-offset);
     }
   }
 }
diff --git a/packages/lib/components/link/link.stories.ts b/packages/lib/components/link/link.stories.ts
@@ -11,20 +11,13 @@ export default {
 
 export const Link: StoryObj = {
   render: () => html`
-<a class="cx-link cx-mr-6" href="https://designsystem.computas.com/?path=/docs/basics-colors--overview">Medium link</a>
-<a class="cx-link cx-link--sm" href="https://designsystem.computas.com/?path=/docs/basics-colors--overview">Small link</a>
+  <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 InlineLink: StoryObj = {
+export const StandaloneLink: StoryObj = {
   render: () => html`
-<div class="cx-body-2">Lorem ipsum dolor sit amet <a class="cx-link cx-link--inline" href="https://designsystem.computas.com/?path=/docs/basics-colors--overview">Inline link</a> consectetur. Justo orci pellentesque magna quis. Lorem ipsum dolor sit amet consectetur. Justo orci pellentesque magna quis.</div>
-  `,
-};
-
-export const IconLink: StoryObj = {
-  render: () => html`
-<a class="cx-link" href="https://designsystem.computas.com/?path=/docs/basics-colors--overview">Link med ikon <cx-icon name="edit"></cx-icon></a>
-<a class="cx-link cx-link--sm" href="https://designsystem.computas.com/?path=/docs/basics-colors--overview">Link med ikon <cx-icon name="edit"></cx-icon></a>
+<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>
   `,
 };