diff --git a/docs/cyp/components/card.html b/docs/cyp/components/card.html new file mode 100644 index 00000000..73f65349 --- /dev/null +++ b/docs/cyp/components/card.html @@ -0,0 +1,75 @@ +--- +layout: cypress +title: Components/Card +--- + +{% capture header %} +
+

+ Component +

+ +
+{% endcapture %} + +{% capture content %} +
+
+
+
+ Placeholder image +
+
+
+

John Smith

+

@johnsmith

+
+
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus nec iaculis mauris. @bulmaio. + #css #responsive +
+ +
+
+{% endcapture %} + +{% capture image %} +
+
+ Placeholder image +
+
+{% endcapture %} + +{% capture footer %} + +{% endcapture %} + +
+
+ {{ image }} + {{ content }} + {{ footer }} +
+ +
+ {{ content }} + {{ content }} +
+ +
+ {{ header }} + {{ content }} +
+
diff --git a/docs/cyp/components/dropdown.html b/docs/cyp/components/dropdown.html new file mode 100644 index 00000000..d9380c3b --- /dev/null +++ b/docs/cyp/components/dropdown.html @@ -0,0 +1,51 @@ +--- +layout: cypress +title: Components/Dropdown +--- + +{% capture dropdownTrigger %} +
+ +
+{% endcapture %} + +{% capture dropdownMenu %} +
+
+ + Dropdown item + + + Other dropdown item + + + Active dropdown item + +
+

You can insert any type of content within the dropdown menu.

+
+ + Other dropdown item + +
+ + With a divider + +
+
+{% endcapture %} + + + + diff --git a/docs/cyp/layout/level.html b/docs/cyp/layout/level.html new file mode 100644 index 00000000..2d44a6a8 --- /dev/null +++ b/docs/cyp/layout/level.html @@ -0,0 +1,63 @@ +--- +layout: cypress +title: Components/Level +--- + + + + diff --git a/docs/cypress/integration/components/card.spec.js b/docs/cypress/integration/components/card.spec.js new file mode 100644 index 00000000..30fba429 --- /dev/null +++ b/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"); + }); + }); +}); diff --git a/docs/cypress/integration/components/dropdown.spec.js b/docs/cypress/integration/components/dropdown.spec.js new file mode 100644 index 00000000..f9963ea9 --- /dev/null +++ b/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"); + }); + }); +}); diff --git a/docs/cypress/integration/layout/level.spec.js b/docs/cypress/integration/layout/level.spec.js new file mode 100644 index 00000000..f7d3c72b --- /dev/null +++ b/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"); + }); + }); +});