improves import statements

Author: Taushanova-Atanasova, Inna

src/ActionBar/ActionBar.Component.js

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

src/Alert/Alert.Component.js

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

src/Badge/Badge.Component.js

@@ -7,9 +7,9 @@ import {
   Header,
   Description,
   Import,
-  Properties
+  Properties,
+  Playground
 } from '../';
-import { Playground } from '../documentation/Playground/Playground';
 
 export const BadgeComponent = () => {
   const defaultBadgeCode = `<Badge>Default</Badge>

src/Button/Button.Component.js

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

src/ComboboxInput/ComboboxInput.Component.js

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

src/ContextualMenu/ContextualMenu.Component.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description } from '..';
-import { Popover, Button, Menu, MenuList, MenuItem } from '..';
+import { DocsTile, DocsText, Separator, Header, Description } from '../';
+import { Popover, Button, Menu, MenuList, MenuItem } from '../';
 
 export const ContextualMenuComponent = () => {
-    
     const contextualMenuIconCode = `<Popover
     control={<Button option="light" glyph="vertical-grip" />}
     noArrow
@@ -49,13 +48,15 @@ export const ContextualMenuComponent = () => {
     }
 />`;
 
-
     return (
         <div>
             <Header>Contextual Menu</Header>
             <Description>
-            The contextual menu component is an opinionated composition of the “Popover” and “Menu” components with the use of a styled button (Button component). A More icon (glyph="vertical-grip") or the word, “More”, is used to indicate there are more options than room to display them. On click or tap, a contextual menu opens. <br />
-            This component is completely composed from other components CSS and doesn’t have any of its own.
+                The contextual menu component is an opinionated composition of the “Popover” and “Menu” components with
+                the use of a styled button (Button component). A More icon (glyph="vertical-grip") or the word, “More”,
+                is used to indicate there are more options than room to display them. On click or tap, a contextual menu
+                opens. <br />
+                This component is completely composed from other components CSS and doesn’t have any of its own.
             </Description>
 
             <Separator />
@@ -80,7 +81,6 @@ export const ContextualMenuComponent = () => {
             <DocsText>{contextualMenuIconCode}</DocsText>
             <Separator />
 
-
             <h2>With Text Button</h2>
             <DocsTile centered>
                 <Popover
@@ -115,7 +115,6 @@ export const ContextualMenuComponent = () => {
             </DocsTile>
             <DocsText>{contextualMenuMoreTextCode}</DocsText>
             <Separator />
-
         </div>
     );
 };

src/Dropdown/Dropdown.Component.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Dropdown } from '../';
 import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
-import { Popover, Button, Menu, MenuList, MenuItem } from '../';
+import { Dropdown, Popover, Button, Menu, MenuList, MenuItem } from '../';
 
 export const DropdownComponent = () => {
     const defaultDropdownCode = `<Dropdown>
@@ -343,7 +342,7 @@ export const DropdownComponent = () => {
                                     <MenuItem url="/">Option 4</MenuItem>
                                 </MenuList>
                             </Menu>
-                        } 
+                        }
                     />
                 </Dropdown>
             </DocsTile>

src/Icon/Icon.Component.js

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

src/Identifier/Identifier.Component.js

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

src/Image/Image.Component.js

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