forked from hashicorp-forge/hermes
-
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.
Doc::Thumbnail component (hashicorp-forge#75)
* Start of Doc::Thumbnail * Adjust folder appearance * Design tweaks * SVG tweaks * Revised design * Cleanup * Add tests * Obsolete product-badge tweak * Adjust border radius * Extend rather than replace shadows * Tweak small thumbnail * Post-merge style tweaks
- Loading branch information
Showing
17 changed files
with
325 additions
and
123 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,35 @@ | ||
| <svg | ||
| data-test-doc-thumbnail-folder-affordance | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox={{if @isLarge "0 0 97 145" "0 0 43 63"}} | ||
| class="folder-affordance" | ||
| > | ||
| <path | ||
| fill="url(#doc-thumbnail-folder-gradient)" | ||
| stroke="currentColor" | ||
| fill-rule="evenodd" | ||
| d={{if | ||
| @isLarge | ||
| "M6 0a6 6 0 0 0-6 6v41.04a6 6 0 0 0 2.659 4.983l8.29 5.558v80.729a6 6 0 0 0 6 6H97V0H6Z" | ||
| "M3 0a3 3 0 0 0-3 3v18.407a3 3 0 0 0 .91 2.152l2.18 2.117v33.746a3 3 0 0 0 3 3H43V0H3Z" | ||
| }} | ||
| clip-rule="evenodd" | ||
| ></path> | ||
| <defs> | ||
| <linearGradient | ||
| id="doc-thumbnail-folder-gradient" | ||
| x1={{if @isLarge "8.176" "4.746"}} | ||
| x2={{if @isLarge "8.176" "4.746"}} | ||
| y1="0" | ||
| y2={{if @isLarge "43.965" "19.018"}} | ||
| gradientUnits="userSpaceOnUse" | ||
| > | ||
| <stop stop-color="var(--token-color-palette-neutral-50)"></stop> | ||
| <stop | ||
| offset="1" | ||
| stop-color="var(--token-color-palette-neutral-100)" | ||
| ></stop> | ||
| </linearGradient> | ||
| </defs> | ||
| </svg> |
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,9 @@ | ||
| import Component from "@glimmer/component"; | ||
|
|
||
| interface DocFolderAffordanceSignature { | ||
| Args: { | ||
| isLarge?: boolean; | ||
| }; | ||
| } | ||
|
|
||
| export default class DocFolderAffordance extends Component<DocFolderAffordanceSignature> {} |
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
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
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
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,36 @@ | ||
| <div | ||
| data-test-doc-thumbnail | ||
| class="doc-thumbnail | ||
| {{if @isLarge 'large'}} | ||
| {{if this.isObsolete 'obsolete'}} | ||
| bg-color-palette-neutral-100 rounded" | ||
| ...attributes | ||
| > | ||
| <img src="/images/document.png" class="w-full h-auto" /> | ||
|
|
||
| <div class="w-full h-full absolute"> | ||
| {{#if this.isObsolete}} | ||
| <Doc::FolderAffordance @isLarge={{@isLarge}} /> | ||
| {{/if}} | ||
|
|
||
| {{#if (or this.isApproved this.isObsolete)}} | ||
| <div class="absolute w-full z-20"> | ||
| <FlightIcon | ||
| data-test-doc-status-icon | ||
| @name={{if this.isApproved "check-circle" "archive"}} | ||
| @size="24" | ||
| class="status-icon {{this.status}}" | ||
| /> | ||
| </div> | ||
| {{/if}} | ||
|
|
||
| {{#if this.productShortName}} | ||
| <div | ||
| data-test-doc-thumbnail-product-badge | ||
| class="product-badge {{this.productShortName}}" | ||
| > | ||
| <FlightIcon @size="16" @name={{this.productShortName}} /> | ||
| </div> | ||
| {{/if}} | ||
| </div> | ||
| </div> |
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 @@ | ||
| import Component from "@glimmer/component"; | ||
| import { dasherize } from "@ember/string"; | ||
| import getProductId from "hermes/utils/get-product-id"; | ||
|
|
||
| interface DocThumbnailComponentSignature { | ||
| Element: HTMLDivElement; | ||
| Args: { | ||
| isLarge?: boolean; | ||
| status?: string; | ||
| product?: string; | ||
| }; | ||
| } | ||
|
|
||
| export default class DocThumbnailComponent extends Component<DocThumbnailComponentSignature> { | ||
| protected get status(): string | null { | ||
| if (this.args.status) { | ||
| return dasherize(this.args.status); | ||
| } else { | ||
| return null; | ||
| } | ||
| } | ||
|
|
||
| protected get productShortName(): string | null { | ||
| if (this.args.product) { | ||
| return getProductId(this.args.product); | ||
| } else { | ||
| return null; | ||
| } | ||
| } | ||
|
|
||
| protected get isApproved(): boolean { | ||
| return this.status === "approved"; | ||
| } | ||
|
|
||
| protected get isObsolete(): boolean { | ||
| return this.status === "obsolete"; | ||
| } | ||
| } |
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
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
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
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,17 @@ | ||
| .doc-thumbnail { | ||
| .folder-affordance { | ||
| @apply w-auto absolute scale-x-[-1] -left-1; | ||
|
|
||
| // set border via currentColor | ||
| @apply text-color-border-primary; | ||
|
|
||
| // Allow strokes to show | ||
| @apply overflow-visible; | ||
|
|
||
| // Make it 100% tall plus 1px for each horizontal stroke | ||
| @apply h-[calc(100%+2px)]; | ||
|
|
||
| // Offset it by 1px so the horizontal strokes aren't visible | ||
| @apply -top-[1px]; | ||
| } | ||
| } |
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,72 @@ | ||
| .doc-thumbnail { | ||
| @apply relative w-12 shrink-0 flex overflow-hidden; | ||
|
|
||
| // Outer border / shadow | ||
| &::after { | ||
| content: ""; | ||
| @apply absolute z-50 pointer-events-none; | ||
| // Make the element 1px smaller than its container | ||
| // so its shadow picks up colors from the elements below it. | ||
| @apply top-px right-px bottom-px left-px; | ||
| @apply shadow-surface-low rounded-sm; | ||
| } | ||
|
|
||
| .status-icon { | ||
| @apply absolute opacity-75 mix-blend-multiply; | ||
| @apply w-9 h-9; | ||
|
|
||
| &.approved { | ||
| @apply fill-color-palette-green-200 -rotate-6; | ||
| @apply -right-[7px] top-[5px]; | ||
| } | ||
|
|
||
| &.obsolete { | ||
| @apply fill-color-palette-neutral-300 opacity-60; | ||
| @apply -left-[8px] top-[3px]; | ||
| } | ||
| } | ||
|
|
||
| .product-badge { | ||
| @apply bottom-0 left-0; | ||
| @apply w-[19px] h-[17px] rounded-bl rounded-tr; | ||
|
|
||
| .flight-icon { | ||
| @apply scale-75; | ||
| } | ||
| } | ||
|
|
||
| &.obsolete { | ||
| .product-badge { | ||
| @apply bg-gradient-to-br from-color-palette-neutral-300 to-color-palette-neutral-400 text-color-palette-neutral-50; | ||
| } | ||
| } | ||
|
|
||
| &.large { | ||
| // Match the width of the progress bars | ||
| @apply w-28; | ||
|
|
||
| &::after { | ||
| @apply shadow-surface-mid rounded; | ||
| } | ||
|
|
||
| .product-badge { | ||
| @apply w-[36px] h-[32px] rounded-bl rounded-tr; | ||
|
|
||
| .flight-icon { | ||
| @apply scale-100; | ||
| } | ||
| } | ||
|
|
||
| .status-icon { | ||
| @apply w-[84px] h-[84px] top-[8px]; | ||
|
|
||
| &.approved { | ||
| @apply -right-3.5; | ||
| } | ||
|
|
||
| &.obsolete { | ||
| @apply -left-5; | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.