Bricks

Bricks are the barebones of our components.

Author

Use this component to add and author with your avatar or logo.

Props:

• author: String.

export default function Author({ author }) {
  return (
    <div className={styles.author}>
      <YOUR_LOGO_ICON />
      <p>{author}</p>
    </div>
  );
}

Button

It has 2 versions primary and secondary, the primary is a filled rounded button, and the secondary is a text with an arrow.

Props:

• slug: String.
• name: String.
• mode: String.

Imports:

• Link from gatsby.

export default function Button(props) {
  const { slug, name, mode } = props;
  return (
    <div
      className={cx(
        styles.button,
        mode === 'primary' && styles.primary,
        mode === 'secondary' && styles.secondary,
      )}
    >
      <Link to={slug}>{name}</Link>
      {mode === 'secondary' && <ArrowRightICO />}
    </div>
  );
}

Cards

Cards are not technically a brick, but have been used in blocks and can be used as their own.

Props:

• title: String.
• articleAuthor: String.
• slug: String.
• image: Object.
• alt: String.
• categories: Array || Bool.

Imports:

• Link from gatsby.
• Heading from Bricks.
• Author from Bricks.
• Category from Bricks.
• Image from Bricks.

export default function Card(props) {
  const {
    title,
    articleAuthor,
    slug,
    image,
    categories,
    alt,
  } = props;

  return (
    <div className={styles.card}>
      <Link to={`/blog/${slug}`} aria-label={`Go to ${title}`}>
        <div className={styles.cardContent}>
          <Heading className={styles.heading} level="3">
            {title}
          </Heading>
          <Author author={articleAuthor} />
        </div>
        <div className={styles.cardImage}>
          <Image image={image} alt={alt} />
        </div>
      </Link>
      <Category categories={categories} />
    </div>
  );
}

Category

Pass an array of categories objects, objects must have title and slug.

Props: categories: Array || Bool

Imports:

• Link from gatsby.

export default function Category({ categories }) {
  return (
    <ul className={styles.categories}>
      {Array.isArray(categories)
        && categories.map((cat, index) => (
          <li key={index}>
            <Link to={`/category/${cat.slug}`} aria-label={`Go to ${cat.title} Category`}>{cat.title}</Link>
          </li>
        ))}
    </ul>
  );
}

Content

This is just a wrapper for the StructuredText by DatoCMS with a custom class.

Props:

• content: Object.

Imports:

• StructuredTex from React DatoCMS;

export default function Content({ content }) {
  return (
    <div className={styles.paragraph}>
      <StructuredText data={content} />
    </div>
  );
}

Date Meta

Add any date with your icon of choice.

Props:

• date: String

export default function DateMeta({ date }) {
  return (
    <div className={styles.date}>
      <ClockICO />
      <p>{date}</p>
    </div>
  );
}

Heading

Use as a Heading with 3 levels of choice or the default (h4).

Props:

• level: String.
• children: Element || String.
• className: String.

Imports:

• cx from classnames.

export default function Heading(props) {
  const { level, children, className } = props;
  switch (level) {
    case '1':
      return <h1 className={cx(styles.heading, className)}>{children}</h1>;

    case '2':
      return <h2 className={cx(styles.heading, className)}>{children}</h2>;

    case '3':
      return <h3 className={cx(styles.heading, className)}>{children}</h3>;

    default:
      return <h4 className={cx(styles.heading, className)}>{children}</h4>;
  }
}

Hero Container

A Wrapper that will expand fullwidth.

Props:

• children: Element || String.

Imports:

• cx from classnames.

export default function HeroContainer({ children }) {
  return (
    <div className={cx('alignfull', styles.heroContainer)}>{children}</div>
  );
}