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

Setup cypress (#3436)

Browse Source 
* Setup Cypress tests for box and button

* Add container tests

* Add Cypress workflow

* Use npm install

* Update Cypress workflow

* Add Jekyll build

* Test other action

* Test custom setup

* Use other ruby action

* Test without flag

* Move cypress to docs folder

* Record runs

* Add Content, Icon, Image specs

* Add Notification specs

* Add Progress and Table specs

* Add Tags specs

* Add Title specs

* Add breadcrumb specs

* Add more specs

* Add media specs

* Add menu specs

* Add modal specs

* Add navbar specs

* Add pagination specs

* Add panel specs

* Add tabs specs, Add form checkbox radio specs

* Add utils

* Add file specs

* Add input textarea specs

* Add select specs

* Add form tools specs

* Add other elements specs

* Add footer and hero specs

* Add Hero specs

* Add section specs

* Add grid specs

* Add column sizes specs

* Add tiles specs

* Add generic specs

* Fix generic tests

* Make font family test looser

* Remove system-ui test

* Remove important flag

* Fix disabled select color
This commit is contained in:
Jeremy Thomas 2022-05-08 13:55:16 +01:00 committed by GitHub
parent 895b77b3a9
commit 0ce084170a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
97 changed files with 20259 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.github/workflows/main.yml vendored Normal file
View File

@ -0,0 +1,24 @@
name: End-to-end tests
on: [push]
jobs:
cypress-run:
runs-on: ubuntu-20.04
steps:
- name: Checkout
uses: actions/checkout@v2
- uses: ruby/setup-ruby@v1
with:
ruby-version: 2.7
- name: Install dependencies
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
gem install jekyll bundler
- name: Cypress run
uses: cypress-io/github-action@v2
with:
working-directory: docs
install-command: npm install
build: npm run bulma-sass
start: jekyll serve --host 127.0.0.1 --port 4000
wait-on: "http://127.0.0.1:4000"

3
css/bulma-rtl.css
View File

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

2
css/bulma-rtl.css.map
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

3
css/bulma.css vendored
View File

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

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

2
css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

16
docs/_layouts/cypress.html Normal file
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>
{{ content }}
</body>
</html>

2
docs/bulma.scss vendored Normal file
View File

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

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

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

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

File diff suppressed because one or more lines are too long

11823
docs/css/bulma.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

33
docs/cyp/base/generic.html Normal file
View File

@ -0,0 +1,33 @@
---
layout: cypress
title: Base/Generic
---
<article>article</article>
<aside>aside</aside>
<figure>figure</figure>
<footer>footer</footer>
<header>header</header>
<hgroup>hgroup</hgroup>
<section>section</section>
<body>body</body>
<button>button</button>
<input>input</button>
<optgroup>optgroup</optgroup>
<select>select</select>
<textarea>textarea</textarea>
<code>code</code>
<pre>pre<code>code</code></pre>
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
<a>Link <strong>strong</strong></a>>
<hr>hr</pre>
<img>img</pre>
<small>small</small>
<span>span</span>
<strong>strong</strong>
<fieldset>fieldset</fieldset>
<table><tr><th>th</th><td>td</td></tr></table>
<fieldset>
<input type="checkbox" name="check">
<input type="radio" name="rad">
</fieldset>

61
docs/cyp/components/breadcrumb.html Normal file
View File

@ -0,0 +1,61 @@
---
layout: cypress
title: Components/Breadcrumb
---
{% capture content %}
<li><a href="#">Bulma</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Components</a></li>
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
{% endcapture %}
<nav id="breadcrumb" class="breadcrumb">
<ul>
{{ content }}
</ul>
</nav>
<nav id="breadcrumb-centered" class="breadcrumb is-centered">
<ul>
{{ content }}
</ul>
</nav>
<nav id="breadcrumb-right" class="breadcrumb is-right">
<ul>
{{ content }}
</ul>
</nav>
{% for size in site.data.sizes %}
<nav id="breadcrumb-{{ size }}" class="breadcrumb is-{{ size }}">
<ul>
{{ content }}
</ul>
</nav>
{% endfor %}
<nav id="breadcrumb-arrow" class="breadcrumb has-arrow-separator">
<ul>
{{ content }}
</ul>
</nav>
<nav id="breadcrumb-bullet" class="breadcrumb has-bullet-separator">
<ul>
{{ content }}
</ul>
</nav>
<nav id="breadcrumb-dot" class="breadcrumb has-dot-separator">
<ul>
{{ content }}
</ul>
</nav>
<nav id="breadcrumb-succeeds" class="breadcrumb has-succeeds-separator">
<ul>
{{ content }}
</ul>
</nav>

75
docs/cyp/components/card.html Normal file
View File

@ -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>

51
docs/cyp/components/dropdown.html Normal file
View File

@ -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>

44
docs/cyp/components/menu.html Normal file
View File

@ -0,0 +1,44 @@
---
layout: cypress
title: Components/Menu
---
<aside id="menu" class="menu">
<p class="menu-label">
General
</p>
<ul class="menu-list">
<li><a>Dashboard</a></li>
<li><a>Customers</a></li>
</ul>
<p class="menu-label">
Administration
</p>
<ul class="menu-list">
<li><a>Team Settings</a></li>
<li>
<a class="is-active">Manage Your Team</a>
<ul>
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
</ul>
</li>
<li><a>Invitations</a></li>
<li><a>Cloud Storage Environment Settings</a></li>
<li><a>Authentication</a></li>
</ul>
<p class="menu-label">
Transactions
</p>
<ul class="menu-list">
<li><a>Payments</a></li>
<li><a>Transfers</a></li>
<li><a>Balance</a></li>
</ul>
</aside>

46
docs/cyp/components/message.html Normal file
View File

@ -0,0 +1,46 @@
---
layout: cypress
title: Components/Message
---
{% capture messageHeader %}
<div class="message-header">
<p>Hello World</p>
<button class="delete" aria-label="delete"></button>
</div>
{% endcapture %}
{% capture messageBody %}
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
{% endcapture %}
<article id="message" class="message">
{{ messageHeader }}
{{ messageBody }}
</article>
<article id="message-no-header" class="message">
{{ messageBody }}
</article>
{% for size in site.data.sizes %}
<article id="message-{{ size }}" class="message is-{{ size }}">
{{ messageHeader }}
{{ messageBody }}
</article>
{% endfor %}
{% for color in site.data.colors.justColors %}
<article id="message-{{ color }}" class="message is-{{ color }}">
<div class="message-header">
<p>{{ color | capitalize }}</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>
{% endfor %}

48
docs/cyp/components/modal.html Normal file
View File

@ -0,0 +1,48 @@
---
layout: cypress
title: Components/Modal
---
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image is-4by3">
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
</p>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<div id="modal-card" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- Content ... -->
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
<div id="modal-active" class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image is-4by3">
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
</p>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>

168
docs/cyp/components/navbar.html Normal file
View File

@ -0,0 +1,168 @@
---
layout: cypress
title: Components/Navbar
---
{% capture content %}
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
</a>
<a class="navbar-burger">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item is-active">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
{% endcapture %}
<nav id="navbar" class="navbar">
{{ content }}
</nav>
<nav id="navbar-container" class="navbar">
<div class="container">
{{ content }}
</div>
</nav>
<nav id="navbar-has-shadow" class="navbar has-shadow">
{{ content }}
</nav>
<nav id="navbar-is-fixed-top" class="navbar is-fixed-top">
{{ content }}
</nav>
<nav id="navbar-is-fixed-bottom" class="navbar is-fixed-bottom">
{{ content }}
</nav>
{% for color in site.data.colors.justColors %}
<nav id="navbar-{{ color }}" class="navbar is-{{ color }}">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
{% if include.light %}
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
{% else %}
<img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
{% endif %}
</a>
<div class="navbar-burger" data-target="navMenuColor{{ color }}-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColor{{ color }}-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{{ site.url }}/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="{{ site.url }}/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
Modifiers
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="{{ site.data.meta.download }}">
<span class="icon">
<i class="fas fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
{% endfor %}

70
docs/cyp/components/pagination.html Normal file
View File

@ -0,0 +1,70 @@
---
layout: cypress
title: Components/Pagination
---
{% capture content %}
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">&hellip;</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
{% endcapture %}
<nav id="pagination" class="pagination">
<a class="pagination-previous is-disabled" title="This is the first page">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link" aria-label="Goto page 1">1</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 45">45</a>
</li>
<li>
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 47">47</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 86">86</a>
</li>
</ul>
</nav>
<nav id="pagination-centered" class="pagination is-centered">
{{ content }}
</nav>
<nav id="pagination-right" class="pagination is-right">
{{ content }}
</nav>
<nav id="pagination-rounded" class="pagination is-rounded">
{{ content }}
</nav>
<nav id="pagination-small" class="pagination is-small">
{{ content }}
</nav>
<nav id="pagination-medium" class="pagination is-medium">
{{ content }}
</nav>
<nav id="pagination-large" class="pagination is-large">
{{ content }}
</nav>

80
docs/cyp/components/panel.html Normal file
View File

@ -0,0 +1,80 @@
---
layout: cypress
title: Components/Panel
---
{% capture content %}
<p class="panel-heading">
Repositories
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block is-wrapped">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch" aria-hidden="true"></i>
</span>
daniellowtw/infboard
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch" aria-hidden="true"></i>
</span>
mojs
</a>
<label class="panel-block">
<input type="checkbox">
remember me
</label>
<div class="panel-block">
<button class="button is-link is-outlined is-fullwidth">
Reset all filters
</button>
</div>
{% endcapture %}
<nav id="panel" class="panel">
{{ content }}
</nav>
{% for color in site.data.colors.justColors %}
<nav id="panel-{{ color }}" class="panel is-{{ color }}">
{{ content }}
</nav>
{% endfor %}

190
docs/cyp/components/tabs.html Normal file
View File

@ -0,0 +1,190 @@
---
layout: cypress
title: Components/Tabs
---
{% capture content_text %}
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
{% endcapture %}
{% capture content_icons %}
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
{% endcapture %}
<div id="tabs-lists" class="tabs">
<ul class="is-left">
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
<ul class="is-center">
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
<ul class="is-right">
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
<div id="tabs" class="tabs">
{{ content_text }}
</div>
<div id="tabs-centered" class="tabs is-centered">
{{ content_text }}
</div>
<div id="tabs-right" class="tabs is-right">
{{ content_text }}
</div>
<div id="tabs-small" class="tabs is-small">
{{ content_text }}
</div>
<div id="tabs-medium" class="tabs is-medium">
{{ content_text }}
</div>
<div id="tabs-large" class="tabs is-large">
{{ content_text }}
</div>
<div id="tabs-boxed" class="tabs is-boxed">
{{ content_icons }}
</div>
<div id="tabs-toggle" class="tabs is-toggle">
{{ content_icons }}
</div>
<div id="tabs-toggle-rounded" class="tabs is-toggle is-toggle-rounded">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
<div id="tabs-fullwidth" class="tabs is-fullwidth">
<ul>
<li>
<a>
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
<span>Left</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
<span>Up</span>
</a>
</li>
<li>
<a>
<span>Right</span>
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
</a>
</li>
</ul>
</div>
<div id="tabs-centered-boxed" class="tabs is-centered is-boxed">
{{ content_icons }}
</div>
<div id="tabs-toggle-fullwidth" class="tabs is-toggle is-fullwidth">
{{ content_icons }}
</div>
<div id="tabs-centered-boxed-medium" class="tabs is-centered is-boxed is-medium">
{{ content_icons }}
</div>
<div id="tabs-toggle-fullwidth-large" class="tabs is-toggle is-fullwidth is-large">
<ul>
<li class="is-active">
<a>
<span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>

8
docs/cyp/elements/box.html Normal file
View File

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

66
docs/cyp/elements/button.html Normal file
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 %}

28
docs/cyp/elements/container.html Normal file
View File

@ -0,0 +1,28 @@
---
layout: cypress
title: Elements/Container
---
<div id="container" class="container">
I'm a container
</div>
<div id="container-max-desktop" class="container is-max-desktop">
I'm a max desktop container
</div>
<div id="container-max-widescreen" class="container is-max-widescreen">
I'm a max widescreen container
</div>
<div id="container-widescreen" class="container is-widescreen">
I'm a widescreen container
</div>
<div id="container-fullhd" class="container is-fullhd">
I'm a fullhd container
</div>
<div id="container-fluid" class="container is-fluid">
I'm a fluid container
</div>

96
docs/cyp/elements/content.html Normal file
View File

@ -0,0 +1,96 @@
---
layout: cypress
title: Elements/Content
---
<div class="content">
<h1>Hello World</h1>
<p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
<h2>Second level</h2>
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
<h3>Third level</h3>
<p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
<ol>
<li>Donec blandit a lorem id convallis.</li>
<li>Cras gravida arcu at diam gravida gravida.</li>
<li>Integer in volutpat libero.</li>
<li>Donec a diam tellus.</li>
<li>Aenean nec tortor orci.</li>
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
<li>Vivamus maximus ultricies pulvinar.</li>
</ol>
<blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
<p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
<p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
<dl>
<dt>Web</dt>
<dd>The part of the Internet that contains websites and web pages</dd>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
<dt>CSS</dt>
<dd>A technology to make HTML look better</dd>
</dl>
<p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
<h4>Fourth level</h4>
<p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Hello World&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
<p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
<h5>Fifth level</h5>
<p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
<figure>
<img src="https://bulma.io/images/placeholders/256x256.png">
<img src="https://bulma.io/images/placeholders/256x256.png">
<figcaption>
Figure 1: Some beautiful placeholders
</figcaption>
</figure>
<h6>Sixth level</h6>
<p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
</div>

46
docs/cyp/elements/icon.html Normal file
View File

@ -0,0 +1,46 @@
---
layout: cypress
title: Elements/Icon
---
<div class="block">
<span id="icon" class="icon">
<i class="fas fa-home"></i>
</span>
</div>
<div class="block">
<span id="icon-small" class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span id="icon-normal" class="icon">
<i class="fas fa-home"></i>
</span>
<span id="icon-medium" class="icon is-medium">
<i class="fas fa-home"></i>
</span>
<span id="icon-large" class="icon is-large">
<i class="fas fa-home"></i>
</span>
</div>
<div class="block">
<span id="icon-text" class="icon-text">
<span class="icon">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</span>
</div>
<div class="block">
<div id="icon-text-div" class="icon-text">
<span class="icon">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</div>
</div>

57
docs/cyp/elements/image.html Normal file
View File

@ -0,0 +1,57 @@
---
layout: cypress
title: Elements/Image
dimensions:
- 16
- 24
- 32
- 48
- 64
- 96
- 128
ratios:
- square
- 1by1
- 5by4
- 4by3
- 3by2
- 5by3
- 16by9
- 2by1
- 3by1
- 4by5
- 3by4
- 2by3
- 3by5
- 9by16
- 1by2
- 1by3
---
<div class="block">
<figure id="image" class="image is-128x128">
<img src="{{ site.url }}/images/placeholders/128x128.png">
</figure>
</div>
<div class="block">
<figure id="image-rounded" class="image is-128x128">
<img class="is-rounded" src="{{site.url}}/images/placeholders/128x128.png">
</figure>
</div>
{% for ratio in page.ratios %}
<div class="block" style="width: 100px;">
<figure id="image-{{ ratio }}" class="image is-{{ ratio }}">
<img src="{{ site.url }}/images/placeholders/1x1.png">
</figure>
</div>
{% endfor %}
{% for dimension in page.dimensions %}
<div class="block">
<figure id="image-{{ dimension }}" class="image is-{{ dimension }}x{{ dimension }}">
<img src="{{ site.url }}/images/placeholders/1x1.png">
</figure>
</div>
{% endfor %}

24
docs/cyp/elements/notification.html Normal file
View File

@ -0,0 +1,24 @@
---
layout: cypress
title: Elements/Notification
---
<div id="notification" class="notification">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
</div>
{% for color in site.data.colors.justColors %}
<div id="notification-{{ color }}" class="notification is-{{ color }}">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
</div>
<div id="notification-{{ color }}-light" class="notification is-{{ color }} is-light">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
</div>
{% endfor %}

13
docs/cyp/elements/other.html Normal file
View File

@ -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>

15
docs/cyp/elements/progress.html Normal file
View File

@ -0,0 +1,15 @@
---
layout: cypress
title: Elements/Progress
---
<div class="block">
<progress id="progress" class="progress" value="15" max="100">15%</progress>
</div>
<div class="block">
<progress id="progress-small" class="progress is-small" value="15" max="100">15%</progress>
<progress id="progress-normal" class="progress" value="15" max="100">30%</progress>
<progress id="progress-medium" class="progress is-medium" value="15" max="100">45%</progress>
<progress id="progress-large" class="progress is-large" value="15" max="100">60%</progress>
</div>

50
docs/cyp/elements/table.html Normal file
View File

@ -0,0 +1,50 @@
---
layout: cypress
title: Elements/Table
---
{% capture table_content %}
<thead>
<tr>
{% for j in (1..10) %}
<th>{{ j }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for i in (1..5) %}
<tr>
{% for j in (1..10) %}
<td>{{ j | times: i }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr class="is-selected">
{% for j in (1..10) %}
<td>{{ j }}</td>
{% endfor %}
</tr>
</tbody>
{% endcapture %}
<table id="table" class="table">
{{ table_content }}
</table>
<table id="table-bordered" class="table is-bordered">
{{ table_content }}
</table>
<table id="table-striped" class="table is-striped">
{{ table_content }}
</table>
<table id="table-narrow" class="table is-narrow">
{{ table_content }}
</table>
<div style="width: 800px;">
<table id="table-fullwidth" class="table is-fullwidth">
{{ table_content }}
</table>
</div>

74
docs/cyp/elements/tag.html Normal file
View File

@ -0,0 +1,74 @@
---
layout: cypress
title: Elements/Tag
---
<div id="tags" class="tags">
<span id="tag" class="tag">
Tag
</span>
<span id="tag-rounded" class="tag is-rounded">
Rounded
</span>
</div>
<div class="block">
<span id="tag-normal" class="tag is-normal">
Normal
</span>
<span id="tag-medium" class="tag is-medium">
Medium
</span>
<span id="tag-large" class="tag is-large">
Large
</span>
</div>
<div id="tags-medium" class="tags are-medium">
<span class="tag">Tag</span>
<span class="tag">Tag</span>
<span class="tag">Tag</span>
</div>
<div id="tags-large" class="tags are-large">
<span class="tag">Tag</span>
<span class="tag">Tag</span>
<span class="tag">Tag</span>
</div>
<div id="tags-centered" class="tags is-centered">
<span class="tag">Tag</span>
<span class="tag">Tag</span>
<span class="tag">Tag</span>
</div>
<div id="tags-right" class="tags is-right">
<span class="tag">Tag</span>
<span class="tag">Tag</span>
<span class="tag">Tag</span>
</div>
<div id="tags-addons" class="tags has-addons">
<span class="tag">Tag</span>
<span class="tag">Tag</span>
<span class="tag">Tag</span>
</div>
<div class="block">
{% for color in site.data.colors.justColors %}
<span id="tag-{{ color }}" class="tag is-{{ color }}">
{{ color | capitalize }}
</span>
{% endfor %}
</div>
<div class="block">
{% for color in site.data.colors.justColors %}
<span id="tag-{{ color }}-light" class="tag is-{{ color }} is-light">
{{ color | capitalize }}
</span>
{% endfor %}
</div>

24
docs/cyp/elements/title.html Normal file
View File

@ -0,0 +1,24 @@
---
layout: cypress
title: Elements/Title
---
<h1 id="title" class="title">
Title <strong>strong</strong>
</h1>
{% for i in (1..7) %}
<p id="title-{{ i }}" class="title is-{{ i }}">
Title <strong>size {{ i }}</strong>
</p>
{% endfor %}
<h1 id="subtitle" class="subtitle">
Subtitle <strong>strong</strong>
</h1>
{% for i in (1..7) %}
<p id="subtitle-{{ i }}" class="subtitle is-{{ i }}">
Subtitle <strong>size {{ i }}</strong>
</p>
{% endfor %}

29
docs/cyp/form/checkbox-radio.html Normal file
View File

@ -0,0 +1,29 @@
---
layout: cypress
title: Form/Checkbox Radio
---
<label id="checkbox" class="checkbox">
<input type="checkbox">
I agree to the <a href="#">terms and conditions</a>
</label>
<label id="checkbox-disabled" class="checkbox" disabled>
<input type="checkbox" disabled>
Save my preferences
</label>
<div id="radio" class="control">
<label class="radio">
<input type="radio" name="rsvp">
Going
</label>
<label class="radio">
<input type="radio" name="rsvp">
Not going
</label>
<label class="radio" disabled>
<input type="radio" name="rsvp" disabled>
Maybe
</label>
</div>

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>

150
docs/cyp/form/tools.html Normal file
View File

@ -0,0 +1,150 @@
---
layout: cypress
title: Form/Tools
---
{% capture content %}
<div class="control">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
{% endcapture %}
<label id="label" class="label">
Form label
</label>
{% for size in site.data.sizes %}
<label id="label-{{ size }}" class="label is-{{ size }}">
{{ size | capitalize }} form label
</label>
{% endfor %}
<p id="help" class="help">This username is available</p>
{% for color in site.data.colors.justColors %}
<p id="help-{{ color }}" class="help is-{{ color }}">This username is available</p>
{% endfor %}
<div id="field" class="field">
{{ content }}
</div>
<div id="field-has-addons" class="field has-addons">
{{ content }}
</div>
<div id="field-has-addons-centered" class="field has-addons has-addons-centered">
{{ content }}
</div>
<div id="field-has-addons-right" class="field has-addons has-addons-right">
{{ content }}
</div>
<div id="field-has-addons-fullwidth" class="field has-addons has-addons-fullwidth">
{{ content }}
</div>
<div id="field-is-grouped" class="field is-grouped">
{{ content }}
</div>
<div id="field-is-grouped-centered" class="field is-grouped is-grouped-centered">
{{ content }}
</div>
<div id="field-is-grouped-right" class="field is-grouped is-grouped-right">
{{ content }}
</div>
<div id="field-is-grouped-multiline" class="field is-grouped is-grouped-multiline">
{{ content }}
</div>
<div id="field-is-horizontal" class="field is-horizontal">
{{ content }}
</div>
<div class="field is-horizontal">
<div id="field-label" class="field-label is-normal">
<label class="label">From</label>
</div>
<div id="field-body" class="field-body">
<div class="field">
<p class="control is-expanded has-icons-left">
<input class="input" type="text" placeholder="Name">
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</p>
</div>
<div class="field">
<p class="control is-expanded has-icons-left has-icons-right">
<input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</p>
<div class="field"></div>
</div>
</div>
</div>
{% for size in site.data.sizes %}
<div id="field-label-{{ size }}" class="field-label is-{{ size }}">
{{ size | capitalize }} field label
</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>

179
docs/cyp/grid/columns.html Normal file
View File

@ -0,0 +1,179 @@
---
layout: cypress
title: Grid/Columns
screens:
- mobile
- tablet
- desktop
- widescreen
- fullhd
widths:
- three-quarters
- two-thirds
- half
- one-third
- one-quarter
- one-fifth
- two-fifths
- three-fifths
- four-fifths
---
{% capture columns %}
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
{% endcapture %}
{% capture twelve_columns %}
{% for i in (1..12) %}
<div class="column">
Column {{ i }}
</div>
{% endfor %}
{% endcapture %}
{% capture special_columns %}
<div class="column is-narrow">
Column narrow
</div>
<div class="column is-full">
Column full
</div>
{% for width in page.widths %}
<div class="column is-{{ width }}">
Column {{ width }}
</div>
<div class="column is-offset-{{ width }}">
Column {{ width }}
</div>
{% endfor %}
{% for i in (1..12) %}
<div class="column is-{{ i }}">
Column {{ i }}
</div>
{% endfor %}
{% endcapture %}
<div id="columns" class="columns">
{{ columns }}
</div>
<div>
<div id="columns-last" class="columns">
{{ columns }}
</div>
</div>
<!-- Styles -->
<div id="columns-centered" class="columns is-centered">
{{ columns }}
</div>
<div id="columns-gapless" class="columns is-gapless">
{{ columns }}
</div>
<div>
<div id="columns-gapless-last" class="columns is-gapless">
{{ columns }}
</div>
</div>
<div id="columns-multiline" class="columns is-multiline">
{{ columns }}
</div>
<div id="columns-vcentered" class="columns is-vcentered">
{{ columns }}
</div>
<!-- Responsiveness -->
<div id="columns-mobile" class="columns is-mobile">
{{ twelve_columns }}
</div>
<div id="columns-tablet" class="columns is-tablet">
{{ twelve_columns }}
</div>
<div id="columns-desktop" class="columns is-desktop">
{{ twelve_columns }}
</div>
<div id="columns-special" class="columns is-multiline">
<div class="column is-narrow">
Column narrow
</div>
<div class="column is-full">
Column full
</div>
{% for width in page.widths %}
<div class="column is-{{ width }}">
Column {{ width }}
</div>
<div class="column is-offset-{{ width }}">
Column {{ width }}
</div>
{% endfor %}
{% for i in (1..12) %}
<div class="column is-{{ i }}">
Column {{ i }}
</div>
<div class="column is-offset-{{ i }}">
Column {{ i }}
</div>
{% endfor %}
</div>
{% for screen in page.screens %}
<div id="columns-special-{{ screen }}" class="columns is-multiline is-{{ screen }}">
<div class="column is-narrow-{{ screen }}">
Column narrow
</div>
<div class="column is-full-{{ screen }}">
Column full
</div>
{% for width in page.widths %}
<div class="column is-{{ width }}-{{ screen }}">
Column {{ width }}
</div>
<div class="column is-offset-{{ width }}-{{ screen }}">
Column {{ width }}
</div>
{% endfor %}
{% for i in (1..12) %}
<div class="column is-{{ i }}-{{ screen }}">
Column {{ i }}
</div>
<div class="column is-offset-{{ i }}-{{ screen }}">
Column {{ i }}
</div>
{% endfor %}
</div>
{% endfor %}

73
docs/cyp/grid/tiles.html Normal file
View File

@ -0,0 +1,73 @@
---
layout: cypress
title: Grid/Tiles
---
{% capture content %}
<div id="tile-vertical" class="tile is-vertical is-8">
<div id="tile" class="tile">
<div id="tile-parent" class="tile is-parent is-vertical">
<article id="tile-vertical-child" class="tile is-child notification is-warning">
<p class="title">Vertical...</p>
<p class="subtitle">Top tile</p>
</article>
<article class="tile is-child notification is-warning">
<p class="title">...tiles</p>
<p class="subtitle">Bottom tile</p>
</article>
</div>
<div class="tile is-parent">
<article id="tile-child" class="tile is-child notification is-info">
<p class="title">Middle tile</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-danger">
<p class="title">Wide tile</p>
<p class="subtitle">Aligned with the right tile</p>
<div class="content">
<!-- Content -->
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification is-success">
<div class="content">
<p class="title">Tall tile</p>
<p class="subtitle">With even more content</p>
<div class="content">
<!-- Content -->
</div>
</div>
</article>
</div>
{% endcapture %}
<div id="tile-ancestor" class="tile is-ancestor">
{{ content }}
</div>
<div>
<div id="tile-ancestor-last" class="tile is-ancestor">
{{ content }}
</div>
</div>
<div class="tile is-ancestor" style="width: 1000px;">
{% for i in (1..12) %}
<div id="tile-{{ i }}" class="tile is-{{ i }}">
Tile {{ i }}
</div>
{% endfor %}
</div>

14
docs/cyp/layout/footer.html Normal file
View File

@ -0,0 +1,14 @@
---
layout: cypress
title: Layout/Footer
---
<footer id="footer" class="footer">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
</div>
</footer>

56
docs/cyp/layout/hero.html Normal file
View File

@ -0,0 +1,56 @@
---
layout: cypress
title: Layout/Hero
---
{% capture content %}
<div class="hero-body">
<p class="title">
Hero title
</p>
<p class="subtitle">
Hero subtitle
</p>
</div>
{% endcapture %}
<section id="hero" class="hero">
{{ content }}
</section>
{% for color in site.data.colors.justColors %}
<section id="hero-{{ color }}" class="hero is-{{ color }}">
{{ content }}
</section>
{% endfor %}
<section id="hero-small" class="hero is-small">
{{ content }}
</section>
<section id="hero-medium" class="hero is-medium">
{{ content }}
</section>
<section id="hero-large" class="hero is-large">
{{ content }}
</section>
<section id="hero-halfheight" class="hero is-halfheight">
{{ content }}
</section>
<section id="hero-fullheight" class="hero is-fullheight">
{{ content }}
</section>
<section id="hero-with-container" class="hero is-halfheight">
<div class="container">
{{ content }}
</div>
</section>
<div id="hero-buttons" class="hero-buttons"></div>
<div id="hero-head" class="hero-head"></div>
<div id="hero-foot" class="hero-foot"></div>
<div id="hero-body" class="hero-body"></div>

63
docs/cyp/layout/level.html Normal file
View File

@ -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>

108
docs/cyp/layout/media.html Normal file
View File

@ -0,0 +1,108 @@
---
layout: cypress
title: Components/Media
---
<article id="media" class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="{{site.url}}/images/placeholders/128x128.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fas fa-reply"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-heart"></i></span>
</a>
</div>
</nav>
</div>
<div class="media-right">
<button class="delete"></button>
</div>
</article>
<article id="media-nested" class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="{{site.url}}/images/placeholders/128x128.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>Barbara Middleton</strong>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
<br>
<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
</p>
</div>
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img src="{{site.url}}/images/placeholders/96x96.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>Sean Brown</strong>
<br>
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
<br>
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
</p>
</div>
<article class="media">
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
</article>
<article class="media">
Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
</article>
</div>
</article>
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img src="{{site.url}}/images/placeholders/96x96.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>Kayli Eunice </strong>
<br>
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
<br>
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
</p>
</div>
</div>
</article>
</div>
</article>

8
docs/cyp/layout/section.html Normal file
View File

@ -0,0 +1,8 @@
---
layout: cypress
title: Layout/Section
---
<section id="section" class="section"></section>
<section id="section-medium" class="section is-medium"></section>
<section id="section-large" class="section is-large"></section>

120
docs/cypress.json Normal file
View File

@ -0,0 +1,120 @@
{
"projectId": "tnstsp",
"env": {
"black": "rgb(10, 10, 10)",
"black-bis": "rgb(18, 18, 18)",
"black-ter": "rgb(36, 36, 36)",
"grey-darker": "rgb(54, 54, 54)",
"grey-dark": "rgb(74, 74, 74)",
"grey": "rgb(122, 122, 122)",
"grey-light": "rgb(181, 181, 181)",
"grey-lighter": "rgb(219, 219, 219)",
"grey-lightest": "rgb(237, 237, 237)",
"white-ter": "rgb(245, 245, 245)",
"white-bis": "rgb(250, 250, 250)",
"white": "rgb(255, 255, 255)",
"transparent": "rgba(0, 0, 0, 0)",
"black-transparent": "rgba(0, 0, 0, 0.7)",
"orange": "rgb(255, 71, 15)",
"yellow": "rgb(255, 224, 138)",
"green": "rgb(72, 199, 142)",
"turquoise": "rgb(0, 209, 178)",
"cyan": "rgb(62, 142, 208)",
"blue": "rgb(72, 95, 199)",
"purple": "rgb(184, 107, 255)",
"red": "rgb(241, 70, 104)",
"color-names": ["primary", "link", "info", "success", "warning", "danger"],
"primary": "rgb(0, 209, 178)",
"primary-invert": "rgb(255, 255, 255)",
"primary-light": "rgb(235, 255, 252)",
"primary-dark": "rgb(0, 148, 126)",
"link": "rgb(72, 95, 199)",
"link-invert": "rgb(255, 255, 255)",
"link-light": "rgb(239, 241, 250)",
"link-dark": "rgb(56, 80, 183)",
"info": "rgb(62, 142, 208)",
"info-invert": "rgb(255, 255, 255)",
"info-light": "rgb(239, 245, 251)",
"info-dark": "rgb(41, 111, 168)",
"success": "rgb(72, 199, 142)",
"success-invert": "rgb(255, 255, 255)",
"success-light": "rgb(239, 250, 245)",
"success-dark": "rgb(37, 121, 83)",
"warning": "rgb(255, 224, 138)",
"warning-invert": "rgba(0, 0, 0, 0.7)",
"warning-light": "rgb(255, 250, 235)",
"warning-dark": "rgb(148, 108, 0)",
"danger": "rgb(241, 70, 104)",
"danger-invert": "rgb(255, 255, 255)",
"danger-light": "rgb(254, 236, 240)",
"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)",
"text-strong": "rgb(54, 54, 54)",
"text-light": "rgb(122, 122, 122)",
"text-invert": "rgb(255, 255, 255)",
"code": "rgb(218, 16, 57)",
"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",
"weight-light": "300",
"weight-normal": "400",
"weight-medium": "500",
"weight-semibold": "600",
"weight-bold": "700",
"family-code": "monospace",
"viewports": {
"mobile": [320, 480],
"tablet": [769, 640],
"desktop": [1024, 800],
"widescreen": [1216, 900],
"fullhd": [1408, 1200]
},
"sizes": {
"1": 48,
"2": 40,
"3": 32,
"4": 24,
"5": 20,
"6": 16,
"7": 12,
"small": 12,
"normal": 16,
"medium": 20,
"large": 24
},
"just-sizes": ["small", "normal", "medium", "large"]
}
}

2
docs/cypress/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
/screenshots
/videos

5
docs/cypress/fixtures/example.json Normal file
View File

@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

2
docs/cypress/integration/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
1-getting-started
2-advanced-examples

147
docs/cypress/integration/base/generic.spec.js Normal file
View File

@ -0,0 +1,147 @@
import { familyPrimary } from "../utils";
describe("Base/Generic", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/base/generic/");
});
it("has a correct html", () => {
cy.get("html").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main"));
expect(cs.fontSize).to.equal("16px");
expect(cs.minWidth).to.equal("300px");
expect(cs.overflowX).to.equal("hidden");
expect(cs.overflowY).to.equal("scroll");
expect(cs.textRendering).to.equal("optimizelegibility");
expect(cs.textSizeAdjust).to.equal("100%");
expect(cs.webkitFontSmoothing).to.equal("antialiased");
});
});
it("has correct HTML5 elements", () => {
cy.get("article, aside, figure, footer, header, hgroup, section").then(
($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
}
);
});
it("has correct form elements", () => {
cy.get("body, button, input, optgroup, select, textarea").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontFamily).to.contains("-apple-system");
expect(cs.fontFamily).to.contains("Helvetica");
expect(cs.fontFamily).to.contains("Arial");
expect(cs.fontFamily).to.contains("sans-serif");
});
});
it("has correct monospace elements", () => {
cy.get("pre, code").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontFamily).to.equal(Cypress.env("family-code"));
expect(cs.webkitFontSmoothing).to.equal("auto");
});
});
it("has a correct body", () => {
cy.get("body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.fontFamily).to.contains("-apple-system");
expect(cs.fontFamily).to.contains("Helvetica");
expect(cs.fontFamily).to.contains("Arial");
expect(cs.fontFamily).to.contains("sans-serif");
expect(cs.fontSize).to.equal("16px");
expect(cs.fontWeight).to.equal("400");
expect(cs.lineHeight).to.equal("24px");
});
});
it("has a correct a", () => {
cy.get("a").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("link"));
expect(cs.cursor).to.equal("pointer");
expect(cs.textDecorationLine).to.equal("none");
});
});
it("has a correct code", () => {
cy.get("code").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.color).to.equal(Cypress.env("code"));
});
});
it("has a correct hr", () => {
cy.get("hr").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.borderStyle).to.equal("none");
expect(cs.display).to.equal("block");
expect(cs.height).to.equal("2px");
expect(cs.margin).to.equal("24px 0px");
});
});
it("has a correct img", () => {
cy.get("img").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal("28px");
expect(cs.width).to.equal("112px");
});
});
it("has a correct checkbox", () => {
cy.get("input[type='checkbox']").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.verticalAlign).to.equal("baseline");
});
});
it("has a correct radio", () => {
cy.get("input[type='radio']").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.verticalAlign).to.equal("baseline");
});
});
it("has a correct small", () => {
cy.get("small").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("14px");
});
});
it("has a correct fieldset", () => {
cy.get("fieldset").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderStyle).to.equal("none");
});
});
it("has a correct pre", () => {
cy.get("pre").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.fontSize).to.equal("14px");
expect(cs.overflowX).to.equal("auto");
expect(cs.padding).to.equal("20px 24px");
expect(cs.whiteSpace).to.equal("pre");
expect(cs.wordWrap).to.equal("normal");
});
cy.get("pre code").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.fontSize).to.equal("14px");
expect(cs.padding).to.equal("0px");
});
});
});

98
docs/cypress/integration/components/breadcrumb.spec.js Normal file
View File

@ -0,0 +1,98 @@
describe("Components/Breadcrumb", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/breadcrumb/");
});
it("has a Breadcrumb", () => {
cy.get(".breadcrumb").should("exist");
});
it("has a correct Breadcrumb", () => {
cy.get("#breadcrumb").then(($) => {
const cs = window.getComputedStyle($[0]);
});
cy.get("#breadcrumb li:nth-child(2) a").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("link"));
expect(cs.padding).to.equal("0px 12px");
});
cy.get("#breadcrumb li.is-active a").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text-strong"));
expect(cs.padding).to.equal("0px 12px");
});
});
it("has correct Breadcrumb alignments", () => {
cy.get("#breadcrumb-centered ul").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("center");
});
cy.get("#breadcrumb-right ul").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("flex-end");
});
});
it("has correct Breadcrumb sizes", () => {
cy.get("#breadcrumb-small").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes").small}px`);
});
cy.get("#breadcrumb-normal").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes").normal}px`);
});
cy.get("#breadcrumb-medium").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes").medium}px`);
});
cy.get("#breadcrumb-large").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes").large}px`);
});
});
it("has correct Breadcrumb separators", () => {
cy.get("#breadcrumb li:nth-child(2)").then(($) => {
const content = window
.getComputedStyle($[0], "before")
.getPropertyValue("content");
expect(content).to.equal('"/"');
});
cy.get("#breadcrumb-arrow li:nth-child(2)").then(($) => {
const content = window
.getComputedStyle($[0], "before")
.getPropertyValue("content");
expect(content).to.equal('"→"');
});
cy.get("#breadcrumb-bullet li:nth-child(2)").then(($) => {
const content = window
.getComputedStyle($[0], "before")
.getPropertyValue("content");
expect(content).to.equal('"•"');
});
cy.get("#breadcrumb-dot li:nth-child(2)").then(($) => {
const content = window
.getComputedStyle($[0], "before")
.getPropertyValue("content");
expect(content).to.equal('"·"');
});
cy.get("#breadcrumb-succeeds li:nth-child(2)").then(($) => {
const content = window
.getComputedStyle($[0], "before")
.getPropertyValue("content");
expect(content).to.equal('"≻"');
});
});
});

76
docs/cypress/integration/components/card.spec.js Normal file
View File

@ -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");
});
});
});

64
docs/cypress/integration/components/dropdown.spec.js Normal file
View File

@ -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");
});
});
});

50
docs/cypress/integration/components/level.spec.js Normal file
View File

@ -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");
});
});
});

52
docs/cypress/integration/components/media.spec.js Normal file
View File

@ -0,0 +1,52 @@
describe("Components/Media", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/layout/media/");
});
it("has a Media", () => {
cy.get(".media").should("exist");
});
it("has a correct Media", () => {
cy.get("#media").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("flex-start");
expect(cs.display).to.equal("flex");
});
});
it("has a correct nested Media", () => {
cy.get("#media-nested .media-content .media + .media").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderTopColor).to.equal("rgba(219, 219, 219, 0.5)");
expect(cs.borderTopStyle).to.equal("solid");
expect(cs.borderTopWidth).to.equal("1px");
expect(cs.marginTop).to.equal("8px");
expect(cs.paddingTop).to.equal("8px");
});
});
it("has a correct Media Content", () => {
cy.get("#media .media-content").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("1");
});
});
it("has correct Media Left and Right", () => {
cy.get("#media .media-left").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexGrow).to.equal("0");
expect(cs.flexShrink).to.equal("0");
expect(cs.marginRight).to.equal("16px");
});
cy.get("#media .media-right").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexGrow).to.equal("0");
expect(cs.flexShrink).to.equal("0");
expect(cs.marginLeft).to.equal("16px");
});
});
});

68
docs/cypress/integration/components/menu.spec.js Normal file
View File

@ -0,0 +1,68 @@
describe("Components/Menu", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/menu/");
});
it("has a Menu", () => {
cy.get(".menu").should("exist");
});
it("has a correct Menu", () => {
cy.get("#menu").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("16px");
});
});
it("has a correct Menu List", () => {
cy.get("#menu .menu-list").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.lineHeight).to.equal("20px");
});
cy.get("#menu .menu-list a").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderRadius).to.equal("2px");
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.display).to.equal("block");
expect(cs.padding).to.equal("8px 12px");
});
cy.get("#menu .menu-list a.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 nested Menu List", () => {
cy.get("#menu .menu-list ul").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderLeftColor).to.equal(Cypress.env("border"));
expect(cs.borderLeftStyle).to.equal("solid");
expect(cs.borderLeftWidth).to.equal("1px");
expect(cs.margin).to.equal("12px");
expect(cs.paddingLeft).to.equal("12px");
});
});
it("has a correct Menu Label", () => {
cy.get("#menu .menu-label").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text-light"));
expect(cs.fontSize).to.equal("12px");
expect(cs.letterSpacing).to.equal("1.2px");
expect(cs.textTransform).to.equal("uppercase");
});
cy.get("#menu .menu-label:not(:first-child)").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginTop).to.equal("12px");
});
cy.get("#menu .menu-label:not(:last-child)").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("12px");
});
});
});

74
docs/cypress/integration/components/message.spec.js Normal file
View File

@ -0,0 +1,74 @@
describe("Components/Message", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/message/");
});
it("has a Message", () => {
cy.get(".message").should("exist");
});
it("has a correct Message", () => {
cy.get("#message").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.borderRadius).to.equal("4px");
expect(cs.fontSize).to.equal("16px");
});
});
it(`has a correct Message Header`, () => {
cy.get("#message .message-header").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("text"));
expect(cs.color).to.equal(Cypress.env("text-invert"));
expect(cs.display).to.equal("flex");
expect(cs.fontWeight).to.equal("700");
expect(cs.padding).to.equal("12px 16px");
});
});
it(`has a correct Message Body`, () => {
cy.get("#message-no-header .message-body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(Cypress.env("border"));
expect(cs.borderRadius).to.equal("4px");
expect(cs.borderWidth).to.equal("0px 0px 0px 4px");
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.padding).to.equal("20px 24px");
});
cy.get("#message .message-body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderTopLeftRadius).to.equal("0px");
expect(cs.borderTopRightRadius).to.equal("0px");
expect(cs.borderWidth).to.equal("0px");
});
});
it(`has correct color Messages`, () => {
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(`#message-${name}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(lightColor);
});
cy.get(`#message-${name} .message-header`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#message-${name} .message-body`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(baseColor);
expect(cs.color).to.equal(darkColor);
});
}
});
});

95
docs/cypress/integration/components/modal.spec.js Normal file
View File

@ -0,0 +1,95 @@
describe("Components/Modal", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/modal/");
});
it("has a Modal", () => {
cy.get(".modal").should("exist");
});
it("has a correct Modal", () => {
cy.get("#modal").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("none");
expect(cs.flexDirection).to.equal("column");
expect(cs.overflow).to.equal("hidden");
expect(cs.position).to.equal("fixed");
expect(cs.zIndex).to.equal("40");
});
cy.get("#modal-active").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
it("has a correct Modal Background", () => {
cy.get("#modal .modal-background").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal("rgba(10, 10, 10, 0.86)");
expect(cs.position).to.equal("absolute");
});
});
it("has a correct Modal Content", () => {
cy.get("#modal .modal-content").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.margin).to.equal("0px auto");
expect(cs.width).to.equal("640px");
});
});
it("has a correct Modal Card", () => {
cy.get("#modal-card .modal-card").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
cy.get("#modal-card .modal-card-head, #modal-card .modal-card-foot").then(
($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.display).to.equal("flex");
expect(cs.flexShrink).to.equal("0");
expect(cs.padding).to.equal("20px");
expect(cs.position).to.equal("relative");
}
);
cy.get("#modal-card .modal-card-head").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
expect(cs.borderBottomStyle).to.equal("solid");
expect(cs.borderBottomWidth).to.equal("1px");
expect(cs.borderTopLeftRadius).to.equal("6px");
expect(cs.borderTopRightRadius).to.equal("6px");
});
cy.get("#modal-card .modal-card-foot").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderTopColor).to.equal(Cypress.env("border"));
expect(cs.borderTopStyle).to.equal("solid");
expect(cs.borderTopWidth).to.equal("1px");
expect(cs.borderBottomLeftRadius).to.equal("6px");
expect(cs.borderBottomRightRadius).to.equal("6px");
});
cy.get("#modal-card .modal-card-title").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text-strong"));
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("0");
expect(cs.fontSize).to.equal("24px");
expect(cs.lineHeight).to.equal("24px");
});
cy.get("#modal-card .modal-card-body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white"));
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("1");
expect(cs.overflow).to.equal("auto");
expect(cs.padding).to.equal("20px");
});
});
});

257
docs/cypress/integration/components/navbar.spec.js Normal file
View File

@ -0,0 +1,257 @@
import { setMobile, setDesktop } from "../utils";
describe("Components/Navbar", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
});
it("has a Navbar", () => {
cy.get(".navbar").should("exist");
});
it("has a correct Navbar", () => {
cy.get("#navbar").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white"));
expect(cs.minHeight).to.equal("52px");
expect(cs.position).to.equal("relative");
expect(cs.zIndex).to.equal("30");
});
});
it(`has correct color Navbars`, () => {
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(`#navbar-${name}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#navbar-${name} .navbar-burger`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(invertColor);
});
}
});
it("has a correct Navbar Shadow", () => {
cy.get("#navbar-has-shadow").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.boxShadow).to.equal(
`${Cypress.env("white-ter")} 0px 2px 0px 0px`
);
});
});
it("has correct fixed Navbar", () => {
cy.get("#navbar-is-fixed-top").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.position).to.equal("fixed");
expect(cs.top).to.equal("0px");
expect(cs.zIndex).to.equal("30");
});
cy.get("#navbar-is-fixed-bottom").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.bottom).to.equal("0px");
expect(cs.position).to.equal("fixed");
expect(cs.zIndex).to.equal("30");
});
});
it("has a correct Navbar Item", () => {
cy.get("#navbar .navbar-start .navbar-item").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.flexGrow).to.equal("0");
expect(cs.flexShrink).to.equal("0");
expect(cs.lineHeight).to.equal("24px");
expect(cs.padding).to.equal("8px 12px");
});
cy.get("#navbar .navbar-start .navbar-item.has-dropdown").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("0px");
});
});
it("has a correct Navbar Link", () => {
cy.get("#navbar .navbar-link").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.paddingRight).to.equal("40px");
});
});
it("has a correct Navbar Drodpown", () => {
cy.get("#navbar .navbar-dropdown").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("14px");
expect(cs.paddingBottom).to.equal("8px");
expect(cs.paddingTop).to.equal("8px");
});
cy.get("#navbar .navbar-dropdown .navbar-item").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.paddingLeft).to.equal("24px");
expect(cs.paddingRight).to.equal("24px");
});
});
it("has a correct Navbar Divider", () => {
cy.get("#navbar .navbar-divider").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.height).to.equal("2px");
expect(cs.margin).to.equal("8px 0px");
});
});
it("has a correct Navbar Brand", () => {
cy.get("#navbar .navbar-brand").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("stretch");
expect(cs.display).to.equal("flex");
expect(cs.flexShrink).to.equal("0");
expect(cs.minHeight).to.equal("52px");
});
});
});
// Mobile
describe("Components/Navbar Mobile", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
setMobile();
});
it("has a Navbar", () => {
cy.get(".navbar").should("exist");
});
it("has a correct Navbar Container", () => {
cy.get("#navbar-container > .container").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
});
});
it("has a correct Navbar Item", () => {
cy.get("#navbar .navbar-start .navbar-item").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
});
});
it("has a correct active Navbar Item", () => {
cy.get("#navbar .navbar-start .navbar-item.is-active").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-bis"));
});
});
it("has a correct Navbar Burger", () => {
cy.get("#navbar .navbar-burger").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.appearance).to.equal("none");
});
});
it("has a correct Navbar Menu", () => {
cy.get("#navbar .navbar-menu").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("none");
});
});
it("has a correct Navbar Divider", () => {
cy.get("#navbar .navbar-divider").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("none");
});
});
});
// Desktop
describe("Components/Navbar Desktop", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
setDesktop();
});
it("has a Navbar", () => {
cy.get(".navbar").should("exist");
});
it("has a correct Navbar Container", () => {
cy.get("#navbar-container > .container").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
it("has a correct Navbar Item", () => {
cy.get("#navbar .navbar-start .navbar-item").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
it("has a correct active Navbar Item", () => {
cy.get("#navbar .navbar-start .navbar-item.is-active").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
});
});
it("has a correct Navbar Burger", () => {
cy.get("#navbar .navbar-burger").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.appearance).to.equal("none");
expect(cs.display).to.equal("none");
expect(cs.margin).to.equal("0px 0px 0px auto");
});
});
it("has a correct Navbar Menu", () => {
cy.get("#navbar .navbar-menu").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
it("has a correct Navbar Divider", () => {
cy.get("#navbar .navbar-divider").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
});
});
it(`has correct color Navbars`, () => {
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(`#navbar-${name} .navbar-link`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#navbar-${name} .navbar-dropdown a.navbar-item.is-active`).then(
($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
}
);
}
});
});

185
docs/cypress/integration/components/pagination.spec.js Normal file
View File

@ -0,0 +1,185 @@
import { setMobile, setTablet } from "../utils";
describe("Components/Pagination", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
});
it("has a Pagination", () => {
cy.get(".pagination").should("exist");
});
it("has a correct Pagination", () => {
cy.get("#pagination").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
expect(cs.display).to.equal("flex");
expect(cs.textAlign).to.equal("center");
});
});
it("has a correct Pagination", () => {
cy.get(
"#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("16px");
expect(cs.justifyContent).to.equal("center");
expect(cs.paddingLeft).to.equal("12px");
expect(cs.paddingRight).to.equal("12px");
expect(cs.textAlign).to.equal("center");
});
cy.get(
"#pagination .pagination-previous:not(.is-disabled),#pagination .pagination-next:not(.is-disabled),#pagination .pagination-link:not(.is-current)"
).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(Cypress.env("border"));
expect(cs.color).to.equal(Cypress.env("text-strong"));
expect(cs.minWidth).to.equal("40px");
});
cy.get("#pagination .pagination-previous.is-disabled").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("border"));
expect(cs.borderColor).to.equal(Cypress.env("border"));
expect(cs.boxShadow).to.equal("none");
expect(cs.color).to.equal(Cypress.env("text-light"));
expect(cs.opacity).to.equal("0.5");
});
cy.get("#pagination .pagination-link.is-current").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("link"));
expect(cs.borderColor).to.equal(Cypress.env("link"));
expect(cs.color).to.equal(Cypress.env("link-invert"));
});
cy.get(
"#pagination .pagination-previous:not(.is-disabled),#pagination .pagination-next:not(.is-disabled)"
).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.paddingLeft).to.equal("12px");
expect(cs.paddingRight).to.equal("12px");
expect(cs.whiteSpace).to.equal("nowrap");
});
cy.get("#pagination .pagination-ellipsis").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("grey-light"));
expect(cs.pointerEvents).to.equal("none");
});
cy.get("#pagination .pagination-list").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexWrap).to.equal("wrap");
});
});
});
// Mobile
describe("Components/Pagination Mobile", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
setMobile();
});
it("has a correct Pagination", () => {
cy.get("#pagination").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexWrap).to.equal("wrap");
expect(cs.justifyContent).to.equal("center");
});
cy.get(
"#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-list li"
).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("1");
});
cy.get(
"#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.margin).to.equal("4px");
});
});
});
// Tablet
describe("Components/Navbar Tablet", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
setTablet();
});
it("has a correct Pagination", () => {
cy.get("#pagination .pagination-list").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("0px");
expect(cs.marginTop).to.equal("0px");
});
cy.get("#pagination .pagination-list").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("1");
expect(cs.justifyContent).to.equal("flex-start");
expect(cs.order).to.equal("1");
});
cy.get(
"#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("0px");
expect(cs.marginTop).to.equal("0px");
});
cy.get("#pagination .pagination-previous").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.order).to.equal("2");
});
cy.get("#pagination .pagination-next").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.order).to.equal("3");
});
});
it("has a correct Pagination alignments", () => {
cy.get("#pagination-centered .pagination-previous").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.order).to.equal("1");
});
cy.get("#pagination-centered .pagination-list").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("center");
expect(cs.order).to.equal("2");
});
cy.get("#pagination-centered .pagination-next").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.order).to.equal("3");
});
cy.get("#pagination-right .pagination-previous").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.order).to.equal("1");
});
cy.get("#pagination-right .pagination-list").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("flex-end");
expect(cs.order).to.equal("3");
});
cy.get("#pagination-right .pagination-next").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.order).to.equal("2");
});
});
});

124
docs/cypress/integration/components/panel.spec.js Normal file
View File

@ -0,0 +1,124 @@
describe("Components/Panel", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/panel/");
});
it("has a Panel", () => {
cy.get(".panel").should("exist");
});
it("has a correct Panel", () => {
cy.get("#panel").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderRadius).to.equal("6px");
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.fontSize).to.equal("16px");
});
});
it("has a correct Panel 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(`#panel-${name} .panel-heading`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#panel-${name} .panel-tabs a.is-active`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomColor).to.equal(baseColor);
});
cy.get(`#panel-${name} .panel-block.is-active .panel-icon`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(baseColor);
});
}
});
it("has a correct Panel Heading", () => {
cy.get("#panel .panel-heading").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("grey-lightest"));
expect(cs.borderRadius).to.equal("6px 6px 0px 0px");
expect(cs.color).to.equal(Cypress.env("text-strong"));
expect(cs.fontSize).to.equal("20px");
expect(cs.fontWeight).to.equal("700");
expect(cs.lineHeight).to.equal("25px");
expect(cs.padding).to.equal("15px 20px");
});
});
it("has correct Panel Tabs", () => {
cy.get("#panel .panel-tabs").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("flex-end");
expect(cs.display).to.equal("flex");
expect(cs.fontSize).to.equal("14px");
expect(cs.justifyContent).to.equal("center");
});
cy.get("#panel .panel-tabs a:not(.is-active)").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
expect(cs.borderBottomStyle).to.equal("solid");
expect(cs.borderBottomWidth).to.equal("1px");
expect(cs.marginBottom).to.equal("-1px");
expect(cs.padding).to.equal("7px");
});
cy.get("#panel .panel-tabs a.is-active").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomColor).to.equal(Cypress.env("grey-dark"));
expect(cs.color).to.equal(Cypress.env("grey-darker"));
});
});
it("has correct Panel Block", () => {
cy.get("#panel .panel-block").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
expect(cs.color).to.equal(Cypress.env("text-strong"));
expect(cs.display).to.equal("flex");
expect(cs.justifyContent).to.equal("flex-start");
expect(cs.padding).to.equal("8px 12px");
});
cy.get("#panel .panel-block.is-wrapped").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexWrap).to.equal("wrap");
});
cy.get("#panel .panel-block.is-active").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderLeftColor).to.equal(Cypress.env("link"));
expect(cs.color).to.equal(Cypress.env("grey-darker"));
});
cy.get("#panel .panel-block.is-active .panel-icon").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("link"));
});
cy.get("#panel .panel-block:last-child").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomLeftRadius).to.equal("6px");
expect(cs.borderBottomRightRadius).to.equal("6px");
});
});
it("has correct Panel Icon", () => {
cy.get("#panel .panel-block:not(.is-active) .panel-icon").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text-light"));
});
});
});

103
docs/cypress/integration/components/tabs.spec.js Normal file
View File

@ -0,0 +1,103 @@
describe("Components/Tabs", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/tabs/");
});
it("has a Tabs", () => {
cy.get(".tabs").should("exist");
});
it("has a correct Tabs", () => {
cy.get("#tabs").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("stretch");
expect(cs.display).to.equal("flex");
expect(cs.fontSize).to.equal("16px");
expect(cs.justifyContent).to.equal("space-between");
expect(cs.whiteSpace).to.equal("nowrap");
});
cy.get("#tabs li:not(.is-active) a").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
expect(cs.borderBottomStyle).to.equal("solid");
expect(cs.borderBottomWidth).to.equal("1px");
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.display).to.equal("flex");
expect(cs.justifyContent).to.equal("center");
expect(cs.marginBottom).to.equal("-1px");
expect(cs.padding).to.equal("8px 16px");
expect(cs.verticalAlign).to.equal("top");
});
cy.get("#tabs li.is-active a").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomColor).to.equal(Cypress.env("link"));
expect(cs.color).to.equal(Cypress.env("link"));
});
cy.get("#tabs ul").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
expect(cs.borderBottomStyle).to.equal("solid");
expect(cs.borderBottomWidth).to.equal("1px");
expect(cs.display).to.equal("flex");
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("0");
expect(cs.justifyContent).to.equal("flex-start");
});
});
it("has a correct Tabs alignments", () => {
cy.get("#tabs-centered ul").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("center");
});
cy.get("#tabs-right ul").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("flex-end");
});
});
it("has a correct Tabs lists alignments", () => {
cy.get("#tabs-lists ul.is-left").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.paddingRight).to.equal("12px");
});
cy.get("#tabs-lists ul.is-center").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flex).to.equal("0 0 auto");
expect(cs.justifyContent).to.equal("center");
expect(cs.paddingLeft).to.equal("12px");
expect(cs.paddingRight).to.equal("12px");
});
cy.get("#tabs-lists ul.is-right").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("flex-end");
expect(cs.paddingLeft).to.equal("12px");
});
});
it("has a correct boxed Tabs", () => {
cy.get("#tabs-boxed li:not(.is-active) a").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(Cypress.env("transparent"));
expect(cs.borderRadius).to.equal("4px 4px 0px 0px");
});
cy.get("#tabs-boxed li.is-active a").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main"));
expect(cs.borderColor).to.equal(
`${Cypress.env("border")} ${Cypress.env("border")} ${Cypress.env(
"transparent"
)}`
);
});
});
});

22
docs/cypress/integration/elements/box.spec.js Normal file
View File

@ -0,0 +1,22 @@
describe("Elements/Box", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/box/");
});
it("has a Box element", () => {
cy.get(".box").should("exist");
});
it("has a correct Box", () => {
cy.get(".box").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main"));
expect(cs.borderRadius).to.equal("6px");
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.color).to.equal(Cypress.env("text"));
expect(cs.padding).to.equal("20px");
});
});
});

124
docs/cypress/integration/elements/button.spec.js Normal file
View File

@ -0,0 +1,124 @@
describe("Elements/Button", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/button/");
});
it("has a Button", () => {
cy.get(".button").should("exist");
});
it("has a correct Button", () => {
cy.get("#button-default").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white"));
expect(cs.borderColor).to.equal(Cypress.env("grey-lighter"));
expect(cs.borderRadius).to.equal("4px");
expect(cs.color).to.equal(Cypress.env("grey-darker"));
expect(cs.height).to.equal("40px");
expect(cs.lineHeight).to.equal("24px");
expect(cs.padding).to.equal("7px 16px");
});
});
// States
it("has a correct hover Button", () => {
cy.get("#button-hover").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white"));
expect(cs.borderColor).to.equal(Cypress.env("grey-light"));
expect(cs.borderRadius).to.equal("4px");
expect(cs.color).to.equal(Cypress.env("grey-darker"));
expect(cs.height).to.equal("40px");
expect(cs.lineHeight).to.equal("24px");
expect(cs.padding).to.equal("7px 16px");
});
});
it("has a correct focus Button", () => {
cy.get("#button-focus").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white"));
expect(cs.borderColor).to.equal(Cypress.env("blue"));
expect(cs.borderRadius).to.equal("4px");
expect(cs.boxShadow).to.equal(
`rgba${Cypress.env("blue").slice(3, -1)}, 0.25) 0px 0px 0px 2px`
);
expect(cs.color).to.equal(Cypress.env("grey-darker"));
expect(cs.height).to.equal("40px");
expect(cs.lineHeight).to.equal("24px");
expect(cs.padding).to.equal("7px 16px");
});
});
// Colors
it(`has correct color Buttons`, () => {
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(`#button-${name}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.borderColor).to.equal(Cypress.env("transparent"));
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-hover`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(Cypress.env("transparent"));
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-focus`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.boxShadow).to.equal(
`rgba${baseColor.slice(3, -1)}, 0.25) 0px 0px 0px 2px`
);
expect(cs.borderColor).to.equal(Cypress.env("transparent"));
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-active`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(Cypress.env("transparent"));
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-inverted`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(invertColor);
expect(cs.color).to.equal(baseColor);
});
cy.get(`#button-${name}-outlined`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
expect(cs.borderColor).to.equal(baseColor);
expect(cs.color).to.equal(baseColor);
});
cy.get(`#button-${name}-outlined-hover`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.borderColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-inverted-outlined`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
expect(cs.borderColor).to.equal(invertColor);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-light`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(lightColor);
expect(cs.color).to.equal(darkColor);
});
}
});
});

159
docs/cypress/integration/elements/container.spec.js Normal file
View File

@ -0,0 +1,159 @@
import { setMobile, setDesktop, setWidescreen, setFullHD } from "../utils";
describe("Elements/Container", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/container/");
});
it("has a Container element", () => {
cy.get("#container").should("exist");
});
it("has fullwidth mobile Containers", () => {
setMobile();
let viewport;
cy.document()
.then((doc) => {
return doc.documentElement.getBoundingClientRect();
})
.then((rect) => {
viewport = rect;
});
cy.get("#container").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal(`${viewport.width}px`);
});
cy.get("#container-fluid").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal(`${viewport.width}px`);
});
cy.get("#container-max-desktop").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal(`${viewport.width}px`);
});
cy.get("#container-max-widescreen").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal(`${viewport.width}px`);
});
});
it("has centered desktop Containers", () => {
setDesktop();
let viewport;
cy.document()
.then((doc) => {
return doc.documentElement.getBoundingClientRect();
})
.then((rect) => {
viewport = rect;
});
cy.get("#container").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal("960px");
});
cy.get("#container-widescreen").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal(`${viewport.width}px`);
});
cy.get("#container-fullhd").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal(`${viewport.width}px`);
});
});
it("has centered widescreen Containers", () => {
setWidescreen();
let viewport;
cy.document()
.then((doc) => {
return doc.documentElement.getBoundingClientRect();
})
.then((rect) => {
viewport = rect;
});
cy.get("#container").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal("1152px");
});
cy.get("#container-max-desktop").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal("960px");
});
cy.get("#container-widescreen").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal("1152px");
});
cy.get("#container-fullhd").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal(`${viewport.width}px`);
});
});
it("has centered fullhd Containers", () => {
setFullHD();
cy.get("#container").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal("1344px");
});
cy.get("#container-max-desktop").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal("960px");
});
cy.get("#container-max-widescreen").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal("1152px");
});
cy.get("#container-widescreen").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal("1344px");
});
cy.get("#container-fullhd").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal("1344px");
});
});
it("has a fullwidth fluid Container", () => {
cy.viewport(
Cypress.env("viewports").fullhd[0],
Cypress.env("viewports").fullhd[1]
);
let viewport;
cy.document()
.then((doc) => {
return doc.documentElement.getBoundingClientRect();
})
.then((rect) => {
viewport = rect;
});
cy.get("#container-fluid").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal(`${viewport.width}px`);
});
});
});

68
docs/cypress/integration/elements/content.spec.js Normal file
View File

@ -0,0 +1,68 @@
describe("Elements/Content", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/content/");
});
it("has a Content element", () => {
cy.get(".content").should("exist");
});
it("has correct headings", () => {
cy.get(".content h1").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("32px");
});
cy.get(".content h2").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("28px");
});
cy.get(".content h3").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("24px");
});
cy.get(".content h4").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("20px");
});
cy.get(".content h5").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("18px");
});
cy.get(".content h6").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("16px");
});
});
it("has a correct blockquote", () => {
cy.get(".content blockquote").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.padding).to.equal("20px 24px");
});
});
it("has correct lists", () => {
cy.get(".content ol li").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.listStyleType).to.equal("decimal");
});
cy.get(".content ul li").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.listStyleType).to.equal("disc");
});
});
it("has a correct pre", () => {
cy.get(".content pre").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("17.5px 21px");
});
});
});

60
docs/cypress/integration/elements/icon.spec.js Normal file
View File

@ -0,0 +1,60 @@
describe("Elements/Icon", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/icon/");
});
it("has a .icon element", () => {
cy.get(".icon").should("exist");
});
it("has a correct Icon element", () => {
cy.get("#icon").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal("24px");
expect(cs.width).to.equal("24px");
});
});
it("has correct Icon sizes", () => {
cy.get("#icon-small").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal("16px");
expect(cs.width).to.equal("16px");
});
cy.get("#icon-normal").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal("24px");
expect(cs.width).to.equal("24px");
});
cy.get("#icon-medium").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal("32px");
expect(cs.width).to.equal("32px");
});
cy.get("#icon-large").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal("48px");
expect(cs.width).to.equal("48px");
});
});
it("has correct Icon Text elements", () => {
cy.get("#icon-text").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("inline-flex");
});
cy.get("#icon-text > .icon").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginRight).to.equal("4px");
});
cy.get("#icon-text-div").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
});

63
docs/cypress/integration/elements/image.spec.js Normal file
View File

@ -0,0 +1,63 @@
describe("Elements/Image", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/image/");
});
it("has a Image", () => {
cy.get(".image").should("exist");
});
it("has a correct Image", () => {
cy.get("#image").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal("128px");
expect(cs.width).to.equal("128px");
});
});
it("has a correct rounded Image", () => {
cy.get("#image-rounded img").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderRadius).to.equal("9999px");
});
});
it("has a correct Image dimensions", () => {
[16, 24, 32, 48, 64, 96, 128].forEach((dimension) => {
cy.get(`#image-${dimension}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal(`${dimension}px`);
expect(cs.width).to.equal(`${dimension}px`);
});
});
});
it("has correct Image ratios", () => {
[
["1by1", 1],
["5by4", 0.8],
["4by3", 0.75],
["3by2", 0.6666],
["5by3", 0.6],
["16by9", 0.5625],
["2by1", 0.5],
["3by1", 0.3333],
["4by5", 1.25],
["3by4", 1.3333],
["2by3", 1.5],
["3by5", 1.6666],
["9by16", 1.7777],
["1by2", 2],
["1by3", 3],
].forEach((ratio) => {
cy.get(`#image-${ratio[0]} img`).then(($) => {
const cs = window.getComputedStyle($[0]);
const height = cs.height.substring(0, cs.height.length - 2);
expect(`${Math.round(height)}px`).to.equal(
`${Math.round(100 * ratio[1])}px`
);
expect(cs.width).to.equal("100px");
});
});
});
});

40
docs/cypress/integration/elements/notification.spec.js Normal file
View File

@ -0,0 +1,40 @@
describe("Elements/Notification", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/notification/");
});
it("has a Notification element", () => {
cy.get("#notification").should("exist");
});
it("has a correct Notification", () => {
cy.get("#notification").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.borderRadius).to.equal("4px");
expect(cs.padding).to.equal("20px 40px 20px 24px");
});
});
it(`has correct color Notifications`, () => {
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(`#notification-${name}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#notification-${name}-light`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(lightColor);
expect(cs.color).to.equal(darkColor);
});
}
});
});

126
docs/cypress/integration/elements/other.spec.js Normal file
View File

@ -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");
});
});
});

38
docs/cypress/integration/elements/progress.spec.js Normal file
View File

@ -0,0 +1,38 @@
describe("Elements/Progress", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/progress/");
});
it("has a Progress element", () => {
cy.get("#progress").should("exist");
});
it("has a correct Progress", () => {
cy.get("#progress").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal(`${Cypress.env("sizes").normal}px`);
});
});
it("has correct Progress sizes", () => {
cy.get("#progress-small").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal(`${Cypress.env("sizes").small}px`);
});
cy.get("#progress-normal").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal(`${Cypress.env("sizes").normal}px`);
});
cy.get("#progress-medium").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal(`${Cypress.env("sizes").medium}px`);
});
cy.get("#progress-large").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal(`${Cypress.env("sizes").large}px`);
});
});
});

53
docs/cypress/integration/elements/table.spec.js Normal file
View File

@ -0,0 +1,53 @@
describe("Elements/Table", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/table/");
});
it("has a Table element", () => {
cy.get("#table").should("exist");
});
it("has a correct Table", () => {
cy.get("#table").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white"));
expect(cs.color).to.equal(Cypress.env("text-strong"));
});
cy.get("#table tr.is-selected").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("primary"));
expect(cs.color).to.equal(Cypress.env("primary-invert"));
});
});
it("has a correct bordered Table", () => {
cy.get("#table-bordered th, #table-bordered td").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderWidth).to.equal("1px");
});
});
it("has a correct striped Table", () => {
cy.get("#table-striped tbody tr:not(.is-selected):nth-child(even)").then(
($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-bis"));
}
);
});
it("has a correct narrow Table", () => {
cy.get("#table-narrow th, #table-narrow td").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("4px 8px");
});
});
it("has a correct fullwidth Table", () => {
cy.get("#table-fullwidth").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.width).to.equal("800px");
});
});
});

107
docs/cypress/integration/elements/tag.spec.js Normal file
View File

@ -0,0 +1,107 @@
describe("Elements/Tag", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/tag/");
});
it("has a Tag", () => {
cy.get(".tag").should("exist");
});
it("has a correct Tag", () => {
cy.get("#tag").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.borderRadius).to.equal("4px");
expect(cs.color).to.equal(Cypress.env("grey-dark"));
expect(cs.fontSize).to.equal("12px");
expect(cs.height).to.equal("24px");
expect(cs.padding).to.equal("0px 9px");
});
cy.get("#tag-rounded").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderRadius).to.equal("9999px");
});
});
it("has a correct Tag sizes", () => {
cy.get("#tag-normal").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("12px");
expect(cs.height).to.equal("24px");
});
cy.get("#tag-medium").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("16px");
expect(cs.height).to.equal("32px");
});
cy.get("#tag-large").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("20px");
expect(cs.height).to.equal("40px");
});
});
// Colors
it(`has correct color Tags`, () => {
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(`#tag-${name}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#tag-${name}-light`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(lightColor);
expect(cs.color).to.equal(darkColor);
});
}
});
it("has correct Tags containers", () => {
cy.get("#tags").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
cy.get("#tags .tag").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("8px");
});
cy.get("#tags-medium .tag").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("16px");
});
cy.get("#tags-large .tag").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("20px");
});
cy.get("#tags-centered").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("center");
});
cy.get("#tags-right").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("flex-end");
});
cy.get("#tags-addons .tag:nth-child(2)").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderRadius).to.equal("0px");
expect(cs.marginRight).to.equal("0px");
});
});
});

63
docs/cypress/integration/elements/title.spec.js Normal file
View File

@ -0,0 +1,63 @@
describe("Elements/Title", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/title/");
});
it("has a Title", () => {
cy.get(".title").should("exist");
});
it("has a correct Title", () => {
cy.get("#title").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text-strong"));
expect(cs.fontSize).to.equal(`${Cypress.env("sizes")["3"]}px`);
expect(cs.fontWeight).to.equal("600");
expect(cs.lineHeight).to.equal(`${Cypress.env("sizes")["3"] * 1.125}px`);
});
cy.get("#title strong").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text-strong"));
expect(cs.fontWeight).to.equal("600");
});
});
it("has correct Title sizes", () => {
for (let i = 1; i <= 7; i++) {
cy.get(`#title-${i}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[i]}px`);
});
}
});
it("has a Subtitle", () => {
cy.get(".subtitle").should("exist");
});
it("has a correct Subtitle", () => {
cy.get("#subtitle").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.fontSize).to.equal(`${Cypress.env("sizes")["5"]}px`);
expect(cs.fontWeight).to.equal("400");
expect(cs.lineHeight).to.equal(`${Cypress.env("sizes")["5"] * 1.25}px`);
});
cy.get("#subtitle strong").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text-strong"));
expect(cs.fontWeight).to.equal("600");
});
});
it("has correct Subtitle sizes", () => {
for (let i = 1; i <= 7; i++) {
cy.get(`#subtitle-${i}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[i]}px`);
});
}
});
});

77
docs/cypress/integration/form/checkbox-radio.spec.js Normal file
View File

@ -0,0 +1,77 @@
describe("Form/Checkbox", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/form/checkbox-radio/");
});
it("has a Checkbox", () => {
cy.get(".checkbox").should("exist");
});
it("has a correct Checkbox", () => {
cy.get("#checkbox").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.cursor).to.equal("pointer");
expect(cs.display).to.equal("inline-block");
expect(cs.lineHeight).to.equal("20px");
expect(cs.position).to.equal("relative");
});
cy.get("#checkbox input").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.cursor).to.equal("pointer");
});
});
it("has a correct disabled Checkbox", () => {
cy.get("#checkbox-disabled").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text-light"));
expect(cs.cursor).to.equal("not-allowed");
});
cy.get("#checkbox-disabled input").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.cursor).to.equal("not-allowed");
});
});
});
describe("Form/Radio", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/form/checkbox-radio/");
});
it("has a Radio", () => {
cy.get(".radio").should("exist");
});
it("has a correct Radio", () => {
cy.get("#radio .radio").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.cursor).to.equal("pointer");
expect(cs.display).to.equal("inline-block");
expect(cs.lineHeight).to.equal("20px");
expect(cs.position).to.equal("relative");
});
cy.get("#radio input").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.cursor).to.equal("pointer");
});
});
it("has a correct disabled Radio", () => {
cy.get("#radio .radio[disabled]").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text-light"));
expect(cs.cursor).to.equal("not-allowed");
});
});
it("has correct Radio spacing", () => {
cy.get("#radio .radio + .radio").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginLeft).to.equal("8px");
});
});
});

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"));
});
});
});

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

@ -0,0 +1,316 @@
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/Field", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
setDesktop();
});
it("has a Field", () => {
cy.get(".field").should("exist");
});
it("has a correct Field", () => {
cy.get("#field").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("12px");
});
});
it("has a correct Field with addons", () => {
cy.get("#field-has-addons").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
expect(cs.justifyContent).to.equal("flex-start");
});
});
it("has a correct Field with addons centered", () => {
cy.get("#field-has-addons-centered").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("center");
});
});
it("has a correct Field with addons right", () => {
cy.get("#field-has-addons-right").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("flex-end");
});
});
it("has a correct Field with addons fullwidth .control", () => {
cy.get("#field-has-addons-fullwidth .control").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("0");
});
});
it("has a correct Field grouped", () => {
cy.get("#field-is-grouped").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
expect(cs.justifyContent).to.equal("flex-start");
});
});
it("has a correct Field grouped centered", () => {
cy.get("#field-is-grouped-centered").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("center");
});
});
it("has a correct Field grouped right", () => {
cy.get("#field-is-grouped-right").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("flex-end");
});
});
it("has a correct Field grouped multiline", () => {
cy.get("#field-is-grouped-multiline").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexWrap).to.equal("wrap");
});
});
it("has a correct Field horizontal", () => {
cy.get("#field-is-horizontal").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
});
describe("Form/Field Label", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
setDesktop();
});
it("has a Field Label", () => {
cy.get(".field-label").should("exist");
});
it("has a correct Field Label", () => {
cy.get("#field-label").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexBasis).to.equal("0px");
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("0");
expect(cs.textAlign).to.equal("right");
});
cy.get("#field-label .label").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("16px");
});
});
it("has correct Field Label sizes", () => {
for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
const size = Cypress.env("just-sizes")[i];
cy.get(`#field-label-${size}`).then(($) => {
const cs = window.getComputedStyle($[0]);
const sizeValue = Cypress.env("sizes")[size];
expect(cs.fontSize).to.equal(`${sizeValue}px`);
expect(cs.paddingTop).to.equal(`${sizeValue * 0.375}px`);
});
}
});
});
describe("Form/Field Body", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
setDesktop();
});
it("has a Field Body", () => {
cy.get(".field-body").should("exist");
});
it("has a correct Field Body", () => {
cy.get("#field-body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
expect(cs.flexBasis).to.equal("0px");
expect(cs.flexGrow).to.equal("5");
expect(cs.flexShrink).to.equal("1");
});
cy.get("#field-body .field").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("0px");
});
cy.get("#field-body > .field").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexShrink).to.equal("1");
});
cy.get("#field-body .field .field").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("0px");
});
});
});
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"));
});
});
});

242
docs/cypress/integration/grid/columns.spec.js Normal file
View File

@ -0,0 +1,242 @@
import {
setMobile,
setTablet,
setDesktop,
setWidescreen,
setFullHD,
} from "../utils";
const SCREENS = [
["-mobile", setMobile],
["-tablet", setTablet],
["-desktop", setDesktop],
["-widescreen", setWidescreen],
["-fullhd", setFullHD],
];
const WIDTHS = [
["three-quarters", 0.75],
["two-thirds", 0.6666],
["half", 0.5],
["one-third", 0.3333],
["one-quarter", 0.25],
["one-fifth", 0.2],
["two-fifths", 0.4],
["three-fifths", 0.6],
["four-fifths", 0.8],
];
describe("Grid/Columns", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/grid/columns/");
setDesktop();
});
it("has Columns", () => {
cy.get(".columns").should("exist");
});
it("has correct Columns", () => {
cy.get("#columns").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
expect(cs.marginBottom).to.equal("12px");
expect(cs.marginLeft).to.equal("-12px");
expect(cs.marginRight).to.equal("-12px");
expect(cs.marginTop).to.equal("-12px");
});
});
it("has correct last Columns", () => {
cy.get("#columns-last").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("-12px");
});
});
it("has correct centered Columns", () => {
cy.get("#columns-centered").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.justifyContent).to.equal("center");
});
});
it("has correct gapless Columns", () => {
cy.get("#columns-gapless").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("24px");
expect(cs.marginLeft).to.equal("0px");
expect(cs.marginRight).to.equal("0px");
expect(cs.marginTop).to.equal("0px");
});
cy.get("#columns-gapless .column").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.margin).to.equal("0px");
expect(cs.padding).to.equal("0px");
});
});
it("has correct gapless last Columns", () => {
cy.get("#columns-gapless-last").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("0px");
});
});
it("has correct multiline Columns", () => {
cy.get("#columns-multiline").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexWrap).to.equal("wrap");
});
});
it("has correct vcentered Columns", () => {
cy.get("#columns-vcentered").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
});
});
// Responsiveness
it("has correct mobile Columns", () => {
setMobile();
cy.get("#columns-mobile").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
setDesktop();
cy.get("#columns-mobile").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
it("has correct desktop Columns", () => {
setMobile();
cy.get("#columns-desktop").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
});
setTablet();
cy.get("#columns-desktop").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
});
setDesktop();
cy.get("#columns-desktop").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
});
describe("Grid/Column", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/grid/columns/");
setTablet();
});
it("has a Column", () => {
cy.get(".column").should("exist");
});
it("has a correct Column", () => {
cy.get("#columns .column").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
expect(cs.flexBasis).to.equal("0px");
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("1");
expect(cs.padding).to.equal("12px");
});
});
it("has a correct Column sizes", () => {
SCREENS.forEach((screen) => {
const suffix = screen[0];
const fn = screen[1];
fn();
cy.get(`#columns-special${suffix}`).then(($) => {
const columnsWidth = $[0].clientWidth;
const $full = $.find(`.column.is-full${suffix}`);
const csfull = window.getComputedStyle($full[0]);
const actualFullWidth = csfull.width.substring(
0,
csfull.width.length - 2
);
expect(csfull.flexBasis).to.equal("auto");
expect(csfull.flexGrow).to.equal("0");
expect(csfull.flexShrink).to.equal("0");
expect(`${Math.round(actualFullWidth)}px`).to.equal(
`${Math.round(columnsWidth)}px`
);
const $narrow = $.find(`.column.is-narrow${suffix}`);
const csnarrow = window.getComputedStyle($narrow[0]);
expect(csnarrow.flexBasis).to.equal("auto");
expect(csnarrow.flexGrow).to.equal("0");
expect(csnarrow.flexShrink).to.equal("0");
WIDTHS.forEach((width) => {
const name = width[0];
const factor = width[1];
const $1 = $.find(`.column.is-${name}${suffix}`);
const cs1 = window.getComputedStyle($1[0]);
const actualWidth = cs1.width.substring(0, cs1.width.length - 2);
expect(cs1.flexBasis).to.equal("auto");
expect(cs1.flexGrow).to.equal("0");
expect(cs1.flexShrink).to.equal("0");
expect(`${Math.round(actualWidth)}px`).to.equal(
`${Math.round(factor * columnsWidth)}px`
);
const $2 = $.find(`.column.is-offset-${name}${suffix}`);
const cs2 = window.getComputedStyle($2[0]);
const actualMarginLeft = cs2.marginLeft.substring(
0,
cs2.marginLeft.length - 2
);
expect(`${Math.round(actualMarginLeft)}px`).to.equal(
`${Math.round(factor * columnsWidth)}px`
);
for (let i = 1; i <= 12; i++) {
const $3 = $.find(`.column.is-${i}${suffix}`);
const cs3 = window.getComputedStyle($3[0]);
const actualWidth = cs3.width.substring(0, cs3.width.length - 2);
expect(cs3.flexBasis).to.equal("auto");
expect(cs3.flexGrow).to.equal("0");
expect(cs3.flexShrink).to.equal("0");
expect(`${Math.round(actualWidth)}px`).to.equal(
`${Math.round((i / 12) * columnsWidth)}px`
);
const $4 = $.find(`.column.is-offset-${i}${suffix}`);
const cs4 = window.getComputedStyle($4[0]);
const actualMarginLeft = cs4.marginLeft.substring(
0,
cs4.marginLeft.length - 2
);
expect(`${Math.round(actualMarginLeft)}px`).to.equal(
`${Math.round((i / 12) * columnsWidth)}px`
);
}
});
});
});
});
});

96
docs/cypress/integration/grid/tiles.spec.js Normal file
View File

@ -0,0 +1,96 @@
import {
setMobile,
setTablet,
setDesktop,
setWidescreen,
setFullHD,
} from "../utils";
describe("Grid/Tiles", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/grid/tiles/");
setDesktop();
});
it("has a Tile", () => {
cy.get(".tile").should("exist");
});
it("has a correct Tile", () => {
cy.get("#tile").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("stretch");
expect(cs.display).to.equal("flex");
expect(cs.flexBasis).to.equal("0px");
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("1");
expect(cs.minHeight).to.equal("min-content");
});
});
it("has a correct ancestor Tile", () => {
cy.get("#tile-ancestor").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("12px");
expect(cs.marginLeft).to.equal("-12px");
expect(cs.marginRight).to.equal("-12px");
expect(cs.marginTop).to.equal("-12px");
});
});
it("has a correct last ancestor Tile", () => {
cy.get("#tile-ancestor-last").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("-12px");
expect(cs.marginLeft).to.equal("-12px");
expect(cs.marginRight).to.equal("-12px");
expect(cs.marginTop).to.equal("-12px");
});
});
it("has a correct parent Tile", () => {
cy.get("#tile-parent").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("12px");
});
});
it("has a correct vertical Tile", () => {
cy.get("#tile-vertical").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexDirection).to.equal("column");
});
});
it("has a correct child Tile", () => {
cy.get("#tile-child").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("0px");
expect(cs.marginLeft).to.equal("0px");
expect(cs.marginRight).to.equal("0px");
expect(cs.marginTop).to.equal("0px");
});
});
it("has a correct vertical child Tile", () => {
cy.get("#tile-vertical-child").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.marginBottom).to.equal("24px");
});
});
it("has a correct Tile sizes", () => {
for (let i = 1; i <= 12; i++) {
cy.get(`#tile-${i}`).then(($) => {
const cs = window.getComputedStyle($[0]);
const actualWidth = cs.width.substring(0, cs.width.length - 2);
expect(cs.flexBasis).to.equal("auto");
expect(cs.flexGrow).to.equal("0");
expect(cs.flexShrink).to.equal("0");
expect(`${Math.round(actualWidth)}px`).to.equal(
`${Math.round((i / 12) * 1000)}px`
);
});
}
});
});

17
docs/cypress/integration/layout/footer.spec.js Normal file
View File

@ -0,0 +1,17 @@
describe("Layout/Footer", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/layout/footer/");
});
it("has a Footer", () => {
cy.get(".footer").should("exist");
});
it("has a correct Footer", () => {
cy.get("#footer").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main-bis"));
expect(cs.padding).to.equal("48px 24px 96px");
});
});
});

150
docs/cypress/integration/layout/hero.spec.js Normal file
View File

@ -0,0 +1,150 @@
import { setMobile, setDesktop } from "../utils";
describe("Layout/Hero", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/layout/hero/");
setDesktop();
});
it("has a Hero", () => {
cy.get(".hero").should("exist");
});
it("has a correct Hero", () => {
cy.get("#hero").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("stretch");
expect(cs.display).to.equal("flex");
expect(cs.flexDirection).to.equal("column");
expect(cs.justifyContent).to.equal("space-between");
});
});
it("has a correct Hero 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(`#hero-${name}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
});
}
});
it("has a correct small Hero", () => {
cy.get("#hero-small .hero-body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("24px");
});
});
it("has a correct medium Hero", () => {
cy.get("#hero-medium .hero-body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("144px 72px");
});
});
it("has a correct large Hero", () => {
cy.get("#hero-large .hero-body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("288px 96px");
});
});
it("has a correct halfheight Hero", () => {
cy.get("#hero-halfheight").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.minHeight).to.equal(`${Cypress.env("viewports").desktop[1] / 2}px`);
});
cy.get("#hero-halfheight .hero-body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
expect(cs.display).to.equal("flex");
});
});
it("has a correct fullheight Hero", () => {
cy.get("#hero-fullheight").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.minHeight).to.equal(`${Cypress.env("viewports").desktop[1]}px`);
});
cy.get("#hero-fullheight .hero-body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
expect(cs.display).to.equal("flex");
});
});
it("has a correct Hero with container", () => {
cy.get("#hero-with-container > .container").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("1");
});
});
it("has a Hero Buttons", () => {
cy.get(".hero-buttons").should("exist");
});
it("has a correct Hero Buttons", () => {
cy.get("#hero-buttons").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
expect(cs.justifyContent).to.equal("center");
expect(cs.marginTop).to.equal("24px");
});
});
it("has a Hero Head", () => {
cy.get(".hero-head").should("exist");
});
it("has a correct Hero Head", () => {
cy.get("#hero-head").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexGrow).to.equal("0");
expect(cs.flexShrink).to.equal("0");
});
});
it("has a Hero Foot", () => {
cy.get(".hero-foot").should("exist");
});
it("has a correct Hero Foot", () => {
cy.get("#hero-foot").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexGrow).to.equal("0");
expect(cs.flexShrink).to.equal("0");
});
});
it("has a Hero Body", () => {
cy.get(".hero-body").should("exist");
});
it("has a correct Hero Body", () => {
cy.get("#hero-body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexGrow).to.equal("1");
expect(cs.flexShrink).to.equal("0");
expect(cs.padding).to.equal("48px");
});
setMobile();
cy.get("#hero-body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("48px 24px");
});
});
});

40
docs/cypress/integration/layout/section.spec.js Normal file
View File

@ -0,0 +1,40 @@
import { setMobile, setDesktop } from "../utils";
describe("Layout/Section", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/layout/section/");
setDesktop();
});
it("has a Section", () => {
cy.get(".section").should("exist");
});
it("has a correct Section", () => {
cy.get("#section").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("48px");
});
setMobile();
cy.get("#section").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("48px 24px");
});
});
it("has a correct medium Section", () => {
cy.get("#section-medium").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("144px 72px");
});
});
it("has a correct large Section", () => {
cy.get("#section-large").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("288px 96px");
});
});
});

36
docs/cypress/integration/utils.js Normal file
View File

@ -0,0 +1,36 @@
export const setMobile = () => {
cy.viewport(
Cypress.env("viewports").mobile[0],
Cypress.env("viewports").mobile[1]
);
};
export const setTablet = () => {
cy.viewport(
Cypress.env("viewports").tablet[0],
Cypress.env("viewports").tablet[1]
);
};
export const setDesktop = () => {
cy.viewport(
Cypress.env("viewports").desktop[0],
Cypress.env("viewports").desktop[1]
);
};
export const setWidescreen = () => {
cy.viewport(
Cypress.env("viewports").widescreen[0],
Cypress.env("viewports").widescreen[1]
);
};
export const setFullHD = () => {
cy.viewport(
Cypress.env("viewports").fullhd[0],
Cypress.env("viewports").fullhd[1]
);
};
export const familyPrimary = 'system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif';

22
docs/cypress/plugins/index.js Normal file
View File

@ -0,0 +1,22 @@
/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
/**
* @type {Cypress.PluginConfig}
*/
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}

31
docs/cypress/support/commands.js Normal file
View File

@ -0,0 +1,31 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
// function colorDarken(color, amount) {
// return cy.wrap(color);
// }
// Cypress.Commands.add("colorDarken", colorDarken);

20
docs/cypress/support/index.js Normal file
View File

@ -0,0 +1,20 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')

BIN
docs/cypress/videos/elements/box.spec.js.mp4
View File

Binary file not shown.

BIN
docs/cypress/videos/elements/button.spec.js.mp4
View File

Binary file not shown.

BIN
docs/cypress/videos/elements/container.spec.js.mp4
View File

Binary file not shown.

BIN
docs/images/placeholders/1x1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 B

2298
docs/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
docs/package.json
View File

@ -10,17 +10,22 @@
"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",
"postcss-cli": "^9.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",
"css-sass": "node-sass --output-style expanded bulma-docs.scss css/bulma-docs.css",
"css-watch": "npm run css-sass -- --watch",
"cypress-open": "./node_modules/.bin/cypress open",
"cypress-run": "./node_modules/.bin/cypress run",
"deploy": "npm run css-build && npm run js-build",
"js-build": "babel _javascript --out-dir lib",
"js-watch": "npm run js-build -- --watch",

3
sass/form/select.sass
View File

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