From e6446e4d58d38177b3e893ffeb1229b8ff29d493 Mon Sep 17 00:00:00 2001 From: Kham Udom <37851220+khamudom@users.noreply.github.com> Date: Thu, 7 May 2020 18:54:00 -0700 Subject: [PATCH] feat: create section-header component for marketing site (#3070) * adding section header component * add pseudo class part * rename attribute * changed short attribute to a

tag * removed attributes to use slots * Update hero and page section to use section-header component. Removed global background and color style * changed subheading to badge * swap default with badge slot. update component implementation on page --- .../fast-website/src/app/components/index.ts | 1 + .../app/components/section-header/index.ts | 14 +++++++++ .../section-header/section-header.styles.ts | 12 +++++++ .../section-header/section-header.template.ts | 11 +++++++ .../section-header/section-header.ts | 3 ++ sites/fast-website/src/public/index.html | 31 ++++++++++++++++--- sites/fast-website/src/public/style.css | 21 +++++++++++-- 7 files changed, 85 insertions(+), 8 deletions(-) create mode 100755 sites/fast-website/src/app/components/section-header/index.ts create mode 100755 sites/fast-website/src/app/components/section-header/section-header.styles.ts create mode 100755 sites/fast-website/src/app/components/section-header/section-header.template.ts create mode 100755 sites/fast-website/src/app/components/section-header/section-header.ts diff --git a/sites/fast-website/src/app/components/index.ts b/sites/fast-website/src/app/components/index.ts index 74e344476e9..fdb62d97d2a 100644 --- a/sites/fast-website/src/app/components/index.ts +++ b/sites/fast-website/src/app/components/index.ts @@ -1 +1,2 @@ export { GradientPicker } from "./gradient-picker"; +export { FASTSectionHeader } from "./section-header"; diff --git a/sites/fast-website/src/app/components/section-header/index.ts b/sites/fast-website/src/app/components/section-header/index.ts new file mode 100755 index 00000000000..cb6356397a8 --- /dev/null +++ b/sites/fast-website/src/app/components/section-header/index.ts @@ -0,0 +1,14 @@ +import { customElement } from "@microsoft/fast-element"; +import { SectionHeader } from "./section-header"; +import { SectionHeaderTemplate as template } from "./section-header.template"; +import { SectionHeaderStyles as styles } from "./section-header.styles"; + +@customElement({ + name: "fast-section-header", + template, + styles, +}) +export class FASTSectionHeader extends SectionHeader {} +export * from "./section-header.template"; +export * from "./section-header.styles"; +export * from "./section-header"; diff --git a/sites/fast-website/src/app/components/section-header/section-header.styles.ts b/sites/fast-website/src/app/components/section-header/section-header.styles.ts new file mode 100755 index 00000000000..17f67780580 --- /dev/null +++ b/sites/fast-website/src/app/components/section-header/section-header.styles.ts @@ -0,0 +1,12 @@ +import { css } from "@microsoft/fast-element"; +import { display } from "@microsoft/fast-components"; + +export const SectionHeaderStyles = css` + ${display("flex")} :host { + flex-direction: column; + font-family: var(--body-font); + color: var(--neutral-foreground-rest); + box-sizing: border-box; + text-align: center; + } +`; diff --git a/sites/fast-website/src/app/components/section-header/section-header.template.ts b/sites/fast-website/src/app/components/section-header/section-header.template.ts new file mode 100755 index 00000000000..89c56e26126 --- /dev/null +++ b/sites/fast-website/src/app/components/section-header/section-header.template.ts @@ -0,0 +1,11 @@ +import { html } from "@microsoft/fast-element"; +import { SectionHeader } from "./section-header"; + +export const SectionHeaderTemplate = html` + +`; diff --git a/sites/fast-website/src/app/components/section-header/section-header.ts b/sites/fast-website/src/app/components/section-header/section-header.ts new file mode 100755 index 00000000000..3db3df1e0dc --- /dev/null +++ b/sites/fast-website/src/app/components/section-header/section-header.ts @@ -0,0 +1,3 @@ +import { FASTElement } from "@microsoft/fast-element"; + +export class SectionHeader extends FASTElement {} diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html index 59d339518ce..e483206d609 100644 --- a/sites/fast-website/src/public/index.html +++ b/sites/fast-website/src/public/index.html @@ -25,14 +25,24 @@

- Hero section header + + ADAPTIVE UI SYSTEM, UTILITIES, & TOOLS +

The adaptive interface system for modern web experiences

+

Interfaces bult with FAST adapt to your design system and can be used with any modern UI Framework by leveraging industry standard Web Components.

+ Get start +
- Page section header + + FLEXIBLE AND ADAPTABLE +

One component, many faces

+

Using an unopinionated architecture and Adaptive Styling, one suite of components can blend into any environment.

+ Explore components +
@@ -48,7 +58,11 @@
- Page section header + + FULLY INTEGRATED +

Works with existing frameworks

+ Learn more +
@@ -62,7 +76,11 @@
- Page section header + + A COMPREHENSIVE TOOLKIT +

Feature and Utilities

+ Read documentation +
@@ -76,7 +94,10 @@
- Page section header + + LEARN, MODIFY AND FOLLOW +

Join the community

+
diff --git a/sites/fast-website/src/public/style.css b/sites/fast-website/src/public/style.css index 686ce0bcc66..272878184fa 100644 --- a/sites/fast-website/src/public/style.css +++ b/sites/fast-website/src/public/style.css @@ -1,8 +1,6 @@ body { margin: 0; padding: 0; - background: #242424; - color: #ddd; } .wrapper { @@ -26,7 +24,8 @@ body { display: flex; align-items: center; justify-content: center; - height: 300px; + min-height: 300px; + margin: 20px 0; } .section-component { @@ -50,4 +49,20 @@ body { .footer-copyright-group { display: flex; +} + +.section-badge { + font-weight: bold; +} + +.section-heading-hero { + font-size: 60px; + line-height: 72px; + margin: 0; +} + +.section-heading { + font-size: 46px; + line-height: 56px; + margin: 0; } \ No newline at end of file