Unverified Commit 3269e2e6 authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

RELEASES - alpha.7, to master (#476)

* vf-form dependencies

* chore: opimise-sas-import-paths

Sets up a cleaner hirearchy of sass path imports.

Also does an npm update.

* fix: vf-global-header-dependencies

Was using an old version of vf-logo

* chore: load-latest-patterns-to-npm

Resolve a couple of broken package dependencies.

* Fix: docs should soft fail when vf-design-tokens aren't present

* Typos

* Chore: don't send backstop files to npm

Just a cleanup thing I suppose.

* Always ignore any vf-core-components/vf-core components

There should typically never be any components here, but:

1. A developer might drop them in the wrong spot
2. if we're testing the npm directly from github, we need to ignore these

* Typo

* removes BackStop.js and adds Percy

* adds .percy.yml config file

* adds Percy.io badge

* updates percy yml file

* chore: cleanup autocomment

Mostly does two things:

- Reduces the amount of spam we're getting when a PR is made and review requested (and I think this phrasing might be more helfpul to external devs)
- Tries to fix [ ] checkbox formatting with 2 spaces at end of each line

* updates .percy.yml

* updates travis.yml for percy to be fired

* fixes incorrect variable spelling

* updates breadcrumbs so the work without an embl-grid

* adds spacing for when on desktop, hides fake dark grey bar

* various spacing issues fixed to make it look nicer

* stylelint fixes

* tidies up breadcrumbs specifity

* fixes breadcrumb on mobile

* fixes breadcrumb on mobile

* fixes main navigation inside header

* bug: conditional-edit-order-of-operation

Resolves an issue where `?embl-conditional-edit` was being parsed before content had loaded.

* enhancement: dont-link-breadcrumbs-without-url

The current desire is that when we don't have a working url, to not link the term.

* Enhancement: vf-blockquote

Adds `blockquout` to `vf-conent` and better insulates against external styling with a `border: 0`

Relates to https://gitlab.ebi.ac.uk/emblorg/backlog/issues/215

* Usage updates for vf-breadcrumb to remove wrapping grid

* the one that fixes quite a lot of small issues with vf-core and vf-wp (#441)

* fixes incorrect variable spelling

* updates breadcrumbs so the work without an embl-grid

* adds spacing for when on desktop, hides fake dark grey bar

* various spacing issues fixed to make it look nicer

* stylelint fixes

* tidies up breadcrumbs specifity

* fixes breadcrumb on mobile

* fixes breadcrumb on mobile

* fixes main navigation inside header

* the one where we include the first pass at a card component (#440)

* npm shrinkwrap idk

* adds initial vf-card pattern

* some spacing fixes for hover and mobile

* makes the image not go crazy on small viewports

* Enhancement: update heading--l text size

Resolves issues that occur as `heading--l` and `heading--l-alit` were both 24px

For more background see: https://gitlab.ebi.ac.uk/emblorg/backlog/issues/215#note_45386

We could also resolve some of these issues by manually setting the `.vf-content h2` size, but that would be a bit of a hack and not get updates from vf-design-tokens.

This will have some knockon effects to other patterns, sometimes it may be a "change for the better" other times we may need to update a pattern to use `--l-alt`

The Sketch paragraph styles may also need to be updated.

* enhancement: use-heading--l-alt-for-some-patterns

Follows up on #443 by subing out `heading--l` for `heading--l-alt` in:

- vf-card
- vf-section-header
- vf-summary
- vf-video-teaser

Basically, where a bump from 30px to 24px was undesirable.

We may have a larger refactor of the naming of some of these tokens coming, but for now this "makes things look right", i think.

* BUG: hover issue with buttons or links that look like buttons

Procrastinating writing some documentation so had a go at sorting #436

* Chore: vf-sass-utilities should be on npm (#449)

Addresses #399

* Docs: How do we version patterns on npm? #119

* Docs: List core audiences/user types #127

* Typos

* Typos

* Bug: Autocomment formatting

Continues effort to (attempt to) clean up formatting.

* bug: spacing-token-naming

The spacing token names missed an update, that is: `vf-spacing-r` should be `vf-spacing--r`

Also adds an issue where nested `.vf-content ul li > ul` didn't have a needed margin at the top.

* Enhancement: gulp css building, linting

Addresses #412 and also address the "spirit" of that ticket, by:

- Making the css linting come after the css recompilation
- Adds a soft-fail css linting task that won't explode the local deve experience
- Fixes `vf-css` to use a better callback approach so that:
    1. You get an accurate idea of the css build time
    2. A real signal that the vf-css pipe stream has completed
    3. No longer get a flash of fractal befor the css build has finished

And it should be a bit faster now that fractal won't try to run while the Sass is still building.

* Bug: fix static build path

This mainly fixes how vf-card was showing without the image when deployed. It relates to #364 on how we need to document this, propbably in the pattern template too.

It also sneaks in a fix where the utility mixins were need for the hover effect for the button.

* Drop vf-sass-lint from watch command

* docs: Using frctl `path` with njk templates (#458)

Addresses #364

* CHORE: Swap npm for yarn

Addresses #455

* Bug: component variant name, demo (#461)

A few minor fixes I stumbled on while working on #460: a name for a vf-text variant and the vf-headings demo

* the one where we use variants for the vf-card component (#462)

* makes use of nunjucks to create variants

* makes use of variables and maps and normalises some sizing

* small readme update

* Elsewhere we've used hyphens, changing for consistency

* Remove _preview--grids

It's the same as --containers

* Remove _preview--containers

* bug: vf-conent-hub-html grid-escape

The below tweak introduced some layout issues as non-layout affecting content out of the content hub (think: blocks) was being escaped from the grid.

```
.embl-content-hub-html {
  grid-column: 1 / -1;
}
```

This fixes that by only targeting elements that are direct children of `-grid`.

It also add `.embl-content-hub-html` so we can begin to update classes in the contentHub.

* Chore: set percy to run only on develop

This limits the percy command to only run on commits to develop and compares against master.

We might also want to disable the github integration to stop comparissons on PRs, which has chewed through our alotment of screenshots.

This also set it only do mobile/desktop for a 33% savings :D

But it doesn't really matter until August as we've already gone through our quota!

* Forgot to commit

* Docs: move design token demonstration (#468)

As I work through cleaning up docs and making "things more approachable", it became clear that the design tokens can (of course) change in both how they're used and how much technical detail should be shown.

With that in mind I've moved the existing `/docs/styles/` to be paired directly with `vf-design-tokens`

I think this:

1. Makes it clear that these settings come from `vf-design-tokens`
2. Are where developers might expect the most technical values
3. We can link to from `/docs`
4. Makes it possible to put something more high level in `docs/styles`
5 It also stops the risk of "what happens when there's `docs/styles` but `vf-design-tokens` wasn't installed?

* adds vertical spacing for vf-lede, normalises spacing for vf-intor (#472)

* adds vertical spacing for vf-lede, normalises spacing for vf-intor

* moves vf-lede margin to vf-intro parent

* RELAESES - alpha.7 (#470)

* Update package.json

* Update npm versions
parent 91c80c1a
Pipeline #25166 passed with stages
in 3 minutes and 11 seconds
......@@ -8,20 +8,20 @@ issuesOpened: >
# PR Opened
pullRequestOpened: >
Thank you for requesting a review for this pull request (PR).
Thank you for requesting a review for this pull request (PR). If you have not done so already - please fill out the PR description with as much context as possible.<br/>
If this PR has an associated issue - please add that to the PR description.
If you have not done so already - please fill out the PR description with as much context as possible.
## Pull request review
# Pull Request Ready For Review
pullRequestReviewRequested: >
Before your PR can be merged in, it will need to be reviewed.
Have you added any relevant labels to this PR?
- [ ] add relevant labels to this PR
To help this process please make sure you have these things ready (if applicable).
- [ ] `package.json` is updated accordingly
- [ ] `README.md` is filled out with required documentation
- [ ] any `.scss` files correctly documented
- [ ] `package.json` updated accordingly.
- [ ] `README.md` fill out with required documentation.
- [ ] any `.scss` files correctly documented.
- [ ] a detailed outlin on what this PR is expected to do
......@@ -10,3 +10,4 @@ build
.max-age
.gitlab-ci.yml
temp
backstop_data
version: 1
snapshot:
# widths: [375, 800, 1330]
widths: [375, 1330]
static-snapshots:
base-url:
snapshot-files: '**/*.html'
ignore-files: '**/embl-boilerplate-page/*.html'
......@@ -9,13 +9,23 @@ branches:
stages:
- deploy
- percy
before_script:
- npm install
- npm install -g gulp-cli
- yarn install
- yarn global add gulp-cli
- gulp vf-build
- "curl https://www.projectwallace.com/webhooks/v1/imports?token=$WALLACE_TOKEN -fsS --retry 3 -X POST -H 'Content-Type: text/css' -d @build/css/styles.css"
percy:
env:
- PERCY_TARGET_BRANCH=master
script:
- npx percy snapshot build/components/preview/
on:
branch:
- develop
deploy:
provider: pages
skip-cleanup: true
......
# Visual Framework 2.0
[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/EMBL/EMBL-Visual-Framework)
---
**👋 Downloading or cloning this repo? 🛑**
......
var glob = require("glob")
var viewports = [
{
"name": "small",
"width": 375,
"height": 667
},
{
"name": "medium",
"width": 768,
"height": 1024
},
{
"name": "huge",
"width": 1366,
"height": 768
}
];
// Hide any selectors you don't need
var hideSelectors = [];
// Take out any selectors
var removeSelectors = [];
// Just get look at these selectors
var selectors = [];
var scenariosArray = [];
var htmlFiles = glob.sync("build/components/preview/**/*.html");
// Loop through all *.html pages and push to scenariosArray
htmlFiles.forEach(function(file, i) {
var filename = file;
scenariosArray.push({
"label": filename,
"url": "http://localhost:8888/"+filename,
"hideSelectors": hideSelectors,
"removeSelectors": removeSelectors,
"selectors": selectors,
"delay": 500
});
});
module.exports = {
"id": "SCL Test",
"viewports": viewports,
"scenarios": scenariosArray,
"paths": {
"bitmaps_reference": "backstop_data/bitmaps_reference",
"bitmaps_test": "backstop_data/bitmaps_test",
"casper_scripts": "backstop_data/casper_scripts",
"html_report": "backstop_data/html_report",
"ci_report": "backstop_data/ci_report"
},
"casperFlags": [],
"engine": "phantomjs",
"report": ["browser"],
"debug": false
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment