Export external/mds

.eslintrc.js

@@ -8,9 +8,7 @@ module.exports = {
     'prefer-arrow-callback': ['error', {
       allowNamedFunctions: true,
     }],
-    'import/extensions': ['error', 'always', {
-      ignorePackages: true,
-    }],
+    'import/extensions': 'off',
     'no-mixed-operators': ['error', {
       allowSamePrecedence: true,
     }],

src/components/autocompleter/autocompleter.test.jsx

@@ -10,9 +10,7 @@ import Autocompleter from './autocompleter.jsx';
 import mockHandlers from './mock-handlers.js';
 
 describe('src/components/autocompleter/autocompleter', () => {
-  beforeEach(() => {
-    jestServer.use(...mockHandlers());
-  });
+  jestServer.setup(mockHandlers());
 
   const requiredProps = {
     id: 'test-id',

src/components/cell-control/autocompleter.md

@@ -1,8 +1,8 @@
 A grid cell for autocomplete-able datum.
 
 ```jsx
-import Autocompleter from '@mavenlink/design-system/src/components/cell-control/autocompleter.jsx';
-import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table';
+import Autocompleter from '../../components/cell-control/autocompleter.jsx';
+import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table';
 
 const ids = {
   th: {

src/components/cell-control/date.md

@@ -1,8 +1,8 @@
 A grid cell for date field.
 
 ```jsx
-import Date from '@mavenlink/design-system/src/components/cell-control/date.jsx';
-import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table';
+import Date from '../../components/cell-control/date.jsx';
+import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table';
 
 const ids = {
   th: {

src/components/cell-control/input.md

@@ -1,8 +1,8 @@
 A grid cell for text datum. 
 
 ```jsx
-import Input from '@mavenlink/design-system/src/components/cell-control/input.jsx';
-import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table';
+import Input from '../../components/cell-control/input.jsx';
+import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table';
 
 const ids = {
   th: {

src/components/cell-control/money.md

@@ -1,8 +1,8 @@
 A grid cell for money.
 
 ```jsx
-import Money from '@mavenlink/design-system/src/components/cell-control/money.jsx';
-import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table';
+import Money from '../../components/cell-control/money.jsx';
+import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table';
 
 const ids = {
   th: {

src/components/cell-control/multi-autocompleter.md

@@ -1,6 +1,6 @@
 ```jsx
-import MultiAutocompleter from '@mavenlink/design-system/src/components/cell-control/multi-autocompleter.jsx';
-import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table';
+import MultiAutocompleter from '../../components/cell-control/multi-autocompleter.jsx';
+import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table';
 
 const ids = {
   th: {

src/components/cell-control/multi-select.md

@@ -1,6 +1,6 @@
 ```jsx
-import MultiSelect from '@mavenlink/design-system/src/components/cell-control/multi-select.jsx';
-import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table';
+import MultiSelect from '../../components/cell-control/multi-select.jsx';
+import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table';
 
 const ids = {
   th: {

src/components/cell-control/number.md

@@ -1,8 +1,8 @@
 A grid cell for number.
 
 ```jsx
-import Number from '@mavenlink/design-system/src/components/cell-control/number.jsx';
-import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table';
+import Number from '../../components/cell-control/number.jsx';
+import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table';
 
 const ids = {
   th: {

src/components/cell-control/select.md

@@ -1,9 +1,9 @@
 A grid cell for text datum. 
 
 ```jsx
-import ListOption from '@mavenlink/design-system/src/components/list-option/list-option.jsx';
-import Select from '@mavenlink/design-system/src/components/cell-control/select.jsx';
-import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table';
+import ListOption from '../../components/list-option/list-option.jsx';
+import Select from '../../components/cell-control/select.jsx';
+import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table';
 
 const ids = {
   th: {

src/components/cell-control/textarea.md

@@ -1,8 +1,8 @@
 A grid cell for large text datum.
 
 ```jsx
-import Textarea from '@mavenlink/design-system/src/components/cell-control/textarea.jsx';
-import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table';
+import Textarea from '../../components/cell-control/textarea.jsx';
+import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table';
 
 const ids = {
   th: {

src/components/checkbox/checkbox.md

@@ -5,7 +5,7 @@ For design and accessibility functionality, see [Form Controls > Checkbox docume
 Basic usage.
 
 ```jsx
-import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.jsx';
+import Checkbox from '../../components/checkbox/checkbox.jsx';
 
 <React.Fragment>
   <Checkbox
@@ -33,7 +33,7 @@ import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.
 Required example. The validation message only shows when the checkbox is dirty.
 
 ```jsx
-import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.jsx';
+import Checkbox from '../../components/checkbox/checkbox.jsx';
 
 <Checkbox
   id={uuid.v4()}
@@ -46,7 +46,7 @@ import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.
 With a custom validation message. Messages are cleared on blur.
 
 ```jsx
-import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.jsx';
+import Checkbox from '../../components/checkbox/checkbox.jsx';
 
 <Checkbox
   id={uuid.v4()}
@@ -59,15 +59,15 @@ import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.
 Inline
 
 ```jsx
-import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.jsx';
+import Checkbox from '../../components/checkbox/checkbox.jsx';
 
 <Checkbox id={uuid.v4()} label="Inline Checkbox" name="example" inline />;
 ```
 
 Inline Required example. The validation message only shows when the checkbox is dirty.
 
 ```jsx
-import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.jsx';
+import Checkbox from '../../components/checkbox/checkbox.jsx';
 
 <Checkbox
   id={uuid.v4()}
@@ -81,7 +81,7 @@ import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.
 Inline with validation message
 
 ```jsx
-import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.jsx';
+import Checkbox from '../../components/checkbox/checkbox.jsx';
 
 <Checkbox
   id={uuid.v4()}
@@ -95,7 +95,7 @@ import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.
 Inline with tooltip
 
 ```jsx
-import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.jsx';
+import Checkbox from '../../components/checkbox/checkbox.jsx';
 
 <Checkbox
   id={uuid.v4()}
@@ -109,8 +109,8 @@ import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.
 ## Ref API Example
 
 ```jsx
-import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.jsx';
-import RefExample from '@mavenlink/design-system/src/components/__site__/ref-example/ref-example.jsx';
+import Checkbox from '../../components/checkbox/checkbox.jsx';
+import RefExample from '../../components/__site__/ref-example/ref-example.jsx';
 
 const ref = React.createRef();
 

src/components/checkbox/inline-checkbox.jsx

@@ -5,9 +5,9 @@ import React, {
   useRef,
 } from 'react';
 import PropTypes from 'prop-types';
+import cautionSvg from '../../svgs/caution.svg';
 import Icon from '../icon/icon.jsx';
 import HelpIcon from '../help-icon/help-icon.jsx';
-import cautionSvg from '../../svgs/caution.svg';
 import useValidation from '../../hooks/use-validation.js';
 import styles from './checkbox.css';
 

src/components/control/icons.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cautionSvg from '../../svgs/caution.svg';
 import Icon from '../icon/icon.jsx';
 import Tooltip from '../tooltip/tooltip.jsx';
-import cautionSvg from '../../svgs/caution.svg';
 import styles from './icons.css';
 
 export default function Icons(props) {

src/components/control/multi-select.jsx

@@ -7,10 +7,10 @@ import React, {
   forwardRef,
 } from 'react';
 import PropTypes from 'prop-types';
-import Icons from './icons.jsx';
-import IconButton from '../icon-button/icon-button.jsx';
 import iconCaretDown from '../../svgs/caret-down.svg';
 import iconClear from '../../svgs/clear.svg';
+import Icons from './icons.jsx';
+import IconButton from '../icon-button/icon-button.jsx';
 import Listbox from '../listbox/listbox.jsx';
 import ListOption from '../list-option/list-option.jsx';
 import Loader from '../loader/loader.jsx';
@@ -76,7 +76,7 @@ const MultiSelect = forwardRef(function MultiSelect(props, ref) {
       return undefined;
     }
 
-    if (props.showLoader) {
+    if (props.showLoader) { // eslint-disable-line react/prop-types
       return (
         <Listbox
           className={classNames.popupContainer}
@@ -100,16 +100,16 @@ const MultiSelect = forwardRef(function MultiSelect(props, ref) {
         labelledBy={ids.label}
         refs={visibleOptionsRefs}
       >
-        {() => (props.listboxChildren
+        {() => (props.listboxChildren // eslint-disable-line react/prop-types
           ? props.listboxChildren(visibleOptions, visibleOptionsRefs, onOptionSelect)
           : visibleOptions.map((option, index) => (
             <ListOption
-              key={`${props.id}-${props.optionIDGetter(option)}`}
+              key={`${props.id}-${props.optionIDGetter(option)}`} // eslint-disable-line react/prop-types
               onSelect={onOptionSelect}
               ref={visibleOptionsRefs[index]}
               value={props.optionIDGetter(option)}
             >
-              {props.optionLabelGetter(option)}
+              {props.optionLabelGetter(option) /* eslint-disable-line react/prop-types */ }
             </ListOption>
           ))
         )}

src/components/control/select.jsx

@@ -1,16 +1,17 @@
 import React, {
   forwardRef,
   useEffect,
-  useImperativeHandle, useLayoutEffect,
+  useImperativeHandle,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
 import PropTypes from 'prop-types';
-import Icons from './icons.jsx';
-import IconButton from '../icon-button/icon-button.jsx';
 import iconClear from '../../svgs/clear.svg';
 import iconCaretDown from '../../svgs/caret-down.svg';
 import iconCaretDownDisabled from '../../svgs/caret-down-disabled.svg';
+import Icons from './icons.jsx';
+import IconButton from '../icon-button/icon-button.jsx';
 import Listbox from '../listbox/listbox.jsx';
 import NoOptions from '../no-options/no-options.jsx';
 import styles from './select.css';

src/components/date/date.md

@@ -3,28 +3,28 @@ For design and accessibility functionality, see [Form Controls > Date documentat
 ## Props API Examples
 
 ```jsx
-import Date from '@mavenlink/design-system/src/components/date/date.jsx';
+import Date from '../../components/date/date.jsx';
 
 <Date id={uuid.v4()} label="Example date field" name="example" placeholder="YYYY-MM-DD" required />
 ```
 
 ```jsx
-import Date from '@mavenlink/design-system/src/components/date/date.jsx';
+import Date from '../../components/date/date.jsx';
 
 <Date id={uuid.v4()} label="Read-only date field" name="example" readOnly value="2020-06-06" />
 ```
 
 ```jsx
-import Date from '@mavenlink/design-system/src/components/date/date.jsx';
+import Date from '../../components/date/date.jsx';
 
 <Date id={uuid.v4()} label="Invalid date field" name="example" validationMessage="There is something wrong." />
 ```
 
 ## Ref API Example
 
 ```jsx
-import Date from '@mavenlink/design-system/src/components/date/date.jsx';
-import RefExample from '@mavenlink/design-system/src/components/__site__/ref-example/ref-example.jsx';
+import Date from '../../components/date/date.jsx';
+import RefExample from '../../components/__site__/ref-example/ref-example.jsx';
 
 const ref = React.createRef();
 

src/components/date/date.test.jsx

@@ -101,7 +101,10 @@ describe('src/components/date/date.test.jsx', () => {
       const onKeyDownSpy = jest.fn(event => event.persist());
 
       render((
-        <div onClick={onClickSpy} onKeyDown={onKeyDownSpy}>
+        <div // eslint-disable-line jsx-a11y/no-static-element-interactions
+          onClick={onClickSpy}
+          onKeyDown={onKeyDownSpy}
+        >
           <Date {...requiredProps} />
         </div>
       ));

src/components/duration-input/duration-input.md

@@ -25,8 +25,8 @@ Duration input is an html input that formats the users input into a consistent o
 
 ## Ref API Example
 ```jsx
-import DurationInput from '@mavenlink/design-system/src/components/duration-input/duration-input.jsx';
-import RefExample from '@mavenlink/design-system/src/components/__site__/ref-example/ref-example.jsx';
+import DurationInput from '../../components/duration-input/duration-input.jsx';
+import RefExample from '../../components/__site__/ref-example/ref-example.jsx';
 
 const ref = React.createRef();
 

src/components/form/form.md

@@ -19,7 +19,7 @@ The form component allows a parent component to listen to value changes with a `
 ### Example with native inputs
 
 ```jsx
-import Form from '@mavenlink/design-system/src/components/form/form.jsx';
+import Form from '../../components/form/form.jsx';
 
 const refs = [
   React.createRef(),
@@ -49,7 +49,7 @@ If the parent component is create a new `props.onSubmit` callback on every rende
 In this case, the parent component _must_ memoize its own `onSubmit` callback against its appropriate dependencies.
 
 ```jsx
-import Form from '@mavenlink/design-system/src/components/form/form.jsx';
+import Form from '../../components/form/form.jsx';
 
 const refs = [
   React.createRef(),

src/components/help-icon/help-icon.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import helpSvg from '../../svgs/help.svg';
 import Tooltip from '../tooltip/tooltip.jsx';
 import Icon from '../icon/icon.jsx';
-import helpSvg from '../../svgs/help.svg';
 
 export default function HelpIcon({ classNames, direction, id, label, text }) {
   return (

src/components/icon-button/icon-button.md

@@ -20,7 +20,7 @@ It is recommended to apply some padding to the icon as a means of increasing the
 ## Basic example
 
 ```jsx
-import caretDown from '@mavenlink/design-system/src/svgs/caret-down.svg';
+import caretDown from '../../svgs/caret-down.svg';
 import styles from './icon-button.md.css';
 
 <IconButton
@@ -43,7 +43,7 @@ the input has a label of "the input";
 thus, the computed label is actually "clear the input".
 
 ```jsx
-import clear from '@mavenlink/design-system/src/svgs/clear.svg';
+import clear from '../../svgs/clear.svg';
 import styles from './icon-button.md.css';
 
 <div className={styles['adv-example']}>

src/components/icon-button/icon-button.md.css

@@ -1,5 +1,5 @@
-@import '../../../src/styles/colors-v2.css';
-@import '../../../src/styles/spacing.css';
+@import '../../styles/colors-v2.css';
+@import '../../styles/spacing.css';
 
 .button {
   composes: button from './icon-button.css';

src/components/icon/icon.md

@@ -15,7 +15,7 @@ For an interactive icon component, @see [`<IconButton>`](#/Components/IconButton
 ## Example
 
 ```js
-import arrowLeft from '@mavenlink/design-system/src/svgs/arrow-left.svg';
+import arrowLeft from '../../svgs/arrow-left.svg';
 
 <Icon icon={arrowLeft} label="Left arrow" />
 ```