diff --git a/CHANGELOG.md b/CHANGELOG.md index 628cb853e..fac14b7aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - take Markdown rendering into account before testing the maximum preview length - `` - header-menu items are vertically centered now +- `` + - stabilize font size for on hover state + - use correct font sizes when `size` property is set - `Typography` - adjust displaying fallback symbols in different browsers diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx new file mode 100644 index 000000000..5c5e04629 --- /dev/null +++ b/src/components/Link/Link.stories.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { Meta, StoryFn } from "@storybook/react"; + +import { Link } from "../../../index"; + +export default { + title: "Components/Link", + component: Link, + argTypes: { + target: { + control: "select", + options: ["_self", "_blank", "_parent", "_top"], + }, + }, +} as Meta; + +const Template: StoryFn = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + children: "Example link", + href: "https://example.com/", +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + children: "Disabled link", + href: "https://example.com/", + disabled: true, +}; diff --git a/src/components/Link/link.scss b/src/components/Link/link.scss index d07676b68..c5348af49 100644 --- a/src/components/Link/link.scss +++ b/src/components/Link/link.scss @@ -2,8 +2,34 @@ @include link.link; .#{$prefix}--link { - font-size: 1em; - line-height: inherit; + &, + &:hover { + // default case: use font size from context + font-size: inherit; + line-height: inherit; + } + + &.#{$prefix}--link--sm { + &, + &:hover { + font-size: $eccgui-size-typo-caption; + line-height: $eccgui-size-typo-caption-lineheight; + } + } + &.#{$prefix}--link--md { + &, + &:hover { + font-size: $eccgui-size-typo-text; + line-height: $eccgui-size-typo-text-lineheight; + } + } + &.#{$prefix}--link--lg { + &, + &:hover { + font-size: $eccgui-size-typo-subtitle; + line-height: $eccgui-size-typo-subtitle-lineheight; + } + } &:focus { outline: none;