Fix className props

adobe · Jul 8, 2020 · 9bb94f0 · 9bb94f0
1 parent 71c7424
commit 9bb94f0
Show file tree

Hide file tree

Showing 19 changed files with 62 additions and 38 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+package.json
+example/*
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "arrowParens": "avoid",
+  "semi": false
+}
diff --git a/package.json b/package.json
@@ -4,9 +4,11 @@
   "version": "0.0.1",
   "workspaces": ["example", "packages/*"],
   "scripts": {
+    "start": "npm run build && npm run serve",
     "dev": "yarn workspace example develop",
     "build": "yarn workspace example build",
     "serve": "yarn workspace example serve",
-    "clean": "yarn workspace example clean"
+    "clean": "yarn workspace example clean",
+    "format": "prettier --write '**/*.{js,json}'"
   }
 }
diff --git a/packages/gatsby-theme-spectrum/package.json b/packages/gatsby-theme-spectrum/package.json
@@ -29,6 +29,7 @@
     "@spectrum-css/typography": "^2.1.3",
     "@spectrum-css/well": "^3.0.0-beta.2",
     "@spectrum-icons/workflow": "^3.0.0",
+    "classnames": "^2.2.6",
     "gatsby-plugin-catch-links": "^2.3.7",
     "gatsby-plugin-emotion": "^4.3.6",
     "gatsby-plugin-mdx": "^1.2.19",

diff --git a/packages/gatsby-theme-spectrum/src/components/Button.js b/packages/gatsby-theme-spectrum/src/components/Button.js
@@ -12,10 +12,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import '@spectrum-css/button/dist/index-vars.css';
+import classNames from 'classnames';
+import '@spectrum-css/button';
 
-const Button = ({children, variant, isQuiet, ...props}) => (
-  <button {...props} className={`spectrum-Button spectrum-Button--${variant} ${isQuiet ? 'spectrum-Button--quiet' : ''}`}>{children}</button>
+const Button = ({children, variant, isQuiet, className, ...props}) => (
+  <button {...props} className={classNames(className, ['spectrum-Button', `spectrum-Button--${variant}`, {'spectrum-Button--quiet': isQuiet}])}>{children}</button>
 );
 
 Button.propTypes = {

diff --git a/packages/gatsby-theme-spectrum/src/components/Code.js b/packages/gatsby-theme-spectrum/src/components/Code.js
@@ -11,8 +11,9 @@
  */
 
 import React from 'react';
-import '@spectrum-css/typography/dist/index-vars.css';
+import '@spectrum-css/typography';
+import classNames from 'classnames';
 
-export const Code = ({children, ...props}) => (
-  <code {...props} className="spectrum-Code4">{children}</code>
+export const Code = ({children, className, ...props}) => (
+  <code {...props} className={classNames(className, 'spectrum-Code4')}>{children}</code>
 )
diff --git a/packages/gatsby-theme-spectrum/src/components/Feedback.js b/packages/gatsby-theme-spectrum/src/components/Feedback.js
@@ -14,15 +14,20 @@ import React from 'react';
 import {css} from '@emotion/core';
 import PropTypes from 'prop-types';
 import {Flex} from '@react-spectrum/layout';
+import {View} from '@react-spectrum/view';
 import {Button} from "./Button";
-import '@spectrum-css/button/dist/index-vars.css';
+import '@spectrum-css/button';
 
 const Feedback = ({onYes, onNo}) => (
   <Flex alignItems="center">
     <span css={css`padding-right: var(--spectrum-global-dimension-static-size-200);`}>Was this helpful ?</span>
     <Flex gap="size-200">
-      <Button variant="primary" onClick={() => {onYes && onYes()}}>Yes</Button>
-      <Button variant="primary" onClick={() => {onNo && onNo()}}>No</Button>
+      <View>
+        <Button variant="primary" onClick={() => {onYes && onYes()}}>Yes</Button>
+      </View>
+      <View>
+        <Button variant="primary" onClick={() => {onNo && onNo()}}>No</Button>
+      </View>
     </Flex>
   </Flex>
 );

diff --git a/packages/gatsby-theme-spectrum/src/components/Footer.js b/packages/gatsby-theme-spectrum/src/components/Footer.js
@@ -15,7 +15,7 @@ import {css} from '@emotion/core';
 import {Flex} from '@react-spectrum/layout';
 import {View} from '@react-spectrum/view';
 import {Divider} from '@react-spectrum/divider';
-import '@spectrum-css/typography/dist/index-vars.css';
+import '@spectrum-css/typography';
 
 export const Footer = () => (
   <footer

diff --git a/packages/gatsby-theme-spectrum/src/components/Header.js b/packages/gatsby-theme-spectrum/src/components/Header.js
@@ -18,8 +18,8 @@ import {css} from '@emotion/core';
 import {Grid, Flex} from '@react-spectrum/layout';
 import {View} from '@react-spectrum/view';
 import {Button} from './Button';
-import '@spectrum-css/typography/dist/index-vars.css';
-import '@spectrum-css/tabs/dist/index-vars.css';
+import '@spectrum-css/typography';
+import '@spectrum-css/tabs';
 
 const stretched = css`
   height: 100%;

diff --git a/packages/gatsby-theme-spectrum/src/components/Heading1.js b/packages/gatsby-theme-spectrum/src/components/Heading1.js
@@ -11,10 +11,11 @@
  */
 
 import React from 'react';
-import '@spectrum-css/typography/dist/index-vars.css';
+import classNames from 'classnames';
+import '@spectrum-css/typography';
 
-export const Heading1 = ({children, ...props}) => (
-  <h1 {...props} className="spectrum-Heading--XXXL">
+export const Heading1 = ({children, className, ...props}) => (
+  <h1 {...props} className={classNames(className, 'spectrum-Heading--XXXL')}>
     {children}
   </h1>
 );
diff --git a/packages/gatsby-theme-spectrum/src/components/Heading2.js b/packages/gatsby-theme-spectrum/src/components/Heading2.js
@@ -12,15 +12,16 @@
 
 import React from 'react';
 import {css} from '@emotion/core';
-import '@spectrum-css/typography/dist/index-vars.css';
+import classNames from 'classnames';
+import '@spectrum-css/typography';
 import {Divider} from '@react-spectrum/divider';
 import {Link} from './Link';
 
-export const Heading2 = ({children, ...props}) => (
+export const Heading2 = ({children, className, ...props}) => (
   <>
     <h2
       {...props}
-      className="spectrum-Heading--L"
+      className={classNames(className, 'spectrum-Heading--L')}
       css={css`
         & a {
           visibility: hidden;

diff --git a/packages/gatsby-theme-spectrum/src/components/Heading3.js b/packages/gatsby-theme-spectrum/src/components/Heading3.js
@@ -12,14 +12,15 @@
 
 import React from 'react';
 import {css} from '@emotion/core';
-import '@spectrum-css/typography/dist/index-vars.css';
+import classNames from 'classnames';
+import '@spectrum-css/typography';
 import {Link} from './Link';
 
-export const Heading3 = ({children, ...props}) => (
+export const Heading3 = ({children, className, ...props}) => (
   <>
     <h3
       {...props}
-      className="spectrum-Heading--M"
+      className={classNames(className, 'spectrum-Heading--M')}
       css={css`
         & a {
           visibility: hidden;

diff --git a/packages/gatsby-theme-spectrum/src/components/Hero.js b/packages/gatsby-theme-spectrum/src/components/Hero.js
@@ -14,7 +14,7 @@ import React from 'react';
 import {css} from '@emotion/core';
 import {Flex} from '@react-spectrum/layout';
 import {View} from '@react-spectrum/view';
-import '@spectrum-css/typography/dist/index-vars.css';
+import '@spectrum-css/typography';
 
 export const Hero = ({heading, text, illustration, background}) => (
   <section css={css`

diff --git a/packages/gatsby-theme-spectrum/src/components/Image.js b/packages/gatsby-theme-spectrum/src/components/Image.js
@@ -15,8 +15,9 @@
 import React from 'react';
 import {css} from '@emotion/core';
 
-export const Image = ({alt, src}) => (
+export const Image = ({alt, src, ...props}) => (
   <img
+    {...props}
     alt={alt}
     src={src}
     css={css`

diff --git a/packages/gatsby-theme-spectrum/src/components/InlineCode.js b/packages/gatsby-theme-spectrum/src/components/InlineCode.js
@@ -12,12 +12,13 @@
 
 import React from 'react';
 import {css} from '@emotion/core';
-import '@spectrum-css/typography/dist/index-vars.css';
-import '@spectrum-css/well/dist/index-vars.css';
+import classNames from 'classnames';
+import '@spectrum-css/typography';
+import '@spectrum-css/well';
 
-export const InlineCode = ({children, ...props}) => (
+export const InlineCode = ({children, className, ...props}) => (
   <code {...props}
-        className="spectrum-Code4 spectrum-Well"
+        className={classNames(className, 'spectrum-Code4', 'spectrum-Well')}
         css={css`
           padding: 0 var(--spectrum-global-dimension-static-size-50);
           display: inline-block;

diff --git a/packages/gatsby-theme-spectrum/src/components/Layout.js b/packages/gatsby-theme-spectrum/src/components/Layout.js
@@ -23,7 +23,7 @@ import {theme} from '@react-spectrum/theme-default';
 import {Grid, Flex} from '@react-spectrum/layout';
 import {View} from '@react-spectrum/view';
 import LinkOut from '@spectrum-icons/workflow/LinkOut';
-import '@spectrum-css/typography/dist/index-vars.css';
+import '@spectrum-css/typography';
 
 import {Header} from './Header';
 import {Hero} from './Hero';

diff --git a/packages/gatsby-theme-spectrum/src/components/Link.js b/packages/gatsby-theme-spectrum/src/components/Link.js
@@ -13,8 +13,9 @@
 // todo use https://www.gatsbyjs.org/docs/gatsby-link/ and check https://www.gatsbyjs.org/docs/path-prefix/
 
 import React from 'react';
-import '@spectrum-css/link/dist/index-vars.css';
+import '@spectrum-css/link';
+import classNames from 'classnames';
 
-export const Link = ({children, ...props}) => (
-  <a className="spectrum-Link" {...props}>{children}</a>
+export const Link = ({children, className, ...props}) => (
+  <a {...props} className={classNames(className, 'spectrum-Link')}>{children}</a>
 )
diff --git a/packages/gatsby-theme-spectrum/src/components/List.js b/packages/gatsby-theme-spectrum/src/components/List.js
@@ -11,8 +11,9 @@
  */
 
 import React from 'react';
-import '@spectrum-css/typography/dist/index-vars.css';
+import classNames from 'classnames';
+import '@spectrum-css/typography';
 
-export const List = ({children, ...props}) => (
-  <ul {...props} className="spectrum-Body--M">{children}</ul>
+export const List = ({children, className, ...props}) => (
+  <ul {...props} className={classNames(className, 'spectrum-Body--M')}>{children}</ul>
 );
diff --git a/packages/gatsby-theme-spectrum/src/components/Paragraph.js b/packages/gatsby-theme-spectrum/src/components/Paragraph.js
@@ -11,8 +11,9 @@
  */
 
 import React from 'react';
-import '@spectrum-css/typography/dist/index-vars.css';
+import classNames from 'classnames';
+import '@spectrum-css/typography';
 
-export const Paragraph = ({children, ...props}) => (
-  <p {...props} className="spectrum-Body--M">{children}</p>
+export const Paragraph = ({children, className, ...props}) => (
+  <p {...props} className={classNames(className, 'spectrum-Body--M')}>{children}</p>
 );