Skip to content

Commit

Permalink
fix(scss): import + other minor fixes (#1410)
Browse files Browse the repository at this point in the history 
* Fixing scss import + other minor fixes

* Fixing useMetadata in Default Layout

* lint fixing

* bring back defaultProps

* Fixing inline code blocks

* Minor info comment

* More suggested changes

* remove white space

* testing vercel again

* Fixing yarn

* fixing yarn
  • Loading branch information
@muditjuneja
muditjuneja committed Feb 6, 2024
1 parent e1c6245 commit ffa7fbc
Show file tree
Hide file tree
Showing 26 changed files with 111 additions and 97 deletions.
2 changes: 1 addition & 1 deletion packages/example/src/pages/contributions.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ description: Instructions for developing and contributing to the theme
date: 27 January 2020
---

<!-- Page title left out so it can be generated -->
{/* Page title left out so it can be generated */}

<PageDescription>

Expand Down
12 changes: 6 additions & 6 deletions packages/gatsby-theme-carbon/src/components/ArticleCard/article-card.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
// $carbon--white-0
@use '@carbon/react/scss/colors' as *;
@use '~@carbon/react/scss/colors' as *;
// $spacing-0X
@use '@carbon/react/scss/spacing' as *;
@use '~@carbon/react/scss/spacing' as *;
// carbon--type-style
@use '@carbon/react/scss/type' as *;
@use '~@carbon/react/scss/type' as *;
// color tokens
@use '@carbon/react/scss/compat/theme' as *;
@use '~@carbon/react/scss/compat/theme' as *;
// $standard-easing $transition-x
@use '@carbon/react/scss/motion' as *;
@use '~@carbon/react/scss/motion' as *;
// carbon--breakpoint
@use '@carbon/react/scss/breakpoint' as *;
@use '~@carbon/react/scss/breakpoint' as *;

.cds--article-card .cds--tile {
background: $ui-01;
Expand Down
30 changes: 22 additions & 8 deletions packages/gatsby-theme-carbon/src/components/Code/Code.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import Highlight, { defaultProps } from 'prism-react-renderer';
import React, { useEffect, useState } from 'react';
import { Highlight, defaultProps } from 'prism-react-renderer';
import { ChevronDown, ChevronUp } from '@carbon/react/icons';

import cx from 'classnames';
Expand All @@ -17,33 +17,47 @@ import useMetadata from '../../util/hooks/useMetadata';
const Code = ({ children, className: classNameProp = '', path, src }) => {
const [hasMoreThanNineLines, setHasMoreThanNineLines] = useState(false);
const [shouldShowMore, setShouldShowMore] = useState(false);
const [isInlineCode, setIsInlineCode] = useState(false);
useEffect(() => {
// Inline code blocks don't have a className prop
if (!classNameProp) {
setIsInlineCode(true);
}
}, [classNameProp]);

const { interiorTheme } = useMetadata();

const language = classNameProp.replace(/language-/, '').replace('mdx', 'jsx');

const removeTrailingEmptyLine = (lines) => {
const [lastLine] = lines.splice(-1);
if (lastLine[0].empty) {
return lines;
if (lines && lines.length) {
const [lastLine] = lines.splice(-1);
if (lastLine[0].empty) {
return lines;
}
return [...lines, lastLine];
}
return [...lines, lastLine];
};

const getLines = (lines) => {
const withoutTrailingEmpty = removeTrailingEmptyLine(lines);

if (withoutTrailingEmpty.length > 9) {
if (withoutTrailingEmpty && withoutTrailingEmpty.length > 9) {
setHasMoreThanNineLines(true);
}

if (shouldShowMore) {
return withoutTrailingEmpty;
}

return withoutTrailingEmpty.slice(0, 9);
return withoutTrailingEmpty ? withoutTrailingEmpty.slice(0, 9) : [];
};

// TODO - remove this once we have a better way of handling inline code. This seems like a hack
// This might be the result of upgrade of prism-react-renderer.
if (isInlineCode) {
return <code>{children}</code>;
}
return (
<Row className={cx(styles.row)}>
<PathRow src={src} path={path}>
Expand Down
12 changes: 6 additions & 6 deletions packages/gatsby-theme-carbon/src/components/DoDontExample/do-dont-example.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
// carbon--breakpoint
@use '@carbon/react/scss/breakpoint' as *;
@use '~@carbon/react/scss/breakpoint' as *;
// $carbon--white-0
@use '@carbon/react/scss/colors' as *;
@use '~@carbon/react/scss/colors' as *;
// $prefix
@use '@carbon/react/scss/config' as *;
@use '~@carbon/react/scss/config' as *;
// $spacing-0X
@use '@carbon/react/scss/spacing' as *;
@use '~@carbon/react/scss/spacing' as *;
// carbon--type-style
@use '@carbon/react/scss/type' as *;
@use '~@carbon/react/scss/type' as *;
// color tokens
@use '@carbon/react/scss/compat/theme' as *;
@use '~@carbon/react/scss/compat/theme' as *;

// Example
.cds--example {
Expand Down
10 changes: 5 additions & 5 deletions packages/gatsby-theme-carbon/src/components/FeatureCard/feature-card.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
@use '@carbon/react/scss/compat/theme' as *;
@use '~@carbon/react/scss/compat/theme' as *;
// carbon--breakpoint
@use '@carbon/react/scss/breakpoint' as *;
@use '~@carbon/react/scss/breakpoint' as *;
// $carbon--white-0
@use '@carbon/react/scss/colors' as *;
@use '~@carbon/react/scss/colors' as *;
// $spacing-0X
@use '@carbon/react/scss/spacing' as *;
@use '~@carbon/react/scss/spacing' as *;

@use '@carbon/react/scss/compat/theme' as *;
@use '~@carbon/react/scss/compat/theme' as *;

.cds--feature-card {
position: relative;
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-theme-carbon/src/components/GlobalSearch/GlobalSearch.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
}

.label {
// TODO - this can instead use the visually-hidden helper mixin from @carbon/react once it's provided
// TODO - this can instead use the visually-hidden helper mixin from ~@carbon/react once it's provided
// @include visually-hidden;

position: absolute;
Expand Down
6 changes: 3 additions & 3 deletions packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// carbon--breakpoint
@use '@carbon/react/scss/breakpoint' as *;
@use '~@carbon/react/scss/breakpoint' as *;
// $carbon--white-0
@use '@carbon/react/scss/colors' as *;
@use '~@carbon/react/scss/colors' as *;
// carbon--type-style
@use '@carbon/react/scss/type' as *;
@use '~@carbon/react/scss/type' as *;

.container--dark {
background: $gray-100;
Expand Down
12 changes: 6 additions & 6 deletions packages/gatsby-theme-carbon/src/components/ImageCard/image-card.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
// carbon--breakpoint
@use '@carbon/react/scss/breakpoint' as *;
@use '~@carbon/react/scss/breakpoint' as *;
// $carbon--white-0
@use '@carbon/react/scss/colors' as *;
@use '~@carbon/react/scss/colors' as *;
// $spacing-0X
@use '@carbon/react/scss/spacing' as *;
@use '~@carbon/react/scss/spacing' as *;
// carbon--type-style
@use '@carbon/react/scss/type' as *;
@use '~@carbon/react/scss/type' as *;
// $standard-easing $transition-x
@use '@carbon/react/scss/motion' as *;
@use '~@carbon/react/scss/motion' as *;

@use '@carbon/react/scss/compat/theme' as *;
@use '~@carbon/react/scss/compat/theme' as *;

// #906: We need to use the attribute selector here b.c. we don't control the column,
// it's provided by the developers through MDX and we don't want to force an extra prop
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-theme-carbon/src/components/Layouts/Default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const Default = ({ pageContext, children, location, Title }) => {
date,
} = frontmatter;

const { interiorTheme } = useMetadata;
const { interiorTheme } = useMetadata();

// get the path prefix if it exists
const {
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import { Link } from 'gatsby';
import { Location } from '@reach/router';
import cx from 'classnames';
import useNetwork from 'react-use/lib/useNetwork';
import { useNetworkState } from 'react-use';

import { SideNavLink, SideNavMenu, SideNavMenuItem } from '@carbon/react';

Expand All @@ -18,7 +18,7 @@ const LeftNavItem = (props) => {
const { items, category, hasDivider } = props;
const { toggleNavState } = useContext(NavContext);
const { isServiceWorkerEnabled } = useMetadata();
const isOnline = useNetwork();
const isOnline = useNetworkState();

const handleClick = (event, to) => {
toggleNavState('leftNavIsOpen', 'close');
Expand Down
8 changes: 4 additions & 4 deletions packages/gatsby-theme-carbon/src/components/PageTable/page-table.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
// carbon--breakpoint
@use '@carbon/react/scss/breakpoint' as *;
@use '~@carbon/react/scss/breakpoint' as *;
// $spacing-0X
@use '@carbon/react/scss/spacing' as *;
@use '~@carbon/react/scss/spacing' as *;
// carbon--type-style
@use '@carbon/react/scss/type' as *;
@use '~@carbon/react/scss/type' as *;
// color tokens
@use '@carbon/react/scss/compat/theme' as *;
@use '~@carbon/react/scss/compat/theme' as *;

.spacing-table td {
vertical-align: top;
Expand Down
6 changes: 3 additions & 3 deletions packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card-group.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// carbon--breakpoint
@use '@carbon/react/scss/breakpoint' as *;
@use '~@carbon/react/scss/breakpoint' as *;
// $carbon--white-0
@use '@carbon/react/scss/colors' as *;
@use '~@carbon/react/scss/colors' as *;

@use '@carbon/react/scss/compat/theme' as *;
@use '~@carbon/react/scss/compat/theme' as *;

// Card groups

Expand Down
12 changes: 6 additions & 6 deletions packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
// carbon--breakpoint
@use '@carbon/react/scss/breakpoint' as *;
@use '~@carbon/react/scss/breakpoint' as *;
// $carbon--white-0
@use '@carbon/react/scss/colors' as *;
@use '~@carbon/react/scss/colors' as *;
// $spacing-0X
@use '@carbon/react/scss/spacing' as *;
@use '~@carbon/react/scss/spacing' as *;
// carbon--type-style
@use '@carbon/react/scss/type' as *;
@use '~@carbon/react/scss/type' as *;
// $standard-easing $transition-x
@use '@carbon/react/scss/motion' as *;
@use '~@carbon/react/scss/motion' as *;
// color tokens
@use '@carbon/react/scss/compat/theme' as *;
@use '~@carbon/react/scss/compat/theme' as *;

.cds--resource-card .cds--tile {
background: $ui-01;
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-theme-carbon/src/components/Utils/Utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { useWindowScroll } from 'beautiful-react-hooks';
import useWindowScroll from 'beautiful-react-hooks/useWindowScroll';
import cx from 'classnames';
import { Layer } from '@carbon/react';
import FeedbackDialog from '../FeedbackDialog';
Expand Down
8 changes: 4 additions & 4 deletions packages/gatsby-theme-carbon/src/components/Utils/Utils.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @use '@carbon/react/scss/themes';
// @use '@carbon/react/scss/theme';
// @use '@carbon/react/scss/motion';
// @use '@carbon/react/scss/spacing';
// @use '~@carbon/react/scss/themes';
// @use '~@carbon/react/scss/theme';
// @use '~@carbon/react/scss/motion';
// @use '~@carbon/react/scss/spacing';

.container {
@include theme(compat.$g90);
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-carbon/src/styles/_theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use '@carbon/react/scss/themes';
@forward '@carbon/react/scss/theme' with (
@use '~@carbon/react/scss/themes';
@forward '~@carbon/react/scss/theme' with (
$theme: themes.$g10
);
2 changes: 1 addition & 1 deletion packages/gatsby-theme-carbon/src/styles/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use '@carbon/react/scss/type' as *;
@use '~@carbon/react/scss/type' as *;

// Base global
@use './internal/global';
Expand Down
14 changes: 7 additions & 7 deletions packages/gatsby-theme-carbon/src/styles/internal/_global.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
@use 'grid';
@use '@carbon/react/scss/type';
@use '@carbon/react/scss/colors' as *;
@use '@carbon/react/scss/compat/theme' as *;
@use '@carbon/react/scss/reset' as *;
@use '@carbon/react/scss/layer' as *;
@use '@carbon/react/scss/zone' as *;
@use '~@carbon/react/scss/type';
@use '~@carbon/react/scss/colors' as *;
@use '~@carbon/react/scss/compat/theme' as *;
@use '~@carbon/react/scss/reset' as *;
@use '~@carbon/react/scss/layer' as *;
@use '~@carbon/react/scss/zone' as *;

// Components
@use '@carbon/react/scss/components';
@use '~@carbon/react/scss/components';

@use 'plex';

Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-theme-carbon/src/styles/internal/_grid.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@use '@carbon/grid/scss/flex-grid';
@use '~@carbon/grid/scss/flex-grid';

@include flex-grid.flex-grid();
12 changes: 6 additions & 6 deletions packages/gatsby-theme-carbon/src/styles/internal/_page.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
// carbon--breakpoint
@use '@carbon/react/scss/breakpoint' as *;
@use '~@carbon/react/scss/breakpoint' as *;
// $carbon--white-0
@use '@carbon/react/scss/colors' as *;
@use '~@carbon/react/scss/colors' as *;
// $spacing-0X
@use '@carbon/react/scss/spacing' as *;
@use '~@carbon/react/scss/spacing' as *;
// carbon--type-style
@use '@carbon/react/scss/type' as *;
@use '~@carbon/react/scss/type' as *;
// $standard-easing $transition-x
@use '@carbon/react/scss/motion' as *;
@use '~@carbon/react/scss/motion' as *;
// color tokens
@use '@carbon/react/scss/compat/theme' as *;
@use '~@carbon/react/scss/compat/theme' as *;

.container {
background: var(--cds-ui-background);
Expand Down
6 changes: 3 additions & 3 deletions packages/gatsby-theme-carbon/src/styles/internal/g10.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
// We only want to import variables/mixins/helpers, not things that generate css.
// https://github.com/carbon-design-system/carbon/blob/main/packages/styles/docs/sass.md#compatibility

@use '@carbon/react/scss/compat/themes' as compat;
@use '@carbon/react/scss/compat/theme' as * with (
@use '~@carbon/react/scss/compat/themes' as compat;
@use '~@carbon/react/scss/compat/theme' as * with (
$theme: compat.$g10
);
@use '@carbon/styles/scss/utilities' as *;
@use '~@carbon/styles/scss/utilities' as *;
6 changes: 3 additions & 3 deletions packages/gatsby-theme-carbon/src/styles/internal/g100.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// These resources get shared with every css module.
// We only want to import variables/mixins/helpers, not things that generate css.
@use '@carbon/react/scss/compat/themes' as compat;
@use '@carbon/react/scss/compat/theme' as * with (
@use '~@carbon/react/scss/compat/themes' as compat;
@use '~@carbon/react/scss/compat/theme' as * with (
$theme: compat.$g100
);
@use '@carbon/styles/scss/utilities' as *;
@use '~@carbon/styles/scss/utilities' as *;
6 changes: 3 additions & 3 deletions packages/gatsby-theme-carbon/src/styles/internal/g90.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// These resources get shared with every css module.
// We only want to import variables/mixins/helpers, not things that generate css.
@use '@carbon/react/scss/compat/themes' as compat;
@use '@carbon/react/scss/compat/theme' as * with (
@use '~@carbon/react/scss/compat/themes' as compat;
@use '~@carbon/react/scss/compat/theme' as * with (
$theme: compat.$g90
);
@use '@carbon/styles/scss/utilities' as *;
@use '~@carbon/styles/scss/utilities' as *;
18 changes: 9 additions & 9 deletions packages/gatsby-theme-carbon/src/styles/internal/resources.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
// We only want to @use variables/mixins/helpers, not things that generate/output css.
// These are not provided to the internal index/global/component stylesheet(s)

@use '@carbon/react/scss/config' as * with (
@use '~@carbon/react/scss/config' as * with (
$flex-grid-columns: 12
);
@use '@carbon/react/scss/colors' as *;
@use '@carbon/grid/scss/flex-grid';
@use '@carbon/react/scss/motion' as *;
@use '@carbon/react/scss/type' as *;
@use '~@carbon/react/scss/colors' as *;
@use '~@carbon/grid/scss/flex-grid';
@use '~@carbon/react/scss/motion' as *;
@use '~@carbon/react/scss/type' as *;
// ARe these needed? We load the themes via the sass-resources-loader right?
// @use '@carbon/react/scss/themes' as *; unsure if this is needed. did we provide it to all modules in the previous/current version?
// @use '@carbon/react/scss/compat/theme' as *;
@use '@carbon/react/scss/breakpoint' as *;
@use '@carbon/react/scss/spacing' as *;
// @use '~@carbon/react/scss/themes' as *; unsure if this is needed. did we provide it to all modules in the previous/current version?
// @use '~@carbon/react/scss/compat/theme' as *;
@use '~@carbon/react/scss/breakpoint' as *;
@use '~@carbon/react/scss/spacing' as *;

0 comments on commit ffa7fbc

Please sign in to comment.