-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(web): Introduce
Card component #DS-1397
- Loading branch information
1 parent
68268e8
commit 1e80a46
Showing
11 changed files
with
296 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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,63 @@ | ||
| // 1. Get ready for card link overlay. | ||
|
|
||
| @use '../../tools/typography'; | ||
| @use 'theme'; | ||
|
|
||
| .Card { | ||
| --card-gap: #{theme.$gap}; | ||
|
|
||
| @include typography.generate(theme.$typography); | ||
|
|
||
| position: relative; // 1. | ||
| display: grid; | ||
| color: theme.$color; | ||
| } | ||
|
|
||
| .Card--horizontal { | ||
| grid-template-columns: 1fr auto; | ||
| grid-template-rows: 1fr auto; | ||
| grid-template-areas: | ||
| 'header body' | ||
| 'header footer'; | ||
| } | ||
|
|
||
| .Card--horizontalReversed { | ||
| grid-template-columns: auto 1fr; | ||
| grid-template-rows: 1fr auto; | ||
| grid-template-areas: | ||
| 'body header' | ||
| 'footer header'; | ||
| } | ||
|
|
||
| .Card--vertical { | ||
| grid-template-rows: auto 1fr auto; | ||
| grid-template-areas: | ||
| 'header' | ||
| 'body' | ||
| 'footer'; | ||
| } | ||
|
|
||
| .Card--boxed { | ||
| --card-padding: #{theme.$padding}; | ||
|
|
||
| border: theme.$border-width theme.$border-style theme.$border-color; | ||
| border-radius: theme.$border-radius; | ||
| background-color: theme.$background-color; | ||
|
|
||
| // TODO discuss interactions with designer | ||
| // @media (hover: hover) { | ||
| // &:hover .CardLink { | ||
| // text-decoration: underline; | ||
| // } | ||
| // } | ||
|
|
||
| &:has(.CardLink) { | ||
| @media (hover: hover) { | ||
| transition: box-shadow theme.$transition-duration theme.$transition-timing; | ||
|
|
||
| &:hover { | ||
| box-shadow: theme.$box-shadow-hover; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains 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,29 @@ | ||
| // 1. Restore interactions for individual actions. | ||
|
|
||
| @use '../../tools/dictionaries'; | ||
| @use 'theme'; | ||
| @use 'tools'; | ||
|
|
||
| .CardActions { | ||
| @include tools.card-content-element(); | ||
| @include tools.add-spacing(); | ||
|
|
||
| z-index: 1; | ||
| display: flex; | ||
| flex-direction: row-reverse; | ||
| flex-wrap: wrap; | ||
| grid-area: footer; | ||
| gap: theme.$actions-gap; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| // stylelint-disable-next-line selector-max-universal -- 1. | ||
| .CardActions > * { | ||
| pointer-events: auto; | ||
| } | ||
|
|
||
| @include dictionaries.generate-alignments( | ||
| $class-name: 'CardActions', | ||
| $dictionary-values: theme.$actions-alignment-dictionary, | ||
| $axis: 'x' | ||
| ); |
This file contains 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,16 @@ | ||
| // 1. Make perex selectable. | ||
|
|
||
| @use 'tools'; | ||
|
|
||
| .CardBody { | ||
| @include tools.card-content-element(); | ||
| @include tools.add-spacing(); | ||
|
|
||
| grid-area: body; | ||
| } | ||
|
|
||
| // 1. | ||
| .CardBody > p { | ||
| position: relative; | ||
| z-index: 1; | ||
| } |
This file contains 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,5 @@ | ||
| @use '../../tools/links'; | ||
|
|
||
| .CardLink:first-of-type { | ||
| @include links.stretch(); | ||
| } |
This file contains 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,39 @@ | ||
| @use '../../tools/dictionaries'; | ||
| @use 'theme'; | ||
| @use 'tools'; | ||
|
|
||
| .CardMedia { | ||
| @include tools.add-spacing($spacing: theme.$gap-dense); | ||
|
|
||
| grid-area: header; | ||
| } | ||
|
|
||
| .CardMedia:not(.CardMedia--cap) { | ||
| @include tools.card-content-element(); | ||
| } | ||
|
|
||
| @include dictionaries.generate-sizes($class-name: 'CardMedia', $sizes: theme.$media-sizes); | ||
|
|
||
| .CardMedia__canvas { | ||
| aspect-ratio: var(--spirit-card-media-ratio); | ||
| overflow: hidden; | ||
| border-radius: theme.$border-radius; | ||
| } | ||
|
|
||
| .CardMedia__canvas > :is(img, picture > img, video) { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
| // stylelint-disable selector-max-class -- TODO reason | ||
| // TODO rewrite to CSS variables? | ||
| .Card--vertical.Card--boxed > .CardMedia--cap > .CardMedia__canvas { | ||
| border-bottom-right-radius: 0; | ||
| border-bottom-left-radius: 0; | ||
| } | ||
|
|
||
| .Card--horizontal.Card--boxed > .CardMedia--cap > .CardMedia__canvas { | ||
| border-top-right-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
| } |
This file contains 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,20 @@ | ||
| @use '../../tools/typography'; | ||
| @use 'theme'; | ||
|
|
||
| // TODO Separate subcomponents? | ||
| .Card__eyebrow { | ||
| @include typography.generate(theme.$eyebrow-typography); | ||
|
|
||
| margin-bottom: theme.$eyebrow-margin-bottom; | ||
| color: theme.$eyebrow-color; | ||
| } | ||
|
|
||
| .Card__heading { | ||
| @include typography.generate(theme.$heading-typography); | ||
|
|
||
| color: theme.$heading-color; | ||
|
|
||
| &:not(:last-child) { | ||
| margin-bottom: theme.$heading-margin-bottom; | ||
| } | ||
| } |
This file contains 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,46 @@ | ||
| @use '@tokens' as tokens; | ||
| @use '../../settings/dictionaries'; | ||
| @use '../../settings/transitions'; | ||
|
|
||
| $gap: tokens.$space-900; | ||
| $gap-dense: tokens.$space-700; | ||
|
|
||
| $padding: tokens.$space-900; | ||
|
|
||
| $typography: tokens.$body-medium-regular; | ||
|
|
||
| $border-width: tokens.$border-width-100; | ||
| $border-style: solid; | ||
| $border-color: tokens.$border-basic; | ||
| $border-radius: tokens.$radius-300; | ||
|
|
||
| $background-color: tokens.$background-primary; | ||
| $color: tokens.$text-secondary; | ||
| $box-shadow-hover: tokens.$shadow-100; | ||
|
|
||
| $transition-duration: transitions.$duration-100; | ||
| $transition-timing: transitions.$timing-eased-in-out; | ||
|
|
||
| $media-border-radius: tokens.$radius-300; | ||
| $media-sizes: ( | ||
| small: ( | ||
| ratio: 2, | ||
| ), | ||
| medium: ( | ||
| ratio: 1.5, | ||
| ), | ||
| large: ( | ||
| ratio: 1, | ||
| ), | ||
| ); | ||
|
|
||
| $eyebrow-typography: tokens.$body-small-semibold; | ||
| $eyebrow-color: tokens.$text-tertiary; | ||
| $eyebrow-margin-bottom: tokens.$space-300; | ||
|
|
||
| $heading-typography: tokens.$heading-small-semibold; | ||
| $heading-color: tokens.$text-primary; | ||
| $heading-margin-bottom: tokens.$space-500; | ||
|
|
||
| $actions-alignment-dictionary: dictionaries.$alignments-x; | ||
| $actions-gap: tokens.$space-700; |
This file contains 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,33 @@ | ||
| @use 'theme'; | ||
|
|
||
| @mixin card-content-element($direction: 'vertical') { | ||
| @if $direction == 'vertical' { | ||
| padding-inline: var(--card-padding); | ||
|
|
||
| &:first-child { | ||
| padding-top: var(--card-padding); | ||
| } | ||
|
|
||
| &:last-child { | ||
| padding-bottom: var(--card-padding); | ||
| } | ||
| } | ||
|
|
||
| // TODO other directions | ||
| } | ||
|
|
||
| @mixin add-spacing($direction: 'vertical', $spacing: theme.$gap) { | ||
| @if $direction == 'vertical' { | ||
| &:not(:last-child) { | ||
| margin-bottom: $spacing; | ||
| } | ||
| } @else if $direction == 'horizontal' { | ||
| &:not(:last-child) { | ||
| margin-inline-end: $spacing; | ||
| } | ||
| } @else { | ||
| &:not(:first-child) { | ||
| margin-inline-start: $spacing; | ||
| } | ||
| } | ||
| } |
This file contains 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,38 @@ | ||
| {{#> web/layout/default title="Card" parentPageName="Components" }} | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <h2 class="docs-Heading">Default</h2> | ||
| <div class="docs-Stack docs-Stack--start"> | ||
|
|
||
| <article class="Card Card--vertical Card--boxed"> | ||
| <div class="CardMedia CardMedia--medium CardMedia--cap"> | ||
| <div class="CardMedia__canvas"> | ||
| <!-- User content, no component classes --> | ||
| <img | ||
| src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?q=80&w=2728&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" | ||
| alt="" | ||
| /> | ||
| <!-- End user content --> | ||
| </div> | ||
| </div> | ||
| <div class="CardBody"> | ||
| <div class="Card__eyebrow">Eyebrow title</div> | ||
| <h4 class="Card__heading"> | ||
| <a href="#" class="CardLink"> | ||
| Card heading | ||
| </a> | ||
| </h4> | ||
| <!-- User content, no component classes --> | ||
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p> | ||
| <!-- End user content --> | ||
| </div> | ||
| <footer class="CardActions CardActions--alignmentXLeft"> | ||
| <a href="#" class="Button Button--medium Button--primary">Primary</a> | ||
| <a href="#" class="Button Button--medium Button--secondary">Secondary</a> | ||
| </footer> | ||
| </article> | ||
|
|
||
| </div> | ||
| </section> | ||
|
|
||
| {{/web/layout/default }} |
This file contains 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,6 @@ | ||
| @forward 'Card'; | ||
| @forward 'CardActions'; | ||
| @forward 'CardBody'; | ||
| @forward 'CardLink'; | ||
| @forward 'CardMedia'; | ||
| @forward 'CardTitle'; |
This file contains 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