fix: sass module import

carbon-design-system · Apr 15, 2021 · a0c3bcc · a0c3bcc
1 parent 9814560
commit a0c3bcc
Show file tree

Hide file tree

Showing 21 changed files with 25 additions and 39 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/Code/Code.js b/packages/gatsby-theme-carbon/src/components/Code/Code.js
@@ -7,7 +7,7 @@ import cx from 'classnames';
 import { Row } from '../Grid';
 import getTheme from './getTheme';
 
-import styles from './Code.module.scss';
+import * as styles from './Code.module.scss';
 
 import PathRow from './PathRow';
 import Sidebar from './Sidebar';

diff --git a/packages/gatsby-theme-carbon/src/components/Code/PathRow.js b/packages/gatsby-theme-carbon/src/components/Code/PathRow.js
@@ -3,7 +3,7 @@ import { CopyButton } from 'carbon-components-react';
 import { Launch16 } from '@carbon/icons-react';
 import copy from 'copy-to-clipboard';
 import cx from 'classnames';
-import styles from './Code.module.scss';
+import * as styles from './Code.module.scss';
 import useMetadata from '../../util/hooks/useMetadata';
 
 // If no path is given, don't render. We'll use the Sidebar for buttons

diff --git a/packages/gatsby-theme-carbon/src/components/Code/Sidebar.js b/packages/gatsby-theme-carbon/src/components/Code/Sidebar.js
@@ -3,7 +3,7 @@ import { CopyButton } from 'carbon-components-react';
 import { Launch16 } from '@carbon/icons-react';
 import copy from 'copy-to-clipboard';
 import cx from 'classnames';
-import styles from './Code.module.scss';
+import * as styles from './Code.module.scss';
 import useMetadata from '../../util/hooks/useMetadata';
 
 // If there is a src url, but no path name, both icons appear in the sidebar.

diff --git a/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDont.js b/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDont.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { CheckmarkFilled24, Misuse24 } from '@carbon/icons-react';
 import { Column } from '../Grid';
-import styles from './DoDontRow.module.scss';
+import * as styles from './DoDontRow.module.scss';
 
 export default class DoDont extends React.Component {
   renderCaption = (caption, captionTitle) => {

diff --git a/packages/gatsby-theme-carbon/src/components/FeedbackDialog/Checkmark.js b/packages/gatsby-theme-carbon/src/components/FeedbackDialog/Checkmark.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Checkmark.module.scss';
+import * as styles from './Checkmark.module.scss';
 
 const Checkmark = () => (
   <svg className={styles.svg} width="20" viewBox="0 0 28 28">

diff --git a/packages/gatsby-theme-carbon/src/components/FeedbackDialog/Comment.js b/packages/gatsby-theme-carbon/src/components/FeedbackDialog/Comment.js
@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import { TextArea } from 'carbon-components-react';
 import cx from 'classnames';
-import styles from './Comment.module.scss';
+import * as styles from './Comment.module.scss';
 
 const Comment = () => {
   const [focused, setFocused] = useState(false);

diff --git a/packages/gatsby-theme-carbon/src/components/FeedbackDialog/Experience.js b/packages/gatsby-theme-carbon/src/components/FeedbackDialog/Experience.js
@@ -9,7 +9,7 @@ import {
 } from '@carbon/icons-react';
 import cx from 'classnames';
 
-import styles from './Experience.module.scss';
+import * as styles from './Experience.module.scss';
 
 const NEGATIVE = 'feedback-form-negative';
 const NEUTRAL = 'feedback-form-neutral';

diff --git a/packages/gatsby-theme-carbon/src/components/FeedbackDialog/Form.js b/packages/gatsby-theme-carbon/src/components/FeedbackDialog/Form.js
@@ -7,17 +7,15 @@ import Checkmark from './Checkmark';
 import Experience from './Experience';
 import Comment from './Comment';
 
-import styles from './Form.module.scss';
+import * as styles from './Form.module.scss';
 
-const { enter, enterActive, enterDone, exit, exitActive, exitDone } = styles;
+const { enter, enterActive, exit, exitActive } = styles;
 
 const classNames = {
   enter,
   enterActive,
-  enterDone,
   exit,
   exitActive,
-  exitDone,
 };
 
 const Form = ({ visible, setVisible, onSubmit: submitHandler }) => {

diff --git a/packages/gatsby-theme-carbon/src/components/FeedbackDialog/LaunchButton.js b/packages/gatsby-theme-carbon/src/components/FeedbackDialog/LaunchButton.js
@@ -1,17 +1,13 @@
 import React from 'react';
 import cx from 'classnames';
-import styles from './LaunchButton.module.scss';
-
-function LaunchButton({ onClick, visible, icon: RegularIcon }) {
-  const classNames = cx(styles.button, {
-    [styles.selected]: visible,
-  });
+import { button } from './LaunchButton.module.scss';
 
+function LaunchButton({ onClick, icon: RegularIcon }) {
   return (
     <button
       type="button"
       aria-haspopup
-      className={classNames}
+      className={button}
       onClick={onClick}
       aria-label="This launches a modal form to give website feedback.">
       <RegularIcon />

diff --git a/packages/gatsby-theme-carbon/src/components/GifPlayer/GifPlayer.js b/packages/gatsby-theme-carbon/src/components/GifPlayer/GifPlayer.js
@@ -7,7 +7,7 @@ import {
   PauseOutline24,
   PauseOutlineFilled24,
 } from '@carbon/icons-react';
-import styles from './GifPlayer.module.scss';
+import * as styles from './GifPlayer.module.scss';
 
 const Pause = ({ hovering }) =>
   hovering ? <PauseOutlineFilled24 /> : <PauseOutline24 />;

diff --git a/packages/gatsby-theme-carbon/src/components/Header/Header.js b/packages/gatsby-theme-carbon/src/components/Header/Header.js
@@ -15,7 +15,7 @@ import GlobalSearch from '../GlobalSearch';
 import NavContext from '../../util/context/NavContext';
 import useMetadata from '../../util/hooks/useMetadata';
 
-import styles from './Header.module.scss';
+import * as styles from './Header.module.scss';
 
 const Header = ({ children }) => {
   const {

diff --git a/packages/gatsby-theme-carbon/src/components/HeaderNav/HeaderNavItem.js b/packages/gatsby-theme-carbon/src/components/HeaderNav/HeaderNavItem.js
@@ -5,7 +5,7 @@ import { Location } from '@reach/router';
 import cx from 'classnames';
 
 import { HeaderMenu, HeaderMenuItem } from 'carbon-components-react';
-import styles from './HeaderNavItem.module.scss';
+import * as styles from './HeaderNavItem.module.scss';
 
 import NavContext from '../../util/context/NavContext';
 import usePathprefix from '../../util/hooks/usePathprefix';

diff --git a/packages/gatsby-theme-carbon/src/components/InlineNotification/InlineNotification.js b/packages/gatsby-theme-carbon/src/components/InlineNotification/InlineNotification.js
@@ -5,7 +5,7 @@ import { InlineNotification as CarbonInlineNotification } from 'carbon-component
 import { Row, Column } from '../Grid';
 import useMetadata from '../../util/hooks/useMetadata';
 
-import styles from './InlineNotification.module.scss';
+import * as styles from './InlineNotification.module.scss';
 
 const InlineNotification = ({ children, className, kind = 'info' }) => {
   const { interiorTheme } = useMetadata();

diff --git a/packages/gatsby-theme-carbon/src/components/LastModifiedDate/LastModifiedDate.js b/packages/gatsby-theme-carbon/src/components/LastModifiedDate/LastModifiedDate.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Row, Column } from '../Grid';
-import styles from './last-modified-date.module.scss';
+import * as styles from './last-modified-date.module.scss';
 
 const LastModifiedDate = ({ date }) => {
   const options = {

diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
@@ -7,7 +7,7 @@ import LeftNavItem from './LeftNavItem';
 import LeftNavResourceLinks from './ResourceLinks';
 
 import LeftNavWrapper from './LeftNavWrapper';
-import styles from './LeftNav.module.scss';
+import * as styles from './LeftNav.module.scss';
 import useMetadata from '../../util/hooks/useMetadata';
 
 const LeftNav = (props) => {

diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js
@@ -10,7 +10,7 @@ import {
   SideNavMenuItem,
 } from 'carbon-components-react';
 
-import styles from './LeftNav.module.scss';
+import * as styles from './LeftNav.module.scss';
 
 import NavContext from '../../util/context/NavContext';
 import usePathprefix from '../../util/hooks/usePathprefix';
@@ -96,19 +96,11 @@ const SubNavItems = ({ items, pathname, onClick }) =>
     return (
       <SideNavMenuItem
         to={to}
-        className={cx({
-          [styles.linkText__dark]: pathname === '/',
-        })}
         onClick={(e) => onClick(e, to)}
         element={Link}
         isActive={hasActiveTab}
         key={i}>
-        <span
-          className={cx(styles.linkText, {
-            [styles.linkText__active]: hasActiveTab,
-          })}>
-          {item.title}
-        </span>
+        {item.title}
       </SideNavMenuItem>
     );
   });

diff --git a/packages/gatsby-theme-carbon/src/components/MiniCard/CardGroup.js b/packages/gatsby-theme-carbon/src/components/MiniCard/CardGroup.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { Row } from '../Grid';
-import styles from './CardGroup.module.scss';
+import * as styles from './CardGroup.module.scss';
 
 const CardGroup = ({ children, className, ...rest }) => (
   <Row className={cx(className, styles.cardGroup)} {...rest}>

diff --git a/packages/gatsby-theme-carbon/src/components/MiniCard/MiniCard.js b/packages/gatsby-theme-carbon/src/components/MiniCard/MiniCard.js
@@ -10,7 +10,7 @@ import {
 import { settings } from 'carbon-components';
 import cx from 'classnames';
 
-import styles from './MiniCard.module.scss';
+import * as styles from './MiniCard.module.scss';
 import { Column } from '../Grid';
 
 const { prefix } = settings;

diff --git a/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js b/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import styles from './PageHeader.module.scss';
+import * as styles from './PageHeader.module.scss';
 
 const PageHeader = ({ title, theme, tabs = [] }) => (
   <div

diff --git a/packages/gatsby-theme-carbon/src/components/Tabs/Tabs.js b/packages/gatsby-theme-carbon/src/components/Tabs/Tabs.js
@@ -16,7 +16,7 @@ import { breakpoints } from '@carbon/elements';
 import cx from 'classnames';
 
 import { useId } from '../../util/hooks/useId';
-import styles from './Tabs.module.scss';
+import * as styles from './Tabs.module.scss';
 
 function elementIsNullOrString(child) {
   return !child || typeof child.type === 'string';

diff --git a/packages/gatsby-theme-carbon/src/components/Utils/Utils.js b/packages/gatsby-theme-carbon/src/components/Utils/Utils.js
@@ -4,7 +4,7 @@ import cx from 'classnames';
 import FeedbackDialog from '../FeedbackDialog';
 import BackToTopBtn from '../BackToTopBtn';
 
-import styles from './Utils.module.scss';
+import * as styles from './Utils.module.scss';
 
 const Utils = () => {
   const [hidden, setHidden] = useState(true);