4 | {{#if props.closeIcon}}
5 |
8 | {{/if}}
9 |
--------------------------------------------------------------------------------
/src/components/Dialog/Dialog.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Dialog",
3 | "dependencies": [
4 | "Button",
5 | "CheckBox",
6 | "Overlay",
7 | "ContextualHost"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/DialogHost/DialogHost.hbs:
--------------------------------------------------------------------------------
1 | {{props.title}}
10 |
11 | {{#if props.subText}}
12 |
20 | {{#if props.actions}}
21 | {{props.subText}}
13 | {{/if}} 14 | {{#if props.components}} 15 | {{#each props.components}} 16 | {{renderPartial component props}} 17 | {{/each}} 18 | {{/if}} 19 |
22 | {{#each props.actions}}
23 | {{renderPartial component props}}
24 | {{/each}}
25 |
26 | {{/if}}
27 |
3 |
--------------------------------------------------------------------------------
/src/components/DialogHost/DialogHost.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "DialogHost"
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/DialogHost/DialogHost.scss:
--------------------------------------------------------------------------------
1 | .ms-DialogHost {
2 | @include ms-baseFont;
3 | @include drop-shadow;
4 | background-color: $ms-color-white;
5 | box-sizing: border-box;
6 | line-height: 1.35;
7 | width: 288px;
8 | position: relative;
9 | text-align: left;
10 | outline: 1px solid transparent;
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/DialogHost/DialogHost.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 | // "use strict";
3 |
4 | namespace fabric {
5 |
6 | /**
7 | * DialogHost class
8 | */
9 | export class DialogHost {
10 | // @TODO: Implement this.
11 | }
12 |
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/Dropdown/Dropdown.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
4 | {{#if @partial-block}} {{> @partial-block }} {{/if}}
5 |
6 |
7 |
8 |
9 |
14 |
--------------------------------------------------------------------------------
/src/components/Dropdown/Dropdown.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Dropdown",
3 | "dependencies": [
4 | "Label"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/FacePile/FacePile.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 | {{#each props.members}}
8 | {{> Persona props=props}}
9 | {{/each}}
10 |
13 |
--------------------------------------------------------------------------------
/src/components/FacePile/FacePile.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "FacePile",
3 | "dependencies": [
4 | "Overlay",
5 | "Link",
6 | "Panel",
7 | "PeoplePicker",
8 | "Persona",
9 | "PersonaCard",
10 | "Spinner",
11 | "ContextualHost"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/Label/Label.hbs:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/Label/Label.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Label"
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Label/Label.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Office UI Fabric
5 | // --------------------------------------------------
6 | // Form field label styles
7 |
8 | @mixin ms-Label-is-disabled {
9 | color: $ms-color-neutralTertiary;
10 | }
11 |
12 | @mixin ms-Label-is-required {
13 | &::after {
14 | content: ' *';
15 | color: $ms-color-error;
16 | }
17 | }
18 |
19 | .ms-Label {
20 | @include ms-baseFont;
21 | @include ms-u-normalize;
22 | color: $ms-color-neutralPrimary;
23 | font-size: $ms-font-size-s;
24 | font-weight: $ms-font-weight-regular;
25 | box-sizing: border-box;
26 | display: block;
27 | padding: 5px 0;
28 |
29 | &.is-required {
30 | @include ms-Label-is-required;
31 | }
32 |
33 | &.is-disabled {
34 | @include ms-Label-is-disabled;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/Link/Link.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{props.label}}
--------------------------------------------------------------------------------
/src/components/Link/Link.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Link"
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Link/Link.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Office UI Fabric
5 | // --------------------------------------------------
6 | // Link (anchor) styles
7 |
8 |
9 | @mixin ms-Link {
10 | @include ms-baseFont;
11 | font-size: $ms-font-size-m;
12 | font-weight: $ms-font-weight-regular;
13 | color: $ms-color-themePrimary;
14 | text-decoration: none;
15 | cursor: pointer;
16 | outline: none;
17 |
18 | &:hover,
19 | &:focus {
20 | color: $ms-color-themeDarker;
21 | }
22 |
23 | &:active {
24 | color: $ms-color-themePrimary;
25 | }
26 | }
27 |
28 | .ms-Link {
29 | @include ms-Link;
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/List/List.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 | -
5 | {{#each props.listItems}}
6 | {{> (lookup . 'name') props=props}}
7 | {{/each}}
8 |
14 | {{#each props.actions}}{{/each}}
15 |
20 |
16 |
17 |
18 |
19 |
4 |
21 |
--------------------------------------------------------------------------------
/src/components/MessageBanner/MessageBanner.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "MessageBanner",
3 | "dependencies": [
4 | "Button"
5 | ],
6 | "props": {
7 | "message": "You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.",
8 | "button": {
9 | "name": "Button",
10 | "props": {
11 | "label": "Get More Storage",
12 | "modifier": "primary",
13 | "tag": "button"
14 | }
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/MessageBar/MessageBar.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
17 |
20 |
6 |
10 |
13 |
7 | {{props.message}}
8 |
9 |
14 | {{renderPartial props.button.name props.button.props}}
15 |
16 |
5 |
16 |
--------------------------------------------------------------------------------
/src/components/MessageBar/MessageBar.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "MessageBar",
3 | "dependencies": [
4 | "Link"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/OrgChart/OrgChart.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
10 |
15 |
11 | Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
12 | Hyperlink string 13 |
14 | 12 | Hyperlink string 13 |
5 | {{#each props.groups}}
6 |
--------------------------------------------------------------------------------
/src/components/OrgChart/OrgChart.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "OrgChart",
3 | "dependencies": [
4 | "Persona"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/OrgChart/OrgChart.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Office UI Fabric
5 | // --------------------------------------------------
6 | // Org chart styles
7 |
8 |
9 | .ms-OrgChart {
10 | @include ms-baseFont;
11 | @include ms-u-normalize;
12 | color: $ms-color-neutralPrimary;
13 | font-size: $ms-font-size-m;
14 | font-weight: $ms-font-weight-regular;
15 | }
16 |
17 | .ms-OrgChart-groupTitle {
18 | color: $ms-color-neutralSecondary;
19 | line-height: 1;
20 | }
21 |
22 | .ms-OrgChart-list {
23 | padding: 0;
24 | margin: 12px 0 16px;
25 | }
26 |
27 | .ms-OrgChart-listItem {
28 | height: 50px;
29 | width: 100%;
30 | position: relative;
31 | list-style: none;
32 | margin-bottom: 8px;
33 | }
34 |
35 | .ms-OrgChart-listItemBtn {
36 | @include button-reset;
37 | position: relative;
38 | height: 50px;
39 | width: 100%;
40 | background: none;
41 | border: 0;
42 | text-align: left;
43 | margin: 0;
44 | padding: 0;
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/Overlay/Overlay.hbs:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/Overlay/Overlay.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Overlay"
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Overlay/Overlay.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Office UI Fabric
5 | // --------------------------------------------------
6 | // Modal overlay styles
7 |
8 |
9 | .ms-Overlay {
10 | @include ms-baseFont;
11 | background-color: $ms-color-whiteTranslucent40;
12 | position: fixed;
13 | bottom: 0;
14 | left: 0;
15 | right: 0;
16 | top: 0;
17 | z-index: $ms-zIndex-back;
18 | display: none;
19 | }
20 |
21 | .ms-Overlay.is-visible {
22 | display: block;
23 | }
24 |
25 | //== Modifier: Dark overlay
26 | //
27 | .ms-Overlay--dark {
28 | background-color: $ms-color-blackTranslucent40;
29 | }
30 |
31 | .ms-u-overflowHidden {
32 | overflow: hidden;
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/Overlay/Overlay.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | namespace fabric {
4 |
5 | export class Overlay {
6 | public overlayElement: HTMLElement;
7 |
8 | constructor(overlayElement?: HTMLElement) {
9 | if (overlayElement) {
10 | this.overlayElement = overlayElement;
11 | } else {
12 | let overlayContainer = document.createElement("div");
13 | overlayContainer.setAttribute("class", "ms-Overlay");
14 | this.overlayElement = overlayContainer;
15 | }
16 | this.overlayElement.addEventListener("click", this.hide.bind(this), false);
17 | }
18 |
19 | public remove() {
20 | this.overlayElement.parentElement.removeChild(this.overlayElement);
21 | }
22 |
23 | public show(): void {
24 | this.overlayElement.classList.add("is-visible");
25 | document.body.classList.add("ms-u-overflowHidden");
26 | }
27 |
28 | public hide(): void {
29 | this.overlayElement.classList.remove("is-visible");
30 | document.body.classList.remove("ms-u-overflowHidden");
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/Panel/Panel.hbs:
--------------------------------------------------------------------------------
1 |
2 |
7 | {{#if title}}
18 | {{/each}}
19 | {{title}}
{{/if}}
8 | -
9 | {{#each personas}}
10 |
- 11 | 14 | 15 | {{/each}} 16 |
3 |
6 |
--------------------------------------------------------------------------------
/src/components/Panel/Panel.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Panel"
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/PanelHost/PanelHost.hbs:
--------------------------------------------------------------------------------
1 |
7 |
12 | {{props.headerText}}
8 |
9 | {{props.content}}
10 |
11 |
2 | {{> Overlay }}
3 |
--------------------------------------------------------------------------------
/src/components/PanelHost/PanelHost.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "PanelHost",
3 | "dependencies": [
4 | "Overlay"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/PanelHost/PanelHost.scss:
--------------------------------------------------------------------------------
1 | // The panel covers the entire screen.
2 | .ms-PanelHost {
3 | @include ms-baseFont;
4 | bottom: 0;
5 | left: 0;
6 | position: fixed;
7 | right: 0;
8 | top: 0;
9 | z-index: $ms-zIndex-front;
10 | }
11 |
12 | .ms-PanelHost .ms-Overlay {
13 | cursor: pointer;
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/PeoplePicker/PeoplePicker.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "PeoplePicker",
3 | "dependencies": [
4 | "Label",
5 | "Persona",
6 | "PersonaCard",
7 | "Spinner",
8 | "TextField",
9 | "ContextualHost",
10 | "OrgChart"
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/Persona/Persona.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Persona",
3 | "dependencies": [
4 | "PersonaCard",
5 | "ContextualHost"
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/PersonaCard/PersonaCard.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "PersonaCard"
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Pivot/Pivot.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/components/Pivot/Pivot.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Pivot"
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/ProgressIndicator/ProgressIndicator.hbs:
--------------------------------------------------------------------------------
1 |
2 | -
4 | {{#each props.links}}
5 |
- 6 | {{text}} 7 | 8 | {{/each}} 9 | {{#if props.hasEllipsis}} 10 |
- 11 | 12 | 13 | {{/if}} 14 |
17 | {{content}}
18 |
19 | {{/each}}
20 |
3 |
--------------------------------------------------------------------------------
/src/components/ProgressIndicator/ProgressIndicator.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ProgressIndicator"
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/RadioButton/RadioButton.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{props.title}}
4 |
5 |
6 |
7 |
8 | {{props.title}}
9 |
4 |
5 |
9 | {{renderPartial props.clearButton.component props.clearButton.props}}
10 | {{#if props.exitButton}}{{renderPartial props.exitButton.component props.exitButton.props}}{{/if~}}
11 | {{#if props.filterButton}}{{renderPartial props.filterButton.component props.filterButton.props}}{{~/if}}
12 |
--------------------------------------------------------------------------------
/src/components/SearchBox/SearchBox.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "SearchBox",
3 | "props": {
4 | "label": "Search",
5 | "defaultValue": "",
6 | "icon": "search",
7 | "clearButton": {
8 | "component": "CommandButton",
9 | "props": {
10 | "icon": "x",
11 | "modifier": "noLabel",
12 | "tag": "button",
13 | "customClasses": "ms-SearchBox-close"
14 | }
15 | },
16 | "filterButton": {
17 | "component": "CommandButton",
18 | "props": {
19 | "icon": "Filter",
20 | "modifier": "noLabel",
21 | "tag": "button",
22 | "customClasses": "ms-SearchBox-filter"
23 | }
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/Spinner/Spinner.hbs:
--------------------------------------------------------------------------------
1 |
2 |
4 | {{#if props.label}}
5 |
--------------------------------------------------------------------------------
/src/components/Spinner/Spinner.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Spinner"
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Spinner/Spinner.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Office UI Fabric
5 | // --------------------------------------------------
6 | // Spinner styles
7 |
8 |
9 | .ms-Spinner {
10 | @include ms-baseFont;
11 | position: relative;
12 | height: 20px;
13 |
14 | &.ms-Spinner--large {
15 | height: 28px;
16 |
17 | .ms-Spinner-label {
18 | left: 34px;
19 | top: 6px;
20 | }
21 | }
22 | }
23 |
24 | .ms-Spinner-circle {
25 | position: absolute;
26 | border-radius: 100px;
27 | background-color: $ms-color-themePrimary;
28 | opacity: 0;
29 |
30 | @media screen and (-ms-high-contrast: active) {
31 | background-color: $ms-color-white;
32 | }
33 |
34 | @media screen and (-ms-high-contrast: black-on-white) {
35 | background-color: $ms-color-black;
36 | }
37 | }
38 |
39 | .ms-Spinner-label {
40 | @include ms-baseFont;
41 | position: relative;
42 | font-size: $ms-font-size-s;
43 | font-weight: $ms-font-weight-regular;
44 | color: $ms-color-themePrimary;
45 | left: 28px;
46 | top: 2px;
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/Table/Table.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 | {{props.label}}
7 |
8 | {{/if}}
9 | | 9 | {{/if}} 10 | {{#each props.headers}} 11 | | {{value}} | 12 | {{/each}} 13 |
|---|---|
| 20 | {{/if}} 21 | {{#each columns}} 22 | | {{value}} | 23 | {{/each}} 24 |
5 | {{#if props.label}}{{/if}}
6 | {{#if props.textfield}}{{/if}}{{#if props.multiline}}{{/if}}{{#if props.description}}{{props.description}}{{/if}}
7 |
--------------------------------------------------------------------------------
/src/components/TextField/TextField.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "TextField"
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Toggle/Toggle.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 | {{props.description}}
7 |
8 |
12 |
13 |
--------------------------------------------------------------------------------
/src/components/Toggle/Toggle.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Toggle",
3 | "dependencies": [
4 | "Label"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/Toggle/Toggle.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | "use strict";
4 |
5 | namespace fabric {
6 | /**
7 | * Toggle Plugin
8 | *
9 | * Adds basic demonstration functionality to .ms-Toggle components.
10 | *
11 | */
12 | export class Toggle {
13 |
14 | private _container: HTMLElement;
15 | private _toggleField: HTMLElement;
16 |
17 | /**
18 | *
19 | * @param {HTMLElement} container - the target container for an instance of Toggle
20 | * @constructor
21 | */
22 | constructor(container: HTMLElement) {
23 | this._container = container;
24 | this._toggleField =
2 | {{> Callout props=props}}
3 |
6 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Callout/examples/CalloutExampleActionModel.js:
--------------------------------------------------------------------------------
1 | var CalloutExampleActionModel = {
2 | "state": "is-hidden",
3 | "title": "All of your favorite people",
4 | "subText": "Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.",
5 | "modifier": "actionText",
6 | "actions": [
7 | {
8 | "component": "CommandButton",
9 | "props": {
10 | "label": "Command",
11 | "icon": "CheckMark",
12 | "tag": "button",
13 | "modifier": "inline",
14 | "iconColor": "green"
15 | }
16 | },
17 | {
18 | "component": "CommandButton",
19 | "props": {
20 | "label": "Command",
21 | "icon": "Clear",
22 | "tag": "button",
23 | "modifier": "inline",
24 | "iconColor": "red"
25 | }
26 | }
27 | ],
28 | "contextualHostProps": {
29 | "arrowPosition": "arrowLeft",
30 | "state": "is-open"
31 | },
32 | "button": {
33 | "label": "Open Callout Action Text",
34 | "tag": "button"
35 | }
36 | }
37 |
38 | module.exports = CalloutExampleActionModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Callout/examples/CalloutExampleCloseModel.js:
--------------------------------------------------------------------------------
1 | var CalloutExampleCloseModel = {
2 | "state": "is-hidden",
3 | "title": "All of your favorite people",
4 | "subText": "Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.",
5 | "modifier": "close",
6 | "closeIcon": "Clear",
7 | "arrowPosition": "arrowLeft",
8 | "actions": [
9 | {
10 | "component": "Link",
11 | "props": {
12 | "title": "Learn More",
13 | "modifier": "hero",
14 | "label": "Learn More",
15 | "tabIndex": 0
16 | }
17 | }
18 | ],
19 | "contextualHostProps": {
20 | "arrowPosition": "arrowLeft",
21 | "state": "is-open"
22 | },
23 | "button": {
24 | "label": "Open Callout",
25 | "tag": "button"
26 | }
27 | }
28 |
29 | module.exports = CalloutExampleCloseModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Callout/examples/CalloutExampleJS.hbs:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Callout/examples/CalloutExampleModel.js:
--------------------------------------------------------------------------------
1 | var CalloutExampleModel = {
2 | "state": "is-hidden",
3 | "title": "All of your favorite people",
4 | "subText": "Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.",
5 | "actions": [
6 | {
7 | "component": "Link",
8 | "props": {
9 | "label": "Learn more",
10 | "linkText": "Learn More",
11 | "customClassses": "ms-Callout-link",
12 | "tabIndex": 0,
13 | "hasHref": false
14 | }
15 | }
16 | ],
17 | "button": {
18 | "label": "Open Callout",
19 | "tag": "button"
20 | }
21 | }
22 |
23 | module.exports = CalloutExampleModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Callout/examples/CalloutExampleOOBEModel.js:
--------------------------------------------------------------------------------
1 | var CalloutExampleOOBEModel = {
2 | "state": "is-hidden",
3 | "title": "All of your favorite people",
4 | "subText": "Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.",
5 | "modifier": "OOBE",
6 | "arrowPosition": "arrowLeft",
7 | "actions": [
8 | {
9 | "component": "Button",
10 | "props": {
11 | "label": "More",
12 | "tag": "button",
13 | "modifier": "primary"
14 | }
15 | },
16 | {
17 | "component": "Button",
18 | "props": {
19 | "label": "Got it",
20 | "tag": "button"
21 | }
22 | }
23 | ],
24 | "contextualHostProps": {
25 | "arrowPosition": "arrowLeft",
26 | "state": "is-open"
27 | },
28 | "button": {
29 | "label": "Open Callout OOBE",
30 | "tag": "button"
31 | }
32 | }
33 |
34 | module.exports = CalloutExampleOOBEModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Callout/examples/CalloutExamplePeekModel.js:
--------------------------------------------------------------------------------
1 | var CalloutExamplePeekModel = {
2 | "state": "is-hidden",
3 | "title": "Uploaded 2 items to Alton's OneDrive",
4 | "titleTokens": ["", ""],
5 | "subText": "",
6 | "modifier": "peek",
7 | "arrowPosition": "arrowLeft",
8 | "actions": [
9 | {
10 | "component": "Button",
11 | "props": {
12 | "label": "Got it",
13 | "tag": "button"
14 | }
15 | }
16 | ],
17 | "contextualHostProps": {
18 | "arrowPosition": "arrowLeft",
19 | "state": "is-open"
20 | },
21 | "button": {
22 | "label": "Open Callout Peek",
23 | "tag": "button"
24 | }
25 | }
26 |
27 |
28 | module.exports = CalloutExamplePeekModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/CheckBox/examples/CheckBoxBasicModel.js:
--------------------------------------------------------------------------------
1 | var CheckBoxModel = {
2 | "label": "Checkbox",
3 | "modifier": "",
4 | "name": "checkboxa",
5 | "id": "checkboxa",
6 | "checked": false,
7 | "disabled": false,
8 | "type": "checkbox"
9 | }
10 |
11 | module.exports = CheckBoxModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/CheckBox/examples/CheckBoxDisabledModel.js:
--------------------------------------------------------------------------------
1 | var CheckBoxModel = {
2 | "label": "Checkbox Disabled",
3 | "modifier": "",
4 | "name": "checkboxb",
5 | "id": "checkboxb",
6 | "checked": false,
7 | "disabled": true,
8 | "type": "checkbox"
9 | }
10 |
11 | module.exports = CheckBoxModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/CheckBox/examples/CheckBoxElem.hbs:
--------------------------------------------------------------------------------
1 | {{> CheckBox props=props}}
--------------------------------------------------------------------------------
/src/documentation/pages/Components/CheckBox/examples/CheckBoxJS.hbs:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/CheckBox/examples/CheckBoxModels.js:
--------------------------------------------------------------------------------
1 | var CheckBoxModels = {
2 | "basic": {
3 | "label": "Checkbox",
4 | "modifier": "",
5 | "name": "checkboxa",
6 | "id": "checkboxa",
7 | "checked": false,
8 | "disabled": false,
9 | "type": "checkbox"
10 | },
11 | "checkboxDisabled": {
12 | "label": "Checkbox Disabled",
13 | "modifier": "",
14 | "name": "checkboxb",
15 | "id": "checkboxb",
16 | "checked": false,
17 | "disabled": true,
18 | "type": "checkbox"
19 | },
20 | "checkboxSelected": {
21 | "label": "Checkbox selected",
22 | "modifier": "",
23 | "name": "checkboxc",
24 | "id": "checkboxc",
25 | "checked": true,
26 | "disabled": false,
27 | "type": "checkbox"
28 | }
29 | }
30 |
31 | module.exports = CheckBoxModels;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/CheckBox/examples/CheckBoxSelectedModel.js:
--------------------------------------------------------------------------------
1 | var CheckBoxModel = {
2 | "label": "Checkbox selected",
3 | "modifier": "",
4 | "name": "checkboxc",
5 | "id": "checkboxc",
6 | "checked": true,
7 | "disabled": false,
8 | "type": "checkbox"
9 | }
10 |
11 | module.exports = CheckBoxModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/ChoiceFieldGroup/ChoiceFieldGroup.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | componentName: "ChoiceFieldGroup",
3 | overview: "Used to indicate a single choice from multiple options.
", 4 | availableReact: true, 5 | reactComponent: 'ChoiceGroup', 6 | variants: [ 7 | { 8 | name: "Default ChoiceFieldGroup", 9 | templateFile: "ChoiceFieldGroupElem", 10 | model: "ChoiceFieldGroupModel" 11 | } 12 | ], 13 | methods: [ 14 | { 15 | name: "removeListeners()", 16 | parameters: [ 17 | ], 18 | description: "Remove all event listeners from component" 19 | } 20 | ], 21 | jsFile: "ChoiceFieldGroupJS" 22 | } 23 | 24 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/ChoiceFieldGroup/examples/ChoiceFieldGroupElem.hbs: -------------------------------------------------------------------------------- 1 | {{> ChoiceFieldGroup props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/ChoiceFieldGroup/examples/ChoiceFieldGroupJS.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/ChoiceFieldGroup/examples/ChoiceFieldGroupModel.js: -------------------------------------------------------------------------------- 1 | var ChoiceFieldGroupModel = { 2 | "title": "Unselected", 3 | "required": true, 4 | "id": "choicefieldgroup", 5 | "groupType": "radiogroup", 6 | "fields": [ 7 | { 8 | "component": "RadioButton", 9 | "props": { 10 | "label": "Option 1", 11 | "modifier": "", 12 | "name": "choicefieldgroup", 13 | "id": "option1", 14 | "checked": false, 15 | "disabled": false, 16 | "type": "radio" 17 | } 18 | }, 19 | { 20 | "component": "RadioButton", 21 | "props": { 22 | "label": "Option 2", 23 | "modifier": "", 24 | "name": "choicefieldgroup", 25 | "id": "option2", 26 | "checked": false, 27 | "disabled": false, 28 | "type": "radio" 29 | } 30 | }, 31 | { 32 | "component": "RadioButton", 33 | "props": { 34 | "label": "Option 3", 35 | "modifier": "", 36 | "name": "choicefieldgroup", 37 | "id": "option3", 38 | "checked": false, 39 | "disabled": true, 40 | "type": "radio" 41 | } 42 | }, 43 | { 44 | "component": "RadioButton", 45 | "props": { 46 | "label": "Option 4", 47 | "modifier": "", 48 | "name": "choicefieldgroup", 49 | "id": "option4", 50 | "checked": false, 51 | "disabled": false, 52 | "type": "radio" 53 | } 54 | } 55 | ] 56 | } 57 | 58 | module.exports = ChoiceFieldGroupModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandBar/examples/CommandBarExample.hbs: -------------------------------------------------------------------------------- 1 | {{> CommandBar props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandBar/examples/CommandBarExampleJS.hbs: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandBar/examples/CommandBarExampleNavBar.hbs: -------------------------------------------------------------------------------- 1 | {{> CommandBar props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonActionExampleModel.js: -------------------------------------------------------------------------------- 1 | var CommandButtonExampleModel = { 2 | "icon": "CircleRing", 3 | "modifier": "actionButton", 4 | "tag": "button", 5 | "iconColor": "themePrimary" 6 | } 7 | 8 | module.exports = CommandButtonExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonDisabledExampleModel.js: -------------------------------------------------------------------------------- 1 | var CommandButtonExampleModel = { 2 | "label": "Command", 3 | "icon": "CircleRing", 4 | "tag": "button", 5 | "iconColor": "themePrimary", 6 | "disabled": true 7 | } 8 | 9 | module.exports = CommandButtonExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonDropdownExampleModel.js: -------------------------------------------------------------------------------- 1 | var CommandButtonExampleModel = { 2 | "label": "New", 3 | "icon": "CircleRing", 4 | "tag": "button", 5 | "dropdownIcon": "ChevronDown", 6 | "iconColor": "themePrimary", 7 | "dropdown": { 8 | "component": "ContextualMenu", 9 | "props": { 10 | "state": "is-opened", 11 | "modifier": "hasIcons", 12 | "items": [ 13 | { 14 | "title": "Folder", 15 | "state": "", 16 | "icon": "Folder" 17 | }, 18 | { 19 | "modifier": "divider", 20 | "title": "" 21 | }, 22 | { 23 | "title": "Plain Text Document", 24 | "icon": "Document" 25 | }, 26 | { 27 | "title": "Smile", 28 | "icon": "Emoji2" 29 | }, 30 | { 31 | "title": "Globe", 32 | "state": "", 33 | "icon": "Globe" 34 | }, 35 | { 36 | "title": "Money", 37 | "icon": "Money" 38 | } 39 | ] 40 | } 41 | } 42 | } 43 | 44 | module.exports = CommandButtonExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonExample.hbs: -------------------------------------------------------------------------------- 1 | {{> CommandButton props=props }} -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonExampleJS.hbs: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonExampleModel.js: -------------------------------------------------------------------------------- 1 | var CommandButtonExampleModel = { 2 | "label": "Command", 3 | "icon": "CircleRing", 4 | "tag": "button", 5 | "iconColor": "themePrimary" 6 | } 7 | 8 | module.exports = CommandButtonExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonInlineExampleModel.js: -------------------------------------------------------------------------------- 1 | var CommandButtonExampleModel = { 2 | "label": "Command", 3 | "icon": "CircleRing", 4 | "tag": "button", 5 | "modifier": "inline", 6 | "iconColor": "green" 7 | } 8 | 9 | module.exports = CommandButtonExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonNoLabelExampleModel.js: -------------------------------------------------------------------------------- 1 | var CommandButtonExampleModel = { 2 | "icon": "CircleRing", 3 | "modifier": "noLabel", 4 | "tag": "button", 5 | "iconColor": "themePrimary" 6 | } 7 | 8 | module.exports = CommandButtonExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonNoLabelSplitExampleModel.js: -------------------------------------------------------------------------------- 1 | var CommandButtonExampleModel = { 2 | "icon": "CircleRing", 3 | "modifier": "noLabel", 4 | "tag": "button", 5 | "splitIcon": "ChevronDown", 6 | "iconColor": "themePrimary", 7 | "dropdown": { 8 | "component": "ContextualMenu", 9 | "props": { 10 | "state": "", 11 | "items": [ 12 | { 13 | "title": "Reply", 14 | "state": "" 15 | }, 16 | { 17 | "title": "Reply all", 18 | "state": "" 19 | }, 20 | { 21 | "title": "Forward", 22 | "state": "is-selected" 23 | }, 24 | { 25 | "title": "Flag", 26 | "state": "" 27 | }, 28 | { 29 | "title": "Delete", 30 | "state": "is-disabled" 31 | } 32 | ] 33 | } 34 | } 35 | } 36 | 37 | module.exports = CommandButtonExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonPivotExampleModel.js: -------------------------------------------------------------------------------- 1 | var CommandButtonExampleModel = { 2 | "label": "New", 3 | "icon": "CircleRing", 4 | "tag": "button", 5 | "dropdownIcon": "ChevronDown", 6 | "iconColor": "themePrimary", 7 | "state": "is-active", 8 | "modifier": "pivot" 9 | } 10 | 11 | module.exports = CommandButtonExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonSplitExampleModel.js: -------------------------------------------------------------------------------- 1 | var CommandButtonExampleModel = { 2 | "label": "Reply", 3 | "icon": "CircleRing", 4 | "splitIcon": "ChevronDown", 5 | "iconColor": "themePrimary", 6 | "tag": "button", 7 | "dropdown": { 8 | "component": "ContextualMenu", 9 | "props": { 10 | "state": "is-opened", 11 | "items": [ 12 | { 13 | "title": "Reply", 14 | "state": "" 15 | }, 16 | { 17 | "title": "Reply all", 18 | "state": "" 19 | }, 20 | { 21 | "title": "Forward", 22 | "state": "is-selected" 23 | }, 24 | { 25 | "title": "Flag", 26 | "state": "" 27 | }, 28 | { 29 | "title": "Delete", 30 | "state": "is-disabled" 31 | } 32 | ] 33 | } 34 | } 35 | } 36 | 37 | module.exports = CommandButtonExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/CommandButton/examples/CommandButtonTextOnlyExampleModel.js: -------------------------------------------------------------------------------- 1 | var CommandButtonExampleModel = { 2 | "modifier": "TextOnly", 3 | "label": "Command", 4 | "tag": "button" 5 | } 6 | 7 | module.exports = CommandButtonExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/ContextualMenu/examples/ContextualMenuExample.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{> Button props=props.button}}
3 | {{> ContextualMenu props=props}}
4 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/ContextualMenu/examples/ContextualMenuExampleJS.hbs:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/ContextualMenu/examples/ContextualMenuExampleModel.js:
--------------------------------------------------------------------------------
1 | var ContexualMenuExampleModel = {
2 | "button": {
3 | "label": "Open Example",
4 | "modifier": "primary",
5 | "tag": "button"
6 | },
7 | "state": "is-hidden",
8 | "items": [
9 | {
10 | "title": "Animals",
11 | "state": ""
12 | },
13 | {
14 | "title": "Books",
15 | "state": ""
16 | },
17 | {
18 | "title": "Education",
19 | "state": "is-selected"
20 | },
21 | {
22 | "title": "Music",
23 | "state": ""
24 | },
25 | {
26 | "title": "Sports",
27 | "state": "is-disabled"
28 | }
29 | ],
30 | "contextualHostProps": {
31 | "state": "is-open"
32 | }
33 | }
34 |
35 | module.exports = ContexualMenuExampleModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/ContextualMenu/examples/ContextualMenuMultiselectExampleModel.js:
--------------------------------------------------------------------------------
1 | var ContexualMenuExampleModel = {
2 | "button": {
3 | "label": "Open Example",
4 | "modifier": "primary",
5 | "tag": "button"
6 | },
7 | "state": "is-hidden",
8 | "modifier": "multiselect",
9 | "items": [
10 | {
11 | "title": "SORT BY",
12 | "state": "",
13 | "modifier": "header"
14 | },
15 | {
16 | "title": "Date",
17 | "state": ""
18 | },
19 | {
20 | "title": "Sender",
21 | "state": "is-selected"
22 | },
23 | {
24 | "modifier": "divider",
25 | "title": ""
26 | },
27 | {
28 | "title": "ORDER",
29 | "state": "",
30 | "modifier": "header"
31 | },
32 | {
33 | "title": "Newest on top",
34 | "state": ""
35 | },
36 | {
37 | "title": "Oldest on top",
38 | "state": ""
39 | },
40 | {
41 | "modifier": "divider",
42 | "title": ""
43 | },
44 | {
45 | "title": "CONVERSATIONS",
46 | "modifier": "header"
47 | },
48 | {
49 | "title": "On",
50 | "state": ""
51 | },
52 | {
53 | "title": "Off",
54 | "state": ""
55 | }
56 | ],
57 | "contextualHostProps": {
58 | "state": "is-open"
59 | }
60 | }
61 |
62 | module.exports = ContexualMenuExampleModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/ContextualMenu/examples/ContextualMenuSubmenuExampleModel.js:
--------------------------------------------------------------------------------
1 | var ContexualMenuExampleModel = {
2 | "button": {
3 | "label": "Open Example",
4 | "modifier": "primary",
5 | "tag": "button"
6 | },
7 | "state": "is-hidden",
8 | "items": [
9 | {
10 | "title": "Animals",
11 | "state": ""
12 | },
13 | {
14 | "title": "Books",
15 | "state": "",
16 | "subMenuItems": [
17 | {
18 | "title": "Fiction",
19 | "state": ""
20 | },
21 | {
22 | "title": "Humor",
23 | "state": ""
24 | },
25 | {
26 | "title": "Magazines",
27 | "state": "is-selected"
28 | },
29 | {
30 | "title": "Non-fiction",
31 | "state": ""
32 | },
33 | {
34 | "title": "Textbooks",
35 | "state": ""
36 | }
37 | ]
38 | },
39 | {
40 | "title": "Education",
41 | "state": "is-selected"
42 | },
43 | {
44 | "title": "Music",
45 | "state": ""
46 | },
47 | {
48 | "title": "Sports",
49 | "state": "is-disabled"
50 | }
51 | ],
52 | "contextualHostProps": {
53 | "state": "is-open"
54 | }
55 | }
56 |
57 | module.exports = ContexualMenuExampleModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/DatePicker/DatePicker.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | componentName: "DatePicker",
3 | overview: `The DatePicker component enables a user to pick a date value.
`, 4 | availableReact: true, 5 | variants: [ 6 | { 7 | name: "Default DatePicker", 8 | templateFile: "DatePickerExample", 9 | model: null 10 | } 11 | ], 12 | methods: [ 13 | { 14 | name: "picker.set('select', dateArr);", 15 | parameters: [ 16 | { 17 | name: "dateArr", 18 | type: "{Array} The new date in [YEAR, MONTH, DATE] format", 19 | } 20 | ], 21 | description: "Selects a new date in the component. Must be used on component's picker property (DatePicker.picker)." 22 | }, 23 | { 24 | name: "picker.set('highlight', dateArr);", 25 | parameters: [ 26 | { 27 | name: "dateArr", 28 | type: "{Array} The new date in [YEAR, MONTH, DATE] format", 29 | } 30 | ], 31 | description: "Highlights a new date in the component. Must be used on component's picker property (DatePicker.picker)." 32 | } 33 | ], 34 | jsFile: "DatePickerExampleJS", 35 | isDatePicker: true 36 | } 37 | 38 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/DatePicker/examples/DatePickerExample.hbs: -------------------------------------------------------------------------------- 1 | {{> DatePicker}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/DatePicker/examples/DatePickerExampleJS.hbs: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Dialog/examples/DialogBlockingExample.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{> Dialog props=props }}
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dialog/examples/DialogBlockingExampleModel.js:
--------------------------------------------------------------------------------
1 | var DialogExampleModel = {
2 | "modifier": "blocking",
3 | "title": "Unsaved changes",
4 | "subText": "Are you sure you want to discard these changes?.",
5 | "components": [
6 | {
7 | "component": "CheckBox",
8 | "props": {
9 | "label": "Option1",
10 | "modifier": "",
11 | "name": "checkboxa",
12 | "id": "checkboxa",
13 | "checked": false,
14 | "disabled": false,
15 | "type": "checkbox"
16 | }
17 | },
18 | {
19 | "component": "CheckBox",
20 | "props": {
21 | "label": "Option2",
22 | "modifier": "",
23 | "name": "checkboxa",
24 | "id": "checkboxa",
25 | "checked": false,
26 | "disabled": false,
27 | "type": "checkbox"
28 | }
29 | }
30 | ],
31 | "actions": [
32 | {
33 | "component": "Button",
34 | "props": {
35 | "label": "Save",
36 | "tag": "button",
37 | "modifier": "primary",
38 | "customClasses": "ms-Dialog-action"
39 | }
40 | },
41 | {
42 | "component": "Button",
43 | "props": {
44 | "label": "Delete",
45 | "tag": "button",
46 | "customClasses": "ms-Dialog-action"
47 | }
48 | }
49 | ],
50 | "contextualHostProps": {
51 | "state": "is-open"
52 | }
53 | }
54 |
55 | module.exports = DialogExampleModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dialog/examples/DialogCloseExample.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{> Dialog props=props }}
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dialog/examples/DialogDefaultExample.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{> Dialog props=props }}
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dialog/examples/DialogDocAllElementsJS.hbs:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dialog/examples/DialogExampleModel.js:
--------------------------------------------------------------------------------
1 | var DialogExampleModel = {
2 | "title": "All emails together",
3 | "subText": "Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.",
4 | "components": [
5 | {
6 | "component": "CheckBox",
7 | "props": {
8 | "label": "Option1",
9 | "modifier": "",
10 | "name": "checkboxa",
11 | "id": "checkboxa",
12 | "checked": false,
13 | "disabled": false,
14 | "type": "checkbox"
15 | }
16 | },
17 | {
18 | "component": "CheckBox",
19 | "props": {
20 | "label": "Option2",
21 | "modifier": "",
22 | "name": "checkboxa",
23 | "id": "checkboxa",
24 | "checked": false,
25 | "disabled": false,
26 | "type": "checkbox"
27 | }
28 | }
29 | ],
30 | "actions": [
31 | {
32 | "component": "Button",
33 | "props": {
34 | "label": "Save",
35 | "tag": "button",
36 | "modifier": "primary",
37 | "customClasses": "ms-Dialog-action"
38 | }
39 | },
40 | {
41 | "component": "Button",
42 | "props": {
43 | "label": "Cancel",
44 | "tag": "button",
45 | "customClasses": "ms-Dialog-action"
46 | }
47 | }
48 | ],
49 | "contextualHostProps": {
50 | "state": "is-open"
51 | }
52 | }
53 |
54 | module.exports = DialogExampleModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dialog/examples/DialogLgHeaderExample.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{> Dialog props=props }}
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dialog/examples/DialogLgHeaderExampleJS.hbs:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dialog/examples/DialogLgHeaderExampleModel.js:
--------------------------------------------------------------------------------
1 | var DialogExampleModel = {
2 | "modifier": "lgHeader",
3 | "title": "All emails together",
4 | "subText": "Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.",
5 | "actions": [
6 | {
7 | "component": "Button",
8 | "props": {
9 | "label": "Save",
10 | "tag": "button",
11 | "modifier": "primary",
12 | "customClasses": "ms-Dialog-action"
13 | }
14 | },
15 | {
16 | "component": "Button",
17 | "props": {
18 | "label": "Cancel",
19 | "tag": "button",
20 | "customClasses": "ms-Dialog-action"
21 | }
22 | }
23 | ],
24 | "contextualHostProps": {
25 | "state": "is-open"
26 | }
27 | }
28 |
29 | module.exports = DialogExampleModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dialog/examples/DialogMultilineExample.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{> Dialog props=props }}
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dialog/examples/DialogMultilineExampleJS.hbs:
--------------------------------------------------------------------------------
1 |
34 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dialog/examples/DialogMultilineExampleModel.js:
--------------------------------------------------------------------------------
1 | var DialogExampleModel = {
2 | "modifier": "multiline",
3 | "title": "All emails together",
4 | "components": [
5 | {
6 | "component": "Button",
7 | "props": {
8 | "label": "Create Account",
9 | "description": "Description of this action this button takes",
10 | "icon": "Add",
11 | "modifier": "compound",
12 | "tag": "button",
13 | "customClasses": "ms-Dialog-action"
14 | }
15 | },
16 | {
17 | "component": "Button",
18 | "props": {
19 | "label": "Sign in",
20 | "description": "Description of this action this button takes",
21 | "icon": "Add",
22 | "modifier": "compound",
23 | "tag": "button",
24 | "customClasses": "ms-Dialog-action"
25 | }
26 | },
27 | {
28 | "component": "Button",
29 | "props": {
30 | "label": "Settings",
31 | "description": "Description of this action this button takes",
32 | "icon": "Add",
33 | "modifier": "compound",
34 | "tag": "button",
35 | "customClasses": "ms-Dialog-action"
36 | }
37 | }
38 | ],
39 | "contextualHostProps": {
40 | "state": "is-open"
41 | }
42 | }
43 |
44 | module.exports = DialogExampleModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Dropdown/Dropdown.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | componentName: "Dropdown",
3 | overview: `A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.
`, 4 | availableReact: true, 5 | variants: [ 6 | { 7 | name: "Default Dropdown", 8 | templateFile: "DropdownExample", 9 | model: "DropdownExampleModel" 10 | }, 11 | { 12 | name: "Disabled Dropdown", 13 | templateFile: "DropdownExample", 14 | model: "DropdownDisabledExampleModel" 15 | } 16 | ], 17 | states: [ 18 | { 19 | name: ".is-disabled", 20 | applied: ".ms-Dropdown", 21 | result: "Disables the dropdown." 22 | } 23 | ], 24 | jsFile: "DropdownExampleJS" 25 | } 26 | 27 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Dropdown/examples/DropdownDisabledExampleModel.js: -------------------------------------------------------------------------------- 1 | var DropdownDisabledExampleModel = { 2 | "label": "Dropdown label", 3 | "state": "is-disabled", 4 | "items": [ 5 | { 6 | "name": "Choose a sound…" 7 | }, 8 | { 9 | "name": "Dog barking" 10 | }, 11 | { 12 | "name": "Wind blowing" 13 | }, 14 | { 15 | "name": "Duck quacking" 16 | }, 17 | { 18 | "name": "Cow mooing" 19 | } 20 | ] 21 | } 22 | 23 | module.exports = DropdownDisabledExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Dropdown/examples/DropdownExample.hbs: -------------------------------------------------------------------------------- 1 | {{> Dropdown props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/Dropdown/examples/DropdownExampleJS.hbs: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Dropdown/examples/DropdownExampleModel.js: -------------------------------------------------------------------------------- 1 | var DropdownExampleModel = { 2 | "label": "Dropdown label", 3 | "items": [ 4 | { 5 | "name": "Choose a sound…" 6 | }, 7 | { 8 | "name": "Dog barking" 9 | }, 10 | { 11 | "name": "Wind blowing" 12 | }, 13 | { 14 | "name": "Duck quacking" 15 | }, 16 | { 17 | "name": "Cow mooing" 18 | } 19 | ] 20 | } 21 | 22 | module.exports = DropdownExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/FacePile/FacePile.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "FacePile", 3 | overview: `The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. Many times this component is used when sharing who has access to a specific view or file or when assigning a user to a task within a workflow.
`, 4 | availableReact: true, 5 | variants: [ 6 | { 7 | name: "Default FacePile", 8 | templateFile: "FacePileElem", 9 | model: "FacePileModels" 10 | } 11 | ], 12 | states: [ 13 | { 14 | name: ".is-active", 15 | applied: ".ms-PersonaCard", 16 | result: "Makes the PersonaCard for a person visible." 17 | }, 18 | { 19 | name: ".is-active", 20 | applied: ".ms-FacePile-itemBtn--overflow", 21 | result: "Makes the overflow item for additional people visible." 22 | } 23 | ], 24 | jsFile: "FacePileJS" 25 | } 26 | 27 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/FacePile/examples/FacePileElem.hbs: -------------------------------------------------------------------------------- 1 | {{> FacePile props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/FacePile/examples/FacePileJS.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Label/Label.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "Label", 3 | overview: "Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as TextField, Dropdown, or Toggle, already have Labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.
", 4 | availableReact: true, 5 | variants: [ 6 | { 7 | name: "Default Label", 8 | templateFile: "LabelExample", 9 | model: "LabelExampleModel" 10 | }, 11 | { 12 | name: "Disabled Label", 13 | templateFile: "LabelExample", 14 | model: "LabelExampleDisabledModel" 15 | }, 16 | { 17 | name: "Required Label", 18 | templateFile: "LabelExample", 19 | model: "LabelExampleRequiredModel" 20 | } 21 | ], 22 | states: [ 23 | { 24 | name: ".is-required", 25 | applied: ".ms-Label", 26 | result: "Marks the form element as required." 27 | }, 28 | { 29 | name: ".is-disabled", 30 | applied: ".ms-Label", 31 | result: "Marks the form element as disabled." 32 | } 33 | ] 34 | } 35 | 36 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Label/examples/LabelExample.hbs: -------------------------------------------------------------------------------- 1 | {{> Label props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/Label/examples/LabelExampleDisabled.hbs: -------------------------------------------------------------------------------- 1 |{{> Label props=props}}
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Label/examples/LabelExampleDisabledModel.js:
--------------------------------------------------------------------------------
1 | var LabelExampleModel = {
2 | "label": "Name",
3 | "state": "is-disabled"
4 | }
5 |
6 | module.exports = LabelExampleModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Label/examples/LabelExampleModel.js:
--------------------------------------------------------------------------------
1 | var LabelExampleModel = {
2 | "label": "Name"
3 | }
4 |
5 | module.exports = LabelExampleModel;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Label/examples/LabelExampleRequired.hbs:
--------------------------------------------------------------------------------
1 | {{> Label props=props}}
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Label/examples/LabelExampleRequiredModel.js:
--------------------------------------------------------------------------------
1 | var LabelExampleRequiredModel = {
2 | "label": "Name",
3 | "state": "is-required"
4 | }
5 |
6 | module.exports = LabelExampleRequiredModel;
7 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Link/Link.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | componentName: "Link",
3 | overview: `With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.
4 |A Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.
`, 5 | availableReact: true, 6 | variants: [ 7 | { 8 | name: "Default Link", 9 | templateFile: "LinkExample", 10 | model: "LinkModels" 11 | } 12 | ] 13 | } 14 | 15 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Link/examples/LinkExample.hbs: -------------------------------------------------------------------------------- 1 | {{> Link props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/Link/examples/LinkModels.js: -------------------------------------------------------------------------------- 1 | var LinkModels = { 2 | "label": "Example Link", 3 | "href": "#", 4 | "title": "More info about Example Link", 5 | "tabIndex": "" 6 | } 7 | 8 | module.exports = LinkModels; -------------------------------------------------------------------------------- /src/documentation/pages/Components/List/List.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "List", 3 | overview: `Presents a number of related items, either as a vertical list or in a grid.
`, 4 | availableReact: true, 5 | variants: [ 6 | { 7 | name: "Default List", 8 | templateFile: "ListElem", 9 | model: "ListModels" 10 | } 11 | ], 12 | jsFile: "ListJS" 13 | } 14 | 15 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/List/examples/ListElem.hbs: -------------------------------------------------------------------------------- 1 | {{> List props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/List/examples/ListJS.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/ListItem/ListItem.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "ListItem", 3 | overview: "Suitable for presenting a summary of an item with associated actions. Most often used within a List component. It was designed to represent an email message on desktop computers and is not currently touch friendly.
", 4 | variants: [ 5 | { 6 | name: "Default List", 7 | templateFile: "ListItemElem", 8 | model: "ListItemDefaultExampleModel" 9 | }, 10 | { 11 | name: "Image ListItem", 12 | templateFile: "ListItemElem", 13 | model: "ListItemImageExampleModel" 14 | }, 15 | { 16 | name: "Document ListItem", 17 | templateFile: "ListItemElem", 18 | model: "ListItemDocumentExampleModel" 19 | }, 20 | { 21 | name: "Selectable ListItem", 22 | templateFile: "ListItemElem", 23 | model: "ListItemSelectableExampleModel" 24 | }, 25 | { 26 | name: "Selected ListItem", 27 | templateFile: "ListItemElem", 28 | model: "ListItemSelectedExampleModel" 29 | }, 30 | { 31 | name: "Unseen ListItem", 32 | templateFile: "ListItemElem", 33 | model: "ListItemUnseenExampleModel" 34 | }, 35 | { 36 | name: "Unread ListItem", 37 | templateFile: "ListItemElem", 38 | model: "ListItemUnreadExampleModel" 39 | } 40 | ], 41 | jsFile: "ListItemJS" 42 | } 43 | 44 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/ListItem/examples/ListItemDefaultExampleModel.js: -------------------------------------------------------------------------------- 1 | var ListItemModels = { 2 | "primaryText": "Alton Lafferty", 3 | "secondaryText": "Meeting notes", 4 | "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", 5 | "metaText": "2:42p", 6 | "actions": [{}] 7 | } 8 | 9 | module.exports = ListItemModels; -------------------------------------------------------------------------------- /src/documentation/pages/Components/ListItem/examples/ListItemDocumentExampleModel.js: -------------------------------------------------------------------------------- 1 | var ListItemModels = { 2 | "primaryText": "Alton Lafferty", 3 | "secondaryText": "Meeting notes", 4 | "metaText": "2:42p", 5 | "modifier": "document", 6 | "listIcon": "ppt", 7 | "actions": [{}] 8 | } 9 | 10 | module.exports = ListItemModels; -------------------------------------------------------------------------------- /src/documentation/pages/Components/ListItem/examples/ListItemElem.hbs: -------------------------------------------------------------------------------- 1 | {{> ListItem props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/ListItem/examples/ListItemImageExampleModel.js: -------------------------------------------------------------------------------- 1 | var ListItemModels = { 2 | "primaryText": "Alton Lafferty", 3 | "secondaryText": "Meeting notes", 4 | "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", 5 | "metaText": "2:42p", 6 | "image": true, 7 | "modifier": "image", 8 | "actions": [{}] 9 | } 10 | 11 | module.exports = ListItemModels; -------------------------------------------------------------------------------- /src/documentation/pages/Components/ListItem/examples/ListItemJS.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/ListItem/examples/ListItemSelectableExampleModel.js: -------------------------------------------------------------------------------- 1 | var ListItemModels = { 2 | "primaryText": "Alton Lafferty", 3 | "secondaryText": "Meeting notes", 4 | "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", 5 | "metaText": "2:42p", 6 | "state": "is-selectable", 7 | "actions": [{}] 8 | } 9 | 10 | module.exports = ListItemModels; -------------------------------------------------------------------------------- /src/documentation/pages/Components/ListItem/examples/ListItemSelectedExampleModel.js: -------------------------------------------------------------------------------- 1 | var ListItemModels = { 2 | "primaryText": "Alton Lafferty", 3 | "secondaryText": "Meeting notes", 4 | "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", 5 | "metaText": "2:42p", 6 | "state": "is-selected is-selectable", 7 | "actions": [{}] 8 | } 9 | 10 | module.exports = ListItemModels; -------------------------------------------------------------------------------- /src/documentation/pages/Components/ListItem/examples/ListItemUnreadExampleModel.js: -------------------------------------------------------------------------------- 1 | var ListItemModels = { 2 | "primaryText": "Alton Lafferty", 3 | "secondaryText": "Meeting notes", 4 | "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", 5 | "metaText": "2:42p", 6 | "state": "is-unread is-selectable", 7 | "actions": [{}] 8 | } 9 | 10 | module.exports = ListItemModels; -------------------------------------------------------------------------------- /src/documentation/pages/Components/ListItem/examples/ListItemUnseenExampleModel.js: -------------------------------------------------------------------------------- 1 | var ListItemModels = { 2 | "primaryText": "Alton Lafferty", 3 | "secondaryText": "Meeting notes", 4 | "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", 5 | "metaText": "2:42p", 6 | "state": "is-unseen is-selectable", 7 | "actions": [{}] 8 | } 9 | 10 | module.exports = ListItemModels; -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBanner/MessageBanner.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "MessageBanner", 3 | overview: "Presents a message to the user, with an optional call to action. The message is typically an error, update, or alert.
", 4 | variants: [ 5 | { 6 | name: "Default MessageBanner", 7 | templateFile: "MessageBannerExampleElem", 8 | model: "MessageBannerExampleModel" 9 | } 10 | ], 11 | methods: [ 12 | { 13 | name: "init()", 14 | parameters: [], 15 | description: "Initializes component" 16 | }, 17 | { 18 | name: "show()", 19 | parameters: [], 20 | description: "Shows MessageBanner if hidden" 21 | }, 22 | { 23 | name: "showBanner()", 24 | parameters: [], 25 | description: "Shows MessageBanner if hidden, (deprecated) now use show()" 26 | } 27 | ], 28 | jsFile: "MessageBannerExampleJS" 29 | } 30 | 31 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBanner/examples/MessageBannerExampleElem.hbs: -------------------------------------------------------------------------------- 1 | {{> MessageBanner props=props }} -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBanner/examples/MessageBannerExampleJS.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBanner/examples/MessageBannerExampleModel.js: -------------------------------------------------------------------------------- 1 | var MessageBannerExampleModel = { 2 | "message": "You have reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.", 3 | "button": { 4 | "name": "Button", 5 | "props": { 6 | "label": "Get More Storage", 7 | "modifier": "primary", 8 | "tag": "button" 9 | } 10 | } 11 | } 12 | 13 | module.exports = MessageBannerExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBar/MessageBar.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "MessageBar", 3 | overview: "A MessageBar is an area at the top of a primary view that displays relevant status information. You can use a MessageBar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.
", 4 | availableReact: true, 5 | variants: [ 6 | { 7 | name: "Default MessageBar", 8 | templateFile: "MessageBarExample", 9 | model: "MessageBarDefaultModel" 10 | }, 11 | { 12 | name: "Success MessageBar", 13 | templateFile: "MessageBarExample", 14 | model: "MessageBarSuccessModel" 15 | }, 16 | { 17 | name: "Error MessageBar", 18 | templateFile: "MessageBarExample", 19 | model: "MessageBarErrorModel" 20 | }, 21 | { 22 | name: "Blocked MessageBar", 23 | templateFile: "MessageBarExample", 24 | model: "MessageBarBlockedModel" 25 | }, 26 | { 27 | name: "Warning MessageBar", 28 | templateFile: "MessageBarExample", 29 | model: "MessageBarWarningModel" 30 | }, 31 | { 32 | name: "Severe Warning MessageBar", 33 | templateFile: "MessageBarExample", 34 | model: "MessageBarSevereWarningModel" 35 | } 36 | ] 37 | } 38 | 39 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBar/examples/MessageBarBlockedModel.js: -------------------------------------------------------------------------------- 1 | var MessageBarExampleProps = { 2 | "modifier": "ms-MessageBar--blocked", 3 | "iconModifiers": "ms-Icon--Blocked" 4 | } 5 | 6 | module.exports = MessageBarExampleProps; 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBar/examples/MessageBarDefaultModel.js: -------------------------------------------------------------------------------- 1 | var MessageBarExampleProps = { 2 | "iconModifiers": "ms-Icon--Info" 3 | } 4 | 5 | module.exports = MessageBarExampleProps; 6 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBar/examples/MessageBarErrorModel.js: -------------------------------------------------------------------------------- 1 | var MessageBarExampleProps = { 2 | "modifier": "ms-MessageBar--error", 3 | "iconModifiers": "ms-Icon--ErrorBadge" 4 | } 5 | 6 | module.exports = MessageBarExampleProps; 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBar/examples/MessageBarExample.hbs: -------------------------------------------------------------------------------- 1 | {{> MessageBar props=props }} -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBar/examples/MessageBarSevereWarningModel.js: -------------------------------------------------------------------------------- 1 | var MessageBarExampleProps = { 2 | "modifier": "ms-MessageBar--severeWarning", 3 | "iconModifiers": "ms-Icon--Warning" 4 | } 5 | 6 | module.exports = MessageBarExampleProps; 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBar/examples/MessageBarSuccessModel.js: -------------------------------------------------------------------------------- 1 | var MessageBarExampleProps = { 2 | "modifier": "ms-MessageBar--success", 3 | "iconModifiers": "ms-Icon--Completed" 4 | } 5 | 6 | module.exports = MessageBarExampleProps; 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/MessageBar/examples/MessageBarWarningModel.js: -------------------------------------------------------------------------------- 1 | var MessageBarExampleProps = { 2 | "modifier": "ms-MessageBar--warning", 3 | "iconModifiers": "ms-Icon--Info" 4 | } 5 | 6 | module.exports = MessageBarExampleProps; 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/OrgChart/OrgChart.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "OrgChart", 3 | overview: "Displays multiple Persona components in groups with headers in order to show the hierarchy of an organization or team.
", 4 | variants: [ 5 | { 6 | name: "Default OrgChart", 7 | templateFile: "OrgChartElem", 8 | model: "OrgChartExampleModel" 9 | } 10 | ] 11 | } 12 | 13 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/OrgChart/examples/OrgChartElem.hbs: -------------------------------------------------------------------------------- 1 | {{> OrgChart props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/Overlay/Overlay.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "Overlay", 3 | overview: "Overlays are used to render a semi-transparent layer on top of existing UI. Overlays help focus the user on the content that sits above the added layer and are often used to help designate a modal or blocking experience. Overlays can be seen used in conjunction with Panels and Dialogs.
", 4 | availableReact: true, 5 | variants: [ 6 | { 7 | name: "Default Overlay", 8 | templateFile: "OverlayExample", 9 | model: "OverlayDefaultExampleModel" 10 | }, 11 | { 12 | name: "Dark Overlay", 13 | templateFile: "OverlayExample", 14 | model: "OverlayDarkExampleModel" 15 | } 16 | ], 17 | methods: [ 18 | { 19 | name: "remove()", 20 | parameters: [], 21 | description: "Removes the component from page" 22 | }, 23 | { 24 | name: "show()", 25 | parameters: [], 26 | description: "Shows the component" 27 | }, 28 | { 29 | name: "hide()", 30 | parameters: [], 31 | description: "Hides the component" 32 | } 33 | ], 34 | jsFile: "OverlayExampleJS" 35 | } 36 | 37 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Overlay/examples/OverlayDarkExample.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{> Overlay props=props }}
3 |
4 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Overlay/examples/OverlayDarkExampleModel.js:
--------------------------------------------------------------------------------
1 | var OverlayModels = {
2 | "modifier": "dark"
3 | }
4 |
5 | module.exports = OverlayModels;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Overlay/examples/OverlayDefaultExampleModel.js:
--------------------------------------------------------------------------------
1 | var OverlayModels = {
2 | }
3 |
4 | module.exports = OverlayModels;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Overlay/examples/OverlayExample.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{> Overlay props=props }}
3 |
4 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Overlay/examples/OverlayExampleJS.hbs:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Panel/examples/PanelDefaultExampleModel.js:
--------------------------------------------------------------------------------
1 | var PanelExampleProps = {
2 | "button": {
3 | "label": "Open Panel",
4 | "tag": "button"
5 | },
6 | "headerText": "Panel",
7 | "content": "Content goes here"
8 | }
9 |
10 | module.exports = PanelExampleProps;
11 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Panel/examples/PanelDocExampleJS.hbs:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Panel/examples/PanelExample.hbs:
--------------------------------------------------------------------------------
1 | {{> Button props=props.button}}
2 | {{> Panel props=props}}
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Panel/examples/PanelExampleProps.js:
--------------------------------------------------------------------------------
1 | var PanelExampleProps = {
2 | "button": {
3 | "label": "Open Panel",
4 | "tag": "button"
5 | },
6 | "headerText": "Panel",
7 | "content": "Content goes here"
8 | }
9 |
10 | module.exports = PanelExampleProps;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Panel/examples/PanelExtraExtraLargeExampleModel.js:
--------------------------------------------------------------------------------
1 | var PanelExampleProps = {
2 | "button": {
3 | "label": "Open Panel",
4 | "tag": "button"
5 | },
6 | "headerText": "Extra extra large panel",
7 | "content": "Content goes here",
8 | "modifier": [
9 | {
10 | "name": "xxl"
11 | }
12 | ]
13 | }
14 |
15 | module.exports = PanelExampleProps;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Panel/examples/PanelExtraLargeExampleModel.js:
--------------------------------------------------------------------------------
1 | var PanelExampleProps = {
2 | "button": {
3 | "label": "Open Panel",
4 | "tag": "button"
5 | },
6 | "headerText": "Extra large panel",
7 | "content": "Content goes here",
8 | "modifier": [
9 | {
10 | "name": "xl"
11 | }
12 | ]
13 | }
14 |
15 | module.exports = PanelExampleProps;
16 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Panel/examples/PanelLargeExampleModel.js:
--------------------------------------------------------------------------------
1 | var PanelExampleProps = {
2 | "button": {
3 | "label": "Open Panel",
4 | "tag": "button"
5 | },
6 | "headerText": "Large panel",
7 | "content": "Content goes here",
8 | "modifier": [
9 | {
10 | "name": "lg"
11 | }
12 | ]
13 | }
14 |
15 | module.exports = PanelExampleProps;
16 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Panel/examples/PanelLargeFixedExampleModel.js:
--------------------------------------------------------------------------------
1 | var PanelExampleProps = {
2 | "button": {
3 | "label": "Open Panel",
4 | "tag": "button"
5 | },
6 | "headerText": "Large panel",
7 | "content": "Content goes here",
8 | "modifier": [
9 | {
10 | "name": "lg"
11 | },
12 | {
13 | "name": "fixed"
14 | }
15 | ]
16 | }
17 |
18 | module.exports = PanelExampleProps;
19 |
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Panel/examples/PanelLeftExampleModel.js:
--------------------------------------------------------------------------------
1 | var PanelExampleProps = {
2 | "button": {
3 | "label": "Open Panel",
4 | "tag": "button"
5 | },
6 | "headerText": "Left Panel",
7 | "content": "Content goes here",
8 | "modifier": [
9 | {
10 | "name": "left"
11 | }
12 | ]
13 | }
14 |
15 | module.exports = PanelExampleProps;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/Panel/examples/PanelMediumExampleModel.js:
--------------------------------------------------------------------------------
1 | var PanelExampleProps = {
2 | "button": {
3 | "label": "Open Panel",
4 | "tag": "button"
5 | },
6 | "headerText": "Medium Panel",
7 | "content": "Content goes here",
8 | "modifier": [
9 | {
10 | "name": "md"
11 | }
12 | ]
13 | }
14 |
15 | module.exports = PanelExampleProps;
--------------------------------------------------------------------------------
/src/documentation/pages/Components/PeoplePicker/PeoplePicker.Searching.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/office-ui-fabric-js/b0fc9e164a3d31c2170f9ba7880da88a7a053006/src/documentation/pages/Components/PeoplePicker/PeoplePicker.Searching.png
--------------------------------------------------------------------------------
/src/documentation/pages/Components/PeoplePicker/PeoplePicker.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | componentName: "PeoplePicker",
3 | overview: "A form input that allows for the choice of one or more people.
", 4 | availableReact: true, 5 | variants: [ 6 | { 7 | name: "Default PeoplePicker", 8 | templateFile: "PeoplePickerExample", 9 | model: "PeoplePickerExampleModel" 10 | }, 11 | { 12 | name: "Compact PeoplePicker", 13 | templateFile: "PeoplePickerExample", 14 | model: "PeoplePickerCompactExampleModel" 15 | }, 16 | { 17 | name: "FacePile PeoplePicker", 18 | templateFile: "PeoplePickerExample", 19 | model: "PeoplePickerFacePileExampleModel" 20 | } 21 | ], 22 | jsFile: "PeoplePickerExampleJS" 23 | } 24 | 25 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/PeoplePicker/examples/PeoplePickerExample.hbs: -------------------------------------------------------------------------------- 1 | {{> PeoplePicker props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/PeoplePicker/examples/PeoplePickerExampleJS.hbs: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/PeoplePicker/examples/PeoplePickerMembersExampleModel.js: -------------------------------------------------------------------------------- 1 | var PeoplePickerMembersExampleModel = { 2 | "modifiers": [ 3 | { 4 | "name": "membersList" 5 | } 6 | ], 7 | "textFieldProps": { 8 | "textfield": true, 9 | "modifier": "textFieldUnderlined", 10 | "placeholder": "Select or enter an option" 11 | }, 12 | "groups": [ 13 | { 14 | "title": "Contacts", 15 | "personas": [ 16 | { 17 | "component": "Persona", 18 | "props": { 19 | "initials": "RM", 20 | "initialsColor": "blue", 21 | "primaryText": "Russel Miller", 22 | "secondaryText": "Sales", 23 | "modifiers": [ 24 | { 25 | "name": "xs" 26 | } 27 | ] 28 | }, 29 | "state": "is-selected" 30 | }, 31 | { 32 | "component": "Persona", 33 | "props": { 34 | "initials": "DF", 35 | "initialsColor": "purple", 36 | "primaryText": "Douglas Fielder", 37 | "secondaryText": "Public Relations", 38 | "modifiers": [ 39 | { 40 | "name": "xs" 41 | } 42 | ] 43 | } 44 | } 45 | ] 46 | } 47 | ], 48 | "searchMoreText": "Search my groups" 49 | } 50 | 51 | module.exports = PeoplePickerMembersExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaDefaultExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Alton Lafferty", 4 | "secondaryText": "Accountant", 5 | "icon": "SkypeCheck" 6 | } 7 | 8 | module.exports = PersonaExampleProps; 9 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaExample.hbs: -------------------------------------------------------------------------------- 1 | {{> Persona props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaExampleJS.hbs: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaExtraLargeExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Alton Lafferty", 4 | "secondaryText": "Accountant", 5 | "tertiaryText": "In a meeting", 6 | "optionalText": "Available at 4:00pm", 7 | "icon": "SkypeCheck", 8 | "modifiers": [ 9 | { 10 | "name": "xl" 11 | } 12 | ] 13 | } 14 | 15 | module.exports = PersonaExampleProps; 16 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaExtraSmallExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Alton Lafferty", 4 | "icon": "SkypeCheck", 5 | "modifiers": [ 6 | { 7 | "name": "xs" 8 | } 9 | ] 10 | } 11 | 12 | module.exports = PersonaExampleProps; 13 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaInitialsExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "initials": "AL", 3 | "initialsColor": "blue", 4 | "primaryText": "Alton Lafferty", 5 | "icon": "SkypeCheck" 6 | } 7 | 8 | module.exports = PersonaExampleProps; 9 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaLargeExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Alton Lafferty", 4 | "secondaryText": "Accountant", 5 | "tertiaryText": "In a meeting", 6 | "icon": "SkypeCheck", 7 | "modifiers": [ 8 | { 9 | "name": "lg" 10 | } 11 | ] 12 | } 13 | 14 | module.exports = PersonaExampleProps; 15 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaPresenceAvailableExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Alton Lafferty", 4 | "secondaryText": "Accountant", 5 | "icon": "SkypeCheck", 6 | "modifiers": [ 7 | { 8 | "name": "available" 9 | } 10 | ] 11 | } 12 | 13 | module.exports = PersonaExampleProps; 14 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaPresenceAwayExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Alton Lafferty", 4 | "secondaryText": "Accountant", 5 | "icon": "SkypeClock", 6 | "modifiers": [ 7 | { 8 | "name": "away" 9 | } 10 | ] 11 | } 12 | 13 | module.exports = PersonaExampleProps; 14 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaPresenceBlockedExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Alton Lafferty", 4 | "secondaryText": "Accountant", 5 | "modifiers": [ 6 | { 7 | "name": "blocked" 8 | } 9 | ] 10 | } 11 | 12 | module.exports = PersonaExampleProps; 13 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaPresenceBusyExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Alton Lafferty", 4 | "secondaryText": "Accountant", 5 | "modifiers": [ 6 | { 7 | "name": "busy" 8 | } 9 | ] 10 | } 11 | 12 | module.exports = PersonaExampleProps; 13 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaPresenceDNDExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Alton Lafferty", 4 | "secondaryText": "Accountant", 5 | "icon": "SkypeMinus", 6 | "modifiers": [ 7 | { 8 | "name": "dnd" 9 | } 10 | ] 11 | } 12 | 13 | module.exports = PersonaExampleProps; 14 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaPresenceOfflineExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Alton Lafferty", 4 | "secondaryText": "Accountant", 5 | "modifiers": [ 6 | { 7 | "name": "offline" 8 | } 9 | ] 10 | } 11 | 12 | module.exports = PersonaExampleProps; 13 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaSmallExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Alton Lafferty", 4 | "secondaryText": "Accountant", 5 | "icon": "SkypeCheck", 6 | "modifiers": [ 7 | { 8 | "name": "sm" 9 | } 10 | ] 11 | } 12 | 13 | module.exports = PersonaExampleProps; 14 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaTinyExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "primaryText": "Alton Lafferty", 3 | "icon": "SkypeCheck", 4 | "modifiers": [ 5 | { 6 | "name": "tiny" 7 | } 8 | ] 9 | } 10 | 11 | module.exports = PersonaExampleProps; 12 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Persona/examples/PersonaTokenExampleModel.js: -------------------------------------------------------------------------------- 1 | var PersonaExampleProps = { 2 | "image": "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/images/persona.person.png", 3 | "primaryText": "Gerrad Matteu", 4 | "actionIcon": "x", 5 | "icon": "SkypeCheck", 6 | "modifiers": [ 7 | { 8 | "name": "token" 9 | } 10 | ] 11 | } 12 | 13 | module.exports = PersonaExampleProps; 14 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/PersonaCard/PersonaCard.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "PersonaCard", 3 | overview: "The visualization of details of an individual including Skype contact details, email, location information, and location within the hierarchy of an organization. Within Office 365, PersonaCards often appear when a user hovers, taps, or clicks on a Persona.
", 4 | variants: [ 5 | { 6 | name: "Default PersonaCard", 7 | templateFile: "PersonaCardExample", 8 | model: "PersonaCardExampleModel" 9 | } 10 | ], 11 | jsFile: "PersonaCardExampleJS" 12 | } 13 | 14 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/PersonaCard/examples/PersonaCardExample.hbs: -------------------------------------------------------------------------------- 1 | {{> PersonaCard props=props }} -------------------------------------------------------------------------------- /src/documentation/pages/Components/PersonaCard/examples/PersonaCardExampleJS.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Pivot/examples/PivotDefaultExampleModel.js: -------------------------------------------------------------------------------- 1 | var PivotExampleProps = { 2 | "links": [ 3 | { 4 | "text": "My files", 5 | "state": "is-selected", 6 | "name": "files", 7 | "content": "This is the my files tab." 8 | }, 9 | { 10 | "text": "Recent", 11 | "name": "recent", 12 | "content": "This is the recent tab." 13 | }, 14 | { 15 | "text": "Shared with me", 16 | "name": "shared", 17 | "content": "This is the shared with me tab." 18 | } 19 | ], 20 | "hasEllipsis": true 21 | } 22 | 23 | module.exports = PivotExampleProps; 24 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Pivot/examples/PivotExample.hbs: -------------------------------------------------------------------------------- 1 | {{> Pivot props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/Pivot/examples/PivotExampleJS.hbs: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Pivot/examples/PivotLargeExampleModel.js: -------------------------------------------------------------------------------- 1 | var PivotExampleProps = { 2 | "modifiers": [ 3 | { 4 | "name": "large" 5 | } 6 | ], 7 | "links": [ 8 | { 9 | "text": "My files", 10 | "state": "is-selected", 11 | "name": "files", 12 | "content": "This is the my files tab." 13 | }, 14 | { 15 | "text": "Recent", 16 | "name": "recent", 17 | "content": "This is the recent tab." 18 | }, 19 | { 20 | "text": "Shared with me", 21 | "name": "shared", 22 | "content": "This is the shared with me tab." 23 | } 24 | ], 25 | "hasEllipsis": true 26 | } 27 | 28 | module.exports = PivotExampleProps; 29 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Pivot/examples/PivotLargeTabsExampleModel.js: -------------------------------------------------------------------------------- 1 | var PivotExampleProps = { 2 | "modifiers": [ 3 | { 4 | "name": "large" 5 | }, 6 | { 7 | "name": "tabs" 8 | } 9 | ], 10 | "links": [ 11 | { 12 | "text": "My files", 13 | "state": "is-selected", 14 | "name": "files", 15 | "content": "This is the my files tab." 16 | }, 17 | { 18 | "text": "Recent", 19 | "name": "recent", 20 | "content": "This is the recent tab." 21 | }, 22 | { 23 | "text": "Shared with me", 24 | "name": "shared", 25 | "content": "This is the shared with me tab." 26 | } 27 | ], 28 | "hasEllipsis": true 29 | } 30 | 31 | module.exports = PivotExampleProps; 32 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Pivot/examples/PivotTabsExampleModel.js: -------------------------------------------------------------------------------- 1 | var PivotExampleProps = { 2 | "modifiers": [ 3 | { 4 | "name": "tabs" 5 | } 6 | ], 7 | "links": [ 8 | { 9 | "text": "My files", 10 | "state": "is-selected", 11 | "name": "files", 12 | "content": "This is the my files tab." 13 | }, 14 | { 15 | "text": "Recent", 16 | "name": "recent", 17 | "content": "This is the recent tab." 18 | }, 19 | { 20 | "text": "Shared with me", 21 | "name": "shared", 22 | "content": "This is the shared with me tab." 23 | } 24 | ], 25 | "hasEllipsis": true 26 | } 27 | 28 | module.exports = PivotExampleProps; 29 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/ProgressIndicator/examples/ProgressIndicatorExample.hbs: -------------------------------------------------------------------------------- 1 | {{> ProgressIndicator props=props }} -------------------------------------------------------------------------------- /src/documentation/pages/Components/ProgressIndicator/examples/ProgressIndicatorExampleJS.hbs: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/ProgressIndicator/examples/ProgressIndicatorExampleModel.js: -------------------------------------------------------------------------------- 1 | var ProgressIndicatorExampleModel = { 2 | "title": "Example.jpg", 3 | "description": "My Progress Description" 4 | } 5 | 6 | module.exports = ProgressIndicatorExampleModel; 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/SearchBox/examples/SearchBoxCollapsedExampleModel.js: -------------------------------------------------------------------------------- 1 | var SearchBoxExampleProps = { 2 | "label": "Search", 3 | "defaultValue": "", 4 | "icon": "Search", 5 | "modifier": "commandBar", 6 | "state": "is-collapsed", 7 | "clearButton": { 8 | "component": "CommandButton", 9 | "props": { 10 | "icon": "Clear", 11 | "modifier": "noLabel", 12 | "tag": "button", 13 | "customClasses": "ms-SearchBox-clear" 14 | } 15 | }, 16 | "filterButton": { 17 | "component": "CommandButton", 18 | "props": { 19 | "icon": "Filter", 20 | "modifier": "noLabel", 21 | "tag": "button", 22 | "customClasses": "ms-SearchBox-filter" 23 | } 24 | }, 25 | "exitButton": { 26 | "component": "CommandButton", 27 | "props": { 28 | "icon": "ChromeBack", 29 | "modifier": "noLabel", 30 | "tag": "button", 31 | "customClasses": "ms-SearchBox-exit" 32 | } 33 | } 34 | } 35 | 36 | module.exports = SearchBoxExampleProps; 37 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/SearchBox/examples/SearchBoxCommandbarExampleModel.js: -------------------------------------------------------------------------------- 1 | var SearchBoxExampleProps = { 2 | "label": "Search", 3 | "defaultValue": "", 4 | "icon": "Search", 5 | "modifier": "commandBar", 6 | "clearButton": { 7 | "component": "CommandButton", 8 | "props": { 9 | "icon": "Clear", 10 | "modifier": "noLabel", 11 | "tag": "button", 12 | "customClasses": "ms-SearchBox-clear" 13 | } 14 | }, 15 | "filterButton": { 16 | "component": "CommandButton", 17 | "props": { 18 | "icon": "Filter", 19 | "modifier": "noLabel", 20 | "tag": "button", 21 | "customClasses": "ms-SearchBox-filter" 22 | } 23 | }, 24 | "exitButton": { 25 | "component": "CommandButton", 26 | "props": { 27 | "icon": "ChromeBack", 28 | "modifier": "noLabel", 29 | "tag": "button", 30 | "customClasses": "ms-SearchBox-exit" 31 | } 32 | } 33 | } 34 | 35 | module.exports = SearchBoxExampleProps; 36 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/SearchBox/examples/SearchBoxExample.hbs: -------------------------------------------------------------------------------- 1 | {{> SearchBox props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/SearchBox/examples/SearchBoxExampleJS.hbs: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/SearchBox/examples/SearchBoxExampleModel.js: -------------------------------------------------------------------------------- 1 | var SearchBoxExampleProps = { 2 | "label": "Search", 3 | "defaultValue": "", 4 | "icon": "Search", 5 | "clearButton": { 6 | "component": "CommandButton", 7 | "props": { 8 | "icon": "Clear", 9 | "modifier": "noLabel", 10 | "tag": "button", 11 | "customClasses": "ms-SearchBox-clear" 12 | } 13 | } 14 | } 15 | 16 | module.exports = SearchBoxExampleProps; 17 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Spinner/examples/SpinnerExample.hbs: -------------------------------------------------------------------------------- 1 | {{> Spinner props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/Spinner/examples/SpinnerExampleJS.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Spinner/examples/SpinnerExampleModel.js: -------------------------------------------------------------------------------- 1 | var SpinnerExampleModel = { 2 | } 3 | 4 | module.exports = SpinnerExampleModel; 5 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Spinner/examples/SpinnerLargeExampleModel.js: -------------------------------------------------------------------------------- 1 | var SpinnerLargeExampleModel = { 2 | modifier: "large" 3 | } 4 | 5 | module.exports = SpinnerLargeExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Spinner/examples/SpinnerLargeWithLabelExampleModel.js: -------------------------------------------------------------------------------- 1 | var SpinnerLargeWithLabelExampleModel = { 2 | label: "Loading...", 3 | modifier: "large" 4 | } 5 | 6 | module.exports = SpinnerLargeWithLabelExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Spinner/examples/SpinnerWithLabelExampleModel.js: -------------------------------------------------------------------------------- 1 | var SpinnerWithLabelExampleModel = { 2 | label: "Loading..." 3 | } 4 | 5 | module.exports = SpinnerWithLabelExampleModel; 6 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Table/Table.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "Table", 3 | overview: "Presents tabular data with multiple rows and columns. The table's width is flexible, but it does not have any advanced responsive behaviors.
", 4 | variants: [ 5 | { 6 | name: "Default Table", 7 | templateFile: "TableExample", 8 | model: "TableExampleModel" 9 | }, 10 | { 11 | name: "Fixed Table", 12 | templateFile: "TableExample", 13 | model: "TableFixedExampleModel" 14 | }, 15 | { 16 | name: "Selectable Table", 17 | templateFile: "TableExample", 18 | model: "TableSelectableExampleModel" 19 | } 20 | ], 21 | jsFile: "TableExampleJS" 22 | } 23 | 24 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Table/examples/TableExample.hbs: -------------------------------------------------------------------------------- 1 | {{> Table props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/Table/examples/TableExampleJS.hbs: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/TextField/TextField.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "TextField", 3 | overview: `The TextField component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.
`, 4 | availableReact: true, 5 | variants: [ 6 | { 7 | name: "Default TextField", 8 | templateFile: "TextFieldExample", 9 | model: "TextFieldExampleModel" 10 | }, 11 | { 12 | name: "Multiline TextField", 13 | templateFile: "TextFieldExample", 14 | model: "TextFieldMultilineExampleModel" 15 | }, 16 | { 17 | name: "Placeholder TextField", 18 | templateFile: "TextFieldExample", 19 | model: "TextFieldPlaceholderExampleModel" 20 | }, 21 | { 22 | name: "Underlined TextField", 23 | templateFile: "TextFieldExample", 24 | model: "TextFieldUnderlinedExampleModel" 25 | }, 26 | { 27 | name: "Disabled TextField", 28 | templateFile: "TextFieldExample", 29 | model: "TextFieldDisabledExampleModel" 30 | } 31 | ], 32 | states: [ 33 | { 34 | name: ".is-disabled", 35 | applied: ".ms-TextField", 36 | result: "Disables user input on TextField" 37 | } 38 | ], 39 | jsFile: "TextFieldExampleJS" 40 | } 41 | 42 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/TextField/examples/TextFieldDisabledExampleModel.js: -------------------------------------------------------------------------------- 1 | var TextFieldDisabledExampleModel = { 2 | "label": "Name", 3 | "textfield": true, 4 | "disabled": true 5 | } 6 | 7 | module.exports = TextFieldDisabledExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/TextField/examples/TextFieldExample.hbs: -------------------------------------------------------------------------------- 1 | {{> TextField props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/TextField/examples/TextFieldExampleJS.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/TextField/examples/TextFieldExampleModel.js: -------------------------------------------------------------------------------- 1 | var TextFieldExampleModel = { 2 | "label": "Name", 3 | "textfield": true 4 | } 5 | 6 | module.exports = TextFieldExampleModel; 7 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/TextField/examples/TextFieldMultilineExampleModel.js: -------------------------------------------------------------------------------- 1 | var TextFieldMultilineExampleModel = { 2 | "modifier": "multiline", 3 | "label": "Name", 4 | "multiline": true 5 | } 6 | 7 | module.exports = TextFieldMultilineExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/TextField/examples/TextFieldPlaceholderExampleModel.js: -------------------------------------------------------------------------------- 1 | var TextFieldPlaceholderExampleModel = { 2 | "label": "Given name", 3 | "textfield": true, 4 | "modifier": "placeholder" 5 | } 6 | 7 | module.exports = TextFieldPlaceholderExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/TextField/examples/TextFieldUnderlinedExampleModel.js: -------------------------------------------------------------------------------- 1 | var TextFieldUnderlinedExampleModel = { 2 | "label": "Name", 3 | "textfield": true, 4 | "modifier": "underlined" 5 | } 6 | 7 | module.exports = TextFieldUnderlinedExampleModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Toggle/Toggle.js: -------------------------------------------------------------------------------- 1 | var data = { 2 | componentName: "Toggle", 3 | overview: `Toggles represent a physical switch that allows users to turn things on or off. Use Toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action. Use a Toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best control to use.
`, 4 | availableReact: true, 5 | variants: [ 6 | { 7 | name: "Default Toggle", 8 | templateFile: "ToggleElem", 9 | model: "ToggleBasicModel" 10 | }, 11 | { 12 | name: "Disabled Toggle", 13 | templateFile: "ToggleElem", 14 | model: "ToggleDisabledModel" 15 | }, 16 | { 17 | name: "Text Left Toggle", 18 | templateFile: "ToggleElem", 19 | model: "ToggleTextLeftModel" 20 | } 21 | ], 22 | jsFile: "ToggleJS" 23 | } 24 | 25 | module.exports = data; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Toggle/examples/ToggleBasicModel.js: -------------------------------------------------------------------------------- 1 | var ToggleModelBasic = { 2 | "description": "Let apps use my location", 3 | "onText": "On", 4 | "offText": "Off", 5 | "demoID": "demo-toggle-3" 6 | } 7 | 8 | module.exports = ToggleModelBasic; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Toggle/examples/ToggleDisabledModel.js: -------------------------------------------------------------------------------- 1 | var ToggleDisabledModel = { 2 | "description": "Let apps use my location", 3 | "onText": "On", 4 | "offText": "Off", 5 | "demoID": "demo-toggle-2", 6 | "disabled": true 7 | } 8 | 9 | module.exports = ToggleDisabledModel; -------------------------------------------------------------------------------- /src/documentation/pages/Components/Toggle/examples/ToggleElem.hbs: -------------------------------------------------------------------------------- 1 | {{> Toggle props=props}} -------------------------------------------------------------------------------- /src/documentation/pages/Components/Toggle/examples/ToggleJS.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/documentation/pages/Components/Toggle/examples/ToggleTextLeftModel.js: -------------------------------------------------------------------------------- 1 | var ToggleTextLeftModel = { 2 | "modifier": "textLeft", 3 | "description": "Let apps use my location", 4 | "onText": "On", 5 | "offText": "Off", 6 | "demoID": "demo-toggle-1" 7 | } 8 | 9 | module.exports = ToggleTextLeftModel; -------------------------------------------------------------------------------- /src/documentation/pages/HomePage/HomePage.hbs: -------------------------------------------------------------------------------- 1 |
2 |
7 | Office UI Fabric JS
3 | Simple components that focus on appearance and styling while showing the visual language of Office. 4 | Get started 5 | Fabric Core {{packageData.dependencies.office-ui-fabric-core}} and Fabric JS {{packageData.version}} 6 |
8 |
--------------------------------------------------------------------------------
/src/documentation/sass/HLJS.scss:
--------------------------------------------------------------------------------
1 | .hljs {
2 | display: block;
3 | overflow-x: auto;
4 | padding: 0.5em;
5 | background: #F0F0F0
6 | }
7 |
8 | .hljs,
9 | .hljs-subst {
10 | color: #444
11 | }
12 |
13 | .hljs-comment {
14 | color: #888888
15 | }
16 |
17 | .hljs-keyword,
18 | .hljs-attribute,
19 | .hljs-selector-tag,
20 | .hljs-meta-keyword,
21 | .hljs-doctag,
22 | .hljs-name {
23 | font-weight: bold
24 | }
25 |
26 | .hljs-type,
27 | .hljs-string,
28 | .hljs-number,
29 | .hljs-selector-id,
30 | .hljs-selector-class,
31 | .hljs-quote,
32 | .hljs-template-tag,
33 | .hljs-deletion {
34 | color: #880000
35 | }
36 |
37 | .hljs-title,
38 | .hljs-section {
39 | color: #880000;
40 | font-weight: bold
41 | }
42 |
43 | .hljs-regexp,
44 | .hljs-symbol,
45 | .hljs-variable,
46 | .hljs-template-variable,
47 | .hljs-link,
48 | .hljs-selector-attr,
49 | .hljs-selector-pseudo {
50 | color: #BC6060
51 | }
52 |
53 | .hljs-literal {
54 | color: #78A960
55 | }
56 |
57 | .hljs-built_in,
58 | .hljs-bullet,
59 | .hljs-code,
60 | .hljs-addition {
61 | color: #397300
62 | }
63 |
64 | .hljs-meta {
65 | color: #1f7199
66 | }
67 |
68 | .hljs-meta-string {
69 | color: #4d99bf
70 | }
71 |
72 | .hljs-emphasis {
73 | font-style: italic
74 | }
75 |
76 | .hljs-strong {
77 | font-weight: bold
78 | }
--------------------------------------------------------------------------------
/src/documentation/sass/ODSearchbox.scss:
--------------------------------------------------------------------------------
1 | .od-SearchBox {
2 | background-color: $ms-color-neutralPrimaryAlt;
3 | width: 100%;
4 | padding-right: $od-Header-searchHeight;
5 | padding-left: 8px;
6 | height: 100%;
7 | position: relative;
8 | box-sizing: border-box;
9 |
10 | fieldset {
11 | border: 0;
12 | height: auto;
13 | padding: 0;
14 | margin: 0;
15 | }
16 |
17 | @include high-contrast {
18 | border: 1px solid $ms-color-white;
19 | }
20 |
21 | @include high-contrast-black-on-white {
22 | border: 1px solid $ms-color-black;
23 | }
24 | }
25 |
26 | .od-SearchBox-field {
27 | background-color: transparent;
28 | height: $od-Header-searchHeight;
29 | width: 100%;
30 | border: 0;
31 | font-size: $ms-font-size-l;
32 | color: $ms-color-white;
33 | }
34 |
35 | .od-SearchBox-button {
36 | background: none;
37 | border: 0;
38 | color: transparent;
39 | position: absolute;
40 | @include right(0);
41 | top: 0;
42 | height: $od-Header-searchHeight - 4px;
43 | width: $od-Header-searchHeight;
44 | overflow: hidden;
45 | line-height: 30px;
46 |
47 | &.ms-Icon:before {
48 | font-size: $ms-font-size-xl;
49 | color: $ms-color-white;
50 | position: absolute;
51 | }
52 | }
--------------------------------------------------------------------------------
/src/documentation/sass/style.scss:
--------------------------------------------------------------------------------
1 | @import "../../../node_modules/office-ui-fabric-core/src/sass/_Fabric.Common";
2 |
3 | // CSS Reset
4 | @import "./styles/reset";
5 |
6 | // Variables
7 | @import "./styles/variables";
8 |
9 | // Mixins
10 | @import "./styles/mixins";
11 |
12 | // Typography
13 | @import "./styles/typography";
14 |
15 | @import "Header";
16 |
17 | @import "SideBar";
18 |
19 | @import "AppContainer";
20 |
21 | @import "ODNavigation";
22 |
23 | @import "ODNavigationLink";
24 |
25 | @import "ODSearchbox";
26 |
27 | @import "CodeBlock";
28 |
29 | @import "HomePage";
30 |
31 | @import "PageHeader";
32 |
33 | @import "GetStarted";
34 |
35 | @import "ComponentPage";
36 |
37 | @import "ExampleCard";
38 |
39 | @import "HLJS";
40 |
41 | @import "Footer";
--------------------------------------------------------------------------------
/src/documentation/sass/styles/_reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | text-decoration: none;
26 | }
27 | /* HTML5 display-role reset for older browsers */
28 | article, aside, details, figcaption, figure,
29 | footer, header, hgroup, menu, nav, section {
30 | display: block;
31 | }
32 | body {
33 | line-height: 1;
34 | }
35 | ol, ul {
36 | list-style: none;
37 | }
38 | blockquote, q {
39 | quotes: none;
40 | }
41 | blockquote:before, blockquote:after,
42 | q:before, q:after {
43 | content: '';
44 | content: none;
45 | }
46 | table {
47 | border-collapse: collapse;
48 | border-spacing: 0;
49 | }
50 |
--------------------------------------------------------------------------------
/src/documentation/sass/styles/_typography.scss:
--------------------------------------------------------------------------------
1 | // Standard text size and spacing
2 | body {
3 | color: $ms-color-neutralPrimary;
4 | font-family: $ms-font-family-base;
5 | font-size: $ms-font-size-m;
6 | line-height: 1.5;
7 | }
8 |
9 | // Headings
10 | h2, h3, h4, h5 {
11 | color: $ms-color-black;
12 | font-weight: $ms-font-weight-semilight;
13 | margin-bottom: 16px;
14 | }
15 |
16 | h2 {
17 | font-size: $font-size-big;
18 | font-weight: $ms-font-weight-light;
19 | margin-bottom: 4px;
20 | margin-top: 48px;
21 | }
22 |
23 | h3 {
24 | font-size: $ms-font-size-l;
25 | margin: 40px 0 8px 0;
26 | }
27 |
28 | h4 {
29 | color: $ms-color-neutralDark;
30 | font-size: $ms-font-size-m;
31 | font-weight: $ms-font-weight-semibold;
32 | margin: 8px 0;
33 | }
34 |
35 | // Paragraphs and lists
36 | p, ul, ol {
37 | font-size: $ms-font-size-m;
38 | font-weight: $ms-font-weight-regular;
39 | margin-bottom: 12px;
40 | }
41 |
42 | ol {
43 | list-style-position: inside;
44 | list-style-type: decimal;
45 | }
46 |
47 | // Inline text elements
48 | a {
49 | color: $ms-color-themePrimary;
50 | text-decoration: none;
51 | }
52 |
53 | em {
54 | font-style: italic;
55 | }
56 |
57 | strong {
58 | font-weight: $ms-font-weight-semibold;
59 | }
60 |
61 | code {
62 | font-family: monospace;
63 | }
64 |
--------------------------------------------------------------------------------
/src/documentation/templates/bundle-template.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Office UI Fabric
5 | // --------------------------------------------------
6 | // SCSS template for building a bundle of Fabric and Fabric Components CSS.
7 |
8 | @import '../../../src/sass/_Fabric.Common.scss';
9 |
10 | <%
11 | var relativePath = '../../../src/';
12 |
13 | // Then, include each dependency
14 | dependencies.forEach(function(dep) {
15 | %>
16 | @import '<%= relativePath + dep %>';<%
17 | }); %>
--------------------------------------------------------------------------------
/src/documentation/templates/codeBlock.hbs:
--------------------------------------------------------------------------------
1 |
9 | 
10 | Framework-independent and open source
11 |
15 |
10 | Framework-independent and open source
11 | Fabric JS provides you with simple components that don't require a framework. It's open source, easy to extend, and ready for you to add what makes your project unique.
12 |Fabric JS works great with Add-ins and is the recommended front-end toolkit for making your next Office Add-in.
13 | See components 14 |
2 |
--------------------------------------------------------------------------------
/src/documentation/templates/component-manifest-template.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Office UI Fabric
5 | // --------------------------------------------------
6 | // Template for building a standalone component with dependencies included.
7 |
8 | /*Sasssssssss*/
9 |
10 | @import '../sass/Fabric.Common';
11 | <% dependencies.forEach(function(dep){ %>
12 | @import '../components/<%= dep %>/<%= dep %>';
13 | <% }); %>
14 | @import '../components/<%= componentName %>/<%= componentName %>';
--------------------------------------------------------------------------------
/src/samples/VideoPortal/sass/Base.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Video Portal Example App
5 | // --------------------------------------------------
6 | // Base styles
7 |
8 |
9 | * {
10 | box-sizing: border-box;
11 | }
12 |
13 | html,
14 | body {
15 | @include ms-font-m;
16 | padding: 0;
17 | margin: 0;
18 | }
19 |
20 | a {
21 | @include ms-Link;
22 | font-size: inherit;
23 | text-decoration: none;
24 | }
25 |
26 | .VideoPortal-content {
27 | position: relative;
28 | }
29 |
30 | .VideoPortal-navBar {
31 | display: block;
32 | top: 0;
33 | width: 100%;
34 | z-index: 101;
35 | height: 40px;
36 | }
37 |
38 | .VideoPortal-page {
39 | overflow: visible;
40 | position: relative;
41 | padding-bottom: 50px;
42 | }
43 |
--------------------------------------------------------------------------------
/src/samples/VideoPortal/sass/ChannelPage.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Video Portal Example App
5 | // --------------------------------------------------
6 | // Individual Channel Page styles
7 |
8 |
9 | .ChannelPage-content {
10 | padding: 10px;
11 | padding-top: 20px;
12 | }
13 |
14 | .ChannelPage-pivots {
15 | margin-bottom: 20px;
16 |
17 | // Small override for Fabric Pivot component
18 | .ms-Pivot-link {
19 | font-size: $ms-font-size-xl;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/samples/VideoPortal/sass/ChannelsPage.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Video Portal Example App
5 | // --------------------------------------------------
6 | // Channels List page styles
7 |
8 |
9 | .ChannelsPage {
10 | padding: 10px;
11 | }
12 |
13 | .ChannelGroup-title {
14 | padding-bottom: 10px;
15 | border-bottom: 1px solid $ms-color-neutralLight;
16 | }
17 |
18 | .ChannelGroup-channel {
19 | padding: 10px 0 10px 10px;
20 | border-width: 4px;
21 | border-left-style: solid;
22 | margin-bottom: 10px;
23 | display: block;
24 |
25 | &:hover {
26 | color: $ms-color-black;
27 | }
28 | }
29 |
30 | @media (min-width: $ms-screen-md-min) {
31 | .ChannelsPage {
32 | padding: 20px;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/samples/VideoPortal/sass/HomePage.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Video Portal Example App
5 | // --------------------------------------------------
6 | // Home page styles
7 |
8 |
9 | .HomePage-content {
10 | padding: 10px;
11 | padding-top: 20px;
12 | }
13 |
14 | .ChannelList-title {
15 | padding-left: 10px;
16 | border-width: 4px;
17 | border-left-style: solid;
18 | }
19 |
20 | .ChannelList-titleText {
21 | margin-right: 7px;
22 | }
23 |
--------------------------------------------------------------------------------
/src/samples/VideoPortal/sass/NavBar.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Video Portal Example App
5 | // --------------------------------------------------
6 | // Fabric NavBar override styles
7 |
8 | .ms-CommandBar--navBar {
9 | background-color: $ms-color-neutralLighter;
10 | }
--------------------------------------------------------------------------------
/src/samples/VideoPortal/sass/Utilities.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Video Portal Example App
5 | // --------------------------------------------------
6 | // Utility classes
7 |
8 |
9 | .u-contentCenter { // Utility for centering page areas regardless of parent container
10 | position: relative;
11 | margin: 0 auto;
12 | max-width: 100%;
13 | transition: $ms-duration1 all $ms-ease1;
14 | }
15 |
16 | @media (min-width: $ms-screen-lg-min) {
17 | .u-contentCenter {
18 | max-width: 960px;
19 | }
20 | }
21 |
22 | @media (min-width: $ms-screen-xxl-min) { // 1366
23 | // Use a larger container size for non-player pages
24 | .HomePage,
25 | .ChannelPage {
26 | .u-contentCenter {
27 | max-width: 1200px;
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/samples/VideoPortal/sass/VideoPortal.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 |
3 | //
4 | // Video Portal Example App
5 | // --------------------------------------------------
6 | // Load all page and component styles
7 |
8 |
9 | // Import both Fabric and Fabric Components by reference to access variables
10 | // and mixins from each without compiling their contents.
11 | @import '../../../../node_modules/office-ui-fabric-core/src/sass/Fabric.Common.scss';
12 | @import '../../../sass/Fabric.Components.scss';
13 |
14 | // Import all LESS
15 | @import 'Utilities';
16 | @import 'Base.scss';
17 | @import 'NavBar';
18 | @import 'VideoListItem';
19 | @import 'SpotLight';
20 | @import 'HomePage';
21 | @import 'PlayerPage';
22 | @import 'ChannelPage';
23 | @import 'ChannelsPage';
24 |
--------------------------------------------------------------------------------
/src/utilities/Polyfills.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
2 | // "use strict";
3 |
4 | interface Window {
5 | CustomEvent: Object;
6 | }
7 |
8 | // CustomEvent Polyfill to support IE
9 | (function () {
10 | function CustomEvent ( event, params ) {
11 | params = params || { bubbles: false, cancelable: false, detail: undefined };
12 | let evt: CustomEvent = document.createEvent("CustomEvent");
13 | evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
14 | return evt;
15 | };
16 | CustomEvent.prototype = Event.prototype;
17 | window.CustomEvent =
3 |
7 |
4 | {{{outputCode code language}}}
5 |
6 |