Update dependencies

docs/cypress/e2e/components/breadcrumb.spec.js

@@ -0,0 +1,98 @@
+describe("Components/Breadcrumb", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/breadcrumb/");
+  });
+
+  it("has a Breadcrumb", () => {
+    cy.get(".breadcrumb").should("exist");
+  });
+
+  it("has a correct Breadcrumb", () => {
+    cy.get("#breadcrumb").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+    });
+
+    cy.get("#breadcrumb li:nth-child(2) a").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("link"));
+      expect(cs.padding).to.equal("0px 12px");
+    });
+
+    cy.get("#breadcrumb li.is-active a").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.padding).to.equal("0px 12px");
+    });
+  });
+
+  it("has correct Breadcrumb alignments", () => {
+    cy.get("#breadcrumb-centered ul").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("center");
+    });
+
+    cy.get("#breadcrumb-right ul").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("flex-end");
+    });
+  });
+
+  it("has correct Breadcrumb sizes", () => {
+    cy.get("#breadcrumb-small").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal(`${Cypress.env("sizes").small}px`);
+    });
+
+    cy.get("#breadcrumb-normal").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal(`${Cypress.env("sizes").normal}px`);
+    });
+
+    cy.get("#breadcrumb-medium").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal(`${Cypress.env("sizes").medium}px`);
+    });
+
+    cy.get("#breadcrumb-large").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal(`${Cypress.env("sizes").large}px`);
+    });
+  });
+
+  it("has correct Breadcrumb separators", () => {
+    cy.get("#breadcrumb li:nth-child(2)").then(($) => {
+      const content = window
+        .getComputedStyle($[0], "before")
+        .getPropertyValue("content");
+      expect(content).to.equal('"/"');
+    });
+
+    cy.get("#breadcrumb-arrow li:nth-child(2)").then(($) => {
+      const content = window
+        .getComputedStyle($[0], "before")
+        .getPropertyValue("content");
+      expect(content).to.equal('"→"');
+    });
+
+    cy.get("#breadcrumb-bullet li:nth-child(2)").then(($) => {
+      const content = window
+        .getComputedStyle($[0], "before")
+        .getPropertyValue("content");
+      expect(content).to.equal('"•"');
+    });
+
+    cy.get("#breadcrumb-dot li:nth-child(2)").then(($) => {
+      const content = window
+        .getComputedStyle($[0], "before")
+        .getPropertyValue("content");
+      expect(content).to.equal('"·"');
+    });
+
+    cy.get("#breadcrumb-succeeds li:nth-child(2)").then(($) => {
+      const content = window
+        .getComputedStyle($[0], "before")
+        .getPropertyValue("content");
+      expect(content).to.equal('"≻"');
+    });
+  });
+});

docs/cypress/e2e/components/card.spec.js

@@ -0,0 +1,76 @@
+describe("Components/Card", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/card/");
+  });
+
+  it("has a Card", () => {
+    cy.get(".card").should("exist");
+  });
+
+  it("has a correct Card", () => {
+    cy.get("#card").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+      expect(cs.color).to.equal(Cypress.env("text"));
+      expect(cs.boxShadow).to.equal(
+        "rgba(10, 10, 10, 0.1) 0px 8px 16px -2px, rgba(10, 10, 10, 0.02) 0px 0px 0px 1px"
+      );
+    });
+  });
+
+  it("has correct Card Item border-radius", () => {
+    cy.get("#card-only-content > .card-content:first-child").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderTopLeftRadius).to.equal("4px");
+      expect(cs.borderTopRightRadius).to.equal("4px");
+    });
+
+    cy.get("#card-only-content > .card-content:last-child").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderBottomLeftRadius).to.equal("4px");
+      expect(cs.borderBottomRightRadius).to.equal("4px");
+    });
+  });
+
+  it("has correct Card Header", () => {
+    cy.get("#card-header-content > .card-header").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+      expect(cs.boxShadow).to.equal("rgba(10, 10, 10, 0.1) 0px 2px 4px 0px");
+    });
+
+    cy.get("#card-header-content .card-header-title").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.fontWeight).to.equal("700");
+      expect(cs.padding).to.equal("12px 16px");
+    });
+
+    cy.get("#card-header-content .card-header-icon").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("12px 16px");
+    });
+  });
+
+  it("has correct Card Content", () => {
+    cy.get("#card .card-content").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("24px");
+    });
+  });
+
+  it("has correct Card Footer", () => {
+    cy.get("#card .card-footer").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+      expect(cs.borderTopColor).to.equal(Cypress.env("grey-lightest"));
+      expect(cs.borderTopStyle).to.equal("solid");
+      expect(cs.borderTopWidth).to.equal("1px");
+    });
+
+    cy.get("#card .card-footer-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("12px");
+    });
+  });
+});

docs/cypress/e2e/components/dropdown.spec.js

@@ -0,0 +1,64 @@
+describe("Components/Dropdown", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/dropdown/");
+  });
+
+  it("has a Dropdown", () => {
+    cy.get(".dropdown").should("exist");
+  });
+
+  it("has a correct Dropdown Content", () => {
+    cy.get("#dropdown .dropdown-content").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+      expect(cs.borderRadius).to.equal("4px");
+      expect(cs.boxShadow).to.equal(
+        "rgba(10, 10, 10, 0.1) 0px 8px 16px -2px, rgba(10, 10, 10, 0.02) 0px 0px 0px 1px"
+      );
+      expect(cs.paddingBottom).to.equal("8px");
+      expect(cs.paddingTop).to.equal("8px");
+    });
+  });
+
+  it("has a correct Dropdown Menu", () => {
+    cy.get("#dropdown .dropdown-menu").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("none");
+      expect(cs.paddingTop).to.equal("4px");
+      expect(cs.position).to.equal("absolute");
+      expect(cs.zIndex).to.equal("20");
+    });
+
+    cy.get("#dropdown-active .dropdown-menu").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("block");
+    });
+  });
+
+  it("has a correct Dropdown Item", () => {
+    cy.get("#dropdown .dropdown-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text"));
+      expect(cs.display).to.equal("block");
+    });
+
+    cy.get("#dropdown a.dropdown-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal("100%");
+    });
+
+    cy.get("#dropdown a.dropdown-item.is-active").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("link"));
+      expect(cs.color).to.equal(Cypress.env("link-invert"));
+    });
+  });
+
+  it("has a correct Dropdown Divider", () => {
+    cy.get("#dropdown .dropdown-divider").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("grey-lightest"));
+      expect(cs.height).to.equal("1px");
+    });
+  });
+});

docs/cypress/e2e/components/level.spec.js

@@ -0,0 +1,50 @@
+describe("Layout/Level", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/layout/level/");
+  });
+
+  it("has a Level", () => {
+    cy.get(".level").should("exist");
+  });
+
+  it("has a correct Level", () => {
+    cy.get("#level").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.display).to.equal("flex");
+    });
+  });
+
+  it("has a correct Level Item", () => {
+    cy.get("#level .level-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.display).to.equal("flex");
+      expect(cs.flexGrow).to.equal("0");
+      expect(cs.flexShrink).to.equal("0");
+    });
+
+    cy.get("#level-centered .level-item .title").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginBottom).to.equal("0px");
+    });
+  });
+
+  it("has correct Level Left and Right", () => {
+    cy.get("#level .level-left").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.flexGrow).to.equal("0");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.justifyContent).to.equal("flex-start");
+    });
+
+    cy.get("#level .level-right").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.flexGrow).to.equal("0");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.justifyContent).to.equal("flex-end");
+    });
+  });
+});

docs/cypress/e2e/components/media.spec.js

@@ -0,0 +1,52 @@
+describe("Components/Media", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/layout/media/");
+  });
+
+  it("has a Media", () => {
+    cy.get(".media").should("exist");
+  });
+
+  it("has a correct Media", () => {
+    cy.get("#media").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("flex-start");
+      expect(cs.display).to.equal("flex");
+    });
+  });
+
+  it("has a correct nested Media", () => {
+    cy.get("#media-nested .media-content .media + .media").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderTopColor).to.equal("rgba(219, 219, 219, 0.5)");
+      expect(cs.borderTopStyle).to.equal("solid");
+      expect(cs.borderTopWidth).to.equal("1px");
+      expect(cs.marginTop).to.equal("8px");
+      expect(cs.paddingTop).to.equal("8px");
+    });
+  });
+
+  it("has a correct Media Content", () => {
+    cy.get("#media .media-content").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexGrow).to.equal("1");
+      expect(cs.flexShrink).to.equal("1");
+    });
+  });
+
+  it("has correct Media Left and Right", () => {
+    cy.get("#media .media-left").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexGrow).to.equal("0");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.marginRight).to.equal("16px");
+    });
+
+    cy.get("#media .media-right").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexGrow).to.equal("0");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.marginLeft).to.equal("16px");
+    });
+  });
+});

docs/cypress/e2e/components/menu.spec.js

@@ -0,0 +1,68 @@
+describe("Components/Menu", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/menu/");
+  });
+
+  it("has a Menu", () => {
+    cy.get(".menu").should("exist");
+  });
+
+  it("has a correct Menu", () => {
+    cy.get("#menu").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal("16px");
+    });
+  });
+
+  it("has a correct Menu List", () => {
+    cy.get("#menu .menu-list").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.lineHeight).to.equal("20px");
+    });
+
+    cy.get("#menu .menu-list a").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderRadius).to.equal("2px");
+      expect(cs.color).to.equal(Cypress.env("text"));
+      expect(cs.display).to.equal("block");
+      expect(cs.padding).to.equal("8px 12px");
+    });
+
+    cy.get("#menu .menu-list a.is-active").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("link"));
+      expect(cs.color).to.equal(Cypress.env("link-invert"));
+    });
+  });
+
+  it("has a correct nested Menu List", () => {
+    cy.get("#menu .menu-list ul").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderLeftColor).to.equal(Cypress.env("border"));
+      expect(cs.borderLeftStyle).to.equal("solid");
+      expect(cs.borderLeftWidth).to.equal("1px");
+      expect(cs.margin).to.equal("12px");
+      expect(cs.paddingLeft).to.equal("12px");
+    });
+  });
+
+  it("has a correct Menu Label", () => {
+    cy.get("#menu .menu-label").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text-light"));
+      expect(cs.fontSize).to.equal("12px");
+      expect(cs.letterSpacing).to.equal("1.2px");
+      expect(cs.textTransform).to.equal("uppercase");
+    });
+
+    cy.get("#menu .menu-label:not(:first-child)").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginTop).to.equal("12px");
+    });
+
+    cy.get("#menu .menu-label:not(:last-child)").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginBottom).to.equal("12px");
+    });
+  });
+});

docs/cypress/e2e/components/message.spec.js

@@ -0,0 +1,74 @@
+describe("Components/Message", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/message/");
+  });
+
+  it("has a Message", () => {
+    cy.get(".message").should("exist");
+  });
+
+  it("has a correct Message", () => {
+    cy.get("#message").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+      expect(cs.borderRadius).to.equal("4px");
+      expect(cs.fontSize).to.equal("16px");
+    });
+  });
+
+  it(`has a correct Message Header`, () => {
+    cy.get("#message .message-header").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("text"));
+      expect(cs.color).to.equal(Cypress.env("text-invert"));
+      expect(cs.display).to.equal("flex");
+      expect(cs.fontWeight).to.equal("700");
+      expect(cs.padding).to.equal("12px 16px");
+    });
+  });
+
+  it(`has a correct Message Body`, () => {
+    cy.get("#message-no-header .message-body").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderColor).to.equal(Cypress.env("border"));
+      expect(cs.borderRadius).to.equal("4px");
+      expect(cs.borderWidth).to.equal("0px 0px 0px 4px");
+      expect(cs.color).to.equal(Cypress.env("text"));
+      expect(cs.padding).to.equal("20px 24px");
+    });
+
+    cy.get("#message .message-body").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderTopLeftRadius).to.equal("0px");
+      expect(cs.borderTopRightRadius).to.equal("0px");
+      expect(cs.borderWidth).to.equal("0px");
+    });
+  });
+
+  it(`has correct color Messages`, () => {
+    for (let i = 0; i < Cypress.env("color-names").length; i++) {
+      const name = Cypress.env("color-names")[i];
+      const baseColor = Cypress.env(name);
+      const invertColor = Cypress.env(`${name}-invert`);
+      const lightColor = Cypress.env(`${name}-light`);
+      const darkColor = Cypress.env(`${name}-dark`);
+
+      cy.get(`#message-${name}`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.backgroundColor).to.equal(lightColor);
+      });
+
+      cy.get(`#message-${name} .message-header`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.backgroundColor).to.equal(baseColor);
+        expect(cs.color).to.equal(invertColor);
+      });
+
+      cy.get(`#message-${name} .message-body`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.borderColor).to.equal(baseColor);
+        expect(cs.color).to.equal(darkColor);
+      });
+    }
+  });
+});

docs/cypress/e2e/components/modal.spec.js

@@ -0,0 +1,95 @@
+describe("Components/Modal", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/modal/");
+  });
+
+  it("has a Modal", () => {
+    cy.get(".modal").should("exist");
+  });
+
+  it("has a correct Modal", () => {
+    cy.get("#modal").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("none");
+      expect(cs.flexDirection).to.equal("column");
+      expect(cs.overflow).to.equal("hidden");
+      expect(cs.position).to.equal("fixed");
+      expect(cs.zIndex).to.equal("40");
+    });
+
+    cy.get("#modal-active").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+    });
+  });
+
+  it("has a correct Modal Background", () => {
+    cy.get("#modal .modal-background").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal("rgba(10, 10, 10, 0.86)");
+      expect(cs.position).to.equal("absolute");
+    });
+  });
+
+  it("has a correct Modal Content", () => {
+    cy.get("#modal .modal-content").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.margin).to.equal("0px auto");
+      expect(cs.width).to.equal("640px");
+    });
+  });
+
+  it("has a correct Modal Card", () => {
+    cy.get("#modal-card .modal-card").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+    });
+
+    cy.get("#modal-card .modal-card-head, #modal-card .modal-card-foot").then(
+      ($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+        expect(cs.display).to.equal("flex");
+        expect(cs.flexShrink).to.equal("0");
+        expect(cs.padding).to.equal("20px");
+        expect(cs.position).to.equal("relative");
+      }
+    );
+
+    cy.get("#modal-card .modal-card-head").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
+      expect(cs.borderBottomStyle).to.equal("solid");
+      expect(cs.borderBottomWidth).to.equal("1px");
+      expect(cs.borderTopLeftRadius).to.equal("6px");
+      expect(cs.borderTopRightRadius).to.equal("6px");
+    });
+
+    cy.get("#modal-card .modal-card-foot").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderTopColor).to.equal(Cypress.env("border"));
+      expect(cs.borderTopStyle).to.equal("solid");
+      expect(cs.borderTopWidth).to.equal("1px");
+      expect(cs.borderBottomLeftRadius).to.equal("6px");
+      expect(cs.borderBottomRightRadius).to.equal("6px");
+    });
+
+    cy.get("#modal-card .modal-card-title").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.flexGrow).to.equal("1");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.fontSize).to.equal("24px");
+      expect(cs.lineHeight).to.equal("24px");
+    });
+
+    cy.get("#modal-card .modal-card-body").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+      expect(cs.flexGrow).to.equal("1");
+      expect(cs.flexShrink).to.equal("1");
+      expect(cs.overflow).to.equal("auto");
+      expect(cs.padding).to.equal("20px");
+    });
+  });
+});

docs/cypress/e2e/components/navbar.spec.js

@@ -0,0 +1,257 @@
+import { setMobile, setDesktop } from "../utils";
+
+describe("Components/Navbar", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
+  });
+
+  it("has a Navbar", () => {
+    cy.get(".navbar").should("exist");
+  });
+
+  it("has a correct Navbar", () => {
+    cy.get("#navbar").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+      expect(cs.minHeight).to.equal("52px");
+      expect(cs.position).to.equal("relative");
+      expect(cs.zIndex).to.equal("30");
+    });
+  });
+
+  it(`has correct color Navbars`, () => {
+    for (let i = 0; i < Cypress.env("color-names").length; i++) {
+      const name = Cypress.env("color-names")[i];
+      const baseColor = Cypress.env(name);
+      const invertColor = Cypress.env(`${name}-invert`);
+      const lightColor = Cypress.env(`${name}-light`);
+      const darkColor = Cypress.env(`${name}-dark`);
+
+      cy.get(`#navbar-${name}`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.backgroundColor).to.equal(baseColor);
+        expect(cs.color).to.equal(invertColor);
+      });
+
+      cy.get(`#navbar-${name} .navbar-burger`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.color).to.equal(invertColor);
+      });
+    }
+  });
+
+  it("has a correct Navbar Shadow", () => {
+    cy.get("#navbar-has-shadow").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.boxShadow).to.equal(
+        `${Cypress.env("white-ter")} 0px 2px 0px 0px`
+      );
+    });
+  });
+
+  it("has correct fixed Navbar", () => {
+    cy.get("#navbar-is-fixed-top").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.position).to.equal("fixed");
+      expect(cs.top).to.equal("0px");
+      expect(cs.zIndex).to.equal("30");
+    });
+
+    cy.get("#navbar-is-fixed-bottom").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.bottom).to.equal("0px");
+      expect(cs.position).to.equal("fixed");
+      expect(cs.zIndex).to.equal("30");
+    });
+  });
+
+  it("has a correct Navbar Item", () => {
+    cy.get("#navbar .navbar-start .navbar-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text"));
+      expect(cs.flexGrow).to.equal("0");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.lineHeight).to.equal("24px");
+      expect(cs.padding).to.equal("8px 12px");
+    });
+
+    cy.get("#navbar .navbar-start .navbar-item.has-dropdown").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("0px");
+    });
+  });
+
+  it("has a correct Navbar Link", () => {
+    cy.get("#navbar .navbar-link").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.paddingRight).to.equal("40px");
+    });
+  });
+
+  it("has a correct Navbar Drodpown", () => {
+    cy.get("#navbar .navbar-dropdown").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal("14px");
+      expect(cs.paddingBottom).to.equal("8px");
+      expect(cs.paddingTop).to.equal("8px");
+    });
+
+    cy.get("#navbar .navbar-dropdown .navbar-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.paddingLeft).to.equal("24px");
+      expect(cs.paddingRight).to.equal("24px");
+    });
+  });
+
+  it("has a correct Navbar Divider", () => {
+    cy.get("#navbar .navbar-divider").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+      expect(cs.height).to.equal("2px");
+      expect(cs.margin).to.equal("8px 0px");
+    });
+  });
+
+  it("has a correct Navbar Brand", () => {
+    cy.get("#navbar .navbar-brand").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("stretch");
+      expect(cs.display).to.equal("flex");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.minHeight).to.equal("52px");
+    });
+  });
+});
+
+// Mobile
+describe("Components/Navbar Mobile", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
+    setMobile();
+  });
+
+  it("has a Navbar", () => {
+    cy.get(".navbar").should("exist");
+  });
+
+  it("has a correct Navbar Container", () => {
+    cy.get("#navbar-container > .container").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("block");
+    });
+  });
+
+  it("has a correct Navbar Item", () => {
+    cy.get("#navbar .navbar-start .navbar-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("block");
+    });
+  });
+
+  it("has a correct active Navbar Item", () => {
+    cy.get("#navbar .navbar-start .navbar-item.is-active").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("white-bis"));
+    });
+  });
+
+  it("has a correct Navbar Burger", () => {
+    cy.get("#navbar .navbar-burger").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.appearance).to.equal("none");
+    });
+  });
+
+  it("has a correct Navbar Menu", () => {
+    cy.get("#navbar .navbar-menu").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("none");
+    });
+  });
+
+  it("has a correct Navbar Divider", () => {
+    cy.get("#navbar .navbar-divider").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("none");
+    });
+  });
+});
+
+// Desktop
+describe("Components/Navbar Desktop", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
+    setDesktop();
+  });
+
+  it("has a Navbar", () => {
+    cy.get(".navbar").should("exist");
+  });
+
+  it("has a correct Navbar Container", () => {
+    cy.get("#navbar-container > .container").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+    });
+  });
+
+  it("has a correct Navbar Item", () => {
+    cy.get("#navbar .navbar-start .navbar-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+    });
+  });
+
+  it("has a correct active Navbar Item", () => {
+    cy.get("#navbar .navbar-start .navbar-item.is-active").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+    });
+  });
+
+  it("has a correct Navbar Burger", () => {
+    cy.get("#navbar .navbar-burger").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.appearance).to.equal("none");
+      expect(cs.display).to.equal("none");
+      expect(cs.margin).to.equal("0px 0px 0px auto");
+    });
+  });
+
+  it("has a correct Navbar Menu", () => {
+    cy.get("#navbar .navbar-menu").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+    });
+  });
+
+  it("has a correct Navbar Divider", () => {
+    cy.get("#navbar .navbar-divider").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("block");
+    });
+  });
+
+  it(`has correct color Navbars`, () => {
+    for (let i = 0; i < Cypress.env("color-names").length; i++) {
+      const name = Cypress.env("color-names")[i];
+      const baseColor = Cypress.env(name);
+      const invertColor = Cypress.env(`${name}-invert`);
+      const lightColor = Cypress.env(`${name}-light`);
+      const darkColor = Cypress.env(`${name}-dark`);
+
+      cy.get(`#navbar-${name} .navbar-link`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.color).to.equal(invertColor);
+      });
+
+      cy.get(`#navbar-${name} .navbar-dropdown a.navbar-item.is-active`).then(
+        ($) => {
+          const cs = window.getComputedStyle($[0]);
+          expect(cs.backgroundColor).to.equal(baseColor);
+          expect(cs.color).to.equal(invertColor);
+        }
+      );
+    }
+  });
+});

docs/cypress/e2e/components/pagination.spec.js

@@ -0,0 +1,185 @@
+import { setMobile, setTablet } from "../utils";
+
+describe("Components/Pagination", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
+  });
+
+  it("has a Pagination", () => {
+    cy.get(".pagination").should("exist");
+  });
+
+  it("has a correct Pagination", () => {
+    cy.get("#pagination").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.display).to.equal("flex");
+      expect(cs.textAlign).to.equal("center");
+    });
+  });
+
+  it("has a correct Pagination", () => {
+    cy.get(
+      "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal("16px");
+      expect(cs.justifyContent).to.equal("center");
+      expect(cs.paddingLeft).to.equal("12px");
+      expect(cs.paddingRight).to.equal("12px");
+      expect(cs.textAlign).to.equal("center");
+    });
+
+    cy.get(
+      "#pagination .pagination-previous:not(.is-disabled),#pagination .pagination-next:not(.is-disabled),#pagination .pagination-link:not(.is-current)"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderColor).to.equal(Cypress.env("border"));
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.minWidth).to.equal("40px");
+    });
+
+    cy.get("#pagination .pagination-previous.is-disabled").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("border"));
+      expect(cs.borderColor).to.equal(Cypress.env("border"));
+      expect(cs.boxShadow).to.equal("none");
+      expect(cs.color).to.equal(Cypress.env("text-light"));
+      expect(cs.opacity).to.equal("0.5");
+    });
+
+    cy.get("#pagination .pagination-link.is-current").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("link"));
+      expect(cs.borderColor).to.equal(Cypress.env("link"));
+      expect(cs.color).to.equal(Cypress.env("link-invert"));
+    });
+
+    cy.get(
+      "#pagination .pagination-previous:not(.is-disabled),#pagination .pagination-next:not(.is-disabled)"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.paddingLeft).to.equal("12px");
+      expect(cs.paddingRight).to.equal("12px");
+      expect(cs.whiteSpace).to.equal("nowrap");
+    });
+
+    cy.get("#pagination .pagination-ellipsis").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("grey-light"));
+      expect(cs.pointerEvents).to.equal("none");
+    });
+
+    cy.get("#pagination .pagination-list").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexWrap).to.equal("wrap");
+    });
+  });
+});
+
+// Mobile
+describe("Components/Pagination Mobile", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
+    setMobile();
+  });
+
+  it("has a correct Pagination", () => {
+    cy.get("#pagination").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexWrap).to.equal("wrap");
+      expect(cs.justifyContent).to.equal("center");
+    });
+
+    cy.get(
+      "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-list li"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexGrow).to.equal("1");
+      expect(cs.flexShrink).to.equal("1");
+    });
+
+    cy.get(
+      "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.margin).to.equal("4px");
+    });
+  });
+});
+
+// Tablet
+describe("Components/Navbar Tablet", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
+    setTablet();
+  });
+
+  it("has a correct Pagination", () => {
+    cy.get("#pagination .pagination-list").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginBottom).to.equal("0px");
+      expect(cs.marginTop).to.equal("0px");
+    });
+
+    cy.get("#pagination .pagination-list").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexGrow).to.equal("1");
+      expect(cs.flexShrink).to.equal("1");
+      expect(cs.justifyContent).to.equal("flex-start");
+      expect(cs.order).to.equal("1");
+    });
+
+    cy.get(
+      "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginBottom).to.equal("0px");
+      expect(cs.marginTop).to.equal("0px");
+    });
+
+    cy.get("#pagination .pagination-previous").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("2");
+    });
+
+    cy.get("#pagination .pagination-next").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("3");
+    });
+  });
+
+  it("has a correct Pagination alignments", () => {
+    cy.get("#pagination-centered .pagination-previous").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("1");
+    });
+
+    cy.get("#pagination-centered .pagination-list").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("center");
+      expect(cs.order).to.equal("2");
+    });
+
+    cy.get("#pagination-centered .pagination-next").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("3");
+    });
+
+    cy.get("#pagination-right .pagination-previous").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("1");
+    });
+
+    cy.get("#pagination-right .pagination-list").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("flex-end");
+      expect(cs.order).to.equal("3");
+    });
+
+    cy.get("#pagination-right .pagination-next").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("2");
+    });
+  });
+});

docs/cypress/e2e/components/panel.spec.js

@@ -0,0 +1,124 @@
+describe("Components/Panel", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/panel/");
+  });
+
+  it("has a Panel", () => {
+    cy.get(".panel").should("exist");
+  });
+
+  it("has a correct Panel", () => {
+    cy.get("#panel").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderRadius).to.equal("6px");
+      expect(cs.boxShadow).to.equal(
+        "rgba(10, 10, 10, 0.1) 0px 8px 16px -2px, rgba(10, 10, 10, 0.02) 0px 0px 0px 1px"
+      );
+      expect(cs.fontSize).to.equal("16px");
+    });
+  });
+
+  it("has a correct Panel colors", () => {
+    for (let i = 0; i < Cypress.env("color-names").length; i++) {
+      const name = Cypress.env("color-names")[i];
+      const baseColor = Cypress.env(name);
+      const invertColor = Cypress.env(`${name}-invert`);
+      const lightColor = Cypress.env(`${name}-light`);
+      const darkColor = Cypress.env(`${name}-dark`);
+
+      cy.get(`#panel-${name} .panel-heading`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.backgroundColor).to.equal(baseColor);
+        expect(cs.color).to.equal(invertColor);
+      });
+
+      cy.get(`#panel-${name} .panel-tabs a.is-active`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.borderBottomColor).to.equal(baseColor);
+      });
+
+      cy.get(`#panel-${name} .panel-block.is-active .panel-icon`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.color).to.equal(baseColor);
+      });
+    }
+  });
+
+  it("has a correct Panel Heading", () => {
+    cy.get("#panel .panel-heading").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("grey-lightest"));
+      expect(cs.borderRadius).to.equal("6px 6px 0px 0px");
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.fontSize).to.equal("20px");
+      expect(cs.fontWeight).to.equal("700");
+      expect(cs.lineHeight).to.equal("25px");
+      expect(cs.padding).to.equal("15px 20px");
+    });
+  });
+
+  it("has correct Panel Tabs", () => {
+    cy.get("#panel .panel-tabs").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("flex-end");
+      expect(cs.display).to.equal("flex");
+      expect(cs.fontSize).to.equal("14px");
+      expect(cs.justifyContent).to.equal("center");
+    });
+
+    cy.get("#panel .panel-tabs a:not(.is-active)").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
+      expect(cs.borderBottomStyle).to.equal("solid");
+      expect(cs.borderBottomWidth).to.equal("1px");
+      expect(cs.marginBottom).to.equal("-1px");
+      expect(cs.padding).to.equal("7px");
+    });
+
+    cy.get("#panel .panel-tabs a.is-active").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderBottomColor).to.equal(Cypress.env("grey-dark"));
+      expect(cs.color).to.equal(Cypress.env("grey-darker"));
+    });
+  });
+
+  it("has correct Panel Block", () => {
+    cy.get("#panel .panel-block").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.display).to.equal("flex");
+      expect(cs.justifyContent).to.equal("flex-start");
+      expect(cs.padding).to.equal("8px 12px");
+    });
+
+    cy.get("#panel .panel-block.is-wrapped").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexWrap).to.equal("wrap");
+    });
+
+    cy.get("#panel .panel-block.is-active").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderLeftColor).to.equal(Cypress.env("link"));
+      expect(cs.color).to.equal(Cypress.env("grey-darker"));
+    });
+
+    cy.get("#panel .panel-block.is-active .panel-icon").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("link"));
+    });
+
+    cy.get("#panel .panel-block:last-child").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderBottomLeftRadius).to.equal("6px");
+      expect(cs.borderBottomRightRadius).to.equal("6px");
+    });
+  });
+
+  it("has correct Panel Icon", () => {
+    cy.get("#panel .panel-block:not(.is-active) .panel-icon").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text-light"));
+    });
+  });
+});

docs/cypress/e2e/components/tabs.spec.js

@@ -0,0 +1,103 @@
+describe("Components/Tabs", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/tabs/");
+  });
+
+  it("has a Tabs", () => {
+    cy.get(".tabs").should("exist");
+  });
+
+  it("has a correct Tabs", () => {
+    cy.get("#tabs").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("stretch");
+      expect(cs.display).to.equal("flex");
+      expect(cs.fontSize).to.equal("16px");
+      expect(cs.justifyContent).to.equal("space-between");
+      expect(cs.whiteSpace).to.equal("nowrap");
+    });
+
+    cy.get("#tabs li:not(.is-active) a").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
+      expect(cs.borderBottomStyle).to.equal("solid");
+      expect(cs.borderBottomWidth).to.equal("1px");
+      expect(cs.color).to.equal(Cypress.env("text"));
+      expect(cs.display).to.equal("flex");
+      expect(cs.justifyContent).to.equal("center");
+      expect(cs.marginBottom).to.equal("-1px");
+      expect(cs.padding).to.equal("8px 16px");
+      expect(cs.verticalAlign).to.equal("top");
+    });
+
+    cy.get("#tabs li.is-active a").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderBottomColor).to.equal(Cypress.env("link"));
+      expect(cs.color).to.equal(Cypress.env("link"));
+    });
+
+    cy.get("#tabs ul").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
+      expect(cs.borderBottomStyle).to.equal("solid");
+      expect(cs.borderBottomWidth).to.equal("1px");
+      expect(cs.display).to.equal("flex");
+      expect(cs.flexGrow).to.equal("1");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.justifyContent).to.equal("flex-start");
+    });
+  });
+
+  it("has a correct Tabs alignments", () => {
+    cy.get("#tabs-centered ul").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("center");
+    });
+
+    cy.get("#tabs-right ul").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("flex-end");
+    });
+  });
+
+  it("has a correct Tabs lists alignments", () => {
+    cy.get("#tabs-lists ul.is-left").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.paddingRight).to.equal("12px");
+    });
+
+    cy.get("#tabs-lists ul.is-center").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flex).to.equal("0 0 auto");
+      expect(cs.justifyContent).to.equal("center");
+      expect(cs.paddingLeft).to.equal("12px");
+      expect(cs.paddingRight).to.equal("12px");
+    });
+
+    cy.get("#tabs-lists ul.is-right").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("flex-end");
+      expect(cs.paddingLeft).to.equal("12px");
+    });
+  });
+
+  it("has a correct boxed Tabs", () => {
+    cy.get("#tabs-boxed li:not(.is-active) a").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderColor).to.equal(Cypress.env("transparent"));
+      expect(cs.borderRadius).to.equal("4px 4px 0px 0px");
+    });
+
+    cy.get("#tabs-boxed li.is-active a").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main"));
+      expect(cs.borderColor).to.equal(
+        `${Cypress.env("border")} ${Cypress.env("border")} ${Cypress.env(
+          "transparent"
+        )}`
+      );
+    });
+  });
+});