Merge pull request #130 from WebDevStudios/feature/component-handling

Feature/component handling

Author: Greg Rickaby

api/wordpress/_global/getPostTypeArchive.js

@@ -52,7 +52,7 @@ export const archiveSeo = {
  * @param {string}  cursor   Start/end cursor for pagination.
  * @param {boolean} getNext  Whether to retrieve next set of posts (true) or previous set (false).
  * @param {number}  perPage  Number of posts per page.
- * @return {object}          Object containing Apollo client instance and post archive data or error object.
+ * @return {object} Object containing Apollo client instance and post archive data or error object.
  */
 export default async function getPostTypeArchive(
   postType,

api/wordpress/_global/getPostTypeById.js

@@ -20,7 +20,7 @@ import getMenus from '../menus/getMenus'
  * @param {number | string} id       Post identifier.
  * @param {string}          idType   Type of ID.
  * @param {string}          preview  Whether query is for a regular post view (null), a preview check (basic), or full post preview (full).
- * @return {object}                  Object containing Apollo client instance and post data or error object.
+ * @return {object} Object containing Apollo client instance and post data or error object.
  */
 export default async function getPostTypeById(
   postType,

api/wordpress/_global/getPostTypeStaticPaths.js

@@ -7,7 +7,7 @@ import {initializeWpApollo} from '../connector'
  *
  * @author WebDevStudios
  * @param {string} postType WP post type.
- * @return {object}         Post type paths.
+ * @return {object} Post type paths.
  */
 export default async function getPostTypeStaticPaths(postType) {
   if (!postType || !isValidPostType(postType)) {

api/wordpress/_global/getPostTypeStaticProps.js

@@ -12,7 +12,7 @@ import getFrontendPage, {frontendPageSeo} from './getFrontendPage'
  * @param {string}  postType    Post Type.
  * @param {boolean} preview     Whether requesting preview of post.
  * @param {object}  previewData Post preview data.
- * @return {object}             Object containing post props and revalidate setting.
+ * @return {object} Object containing post props and revalidate setting.
  */
 export default async function getPostTypeStaticProps(
   params,

api/wordpress/_global/postTypes.js

@@ -50,7 +50,7 @@ export const hierarchicalPostTypes = ['page']
  *
  * @author WebDevStudios
  * @param {string} postType WP post type.
- * @return {boolean}        Whether provided post type is valid.
+ * @return {boolean} Whether provided post type is valid.
  */
 export function isValidPostType(postType) {
   return Object.keys(postTypes).includes(postType)
@@ -61,7 +61,7 @@ export function isValidPostType(postType) {
  *
  * @author WebDevStudios
  * @param {string} postType WP post type.
- * @return {boolean}        Whether provided post type is hierarchical.
+ * @return {boolean} Whether provided post type is hierarchical.
  */
 export function isHierarchicalPostType(postType) {
   return hierarchicalPostTypes.includes(postType)

api/wordpress/connector.js

@@ -30,7 +30,7 @@ let wpApolloClient
  *
  * @author WebDevStudios
  * @param {boolean} auth Whether to include authentication via WP application password.
- * @return {object}      Apollo client instance.
+ * @return {object} Apollo client instance.
  */
 export function createWpApolloClient(auth = false) {
   return new ApolloClient({
@@ -51,7 +51,7 @@ export function createWpApolloClient(auth = false) {
  *
  * @author WebDevStudios
  * @param {*} initialState Initial Apollo state.
- * @return {object}        WP Apollo client instance.
+ * @return {object} WP Apollo client instance.
  */
 export function initializeWpApollo(initialState = null) {
   // Only run one instance of the Apollo client.

components/atoms/PullQuote/PullQuote.js

@@ -0,0 +1,40 @@
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import RichText from '../RichText'
+import styles from './PullQuote.module.css'
+
+/**
+ * PullQuote Block
+ *
+ * @author WebDevStudios
+ * @param {string} value     The pull quote content of the block.
+ * @param {string} citation  The optional author citation.
+ * @param {string} id        Optional anchor/id.
+ * @param {string} className Optional classnames.
+ * @return {Element}         The PullQuote component.
+ */
+export default function PullQuote({value, citation, id, className}) {
+  return (
+    <>
+      {!!value && (
+        <figure id={id ? id : null} className={cn(styles.pullquote, className)}>
+          <blockquote>
+            <div className={styles.content}>
+              <RichText tag="div">{value}</RichText>
+            </div>
+          </blockquote>
+          {!!citation && (
+            <figcaption className={styles.cite}>~ {citation}</figcaption>
+          )}
+        </figure>
+      )}
+    </>
+  )
+}
+
+PullQuote.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  value: PropTypes.string,
+  citation: PropTypes.string
+}

components/atoms/PullQuote/PullQuote.module.css

@@ -0,0 +1,11 @@
+.pullquote {
+  @apply mb-24 p-20 px-40 text-center;
+
+  & p {
+    @apply font-secondary text-h5;
+  }
+
+  & > figcaption {
+    @apply font-secondary text-sm italic;
+  }
+}

components/atoms/PullQuote/PullQuote.stories.mdx

@@ -0,0 +1,40 @@
+import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
+
+import PullQuote from '.'
+
+<Meta title="Components/Atoms/Pullquote" component={PullQuote} />
+
+# Pull Quote
+
+Use this to display a pull quote.
+
+<Canvas>
+  <Story name="Component">
+    <PullQuote
+      quote="I have no other view than to promote the public good, and am unambitious of honors not founded in the approbation of my country."
+      citation="George Washington"
+    />
+  </Story>
+</Canvas>
+
+## Controls
+
+Play around with `<PullQuote />` props in the [Canvas tab of the Controls story](?path=/story/design-system-molecules-pullquote--controls).
+
+export const Template = (args) => <PullQuote {...args} />
+
+<Canvas>
+  <Story
+    name="Controls"
+    args={{
+      quote:
+        'I have no other view than to promote the public good, and am unambitious of honors not founded in the approbation of my country.',
+      citation: 'George Washington',
+      image:
+        'https://upload.wikimedia.org/wikipedia/commons/b/b6/Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg',
+      imageAlt: "George Washington's official portrait"
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

components/atoms/PullQuote/index.js

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