chore: add example of importing from lib to docs

mobot11 · web-flow · commit b64a2cedbdef · 2019-02-12T10:11:39.000-08:00
diff --git a/src/ActionBar/ActionBar.Component.js b/src/ActionBar/ActionBar.Component.js
@@ -94,11 +94,11 @@ const clickBackBtn = () => {
                 The **Action Bar** is located at the top of the page and is used for page title and main actions for the
                 page.
             </Description>
-            <Import sourceModule={require('./ActionBar')} />
+            <Import sourceModulePath={require.resolve('./ActionBar')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./ActionBar')} />
+            <Properties sourceModulePath={require.resolve('./ActionBar')} />
 
             <Separator />
 
diff --git a/src/Alert/Alert.Component.js b/src/Alert/Alert.Component.js
@@ -38,11 +38,11 @@ export const AlertComponent = () => {
             <Description>
                 An **Alert** provides a message within the application that is color-coded to emphasize the level of urgency.
             </Description>
-            <Import sourceModule={require('./Alert')} />
+            <Import sourceModulePath={require.resolve('./Alert')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Alert')} />
+            <Properties sourceModulePath={require.resolve('./Alert')} />
 
             <Separator />
 
diff --git a/src/Badge/Badge.Component.js b/src/Badge/Badge.Component.js
@@ -63,11 +63,11 @@ export const BadgeComponent = () => {
         <div>
             <Header>Status Indicators</Header>
             <Description>Status Indicators are used to easily highlight the state of an object.</Description>
-            <Import sourceModule={require('./Badge')} />
+            <Import sourceModulePath={require.resolve('./Badge')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Badge')} />
+            <Properties sourceModulePath={require.resolve('./Badge')} />
 
             <Separator />
 
diff --git a/src/Breadcrumb/Breadcrumb.Component.js b/src/Breadcrumb/Breadcrumb.Component.js
@@ -30,11 +30,11 @@ export const BreadcrumbComponent = () => {
                 to previous levels in the path. When clicking on the current page, a dropdown allows users to access
                 other pages at that same level.
             </Description>
-            <Import sourceModule={require('./Breadcrumb')} />
+            <Import sourceModulePath={require.resolve('./Breadcrumb')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Breadcrumb')} />
+            <Properties sourceModulePath={require.resolve('./Breadcrumb')} />
 
             <Separator />
 
diff --git a/src/Button/Button.Component.js b/src/Button/Button.Component.js
@@ -135,11 +135,11 @@ content like appearing in a table or list. There may be more than one on the pag
                 instance, the most important button has a blue background where as a red button should only be used if
                 the action it performs is potentially destructive.
             </Description>
-            <Import sourceModule={require('./Button')} />
+            <Import sourceModulePath={require.resolve('./Button')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Button')} />
+            <Properties sourceModulePath={require.resolve('./Button')} />
 
             <Separator />
 
diff --git a/src/Calendar/Calendar.Component.js b/src/Calendar/Calendar.Component.js
@@ -15,11 +15,11 @@ export const CalendarComponent = () => {
             The **Calendar** is commonly used as the contents of a **Popover** when composing a **Date Picker**.
             It is rarely used on its own as a standalone component.
         </Description>
-        <Import sourceModule={require('./Calendar')} />
+        <Import sourceModulePath={require.resolve('./Calendar')} />
 
         <Separator />
 
-        <Properties sourceModule={require('./Calendar')} />
+        <Properties sourceModulePath={require.resolve('./Calendar')} />
 
         <Separator />
 
diff --git a/src/ComboboxInput/ComboboxInput.Component.js b/src/ComboboxInput/ComboboxInput.Component.js
@@ -40,11 +40,11 @@ export const ComboboxInputComponent = () => {
         <div>
             <Header>Combobox Input</Header>
 
-            <Import sourceModule={require('./ComboboxInput')} />
+            <Import sourceModulePath={require.resolve('./ComboboxInput')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./ComboboxInput')} />
+            <Properties sourceModulePath={require.resolve('./ComboboxInput')} />
 
             <Separator />
 
diff --git a/src/DatePicker/DatePicker.Component.js b/src/DatePicker/DatePicker.Component.js
@@ -19,11 +19,11 @@ export const DatePickerComponent = () => {
                 The **Date Picker** is an opinionated composition of the **Input Group**, **Popover**
                 and **Calendar** components to accomplish the UI pattern for picking a date.
             </Description>
-            <Import sourceModule={require('./DatePicker')} />
+            <Import sourceModulePath={require.resolve('./DatePicker')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./DatePicker')} />
+            <Properties sourceModulePath={require.resolve('./DatePicker')} />
 
             <Separator />
 
diff --git a/src/Dropdown/Dropdown.Component.js b/src/Dropdown/Dropdown.Component.js
@@ -161,11 +161,11 @@ export const DropdownComponent = () => {
                 The **Dropdown** component lets the user select one of the different options.
                 It is more flexible than the normal Select.
             </Description>
-            <Import sourceModule={require('./Dropdown')} />
+            <Import sourceModulePath={require.resolve('./Dropdown')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Dropdown')} />
+            <Properties sourceModulePath={require.resolve('./Dropdown')} />
 
             <Separator />
 
diff --git a/src/Forms/Forms.Component.js b/src/Forms/Forms.Component.js
@@ -272,11 +272,11 @@ Along with Invalid and Warning, error messages should be displayed below the fie
                 Form elements include field layout, checkboxes, radio buttons and states of a field. Use these
                 components along with inline help and error state.
             </Description>
-            <Import sourceModule={require('./Forms')} />
+            <Import sourceModulePath={require.resolve('./Forms')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Forms')} />
+            <Properties sourceModulePath={require.resolve('./Forms')} />
 
             <Separator />
 
diff --git a/src/Icon/Icon.Component.js b/src/Icon/Icon.Component.js
@@ -655,11 +655,11 @@ export const IconComponent = () => {
                 this point they are used more as visual elements within other
                 components.
             </Description>
-            <Import sourceModule={require('./Icon')} />
+            <Import sourceModulePath={require.resolve('./Icon')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Icon')} />
+            <Properties sourceModulePath={require.resolve('./Icon')} />
 
             <Separator />
 
diff --git a/src/Identifier/Identifier.Component.js b/src/Identifier/Identifier.Component.js
@@ -50,11 +50,11 @@ export const IdentifierComponent = () => {
             <Description>
                 An **Identifier** is a visual presentation option around using an icon or user initials.
             </Description>
-            <Import sourceModule={require('./Identifier')} />
+            <Import sourceModulePath={require.resolve('./Identifier')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Identifier')} />
+            <Properties sourceModulePath={require.resolve('./Identifier')} />
 
             <Separator />
 
diff --git a/src/Image/Image.Component.js b/src/Image/Image.Component.js
@@ -16,11 +16,11 @@ export const ImageComponent = () => {
             <Description>
                 Use an **Image** component to display images.
             </Description>
-            <Import sourceModule={require('./Image')} />
+            <Import sourceModulePath={require.resolve('./Image')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Image')} />
+            <Properties sourceModulePath={require.resolve('./Image')} />
 
             <Separator />
 
diff --git a/src/InlineHelp/InlineHelp.Component.js b/src/InlineHelp/InlineHelp.Component.js
@@ -17,11 +17,11 @@ export const InlineHelpComponent = () => {
                 **Inline Help** is used to display help text in a **Popover**, often inline with headers,
                 body text and form labels.
             </Description>
-            <Import sourceModule={require('./InlineHelp')} />
+            <Import sourceModulePath={require.resolve('./InlineHelp')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./InlineHelp')} />
+            <Properties sourceModulePath={require.resolve('./InlineHelp')} />
 
             <Separator />
 
diff --git a/src/InputGroup/InputGroup.Component.js b/src/InputGroup/InputGroup.Component.js
@@ -137,11 +137,11 @@ Compact mode:
                 The **Input Group** includes form inputs with add-ons that allow the user to
                 better understand the information being entered.
             </Description>
-            <Import sourceModule={require('./InputGroup')} />
+            <Import sourceModulePath={require.resolve('./InputGroup')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./InputGroup')} />
+            <Properties sourceModulePath={require.resolve('./InputGroup')} />
 
             <Separator />
 
diff --git a/src/ListGroup/ListGroup.Component.js b/src/ListGroup/ListGroup.Component.js
@@ -51,11 +51,11 @@ export const ListGroupComponent = () => {
                 but lists generally contain basic data and tables tend to hold more complex data.
                 If the list is a complex hierarchy, it is best to use a **Tree**.
             </Description>
-            <Import sourceModule={require('./ListGroup')} />
+            <Import sourceModulePath={require.resolve('./ListGroup')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./ListGroup')} />
+            <Properties sourceModulePath={require.resolve('./ListGroup')} />
 
             <Separator />
 
diff --git a/src/LocalizationEditor/LocalizationEditor.Component.js b/src/LocalizationEditor/LocalizationEditor.Component.js
@@ -35,11 +35,11 @@ export const LocalizationEditorComponent = () => {
     return (
         <div>
             <Header>Localization Editor</Header>
-            <Import sourceModule={require('./LocalizationEditor')} />
+            <Import sourceModulePath={require.resolve('./LocalizationEditor')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./LocalizationEditor')} />
+            <Properties sourceModulePath={require.resolve('./LocalizationEditor')} />
 
             <Separator />
 
diff --git a/src/Menu/Menu.Component.js b/src/Menu/Menu.Component.js
@@ -82,11 +82,11 @@ export const MenuComponent = () => {
                 contents when composing “dropdowns”, “contextual menus”,  etc, when paired with the **Popover**
                 component.
             </Description>
-            <Import sourceModule={require('./Menu')} />
+            <Import sourceModulePath={require.resolve('./Menu')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Menu')} />
+            <Properties sourceModulePath={require.resolve('./Menu')} />
 
             <Separator />
 
diff --git a/src/Modal/Modal.Component.js b/src/Modal/Modal.Component.js
@@ -145,11 +145,11 @@ export class ModalComponent extends Component {
                     To display the **Modal** dialog, pass a boolean value to the `show` property of the component. It is
                     recommended to store this value as a state property in the parent control or application.
                 </Description>
-                <Import sourceModule={require('./Modal')} />
+                <Import sourceModulePath={require.resolve('./Modal')} />
 
                 <Separator />
 
-                <Properties sourceModule={require('./Modal')} />
+                <Properties sourceModulePath={require.resolve('./Modal')} />
 
                 <Separator />
 
diff --git a/src/MultiInput/MultiInput.Component.js b/src/MultiInput/MultiInput.Component.js
@@ -48,11 +48,11 @@ export class MultiInputComponent extends Component {
       return (
           <div>
               <Header>Multi Input</Header>
-              <Import sourceModule={require('./MultiInput')} />
+              <Import sourceModulePath={require.resolve('./MultiInput')} />
 
               <Separator />
 
-              <Properties sourceModule={require('./MultiInput')} />
+              <Properties sourceModulePath={require.resolve('./MultiInput')} />
 
               <Separator />
 
diff --git a/src/Pagination/Pagination.Component.js b/src/Pagination/Pagination.Component.js
@@ -19,11 +19,11 @@ export const PaginationComponent = () => {
                 display needs to be handled in the function that is passed in
                 the `onClick` method.
             </Description>
-            <Import sourceModule={require('./Pagination')} />
+            <Import sourceModulePath={require.resolve('./Pagination')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Pagination')} />
+            <Properties sourceModulePath={require.resolve('./Pagination')} />
 
             <Separator />
 
diff --git a/src/Panel/Panel.Component.js b/src/Panel/Panel.Component.js
@@ -197,11 +197,11 @@ export const PanelComponent = () => {
     return (
         <div>
             <Header>Panel</Header>
-            <Import sourceModule={require('./Panel')} />
+            <Import sourceModulePath={require.resolve('./Panel')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Panel')} />
+            <Properties sourceModulePath={require.resolve('./Panel')} />
 
             <Separator />
 
diff --git a/src/Popover/Popover.Component.js b/src/Popover/Popover.Component.js
@@ -78,11 +78,11 @@ export const PopoverComponent = () => {
                 it is suggested that one Popover be revealed on the page at any given time. Opening one Popover should close all
                 others to prevent multiple layers and collisions of several popovers.
             </Description>
-            <Import sourceModule={require('./Popover')} />
+            <Import sourceModulePath={require.resolve('./Popover')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Popover')} />
+            <Properties sourceModulePath={require.resolve('./Popover')} />
 
             <Separator />
 
diff --git a/src/SearchInput/SearchInput.Component.js b/src/SearchInput/SearchInput.Component.js
@@ -89,11 +89,11 @@ searchData = [
         return (
             <div>
                 <Header>Search Input</Header>
-                <Import sourceModule={require('./SearchInput')} />
+                <Import sourceModulePath={require.resolve('./SearchInput')} />
 
                 <Separator />
 
-                <Properties sourceModule={require('./SearchInput')} />
+                <Properties sourceModulePath={require.resolve('./SearchInput')} />
 
                 <Separator />
 
diff --git a/src/Shellbar/Shellbar.Component.js b/src/Shellbar/Shellbar.Component.js
@@ -417,11 +417,11 @@ productSwitcher = {
                     a composite component comprised of mandatory and optional elements. Before getting started, here are
                     some things to know.
                 </Description>
-                <Import sourceModule={require('./Shellbar')} />
+                <Import sourceModulePath={require.resolve('./Shellbar')} />
 
                 <Separator />
 
-                <Properties sourceModule={require('./Shellbar')} />
+                <Properties sourceModulePath={require.resolve('./Shellbar')} />
 
                 <Separator />
 
diff --git a/src/SideNavigation/SideNavigation.Component.js b/src/SideNavigation/SideNavigation.Component.js
@@ -231,11 +231,11 @@ export const SideNavigationComponent = () => {
                 The left navigation can always display or expand/collapse using the menu icon within the global
                 navigation.
             </Description>
-            <Import sourceModule={require('./SideNavigation')} />
+            <Import sourceModulePath={require.resolve('./SideNavigation')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./SideNavigation')} />
+            <Properties sourceModulePath={require.resolve('./SideNavigation')} />
 
             <Separator />
 
diff --git a/src/Table/Table.Component.js b/src/Table/Table.Component.js
@@ -128,11 +128,11 @@ export const TableComponent = () => {
             <Description>
                 A **Table** is a set of tabular data. Line items can support `data`, `images` and `actions`.
             </Description>
-            <Import sourceModule={require('./Table')} />
+            <Import sourceModulePath={require.resolve('./Table')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Table')} />
+            <Properties sourceModulePath={require.resolve('./Table')} />
 
             <Separator />
 
diff --git a/src/Tabs/Tabs.Component.js b/src/Tabs/Tabs.Component.js
@@ -97,11 +97,11 @@ export const TabsComponent = () => {
                 metaphor and is used to separate content into different sections.
                 They should be ordered to create a visual hierarchy based on priority.
             </Description>
-            <Import sourceModule={require('./Tabs')} />
+            <Import sourceModulePath={require.resolve('./Tabs')} />
 
             <Separator />
 
-            <Properties sourceModule={require('./Tabs')} />
+            <Properties sourceModulePath={require.resolve('./Tabs')} />
 
             <Separator />
 
diff --git a/src/Tile/Tile.Component.js b/src/Tile/Tile.Component.js
diff --git a/src/Time/Time.Component.js b/src/Time/Time.Component.js
diff --git a/src/TimePicker/TimePicker.Component.js b/src/TimePicker/TimePicker.Component.js
diff --git a/src/Toggle/Toggle.Component.js b/src/Toggle/Toggle.Component.js
diff --git a/src/Token/Token.Component.js b/src/Token/Token.Component.js
diff --git a/src/Tree/Tree.Component.js b/src/Tree/Tree.Component.js
diff --git a/src/_playground/documentation/Import/Import.js b/src/_playground/documentation/Import/Import.js
diff --git a/src/_playground/documentation/Properties/Properties.js b/src/_playground/documentation/Properties/Properties.js
diff --git a/src/_playground/documentation/utils/getSourceModule.js b/src/_playground/documentation/utils/getSourceModule.js
