Skip to content

Commit efe2817

Browse files
nilloqlouismaximepiton
nilloq
and
louismaximepiton
authored
[OUDS] Link component (#2836)
--------- Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
1 parent 4d5a8a8 commit efe2817

File tree

20 files changed

+492
-161
lines changed

20 files changed

+492
-161
lines changed

‎scss/_helpers.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// OUDS mod: no @import "helpers/colored-links";
44
@import "helpers/focus-ring";
55
@import "helpers/icon";
6-
@import "helpers/icon-link";
6+
// OUDS mod: no import of `icon-link`
77
@import "helpers/ratio";
88
@import "helpers/position";
99
@import "helpers/stacks";

‎scss/_links.scss‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
//
2+
// Orange component link
3+
//
4+
5+
.link {
6+
// scss-docs-start link-css-vars
7+
--#{$prefix}link-icon-size: #{$ouds-link-size-icon-medium};
8+
--#{$prefix}link-icon-gap: #{$ouds-link-space-column-gap-icon-medium};
9+
// scss-docs-end link-css-vars
10+
11+
@extend %link-properties;
12+
@include get-font-size("label-large");
13+
display: inline-flex;
14+
align-items: center;
15+
min-width: $ouds-link-size-min-width-medium;
16+
min-height: $ouds-link-size-min-height-medium;
17+
padding: $ouds-link-space-padding-block $ouds-link-space-padding-inline;
18+
text-align: start;
19+
text-wrap: pretty;
20+
vertical-align: middle;
21+
background: transparent;
22+
border: 0;
23+
24+
&:has(svg, img, .icon):not(:hover, :active, :focus-visible, :focus[data-focus-visible]) {
25+
text-decoration: none;
26+
}
27+
28+
svg,
29+
img,
30+
.icon {
31+
flex-shrink: 0;
32+
width: 1em;
33+
height: 1em;
34+
margin-right: var(--#{$prefix}link-icon-gap);
35+
overflow: hidden;
36+
font-size: var(--#{$prefix}link-icon-size);
37+
line-height: 1;
38+
}
39+
}
40+
41+
.link-chevron {
42+
--#{$prefix}link-arrow-gap: #{$ouds-link-space-column-gap-arrow-medium};
43+
--#{$prefix}link-arrow-color: #{$ouds-link-color-arrow-enabled};
44+
--#{$prefix}link-arrow-hover-color: #{$ouds-link-color-arrow-hover};
45+
--#{$prefix}link-arrow-focus-color: #{$ouds-link-color-arrow-focus};
46+
--#{$prefix}link-arrow-pressed-color: #{$ouds-link-color-arrow-pressed};
47+
--#{$prefix}link-arrow-disabled-color: #{$ouds-color-action-disabled};
48+
49+
// Extend for Boosted compatibility in which .link-chevron can be used without .link
50+
@extend .link;
51+
text-decoration: none;
52+
53+
&:hover,
54+
&:active,
55+
&:focus-visible,
56+
&:focus[data-focus-visible] {
57+
text-decoration: underline;
58+
}
59+
60+
&:hover::before,
61+
&:hover::after {
62+
background-color: var(--#{$prefix}link-arrow-hover-color);
63+
}
64+
65+
&:focus-visible::before,
66+
&:focus[data-focus-visible]::before,
67+
&:focus-visible::after,
68+
&:focus[data-focus-visible]::after {
69+
background-color: var(--#{$prefix}link-arrow-focus-color);
70+
}
71+
72+
&:active::before,
73+
&:active::after {
74+
background-color: var(--#{$prefix}link-arrow-pressed-color);
75+
}
76+
77+
&[aria-disabled="true"]::before,
78+
&[aria-disabled="true"]::after {
79+
background-color: var(--#{$prefix}link-arrow-disabled-color);
80+
}
81+
82+
&:not(.back) {
83+
display: inline-block;
84+
}
85+
86+
// Chevron icon
87+
&.back::before,
88+
&:not(.back)::after {
89+
display: inline-block;
90+
width: var(--#{$prefix}link-icon-size);
91+
min-width: var(--#{$prefix}link-icon-size);
92+
height: var(--#{$prefix}link-icon-size);
93+
margin-right: var(--#{$prefix}link-arrow-gap);
94+
vertical-align: middle;
95+
content: "";
96+
background-color: var(--#{$prefix}link-arrow-color);
97+
mask: var(--#{$prefix}chevron-icon) center no-repeat;
98+
mask-size: var(--#{$prefix}link-icon-size);
99+
}
100+
101+
&:not(.back)::after {
102+
margin-right: 0;
103+
margin-left: var(--#{$prefix}link-arrow-gap);
104+
transform: rotate(180deg) translateY(1px);
105+
}
106+
}
107+
108+
.link-on-colored-bg {
109+
--#{$prefix}link-color: #{$ouds-link-color-content-enabled-mono};
110+
--#{$prefix}link-hover-color: #{$ouds-link-color-content-hover-mono};
111+
--#{$prefix}link-focus-color: #{$ouds-link-color-content-focus-mono};
112+
--#{$prefix}link-active-color: #{$ouds-link-color-content-pressed-mono};
113+
--#{$prefix}link-disabled-color: #{$ouds-link-color-content-disabled-mono};
114+
--#{$prefix}link-visited-color: #{$ouds-link-color-content-enabled-mono};
115+
--#{$prefix}link-arrow-color: #{$ouds-link-color-content-enabled-mono};
116+
--#{$prefix}link-arrow-hover-color: #{$ouds-link-color-content-hover-mono};
117+
--#{$prefix}link-arrow-focus-color: #{$ouds-link-color-content-focus-mono};
118+
--#{$prefix}link-arrow-pressed-color: #{$ouds-link-color-content-pressed-mono};
119+
--#{$prefix}link-arrow-disabled-color: #{$ouds-link-color-content-disabled-mono};
120+
}
121+
122+
.link-sm {
123+
--#{$prefix}link-icon-size: #{$ouds-link-size-icon-small};
124+
--#{$prefix}link-icon-gap: #{$ouds-link-space-column-gap-icon-small};
125+
--#{$prefix}link-arrow-gap: #{$ouds-link-space-column-gap-arrow-small};
126+
127+
@include get-font-size("label-medium");
128+
min-width: $ouds-link-size-min-width-small;
129+
min-height: $ouds-link-size-min-height-small;
130+
}
131+
132+
@if $enable-bootstrap-compatibility {
133+
.icon-link {
134+
@extend .link;
135+
}
136+
}

‎scss/_maps.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,7 @@ $utilities-border-subtle: (
377377
) !default;
378378
// scss-docs-end utilities-border-colors
379379

380-
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
380+
// OUDS mod : no $utilities-links-underline
381381

382382
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
383383

‎scss/_reboot.scss‎

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -349,22 +349,62 @@ sup { top: -.5em; }
349349

350350
// Links
351351

352-
a {
353-
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
352+
// OUDS mod: define link properties in a placeholder to be reused in link component
353+
%link-properties {
354+
font-weight: $link-font-weight; // OUDS mod
355+
color: var(--#{$prefix}link-color); // OUDS mod: instead of rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
354356
text-decoration: $link-decoration;
355357

356358
&:hover {
357-
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
359+
color: var(--#{$prefix}link-hover-color); // OUDS mod
360+
text-decoration: $link-hover-decoration;
361+
}
362+
363+
364+
.visited-links &:visited:not(.link, .link-chevron, .icon-link, :hover, :active, :focus-visible, :focus[data-focus-visible]),
365+
&:visited.visited-links:not(.link, .link-chevron, .icon-link, :hover, :active, :focus-visible, :focus[data-focus-visible]) {
366+
color: var(--#{$prefix}link-visited-color);
367+
}
368+
369+
&:focus-visible,
370+
&:focus[data-focus-visible-added] {
371+
color: var(--#{$prefix}link-focus-color);
372+
text-decoration: $link-hover-decoration;
373+
}
374+
375+
&:active {
376+
color: var(--#{$prefix}link-active-color);
358377
text-decoration: $link-hover-decoration;
359378
}
379+
380+
&[aria-disabled="true"] {
381+
color: var(--#{$prefix}link-disabled-color);
382+
pointer-events: none;
383+
}
384+
385+
.colored-bg &,
386+
&.colored-bg {
387+
--#{$prefix}link-color: #{$ouds-link-color-content-enabled-mono};
388+
--#{$prefix}link-hover-color: #{$ouds-link-color-content-hover-mono};
389+
--#{$prefix}link-focus-color: #{$ouds-link-color-content-focus-mono};
390+
--#{$prefix}link-active-color: #{$ouds-link-color-content-pressed-mono};
391+
--#{$prefix}link-disabled-color: #{$ouds-link-color-content-disabled-mono};
392+
--#{$prefix}link-visited-color: #{$ouds-link-color-content-enabled-mono};
393+
}
394+
}
395+
// End mod
396+
397+
a {
398+
// OUDS mod: use link properties placeholder
399+
@extend %link-properties;
360400
}
361401

362402
// And undo these styles for placeholder links/named anchors (without href).
363403
// It would be more straightforward to just use a[href] in previous block, but that
364404
// causes specificity issues in many other styles that are too complex to fix.
365405
// See https://github.com/twbs/bootstrap/issues/19402
366406

367-
a:not([href]):not([class]) {
407+
a:not([href]):not([class]):not([aria-disabled="true"]) { // OUDS mod: Added `:not([aria-disabled="true])`
368408
&,
369409
&:hover {
370410
color: inherit;

‎scss/_root.scss‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -245,15 +245,27 @@
245245
// scss-docs-end root-body-variables
246246

247247
--#{$prefix}heading-color: #{$headings-color};
248-
--#{$prefix}link-color: #{$link-color};
249-
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
250-
--#{$prefix}link-decoration: #{$link-decoration};
251248

252-
--#{$prefix}link-hover-color: #{$link-hover-color};
253-
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
249+
// OUDS mod
250+
// scss-docs-start root-link-var-ouds
251+
--#{$prefix}link-color: #{$ouds-link-color-content-enabled};
252+
--#{$prefix}link-hover-color: #{$ouds-link-color-content-hover};
253+
--#{$prefix}link-focus-color: #{$ouds-link-color-content-focus};
254+
--#{$prefix}link-active-color: #{$ouds-link-color-content-pressed};
255+
--#{$prefix}link-disabled-color: #{$ouds-color-action-disabled};
256+
--#{$prefix}link-visited-color: #{$ouds-color-action-visited};
257+
// scss-docs-end root-link-var-ouds
258+
// End mod
259+
260+
@if $enable-bootstrap-compatibility {
261+
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
262+
--#{$prefix}link-decoration: #{$link-decoration};
254263

255-
@if $link-hover-decoration != null {
256-
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
264+
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
265+
266+
@if $link-hover-decoration != null {
267+
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
268+
}
257269
}
258270

259271
@if $enable-bootstrap-compatibility {
@@ -491,12 +503,10 @@
491503

492504
--#{$prefix}heading-color: #{$headings-color-dark};
493505

494-
--#{$prefix}link-color: #{$link-color-dark};
495-
--#{$prefix}link-hover-color: #{$link-hover-color-dark};
496-
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
497-
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
498-
499506
@if $enable-bootstrap-compatibility {
507+
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
508+
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
509+
500510
--#{$prefix}code-color: #{$code-color-dark};
501511
--#{$prefix}highlight-color: #{$mark-color-dark};
502512
--#{$prefix}highlight-bg: #{$mark-bg-dark};

‎scss/_utilities.scss‎

Lines changed: 4 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -990,56 +990,10 @@ $utilities: map-merge(
990990
values: $ouds-text-colors
991991
),
992992
// scss-docs-end utils-color-ouds
993-
// scss-docs-start utils-links
994-
"link-opacity": (
995-
css-var: true,
996-
class: link-opacity,
997-
state: hover,
998-
values: (
999-
10: .1,
1000-
25: .25,
1001-
50: .5,
1002-
75: .75,
1003-
100: 1
1004-
)
1005-
),
1006-
"link-offset": (
1007-
property: text-underline-offset,
1008-
class: link-offset,
1009-
state: hover,
1010-
values: (
1011-
1: .125em,
1012-
2: .25em,
1013-
3: .375em,
1014-
)
1015-
),
1016-
"link-underline": (
1017-
property: text-decoration-color,
1018-
class: link-underline,
1019-
local-vars: (
1020-
"link-underline-opacity": 1
1021-
),
1022-
values: map-merge(
1023-
$utilities-links-underline,
1024-
(
1025-
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
1026-
)
1027-
)
1028-
),
1029-
"link-underline-opacity": (
1030-
css-var: true,
1031-
class: link-underline-opacity,
1032-
state: hover,
1033-
values: (
1034-
0: 0,
1035-
10: .1,
1036-
25: .25,
1037-
50: .5,
1038-
75: .75,
1039-
100: 1
1040-
),
1041-
),
1042-
// scss-docs-end utils-links
993+
// OUDS mod: no "link-opacity"
994+
// OUDS mod: no "link-offset"
995+
// OUDS mod: no "link-underline
996+
// OUDS mod: no "link-underline-opacity"
1043997
// scss-docs-start utils-bg-color
1044998
"background-color": (
1045999
property: background-color,

‎scss/_variables.scss‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -365,7 +365,7 @@ $escaped-characters: (
365365

366366
// OUDS mod
367367
//// SVG as Data-URi
368-
$chevron-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path d='M9 2 7 0 0 7l7 7 2-2-5-5 5-5z'/></svg>") !default;
368+
$chevron-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M597.22 225 402.78 421.43 325 500l77.78 78.57L597.22 775 675 696.43 480.56 500 675 303.57z'/></svg>") !default;
369369
$cross-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='#{$black}'><path d='m15 17.121-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
370370
$cross-icon-stroke: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='116 116 767 767' fill='#{$black}'><path d='M817.493 676.165a49.977 49.977 0 0 1 0 70.664l-70.664 70.664a49.977 49.977 0 0 1-70.664 0L499.5 640.828 322.835 817.493a49.977 49.977 0 0 1-70.664 0l-70.664-70.664a49.977 49.977 0 0 1 0-70.664L358.172 499.5 181.507 322.835a49.977 49.977 0 0 1 0-70.664l70.664-70.664a49.977 49.977 0 0 1 70.664 0L499.5 358.172l176.665-176.665a49.977 49.977 0 0 1 70.664 0l70.664 70.664a49.977 49.977 0 0 1 0 70.664L640.828 499.5Z'/></svg>") !default;
371371
$check-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'><path fill='#{$black}' d='M13 0 5 8 2 5 0 7l5 5L15 2z'/></svg>") !default;
@@ -487,31 +487,28 @@ $body-emphasis-color: $ouds-color-content-default-light !default; // OUDS
487487
//
488488
// Style anchor elements.
489489

490+
// scss-docs-start link-variables
490491
$link-color: $black !default; // OUDS mod
491492
$link-decoration: underline !default;
493+
$link-font-weight: $ouds-font-weight-strong !default; // OUDS mod
492494
$link-shade-percentage: 20% !default;
493495
$link-hover-color: $primary !default; // OUDS mod
494496
$link-hover-decoration: null !default;
497+
// scss-docs-end link-variables
495498

496499
$stretched-link-pseudo-element: after !default;
497500
$stretched-link-z-index: 1 !default;
498501

499-
// OUDS mod
500-
$linked-chevron-icon-width: subtract(.5rem, 1px) !default;
501-
$linked-chevron-icon-height: $spacer * .5 !default;
502-
$linked-chevron-transform: rotate(.5turn) translateY(1px) !default;
503-
$linked-chevron-margin-left: $spacer * .25 !default;
504-
// End mod
505-
502+
// OUDS mod: no longer used
506503
// Icon links
507504
// scss-docs-start icon-link-variables
508-
$icon-link-gap: .3125rem !default; // OUDS mod: instead of `.375rem`
509-
$icon-link-underline-offset: .25em !default;
510-
$icon-link-icon-size: 1em !default;
511-
$icon-link-icon-transition: .2s ease-in-out transform !default;
512-
$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
505+
// $icon-link-gap: .375rem !default;
506+
// $icon-link-underline-offset: .25em !default;
507+
// $icon-link-icon-size: 1em !default;
508+
// $icon-link-icon-transition: .2s ease-in-out transform !default;
509+
// $icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
513510
// scss-docs-end icon-link-variables
514-
511+
// End mod
515512

516513
// Paragraphs
517514
//

0 commit comments

Comments
 (0)