Skip to content

Commit

Permalink
fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup!…
Browse files Browse the repository at this point in the history 
… fixup! fixup! fixup! fixup! fixup! fixup! fixup! Feat(web): Introduce `Card` component #DS-1397
  • Loading branch information
@adamkudrna
adamkudrna committed Dec 6, 2024
1 parent 0bd69d6 commit 943d670
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 113 deletions.
13 changes: 13 additions & 0 deletions apps/demo/partials/web/assets/spiritCoverOnBrand.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<svg viewBox="0 0 900 600" preserveAspectRatio="xMidYMid slice" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="900" height="600" fill="var(--spirit-color-background-tertiary)" />
<g fill="var(--spirit-color-background-primary)">
<path d="M291.898 299.239L272.318 265.518C272.934 262.249 274.04 259.267 275.643 256.576L275.646 256.572L275.648 256.568C278.346 252.195 282.114 248.756 286.933 246.253C291.754 243.658 297.302 242.23 303.562 241.954L303.576 241.953H303.589C311.723 241.953 318.352 242.912 323.45 244.858C328.579 246.781 333.168 249.075 337.212 251.74L337.665 252.039L329.637 268.241L329.076 267.933C325.286 265.858 321.408 264.145 317.441 262.792L317.437 262.791C313.579 261.445 309.965 260.779 306.59 260.779C302.391 260.779 299.166 261.629 296.85 263.259C294.584 264.853 293.427 267.241 293.427 270.532C293.427 272.715 294.259 274.702 295.976 276.509C297.83 278.272 300.182 279.872 303.042 281.303C306.024 282.748 309.097 284.059 312.261 285.234L312.263 285.234C315.197 286.335 318.085 287.664 320.926 289.221C323.888 290.704 326.529 292.604 328.846 294.92C331.188 297.169 333.05 300.017 334.441 303.446C335.844 306.816 336.533 310.948 336.533 315.82C336.533 321.025 335.184 325.864 332.489 330.324C329.787 334.796 325.835 338.415 320.658 341.188L320.65 341.192C319.538 341.768 318.372 342.282 317.153 342.734L307.124 325.462C309.289 324.755 311.047 323.67 312.419 322.219L312.425 322.212L312.431 322.206C313.925 320.712 314.706 318.611 314.706 315.82C314.706 313.973 314.081 312.291 312.802 310.757L312.796 310.749L312.789 310.741C311.574 309.178 309.864 307.724 307.638 306.389L307.634 306.386L307.629 306.383C305.483 305.042 303.11 303.877 300.507 302.89L300.505 302.889C297.709 301.82 294.839 300.603 291.898 299.239Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M398.234 309.287L398.239 309.285C402.858 307.16 406.533 304.377 409.239 300.925C412.016 297.5 414.009 293.701 415.214 289.531C416.502 285.295 417.149 281.099 417.149 276.943C417.149 269.942 415.628 263.873 412.561 258.76C409.494 253.556 405.034 249.566 399.205 246.789C393.371 243.919 386.271 242.499 377.93 242.499H346.896V344.126H367.905V312.342H381.477C388.083 312.342 393.677 311.333 398.234 309.287ZM392.983 286.678L392.979 286.683C391.954 288.136 390.489 289.394 388.558 290.449C386.669 291.391 384.272 291.879 381.341 291.879H367.905V262.825H381.477C384.873 262.825 387.478 263.408 389.349 264.513L389.354 264.516L389.359 264.519C391.375 265.658 392.832 267.042 393.768 268.657C394.735 270.329 395.343 271.985 395.602 273.629L395.605 273.648L395.609 273.666C395.969 275.284 396.14 276.553 396.14 277.489C396.14 278.679 395.884 280.114 395.35 281.805L395.346 281.82L395.342 281.834C394.909 283.48 394.127 285.094 392.983 286.678Z" />
<path d="M448.076 242.499H427.068V344.126H448.076V242.499Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M486.604 312.206H498.831L520.035 344.126H544.541L520.92 307.266C523.922 305.46 526.444 303.304 528.478 300.796C531.347 297.371 533.388 293.57 534.594 289.397C535.884 285.25 536.53 281.098 536.53 276.943C536.53 271.691 535.654 266.97 533.89 262.791C532.127 258.525 529.527 254.902 526.093 251.93C522.746 248.864 518.575 246.552 513.597 244.984C508.613 243.324 502.954 242.499 496.629 242.499H465.595V344.126H486.604V312.206ZM511.692 286.801L511.685 286.81L511.678 286.82C510.655 288.269 509.194 289.481 507.267 290.444C505.376 291.389 502.976 291.879 500.039 291.879H486.604V262.825H500.176C503.571 262.825 506.177 263.408 508.048 264.513L508.053 264.516L508.058 264.519C510.074 265.658 511.531 267.042 512.467 268.657C513.434 270.329 514.042 271.985 514.301 273.629L514.304 273.648L514.308 273.666C514.667 275.28 514.839 276.596 514.839 277.625C514.839 279.004 514.581 280.532 514.049 282.215L514.046 282.225L514.043 282.235C513.612 283.786 512.833 285.308 511.692 286.801Z" />
<path d="M572.955 242.499H551.946V344.126H572.955V242.499Z" />
<path d="M652.541 242.499H583.653V262.825H607.116V344.126L628.124 344.042V262.825H652.541V242.499Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M248.574 225.332C248.891 225.148 249.297 225.257 249.48 225.574L334.841 373.424C335.024 373.741 334.916 374.147 334.599 374.33C334.281 374.513 333.876 374.405 333.693 374.087L248.332 226.237C248.148 225.92 248.257 225.515 248.574 225.332Z" />
<path d="M267.841 323.168H259.161V334.328H248L248 343.008H259.161V354.169H267.841V343.008H279.001V334.328L267.841 334.328V323.168Z" />
</g>
</svg>
2 changes: 1 addition & 1 deletion packages/web/src/scss/components/Card/_CardMedia.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
}

// 1.
.CardMedia__canvas :where(img, video) {
.CardMedia__canvas :where(img, svg, video) {
display: block; // 2.
width: 100%;
height: 100%;
Expand Down
140 changes: 28 additions & 112 deletions packages/web/src/scss/components/Card/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,7 @@ <h2 class="docs-Heading">General Options</h2>
<div class="CardMedia CardMedia--auto">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand All @@ -35,10 +32,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--auto">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand All @@ -63,10 +57,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--auto CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -102,10 +93,7 @@ <h2 class="docs-Heading">Content Options</h2>
<div class="CardMedia CardMedia--auto">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand All @@ -130,10 +118,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--auto">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -270,10 +255,7 @@ <h2 class="docs-Heading">Logo</h2>
<div class="CardMedia CardMedia--auto">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -303,10 +285,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--auto">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -336,10 +315,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--auto CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -380,10 +356,7 @@ <h2 class="docs-Heading">Horizontal Card Layout</h2>
<div class="CardMedia CardMedia--medium CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand All @@ -408,10 +381,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--medium CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -494,10 +464,7 @@ <h2 class="docs-Heading">Reversed Horizontal Card Layout</h2>
<div class="CardMedia CardMedia--medium CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand All @@ -522,10 +489,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--medium CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -609,10 +573,7 @@ <h2 class="docs-Heading">Media Options</h2>
<div class="CardMedia CardMedia--auto">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -640,10 +601,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--auto CardMedia--expanded CardMedia--filledHeight">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -671,10 +629,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--medium">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -702,10 +657,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--medium CardMedia--filledHeight">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -733,10 +685,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--medium CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -773,10 +722,7 @@ <h2 class="docs-Heading">Media Sizes</h2>
<div class="CardMedia CardMedia--small CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand All @@ -801,10 +747,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--medium CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand All @@ -829,10 +772,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--large CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand All @@ -857,10 +797,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--auto CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -889,10 +826,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--small CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand All @@ -917,10 +851,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--medium CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand All @@ -945,10 +876,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--large CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand All @@ -973,10 +901,7 @@ <h4 class="CardTitle CardTitle--heading">
<div class="CardMedia CardMedia--auto CardMedia--expanded">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
<!-- End user content -->
</div>
</div>
Expand Down Expand Up @@ -1012,10 +937,7 @@ <h2 class="docs-Heading">Title Options</h2>
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<a href="#" aria-hidden="true">
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
</a>
<!-- End user content -->
</div>
Expand All @@ -1034,10 +956,7 @@ <h4 class="CardTitle">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<a href="#" aria-hidden="true">
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
</a>
<!-- End user content -->
</div>
Expand All @@ -1056,10 +975,7 @@ <h4 class="CardTitle">
<div class="CardMedia__canvas">
<!-- User content, no component classes -->
<a href="#" aria-hidden="true">
<img
src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?fm=jpg&q=90&w=1920&ixlib=rb-4.0.3"
alt=""
/>
{{> web/assets/spiritCoverOnBrand }}
</a>
<!-- End user content -->
</div>
Expand Down

0 comments on commit 943d670

Please sign in to comment.