mirror of
https://github.com/jgthms/bulma
synced 2026-03-22 13:04:29 -07:00
Setup cypress (#3436)
* 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
29
docs/cyp/form/checkbox-radio.html
Normal file
29
docs/cyp/form/checkbox-radio.html
Normal 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
71
docs/cyp/form/file.html
Normal 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
26
docs/cyp/form/input-textarea.html
Normal 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
53
docs/cyp/form/select.html
Normal 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
150
docs/cyp/form/tools.html
Normal 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>
|
||||
Reference in New Issue
Block a user