feat(link): update link styles - FRONT-4325

src/implementations/twig/components/link/link.story.js

@@ -39,7 +39,6 @@ const withInverted = (story) => {
 
 const getArgs = (data) => ({
   label: data.link.label,
-  no_visited: data.link.no_visited || false,
   icon_name: 'none',
   icon_position: 'after',
   external: false,
@@ -72,19 +71,6 @@ const getArgTypes = () => ({
       type: 'boolean',
     },
   },
-  no_visited: {
-    name: 'no visited',
-    type: { name: 'boolean' },
-    description: 'No change of color for visited link',
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-      category: 'Content',
-    },
-    control: {
-      type: 'boolean',
-    },
-  },
   icon_name: {
     name: 'icon name',
     type: { name: 'select', required: false },
@@ -159,7 +145,6 @@ const getArgTypes = () => ({
 
 const prepareData = (data, args) => {
   data.link.label = args.label;
-  data.link.no_visited = args.no_visited;
   data.link.hide_label = args.hide_label;
   data.link.icon_position = args.icon_position;
   data.link.external = args.external;
@@ -183,15 +168,6 @@ const prepareData = (data, args) => {
   return data;
 };
 
-const prepareDataButtonLink = (data, args) => {
-  const dataCustom = prepareData(data, args);
-  if (dataCustom.icon) {
-    data.icon.size = system === 'eu' ? 's' : 'xs';
-  }
-
-  return dataCustom;
-};
-
 export default {
   title: 'Components/Navigation/Link',
   decorators: [withNotes, withCode],
@@ -223,7 +199,7 @@ Standalone.parameters = { notes: { markdown: notes, json: dataStandalone } };
 export const Cta = (_, { loaded: { component } }) => component;
 
 Cta.render = async (args) => {
-  const renderedLinkCta = await link(prepareDataButtonLink(dataCta, args));
+  const renderedLinkCta = await link(prepareData(dataCta, args));
   return renderedLinkCta;
 };
 Cta.storyName = 'call to action';
@@ -234,7 +210,7 @@ Cta.parameters = { notes: { markdown: notes, json: dataCta } };
 export const Primary = (_, { loaded: { component } }) => component;
 
 Primary.render = async (args) => {
-  const renderedLinkCta = await link(prepareDataButtonLink(dataPrimary, args));
+  const renderedLinkCta = await link(prepareData(dataPrimary, args));
   return renderedLinkCta;
 };
 Primary.storyName = 'primary';
@@ -245,9 +221,7 @@ Primary.parameters = { notes: { markdown: notes, json: dataPrimary } };
 export const Secondary = (_, { loaded: { component } }) => component;
 
 Secondary.render = async (args) => {
-  const renderedLinkSecondary = await link(
-    prepareDataButtonLink(dataSecondary, args),
-  );
+  const renderedLinkSecondary = await link(prepareData(dataSecondary, args));
   return renderedLinkSecondary;
 };
 Secondary.storyName = 'secondary';

src/implementations/vanilla/components/link/link-print.scss

@@ -61,6 +61,8 @@ $link: null !default;
 
 .ecl-link--standalone {
   font-family: #{map.get($theme, 'font-family-print', 'default')};
+  display: inline-block;
+  line-height: map.get($link, 'standalone-line-height');
 }
 
 .ecl-link--inverted {

src/implementations/vanilla/components/link/link.scss

@@ -40,6 +40,7 @@ $min-width: 44px; // According to COMM every interactive element should be at le
   }
 }
 
+// DEPRECATED
 .ecl-link--no-visited:visited {
   color: map.get($link, 'color');
 
@@ -93,13 +94,16 @@ $min-width: 44px; // According to COMM every interactive element should be at le
 * Standalone
 */
 .ecl-link--standalone {
+  display: inline-block;
+  line-height: map.get($link, 'standalone-line-height');
   text-decoration: none;
 
   &:visited {
     color: map.get($link, 'color');
   }
 
   &:hover {
+    color: map.get($link, 'color');
     text-decoration: underline;
   }
 }
@@ -134,6 +138,7 @@ $min-width: 44px; // According to COMM every interactive element should be at le
     }
   }
 
+  // DEPRECATED
   /* stylelint-disable-next-line plugin/selector-bem-pattern */
   &.ecl-link--no-visited:visited {
     color: map.get($link, 'inverted', 'color');
@@ -156,7 +161,7 @@ $min-width: 44px; // According to COMM every interactive element should be at le
   box-sizing: border-box;
   color: map.get($link, #{$variant}, 'color');
   display: inline-block;
-  font: var(--f-m);
+  font: map.get($link, 'button', 'font');
   min-width: $min-width;
   padding: calc(
       #{map.get($link, 'button', 'padding-vertical')} - #{map.get(

src/themes/ec/variables/_link.scss

@@ -9,6 +9,7 @@ $link: (
   outline-color: var(--c-p),
   outline-width: 2px,
   outline-radius: 1px,
+  standalone-line-height: map.get($line-height-ui, 'xs'),
   inverted: (
     color: map.get($color, 'white'),
     color-hover: var(--c-s-60),
@@ -17,6 +18,7 @@ $link: (
     outline-color: map.get($color, 'white'),
   ),
   button: (
+    font: var(--f-ui-m),
     radius: 2px,
     shadow: none,
     border-width: 2px,
@@ -27,47 +29,47 @@ $link: (
   primary: (
     background: var(--c-p),
     color: map.get($color, 'white'),
+    border-color: var(--c-p),
     background-hover: var(--c-p-140),
     color-hover: map.get($color, 'white'),
+    border-color-hover: var(--c-p-140),
     background-active: var(--c-p-160),
     color-active: map.get($color, 'white'),
+    border-color-active: var(--c-p-160),
     background-focus: var(--c-p),
     color-focus: map.get($color, 'white'),
-    border-color: var(--c-p),
-    border-color-hover: var(--c-p-140),
-    border-color-active: var(--c-p-160),
     border-color-focus: var(--c-p),
     outline-color: map.get($color, 'white'),
   ),
   secondary: (
     background: map.get($color, 'white'),
     color: var(--c-p),
+    border-color: var(--c-p),
     background-hover: var(--c-p-140),
     color-hover: map.get($color, 'white'),
+    border-color-hover: var(--c-p-140),
     background-active: var(--c-p-160),
     color-active: map.get($color, 'white'),
+    border-color-active: var(--c-p-160),
     background-focus: var(--c-p-160),
     color-focus: map.get($color, 'white'),
-    border-color: var(--c-p),
-    border-color-hover: var(--c-p-140),
-    border-color-active: var(--c-p-160),
     border-color-focus: var(--c-p-160),
     outline-color: map.get($color, 'white'),
     focus-shadow: none,
   ),
   cta: (
-    background: var(--c-s-80),
+    background: var(--c-s),
     color: var(--c-d),
-    background-hover: var(--c-s-120),
-    border-color: var(--c-s-80),
+    border-color: var(--c-s),
+    background-hover: var(--c-s-140),
     color-hover: var(--c-d),
-    border-color-hover: var(--c-s-120),
-    background-active: var(--c-s-140),
+    border-color-hover: var(--c-s-140),
+    background-active: var(--c-s-160),
     color-active: var(--c-d),
-    border-color-active: var(--c-s-140),
-    background-focus: var(--c-s-80),
+    border-color-active: var(--c-s-160),
+    background-focus: var(--c-s),
     color-focus: var(--c-d),
-    border-color-focus: var(--c-s-80),
+    border-color-focus: var(--c-s),
     outline-color: var(--c-d),
   ),
 );

src/themes/eu/variables/_link.scss

@@ -3,26 +3,28 @@
 
 $link: (
   color: var(--c-p),
-  color-hover: var(--c-p-140),
+  color-hover: var(--c-p-160),
   color-visited: var(--c-p),
-  color-active: var(--c-p),
+  color-active: var(--c-d),
   outline-color: var(--c-p),
   outline-width: 2px,
   outline-radius: 2px,
+  standalone-line-height: map.get($line-height-ui, 'xs'),
   inverted: (
     color: var(--c-a),
     color-hover: var(--c-a-30),
-    color-visited: vvar(--c-a),
-    color-active: var(--c-a),
+    color-visited: var(--c-a),
+    color-active: map.get($color, 'white'),
     outline-color: var(--c-a),
   ),
   button: (
+    font: var(--f-ui-m),
     radius: 4px,
     shadow: var(--sh-1),
     border-width: 2px,
     outline-width: 1px,
     padding-horizontal: var(--s-m),
-    padding-vertical: var(--s-s),
+    padding-vertical: var(--s-xs),
   ),
   primary: (
     background: var(--c-p),
@@ -31,9 +33,9 @@ $link: (
     background-hover: var(--c-p-80),
     color-hover: map.get($color, 'white'),
     border-color-hover: var(--c-p-80),
-    background-active: var(--c-p-120),
+    background-active: var(--c-p-140),
     color-active: map.get($color, 'white'),
-    border-color-active: var(--c-p),
+    border-color-active: var(--c-p-140),
     background-focus: var(--c-p),
     color-focus: map.get($color, 'white'),
     border-color-focus: var(--c-p),
@@ -46,12 +48,12 @@ $link: (
     background-hover: var(--c-p-80),
     color-hover: map.get($color, 'white'),
     border-color-hover: var(--c-p-80),
-    background-active: var(--c-p-120),
+    background-active: var(--c-p-140),
     color-active: map.get($color, 'white'),
-    border-color-active: var(--c-p-120),
-    background-focus: var(--c-p-120),
+    border-color-active: var(--c-p-140),
+    background-focus: var(--c-p-140),
     color-focus: map.get($color, 'white'),
-    border-color-focus: var(--c-p-120),
+    border-color-focus: var(--c-p-140),
     outline-color: map.get($color, 'white'),
   ),
   cta: (