Allow spread props

.github/workflows/build.yml

@@ -0,0 +1,25 @@
+name: Build
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies and run build
+        run: |
+          npm install -g @storybook/cli
+          npm install
+          npm run build

.github/workflows/push.yml

@@ -22,10 +22,10 @@ jobs:
       - uses: actions/checkout@v2
       - name: Prepare repository
         run: git fetch --unshallow --tags
-      - name: Use Node.js 18.17.0
+      - name: Use Node.js 20
         uses: actions/setup-node@v1
         with:
-          node-version: 18.17.0
+          node-version: 20
       - name: Cache node modules
         uses: actions/cache@v1
         with:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jasonrundell/dropship",
-  "version": "2.2.6",
+  "version": "2.3.0",
   "description": "Get a React project up and running really fast with Dropship.",
   "main": "lib/index.js",
   "repository": {

src/stories/atoms/Article/Article.jsx

@@ -6,9 +6,9 @@ export const StyledArticle = styled.article`
   width: 100%;
 `
 
-export const Article = ({ id, classNames, children }) => {
+export const Article = ({ classNames, children, ...props }) => {
   return (
-    <StyledArticle id={id} className={classNames}>
+    <StyledArticle className={classNames} {...props}>
       {children}
     </StyledArticle>
   )
@@ -30,6 +30,5 @@ Article.propTypes = {
 }
 
 Article.defaultProps = {
-  id: null,
   classNames: null
 }

src/stories/atoms/Avatar/Avatar.jsx

@@ -17,10 +17,10 @@ const StyledAvatar = styled.div`
     props.size === 'large'
       ? `height: ${sizes.largest}rem; width: ${sizes.largest}rem; line-height: ${sizes.largest}rem;`
       : props.size === 'small'
-      ? `height: ${sizes.large}rem; width: ${sizes.large}rem; line-height: ${sizes.large}rem;`
-      : props.size === 'tiny'
-      ? `height: ${sizes.small}rem; width: ${sizes.small}rem; line-height: ${sizes.small}rem;`
-      : `height: ${sizes.larger}rem; width: ${sizes.larger}rem; line-height: ${sizes.larger}rem;`}
+        ? `height: ${sizes.large}rem; width: ${sizes.large}rem; line-height: ${sizes.large}rem;`
+        : props.size === 'tiny'
+          ? `height: ${sizes.small}rem; width: ${sizes.small}rem; line-height: ${sizes.small}rem;`
+          : `height: ${sizes.larger}rem; width: ${sizes.larger}rem; line-height: ${sizes.larger}rem;`}
 
   img {
     width: 100%;
@@ -47,10 +47,10 @@ const StyledFigure = styled.div`
     props.size === 'large'
       ? `font-size: ${sizes.large}rem; line-height: ${sizes.large * 2}rem;`
       : props.size === 'small'
-      ? `font-size: ${sizes.smaller}rem; line-height: ${sizes.large}rem;`
-      : props.size === 'tiny'
-      ? `font-size: ${sizes.smallest}rem; line-height: ${sizes.small}rem;`
-      : `font-size: ${sizes.normal}rem; line-height: ${sizes.larger}rem;`}
+        ? `font-size: ${sizes.smaller}rem; line-height: ${sizes.large}rem;`
+        : props.size === 'tiny'
+          ? `font-size: ${sizes.smallest}rem; line-height: ${sizes.small}rem;`
+          : `font-size: ${sizes.normal}rem; line-height: ${sizes.larger}rem;`}
 `
 
 export const Avatar = ({
@@ -61,7 +61,8 @@ export const Avatar = ({
   ariaBusy,
   ariaLabel,
   classNames,
-  figureClassNames
+  figureClassNames,
+  ...props
 }) => {
   let avatarFigure = <Icon icon="useralt" />
 
@@ -87,6 +88,7 @@ export const Avatar = ({
       src={src}
       aria-busy={ariaBusy}
       aria-label={ariaLabel}
+      {...props}
     >
       {avatarFigure}
     </StyledAvatar>

src/stories/atoms/Blockquote/Blockquote.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from '@emotion/styled'
 
-export const Blockquote = ({ classNames, color, children }) => {
+export const Blockquote = ({ classNames, color, children, ...props }) => {
   const StyledBlockquote = styled.blockquote`
     position: relative;
     &::before {
@@ -34,7 +34,11 @@ export const Blockquote = ({ classNames, color, children }) => {
     }
   `
 
-  return <StyledBlockquote className={classNames}>{children}</StyledBlockquote>
+  return (
+    <StyledBlockquote className={classNames} {...props}>
+      {children}
+    </StyledBlockquote>
+  )
 }
 
 Blockquote.propTypes = {

src/stories/atoms/Box/Box.jsx

@@ -8,9 +8,14 @@ const StyledBox = styled.div`
   line-height: 1.25rem;
 `
 
-export const Box = ({ isTight, isRoomy, classNames, children }) => {
+export const Box = ({ isTight, isRoomy, classNames, children, ...props }) => {
   return (
-    <StyledBox isTight={isTight} isRoomy={isRoomy} className={classNames}>
+    <StyledBox
+      isTight={isTight}
+      isRoomy={isRoomy}
+      className={classNames}
+      {...props}
+    >
       {children}
     </StyledBox>
   )

src/stories/atoms/Button/Button.jsx

@@ -10,23 +10,24 @@ const StyledButton = styled.button`
     props.size === 'large'
       ? '2rem'
       : props.size === 'medium'
-      ? '1.5rem'
-      : '1rem'};
+        ? '1.5rem'
+        : '1rem'};
   padding: ${(props) =>
     props.size === 'large'
       ? '0.75rem 1.5rem'
       : props.size === 'medium'
-      ? '0.6875rem 1.25rem'
-      : '0.625rem 1rem'};
+        ? '0.6875rem 1.25rem'
+        : '0.625rem 1rem'};
 `
 
-export const Button = ({ size, label, onClick, classNames }) => {
+export const Button = ({ size, label, onClick, classNames, ...props }) => {
   return (
     <StyledButton
       type="button"
       size={size}
       onClick={onClick}
       className={classNames}
+      {...props}
     >
       {label}
     </StyledButton>

src/stories/atoms/Cite/Cite.jsx

@@ -1,8 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-export const Cite = ({ classNames, children }) => {
-  return <cite className={classNames}>{children}</cite>
+export const Cite = ({ classNames, children, ...props }) => {
+  return (
+    <cite className={classNames} {...props}>
+      {children}
+    </cite>
+  )
 }
 
 Cite.propTypes = {

src/stories/atoms/Container/Container.jsx

@@ -11,19 +11,15 @@ const StyledContainer = styled.div`
   }
 `
 
-export const Container = ({ id, classNames, children }) => {
+export const Container = ({ classNames, children, ...props }) => {
   return (
-    <StyledContainer id={id} className={classNames}>
+    <StyledContainer className={classNames} {...props}>
       {children}
     </StyledContainer>
   )
 }
 
 Container.propTypes = {
-  /**
-   * Assign a unique id to the section. A common use-case.
-   */
-  id: PropTypes.string,
   /**
    * Assign a custom class name or multiple class names to the component.
    */
@@ -35,6 +31,5 @@ Container.propTypes = {
 }
 
 Container.defaultProps = {
-  id: null,
   classNames: null
 }

src/stories/atoms/Footer/Footer.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-export const Footer = ({ children, classnames }) => (
-  <footer className={classnames}>{children}</footer>
+export const Footer = ({ children, classnames, ...props }) => (
+  <footer className={classnames} {...props}>
+    {children}
+  </footer>
 )
 
 Footer.propTypes = {

src/stories/atoms/Grid/Grid.jsx

@@ -21,7 +21,8 @@ export const Grid = ({
   largeColumnCount,
   breakInside,
   classNames,
-  children
+  children,
+  ...props
 }) => {
   const mediumBreakpoint = '768px'
   const largeBreakpoint = '1024px'
@@ -122,7 +123,11 @@ export const Grid = ({
     largeColClassName
   )
 
-  return <StyledGrid className={classNames}>{children}</StyledGrid>
+  return (
+    <StyledGrid className={classNames} {...props}>
+      {children}
+    </StyledGrid>
+  )
 }
 
 Grid.propTypes = {

src/stories/atoms/Heading/Heading.jsx

@@ -46,7 +46,7 @@ const StyledHeading6 = styled.h6`
   margin-bottom: ${sizes.smallest}rem;
 `
 
-export const Heading = ({ level, label, classNames }) => {
+export const Heading = ({ level, label, classNames, id }) => {
   let titleClass
   let Component
 
@@ -79,7 +79,11 @@ export const Heading = ({ level, label, classNames }) => {
       titleClass = 'h1'
       Component = StyledHeading1
   }
-  return <Component className={classNames}>{label}</Component>
+  return (
+    <Component className={classNames} id={id}>
+      {label}
+    </Component>
+  )
 }
 
 Heading.propTypes = {

src/stories/atoms/Icon/Icon.jsx

@@ -29,7 +29,8 @@ export const Icon = ({
   block,
   ariaLabel,
   classNames,
-  pathClassNames
+  pathClassNames,
+  ...props
 }) => (
   <StyledIcon
     role="img"
@@ -39,6 +40,7 @@ export const Icon = ({
     width="20px"
     height="20px"
     block={block}
+    {...props}
   >
     <StyledPath className={pathClassNames} d={icons[icon]} />
   </StyledIcon>

src/stories/atoms/Link/Link.jsx

@@ -7,13 +7,22 @@ const StyledLink = styled.a`
   line-height: 1;
 `
 
-export const Link = ({ href, label, onClick, target, rel, classNames }) => (
+export const Link = ({
+  href,
+  label,
+  onClick,
+  target,
+  rel,
+  classNames,
+  ...props
+}) => (
   <StyledLink
     href={href}
     className={classNames}
     target={target}
     rel={rel}
     onClick={onClick}
+    {...props}
   >
     {label}
   </StyledLink>

src/stories/atoms/Main/Main.jsx

@@ -1,7 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-export const Main = ({ children }) => <main id="main">{children}</main>
+export const Main = ({ children, ...props }) => (
+  <main id="main" {...props}>
+    {children}
+  </main>
+)
 
 Main.propTypes = {
   /**

src/stories/atoms/Paragraph/Paragraph.jsx

@@ -6,8 +6,10 @@ const StyledParagraph = styled.p`
   line-height: 1.3;
 `
 
-export const Paragraph = ({ classNames, children }) => (
-  <StyledParagraph className={classNames}>{children}</StyledParagraph>
+export const Paragraph = ({ classNames, children, ...props }) => (
+  <StyledParagraph className={classNames} {...props}>
+    {children}
+  </StyledParagraph>
 )
 
 Paragraph.propTypes = {

src/stories/atoms/Row/Row.jsx

@@ -8,9 +8,9 @@ export const StyledRow = styled.div`
   justify-content: ${(props) => props.justify};
 `
 
-export const Row = ({ justify, classNames, children }) => {
+export const Row = ({ justify, classNames, children, ...props }) => {
   return (
-    <StyledRow justify={justify} className={classNames}>
+    <StyledRow justify={justify} className={classNames} {...props}>
       {children}
     </StyledRow>
   )

src/stories/atoms/Section/Section.jsx

@@ -6,17 +6,13 @@ const StyledSection = styled.section`
   width: 100%;
 `
 
-export const Section = ({ id, classNames, children }) => (
-  <StyledSection id={id} className={classNames}>
+export const Section = ({ classNames, children, ...props }) => (
+  <StyledSection className={classNames} {...props}>
     {children}
   </StyledSection>
 )
 
 Section.propTypes = {
-  /**
-   * Assign a unique id to the section. A common use-case.
-   */
-  id: PropTypes.string,
   /**
    * Assign a custom class name or multiple class names to the component.
    */
@@ -28,6 +24,5 @@ Section.propTypes = {
 }
 
 Section.defaultProps = {
-  id: null,
   classNames: null
 }