Merge 25634b4 into 00d5fd7

config/paths.js

@@ -72,7 +72,7 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appIndexJs: resolveModule(resolveApp, 'src/_playground/index'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),

package.json

@@ -14,7 +14,7 @@
     "build-js": "node scripts/build.js",
     "build:lint:fix": "eslint --fix 'src/**' --ext .js,.jsx --env browser,node",
     "build:lint": "eslint 'src/**' --ext .js,.jsx --env browser,node",
-    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__,Component.js",
+    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\",\"src/**/*.Component.js\",\"src/_playground/*\"",
     "deploy": "gh-pages -d build",
     "lint:fix": "npm run build:lint:fix",
     "lint:pre-commit": "printf \"running pre-commit lint...\"  && npm run lint && printf \"done!\n\"",

src/ActionBar/ActionBar.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ActionBar, ActionBarBack, ActionBarHeader, ActionBarActions, Button, Popover, Menu, MenuList, MenuItem } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const ActionBarComponent = () => {
     const actionBarBackBtnCode = `<ActionBar>

src/Alert/Alert.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Alert, Icon } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const AlertComponent = () => {
     const defaultAlertCode = '<Alert dismissable link="#" linkText="link">Default alert with a </Alert>';

src/Badge/Badge.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Badge, Label, Status, Counter, Button } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const BadgeComponent = () => {
     const defaultBadgeCode = `<Badge>Default</Badge>

src/Breadcrumb/Breadcrumb.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Breadcrumb, BreadcrumbItem } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import } from '../_playground';
 
 export const BreadcrumbComponent = () => {
     const breadcrumbHrefCode = `<Breadcrumb>

src/Button/Button.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, ButtonGroup } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const ButtonComponent = () => {
     const buttonOptionsCode = `<Button option="emphasized" onClick={() => clickBtnHandler('Emphasized')}>

src/Calendar/Calendar.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import {Calendar} from '../';
 
 export const CalendarComponent = () => {

src/ComboboxInput/ComboboxInput.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Import, Properties } from '../_playground';
 import { Menu, MenuItem, MenuList, ComboboxInput } from '../';
 
 export const ComboboxInputComponent = () => {

src/ContextualMenu/ContextualMenu.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description } from '../';
+import { DocsTile, DocsText, Separator, Header, Description } from '../_playground';
 import { Popover, Button, Menu, MenuList, MenuItem } from '../';
 
 export const ContextualMenuComponent = () => {

src/DatePicker/DatePicker.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { DatePicker } from '../';
 
 export const DatePickerComponent = () => {

src/Dropdown/Dropdown.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { Dropdown, Popover, Button, Menu, MenuList, MenuItem } from '../';
 
 export const DropdownComponent = () => {

src/Forms/Forms.Component.js

@@ -11,7 +11,7 @@ import {
     FormFieldset,
     FormLegend
 } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const FormsComponent = () => {
     const inputsCode = `<FormSet>

src/Icon/Icon.Component.js

@@ -9,7 +9,7 @@ import {
     Import,
     Properties,
     Playground
-} from '../';
+} from '../_playground';
 
 export const IconComponent = () => {
     const iconsCode = `<Icon glyph="cart" size="s" />

src/Identifier/Identifier.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Identifier } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 
 export const IdentifierComponent = () => {

src/Image/Image.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Image } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const ImageComponent = () => {
     const sizesImageCode = `<Image size="s" photo="https://placeimg.com/400/400/nature"></Image>

src/InlineHelp/InlineHelp.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { InlineHelp } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 
 export const InlineHelpComponent = () => {

src/InputGroup/InputGroup.Component.js

@@ -8,7 +8,7 @@ import {
     Import,
     Properties,
     Playground
-} from '../';
+} from '../_playground';
 import { FormItem, FormLabel, FormGroup, InputGroup, Button } from '../';
 
 export const InputGroupComponent = () => {

src/ListGroup/ListGroup.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, ListGroup, ListGroupItem, ListGroupItemActions, ListGroupItemCheckbox } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Playground } from '../_playground';
 
 export const ListGroupComponent = () => {
     const simpleListCode = `<ListGroup>

src/LocalizationEditor/LocalizationEditor.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Import, Properties } from '../_playground';
 import { LocalizationEditor } from '../';
 
 export const LocalizationEditorComponent = () => {

src/MegaMenu/MegaMenu.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { MegaMenu, MegaMenuList, MegaMenuGroup } from '../';
 
 export const MegaMenuComponent = () => {

src/Menu/Menu.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { Menu, MenuList, MenuItem, MenuGroup } from '../';
 
 export const MenuComponent = () => {

src/Modal/Modal.Component.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { Modal, Button } from '../';
 
 export class ModalComponent extends Component {

src/MultiInput/MultiInput.Component.js

@@ -1,13 +1,5 @@
 import React, { Component } from 'react';
-import {
-    DocsTile,
-    DocsText,
-    Separator,
-    Header,
-    Description,
-    Import,
-    Properties
-} from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { MultiInput } from '../';
 
 export class MultiInputComponent extends Component {

src/Pagination/Pagination.Component.js

@@ -1,14 +1,6 @@
 import React from 'react';
-import {
-    DocsTile,
-    DocsText,
-    Separator,
-    Header,
-    Description,
-    Import,
-    Properties,
-    Pagination
-} from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
+import { Pagination } from '../';
 
 export const PaginationComponent = () => {
     const handleClick = event => {

src/Panel/Panel.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import {
     Panel,
     PanelGrid,

src/Popover/Popover.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Popover, Image, Identifier, Icon, Menu, MenuList, MenuItem } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const PopoverComponent = () => {
     const popoverCode = `<Popover

src/SearchInput/SearchInput.Component.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { SearchInput } from './SearchInput';
 
 export class SearchInputComponent extends Component {

src/Shellbar/Shellbar.Component.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Menu, MenuList, MenuItem } from '..';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
+import { Menu, MenuList, MenuItem } from '../';
 import { Shellbar } from '..';
 var images = require.context('../../assets', true);
 

src/SideNavigation/SideNavigation.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { SideNav, SideNavList, SideNavGroup } from '../';
 
 export const SideNavigationComponent = () => {

src/Table/Table.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Image, Popover, Button, Menu, MenuList, MenuItem, Table } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const TableComponent = () => {
     const simpleTableCode = `<Table

src/Tabs/Tabs.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tabs, TabComponent } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const TabsComponent = () => {
     const tabscomponentCode = `

src/Tile/Tile.Component.js

@@ -16,7 +16,7 @@ import {
     MenuList,
     MenuItem
 } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const TileComponent = () => {
     const simpleTileCode = `<Tile>

src/Time/Time.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Time } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const TimeComponent = () => {
     const defaultTimeCode = '<Time />';

src/TimePicker/TimePicker.Component.js

@@ -8,7 +8,7 @@ import {
     Header,
     Description,
     Properties
-} from '../';
+} from '../_playground';
 
 export const TimePickerComponent = () => {
     const defaultTimeCode = '<TimePicker />';

src/Toggle/Toggle.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Toggle } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const ToggleComponent = () => {
     const toggleCode = `<Toggle size="xs" id="Yj07w604">

src/Token/Token.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Token } from './Token';
-import { DocsTile, DocsText, Separator, Header, Description, Import } from '..';
+import { DocsTile, DocsText, Separator, Header, Description, Import } from '../_playground';
 
 export const TokenComponent = () => {
     const tokenCode = `<Token>Bibendum</Token>

src/Tree/Tree.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { Tree} from '../';
 
 export const TreeComponent = () => {

src/App.scss → src/_playground/App.scss

@@ -1,6 +1,6 @@
-$fd-icons-path: '../node_modules/fiori-fundamentals/scss/icons/';
-$fd-fonts-path: '../node_modules/fiori-fundamentals/dist/fonts/';
-@import '../node_modules/fiori-fundamentals/scss/all.scss';
+$fd-icons-path: '../../node_modules/fiori-fundamentals/scss/icons/';
+$fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/';
+@import '../../node_modules/fiori-fundamentals/scss/all.scss';
 
 .App {
     background-color: white;