the one that updates the layout components for eleventy and adds the …

…cluster layout (#1130) * adds new cluster layout component * updates vf-stack component to make use of extends * adds vf-cluster to component roll-up * updates embl grid so we can use extends * updates vfl grid so we can use extends * adds vf-body to body * updates stack to allow for older variable * updates the changelog * updates cluster component * gets vf-grid ready for eleventy integration * gets embl-grid ready for eleventy integration * adds variant CSS option * updates readme to add some docs * updates to batter naming convention of spacing variants * cha-cha-cha-changelog Co-authored-by: Stuart Robson <st@Stuarts-MacBook-Pro.local>
visual-framework · Oct 19, 2020 · a1ba072 · a1ba072
1 parent d50a570
commit a1ba072
Show file tree

Hide file tree

Showing 43 changed files with 851 additions and 106 deletions.
diff --git a/components/_previews/_preview--nogrid.njk b/components/_previews/_preview--nogrid.njk
@@ -17,7 +17,7 @@
   {% endif %}
   <style>body { margin: 0; }</style>
 </head>
-<body>
+<body class="vf-body">
   {{ yield | safe }}
   <script src="{{ '/scripts/scripts.js' | path }}"></script>
 </body>

diff --git a/components/embl-grid/CHANGELOG.md b/components/embl-grid/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 2.1.0
+
+- makes the layout something that can now use 'extends' within nunjucks
+
 ### 2.0.4
 
 - fixes issue with `auto` and `1fr` doing the opposite with the sidebar.

diff --git a/components/embl-grid/embl-grid--hairline.njk b/components/embl-grid/embl-grid--hairline.njk
@@ -0,0 +1,18 @@
+{% if context %}
+  {% set embl_grid__type = context.embl_grid__type %}
+  {% set embl_grid__hairline = context.embl_grid__hairline %}
+  {% set embl_grid__modifier = context.embl_grid__modifier %}
+{% endif %}
+
+<div class="embl-grid
+  {%- if embl_grid__type == "centered" %} embl-grid--has-centered-content
+  {%- elif embl_grid__type == "sidebar" %} embl-grid--has-sidebar{%- endif -%}
+  {%- if embl_grid__hairline %} embl-grid-has-sidebar--hairline{%- endif -%}
+  {%- if embl_grid__modifier %} | {{embl_grid__modifier}}{%- endif -%}
+">
+  {% render '@vf-section-header' %}
+  <div class="vf-content">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugiat delectus dolore molestias rerum? Dolores doloribus impedit quasi provident odit perferendis vitae incidunt, mollitia repellendus a alias necessitatibus, molestiae! Nesciunt.</p>
+  </div>
+  {% render '@vf-box--normal-primary' %}
+</div>
diff --git a/components/embl-grid/embl-grid--has-centered-content.njk b/components/embl-grid/embl-grid--has-centered-content.njk
@@ -0,0 +1,18 @@
+{% if context %}
+  {% set embl_grid__type = context.embl_grid__type %}
+  {% set embl_grid__hairline = context.embl_grid__hairline %}
+  {% set embl_grid__modifier = context.embl_grid__modifier %}
+{% endif %}
+
+<div class="embl-grid
+  {%- if embl_grid__type == "centered" %} embl-grid--has-centered-content
+  {%- elif embl_grid__type == "sidebar" %} embl-grid--has-sidebar{%- endif -%}
+  {%- if embl_grid__hairline %} embl-grid-has-sidebar--hairline{%- endif -%}
+  {%- if embl_grid__modifier %} | {{embl_grid__modifier}}{%- endif -%}
+">
+  <div></div>
+  <div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugiat delectus dolore molestias rerum? Dolores doloribus impedit quasi provident odit perferendis vitae incidunt, mollitia repellendus a alias necessitatibus, molestiae! Nesciunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolor odit vel ipsa consequatur sunt, esse sapiente commodi harum velit asperiores quasi nostrum sint dolorem blanditiis eum magnam voluptatibus aliquam.</p>
+  </div>
+  <div></div>
+</div>
diff --git a/components/embl-grid/embl-grid--has-sidebar.njk b/components/embl-grid/embl-grid--has-sidebar.njk
@@ -0,0 +1,18 @@
+{% if context %}
+  {% set embl_grid__type = context.embl_grid__type %}
+  {% set embl_grid__hairline = context.embl_grid__hairline %}
+  {% set embl_grid__modifier = context.embl_grid__modifier %}
+{% endif %}
+
+<div class="embl-grid
+  {%- if embl_grid__type == "centered" %} embl-grid--has-centered-content
+  {%- elif embl_grid__type == "sidebar" %} embl-grid--has-sidebar{%- endif -%}
+  {%- if embl_grid__hairline %} embl-grid-has-sidebar--hairline{%- endif -%}
+  {%- if embl_grid__modifier %} | {{embl_grid__modifier}}{%- endif -%}
+">
+  {% render '@vf-section-header' %}
+  <div class="vf-content">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugiat delectus dolore molestias rerum? Dolores doloribus impedit quasi provident odit perferendis vitae incidunt, mollitia repellendus a alias necessitatibus, molestiae! Nesciunt.</p>
+  </div>
+  {% render '@vf-box--normal-primary' %}
+</div>
diff --git a/components/embl-grid/embl-grid.config.yml b/components/embl-grid/embl-grid.config.yml
@@ -4,3 +4,20 @@ preview: '@preview--nogrid'
 status: live
 context:
   component-type: embl-grid
+
+variants:
+  - name: default
+    hidden: true
+  - name: has-centered-content
+    label: Centered
+    context:
+      embl_grid__type: centered
+  - name: has-sidebar
+    label: Sidebar
+    context:
+      embl_grid__type: sidebar
+  - name: hairline
+    label: Hairline
+    context:
+      embl_grid__type: sidebar
+      embl_grid__hairline: true
diff --git a/components/embl-grid/embl-grid.njk b/components/embl-grid/embl-grid.njk
@@ -1,33 +1,15 @@
-<div class="vf-body">
-  <div class="embl-grid">
-    <div></div>
-    <div></div>
-  </div>
-  <div class="embl-grid embl-grid--has-sidebar">
-    <div></div>
-    <div>
-      <p style="color: var(--vf-ui-color--white);">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum autem hic accusamus suscipit id, et dolorum officiis, cum possimus, enim amet. Officiis sunt eum cum qui, impedit, magni quasi esse.</p>
-    </div>
-    <div></div>
-  </div>
-  <div class="embl-grid embl-grid--has-sidebar embl-grid-has-sidebar--hairline">
-    <div></div>
-    <div>
-      <p style="color: var(--vf-ui-color--white);">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum autem hic accusamus suscipit id, et dolorum officiis, cum possimus, enim amet. Officiis sunt eum cum qui, impedit, magni quasi esse.</p>
-    </div>
-    <div></div>
-  </div>
-  <div class="embl-grid embl-grid--has-centered-content">
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-</div>
+{% if context %}
+  {% set embl_grid__type = context.embl_grid__type %}
+  {% set embl_grid__hairline = context.embl_grid__hairline %}
+  {% set embl_grid__modifier = context.embl_grid__modifier %}
+{% endif %}
 
-<style>
-.embl-grid > div {
-  /* For illustrative use on component demo page */
-  background-color: var(--vf-color--blue);
-  min-height: 5em;
-}
-</style>
+<div class="embl-grid
+  {%- if embl_grid__type == "centered" %} embl-grid--has-centered-content
+  {%- elif embl_grid__type == "sidebar" %} embl-grid--has-sidebar{%- endif -%}
+  {%- if embl_grid__hairline %} embl-grid-has-sidebar--hairline{%- endif -%}
+  {%- if embl_grid__modifier %} | {{embl_grid__modifier}}{%- endif -%}
+">
+  {% block embl_grid__content %}
+  {% endblock %}
+</div>
diff --git a/components/vf-cluster/.npmignore b/components/vf-cluster/.npmignore
@@ -0,0 +1,4 @@
+bin
+.github
+.travis.yml
+node_modules
diff --git a/components/vf-cluster/CHANGELOG.md b/components/vf-cluster/CHANGELOG.md
@@ -0,0 +1,3 @@
+### 0.0.1
+
+- Initital launch of the component. It is useable but the documentation needs refining.
diff --git a/components/vf-cluster/README.md b/components/vf-cluster/README.md
@@ -0,0 +1,118 @@
+# The Cluster Layout Component
+
+[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-cluster.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-cluster)
+
+The `vf-cluster` is a layout component that can be used when we need to give various content items (of indeterment sizes) an equaly spaced layout on the page that can respond to the browsers viewport width.
+
+The main use case for `vf-cluster` is to be mainly used when something the available grid systems are too 'rigid' because of the different widths of the content.
+
+
+## Installation
+
+This repository is distributed with [npm](https://www.npmjs.com/). After [installing npm](https://www.npmjs.com/get-npm) and [yarn](https://classic.yarnpkg.com/en/docs/install), you can install `vf-cluster` with this command.
+
+```
+$ yarn add --dev @visual-framework/vf-cluster
+```
+
+### Sass/CSS
+
+The source files included are written in `scss` syntax of [Sass](https://sass-lang.com/). You can point your sass `include-path` at your `node_modules` directory and import it like this.
+
+```
+@import "@visual-framework/vf-cluster/index.scss";
+```
+
+_Make sure you import Sass requirements along with the modules._
+
+## Development
+
+### Integration
+
+#### Eleventy
+
+To use the `vf-cluster` component we make use of the `@extends` directive from [Nunjucks](https://mozilla.github.io/nunjucks/templating.html#extends) to 'wrap' around the content we want this layout component to render.
+
+##### Requirements
+
+To use the `vf-cluster` component you must be using [vX.X.X](https://github.com/visual-framework/vf-eleventy/releases/tag/v2.0.0-alpha.18) of `vf-eleventy`.
+
+##### Code
+
+In the `.njk` file you are wanting to use the `vf-cluster` you must include the following code to 'extend' the file with the `vf-cluster` component.
+
+{% raw %}
+```html
+{% extends layout.cluster %}
+```
+{% endraw %}
+
+<br/>
+
+You will then need to create a 'block' to put the relevant content inside so that it renders within the `vf-cluster` layout when rendered.
+<br/>
+
+{% raw %}
+```html
+{% block cluster_content %}
+...
+{% endblock %}
+```
+{% endraw %}
+
+<br/>
+
+To make use of `.yml` to render the `vf-cluster` to the variant you wish to use, you will have to 'set' the context in the `.njk` file.
+<br/>
+
+{% raw %}
+```html
+{% set context = cluster1 %}
+```
+{% endraw %}
+
+<small>note: `cluster1` is an example, please pick your own semantic, readable context names</small>
+<br>
+With these set you can then add the relevant content as needed.
+
+#### WordPress
+
+
+##### Requirements
+
+To use the `vf-cluster` component you must be using [vX.X.X](https://github.com/visual-framework/vf-wp/releases/tag/v1.0.0-beta.24) of `vf-wp`.
+
+
+
+### Variants
+
+There are four spacing variants and three alignment variants available for this component as well as an option to define the width of the `vf-cluster`s children.
+
+| custom property       | options                       | default     |
+| -------------- | ----------------------------- | ----------- |
+| spacing        | small, medium, large          | none        |
+| alignment      | start, center, end            | none        |
+
+#### Spacing Variants
+
+There are three spacing variants that determina the inline and block spacing between items of content inside of `vf-cluster`.
+
+#### Alignment Variants
+
+This variant determines where the child components align in the vertical space available. When setting this in your `.yml` file it will add the relevant CSS value as the inline CSS custom property `-vf-cluster-alignment`.
+
+### CSS Custom Properties
+
+| custom property          | options                                                 | example     |
+| ------------------------ | ------------------------------------------------------- | ----------- |
+| --vf-cluster-alignment   | could be used for a different vertical alignment value  | `baseline`  |
+| --vf-cluster-margin      | can take a CSS size value to overide the defualt        | `31px`      |
+| --vf-cluster__item--flex | can take a CSS flex value to determine the child widths | `210px 1 0` |
+
+
+
+## Help
+
+- [Read the Visual Framework troubleshooting](https://visual-framework.github.io/vf-welcome/troubleshooting/)
+- [Open a ticket](https://github.com/visual-framework/vf-core/issues)
+- [Chat on Slack](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ)
diff --git a/components/vf-cluster/index.scss b/components/vf-cluster/index.scss
@@ -0,0 +1,15 @@
+// setup files required
+
+// sass-lint:disable clean-import-paths
+@import 'vf-global-variables';
+@import 'vf-variables';
+@import 'vf-functions';
+@import 'vf-mixins';
+
+// component specific styles
+
+@import 'vf-cluster.variables.scss';
+@import 'vf-cluster.scss';
+
+// component variant styles
+// @import 'vf-cluster--variant.scss';
diff --git a/components/vf-cluster/package.json b/components/vf-cluster/package.json
@@ -0,0 +1,23 @@
+{
+  "version": "1.0.0-alpha.0",
+  "name": "@visual-framework/vf-cluster",
+  "description": "vf-cluster component",
+  "homepage": "",
+  "author": "VF",
+  "license": "Apache 2.0",
+  "style": "vf-cluster.css",
+  "sass": "index.scss",
+  "main": "build/index.js",
+  "test": "echo \"Error: no test specified\" && exit 1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repo": "https://github.com/visual-framework/vf-core/tree/develop/components/vf-cluster",
+  "bugs": {
+    "url": "https://github.com/visual-framework/vf-core/issues"
+  },
+  "keywords": [
+    "fractal",
+    "component"
+  ]
+}
diff --git a/components/vf-cluster/vf-cluster--custom-alignment-center.njk b/components/vf-cluster/vf-cluster--custom-alignment-center.njk
@@ -0,0 +1,25 @@
+<div class="vf-cluster
+  {%- if cluster__spacing %} vf-cluster--{{cluster__spacing}}{%- endif -%}"
+  {%- if cluster_custom_alignment or cluster_custom_spacing or cluster_child_flex %} style="
+    {%- if cluster_custom_alignment %}--vf-cluster-alignment: {{cluster_custom_alignment}};{% endif -%}
+    {%- if cluster_custom_spacing %} --vf-cluster-margin: {{cluster_custom_spacing}};{% endif -%}
+    {%- if cluster_child_flex %} --vf-cluster__item--flex: {{cluster_child_flex}};{% endif -%}
+  {%- endif -%}">
+
+  <div class="vf-cluster__inner">
+
+    <div class="vf-box vf-box-theme--primary vf-box--normal">
+      <h3 class="vf-box__heading">Did you know?</h3>
+      <p class="vf-box__text">This is some more content that would be in the box. These examples also have make use of the <code>--vf-cluster__item--width</code> to minimise the width so you can see the differences in alignment.</p>
+    </div>
+    <div class="vf-box vf-box-theme--primary vf-box--normal">
+      <h3 class="vf-box__heading">Did you know?</h3>
+      <p class="vf-box__text">This is even more content that would be in the box. So much information it spans multiple lines.</p>
+    </div>
+    <div class="vf-box vf-box-theme--primary vf-box--normal">
+      <h3 class="vf-box__heading">Did you know?</h3>
+      <p class="vf-box__text">This is some more content that would be in the box.</p>
+    </div>
+
+  </div>
+</div>
diff --git a/components/vf-cluster/vf-cluster--custom-alignment-flex-end.njk b/components/vf-cluster/vf-cluster--custom-alignment-flex-end.njk
@@ -0,0 +1,25 @@
+<div class="vf-cluster
+  {%- if cluster__spacing %} vf-cluster--{{cluster__spacing}}{%- endif -%}"
+  {%- if cluster_custom_alignment or cluster_custom_spacing or cluster_child_flex %} style="
+    {%- if cluster_custom_alignment %}--vf-cluster-alignment: {{cluster_custom_alignment}};{% endif -%}
+    {%- if cluster_custom_spacing %} --vf-cluster-margin: {{cluster_custom_spacing}};{% endif -%}
+    {%- if cluster_child_flex %} --vf-cluster__item--flex: {{cluster_child_flex}};{% endif -%}
+  {%- endif -%}">
+
+  <div class="vf-cluster__inner">
+
+    <div class="vf-box vf-box-theme--primary vf-box--normal">
+      <h3 class="vf-box__heading">Did you know?</h3>
+      <p class="vf-box__text">This is some more content that would be in the box. These examples also have make use of the <code>--vf-cluster__item--width</code> to minimise the width so you can see the differences in alignment.</p>
+    </div>
+    <div class="vf-box vf-box-theme--primary vf-box--normal">
+      <h3 class="vf-box__heading">Did you know?</h3>
+      <p class="vf-box__text">This is even more content that would be in the box. So much information it spans multiple lines.</p>
+    </div>
+    <div class="vf-box vf-box-theme--primary vf-box--normal">
+      <h3 class="vf-box__heading">Did you know?</h3>
+      <p class="vf-box__text">This is some more content that would be in the box.</p>
+    </div>
+
+  </div>
+</div>
diff --git a/components/vf-cluster/vf-cluster--custom-alignment-flex-start.njk b/components/vf-cluster/vf-cluster--custom-alignment-flex-start.njk
@@ -0,0 +1,25 @@
+<div class="vf-cluster
+  {%- if cluster__spacing %} vf-cluster--{{cluster__spacing}}{%- endif -%}"
+  {%- if cluster_custom_alignment or cluster_custom_spacing or cluster_child_flex %} style="
+    {%- if cluster_custom_alignment %}--vf-cluster-alignment: {{cluster_custom_alignment}};{% endif -%}
+    {%- if cluster_custom_spacing %} --vf-cluster-margin: {{cluster_custom_spacing}};{% endif -%}
+    {%- if cluster_child_flex %} --vf-cluster__item--flex: {{cluster_child_flex}};{% endif -%}
+  {%- endif -%}">
+
+  <div class="vf-cluster__inner">
+
+    <div class="vf-box vf-box-theme--primary vf-box--normal">
+      <h3 class="vf-box__heading">Did you know?</h3>
+      <p class="vf-box__text">This is some more content that would be in the box. These examples also have make use of the <code>--vf-cluster__item--width</code> to minimise the width so you can see the differences in alignment.</p>
+    </div>
+    <div class="vf-box vf-box-theme--primary vf-box--normal">
+      <h3 class="vf-box__heading">Did you know?</h3>
+      <p class="vf-box__text">This is even more content that would be in the box. So much information it spans multiple lines.</p>
+    </div>
+    <div class="vf-box vf-box-theme--primary vf-box--normal">
+      <h3 class="vf-box__heading">Did you know?</h3>
+      <p class="vf-box__text">This is some more content that would be in the box.</p>
+    </div>
+
+  </div>
+</div>