Add other elements specs

4 files changed, 334 insertions, 66 deletions

diff --git a/docs/cyp/elements/other.html b/docs/cyp/elements/other.html
new file mode 100644
index 00000000..9450d79f
--- /dev/null
+++ b/docs/cyp/elements/other.html
@@ -0,0 +1,13 @@
+---
+layout: cypress
+title: Elements/Other
+---
+
+<div id="block" class="block"></div>
+
+<span id="delete" class="delete"></span>
+<span id="delete-small" class="delete is-small"></span>
+<span id="delete-medium" class="delete is-medium"></span>
+<span id="delete-large" class="delete is-large"></span>
+
+<span id="loader" class="loader"></span>
diff --git a/docs/cyp/form/tools.html b/docs/cyp/form/tools.html
index 75157152..50f36355 100644
--- a/docs/cyp/form/tools.html
+++ b/docs/cyp/form/tools.html
@@ -107,4 +107,44 @@ title: Form/Tools
   </div>
 {% endfor %}
 
+<div id="control" class="control">
+  <input class="input" type="text" placeholder="Find a repository">
+</div>
+
+<div id="control-has-icons-left" class="control has-icons-left">
+  <input class="input" type="email" placeholder="Text input">
+
+  <span class="icon is-left">
+    <i class="fas fa-envelope fa-sm"></i>
+  </span>
+</div>
+
+<div id="control-has-icons-right" class="control has-icons-right">
+  <input class="input" type="email" placeholder="Text input">
+
+  <span class="icon is-right">
+    <i class="fas fa-check fa-lg"></i>
+  </span>
+</div>
+
+<div id="control-has-icons-left-and-right" class="control has-icons-left has-icons-right">
+  <input class="input" type="email" placeholder="Text input">
+
+  <span class="icon is-medium is-left">
+    <i class="fas fa-envelope fa-lg"></i>
+  </span>
+
+  <span class="icon is-medium is-right">
+    <i class="fas fa-check fa-lg"></i>
+  </span>
+</div>
+
+<div id="control-loading" class="control is-loading"></div>
+
+<div id="control-loading-small" class="control is-loading is-small"></div>
+
+<div id="control-loading-medium" class="control is-loading is-medium"></div>
+
+<div id="control-loading-large" class="control is-loading is-large"></div>
+
 <p>Last element</p>
diff --git a/docs/cypress/integration/elements/other.spec.js b/docs/cypress/integration/elements/other.spec.js
new file mode 100644
index 00000000..6aef89e1
--- /dev/null
+++ b/docs/cypress/integration/elements/other.spec.js
@@ -0,0 +1,126 @@
+describe("Elements/Other", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/elements/other/");
+  });
+
+  it("has a Block element", () => {
+    cy.get(".block").should("exist");
+  });
+
+  it("has a correct Block", () => {
+    cy.get("#block").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginBottom).to.equal("24px");
+    });
+  });
+
+  it("has a Delete element", () => {
+    cy.get(".delete").should("exist");
+  });
+
+  it("has a correct Delete", () => {
+    cy.get("#delete").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal("rgba(10, 10, 10, 0.2)");
+      expect(cs.borderColor).to.equal(Cypress.env("grey-dark"));
+      expect(cs.borderStyle).to.equal("none");
+      expect(cs.borderRadius).to.equal("9999px");
+      expect(cs.borderWidth).to.equal("0px");
+      expect(cs.cursor).to.equal("pointer");
+      expect(cs.display).to.equal("inline-block");
+      expect(cs.flexGrow).to.equal("0");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.fontSize).to.equal("0px");
+      expect(cs.height).to.equal("20px");
+      expect(cs.maxHeight).to.equal("20px");
+      expect(cs.maxWidth).to.equal("20px");
+      expect(cs.minHeight).to.equal("20px");
+      expect(cs.minWidth).to.equal("20px");
+      expect(cs.outlineColor).to.equal(Cypress.env("grey-dark"));
+      expect(cs.outlineStyle).to.equal("none");
+      expect(cs.outlineWidth).to.equal("0px");
+      expect(cs.pointerEvents).to.equal("auto");
+      expect(cs.position).to.equal("relative");
+      expect(cs.verticalAlign).to.equal("top");
+      expect(cs.width).to.equal("20px");
+
+      const before = window.getComputedStyle($[0], "before");
+      expect(before.backgroundColor).to.equal(Cypress.env("scheme-main"));
+      expect(before.content).to.equal('""');
+      expect(before.display).to.equal("block");
+      expect(before.height).to.equal("2px");
+      expect(before.left).to.equal("10px");
+      expect(before.position).to.equal("absolute");
+      expect(before.top).to.equal("10px");
+      expect(before.width).to.equal("10px");
+
+      const after = window.getComputedStyle($[0], "after");
+      expect(after.backgroundColor).to.equal(Cypress.env("scheme-main"));
+      expect(after.content).to.equal('""');
+      expect(after.display).to.equal("block");
+      expect(after.height).to.equal("10px");
+      expect(after.left).to.equal("10px");
+      expect(after.position).to.equal("absolute");
+      expect(after.top).to.equal("10px");
+      expect(after.width).to.equal("2px");
+    });
+  });
+
+  it("has a correct small Delete", () => {
+    cy.get("#delete-small").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.height).to.equal("16px");
+      expect(cs.maxHeight).to.equal("16px");
+      expect(cs.maxWidth).to.equal("16px");
+      expect(cs.minHeight).to.equal("16px");
+      expect(cs.minWidth).to.equal("16px");
+      expect(cs.width).to.equal("16px");
+    });
+  });
+
+  it("has a correct medium Delete", () => {
+    cy.get("#delete-medium").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.height).to.equal("24px");
+      expect(cs.maxHeight).to.equal("24px");
+      expect(cs.maxWidth).to.equal("24px");
+      expect(cs.minHeight).to.equal("24px");
+      expect(cs.minWidth).to.equal("24px");
+      expect(cs.width).to.equal("24px");
+    });
+  });
+
+  it("has a correct large Delete", () => {
+    cy.get("#delete-large").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.height).to.equal("32px");
+      expect(cs.maxHeight).to.equal("32px");
+      expect(cs.maxWidth).to.equal("32px");
+      expect(cs.minHeight).to.equal("32px");
+      expect(cs.minWidth).to.equal("32px");
+      expect(cs.width).to.equal("32px");
+    });
+  });
+
+  it("has a correct Loader", () => {
+    cy.get("#loader").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.animationDuration).to.equal("0.5s");
+      expect(cs.animationIterationCount).to.equal("infinite");
+      expect(cs.animationName).to.equal("spinAround");
+      expect(cs.animationTimingFunction).to.equal("linear");
+      expect(cs.borderBottomColor).to.equal(Cypress.env("grey-lighter"));
+      expect(cs.borderLeftColor).to.equal(Cypress.env("grey-lighter"));
+      expect(cs.borderRightColor).to.equal(Cypress.env("transparent"));
+      expect(cs.borderTopColor).to.equal(Cypress.env("transparent"));
+      expect(cs.borderRadius).to.equal("9999px");
+      expect(cs.borderStyle).to.equal("solid");
+      expect(cs.borderWidth).to.equal("2px");
+      expect(cs.content).to.equal('""');
+      expect(cs.display).to.equal("block");
+      expect(cs.height).to.equal("16px");
+      expect(cs.position).to.equal("relative");
+      expect(cs.width).to.equal("16px");
+    });
+  });
+});
diff --git a/docs/cypress/integration/form/tools.spec.js b/docs/cypress/integration/form/tools.spec.js
index 49f8eda0..0a6c7449 100644
--- a/docs/cypress/integration/form/tools.spec.js
+++ b/docs/cypress/integration/form/tools.spec.js
@@ -1,71 +1,71 @@
 import { setDesktop } from "../utils";
 
-// describe("Form/Label", () => {
-//   beforeEach(() => {
-//     cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
-//   });
-
-//   it("has a Label", () => {
-//     cy.get(".label").should("exist");
-//   });
-
-//   it("has a correct Label", () => {
-//     cy.get("#label").then(($) => {
-//       const cs = window.getComputedStyle($[0]);
-//       expect(cs.color).to.equal(Cypress.env("text-strong"));
-//       expect(cs.display).to.equal("block");
-//       expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
-//       expect(cs.fontWeight).to.equal(Cypress.env("weight-bold"));
-//     });
-//   });
-
-
-//   it("has correct Label sizes", () => {
-//     for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
-//       const size = Cypress.env("just-sizes")[i];
-
-//       cy.get(`#label-${size}`).then(($) => {
-//         const cs = window.getComputedStyle($[0]);
-//         expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[size]}px`);
-//       });
-//     }
-//   });
-// });
-
-// describe("Form/Help", () => {
-//   beforeEach(() => {
-//     cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
-//   });
-
-//   it("has a Help", () => {
-//     cy.get(".help").should("exist");
-//   });
-
-//   it("has a correct Help", () => {
-//     cy.get("#help").then(($) => {
-//       const cs = window.getComputedStyle($[0]);
-//       expect(cs.display).to.equal("block");
-//       expect(cs.fontSize).to.equal(Cypress.env("size-small"));
-//       expect(cs.marginTop).to.equal("4px");
-//     });
-//   });
-
-
-//   it("has correct Help 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(`#help-${name}`).then(($) => {
-//       const cs = window.getComputedStyle($[0]);
-//         expect(cs.color).to.equal(baseColor);
-//       });
-//     }
-//   });
-// });
+describe("Form/Label", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+  });
+
+  it("has a Label", () => {
+    cy.get(".label").should("exist");
+  });
+
+  it("has a correct Label", () => {
+    cy.get("#label").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.display).to.equal("block");
+      expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
+      expect(cs.fontWeight).to.equal(Cypress.env("weight-bold"));
+    });
+  });
+
+
+  it("has correct Label sizes", () => {
+    for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
+      const size = Cypress.env("just-sizes")[i];
+
+      cy.get(`#label-${size}`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[size]}px`);
+      });
+    }
+  });
+});
+
+describe("Form/Help", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+  });
+
+  it("has a Help", () => {
+    cy.get(".help").should("exist");
+  });
+
+  it("has a correct Help", () => {
+    cy.get("#help").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("block");
+      expect(cs.fontSize).to.equal(Cypress.env("size-small"));
+      expect(cs.marginTop).to.equal("4px");
+    });
+  });
+
+
+  it("has correct Help 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(`#help-${name}`).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+        expect(cs.color).to.equal(baseColor);
+      });
+    }
+  });
+});
 
 describe("Form/Field", () => {
   beforeEach(() => {
@@ -225,3 +225,92 @@ describe("Form/Field Body", () => {
     });
   });
 });
+
+describe("Form/Control", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+    setDesktop();
+  });
+
+  it("has a Control", () => {
+    cy.get(".control").should("exist");
+  });
+
+  it("has a correct Control", () => {
+    cy.get("#control").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.boxSizing).to.equal("border-box");
+      expect(cs.clear).to.equal("both");
+      expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
+      expect(cs.position).to.equal("relative");
+      expect(cs.textAlign).to.equal("start");
+    });
+  });
+
+  it("has a correct Control with icons left", () => {
+    cy.get("#control-has-icons-left .icon").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("grey-lighter"));
+      expect(cs.height).to.equal(Cypress.env("control-height"));
+      expect(cs.left).to.equal("0px");
+      expect(cs.pointerEvents).to.equal("none");
+      expect(cs.position).to.equal("absolute");
+      expect(cs.top).to.equal("0px");
+      expect(cs.width).to.equal(Cypress.env("control-height"));
+      expect(cs.zIndex).to.equal("4");
+    });
+  });
+
+  it("has a correct Control with icons right", () => {
+    cy.get("#control-has-icons-right .icon").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("grey-lighter"));
+      expect(cs.height).to.equal(Cypress.env("control-height"));
+      expect(cs.pointerEvents).to.equal("none");
+      expect(cs.position).to.equal("absolute");
+      expect(cs.right).to.equal("0px");
+      expect(cs.top).to.equal("0px");
+      expect(cs.width).to.equal(Cypress.env("control-height"));
+      expect(cs.zIndex).to.equal("4");
+    });
+  });
+
+  it("has a correct loading Control", () => {
+    cy.get("#control-loading").then(($) => {
+      const after = window.getComputedStyle($[0], "after");
+      expect(after.animationDuration).to.equal("0.5s");
+      expect(after.animationIterationCount).to.equal("infinite");
+      expect(after.animationName).to.equal("spinAround");
+      expect(after.animationTimingFunction).to.equal("linear");
+      expect(after.borderBottomColor).to.equal(Cypress.env("grey-lighter"));
+      expect(after.borderLeftColor).to.equal(Cypress.env("grey-lighter"));
+      expect(after.borderRightColor).to.equal(Cypress.env("transparent"));
+      expect(after.borderTopColor).to.equal(Cypress.env("transparent"));
+      expect(after.borderRadius).to.equal("9999px");
+      expect(after.borderStyle).to.equal("solid");
+      expect(after.borderWidth).to.equal("2px");
+      expect(after.content).to.equal('""');
+      expect(after.display).to.equal("block");
+      expect(after.height).to.equal("16px");
+      expect(after.position).to.equal("absolute");
+      expect(after.top).to.equal(`${0.625 * 16}px`);
+      expect(after.width).to.equal("16px");
+      expect(after.zIndex).to.equal("4");
+    });
+
+    cy.get("#control-loading-small").then(($) => {
+      const after = window.getComputedStyle($[0], "after");
+      expect(after.fontSize).to.equal(Cypress.env("size-small"));
+    });
+
+    cy.get("#control-loading-medium").then(($) => {
+      const after = window.getComputedStyle($[0], "after");
+      expect(after.fontSize).to.equal(Cypress.env("size-medium"));
+    });
+
+    cy.get("#control-loading-large").then(($) => {
+      const after = window.getComputedStyle($[0], "after");
+      expect(after.fontSize).to.equal(Cypress.env("size-large"));
+    });
+  });
+});