Add classnames lib

[oskarleonard]

Description

Standardize how we code conditional classes using the classnames library

Motivation

• Prevent us from having a growing number of undefined classes in the dom, we currently have more than 700 instances of undefined.
• Using the classnames lib we can over time clean up the dom, send less data to the user and simplify the dev experience.

Additional Information

Some code examples of what the difference will be:

// Setup
const isUndefined = undefined;
const isFalse = false;
const isZero = 0;
const isNull = null;
let className;
let styles = {
  header: "header"
};

String literals

<div className={`${styles.header} ${className}`}/> translates to <div class="class undefined" />

Classnames lib

<div className={classNames(styles.header, className)}/> translates to <div class="class" />

---

[].join(" ")

        <div
          className={[
            "class",
            isFalse && "isFalse",
            isZero && "isZero",
            isNull && "isNull",
            isUndefined && "isUndefined"
          ].join(" ")}
        />

Translates to <div class="class false 0 " />

Classnames lib

        <div
          className={classNames(
            "class",
            isFalse && "isFalse",
            isZero && "isZero",
            isNull && "isNull",
            isUndefined && "isUndefined"
          )}
        />

Translates to <div class="class" />