Add more specs

docs/cyp/components/card.html

@@ -0,0 +1,75 @@
+---
+layout: cypress
+title: Components/Card
+---
+
+{% capture header %}
+  <header class="card-header">
+    <p class="card-header-title">
+      Component
+    </p>
+    <button class="card-header-icon" aria-label="more options">
+      <span class="icon">
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
+      </span>
+    </button>
+  </header>
+{% endcapture %}
+
+{% capture content %}
+  <div class="card-content">
+    <div class="media">
+      <div class="media-left">
+        <figure class="image is-48x48">
+          <img src="{{site.url}}/images/placeholders/96x96.png" alt="Placeholder image">
+        </figure>
+      </div>
+      <div class="media-content">
+        <p class="title is-4">John Smith</p>
+        <p class="subtitle is-6">@johnsmith</p>
+      </div>
+    </div>
+
+    <div class="content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
+      <a href="#">#css</a> <a href="#">#responsive</a>
+      <br>
+      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
+    </div>
+  </div>
+{% endcapture %}
+
+{% capture image %}
+  <div class="card-image">
+    <figure class="image is-4by3">
+      <img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
+    </figure>
+  </div>
+{% endcapture %}
+
+{% capture footer %}
+<footer class="card-footer">
+  <a href="#" class="card-footer-item">Save</a>
+  <a href="#" class="card-footer-item">Edit</a>
+  <a href="#" class="card-footer-item">Delete</a>
+</footer>
+{% endcapture %}
+
+<div style="width: 480px; margin: 2rem auto;">
+  <div id="card" class="card">
+    {{ image }}
+    {{ content }}
+    {{ footer }}
+  </div>
+
+  <div id="card-only-content" class="card">
+    {{ content }}
+    {{ content }}
+  </div>
+
+  <div id="card-header-content" class="card">
+    {{ header }}
+    {{ content }}
+  </div>
+</div>

docs/cyp/components/dropdown.html

@@ -0,0 +1,51 @@
+---
+layout: cypress
+title: Components/Dropdown
+---
+
+{% capture dropdownTrigger %}
+<div class="dropdown-trigger">
+  <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+    <span>Dropdown button</span>
+    <span class="icon is-small">
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
+    </span>
+  </button>
+</div>
+{% endcapture %}
+
+{% capture dropdownMenu %}
+<div class="dropdown-menu">
+  <div class="dropdown-content">
+    <a href="#" class="dropdown-item">
+      Dropdown item
+    </a>
+    <a class="dropdown-item">
+      Other dropdown item
+    </a>
+    <a href="#" class="dropdown-item is-active">
+      Active dropdown item
+    </a>
+    <div class="dropdown-item">
+      <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
+    </div>
+    <a href="#" class="dropdown-item">
+      Other dropdown item
+    </a>
+    <hr class="dropdown-divider">
+    <a href="#" class="dropdown-item">
+      With a divider
+    </a>
+  </div>
+</div>
+{% endcapture %}
+
+<div id="dropdown" class="dropdown">
+  {{ dropdownTrigger }}
+  {{ dropdownMenu }}
+</div>
+
+<div id="dropdown-active" class="dropdown is-active">
+  {{ dropdownTrigger }}
+  {{ dropdownMenu }}
+</div>

docs/cyp/layout/level.html

@@ -0,0 +1,63 @@
+---
+layout: cypress
+title: Components/Level
+---
+
+<nav id="level" class="level">
+  <div class="level-left">
+    <div class="level-item">
+      <p class="subtitle is-5">
+        <strong>123</strong> posts
+      </p>
+    </div>
+
+    <div class="level-item">
+      <div class="field has-addons">
+        <p class="control">
+          <input class="input" type="text" placeholder="Find a post">
+        </p>
+
+        <p class="control">
+          <button class="button">
+            Search
+          </button>
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="level-right">
+    <p class="level-item"><strong>All</strong></p>
+    <p class="level-item"><a>Published</a></p>
+    <p class="level-item"><a>Drafts</a></p>
+    <p class="level-item"><a>Deleted</a></p>
+    <p class="level-item"><a class="button is-success">New</a></p>
+  </div>
+</nav>
+
+<nav id="level-centered" class="level">
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="heading">Tweets</p>
+      <p class="title">3,456</p>
+    </div>
+  </div>
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="heading">Following</p>
+      <p class="title">123</p>
+    </div>
+  </div>
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="heading">Followers</p>
+      <p class="title">456K</p>
+    </div>
+  </div>
+  <div class="level-item has-text-centered">
+    <div>
+      <p class="heading">Likes</p>
+      <p class="title">789</p>
+    </div>
+  </div>
+</nav>

docs/cypress/integration/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/integration/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/integration/layout/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");
+    });
+  });
+});