Merge pull request #1 from embl-communications/develop

Initial boilerplate for EMBL

Merge pull request #1 from embl-communications/develop
Initial boilerplate for EMBL
e56ae0f6 · Ken Hawkins · GitHub · c2c5075a · c8d48a29 · e56ae0f6
Unverified Commit e56ae0f6 authored May 29, 2019 by Ken Hawkins Committed by GitHub May 29, 2019
20 changed files
--- a/components/vf-boilerplate-page/index.scss
+++ b/components/vf-boilerplate-page/index.scss
+// setup files required
--- a/components/vf-boilerplate-page/package.json
+++ b/components/vf-boilerplate-page/package.json
+{
+  "version": "0.0.14",
+  "name": "@visual-framework/vf-boilerplate-page",
+  "description": "vf-boilerplate-page component",
+  "homepage": "https://visual-framework.github.io/vf-core/",
+  "author": "VF",
+  "license": "Apache 2.0",
+  "main": "build/index.js",
+  "files": [],
+  "test": "echo \"Error: no test specified\" && exit 1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repo": "https://github.com/visual-framework/vf-core/tree/master/components/boilerplates/vf-boilerplate-page",
+  "bugs": {
+    "url": "https://github.com/visual-framework/vf-core/issues"
+  },
+  "keywords": [
+    "fractal",
+    "component"
+  ],
+  "gitHead": "ce5e8d5c5c0b99c706f3f67324bf4c058ec89ccd"
+}
--- a/components/vf-boilerplate-page/vf-boilerplate-page.config.yml
+++ b/components/vf-boilerplate-page/vf-boilerplate-page.config.yml
+title: VF Boilerplate page
+label: VF Boilerplate
+preview: '@preview--fullhtml'
+context:
+  component-type: boilerplate
--- a/components/vf-boilerplate-page/vf-boilerplate-page.js
+++ b/components/vf-boilerplate-page/vf-boilerplate-page.js
+// vf-boilerplate-page
--- a/components/vf-boilerplate-page/vf-boilerplate-page.njk
+++ b/components/vf-boilerplate-page/vf-boilerplate-page.njk
+<!DOCTYPE html>
+<html lang="en" class="vf-no-js">
+<head>
+  {% render "@vf-no-js" %}
+  <title>{{ _target.title }} | {{ _config.project.title }}</title>
+
+  <meta charset="utf-8">
+  <meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport">
+
+  {% render "@vf-favicon" %}
+  {% render "@embl-content-meta-properties", {"meta_who": "Group Jane", "meta_where": "Barcelona", "meta_what": "research", "meta_active": "what"} %}
+
+  {% if _config.project.environment.local %}
+  <link rel="stylesheet" href="{{ '/css/styles.css' | path }}">
+  {% endif %}
+  {% if _config.project.environment.production %}
+  <link rel="stylesheet" href="https://dev.assets.emblstatic.net/vf/develop/css/styles.css">
+  {% endif %}
+</head>
+<body>
+  <header class="vf-header">
+    {% render "@vf-global-header" %}
+  </header>
+
+  <!-- dismissible banner -->
+  <section class="vf-banner vf-banner--fixed vf-banner--bottom vf-banner--phase" data-vf-js-banner data-vf-js-banner-state="dismissible" data-vf-js-banner-button-text="Close notice">
+      <div class="vf-banner__content" data-vf-js-banner-text>
+        <div>
+          <h3 class="vf-text vf-text--heading-r">
+            Don't need to customise the EMBL Design Language for Websites?
+          </h3>
+          <p class="vf-banner__text">Here's the core CSS and JS you need. Don't forget to <a href="http://dev.beta.embl.org/guidelines/visual-framework/dev-docs/" class="vf-link">consult the component library</a>.</p>
+          {% codeblock 'html' -%}
+<link rel="stylesheet" href="https://dev.assets.emblstatic.net/vf/develop/css/styles.css">
+<script src="https://dev.assets.emblstatic.net/vf/develop/scripts/scripts.js"></script>
+          {% endcodeblock %}
+        </div>
+      </div>
+  </section>
+
+
+  <div class="vf-body">
+    {% render "@vf-intro" %}
+  </div>
+
+  {% render "@vf-footer" %}
+
+  <script src="{{ '/scripts/scripts.js' | path }}"></script>
+</body>
+</html>
--- a/components/vf-componenet-rollup/CHANGELOG.md
+++ b/components/vf-componenet-rollup/CHANGELOG.md
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.0.9 (2019-03-28)
+
+**Note:** Version bump only for package @visual-framework/vf-componenet-rollup
+
+
+
+
+
+## 0.0.8 (2019-02-28)
+
+**Note:** Version bump only for package @visual-framework/vf-componenet-rollup
+
+
+
+
+
+## 0.0.7 (2019-02-28)
+
+**Note:** Version bump only for package @visual-framework/vf-componenet-rollup
+
+
+
+
+
+# 0.1.0
+
+### Added
+- added this
+- added that
+
+### Changes
+
+- changed this
+- changed that
+
+### Removed
+
+- deleted this
+- deleted that
--- a/components/vf-componenet-rollup/README.md
+++ b/components/vf-componenet-rollup/README.md
+# vf-componenet-rollup Component
+
+[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-componenet-rollup.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-componenet-rollup)
+
+The `vf-componenet-rollup` compiles component Sass and JS into style.css and scripts.js files, retrospectively.
+
+## Install
+
+This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `vf-componenet-rollup` with this command.
+
+```
+$ npm install --save @visual-framework/vf-componenet-rollup
+```
+
+## Usage
+
+The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+
+```
+@import "@visual-framework/vf-componenet-rollup/index.scss";
+```
+
+_Make sure you import any requirements along with the modules._
--- a/components/vf-componenet-rollup/index.scss
+++ b/components/vf-componenet-rollup/index.scss
+/*
+ *
+ * styles.css
+ * The Visual Framework kitchen sink of styles.
+ * Include this style sheet as a quick way to get *everything*,
+ * or follow the guide at github.com/visual-framework/vf-core
+ * to learn how to build custom and optimised CSS.
+ *
+ */
+
+@import 'vf-global-custom-properties.scss';
+
+@import 'vf-global-variables.scss';
+@import 'vf-variables.scss';
+@import 'vf-functions.scss';
+@import 'vf-mixins.scss';
+@import 'node-normalize-scss/normalize.scss';
+
+@import 'vf-sass-utilities/vf-screen-reader.scss';
+
+/* Visual Framework Utility Class Mixins */
+
+@import 'vf-utility-mixins.scss';
+
+/* All Visual Framework Font components */
+// @import 'vf-font-plex-mono/vf-font-plex-mono.scss';
+@import 'vf-font-plex-sans/vf-font-plex-sans.scss';
+
+html, button {
+  @if $use-global-typography == true {
+    font-family: $vf-font-family-sans-serif;
+  }
+}
+
+/* Visual Framework content compatibility
+ * We put this first so it will have the least specificity
+ */
+@import 'vf-content/vf-content.scss';
+
+/* All Visual Framework grids */
+
+@import 'vf-grid/vf-grid.scss';
+// @import 'vf-inlay/vf-inlay.scss';
+@import 'vf-grid-page/vf-grid-page.scss';
+@import 'embl-grid/embl-grid.scss';
+
+/* All Visual Framework Elements */
+
+@import 'vf-badge/vf-badge.scss';
+// @import 'vf-link/vf-link.scss';
+//   @import 'vf-link/vf-link--primary.scss';
+//   @import 'vf-link/vf-link--secondary.scss';
+//   @import 'vf-link/vf-link--disabled.scss';
+@import 'vf-logo/vf-logo.scss';
+@import 'embl-logo/embl-logo.scss';
+// @import 'vf-form__core/vf-form__core.scss';
+// @import 'vf-button/vf-button.scss';
+// @import 'vf-figure/vf-figure.scss';
+// @import 'vf-list/vf-list.scss';
+// @import 'vf-blockquote/vf-blockquote.scss';
+@import 'vf-divider/vf-divider.scss';
+@import 'embl-conditional-edit/embl-conditional-edit.scss';
+
+/* All Visual Framework Blocks */
+
+// @import 'vf-box/vf-box.scss';
+//   @import 'vf-box/vf-box--inlay.scss';
+//   @import 'vf-box/vf-box--factoid.scss';
+
+// @import 'vf-breadcrumbs/vf-breadcrumbs.scss';
+//   @import 'vf-breadcrumbs/vf-breadcrumbs--with-related.scss';
+
+// @import 'vf-discussion/vf-discussion.scss';
+
+// @import 'vf-code-example/vf-code-example.scss';
+// @import 'vf-page-header/vf-page-header.scss';
+// @import 'vf-link-list/vf-link-list.scss';
+@import 'vf-header/vf-header.scss';
+
+// @import 'vf-lede/vf-lede.scss';
+
+// @import 'vf-masthead/vf-masthead.scss';
+//   @import 'vf-masthead/vf-masthead--supports.scss';
+
+// @import 'vf-navigation/vf-navigation.scss';
+//   @import 'vf-navigation/vf-navigation--global.scss';
+//   @import 'vf-navigation/vf-navigation--main.scss';
+//   @import 'vf-navigation/vf-navigation--additional.scss';
+
+// @import 'vf-section-header/vf-section-header.scss';
+// @import 'vf-activity-list/vf-activity-list.scss';
+// @import 'vf-article-meta-information/vf-article-meta-information.scss';
+
+// @import 'vf-search/vf-search.scss';
+
+// @import 'vf-summary/vf-summary.scss';
+//   @import 'vf-summary/vf-summary--article.scss';
+//   @import 'vf-summary/vf-summary--job.scss';
+//   @import 'vf-summary/vf-summary--profile.scss';
+//   @import 'vf-summary/vf-summary--news.scss';
+//   @import 'vf-summary/vf-summary--has-image.scss';
+
+// @import 'vf-video/vf-video.scss';
+// @import 'vf-video-teaser/vf-video-teaser.scss';
+@import 'vf-global-header/vf-global-header.scss';
+@import 'vf-tabs/vf-tabs.scss';
+@import 'embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.scss';
+// @import 'vf-pagination/vf-pagination.scss';
+//   @import 'vf-pagination/vf-pagination--full.scss';
+
+/* All Visual Framework Containers */
+
+// @import 'vf-activity-group/vf-activity-group.scss';
+@import 'vf-intro/vf-intro.scss';
+@import 'embl-content-hub-loader/embl-content-hub-loader.scss';
+
+@import 'vf-banner/vf-banner.scss';
+  @import 'vf-banner/vf-banner--phase.scss';
+  @import 'vf-banner/vf-banner--fixed.scss';
+  @import 'vf-banner/vf-banner--gdpr.scss';
+
+// @import 'vf-news-container/vf-news-container.scss';
+// @import 'vf-video-container/vf-video-container.scss';
+// @import 'vf-footer/vf-footer.scss';
+
+/* All Visual Framework Boilerplates */
+
+// @import 'embl-group-page/embl-group-page.scss';
+
+/* All Visual Framework Deprecated components */
+
+// @import 'vf-deprecated/vf-deprecated.scss';
+
+/* All Visual Framework Utility and high-specificity components */
+
+@import 'vf-utility-classes/vf-utility-classes.scss';
+@import 'vf-heading/vf-heading.scss';
+@import 'vf-text/vf-text.scss';
+
+// This is a demonstration of vf-core's ability to warn and proceed on missing
+// sass imports
+// @import 'vf-somepattern/vf-i-dont-exist.scss';
--- a/components/vf-componenet-rollup/package.json
+++ b/components/vf-componenet-rollup/package.json
+{
+  "version": "0.0.9",
+  "name": "@visual-framework/vf-componenet-rollup",
+  "description": "vf-componenet-rollup component",
+  "homepage": "https://visual-framework.github.io/vf-core",
+  "author": "VF",
+  "license": "Apache 2.0",
+  "style": "vf-componenet-rollup.css",
+  "sass": "index.scss",
+  "main": "build/index.js",
+  "files": [
+    "index.scss",
+    "scripts.js",
+    "README.md"
+    "vf-componenet-rollup.css"
+  ],
+  "test": "echo \"Error: no test specified\" && exit 1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repo": "https://github.com/visual-framework/vf-core/tree/master/tree/master/components/vf-componenet-rollup",
+  "bugs": {
+    "url": "https://github.com/visual-framework/vf-core/issues"
+  },
+  "dependencies": {
+    "@visual-framework/vf-sass-config": "^0.0.12"
+  },
+  "keywords": [
+    "fractal",
+    "component"
+  ],
+  "gitHead": "ce5e8d5c5c0b99c706f3f67324bf4c058ec89ccd"
+}
--- a/components/vf-componenet-rollup/scripts.js
+++ b/components/vf-componenet-rollup/scripts.js
+/*
+ *
+ * scripts.css
+ * The Visual Framework kitchen sink of JavaScript.
+ * Import this as a quick way to get *everything*,
+ *
+ */
+
+// All VF JS
+import { vfBanner } from 'vf-banner/vf-banner';
+vfBanner();
+
+import { vfTabs } from 'vf-tabs/vf-tabs';
+vfTabs();
+
+// import 'vf-form/vf-form__core/assets/float-labels.js';
+
+// All EMBL JS
+import { emblConditionalEdit } from 'embl-conditional-edit/embl-conditional-edit';
+emblConditionalEdit();
+
+import { emblContentHubLoaderHtmlImports } from 'embl-content-hub-loader/embl-content-hub-loader__html-imports';
+import { emblContentHubFetch } from 'embl-content-hub-loader/embl-content-hub-loader__fetch';
+import { emblContentHub } from 'embl-content-hub-loader/embl-content-hub-loader';
+emblContentHub();
+
+import { emblBreadcrumbs } from 'embl-breadcrumbs-lookup/embl-breadcrumbs-lookup';
+emblBreadcrumbs();
+
+import { emblContentMetaProperties_Read } from 'embl-content-meta-properties/embl-content-meta-properties';
+// No default invokation
--- a/components/vf-core-components
+++ b/components/vf-core-components
+../node_modules/@visual-framework
\ No newline at end of file
--- a/components/vf-design-tokens/core.palette.alias.yml
+++ b/components/vf-design-tokens/core.palette.alias.yml
+aliases:
+  # Blacks, Whites, and Grays
+  # --------------------------------------
+  color-white: 'rgb(255,255,255)'
+  color-off-white: 'rgb(250,250,250)'
+  color-black: 'rgb(40,45,35)'
+  color-gray: 'rgb(112,115,114)'
+  color-gray-bright: 'rgb(185,179,168)'
+  color-gray-dark: 'rgb(84,88,90)'
+
+  # Colours
+  # --------------------------------------
+  color-green: 'rgb(0,159,77)'
+  color-green-dark: 'rgb(0,123,83)'
+  color-green-bright: 'rgb(108,194,74)'
+
+  color-light-green: 'rgb(168,199,0)'
+  color-light-green-dark: 'rgb(132,189,0)'
+  color-light-green-bright: 'rgb(226,232,104)'
+
+  color-ruby: 'rgb(228,0,70)'
+  color-ruby-dark: 'rgb(166,9,61)'
+  color-ruby-bright: 'rgb(229,143,158)'
+
+  color-yellow: 'rgb(255,205,0)'
+  color-yellow-dark: 'rgb(255,184,28)'
+  color-yellow-bright: 'rgb(253,215,87)'
+
+  color-purple: 'rgb(130,70,175)'
+  color-purple-bright: 'rgb(203,163,216)'
+  color-purple-dark: 'rgb(86,61,130)'
+
+  color-amber: 'rgb(255,163,0)'
+  color-amber-bright: 'rgb(190,84,0)'
+  color-amber-dark: 'rgb(239,192,110)'
+
+  color-azure: 'rgb(40,122,226)'
+  color-azure-bright: 'rgb(139,184,232)'
+  color-azure-dark: 'rgb(0,61,165)'
+
+  # VF Core Colours
+  # --------------------------------------
+
+  color-ui-black: 'rgb(0,0,0)'
+  color-ui-gray: 'rgb(243,243,243)'
+  color-ui-gray-light: 'rgb(216,216,216)'
+  color-ui-yellow: 'rgb(255,250,220)'
+  color-ui-red: 'rgb(211,47,47)'
+
+  # Decisions
+  # --------------------------------------
--- a/components/vf-design-tokens/maps/vf-colors.yml
+++ b/components/vf-design-tokens/maps/vf-colors.yml
+imports:
+  - "../core.palette.alias.yml"
+
+props:
+  - name: vf-color--white
+    value: '{!color-white}'
+    meta:
+      friendlyName: White
+  - name: vf-color--off-white
+    value: '{!color-off-white}'
+    meta:
+      friendlyName: Off White
+  - name: vf-color--black
+    value: '{!color-black}'
+    meta:
+      friendlyName: Black
+  - name: vf-color--gray
+    value: '{!color-gray}'
+    meta:
+      friendlyName: Gray
+  - name: vf-color--gray-bright
+    value: '{!color-gray-bright}'
+    meta:
+      friendlyName: Bright Gray
+  - name: vf-color--gray-dark
+    value: '{!color-gray-dark}'
+    meta:
+      friendlyName: Dark Gray
+  - name: vf-color--green
+    value: '{!color-green}'
+    meta:
+      friendlyName: Green
+  - name: vf-color--green-bright
+    value: '{!color-green-bright}'
+    meta:
+      friendlyName: Bright Green
+  - name: vf-color--green-dark
+    value: '{!color-green-dark}'
+    meta:
+      friendlyName: Dark Green
+  - name: vf-color--light-green
+    value: '{!color-light-green}'
+    meta:
+      friendlyName: Light Green
+  - name: vf-color--light-green-bright
+    value: '{!color-light-green-bright}'
+    meta:
+      friendlyName: Bright Light Green
+  - name: vf-color--light-green-dark
+    value: '{!color-light-green-dark}'
+    meta:
+      friendlyName: Dark Light Green
+  - name: vf-color--ruby
+    value: '{!color-ruby}'
+    meta:
+      friendlyName: Ruby
+  - name: vf-color--ruby-bright
+    value: '{!color-ruby-bright}'
+    meta:
+      friendlyName: Bright Ruby
+  - name: vf-color--ruby-dark
+    value: '{!color-ruby-dark}'
+    meta:
+      friendlyName: Dark Ruby
+  - name: vf-color--yellow
+    value: '{!color-yellow}'
+    meta:
+      friendlyName: Yellow
+  - name: vf-color--yellow-bright
+    value: '{!color-yellow-bright}'
+    meta:
+      friendlyName: Bright Yellow
+  - name: vf-color--yellow-dark
+    value: '{!color-yellow-dark}'
+    meta:
+      friendlyName: Dark Yellow
+  - name: vf-color--purple
+    value: '{!color-purple}'
+    meta:
+      friendlyName: Purple
+  - name: vf-color--purple-bright
+    value: '{!color-purple-bright}'
+    meta:
+      friendlyName: Bright Purple
+  - name: vf-color--purple-dark
+    value: '{!color-purple-dark}'
+    meta:
+      friendlyName: Dark Purple
+  - name: vf-color--amber
+    value: '{!color-amber}'
+    meta:
+      friendlyName: Amber
+  - name: vf-color--amber-bright
+    value: '{!color-amber-bright}'
+    meta:
+      friendlyName: Bright Amber
+  - name: vf-color--amber-dark
+    value: '{!color-amber-dark}'
+    meta:
+      friendlyName: Dark Amber
+  - name: vf-color--azure
+    value: '{!color-azure}'
+    meta:
+      friendlyName: Azure
+  - name: vf-color--azure-bright
+    value: '{!color-azure-bright}'
+    meta:
+      friendlyName: Bright Azure
+  - name: vf-color--azure-dark
+    value: '{!color-azure-dark}'
+    meta:
+      friendlyName: Dark Azure
+
+
+global:
+  type: color
+  category: color
--- a/components/vf-design-tokens/maps/vf-spacing.yml
+++ b/components/vf-design-tokens/maps/vf-spacing.yml
+props:
+  - name: vf-spacing--0
+    value: 0
+  - name: vf-spacing--xs
+    value: 4px
+  - name: vf-spacing--s
+    value: 8px
+  - name: vf-spacing--r
+    value: 16px
+  - name: vf-spacing--l
+    value: 20px
+  - name: vf-spacing--xl
+    value: 24px
+  - name: vf-spacing--xxl
+    value: 32px
+global:
+  type: number
+  category: spacing
--- a/components/vf-design-tokens/maps/vf-ui-colors.yml
+++ b/components/vf-design-tokens/maps/vf-ui-colors.yml
+imports:
+  - "../core.palette.alias.yml"
+
+props:
+  - name: vf-ui-color--black
+    value: '{!color-ui-black}'
+    meta:
+      friendlyName: UI Black
+  - name: vf-ui-color--gray
+    value: '{!color-ui-gray}'
+    meta:
+      friendlyName: UI Grey
+  - name: vf-ui-color--gray-light
+    value: '{!color-ui-gray-light}'
+    meta:
+      friendlyName: UI Grey light
+  - name: vf-ui-color--yellow
+    value: '{!color-ui-yellow}'
+    meta:
+      friendlyName: UI Yellow
+  - name: vf-ui-color--red
+    value: '{!color-ui-red}'
+    meta:
+      friendlyName: UI Red
+
+global:
+  type: color
+  category: color
--- a/components/vf-design-tokens/typographic-scales/vf-font--monospace.yml
+++ b/components/vf-design-tokens/typographic-scales/vf-font--monospace.yml
+props:
+  - name: button--r
+    value:
+      font-size: 16px
+      font-weight: 700
+      line-height: 1
+  - name: body--xs
+    value:
+      font-size: 11px
+      font-weight: 600
+      line-height: 1.5
+  - name: body--s
+    value:
+      font-size: 14px
+      font-weight: 400
+      line-height: 1.57
+  - name: body--s-alt
+    value: