Skip to content

Commit

Permalink
feat: adds preview component (#3097)
Browse files Browse the repository at this point in the history 
* feat: adds preview component

* removed style override
  • Loading branch information
@eljefe223 @chrisdholt
eljefe223 authored and chrisdholt committed May 12, 2020
1 parent e58eb03 commit 8dc8c69
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 5 deletions.
36 changes: 36 additions & 0 deletions sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { css } from "@microsoft/fast-element";
import { display } from "@microsoft/fast-components";

export const FastFrameStyles = css`
${display("block")} :host {
flex-direction: column;
font-family: var(--body-font);
color: var(--neutral-foreground-rest);
box-sizing: border-box;
text-align: center;
}
.icon {
pointer-events: none;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
height: 500px;
}
.content {
display: flex;
flex-direction: column;
width: 100%;
align-items: start;
}
.preview {
display: flex;
background: #c8c8c8;
align-items: center;
justify-content: center;
}
`;
94 changes: 94 additions & 0 deletions sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { html } from "@microsoft/fast-element";
import { FastFrame } from "./fast-frame";

export const FastFrameTemplate = html<FastFrame>`
<template>
<div class="wrapper">
<fast-tabs orientation="vertical" id="myTab" activeId="TabTwo">
<fast-tab id="TabOne" title="Mode">
<svg
class="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM10 18.5V1.5C14.6944 1.5 18.5 5.30558 18.5 10C18.5 14.6944 14.6944 18.5 10 18.5Z"
fill="#C8C8C8"
/>
</svg>
</fast-tab>
<fast-tab id="TabTwo" title="Color">
<svg
class="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.77405 4.01413C4.72422 -0.0894092 10.8318 -1.28348 15.1796 1.54073C19.4728 4.32946 21.0517 9.69108 19.2933 14.7217C17.633 19.4719 13.2582 21.3539 10.1051 18.9644C8.92397 18.0694 8.46609 16.9473 8.24477 15.1248L8.13906 14.0894L8.0935 13.6729C7.9705 12.694 7.78149 12.2555 7.38699 12.0258C6.84973 11.7129 6.49199 11.7056 5.78653 11.9912L5.43433 12.1438L5.25504 12.2255C4.2381 12.6869 3.56161 12.849 2.70595 12.6617L2.50508 12.6123L2.34104 12.5634C-0.456623 11.6577 -0.871 7.69326 1.77405 4.01413ZM2.76134 11.0529L2.88463 11.0911L3.01899 11.1234C3.45944 11.2146 3.83586 11.1386 4.46049 10.87L5.06454 10.6004C6.27043 10.0838 7.05597 10.0333 8.11956 10.6527C9.04001 11.1887 9.39876 12.0125 9.58174 13.44L9.6351 13.9211L9.68948 14.4784L9.73676 14.9211C9.90937 16.3477 10.2232 17.1119 10.9886 17.692C13.271 19.4216 16.5403 18.0152 17.8799 14.1825C19.4009 9.83105 18.0546 5.25933 14.3851 2.87572C10.6995 0.481614 5.45895 1.50616 2.97716 4.9582C0.895903 7.85312 1.15117 10.4912 2.76134 11.0529ZM14.0208 8.96284C13.8416 8.264 14.2385 7.54568 14.9074 7.35843C15.5764 7.17118 16.2639 7.5859 16.4432 8.28474C16.6224 8.98357 16.2254 9.70189 15.5565 9.88914C14.8876 10.0764 14.2 9.66168 14.0208 8.96284ZM14.5169 12.6189C14.3377 11.9201 14.7347 11.2018 15.4036 11.0145C16.0725 10.8273 16.76 11.242 16.9393 11.9408C17.1185 12.6397 16.7216 13.358 16.0526 13.5452C15.3837 13.7325 14.6962 13.3178 14.5169 12.6189ZM12.0361 5.81604C11.8569 5.11721 12.2539 4.39889 12.9228 4.21163C13.5917 4.02438 14.2792 4.4391 14.4585 5.13794C14.6377 5.83678 14.2407 6.5551 13.5718 6.74235C12.9029 6.9296 12.2154 6.51488 12.0361 5.81604ZM12.0076 15.2463C11.8283 14.5475 12.2253 13.8291 12.8942 13.6419C13.5631 13.4546 14.2507 13.8694 14.4299 14.5682C14.6091 15.267 14.2122 15.9854 13.5433 16.1726C12.8744 16.3599 12.1868 15.9451 12.0076 15.2463ZM8.49974 4.79782C8.32051 4.09898 8.71747 3.38066 9.38638 3.19341C10.0553 3.00616 10.7428 3.42088 10.9221 4.11972C11.1013 4.81855 10.7044 5.53687 10.0354 5.72412C9.36653 5.91138 8.67898 5.49665 8.49974 4.79782Z"
fill="#C8C8C8"
/>
</svg>
</fast-tab>
<fast-tab id="TabThree" title="Styles">
<svg
class="icon"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.9163 0.108954C14.5978 -0.344806 16.3262 0.660165 16.7768 2.35362L19.8918 14.0612C20.3424 15.7547 19.3445 17.4953 17.6629 17.9491L10.4663 19.891C8.78473 20.3448 7.05629 19.3398 6.60572 17.6464L3.49072 5.9388C3.04015 4.24535 4.03806 2.50469 5.71962 2.05093L12.9163 0.108954ZM3.47925 10.36L5.49855 17.9451C5.70598 18.7248 6.11202 19.3974 6.64717 19.9226L6.13956 19.8951C4.40107 19.8033 3.0656 18.3097 3.15671 16.5589L3.47925 10.36ZM13.3613 1.78147L6.16462 3.72344C5.40028 3.92969 4.94668 4.7209 5.15149 5.49066L8.26648 17.1982C8.47129 17.968 9.25694 18.4248 10.0213 18.2185L17.2179 16.2766C17.9823 16.0703 18.4359 15.2791 18.231 14.5093L15.1161 2.80177C14.9112 2.03202 14.1256 1.57521 13.3613 1.78147ZM2.41945 8.65373L2.01205 16.4985C1.97008 17.305 2.15012 18.0715 2.49836 18.7378L2.02336 18.5524C0.398113 17.9242 -0.413661 16.088 0.210213 14.4512L2.41945 8.65373ZM7.99359 5.02249C8.60506 4.85749 9.23358 5.22293 9.39743 5.83874C9.56127 6.45454 9.19839 7.08751 8.58692 7.25251C7.97544 7.41751 7.34692 7.05207 7.18308 6.43627C7.01923 5.82047 7.38211 5.1875 7.99359 5.02249Z"
fill="#C8C8C8"
/>
</svg>
</fast-tab>
<fast-tab id="TabFour" title="Density">
<svg
class="icon"
width="22"
height="20"
viewBox="0 0 22 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.6825 0C19.9361 0 20.9621 0.973832 21.0455 2.20621L21.0509 2.36837V13.4231C21.0509 14.6766 20.0771 15.7027 18.8447 15.786L18.6825 15.7915L14.2091 15.7912V18.4206L16.0523 18.4211C16.4883 18.4211 16.8417 18.7745 16.8417 19.2105C16.8417 19.6102 16.5447 19.9405 16.1594 19.9928L16.0523 20H4.99988C4.56388 20 4.21043 19.6465 4.21043 19.2105C4.21043 18.8109 4.50743 18.4806 4.89276 18.4283L4.99988 18.4211L6.84089 18.4206V15.7912L2.36837 15.7915C1.11485 15.7915 0.0887928 14.8177 0.00546392 13.5853L0 13.4231V2.36837C0 1.11485 0.973832 0.0887928 2.20621 0.00546393L2.36837 0H18.6825ZM12.6292 15.7912H8.41875L8.4198 18.4211H12.6302L12.6292 15.7912ZM18.6825 1.57891H2.36837C1.9687 1.57891 1.63839 1.87591 1.58612 2.26124L1.57891 2.36837V13.4231C1.57891 13.8228 1.87591 14.1531 2.26124 14.2054L2.36837 14.2126H18.6825C19.0822 14.2126 19.4125 13.9156 19.4648 13.5303L19.472 13.4231V2.36837C19.472 1.9687 19.175 1.63839 18.7897 1.58612L18.6825 1.57891ZM17.3713 3.15782C17.6297 3.15782 17.8445 3.344 17.8891 3.58952L17.8976 3.68413V12.1076C17.8976 12.3659 17.7114 12.5808 17.4659 12.6254L17.3713 12.6339H7.89332C7.63495 12.6339 7.42006 12.4477 7.3755 12.2022L7.36702 12.1076V3.68413C7.36702 3.42575 7.5532 3.21086 7.79872 3.1663L7.89332 3.15782H17.3713ZM5.78742 3.15782C6.0458 3.15782 6.26068 3.344 6.30525 3.58952L6.31373 3.68413V12.1076C6.31373 12.3659 6.12755 12.5808 5.88203 12.6254L5.78742 12.6339H3.68228C3.42391 12.6339 3.20902 12.4477 3.16446 12.2022L3.15598 12.1076V3.68413C3.15598 3.42575 3.34216 3.21086 3.58768 3.1663L3.68228 3.15782H5.78742Z"
fill="#C8C8C8"
/>
</svg>
</fast-tab>
<fast-tab-panel id="TabPanelOne">
Tab one content. This is for testing.
</fast-tab-panel>
<fast-tab-panel id="TabPanelTwo">
<div class="content">
<h1>FAST FRAME COLORS</h1>
<h2>Pre-existing color you can customize.</h2>
<p>
Ultrices nibh nunc vestibulum fames. At lacus nunc lacus eget
neque.
</p>
Color Pickers go here.
</div>
</fast-tab-panel>
<fast-tab-panel id="TabPanelThree">
Tab three content. This is for testing.
</fast-tab-panel>
<fast-tab-panel id="TabPanelFour">
Tab four content. This is for testing.
</fast-tab-panel>
</fast-tabs>
<div class="preview">
Preview goes here
</div>
</div>
</template>
`;
3 changes: 3 additions & 0 deletions sites/fast-website/src/app/components/fast-frame/fast-frame.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { FASTElement } from "@microsoft/fast-element";

export class FastFrame extends FASTElement {}
14 changes: 14 additions & 0 deletions sites/fast-website/src/app/components/fast-frame/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { customElement } from "@microsoft/fast-element";
import { FastFrame } from "./fast-frame";
import { FastFrameTemplate as template } from "./fast-frame.template";
import { FastFrameStyles as styles } from "./fast-frame.styles";

@customElement({
name: "fast-frame",
template,
styles,
})
export class FASTFastFrame extends FastFrame {}
export * from "./fast-frame.template";
export * from "./fast-frame.styles";
export * from "./fast-frame";
1 change: 1 addition & 0 deletions sites/fast-website/src/app/components/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { GradientPicker } from "./gradient-picker";
export { FASTSectionHeader } from "./section-header";
export { FastFrame } from "./fast-frame";
6 changes: 1 addition & 5 deletions sites/fast-website/src/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,7 @@

<!-- adaptive-ui-system:start -->
<section class="section">
<div class="section-component">
Adaptive UI System
<fast-button>Hello, World!</fast-button>
<gradient-picker>stub</gradient-picker>
</div>
<fast-frame></fast-frame>
</section>
<!-- adaptive-ui-system:end -->

Expand Down

0 comments on commit 8dc8c69

Please sign in to comment.