-
Notifications
You must be signed in to change notification settings - Fork 58
[OUDS] Link component #2836
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
[OUDS] Link component #2836
Changes from 20 commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
4905133
feat(links): links component implementation
nilloq 599406f
Proposal
louismaximepiton 406d16f
fix: update following MR review
nilloq 48fc2cc
fix: reset deleted var
nilloq 3b92a90
fix: following lmp review
nilloq e8fcf8d
fix: typo
nilloq 15882b0
fix: additional lmp review
nilloq 4129479
fix: push missing saved file
nilloq a5ed59f
docs: update migration guides with Link information
nilloq 7ece9f4
docs: fix content duplicate id
nilloq 6ce7a51
Merge branch 'ouds/main' into ouds/main-sc-navigation-links
nilloq 88c05eb
docs: refactor following his review
nilloq 2934cdf
Merge branch 'ouds/main' into ouds/main-sc-navigation-links
nilloq dde77d4
docs: fix broken link
nilloq aac34a1
docs: update during review
nilloq 0ea8bbe
fix: vertical alignement in icon link
nilloq 7b38d23
docs: last review
nilloq 5a96bff
Merge branch 'ouds/main' into ouds/main-sc-navigation-links
nilloq 8236235
fix: cspell on lorem ipsum
nilloq 3558c69
docs: update migration guides
nilloq a553d62
refactor: following vpr review
nilloq acdf240
docs: add comments on removed utilities
nilloq 32199ab
fix: following new vpr review
nilloq File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| // | ||
| // Orange component link | ||
| // | ||
|
|
||
| %chevron-properties { | ||
| display: inline-block; | ||
| width: var(--#{$prefix}link-icon-size); | ||
| min-width: var(--#{$prefix}link-icon-size); | ||
| height: var(--#{$prefix}link-icon-size); | ||
| vertical-align: middle; | ||
| content: ""; | ||
| background-color: var(--#{$prefix}link-arrow-color); | ||
| mask: var(--#{$prefix}chevron-icon) center no-repeat; | ||
| mask-size: var(--#{$prefix}link-icon-size); | ||
| } | ||
|
|
||
| .link { | ||
| // scss-docs-start link-css-vars | ||
| --#{$prefix}link-icon-size: #{$ouds-link-size-icon-medium}; | ||
| --#{$prefix}link-icon-gap: #{$ouds-link-space-column-gap-icon-medium}; | ||
| // scss-docs-end link-css-vars | ||
|
|
||
| @extend a; | ||
vprothais marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| @include get-font-size("label-large"); | ||
| display: inline-flex; | ||
| align-items: center; | ||
| min-width: $ouds-link-size-min-width-medium; | ||
| min-height: $ouds-link-size-min-height-medium; | ||
| padding: $ouds-link-space-padding-block $ouds-link-space-padding-inline; | ||
| text-align: start; | ||
| text-wrap: pretty; | ||
| vertical-align: middle; | ||
| background: transparent; | ||
| border: 0; | ||
|
|
||
| &:has(svg, img, .icon):not(:hover, :active, :focus-visible, :focus[data-focus-visible]) { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| svg, | ||
| img, | ||
| .icon { | ||
| flex-shrink: 0; | ||
| width: 1em; | ||
| height: 1em; | ||
| margin-right: var(--#{$prefix}link-icon-gap); | ||
| overflow: hidden; | ||
| font-size: var(--#{$prefix}link-icon-size); | ||
| line-height: 1; | ||
| } | ||
| } | ||
|
|
||
| .link-chevron { | ||
| --#{$prefix}link-arrow-gap: #{$ouds-link-space-column-gap-arrow-medium}; | ||
| --#{$prefix}link-arrow-color: #{$ouds-link-color-arrow-enabled}; | ||
| --#{$prefix}link-arrow-hover-color: #{$ouds-link-color-arrow-hover}; | ||
| --#{$prefix}link-arrow-focus-color: #{$ouds-link-color-arrow-focus}; | ||
| --#{$prefix}link-arrow-pressed-color: #{$ouds-link-color-arrow-pressed}; | ||
| --#{$prefix}link-arrow-disabled-color: #{$ouds-color-action-disabled}; | ||
|
|
||
| @extend .link; | ||
vprothais marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| text-decoration: none; | ||
|
|
||
| &:hover, | ||
| &:active, | ||
| &:focus-visible, | ||
| &:focus[data-focus-visible] { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| &:hover::before, | ||
| &:hover::after { | ||
| background-color: var(--#{$prefix}link-arrow-hover-color); | ||
| } | ||
|
|
||
| &:focus-visible::before, | ||
| &:focus[data-focus-visible]::before, | ||
| &:focus-visible::after, | ||
| &:focus[data-focus-visible]::after { | ||
| background-color: var(--#{$prefix}link-arrow-focus-color); | ||
| } | ||
|
|
||
| &:active::before, | ||
| &:active::after { | ||
| background-color: var(--#{$prefix}link-arrow-pressed-color); | ||
| } | ||
|
|
||
| &[aria-disabled="true"]::before, | ||
| &[aria-disabled="true"]::after { | ||
| background-color: var(--#{$prefix}link-arrow-disabled-color); | ||
| } | ||
|
|
||
| &:not(.back) { | ||
| display: inline-block; | ||
| } | ||
|
|
||
| &.back::before, | ||
| &:not(.back)::after { | ||
| @extend %chevron-properties; | ||
vprothais marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| margin-right: var(--#{$prefix}link-arrow-gap); | ||
| } | ||
|
|
||
| &:not(.back)::after { | ||
| margin-right: 0; | ||
| margin-left: var(--#{$prefix}link-arrow-gap); | ||
| transform: rotate(180deg) translateY(1px); | ||
| } | ||
| } | ||
|
|
||
| .link-on-colored-bg { | ||
| --#{$prefix}link-color: #{$ouds-link-color-content-enabled-mono}; | ||
| --#{$prefix}link-hover-color: #{$ouds-link-color-content-hover-mono}; | ||
| --#{$prefix}link-focus-color: #{$ouds-link-color-content-focus-mono}; | ||
| --#{$prefix}link-active-color: #{$ouds-link-color-content-pressed-mono}; | ||
| --#{$prefix}link-disabled-color: #{$ouds-link-color-content-disabled-mono}; | ||
| --#{$prefix}link-visited-color: #{$ouds-link-color-content-enabled-mono}; | ||
| --#{$prefix}link-arrow-color: #{$ouds-link-color-content-enabled-mono}; | ||
| --#{$prefix}link-arrow-hover-color: #{$ouds-link-color-content-hover-mono}; | ||
| --#{$prefix}link-arrow-focus-color: #{$ouds-link-color-content-focus-mono}; | ||
| --#{$prefix}link-arrow-pressed-color: #{$ouds-link-color-content-pressed-mono}; | ||
| --#{$prefix}link-arrow-disabled-color: #{$ouds-link-color-content-disabled-mono}; | ||
| } | ||
|
|
||
| .link-sm { | ||
| --#{$prefix}link-icon-size: #{$ouds-link-size-icon-small}; | ||
| --#{$prefix}link-icon-gap: #{$ouds-link-space-column-gap-icon-small}; | ||
| --#{$prefix}link-arrow-gap: #{$ouds-link-space-column-gap-arrow-small}; | ||
|
|
||
| @include get-font-size("label-medium"); | ||
| min-width: $ouds-link-size-min-width-small; | ||
| min-height: $ouds-link-size-min-height-small; | ||
| } | ||
|
|
||
| @if $enable-bootstrap-compatibility { | ||
| .icon-link { | ||
| @extend .link; | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.