Merge branch 'staging' of github.com:WebDevStudios/nextjs-wordpress-starter into staging

Author: gregrickaby

components/atoms/Code/Code.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './Code.module.css'
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
+import {tomorrow} from 'react-syntax-highlighter/dist/cjs/styles/prism'
+
+/**
+ * Render the Code component.
+ *
+ * @author WebDevStudios
+ * @param {object}      props           The component attributes as props.
+ * @param {string}      props.className Optional classname.
+ * @param props.id
+ * @param props.content
+ * @param {boolean}     props.fullWidth Is this a fullwidth block.
+ * @return {Element} The Code component.
+ */
+export default function Code({id, className, content}) {
+  // Use the className to pass the langauge.
+  const language = className ? className : 'javascript'
+
+  // Replace any `<` and `> encoded HTML.
+  let code = content.replace(/&lt;/g, '<')
+  code = code.replace(/&gt;/g, '>')
+
+  return (
+    <>
+      {!!content && (
+        <div id={id ? id : null} className={styles.code}>
+          <SyntaxHighlighter style={tomorrow} language={language}>
+            {code}
+          </SyntaxHighlighter>
+        </div>
+      )}
+    </>
+  )
+}
+
+Code.propTypes = {
+  id: PropTypes.string,
+  content: PropTypes.string,
+  className: PropTypes.string
+}

components/atoms/Code/Code.module.css

@@ -0,0 +1,7 @@
+.code {
+  @apply mb-40;
+
+  & > pre {
+    @apply rounded-larger;
+  }
+}

components/atoms/Code/Code.stories.mdx

@@ -0,0 +1,42 @@
+import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
+
+import Separator from '.'
+
+<Meta title="Components/Atoms/Separator" component={Separator} />
+
+# Separator
+
+Use this component to display a page separator with top and bottom margins. Use it anywhere you would use an `<hr>` element.
+
+<Canvas>
+  <Story name="Component">
+    <Separator />
+  </Story>
+</Canvas>
+
+## Full Width
+
+The default separator is equal to the container width. To get a full width separator, set the `fullWidth` prop to true.
+
+<Canvas>
+  <Story name="Full Width">
+    <Separator fullWidth />
+  </Story>
+</Canvas>
+
+## Controls
+
+Play around with `<Separator />` props in the [Canvas tab of the Controls story](?path=/story/design-system-atoms-separator--controls).
+
+export const Template = (args) => <Separator {...args} />
+
+<Canvas>
+  <Story
+    name="Controls"
+    args={{
+      fullWidth: false
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

components/atoms/Code/index.js

@@ -0,0 +1 @@
+export {default} from './Code'

components/atoms/Image/Image.js

@@ -0,0 +1,85 @@
+import Link from 'next/link'
+import PropTypes from 'prop-types'
+import React from 'react'
+import RichText from '@/components/atoms/RichText'
+import styles from './Image.module.css'
+import cn from 'classnames'
+
+/**
+ * Render the Image component.
+ *
+ * @author WebDevStudios
+ * @param {string} anchor     The anchor/id of the block.
+ * @param {string} alt        The image alt text.
+ * @param {string} caption    The image caption.
+ * @param {string} className  The image class.
+ * @param {string} id         The image ID.
+ * @param {string} href       The URL of the link.
+ * @param {string} linkTarget Target for the link.
+ * @param {string} linkClass  Class for the link.
+ * @param {string} rel        The rel attribute for the link.
+ * @param {string} sizeSlug   The WP image size.
+ * @param {string} url        The full URL path of the image.
+ * @return {Element} The Image component.
+ */
+export default function Image({
+  alt,
+  anchor,
+  caption,
+  className,
+  id,
+  href,
+  linkTarget,
+  linkClass,
+  rel,
+  url
+}) {
+  return (
+    <>
+      {!!url && (
+        <div id={anchor || null} className={styles.image}>
+          {href ? (
+            <Link href={href}>
+              <a
+                target={linkTarget || null}
+                rel={rel || null}
+                className={linkClass || null}
+              >
+                <img
+                  src={url}
+                  alt={alt}
+                  className={cn(className, `image-${id}`)}
+                />
+              </a>
+            </Link>
+          ) : (
+            <img
+              src={url}
+              alt={alt}
+              className={cn(className, id && `image-${id}`)}
+            />
+          )}
+          {!!caption && (
+            <div className={styles.caption}>
+              <RichText tag="span">{caption}</RichText>
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  )
+}
+
+Image.propTypes = {
+  alt: PropTypes.string,
+  anchor: PropTypes.string,
+  caption: PropTypes.string,
+  className: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  href: PropTypes.string,
+  linkClass: PropTypes.string,
+  linkTarget: PropTypes.string,
+  rel: PropTypes.string,
+  sizeSlug: PropTypes.string,
+  url: PropTypes.string
+}

components/atoms/Image/Image.module.css

@@ -0,0 +1,11 @@
+.image {
+  @apply mb-20;
+
+  & img {
+    @apply block rounded;
+  }
+
+  & .caption {
+    @apply text-center font-secondary text-xs pt-12;
+  }
+}

components/atoms/Image/Image.stories.mdx

@@ -0,0 +1,53 @@
+import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
+
+import Image from '.'
+
+<Meta title="Components/Atoms/Image" component={Image} />
+
+# Image
+
+Use this component to display a image.
+
+<Canvas>
+  <Story name="Component">
+    <Image
+      url="https://images.unsplash.com/photo-1611149469739-cf4647d61f07?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
+      alt="Image alt text"
+      caption="This is the image caption"
+    />
+  </Story>
+</Canvas>
+
+## Image + Link
+
+Add a link to the image using the `href` prop.
+
+<Canvas>
+  <Story name="Image + Link">
+    <Image
+      url="https://images.unsplash.com/photo-1611149469739-cf4647d61f07?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
+      alt="Image alt text"
+      caption="This is the image caption"
+      href="https://google.com"
+    />
+  </Story>
+</Canvas>
+
+## Controls
+
+Play around with `<Image />` props in the [Canvas tab of the Controls story](?path=/story/components-atoms-image--controls).
+
+export const Template = (args) => <Image {...args} />
+
+<Canvas>
+  <Story
+    name="Controls"
+    args={{
+      url:
+        'https://images.unsplash.com/photo-1611149469739-cf4647d61f07?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
+      caption: 'Jeffery Smith, 28'
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

components/atoms/Image/index.js

@@ -0,0 +1 @@
+export {default} from './Image'

components/atoms/PullQuote/PullQuote.js

@@ -11,7 +11,7 @@ import styles from './PullQuote.module.css'
  * @param {string} citation  The optional author citation.
  * @param {string} id        Optional anchor/id.
  * @param {string} className Optional classnames.
- * @return {Element}         The PullQuote component.
+ * @return {Element} The PullQuote component.
  */
 export default function PullQuote({value, citation, id, className}) {
   return (
@@ -24,7 +24,9 @@ export default function PullQuote({value, citation, id, className}) {
             </div>
           </blockquote>
           {!!citation && (
-            <figcaption className={styles.cite}>~ {citation}</figcaption>
+            <figcaption className={styles.cite}>
+              ~ <RichText tag="span">{citation}</RichText>
+            </figcaption>
           )}
         </figure>
       )}

components/atoms/PullQuote/PullQuote.module.css

@@ -6,6 +6,6 @@
   }
 
   & > figcaption {
-    @apply font-secondary text-sm italic;
+    @apply font-secondary text-xs pt-12;
   }
 }