Docs/patterns vs components (#326)

* Add "pattern" and "component" guidance

* Swap a selection of "pattern" for "component"

* Missed a couple files to commit

* Somehow vf-colors.map.scss was deleted

* Referecne `components/vf-core-components`

This doesn't affect vf-core particuarly, but will affect vf-child-template

* Fix a build error/warning

Not sure when this started happening; was erroring but continuing:

> ⚑ Exported 351 of 910 items
> ✘ Failed to export url /components/detail/vf-button--sizes - (/Users/khawkins/Documents/GitHub/vf-core/tools/vf-frctl-theme/views/pages/components/detail.njk)
>   Template render error: (/Users/khawkins/Documents/GitHub/vf-core/tools/vf-frctl-theme/views/partials/pen/preview.njk)
>   Error: Unable to call `entity["variants"]`, which is undefined or falsey

.github/ISSUE_TEMPLATE/new-pattern-request.md → .github/ISSUE_TEMPLATE/new-component-request.md

 ---
-name: New pattern request
+name: New component request
 about: Need a new news list, gallery, search widget?
 
 ---
@@ -9,34 +9,34 @@ Add a one sentence summary of what it is you need it to do.
 
 ## Standard questions
 
-- In a few words, what does this pattern look like?
+- In a few words, what does this component look like?
   [An image gallery with big impact]
 
-- In a few words, what does this pattern do?
+- In a few words, what does this component do?
   [Allows users to browse images, possibly clicking on links]
 
-- Would a rebrand change the structure or layout of this pattern?
+- Would a rebrand change the structure or layout of this component?
   [Possibly we could move from one main image to a grid of images]
 
-- Can other websites use this pattern? Or is it only useful in your organisation or website? 
+- Can other websites use this component? Or is it only useful in your organisation or website?
   [Others could use]
 
 - Do you have any designs or concepts?
   [yes, they're attached]
 
-- Have you done any user testing already? 
+- Have you done any user testing already?
   [no]
 
-- How often do you expect to make use of this pattern?
+- How often do you expect to make use of this component?
   [fairly often, not on every page, but we expect many EMBL teams and some news articles could use this]
 
-- Can you list out major elements in this pattern?
+- Can you list out major elements in this component?
   [main image, caption+links, credit+link, thumbnails, lightbox and navigation elements]
 
-- Will all elements of this pattern be used every time?
+- Will all elements of this component be used every time?
   [Generally yes]
 
-- Does this pattern contain other patterns?
+- Does this component contain other components?
   [vf-credit, vf-caption]
 
 ## Any further thoughts?

README.md

@@ -4,26 +4,26 @@
 
 **👋 Downloading or cloning this repo? 🛑**
 
-Usually you don't need this whole repo. Only clone this repo if you wish to further develop the Visual Framework core or contribute a global pattern, otherwise: [see the "Get Started" section](#get-started).
+Usually you don't need this whole repo. Only clone this repo if you wish to further develop the Visual Framework core or contribute a global component, otherwise: [see the "Get Started" section](#get-started).
 
 ---
 
 ## 🎫 What is this?
 
-The Visual Framework (VF) is designed with the needs of life science websites and services. It goes beyond guidance for tables, graphs, data-heavy typography and focuses on being sane defaults and implements its CSS in a way that won't interfere with your existing patterns that use Bootstrap, Angular, or something else.
+The Visual Framework (VF) is designed with the needs of life science websites and services. It goes beyond guidance for tables, graphs, data-heavy typography and focuses on being sane defaults and implements its CSS in a way that won't interfere with your existing components that use Bootstrap, Angular, or something else.
 
 The VF 2.0 enables consistency and portability, it is extensible, modular and overridable; here to help and not get in the way.
 
 - **Demo:**  
-[Online pattern library](https://visual-framework.github.io/vf-core)
+[Online component library](https://visual-framework.github.io/vf-core)
   §   [Changelog](https://github.com/visual-framework/vf-core/blob/develop/docs/changelog/index.md)
 - **Philosophy:**  
 [Aims of the VF 2.0](https://blogs.embl.org/communications/2018/09/12/faster-scientific-websites-through-reusability/)
   §   [Principles and Methods](https://dev.beta.embl.org/guidelines/visual-framework/principles-methods/)
 - **Help out:**  
 [Contributing guide](https://github.com/visual-framework/vf-core/blob/develop/CONTRIBUTING.md)
-  §   [Request a pattern](https://github.com/visual-framework/vf-core/issues/new?template=new-pattern-request.md)
-  §   [Make a new pattern](https://visual-framework.github.io/vf-core/docs/guidelines.html)
+  §   [Request a component](https://github.com/visual-framework/vf-core/issues/new?template=new-component-request.md)
+  §   [Make a new component](https://visual-framework.github.io/vf-core/docs/guidelines.html)
 - **Make it your own:**  
 [Clone the child theme template](https://github.com/khawkins98/vf-child-playground)
 
@@ -40,7 +40,7 @@ Watch the [releases](https://github.com/visual-framework/vf-core/releases) and l
 The Visual Framework address three major needs:
 
 1. ⚗️🌳 Life sciences: We address common needs for [life science websites](https://www.ebi.ac.uk/services). The Visual Framework can be easily tailored to niche needs, but out of the box it's pleasant looking, but dry and serious to support focus, clarity and data.
-1. 🏰 Share only what you need to: the Visual Framework is designed to work with other frameworks (both CSS, like Bootstrap, and JS, like React or Angular). This allows common patterns (and brand design) to be shared between sites without cross-contaminating into another framework. We mainly achieve this by:
+1. 🏰 Share only what you need to: the Visual Framework is designed to work with other frameworks (both CSS, like Bootstrap, and JS, like React or Angular). This allows common components (and brand design) to be shared between sites without cross-contaminating into another framework. We mainly achieve this by:
    - Name spacing all selectors for CSS or JS (`vf-*`)
    - No CSS styling on HTML elements. We only attached to name spaced classes, that is:
       - ✅ `.vf-button {}`
@@ -48,14 +48,14 @@ The Visual Framework address three major needs:
       - 🚫 `button {}`
       - 🚫🙊🙉 `div.button {}`
    - 🖕 This necessarily requires a bit more class writing, but it ensures the Visual Framework won't break existing code.
-   - BYOJS: Bring your own JavaScript. We've included only a minimal amount of JS in patterns and it's fully optional (just remove [the JavaScript selectors](https://github.com/visual-framework/vf-core/issues/115#issuecomment-455524131); i.e. `data-vf-js-tabs`). So if you'd rather use Angular or Bootstrap for your tabs, the Visual Framework won't get in the way.
+   - BYOJS: Bring your own JavaScript. We've included only a minimal amount of JS in components and it's fully optional (just remove [the JavaScript selectors](https://github.com/visual-framework/vf-core/issues/115#issuecomment-455524131); i.e. `data-vf-js-tabs`). So if you'd rather use Angular or Bootstrap for your tabs, the Visual Framework won't get in the way.
 1. 🌕🌜 Use a little or a lot:
    - A lot: The framework (and [child theme template](https://github.com/khawkins98/vf-child-playground)) will generate a monolithic `styles.css` and `script.js` that can be easily included, a la Bootstrap.
-   - A little: Instead you can include `.scss` partials or per-pattern `.css` and `.js` files. You can do this through making a [child theme](https://github.com/khawkins98/vf-child-playground) or [npm installs](https://www.npmjs.com/org/visual-framework).
+   - A little: Instead you can include `.scss` partials or per-component `.css` and `.js` files. You can do this through making a [child theme](https://github.com/khawkins98/vf-child-playground) or [npm installs](https://www.npmjs.com/org/visual-framework).
 
 ## 🚧 ✍ Developing, contributing
 
-### How do I make my own theme or customise patterns?
+### How do I make my own theme or customise components?
 
 <a id="get-started"></a> [See the contributing guide](https://github.com/visual-framework/vf-core/blob/develop/docs)
 

components/_previews/_preview--containers.njk

@@ -18,7 +18,7 @@
 </head>
 <body class="">
   <div class="vf-grid">
-    <div class="vf-pattern__container">
+    <div class="vf-component__container">
       {{ yield | safe }}
     </div>
   </div>

components/_previews/_preview--grids.njk

@@ -18,7 +18,7 @@
 </head>
 <body class="">
   <div class="vf-grid">
-    <div class="vf-pattern__container">
+    <div class="vf-component__container">
       {{ yield | safe }}
     </div>
   </div>

components/_previews/_preview.njk

@@ -18,7 +18,7 @@
 </head>
 <body class="vf-body">
   <div class="vf-grid">
-    <div class="vf-pattern__container">
+    <div class="vf-component__container">
       {{ yield | safe }}
     </div>
   </div>

components/embl-boilerplate-page/embl-boilerplate-page.config.yml

@@ -2,4 +2,4 @@ title: EMBL Boilerplate page
 label: EMBL Boilerplate
 preview: '@preview--fullhtml'
 context:
-  pattern-type: embl-boilerplate
+  component-type: embl-boilerplate

components/embl-breadcrumbs-lookup/README.md

-# EMBL Breadcrumbs Lookup Pattern
+# EMBL Breadcrumbs Lookup Component
 
 This requires and builds atop the `vf-breadcrumbs` and
-`embl-content-meta-properties` patterns for EMBL pages.
+`embl-content-meta-properties` components for EMBL pages.
 
-This pattern reads meta properties and then performs a lookup to the EMBL contentHub.
+This component reads meta properties and then performs a lookup to the EMBL contentHub.
 Returned are appropriate primary and secondary breadcrumbs.

components/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.config.yml

@@ -3,7 +3,7 @@ label: EMBL Breadcrumbs
 preview: '@preview--blocks'
 status: alpha
 context:
-  pattern-type: embl-block
+  component-type: embl-block
   meta-who: Strategy and Communications
   meta-what: Visual Framework
   meta-where: EMBL

components/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.js

@@ -233,7 +233,7 @@ function emblBreadcrumbAppend(breadcrumbTarget,termName,facet,type) {
 function emblBreadcrumbs() {
   // We start the breadcrumbs by first getting the EMBL taxonomy.
   // todo: some sort of caching here, perhaps we write to local storage.
-  // todo: abstract this out into its own `embl-taxonomy` pattern?
+  // todo: abstract this out into its own `embl-taxonomy` component?
   emblGetTaxonomy().then(function(response) {
     emblTaxonomy = JSON.parse(response);
 

components/embl-breadcrumbs-lookup/index.scss

@@ -6,6 +6,6 @@
 @import 'vf-functions';
 @import 'vf-mixins';
 
-// pattern specific styles
+// component specific styles
 
 @import 'embl-breadcrumbs-lookup.scss';

components/embl-conditional-edit/README.md

-# EMBL Conditional Edit Links pattern
+# EMBL Conditional Edit Links component
 
 [![npm version](https://badge.fury.io/js/%40visual-framework%2Fembl-conditional-edit.svg)](https://badge.fury.io/js/%40visual-framework%2Fembl-conditional-edit)
 

components/embl-conditional-edit/embl-conditional-edit.config.yml

-title: EMBL Conditional Edit Links pattern
+title: EMBL Conditional Edit Links component
 label: EMBL Conditional Edit
 context:
-  pattern-type: embl-element
+  component-type: embl-element

components/embl-conditional-edit/index.scss

@@ -6,7 +6,7 @@
 @import 'vf-functions';
 @import 'vf-mixins';
 
-// pattern specific styles
+// component specific styles
 @import 'embl-conditional-edit.scss';
 
-// pattern variant styles
+// component variant styles

components/embl-content-hub-loader/README.md

-# EMBL ContentHub Loader Pattern
+# EMBL ContentHub Loader component
 
 [![npm version](https://badge.fury.io/js/%40visual-framework%2Fembl-content-hub-loader.svg)](https://badge.fury.io/js/%40visual-framework%2Fembl-content-hub-loader)
 
-Use this pattern to remotely load markup and content from the central EMBL ContentHub, this particular pattern allows reuse and distribution of content ranging articles to navigation elements (such as a global footer).
+Use this component to remotely load markup and content from the central EMBL ContentHub, this particular component allows reuse and distribution of content ranging articles to navigation elements (such as a global footer).
 
 Currently this is done as HTML imports (see the code example) + some JS. In the future other methods will be support (such as JSON).
 

components/embl-content-hub-loader/embl-content-hub-loader.config.yml

-title: EMBL ContentHub Loader pattern
+title: EMBL ContentHub Loader component
 label: EMBL ContentHub Loader
 status: beta
 context:
-  pattern-type: embl-container
+  component-type: embl-container

components/embl-content-hub-loader/embl-content-hub-loader__fetch.js

@@ -131,7 +131,7 @@ function emblContentHubFetch() {
     emblContentHubAssignClasses(targetLink,position);
     emblContentHubUpdateDatesFormat(position);
 
-    // run JS for some patterns on content, if they exist
+    // run JS for some components on content, if they exist
     if (typeof(vfBanner) === 'function') {
       vfBanner(targetLocation);
     }

components/embl-content-hub-loader/index.scss

@@ -6,9 +6,9 @@
 @import 'vf-functions';
 @import 'vf-mixins';
 
-// pattern specific styles
+// component specific styles
 
 @import 'embl-content-hub-loader.variables.scss';
 @import 'embl-content-hub-loader.scss';
 
-// pattern variant styles
+// component variant styles

components/embl-content-meta-properties/embl-content-meta-properties.config.yml

@@ -3,7 +3,7 @@ label: EMBL Content meta properties
 preview: '@preview--blocks'
 status: alpha
 context:
-  pattern-type: embl-block
+  component-type: embl-block
   meta_who: all
   meta_what: services, websites
   meta_where: EMBL

components/embl-content-meta-properties/embl-content-meta-properties.js

 // embl-content-meta-properties
 
-// In addition to being queried by other patterns' JS, this could
+// In addition to being queried by other components' JS, this could
 // also add classes to a page to affect the overall look of a page.
 
 

components/embl-content-meta-properties/index.scss

@@ -6,6 +6,6 @@
 @import 'vf-functions';
 @import 'vf-mixins';
 
-// pattern specific styles
+// component specific styles
 
 @import 'embl-content-meta-properties.scss';