From e569794f0e2f11e9db05e531ba47ddeaa6745f8a Mon Sep 17 00:00:00 2001 From: SamanthaAO Date: Wed, 13 May 2020 13:09:01 -0700 Subject: [PATCH] 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 --- .../content-placement.styles.ts | 57 +++++++++++++++++ .../content-placement.template.ts | 28 +++++++++ .../content-placement/content-placement.ts | 5 ++ .../app/components/content-placement/index.ts | 14 +++++ .../fast-website/src/app/components/index.ts | 1 + sites/fast-website/src/app/css/style.css | 27 +++++++- sites/fast-website/src/public/index.html | 63 ++++++++++++++++++- 7 files changed, 191 insertions(+), 4 deletions(-) create mode 100644 sites/fast-website/src/app/components/content-placement/content-placement.styles.ts create mode 100644 sites/fast-website/src/app/components/content-placement/content-placement.template.ts create mode 100644 sites/fast-website/src/app/components/content-placement/content-placement.ts create mode 100644 sites/fast-website/src/app/components/content-placement/index.ts diff --git a/sites/fast-website/src/app/components/content-placement/content-placement.styles.ts b/sites/fast-website/src/app/components/content-placement/content-placement.styles.ts new file mode 100644 index 00000000000..0d02fbb55ff --- /dev/null +++ b/sites/fast-website/src/app/components/content-placement/content-placement.styles.ts @@ -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); + } +`; diff --git a/sites/fast-website/src/app/components/content-placement/content-placement.template.ts b/sites/fast-website/src/app/components/content-placement/content-placement.template.ts new file mode 100644 index 00000000000..f3b7bd5323d --- /dev/null +++ b/sites/fast-website/src/app/components/content-placement/content-placement.template.ts @@ -0,0 +1,28 @@ +import { html, when } from "@microsoft/fast-element"; +import { ContentPlacement } from "./content-placement"; + +export const ContentPlacementTemplate = html` +
+ x.divider + ? "" + : "contentPlacement_icon"} + > + +
+ + + ${when( + x => x.divider, + html`` + )} +
+ x.divider + ? "contentPlacement_footer__hoverVisible" + : "contentPlacement_footer__alwaysVisible"} + > + + +
+ `; diff --git a/sites/fast-website/src/app/components/content-placement/content-placement.ts b/sites/fast-website/src/app/components/content-placement/content-placement.ts new file mode 100644 index 00000000000..cb1307e405d --- /dev/null +++ b/sites/fast-website/src/app/components/content-placement/content-placement.ts @@ -0,0 +1,5 @@ +import { FASTElement, attr } from "@microsoft/fast-element"; + +export class ContentPlacement extends FASTElement { + @attr({ mode: "boolean" }) divider: boolean = false; +} diff --git a/sites/fast-website/src/app/components/content-placement/index.ts b/sites/fast-website/src/app/components/content-placement/index.ts new file mode 100644 index 00000000000..fb515e37973 --- /dev/null +++ b/sites/fast-website/src/app/components/content-placement/index.ts @@ -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"; diff --git a/sites/fast-website/src/app/components/index.ts b/sites/fast-website/src/app/components/index.ts index 7f0ba1ebe1e..ac489e8b3de 100644 --- a/sites/fast-website/src/app/components/index.ts +++ b/sites/fast-website/src/app/components/index.ts @@ -2,3 +2,4 @@ export { WebsiteDesignSystemProvider } from "./design-system-provider"; export { SiteSectionHeader } from "./section-header"; export { FastFrame } from "./fast-frame"; export { SiteNavigation } from "./navigation"; +export { SiteContentPlacement } from "./content-placement"; diff --git a/sites/fast-website/src/app/css/style.css b/sites/fast-website/src/app/css/style.css index 06d390639d7..70bbbc1e06b 100644 --- a/sites/fast-website/src/app/css/style.css +++ b/sites/fast-website/src/app/css/style.css @@ -44,10 +44,33 @@ body { } .section-component { + --card-width: 410px; + color: var(--neutral-foreground-rest); display: flex; - align-items: center; + flex-wrap: wrap; justify-content: center; - height: 600px; +} + +/* This creates the blur and background color changes on hover */ +/* start */ +.section-component:hover site-content-placement{ + filter: blur(2px); +} + +.section-component:hover site-content-placement:hover{ + /* background: linear-gradient(349.8deg, rgba(143, 68, 95, 0.3) 20.91%, rgba(148, 81, 73, 0.3) 99.75%); */ + box-shadow: 0px 10px 44px rgba(0, 0, 0, 0.1); + border-radius: var(--design-unit); + filter: blur(0); +} +/* end */ + +.section-anchor { + color: var(--accent-fill-rest); +} + +site-content-placement:hover .section-anchor-hover{ + color: var(--accent-fill-rest); } .section-badge { diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html index 391c5f82996..6fe6ad1f06d 100644 --- a/sites/fast-website/src/public/index.html +++ b/sites/fast-website/src/public/index.html @@ -73,7 +73,47 @@
- Framework components + +

Angular 8.2.14

+

Angular's default binding syntax will always set properties on an element. This works well for rich data, like objects and arrays, and also works well for primitive values so long as the Custom Element author has mapped any exposed attributes to corresponding properties.

+ Smiley face No issues! + Learn More + + + +

DIO

+

DIO uses a runtime heuristic to determine if it should pass data to Custom Elements as either properties or attributes. If a property is already defined on the element instance, DIO will use properties, otherwise it will fallback to attributes

+ Smiley face No issues! + Learn More + + + +

hyperHTML 2.32.2

+

hyperHTML will pass data to an element as properties, as long as the property is defined on the element's prototype. Otherwise it will fallback to passing data as attributes.

+ Smiley face No issues! + Learn More + + + +

Dojo 6.0.4

+

Dojo will pass data as attributes only when the data is a type of string, otherwise it is set as a property.

+ Smiley face No issues! + Learn More + + + +

hybrids 4.1.7

+

Hybrids will pass data to an element as properties, as long as the property is defined on the element's prototype. Otherwise it will fallback to passing data as attributes.

+ Smiley face No issues! + Learn More + + + +

AngularJS (1.x) 1.7.9

+

AngularJS can declaratively pass data to attributes using ng-attr, or to properties using ng-prop.

+ Smiley face No issues! + Learn More +
@@ -108,7 +148,26 @@
- Social community components + +
Discord
+

Discord

+

Join our active community on Discord. Follow the latest updates and contributions, ask questions, give feedback, or keep up on our reading list.

+ Join the Discord Chat + + + +
Twitter
+

Twitter

+

Follow along as we share out the latest happenings on Twitter. You will find important updates, announcements, and sneak peeks.

+ Follow us on Twitter + + + +
Github
+

Github

+

Explore the FAST repository on Github and try out our components, utilities, and tools. Or, mix-and-match with your own solutions.

+ Get Started on Github +