Component: vf-tags (#1742)

Creates a prototype MVP vf-tags component that can be easily improved in the future.

Bases its code and approach off `vf-article-meta-information`'s `vf-meta__topics`

Closes #875

components/vf-componenet-rollup/CHANGELOG.md

+## 1.4.5
+
+* Add vf-tags Sass.
+* https://github.com/visual-framework/vf-core/issues/875
+
 ## 1.4.4
 
 * Add vf-mega-menu Sass and JS.

components/vf-componenet-rollup/index.scss

@@ -113,6 +113,7 @@ button {
 @import 'vf-video-teaser/vf-video-teaser.scss';
 @import 'vf-global-header/vf-global-header.scss';
 @import 'vf-tabs/vf-tabs.scss';
+@import 'vf-tags/vf-tags.scss';
 @import 'vf-table/vf-table.scss';
 @import 'embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.scss';
 @import 'vf-pagination/vf-pagination.scss';

components/vf-tags/.npmignore

+bin
+.github
+.travis.yml
+node_modules

components/vf-tags/CHANGELOG.md

+### 1.0.0-alpha.1
+
+* Creates a prototype MVP vf-tags component that can be easily improved in the future.
+* https://github.com/visual-framework/vf-core/issues/875

components/vf-tags/README.md

+# Tags component
+
+[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-tags.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-tags)
+
+## About
+
+A high-density list of meta-information links often found at the bottom of piece of content and similar to citations.
+
+## Usage
+
+Use this component for secondary nice-to-have information. Tags are typically a high-density cluster of information that is not easily scannable by users. They are often of more use to search engines and users searching a page for information.
+
+If you have critical user-journey lists of links, you should use a `vf-list` instead.
+
+This component should not be confused with `vf-badge` which indicates the status of an item.
+
+### Accessibility
+
+This component targets WCAG 2.1 AA accessibility.
+
+You can also read about [the Visual Framework's approach to accessibility](https://stable.visual-framework.dev/guidance/accessibility/).
+
+## Install
+
+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-tags` with this command.
+
+```
+$ yarn add --dev @visual-framework/vf-tags
+```
+
+### JS
+
+This component has no JS.
+
+### Sass/CSS
+
+The style files included are written in [Sass](https://sass-lang.com/). If you're using a VF-core project, you can import it like this:
+
+```
+@import "@visual-framework/vf-tags/vf-tags.scss";
+```
+
+Make sure you import Sass requirements along with the modules. You can use a [project boilerplate](https://stable.visual-framework.dev/building/) or the [`vf-sass-starter`](https://stable.visual-framework.dev/components/vf-sass-starter/)
+
+## Help
+
+- [Read the Visual Framework troubleshooting](https://stable.visual-framework.dev/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)

components/vf-tags/index.scss

+// 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-tags.variables.scss';
+@import 'vf-tags.scss';
+
+// component variant styles
+// @import 'vf-tags--variant.scss';

components/vf-tags/package.json

+{
+  "version": "1.0.0-alpha.0",
+  "name": "@visual-framework/vf-tags",
+  "description": "vf-tags component",
+  "homepage": "",
+  "author": "VF",
+  "license": "Apache 2.0",
+  "style": "vf-tags.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-tags",
+  "bugs": {
+    "url": "https://github.com/visual-framework/vf-core/issues"
+  },
+  "keywords": [
+    "fractal",
+    "component"
+  ]
+}

components/vf-tags/vf-tags.config.yml

+# The title shown on the component page
+title: Tags
+# Label shown on index pages
+label: Tags
+status: alpha
+# The template used from /components/_previews
+#
+# Per-variant options
+# variants:
+  # - name: default
+  #   label: Default
+  #   hidden: true
+  #   context:
+  #     children_are_possible:
+  #       variant_title: A Easy Card Title 1
+  #       variant_href: "JavaScript:Void(0);"
+  #       modifier: vf-card--very-easy
+  #       variant_image: ../../assets/vf-card/assets/vf-card-example.png
+# Global component context
+context:
+  component-type: block
+  tags:
+    - label: Beast of Bodmin
+      link: "JavaScript:Void(0);"
+    - label: Morgawr
+      definition: "JavaScript:Void(0);"
+    - label: Owlman
+      definition: "JavaScript:Void(0);"
+  # custom-values: passed as {{custom-values}}
+  # - note: you in your custom-values you should use dashes `-`
+  #         and not underscores `_` as underscores prevent inherited template use
+  # title: Title text
+  # text: String of text
+  # image: ../../assets/vf-component-name/assets/vf-component-name.png
+  # - note on paths: be sure to prefix with `../../`
+  # - Why? https://github.com/visual-framework/vf-core/issues/364

components/vf-tags/vf-tags.js

+// vf-tags
+
+// Don't need JS? Then feel free to delete this file.

components/vf-tags/vf-tags.njk

+{% spaceless %}
+{%- if context %}
+  {% set id = context.id %}
+  {% set list = context.list %}
+  {% set override_class = context.override_class %}
+{% endif -%}
+
+<div
+{% if id %} id="{{-id-}}"{% endif %}
+class="vf-tags
+  {%- if override_class %} | {{override_class}}{% endif -%}
+">
+  {% for item in tags %}
+  <a class="vf-link vf-tag" href="{{item.label | safe}}">{{item.label}}</a>
+  {% endfor %}
+</div>
+{% endspaceless %}

components/vf-tags/vf-tags.react.js

+// // vf-tags for React
+// // See vf-extensions-react for usage guidance
+// // We use vanilla JS templates for react for compatibility with create react app
+// // ---
+// import React from "react";
+// import Fragment from "react-dom-fragment";
+// // eslint-disable-next-line no-unused-vars
+// import VfTagsTemplate from "./vf-tags.precompiled.js"; // import templates before the nunjucks env
+// import { vfNunjucksEnv } from "@visual-framework/vf-extensions-react/vf-extensions-react.js";
+
+// // any JS actions needed on component insertion
+// class VfTagsCallback extends React.Component {
+//   componentDidMount() {
+//     console.log('any JS actions needed')
+//   }
+
+//   render() {
+//     return React.createElement(React.Fragment, null);
+//   }
+// }
+
+// const VfTags = React.memo(({
+//   variant, newTheme, card_image, card_text, card_image__alt, card_title
+//   }) => {
+//     return React.createElement(React.Fragment, null,
+//       React.createElement(Fragment, {
+//           dangerouslySetInnerHTML: {
+//           // our HTML is handled by nunjucks, this should not receive user input
+//           __html: vfNunjucksEnv.render('vf-tags', {
+//             variant: variant, newTheme: newTheme, card_image: card_image, card_text: card_text, card_image__alt: card_image__alt, card_title: card_title
+//           })
+//         }
+//       }),
+//       React.createElement(VfTagsCallback, null)
+//     );
+//   }
+// );
+
+// export { VfTags };

components/vf-tags/vf-tags.scss

+// vf-tags
+
+// **Thinking about deleting this file?**
+// If your component needs no CSS/Sass, we still recommend leaving the
+// scss files in place. As this is primarily a CSS framework, it is better to
+// leave the empty files so you know a file wasn't accidently omitted.
+// If you don't have any Sass, you can trim this block down to:
+// "This page was intentionally left blank"
+
+@import 'package.variables.scss';
+// Debug information from component's `package.json`:
+// ---
+/*!
+ * Component: #{map-get($componentInfo, 'name')}
+ * Version: #{map-get($componentInfo, 'version')}
+ * Location: #{map-get($componentInfo, 'location')}
+ * Build time: #{map-get($componentInfo, 'buildTimeStamp')}
+ */
+
+@import 'vf-tags.variables.scss';
+
+// You need to add this Sass file to ./components/vf-componenet-rollup/index.scss
+// @import 'vf-tags/vf-tags.scss';
+.vf-tags {
+  // You can utilise CSS custom properites
+  // --thing-text-color: var(--vf-tags-theme-color--foreground, #{set-ui-color(vf-ui-color--black)});
+
+  // The are many mixins:
+  // https://stable.visual-framework.dev/components/detail/vf-sass-config.html
+  // @include set-type(text-body--2);
+
+  // You can also use the design tokens
+  // https://stable.visual-framework.dev/components/detail/vf-design-tokens.html
+  // --otherthing-color: var(--vf-tags-theme-color--foreground, #{map-get($vf-colors-map, vf-color--green--darkest)});
+  // color: var(--otherthing-color);
+}
+
+.vf-tag.vf-link {
+  color:  text-color(secondary);
+  margin: 0 0 4px 0;
+  position: relative;
+}
+
+.vf-tag.vf-link:nth-last-child(n+2),
+.vf-tag.vf-link:nth-last-child(n+2) ~ .vf-tag.vf-link {
+  margin-right: #{map-get($vf-spacing-map, vf-spacing--200)};
+
+  &::before {
+    content: ',';
+    position: absolute;
+    right: -4px;
+  }
+}
+
+.vf-tag.vf-link:last-of-type {
+  &::before {
+    content: '' !important;
+  }
+}

components/vf-tags/vf-tags.variables.scss

+
+// vf-tags Sass variables file.
+// ------------------------------------------------------------
+
+// ------------------------------------------------------------
+// Default component variables
+// ------------------------------------------------------------
+
+// $vf-tags--example-bg-color: set-color(vf-color--yellow);
+// $vf-tags--example2-bg-color: set-ui-color(vf-ui-color--grey);