-
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: add feature-card and card-section components (#3119)
* Add feature card component * Add feature card section * Add feature card section to index.html * Update card styles * change links slot to footer * Add neutralForegroundRestBehavior to feature-card * Remove unused css custom property * Add ::before separator element to cards * feat: add accent color and background color selection (#3123) * feat: add color pickers and preview * formatting * added dark / light mode * add prettier * ran prettier * saved last index for selecting background * addressed Rob's comments * ran prettier * addressed comments * styling fixes * fix file formatting * fix import * formatting issue * formatting * fix tabs to spaces * change selector from h5 to :first-child * Append Site prefix * make feature-card responsive * remove style property * fix import and closing tags * remove fast-anchor color * refactor card elements * modify class extension Co-authored-by: Michael Benson <[email protected]> Co-authored-by: Jeff Smith <[email protected]>
- Loading branch information
1 parent
b843689
commit 7ebd643
Showing
10 changed files
with
218 additions
and
3 deletions.
There are no files selected for viewing
27 changes: 27 additions & 0 deletions
27
sites/fast-website/src/app/components/card-section/card-section.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,27 @@ | ||
| import { css } from "@microsoft/fast-element"; | ||
| import { display } from "@microsoft/fast-components"; | ||
|
|
||
| export const CardSectionStyles = css` | ||
| :host { | ||
| --flow: column; | ||
| } | ||
| @media screen and (max-width: 1000px) { | ||
| :host { | ||
| --flow: row; | ||
| } | ||
| } | ||
| ${display("grid")} :host { | ||
| grid-template-rows: repeat(4, min-content); | ||
| grid-auto-flow: var(--flow); | ||
| } | ||
| :host(:hover) ::slotted(site-feature-card) { | ||
| filter: blur(1px); | ||
| } | ||
| :host ::slotted(site-feature-card:hover) { | ||
| filter: blur(0); | ||
| } | ||
| `; |
4 changes: 4 additions & 0 deletions
4
sites/fast-website/src/app/components/card-section/card-section.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,4 @@ | ||
| import { html } from "@microsoft/fast-element"; | ||
| import { CardSection } from "./card-section"; | ||
|
|
||
| export const CardSectionTemplate = html<CardSection>`<slot></slot>`; |
3 changes: 3 additions & 0 deletions
3
sites/fast-website/src/app/components/card-section/card-section.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,3 @@ | ||
| import { FASTElement } from "@microsoft/fast-element"; | ||
|
|
||
| export class CardSection extends FASTElement {} |
14 changes: 14 additions & 0 deletions
14
sites/fast-website/src/app/components/card-section/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 { CardSectionTemplate as template } from "./card-section.template"; | ||
| import { CardSectionStyles as styles } from "./card-section.styles"; | ||
| import { CardSection } from "./card-section"; | ||
|
|
||
| @customElement({ | ||
| name: "site-card-section", | ||
| template, | ||
| styles, | ||
| }) | ||
| export class SiteCardSection extends CardSection {} | ||
| export * from "./card-section.template"; | ||
| export * from "./card-section.styles"; | ||
| export * from "./card-section"; |
77 changes: 77 additions & 0 deletions
77
sites/fast-website/src/app/components/feature-card/feature-card.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,77 @@ | ||
| import { css } from "@microsoft/fast-element"; | ||
| import { display, neutralForegroundRestBehavior } from "@microsoft/fast-components"; | ||
|
|
||
| export const FeatureCardStyles = css` | ||
| ${display("grid")} :host { | ||
| contain: layout; | ||
| grid-template-columns: repeat(3, minmax(150px, 1fr)); | ||
| grid-template-areas: "header main main"; | ||
| color: inherit; | ||
| box-sizing: border-box; | ||
| padding: 20px; | ||
| box-shadow: unset; | ||
| } | ||
| :host::before { | ||
| content: ""; | ||
| display: block; | ||
| background-color: currentColor; | ||
| position: fixed; | ||
| height: 1px; | ||
| width: 93%; | ||
| left: 20px; | ||
| top: 0; | ||
| } | ||
| :host(:hover) ::slotted(fast-anchor) { | ||
| opacity: 1; | ||
| } | ||
| :host(:hover)::before { | ||
| opacity: 0; | ||
| } | ||
| :host(:hover) ::slotted(:first-child) { | ||
| color: var(--accent-fill-rest); | ||
| } | ||
| @media screen and (max-width: 540px) { | ||
| ${display("grid")} :host { | ||
| grid-template-columns: repeat(3, minmax(50px, 1fr)); | ||
| grid-template-areas: | ||
| "header header header" | ||
| "main main main"; | ||
| } | ||
| } | ||
| .card_heading { | ||
| grid-area: header; | ||
| padding-bottom: 10px; | ||
| } | ||
| .card_body { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| grid-area: main; | ||
| } | ||
| ::slotted(h4) { | ||
| font-size: 20px; | ||
| margin: 0; | ||
| } | ||
| ::slotted(:first-child) { | ||
| font-weight: bold; | ||
| margin: 0 0 10px 0; | ||
| } | ||
| ::slotted(p) { | ||
| margin: 0; | ||
| } | ||
| ::slotted(fast-anchor) { | ||
| margin-right: 20px; | ||
| opacity: 0; | ||
| } | ||
| `.withBehaviors(neutralForegroundRestBehavior); |
14 changes: 14 additions & 0 deletions
14
sites/fast-website/src/app/components/feature-card/feature-card.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,14 @@ | ||
| import { html } from "@microsoft/fast-element"; | ||
| import { FeatureCard } from "./feature-card"; | ||
|
|
||
| export const FeatureCardTemplate = html<FeatureCard>` | ||
| <div class="card_heading"> | ||
| <slot></slot> | ||
| </div> | ||
| <div class="card_body"> | ||
| <slot name="body"></slot> | ||
| <div> | ||
| <slot name="footer"></slot> | ||
| </div> | ||
| </div> | ||
| `; |
3 changes: 3 additions & 0 deletions
3
sites/fast-website/src/app/components/feature-card/feature-card.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,3 @@ | ||
| import { FASTCard as Card } from "@microsoft/fast-components"; | ||
|
|
||
| export class FeatureCard extends Card {} |
14 changes: 14 additions & 0 deletions
14
sites/fast-website/src/app/components/feature-card/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 { FeatureCardTemplate as template } from "./feature-card.template"; | ||
| import { FeatureCardStyles as styles } from "./feature-card.styles"; | ||
| import { FeatureCard } from "./feature-card"; | ||
|
|
||
| @customElement({ | ||
| name: "site-feature-card", | ||
| template, | ||
| styles, | ||
| }) | ||
| export class SiteFeatureCard extends FeatureCard {} | ||
| export * from "./feature-card.template"; | ||
| export * from "./feature-card.styles"; | ||
| export * from "./feature-card"; |
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