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

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
parent 27260a7b
## 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.
......
......@@ -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';
......
bin
.github
.travis.yml
node_modules
### 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
# 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)
// 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';
{
"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"
]
}
# 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
// vf-tags
// Don't need JS? Then feel free to delete this file.
{% 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 %}
// // 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 };
// 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;
}
}
// 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);
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