Setup Cypress tests for box and button

This commit is contained in:
Jeremy Thomas
2021-10-30 21:13:53 +01:00
parent a6cd4f302e
commit 69a991ade1
18 changed files with 13312 additions and 17 deletions

View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% if page.fulltitle %}{{ page.fulltitle | markdownify | strip_html }}{% else %}{% if page.title %}{{ page.title | markdownify | strip_html }} | {% endif %}{{ site.data.meta.title | markdownify | strip_html }}{% endif %}</title>
<link rel="stylesheet" href="{{ site.url }}/vendor/fontawesome-free-5.15.2-web/css/all.min.css">
<link rel="stylesheet" href="{{ site.url }}/css/bulma.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
</head>
<body style="padding: 1.5rem;">
{{ content }}
</body>
</html>

View File

@@ -9,13 +9,25 @@
>
{% include global/deprecated.html %}
{{ content }}
{% include global/footer.html %}
{% include
global/footer.html %}
{% include global/scripts.html %}
<div id="surveyModal" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="modal-card-body py-6 px-0 is-flex is-justify-content-center" style="border-radius: 0.5rem;">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfnJaOck3NuWcuUT5eSk39_qEDa56DhWEU5BRsQ8u9tMfvPWg/viewform?embedded=true" width="600" height="600" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<div
class="modal-card-body py-6 px-0 is-flex is-justify-content-center"
style="border-radius: 0.5rem"
>
<iframe
src="https://docs.google.com/forms/d/e/1FAIpQLSfnJaOck3NuWcuUT5eSk39_qEDa56DhWEU5BRsQ8u9tMfvPWg/viewform?embedded=true"
width="600"
height="600"
frameborder="0"
marginheight="0"
marginwidth="0"
>Loading…</iframe
>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>

View File

@@ -32,6 +32,8 @@
.bd-categories {
--height: 1.25;
overflow-y: auto;
max-height: 100vh;
padding: var(--docs-side-padding);
position: sticky;
top: 0;

2
docs/bulma.scss vendored Normal file
View File

@@ -0,0 +1,2 @@
@charset "utf-8";
@import "../bulma";

11790
docs/css/bulma.css vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,8 @@
---
layout: cypress
title: Elements/Box
---
<div class="box">
I'm in a box.
</div>

View File

@@ -0,0 +1,66 @@
---
layout: cypress
title: Elements/Button
---
<div class="block">
<button id="button-default" class="button">
Button
</button>
<button id="button-hover" class="button is-hovered">
Hover
</button>
<button id="button-focus" class="button is-focused">
Focus
</button>
<button id="button-active" class="button is-active">
Active
</button>
</div>
{% for color in site.data.colors.justColors %}
<div class="block">
<button id="button-{{ color }}" class="button is-{{ color }}">
{{ color | capitalize }}
</button>
<button id="button-{{ color }}-hover" class="button is-hovered is-{{ color }}">
Hover
</button>
<button id="button-{{ color }}-focus" class="button is-focused is-{{ color }}">
Focus
</button>
<button id="button-{{ color }}-active" class="button is-active is-{{ color }}">
Active
</button>
</div>
<div class="block">
<button id="button-{{ color }}-outlined" class="button is-outlined is-{{ color }}">
Outlined
</button>
<button id="button-{{ color }}-outlined-hover" class="button is-outlined is-hovered is-{{ color }}">
Hover
</button>
<button id="button-{{ color }}-inverted" class="button is-inverted is-{{ color }}">
Inverted
</button>
<button id="button-{{ color }}-inverted-outlined" class="button is-inverted is-outlined is-{{ color }}">
Inverted Outlined
</button>
</div>
<div class="block">
<button id="button-{{ color }}-light" class="button is-light is-{{ color }}">
Light
</button>
</div>
{% endfor %}

View File

@@ -16,6 +16,8 @@
"postcss-cli": "^7.1.0"
},
"scripts": {
"bulma-sass": "node-sass --output-style expanded bulma.scss css/bulma.css",
"bulma-watch": "npm run bulma-sass -- --watch",
"css-build": "npm run css-sass && npm run css-autoprefix && npm run css-cleancss",
"css-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-docs.css css/bulma-docs.css",
"css-cleancss": "cleancss -o css/bulma-docs.min.css css/bulma-docs.css",