-
Notifications
You must be signed in to change notification settings - Fork 600
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: create content-placement component for marketing site (#3105)
* add hover-card component * add components to index.html, update component index exports to include hover-card, update main styles so that cards wrap * updated style to be more layout centric * rename component and update spacing in styles * change component name to content-placement * made style updates so all cards are the same height and body stretches * replace FAST prefix with site * update divider attribute to boolean mode and remove true for divider in public index * updated styles to work woth changes in feature and changes icon styling so there is no unneeded space when slot is not used * update color for links to match figma using design system
- Loading branch information
1 parent
b5fd60f
commit 1ab11e8
Showing
7 changed files
with
191 additions
and
4 deletions.
There are no files selected for viewing
57 changes: 57 additions & 0 deletions
57
sites/fast-website/src/app/components/content-placement/content-placement.styles.ts
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,57 @@ | ||
| import { css } from "@microsoft/fast-element"; | ||
| import { display } from "@microsoft/fast-components"; | ||
|
|
||
| export const ContentPlacementStyles = css` | ||
| ${display("block")} :host { | ||
| contain: content; | ||
| font-family: var(--body-font); | ||
| box-sizing: border-box; | ||
| } | ||
| :host([hidden]) { | ||
| display: none; | ||
| } | ||
| fast-card { | ||
| background: transparent; | ||
| padding: 0 calc(var(--design-unit) * 5px) calc(var(--design-unit) * 3px); | ||
| text-align: left; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| fast-card ::slotted([slot="body"]) { | ||
| flex: 1 1 auto; | ||
| } | ||
| fast-card:hover .contentPlacement_footer__hoverVisible { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
| .contentPlacement_footer__hoverVisible { | ||
| visibility: hidden; | ||
| } | ||
| fast-card:hover .contentPlacement_footer__hoverVisible { | ||
| visibility: visible; | ||
| } | ||
| fast-card:hover .contentPlacement_divider { | ||
| visibility: visible; | ||
| } | ||
| fast-card:hover .contentPlacement_icon { | ||
| visibility: visible; | ||
| } | ||
| .contentPlacement_divider { | ||
| visibility: hidden; | ||
| } | ||
| fast-card .contentPlacement_icon { | ||
| visibility: hidden; | ||
| margin-top: calc(var(--design-unit) * 4px); | ||
| } | ||
| `; |
28 changes: 28 additions & 0 deletions
28
sites/fast-website/src/app/components/content-placement/content-placement.template.ts
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,28 @@ | ||
| import { html, when } from "@microsoft/fast-element"; | ||
| import { ContentPlacement } from "./content-placement"; | ||
|
|
||
| export const ContentPlacementTemplate = html<ContentPlacement>`<fast-card> | ||
| <div | ||
| class=${x => | ||
| x.divider | ||
| ? "" | ||
| : "contentPlacement_icon"} | ||
| > | ||
| <slot name="icon"></slot> | ||
| </div> | ||
| <slot></slot> | ||
| <slot name="body"></slot> | ||
| ${when( | ||
| x => x.divider, | ||
| html`<fast-divider class="contentPlacement_divider"></fast-divider>` | ||
| )} | ||
| <div | ||
| class=${x => | ||
| x.divider | ||
| ? "contentPlacement_footer__hoverVisible" | ||
| : "contentPlacement_footer__alwaysVisible"} | ||
| > | ||
| <slot name="action"></slot> | ||
| <slot name="compatibility"></slot> | ||
| </div> | ||
| </fast-card> `; |
5 changes: 5 additions & 0 deletions
5
sites/fast-website/src/app/components/content-placement/content-placement.ts
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 @@ | ||
| import { FASTElement, attr } from "@microsoft/fast-element"; | ||
|
|
||
| export class ContentPlacement extends FASTElement { | ||
| @attr({ mode: "boolean" }) divider: boolean = false; | ||
| } |
14 changes: 14 additions & 0 deletions
14
sites/fast-website/src/app/components/content-placement/index.ts
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,14 @@ | ||
| import { customElement } from "@microsoft/fast-element"; | ||
| import { ContentPlacement } from "./content-placement"; | ||
| import { ContentPlacementTemplate as template } from "./content-placement.template"; | ||
| import { ContentPlacementStyles as styles } from "./content-placement.styles"; | ||
|
|
||
| @customElement({ | ||
| name: "site-content-placement", | ||
| template, | ||
| styles, | ||
| }) | ||
| export class SiteContentPlacement extends ContentPlacement {} | ||
| export * from "./content-placement.template"; | ||
| export * from "./content-placement.styles"; | ||
| export * from "./content-placement"; |
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