⚗ Update theme filenames to filename.module.scss

Autocomplete, Avatar, Button, Card, Carousel

Author: KRRISH96

lib/autocomplete/index.js

@@ -4,7 +4,7 @@ import Proptypes from 'prop-types';
 import { themr } from 'react-css-themr';
 import cx from 'classnames';
 
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 const { findDOMNode: findNode } = ReactDOM;
 
@@ -270,7 +270,7 @@ class AutoComplete extends Component {
             ref={(ref) => {
               this.listRef = ref;
             }}
-            className={cx(theme['autocomplete-list'], { enabled: showSuggestions })}
+            className={cx(theme['autocomplete-list'], showSuggestions ? theme.enabled : '')}
             onMouseEnter={() => this.blockOnBlur(true)}
             onMouseLeave={() => this.blockOnBlur(false)}
           >

lib/autocomplete/theme.scss renamed to lib/autocomplete/theme.module.scss

@@ -1,5 +1,5 @@
 @import '../globals/_theme.scss';
-@import '../globals/animations.scss';
+@import '../globals/animations.module.scss';
 @import '../globals/common.scss';
 
 :local(.autocomplete) {

lib/avatar/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 const Avatar = ({
   children,

lib/avatar/theme.scss renamed to lib/avatar/theme.module.scss

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 
 import '../globals/fonts.scss';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 
 class Button extends Component {
   render() {
@@ -30,7 +30,7 @@ class Button extends Component {
       theme[!iconButton && size], // size will not take effect on ICON ONLY BUTTON type
       theme[`icon-${iconAlignment}`],
       className,
-      (flat || bordered || borderless) && 'flat',
+      (flat || bordered || borderless) && theme.flat,
       {
         [theme[`${type}Bordered`]]: bordered,
         [theme[`${type}Borderless`]]: borderless,

lib/button/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 import '../globals/fonts.scss';
 
 class Card extends React.Component {
@@ -129,7 +129,7 @@ class Card extends React.Component {
         { this.renderHeader() }
         { this.renderContent() }
         { this.renderFooter() }
-        <div className={`expandedContent ${expanded ? 'expanded' : 'collapsed'}`}>
+        <div className={classnames(theme.expandedContent, theme[`${expanded ? 'expanded' : 'collapsed'}`])}>
           {(expandedContent !== null) && <HiddenContent />}
         </div>
       </div>

lib/button/theme.scss renamed to lib/button/theme.module.scss

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 const CarouselItem = ({ theme, active, imageUrl }) => (
-  <div className={cx(theme['carousel-item'], 'active', { current: active })}>
+  <div className={cx(theme['carousel-item'], theme.active, { [theme.current]: active })}>
     {imageUrl ? <img src={imageUrl} alt="carousel-item" /> : this.props.children}
   </div>
 );

lib/card/index.js

@@ -4,7 +4,7 @@ import { themr } from 'react-css-themr';
 import cx from 'classnames';
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 import CarouselItem from './carouselItem';
-import defaultTheme from './theme.scss';
+import defaultTheme from './theme.module.scss';
 import '../globals/fonts.scss';
 
 class Carousel extends React.Component {
@@ -43,7 +43,7 @@ class Carousel extends React.Component {
         {/* eslint-disable jsx-a11y/no-static-element-interactions */}
         {
           controls &&
-          <FaAngleLeft className={cx(theme['left-control'], 'carousel-left-icon')} onClick={() => this.setActiveItem(active - 1)} />
+          <FaAngleLeft className={cx(theme['left-control'], theme['carousel-left-icon'])} onClick={() => this.setActiveItem(active - 1)} />
         }
         {data.map((item, index) => (
           <CarouselItem
@@ -60,13 +60,13 @@ class Carousel extends React.Component {
             <span
               key={`carousel-indicator-${index + 1}`}
               onClick={() => this.setActiveItem(index)}
-              className={cx({ active: active === index })}
+              className={cx({ [theme.active]: active === index })}
             />
           ))}
         </div>
         {
           controls &&
-          <FaAngleRight className={cx(theme['right-control'], 'carousel-right-icon')} onClick={() => this.setActiveItem(active + 1)} />
+          <FaAngleRight className={cx(theme['right-control'], theme['carousel-right-icon'])} onClick={() => this.setActiveItem(active + 1)} />
         }
       </div>
     );