...
 
Commits (2)
......@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# 1.1.0
* adds if statement to allow for context data to pass through
# 1.0.0 (2019-12-17)
* Initial stable release
......@@ -6,15 +6,17 @@
The `vf-badge` component is used to label a page, part of a page, or a component. The `vf-badge` component can also be a link using `<a class="vf-badge" href="">badge title</a>`.
## Install
## Installation
This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-badge` with this command.
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-profile` with this command.
```
$ yarn add --dev @visual-framework/vf-badge
```
The source files included are written in [Sass](http://sass-lang.com)(`scss`). You can point your Sass `include-path` at your `node_modules` directory and import it like this.
### Sass/CSS
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-badge/index.scss";
......@@ -22,10 +24,50 @@ The source files included are written in [Sass](http://sass-lang.com)(`scss`). Y
_Make sure you import Sass requirements along with the modules._
## Usage
If you are using the badge as a link, you must include the relevant url within the `href=""` part of `<a class="vf-badge" href="">badge title</a>`, for example:
The `vf-badge` component is used to denote if a page, section, or link has a production state of `alpha`, `beta` or other information.
```
<a class="vf-badge vf-badge--phases vf-badge--primary" href="">badge title</a>
```
### Content
The `vf-badge` accepts a single text item of content.
| content type | variable | description |
| ------------ | -------- | ----------- |
| text | `text` | |
### Nunjucks and yml options
#### Nunjucks and YML variables available
| variable | options | default |
| -------------- | -------------------------------------- | ------- |
| text | | |
| badge_href | | null |
| theme | 'primary', 'secondary', 'tertiary' | |
| style | 'pill', 'rounded', 'square', 'outline' | |
| override_class | | |
| id | | |
#### Component Specific Variants
The `vf-badge` allows for two sets of variants
##### Theme Variants
There are three theme variants available for the component that are **primary**, **secondary**, and **tertiary**. To add a theme to the component you would need to add `theme: primary`, `theme: secondary`, or `theme: tertiary` to the `.yml` file.
##### Design Variants
There are four design variants for the component. We have `square`, `pill`, and `rounded` as well as `outline`. The `outline` variant can be used along with another variant so the way we write this in code is a little different. To only have a rounded button we should write `["rounded"]` but if we wanted to have a rounded button with the outline rather than filled colour we would have to write `["outline", "rounded"]`.
## 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)
......@@ -11,7 +11,7 @@
{# Determine type of element to use, if not explicitly set -#}
{% spaceless %}
{% if href %}
{% if badge_href %}
{% set tags = 'a' %}
{% else %}
{% set tags = 'span' %}
......
# Change Log
## 1.1.0
* adds an if statement so context data can be passed through
* refactors have `vf-badge` is used so that it can take context data rather than just render
## 1.0.3
* adds ability to drop in a `vf-badge` component after a link in `--has-images` variety
......