Tim Griesser
d0cf250f57
* chore: Remove references to desktop-gui in CI & scripts * More path updates * Remove desktop-gui cypress tests * remove add:project * remove begin:auth * remove close:browser * remove close:project * remove external:open * remove get:current:user * remove get:orgs * remove gui:error * remove get:runs * remove get:options * remove get:projects * remove get:project:statuses * remove get:project:status * remove get:dashboard:projects * remove get:record:keys * remove get:release:notes * remove get:specs * remove get:user:editor * remove set:user:editor * remove launch:browser * remove log:out * remove on:focus:tests * remove: on:menu:clicked * remove open:file * remove open:finder * remove open:project * remove on:config:changed * remove on:spec:changed * remove on:project:error * remove on:project:warning * remove ping:api:server * remove ping:baseUrl * remove remove:project * remove request:access * remove setup:dashboard:project * remove set:project:id * remove requestAccess * remove show:directory:dialog * remove show:new:spec:dialog * remove updater:check * remove updater:run * remove window:open/close * remove new:project:banner:closed * remove has:opened:cypress * remove remove:scaffolded:files * remove set:clipboard:text * remove set:prompt:shown * ipc & static method cleanup * remove packages/desktop-gui * bump yarn.lock, standardize webpack version * bump yarn.lock
@cypress/design-system
A design system for the surfaces of testing softwares. 🐛💅
Values
It is discreet
Let the surfaces fade away to allow work to happen.
It is native
Let the surfaces be familiar to where work happens.
It is accessible
Let the surfaces honor accepted standards so everyone can use them.
It is specialized
Let the surfaces be appropriate for the job to be done. Favor consistency over novelty, but not at the cost of functionality.
Usage
The components work with or without the global stylesheet import. The stylesheet import is used to setup global scss tokens, colors, utility classes, and typography.
Component Usage:
import { Button } from '@cypress/design-system'
To setup global CSS tokens and mixins, you can import the library's index.scss. You can either do this with @use or @import (See CSS Trick's intro to Sass modules here)
SCSS usage:
// scoped within the *.scss file
@use '@cypress/design-system' as *;
// import variables and mixins throughout the whole project
// or @import('@cypress/design-system');
.my-component {
text-color: $accent-color-01;
}
Development
We are currently using:
- CSS Modules for styling
- TSX for components
- SCSS with module support
- Rollup to bundle
- Cypress CT as a development environment
- Webpack is required for Cypress CT but will soon be replaced by a rollup dev server
Developing locally
yarn cy:open
Building the library
yarn build
Deploying
TODO: Add netlify site support and static app wrapper
Testing
yarn cy:run
TODO
- Deploy a static page demo-ing the design system
- Import the first component inside of RunnerCT
- Hook up tests to circle
- Publish the package on npm (switch
package.json'spublishConfigto 'public' instead of 'restricted' and then merge into master)