library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'setup-cypress' of github.com:jgthms/bulma into setup-cypress

Browse Source
This commit is contained in:
Jeremy Thomas 2022-05-07 13:04:14 +01:00
commit 2335f60deb
16 changed files with 2869 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/bulma.scss vendored
View File

@ -1,30 +1,2 @@
@charset "utf-8";
@import "../bulma";
.yolo {
content: "default";
}
@include tablet {
.yolo {
content: "tablet";
}
}
@include desktop {
.yolo {
content: "desktop";
}
}
@include widescreen {
.yolo {
content: "widescreen";
}
}
@include fullhd {
.yolo {
content: "fullhd";
}
}

2
docs/css/bulma-docs.css
View File

@ -6068,7 +6068,7 @@ fieldset[disabled] .select select:hover {
}
.select.is-disabled::after {
border-color: #7a7a7a;
border-color: #7a7a7a !important;
}
.select.is-fullwidth {

2
docs/css/bulma-docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

30
docs/css/bulma.css vendored
View File

@ -3728,7 +3728,7 @@ fieldset[disabled] .select select:hover {
}
.select.is-disabled::after {
border-color: #7a7a7a;
border-color: #7a7a7a !important;
}
.select.is-fullwidth {
@ -11788,31 +11788,3 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
background-color: #fafafa;
padding: 3rem 1.5rem 6rem;
}
.yolo {
content: "default";
}
@media screen and (min-width: 769px), print {
.yolo {
content: "tablet";
}
}
@media screen and (min-width: 1024px) {
.yolo {
content: "desktop";
}
}
@media screen and (min-width: 1216px) {
.yolo {
content: "widescreen";
}
}
@media screen and (min-width: 1408px) {
.yolo {
content: "fullhd";
}
}

71
docs/cyp/form/file.html Normal file
View File

@ -0,0 +1,71 @@
---
layout: cypress
title: Form/File
---
{% capture content %}
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
{% endcapture %}
{% capture content_with_name %}
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
Screen Shot 2017-07-29 at 15.54.25.png
</span>
</label>
{% endcapture %}
<div id="file" class="file">
{{ content }}
</div>
{% for color in site.data.colors.justColors %}
<div id="file-{{ color }}" class="file is-{{ color }}">
{{ content }}
</div>
{% endfor %}
{% for size in site.data.sizes %}
<div id="file-{{ size }}" class="file is-{{ size }}">
{{ content }}
</div>
{% endfor %}
<div id="file-with-name" class="file has-name">
{{ content_with_name }}
</div>
<div id="file-boxed" class="file is-boxed">
{{ content_with_name }}
</div>
<div id="file-centered" class="file is-centered">
{{ content_with_name }}
</div>
<div id="file-right" class="file is-right">
{{ content_with_name }}
</div>
<div id="file-fullwidth" class="file is-fullwidth">
{{ content_with_name }}
</div>

26
docs/cyp/form/input-textarea.html Normal file
View File

@ -0,0 +1,26 @@
---
layout: cypress
title: Form/Input Textarea
---
<input id="input" class="input" type="text" placeholder="Text input">
{% for color in site.data.colors.justColors %}
<input id="input-{{ color }}" class="input is-{{ color }}" type="text" placeholder="{{ color | capitalize }} input">
{% endfor %}
{% for size in site.data.sizes %}
<input id="input-{{ size }}" class="input is-{{ size }}" type="text" placeholder="{{ size | capitalize }} input">
{% endfor %}
<input id="input-fullwidth" class="input is-fullwidth" type="text" placeholder="Fullwidth input">
<input id="input-inline" class="input is-inline" type="text" placeholder="Inline input">
<input id="input-rounded" class="input is-rounded" type="text" placeholder="Rounded input">
<input id="input-static" class="input is-static" type="text" placeholder="Static input">
<textarea id="textarea" class="textarea" placeholder="Textarea"></textarea>
<textarea id="textarea-fixed" class="textarea has-fixed-size" placeholder="Textarea fixed"></textarea>

53
docs/cyp/form/select.html Normal file
View File

@ -0,0 +1,53 @@
---
layout: cypress
title: Form/Select
---
{% capture options %}
<option value="Argentina">Argentina</option>
<option value="Bolivia">Bolivia</option>
<option value="Brazil">Brazil</option>
<option value="Chile">Chile</option>
<option value="Colombia">Colombia</option>
<option value="Ecuador">Ecuador</option>
<option value="Guyana">Guyana</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Suriname">Suriname</option>
<option value="Uruguay">Uruguay</option>
<option value="Venezuela">Venezuela</option>
{% endcapture %}
<div id="select" class="select">
<select>
{{ options }}
</select>
</div>
{% for color in site.data.colors.justColors %}
<div id="select-{{ color }}" class="select is-{{ color }}">
<select>
{{ options }}
</select>
</div>
{% endfor %}
{% for size in site.data.sizes %}
<div id="select-{{ size }}" class="select is-{{ size }}">
<select>
{{ options }}
</select>
</div>
{% endfor %}
<div id="select-multiple" class="select is-multiple">
<select multiple>
{{ options }}
</select>
</div>
<div id="select-disabled" class="select is-disabled">
<select disabled>
{{ options }}
</select>
</div>

21
docs/cypress.json
View File

@ -59,6 +59,8 @@
"danger-dark": "rgb(204, 15, 53)",
"scheme-main": "rgb(255, 255, 255)",
"scheme-main-bis": "rgb(250, 250, 250)",
"scheme-main-ter": "rgb(245, 245, 245)",
"border": "rgb(219, 219, 219)",
"border-hover": "rgb(181, 181, 181)",
"text": "rgb(74, 74, 74)",
@ -66,6 +68,21 @@
"text-light": "rgb(122, 122, 122)",
"text-invert": "rgb(255, 255, 255)",
"control-radius": "4px",
"control-radius-small": "2px",
"control-border-width": "1px",
"control-height": "40px",
"control-line-height": "24px",
"control-padding-vertical": "7px",
"control-padding-horizontal": "11px",
"input-shadow": "rgba(10, 10, 10, 0.05) 0px 1px 2px 0px inset",
"size-small": "12px",
"size-normal": "16px",
"size-medium": "20px",
"size-large": "24px",
"viewports": {
"mobile": [320, 480],
"tablet": [769, 640],
@ -86,6 +103,8 @@
"normal": 16,
"medium": 20,
"large": 24
}
},
"just-sizes": ["small", "normal", "medium", "large"]
}
}

2
docs/cypress/integration/elements/container.spec.js
View File

@ -1,4 +1,4 @@
import { setMobile, setDesktop } from "../utils";
import { setMobile, setDesktop, setWidescreen, setFullHD } from "../utils";
describe("Elements/Container", () => {
beforeEach(() => {

156
docs/cypress/integration/form/file.spec.js Normal file
View File

@ -0,0 +1,156 @@
describe("Form/File", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/form/file/");
});
it("has a File", () => {
cy.get(".file").should("exist");
});
it("has a correct File", () => {
cy.get("#file").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
expect(cs.justifyContent).to.equal("flex-start");
expect(cs.position).to.equal("relative");
});
cy.get("#file .file-input").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.opacity).to.equal("0");
expect(cs.position).to.equal("absolute");
});
cy.get("#file .file-cta, #file .file-name").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(Cypress.env("border"));
expect(cs.borderRadius).to.equal("4px");
});
cy.get("#file .file-cta").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main-ter"));
expect(cs.color).to.equal(Cypress.env("text"));
});
cy.get("#file .file-icon").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
expect(cs.display).to.equal("flex");
expect(cs.height).to.equal("16px");
expect(cs.justifyContent).to.equal("center");
expect(cs.width).to.equal("16px");
});
});
it(`has correct color File`, () => {
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(`#file-${name} .file-cta`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
});
}
});
it("has correct File sizes", () => {
cy.get("#file-small").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes").small}px`);
});
cy.get("#file-normal").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes").normal}px`);
});
cy.get("#file-medium").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes").medium}px`);
});
cy.get("#file-large").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes").large}px`);
});
});
it("has correct File With Name", () => {
cy.get("#file-with-name .file-cta").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomRightRadius).to.equal("0px");
expect(cs.borderTopRightRadius).to.equal("0px");
});
cy.get("#file-with-name .file-name").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(Cypress.env("border"));
expect(cs.borderStyle).to.equal("solid");
expect(cs.borderWidth).to.equal("1px 1px 1px 0px");
expect(cs.borderBottomLeftRadius).to.equal("0px");
expect(cs.borderTopLeftRadius).to.equal("0px");
expect(cs.display).to.equal("block");
expect(cs.overflow).to.equal("hidden");
});
});
it("has correct File Boxed", () => {
cy.get("#file-boxed .file-label").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexDirection).to.equal("column");
});
cy.get("#file-boxed .file-cta").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexDirection).to.equal("column");
expect(cs.padding).to.equal("16px 48px");
});
cy.get("#file-boxed .file-name").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderWidth).to.equal("0px 1px 1px");
});
});
it("has correct File Centered", () => {
cy.get("#file-centered").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("center");
});
});
it("has correct File Right", () => {
cy.get("#file-right").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("flex-end");
});
cy.get("#file-right .file-cta").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomLeftRadius).to.equal("0px");
expect(cs.borderTopLeftRadius).to.equal("0px");
});
cy.get("#file-right .file-name").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomRightRadius).to.equal("0px");
expect(cs.borderTopRightRadius).to.equal("0px");
expect(cs.borderWidth).to.equal("1px 0px 1px 1px");
expect(cs.order).to.equal("-1");
});
});
it("has correct File fullwidth", () => {
cy.get("#file-fullwidth .file-name").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexGrow).to.equal("1");
expect(cs.maxWidth).to.equal("none");
});
});
});

153
docs/cypress/integration/form/input-textarea.spec.js Normal file
View File

@ -0,0 +1,153 @@
describe("Form/Input", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/form/input-textarea/");
});
it("has a Input", () => {
cy.get(".input").should("exist");
});
it("has a correct Input", () => {
cy.get("#input").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
expect(cs.borderStyle).to.equal("solid");
expect(cs.borderWidth).to.equal("1px");
expect(cs.borderRadius).to.equal(Cypress.env("control-radius"));
expect(cs.boxShadow).to.equal(Cypress.env("input-shadow"));
expect(cs.display).to.equal("inline-flex");
expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
expect(cs.height).to.equal(Cypress.env("control-height"));
expect(cs.justifyContent).to.equal("flex-start");
expect(cs.lineHeight).to.equal(Cypress.env("control-line-height"));
expect(cs.paddingBottom).to.equal(
Cypress.env("control-padding-vertical")
);
expect(cs.paddingLeft).to.equal(
Cypress.env("control-padding-horizontal")
);
expect(cs.paddingRight).to.equal(
Cypress.env("control-padding-horizontal")
);
expect(cs.paddingTop).to.equal(Cypress.env("control-padding-vertical"));
expect(cs.position).to.equal("relative");
expect(cs.verticalAlign).to.equal("top");
});
});
it(`has correct color Input`, () => {
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(`#input-${name}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(baseColor);
});
}
});
it("has correct Input sizes", () => {
for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
const size = Cypress.env("just-sizes")[i];
cy.get(`#input-${size}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[size]}px`);
});
}
});
it("has a correct fullwidth Input", () => {
let viewport;
cy.document()
.then((doc) => {
return doc.documentElement.getBoundingClientRect();
})
.then((rect) => {
viewport = rect;
});
cy.get("#input-fullwidth").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
expect(cs.width).to.equal(`${viewport.width}px`);
});
});
it("has a correct fullwidth Input", () => {
cy.get("#input-inline").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("inline");
});
});
it("has a correct rounded Input", () => {
cy.get("#input-rounded").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderRadius).to.equal("9999px");
expect(cs.paddingLeft).to.equal("17px");
expect(cs.paddingRight).to.equal("17px");
});
});
it("has a correct static Input", () => {
cy.get("#input-static").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
expect(cs.borderColor).to.equal(Cypress.env("transparent"));
expect(cs.boxShadow).to.equal("none");
expect(cs.paddingLeft).to.equal("0px");
expect(cs.paddingRight).to.equal("0px");
});
});
});
describe("Form/Textarea", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/form/input-textarea/");
});
it("has a Textarea", () => {
cy.get(".textarea").should("exist");
});
it("has a correct Textarea", () => {
cy.get("#textarea").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
expect(cs.borderStyle).to.equal("solid");
expect(cs.borderWidth).to.equal("1px");
expect(cs.borderRadius).to.equal(Cypress.env("control-radius"));
expect(cs.boxShadow).to.equal(Cypress.env("input-shadow"));
expect(cs.display).to.equal("block");
expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
expect(cs.justifyContent).to.equal("flex-start");
expect(cs.lineHeight).to.equal(Cypress.env("control-line-height"));
expect(cs.paddingBottom).to.equal(
Cypress.env("control-padding-horizontal")
);
expect(cs.paddingLeft).to.equal(
Cypress.env("control-padding-horizontal")
);
expect(cs.paddingRight).to.equal(
Cypress.env("control-padding-horizontal")
);
expect(cs.paddingTop).to.equal(Cypress.env("control-padding-horizontal"));
expect(cs.position).to.equal("relative");
expect(cs.resize).to.equal("vertical");
expect(cs.verticalAlign).to.equal("top");
});
});
it("has a correct Textarea fixed", () => {
cy.get("#textarea-fixed").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.resize).to.equal("none");
});
});
});

86
docs/cypress/integration/form/select.spec.js Normal file
View File

@ -0,0 +1,86 @@
describe("Form/select", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/form/select/");
});
it("has a Select", () => {
cy.get(".select").should("exist");
});
it("has a correct Select", () => {
cy.get("#select").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("inline-block");
expect(cs.height).to.equal(Cypress.env("control-height"));
expect(cs.maxWidth).to.equal("100%");
expect(cs.position).to.equal("relative");
expect(cs.verticalAlign).to.equal("top");
const after = window.getComputedStyle($[0], "after");
expect(after.borderColor).to.equal(Cypress.env("link"));
});
cy.get("#select select").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.cursor).to.equal("pointer");
expect(cs.display).to.equal("block");
expect(cs.fontSize).to.equal("16px");
expect(cs.height).to.equal(Cypress.env("control-height"));
expect(cs.maxWidth).to.equal("100%");
});
});
it(`has correct color Select`, () => {
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(`#select-${name}`).then(($) => {
const after = window.getComputedStyle($[0], "after");
expect(after.borderColor).to.equal(baseColor);
});
cy.get(`#select-${name} select`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(baseColor);
});
}
});
it("has correct Select sizes", () => {
for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
const size = Cypress.env("just-sizes")[i];
cy.get(`#select-${size}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[size]}px`);
});
}
});
it("has a correct Select multiple", () => {
cy.get("#select-multiple").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.not.equal(Cypress.env("control-height"));
});
cy.get("#select-multiple select").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.cursor).to.equal("pointer");
expect(cs.display).to.equal("block");
expect(cs.fontSize).to.equal("16px");
expect(cs.height).to.not.equal(Cypress.env("control-height"));
expect(cs.maxWidth).to.equal("100%");
});
});
it("has a correct Select disabled", () => {
cy.get("#select-disabled").then(($) => {
const after = window.getComputedStyle($[0], "after");
expect(after.borderColor).to.equal(Cypress.env("text-light"));
});
});
});

2298
docs/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
docs/package.json
View File

@ -10,6 +10,7 @@
"babel-preset-env": "^1.7.0",
"babel-preset-es2015-ie": "^6.7.0",
"clean-css-cli": "^5.6.0",
"cypress": "^9.6.0",
"metalsmith": "^2.4.2",
"metalsmith-filter": "^1.0.2",
"node-sass": "^7.0.1",

6
package.json
View File

@ -27,8 +27,14 @@
"url": "https://github.com/jgthms/bulma/issues"
},
"devDependencies": {
<<<<<<< HEAD
"autoprefixer": "^10.4.7",
"clean-css-cli": "^5.6.0",
=======
"autoprefixer": "^10.4.5",
"clean-css-cli": "^5.6.0",
"cypress": "^9.6.0",
>>>>>>> 3c413174e41e0aa0c9bf60a9a5e35dc47831d25e
"node-sass": "^7.0.1",
"postcss-cli": "^9.1.0",
"rimraf": "^3.0.2"

2
sass/form/select.sass
View File

@ -66,7 +66,7 @@ $select-colors: $form-colors !default
// Modifiers
&.is-disabled
&::after
border-color: $input-disabled-color
border-color: $input-disabled-color !important
&.is-fullwidth
width: 100%
select