material-components · moog16 · Mar 15, 2019 · Mar 1, 2019 · Mar 1, 2019 · Mar 6, 2019
diff --git a/docs/best-practices.md b/docs/best-practices.md
@@ -14,3 +14,22 @@ By not including the font icon inside your CSS file, it reduces the file size. B
 ### Use with MDC Ripple
 
 If you load your font icons with a [Ripple](../packages/ripple) with the above method, you will need to set the height and width of the icons. This is because MDC Ripple calculates the ripple size from the initial height/width.
+
+### Importing packages
+
+References:
+-  https://stackoverflow.com/questions/29596714/new-es6-syntax-for-importing-commonjs-amd-modules-i-e-import-foo-require
+- https://github.com/basarat/typescript-book/blob/master/docs/project/external-modules.md
+- https://github.com/Microsoft/TypeScript/issues/2242#issuecomment-92218146
+- https://github.com/Microsoft/TypeScript/issues/2242#issuecomment-83694181
+
+Since `classnames@2.2.6` is exporting `default`, we should be importing as such:
+```ts
+// referenced in https://github.com/basarat/typescript-book/blob/master/docs/project/external-modules.md#default-exportsimports
+import classnames from 'classnames';
+```
+
+In other cases where we import modules that do not use `default`, we should import like:
+```ts
+import * as classnames from 'classnames';
+```
diff --git a/packages/button/index.tsx b/packages/button/index.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import * as Ripple from '@material/react-ripple';
 
 const BUTTON_CLASS_NAME = 'mdc-button__icon';

diff --git a/packages/button/package.json b/packages/button/package.json
@@ -19,7 +19,7 @@
   "dependencies": {
     "@material/button": "^0.43.0",
     "@material/react-ripple": "^0.10.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "react": "^16.4.2"
   },
   "publishConfig": {

diff --git a/packages/card/ActionButtons.tsx b/packages/card/ActionButtons.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 type ChildType = React.ReactElement<React.HTMLProps<HTMLButtonElement|HTMLAnchorElement>>;
 

diff --git a/packages/card/ActionIcons.tsx b/packages/card/ActionIcons.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 type ChildType = React.ReactElement<React.HTMLProps<HTMLImageElement|HTMLOrSVGElement>>;
 

diff --git a/packages/card/Actions.tsx b/packages/card/Actions.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 export interface ActionsProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;

diff --git a/packages/card/Media.tsx b/packages/card/Media.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 export interface MediaProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;

diff --git a/packages/card/PrimaryContent.tsx b/packages/card/PrimaryContent.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import * as Ripple from '@material/react-ripple';
 
 export interface PrimaryContentBaseProps extends React.HTMLProps<HTMLDivElement>, Ripple.InjectedProps<HTMLDivElement>{

diff --git a/packages/card/index.tsx b/packages/card/index.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import ActionButtons from './ActionButtons';
 import ActionIcons from './ActionIcons';
 import Actions from './Actions';

diff --git a/packages/card/package.json b/packages/card/package.json
@@ -19,7 +19,7 @@
   "dependencies": {
     "@material/card": "^0.41.0",
     "@material/react-ripple": "^0.10.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "react": "^16.4.2"
   },
   "publishConfig": {

diff --git a/packages/checkbox/index.tsx b/packages/checkbox/index.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 // @ts-ignore no mdc .d.ts file
 import {MDCCheckboxFoundation, MDCCheckboxAdapter} from '@material/checkbox/dist/mdc.checkbox';
 import * as Ripple from '@material/react-ripple';

diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
@@ -18,7 +18,7 @@
   "dependencies": {
     "@material/checkbox": "^0.41.0",
     "@material/react-ripple": "^0.10.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "react": "^16.3.2"
   },
   "publishConfig": {

diff --git a/packages/chips/Chip.tsx b/packages/chips/Chip.tsx
@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import * as Ripple from '@material/react-ripple';
 // @ts-ignore no mdc .d.ts file
 import {MDCChipFoundation} from '@material/chips/dist/mdc.chips';

diff --git a/packages/dialog/DialogButton.tsx b/packages/dialog/DialogButton.tsx
@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import {cssClasses} from './constants';
 import Button, {ButtonProps} from '@material/react-button';
 

diff --git a/packages/dialog/DialogContent.tsx b/packages/dialog/DialogContent.tsx
@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import {cssClasses} from './constants';
 
 

diff --git a/packages/dialog/DialogFooter.tsx b/packages/dialog/DialogFooter.tsx
@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import {cssClasses} from './constants';
 
 

diff --git a/packages/dialog/DialogTitle.tsx b/packages/dialog/DialogTitle.tsx
@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import {cssClasses} from './constants';
 
 

diff --git a/packages/dialog/package.json b/packages/dialog/package.json
@@ -14,7 +14,7 @@
     "@material/dialog": "0.43.0",
     "@material/dom": "^0.41.0",
     "@material/react-button": "^0.10.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "focus-trap": "^4.0.2",
     "react": "^16.4.2"
   },

diff --git a/packages/drawer/AppContent.tsx b/packages/drawer/AppContent.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 export interface DrawerAppContentProps {
   tag?: string,

diff --git a/packages/drawer/Content.tsx b/packages/drawer/Content.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 export interface DrawerContentProps {
   tag?: string,

diff --git a/packages/drawer/Header.tsx b/packages/drawer/Header.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 export interface DrawerHeaderProps {
   tag?: string,

diff --git a/packages/drawer/Subtitle.tsx b/packages/drawer/Subtitle.tsx
@@ -1,5 +1,27 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 export interface DrawerSubTitleProps {
   tag?: string;

diff --git a/packages/drawer/Title.tsx b/packages/drawer/Title.tsx
@@ -1,5 +1,27 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 export interface DrawerTitleProps {
   tag?: string;

diff --git a/packages/drawer/index.tsx b/packages/drawer/index.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import {
   MDCDismissibleDrawerFoundation,
   MDCModalDrawerFoundation,

diff --git a/packages/drawer/package.json b/packages/drawer/package.json
@@ -19,7 +19,7 @@
   "dependencies": {
     "@material/drawer": "^0.41.0",
     "@material/list": "^0.41.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "focus-trap": "^3.0.0",
     "react": "^16.4.2"
   },

diff --git a/packages/fab/index.tsx b/packages/fab/index.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 import * as Ripple from '@material/react-ripple';
 
 export interface FabProps extends Ripple.InjectedProps<HTMLButtonElement>,

diff --git a/packages/fab/package.json b/packages/fab/package.json
@@ -19,7 +19,7 @@
   "dependencies": {
     "@material/fab": "^0.41.0",
     "@material/react-ripple": "^0.10.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "react": "^16.4.2"
   },
   "publishConfig": {

diff --git a/packages/floating-label/index.tsx b/packages/floating-label/index.tsx
@@ -21,7 +21,7 @@
 // THE SOFTWARE.
 
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 // @ts-ignore no mdc .d.ts
 import {MDCFloatingLabelFoundation} from '@material/floating-label/dist/mdc.floatingLabel';
 

diff --git a/packages/floating-label/package.json b/packages/floating-label/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@material/floating-label": "^0.41.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "react": "^16.4.2"
   },
   "publishConfig": {

diff --git a/packages/icon-button/package.json b/packages/icon-button/package.json
@@ -19,7 +19,7 @@
   "dependencies": {
     "@material/icon-button": "^0.41.0",
     "@material/react-ripple": "^0.10.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "react": "^16.3.2"
   },
   "publishConfig": {

diff --git a/packages/layout-grid/Cell.tsx b/packages/layout-grid/Cell.tsx
@@ -1,5 +1,27 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 export type TwelveColumn = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export type FourColumn = 1 | 2 | 3 | 4;

diff --git a/packages/layout-grid/Grid.tsx b/packages/layout-grid/Grid.tsx
@@ -1,5 +1,27 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
 import * as React from 'react';
-import * as classnames from 'classnames';
+import classnames from 'classnames';
 
 export type Alignment = 'left' | 'right';
 export interface GridProps<T> extends React.HTMLProps<T> {