...
 
......@@ -43,7 +43,7 @@
/* stylelint-enable */
/*!
* Component: @visual-framework/vf-badge
* Version: 1.0.1
* Version: 1.1.0
* Location: components/vf-badge
*/
.vf-badge {
......
......@@ -116,7 +116,7 @@
/*!
* Component: @visual-framework/vf-badge
* Version: 1.0.1
* Version: 1.1.0
* Location: components/vf-badge
*/
.vf-badge {
......@@ -1338,7 +1338,7 @@ html:not(.vf-disable-deprecated) .vf-text-button--1 {
/*!
* Component: @visual-framework/vf-content
* Version: 1.1.6
* Version: 1.1.7
* Location: components/vf-content
*/
.vf-content h1:not([class*=vf-]) {
......
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
src: local("IBM Plex Mono"), local("IBMPlexMono"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Regular.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
src: local("IBM Plex Mono"), local("IBMPlexMono"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Regular.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 700;
src: local("IBM Plex Sans Bold"), local("IBMPlexSans-Bold"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Bold.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 700;
src: local("IBM Plex Sans Bold Italic"), local("IBMPlexSans-BoldItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-BoldItalic.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 200;
src: local("IBM Plex Sans ExtraLight"), local("IBMPlexSans-ExtraLight"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ExtraLight.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 200;
src: local("IBM Plex Sans ExtraLight Italic"), local("IBMPlexSans-ExtraLightItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ExtraLightItalic.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 400;
src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Italic.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 300;
src: local("IBM Plex Sans Light Italic"), local("IBMPlexSans-LightItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-LightItalic.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 300;
src: local("IBM Plex Sans Light"), local("IBMPlexSans-Light"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Light.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 500;
src: local("IBM Plex Sans Medium Italic"), local("IBMPlexSans-MediumItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-MediumItalic.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 500;
src: local("IBM Plex Sans Medium"), local("IBMPlexSans-Medium"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Medium.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400;
src: local("IBM Plex Sans"), local("IBMPlexSans"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Regular.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 700;
src: local("IBM Plex Sans Bold"), local("IBMPlexSans-Bold"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Bold.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 700;
src: local("IBM Plex Sans Bold Italic"), local("IBMPlexSans-BoldItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-BoldItalic.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 200;
src: local("IBM Plex Sans ExtraLight"), local("IBMPlexSans-ExtraLight"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ExtraLight.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 200;
src: local("IBM Plex Sans ExtraLight Italic"), local("IBMPlexSans-ExtraLightItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ExtraLightItalic.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 400;
src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Italic.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 300;
src: local("IBM Plex Sans Light"), local("IBMPlexSans-Light"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Light.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 300;
src: local("IBM Plex Sans Light Italic"), local("IBMPlexSans-LightItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-LightItalic.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 500;
src: local("IBM Plex Sans Medium"), local("IBMPlexSans-Medium"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Medium.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 500;
src: local("IBM Plex Sans Medium Italic"), local("IBMPlexSans-MediumItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-MediumItalic.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400;
src: local("IBM Plex Sans"), local("IBMPlexSans"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Regular.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 600;
src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-SemiBold.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 600;
src: local("IBM Plex Sans SemiBold Italic"), local("IBMPlexSans-SemiBoldItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-SemiBoldItalic.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 450;
src: local("IBM Plex Sans Text"), local("IBMPlexSans-Text"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Text.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 450;
src: local("IBM Plex Sans Text Italic"), local("IBMPlexSans-TextItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-TextItalic.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 100;
src: local("IBM Plex Sans Thin"), local("IBMPlexSans-Thin"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Thin.woff") format("woff");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 100;
src: local("IBM Plex Sans Thin Italic"), local("IBMPlexSans-ThinItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ThinItalic.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 600;
src: local("IBM Plex Sans SemiBold Italic"), local("IBMPlexSans-SemiBoldItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-SemiBoldItalic.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 600;
src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-SemiBold.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 450;
src: local("IBM Plex Sans Text Italic"), local("IBMPlexSans-TextItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-TextItalic.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 450;
src: local("IBM Plex Sans Text"), local("IBMPlexSans-Text"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Text.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 100;
src: local("IBM Plex Sans Thin Italic"), local("IBMPlexSans-ThinItalic"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ThinItalic.woff") format("woff");
}
\ No newline at end of file
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 100;
src: local("IBM Plex Sans Thin"), local("IBMPlexSans-Thin"), url("../IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Thin.woff") format("woff");
}
\ No newline at end of file
......@@ -194,7 +194,7 @@
/*!
* Component: @visual-framework/vf-intro
* Version: 1.0.2
* Version: 1.1.0
* Location: components/vf-intro
*/
.vf-intro {
......
......@@ -114,9 +114,133 @@
padding: 4px 8px 4px 4px;
}
/*!
* Component: @visual-framework/vf-badge
* Version: 1.1.0
* Location: components/vf-badge
*/
.vf-badge {
font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1;
border: 1px solid currentColor;
color: inherit;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
letter-spacing: 0.05em;
padding: 4px 8px;
text-decoration: none;
text-transform: uppercase;
}
.vf-badge--pill {
border-radius: 500px;
}
.vf-badge--rounded {
border-radius: 4px;
}
.vf-badge--square {
border: 0;
height: 12px;
margin: 0;
padding: 0;
position: relative;
width: 12px;
}
.vf-badge--phases {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0 12px 0 0;
min-width: 52px;
}
.vf-badge--primary {
background-color: #3b6fb6;
border-color: #3b6fb6;
color: #ffffff;
color: #ffffff;
}
.vf-badge--primary:visited {
color: #ffffff;
}
.vf-badge--primary:visited:hover {
color: #ffffff;
text-decoration: underline;
}
.vf-badge--primary:hover {
color: #ffffff;
}
a.vf-badge--primary:hover {
background-color: #193f90;
border-color: #193f90;
}
.vf-badge--secondary {
background-color: #18974c;
border-color: #18974c;
color: #ffffff;
color: #ffffff;
}
.vf-badge--secondary:visited {
color: #ffffff;
}
.vf-badge--secondary:visited:hover {
color: #ffffff;
text-decoration: underline;
}
.vf-badge--secondary:hover {
color: #ffffff;
}
.vf-badge--tertiary {
background-color: #54585a;
border-color: #54585a;
color: #ffffff;
color: #ffffff;
}
.vf-badge--tertiary:visited {
color: #ffffff;
}
.vf-badge--tertiary:visited:hover {
color: #ffffff;
text-decoration: underline;
}
.vf-badge--tertiary:hover {
color: #ffffff;
}
.vf-badge--outline {
background-color: transparent;
color: #3b6fb6;
color: #3b6fb6;
}
.vf-badge--outline:visited {
color: #3b6fb6;
}
.vf-badge--outline:visited:hover {
color: #3b6fb6;
text-decoration: underline;
}
.vf-badge--outline:hover {
color: #3b6fb6;
}
/*!
* Component: @visual-framework/vf-link-list
* Version: 1.0.3
* Version: 1.1.0
* Location: components/vf-link-list
*/
.vf-links__heading {
......@@ -136,14 +260,6 @@
margin: 0 0 16px 0;
margin: 0 0 var(--vf-text-margin--bottom, 16px) 0;
margin: 0 0 20px 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.vf-links__list .vf-list__link {
margin-right: 8px;
......@@ -251,7 +367,7 @@
display: grid;
grid-column: 1/-1;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
row-gap: 30px;
row-gap: 24px;
}
.vf-links__list--easy .vf-list__item {
margin-bottom: 0;
......
......@@ -43,7 +43,7 @@
/* stylelint-enable */
/*!
* Component: @visual-framework/vf-profile
* Version: 1.0.1
* Version: 1.0.2
* Location: components/vf-profile
*/
.vf-profile {
......
......@@ -260,13 +260,83 @@ class="vf-logo | vf-logo--has-text">
<p><a href="https://badge.fury.io/js/%40visual-framework%2Fvf-badge"><img src="https://badge.fury.io/js/%40visual-framework%2Fvf-badge.svg" alt="npm version"></a></p>
<h2 id="about">About</h2>
<p>The <code>vf-badge</code> component is used to label a page, part of a page, or a component. The <code>vf-badge</code> component can also be a link using <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>.</p>
<h2 id="install">Install</h2>
<p>This component is distributed with npm. After <a href="https://www.npmjs.com/get-npm">installing npm</a>, you can install the <code>vf-badge</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><p>The source files included are written in <a href="http://sass-lang.com">Sass</a>(<code>scss</code>). You can point your Sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<h2 id="installation">Installation</h2>
<p>This repository is distributed with <a href="https://www.npmjs.com/">npm</a>. After <a href="https://www.npmjs.com/get-npm">installing npm</a> and <a href="https://classic.yarnpkg.com/en/docs/install">yarn</a>, you can install <code>vf-profile</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><h3 id="sasscss">Sass/CSS</h3>
<p>The source files included are written in [Sass][sass] (<code>scss</code>) You can simply point your sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<pre><code class="hljs"><span class="hljs-keyword">@import</span> <span class="hljs-string">"@visual-framework/vf-badge/index.scss"</span>;</code></pre><p><em>Make sure you import Sass requirements along with the modules.</em></p>
<h2 id="usage">Usage</h2>
<p>If you are using the badge as a link, you must include the relevant url within the <code>href=&quot;&quot;</code> part of <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>, for example:</p>
<pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge vf-badge--phases vf-badge--primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>&gt;</span>badge title<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
<p>The <code>vf-badge</code> component is used to denote if a page, section, or link has a production state of <code>alpha</code>, <code>beta</code> or other information.</p>
<h3 id="content">Content</h3>
<p>The <code>vf-badge</code> accepts a single text item of content.</p>
<table>
<thead>
<tr>
<th>content type</th>
<th>variable</th>
<th>description</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td><code>text</code></td>
<td></td>
</tr>
</tbody></table>
<h3 id="nunjucks-and-yml-options">Nunjucks and yml options</h3>
<h4 id="nunjucks-and-yml-variables-available">Nunjucks and YML variables available</h4>
<table>
<thead>
<tr>
<th>variable</th>
<th>options</th>
<th>default</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td></td>
<td></td>
</tr>
<tr>
<td>badge_href</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>theme</td>
<td>‘primary’, ‘secondary’, ‘tertiary’</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>‘pill’, ‘rounded’, ‘square’, ‘outline’</td>
<td></td>
</tr>
<tr>
<td>override_class</td>
<td></td>
<td></td>
</tr>
<tr>
<td>id</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h4 id="component-specific-variants">Component Specific Variants</h4>
<p>The <code>vf-badge</code> allows for two sets of variants</p>
<h5 id="theme-variants">Theme Variants</h5>
<p>There are three theme variants available for the component that are <strong>primary</strong>, <strong>secondary</strong>, and <strong>tertiary</strong>. To add a theme to the component you would need to add <code>theme: primary</code>, <code>theme: secondary</code>, or <code>theme: tertiary</code> to the <code>.yml</code> file.</p>
<h5 id="design-variants">Design Variants</h5>
<p>There are four design variants for the component. We have <code>square</code>, <code>pill</code>, and <code>rounded</code> as well as <code>outline</code>. The <code>outline</code> 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 <code>[&quot;rounded&quot;]</code> but if we wanted to have a rounded button with the outline rather than filled colour we would have to write <code>[&quot;outline&quot;, &quot;rounded&quot;]</code>.</p>
<h2 id="help">Help</h2>
<ul>
<li><a href="https://visual-framework.github.io/vf-welcome/troubleshooting/">Read the Visual Framework troubleshooting</a></li>
<li><a href="https://github.com/visual-framework/vf-core/issues">Open a ticket</a></li>
<li><a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Chat on Slack</a></li>
</ul>
</div>
......@@ -355,6 +425,10 @@ class="vf-logo | vf-logo--has-text">
All notable changes to this project will be documented in this file.
See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-link">https://conventionalcommits.org</span>) for commit guidelines.
<span class="hljs-section"># 1.1.0</span>
<span class="hljs-bullet">
* </span>adds if statement to allow for context data to pass through
<span class="hljs-section"># 1.0.0 (2019-12-17)</span>
<span class="hljs-bullet">
* </span>Initial stable release
......@@ -373,7 +447,7 @@ See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-li
Filesystem path: components/vf-badge/CHANGELOG.md
</li>
<li class="vf-list__item">
Size: 214 Bytes
Size: 286 Bytes
</li>
</ul>
</section>
......
......@@ -260,13 +260,83 @@ class="vf-logo | vf-logo--has-text">
<p><a href="https://badge.fury.io/js/%40visual-framework%2Fvf-badge"><img src="https://badge.fury.io/js/%40visual-framework%2Fvf-badge.svg" alt="npm version"></a></p>
<h2 id="about">About</h2>
<p>The <code>vf-badge</code> component is used to label a page, part of a page, or a component. The <code>vf-badge</code> component can also be a link using <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>.</p>
<h2 id="install">Install</h2>
<p>This component is distributed with npm. After <a href="https://www.npmjs.com/get-npm">installing npm</a>, you can install the <code>vf-badge</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><p>The source files included are written in <a href="http://sass-lang.com">Sass</a>(<code>scss</code>). You can point your Sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<h2 id="installation">Installation</h2>
<p>This repository is distributed with <a href="https://www.npmjs.com/">npm</a>. After <a href="https://www.npmjs.com/get-npm">installing npm</a> and <a href="https://classic.yarnpkg.com/en/docs/install">yarn</a>, you can install <code>vf-profile</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><h3 id="sasscss">Sass/CSS</h3>
<p>The source files included are written in [Sass][sass] (<code>scss</code>) You can simply point your sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<pre><code class="hljs"><span class="hljs-keyword">@import</span> <span class="hljs-string">"@visual-framework/vf-badge/index.scss"</span>;</code></pre><p><em>Make sure you import Sass requirements along with the modules.</em></p>
<h2 id="usage">Usage</h2>
<p>If you are using the badge as a link, you must include the relevant url within the <code>href=&quot;&quot;</code> part of <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>, for example:</p>
<pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge vf-badge--phases vf-badge--primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>&gt;</span>badge title<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
<p>The <code>vf-badge</code> component is used to denote if a page, section, or link has a production state of <code>alpha</code>, <code>beta</code> or other information.</p>
<h3 id="content">Content</h3>
<p>The <code>vf-badge</code> accepts a single text item of content.</p>
<table>
<thead>
<tr>
<th>content type</th>
<th>variable</th>
<th>description</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td><code>text</code></td>
<td></td>
</tr>
</tbody></table>
<h3 id="nunjucks-and-yml-options">Nunjucks and yml options</h3>
<h4 id="nunjucks-and-yml-variables-available">Nunjucks and YML variables available</h4>
<table>
<thead>
<tr>
<th>variable</th>
<th>options</th>
<th>default</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td></td>
<td></td>
</tr>
<tr>
<td>badge_href</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>theme</td>
<td>‘primary’, ‘secondary’, ‘tertiary’</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>‘pill’, ‘rounded’, ‘square’, ‘outline’</td>
<td></td>
</tr>
<tr>
<td>override_class</td>
<td></td>
<td></td>
</tr>
<tr>
<td>id</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h4 id="component-specific-variants">Component Specific Variants</h4>
<p>The <code>vf-badge</code> allows for two sets of variants</p>
<h5 id="theme-variants">Theme Variants</h5>
<p>There are three theme variants available for the component that are <strong>primary</strong>, <strong>secondary</strong>, and <strong>tertiary</strong>. To add a theme to the component you would need to add <code>theme: primary</code>, <code>theme: secondary</code>, or <code>theme: tertiary</code> to the <code>.yml</code> file.</p>
<h5 id="design-variants">Design Variants</h5>
<p>There are four design variants for the component. We have <code>square</code>, <code>pill</code>, and <code>rounded</code> as well as <code>outline</code>. The <code>outline</code> 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 <code>[&quot;rounded&quot;]</code> but if we wanted to have a rounded button with the outline rather than filled colour we would have to write <code>[&quot;outline&quot;, &quot;rounded&quot;]</code>.</p>
<h2 id="help">Help</h2>
<ul>
<li><a href="https://visual-framework.github.io/vf-welcome/troubleshooting/">Read the Visual Framework troubleshooting</a></li>
<li><a href="https://github.com/visual-framework/vf-core/issues">Open a ticket</a></li>
<li><a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Chat on Slack</a></li>
</ul>
</div>
......@@ -293,7 +363,7 @@ class="vf-logo | vf-logo--has-text">
<h3 class="vf-text vf-text-heading--4">Code example</h3>
<pre class="vf-code-example__pre"><code class="Code Code--lang-html vf-code-example"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge"</span>&gt;</span>beta<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<pre class="vf-code-example__pre"><code class="Code Code--lang-html vf-code-example"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"JavaScript:Void(0);"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge"</span>&gt;</span>beta<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</code></pre>
......@@ -340,6 +410,10 @@ class="vf-logo | vf-logo--has-text">
All notable changes to this project will be documented in this file.
See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-link">https://conventionalcommits.org</span>) for commit guidelines.
<span class="hljs-section"># 1.1.0</span>
<span class="hljs-bullet">
* </span>adds if statement to allow for context data to pass through
<span class="hljs-section"># 1.0.0 (2019-12-17)</span>
<span class="hljs-bullet">
* </span>Initial stable release
......@@ -358,7 +432,7 @@ See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-li
Filesystem path: components/vf-badge/CHANGELOG.md
</li>
<li class="vf-list__item">
Size: 214 Bytes
Size: 286 Bytes
</li>
</ul>
</section>
......
......@@ -260,13 +260,83 @@ class="vf-logo | vf-logo--has-text">
<p><a href="https://badge.fury.io/js/%40visual-framework%2Fvf-badge"><img src="https://badge.fury.io/js/%40visual-framework%2Fvf-badge.svg" alt="npm version"></a></p>
<h2 id="about">About</h2>
<p>The <code>vf-badge</code> component is used to label a page, part of a page, or a component. The <code>vf-badge</code> component can also be a link using <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>.</p>
<h2 id="install">Install</h2>
<p>This component is distributed with npm. After <a href="https://www.npmjs.com/get-npm">installing npm</a>, you can install the <code>vf-badge</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><p>The source files included are written in <a href="http://sass-lang.com">Sass</a>(<code>scss</code>). You can point your Sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<h2 id="installation">Installation</h2>
<p>This repository is distributed with <a href="https://www.npmjs.com/">npm</a>. After <a href="https://www.npmjs.com/get-npm">installing npm</a> and <a href="https://classic.yarnpkg.com/en/docs/install">yarn</a>, you can install <code>vf-profile</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><h3 id="sasscss">Sass/CSS</h3>
<p>The source files included are written in [Sass][sass] (<code>scss</code>) You can simply point your sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<pre><code class="hljs"><span class="hljs-keyword">@import</span> <span class="hljs-string">"@visual-framework/vf-badge/index.scss"</span>;</code></pre><p><em>Make sure you import Sass requirements along with the modules.</em></p>
<h2 id="usage">Usage</h2>
<p>If you are using the badge as a link, you must include the relevant url within the <code>href=&quot;&quot;</code> part of <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>, for example:</p>
<pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge vf-badge--phases vf-badge--primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>&gt;</span>badge title<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
<p>The <code>vf-badge</code> component is used to denote if a page, section, or link has a production state of <code>alpha</code>, <code>beta</code> or other information.</p>
<h3 id="content">Content</h3>
<p>The <code>vf-badge</code> accepts a single text item of content.</p>
<table>
<thead>
<tr>
<th>content type</th>
<th>variable</th>
<th>description</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td><code>text</code></td>
<td></td>
</tr>
</tbody></table>
<h3 id="nunjucks-and-yml-options">Nunjucks and yml options</h3>
<h4 id="nunjucks-and-yml-variables-available">Nunjucks and YML variables available</h4>
<table>
<thead>
<tr>
<th>variable</th>
<th>options</th>
<th>default</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td></td>
<td></td>
</tr>
<tr>
<td>badge_href</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>theme</td>
<td>‘primary’, ‘secondary’, ‘tertiary’</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>‘pill’, ‘rounded’, ‘square’, ‘outline’</td>
<td></td>
</tr>
<tr>
<td>override_class</td>
<td></td>
<td></td>
</tr>
<tr>
<td>id</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h4 id="component-specific-variants">Component Specific Variants</h4>
<p>The <code>vf-badge</code> allows for two sets of variants</p>
<h5 id="theme-variants">Theme Variants</h5>
<p>There are three theme variants available for the component that are <strong>primary</strong>, <strong>secondary</strong>, and <strong>tertiary</strong>. To add a theme to the component you would need to add <code>theme: primary</code>, <code>theme: secondary</code>, or <code>theme: tertiary</code> to the <code>.yml</code> file.</p>
<h5 id="design-variants">Design Variants</h5>
<p>There are four design variants for the component. We have <code>square</code>, <code>pill</code>, and <code>rounded</code> as well as <code>outline</code>. The <code>outline</code> 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 <code>[&quot;rounded&quot;]</code> but if we wanted to have a rounded button with the outline rather than filled colour we would have to write <code>[&quot;outline&quot;, &quot;rounded&quot;]</code>.</p>
<h2 id="help">Help</h2>
<ul>
<li><a href="https://visual-framework.github.io/vf-welcome/troubleshooting/">Read the Visual Framework troubleshooting</a></li>
<li><a href="https://github.com/visual-framework/vf-core/issues">Open a ticket</a></li>
<li><a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Chat on Slack</a></li>
</ul>
</div>
......@@ -340,6 +410,10 @@ class="vf-logo | vf-logo--has-text">
All notable changes to this project will be documented in this file.
See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-link">https://conventionalcommits.org</span>) for commit guidelines.
<span class="hljs-section"># 1.1.0</span>
<span class="hljs-bullet">
* </span>adds if statement to allow for context data to pass through
<span class="hljs-section"># 1.0.0 (2019-12-17)</span>
<span class="hljs-bullet">
* </span>Initial stable release
......@@ -358,7 +432,7 @@ See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-li
Filesystem path: components/vf-badge/CHANGELOG.md
</li>
<li class="vf-list__item">
Size: 214 Bytes
Size: 286 Bytes
</li>
</ul>
</section>
......
......@@ -260,13 +260,83 @@ class="vf-logo | vf-logo--has-text">
<p><a href="https://badge.fury.io/js/%40visual-framework%2Fvf-badge"><img src="https://badge.fury.io/js/%40visual-framework%2Fvf-badge.svg" alt="npm version"></a></p>
<h2 id="about">About</h2>
<p>The <code>vf-badge</code> component is used to label a page, part of a page, or a component. The <code>vf-badge</code> component can also be a link using <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>.</p>
<h2 id="install">Install</h2>
<p>This component is distributed with npm. After <a href="https://www.npmjs.com/get-npm">installing npm</a>, you can install the <code>vf-badge</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><p>The source files included are written in <a href="http://sass-lang.com">Sass</a>(<code>scss</code>). You can point your Sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<h2 id="installation">Installation</h2>
<p>This repository is distributed with <a href="https://www.npmjs.com/">npm</a>. After <a href="https://www.npmjs.com/get-npm">installing npm</a> and <a href="https://classic.yarnpkg.com/en/docs/install">yarn</a>, you can install <code>vf-profile</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><h3 id="sasscss">Sass/CSS</h3>
<p>The source files included are written in [Sass][sass] (<code>scss</code>) You can simply point your sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<pre><code class="hljs"><span class="hljs-keyword">@import</span> <span class="hljs-string">"@visual-framework/vf-badge/index.scss"</span>;</code></pre><p><em>Make sure you import Sass requirements along with the modules.</em></p>
<h2 id="usage">Usage</h2>
<p>If you are using the badge as a link, you must include the relevant url within the <code>href=&quot;&quot;</code> part of <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>, for example:</p>
<pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge vf-badge--phases vf-badge--primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>&gt;</span>badge title<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
<p>The <code>vf-badge</code> component is used to denote if a page, section, or link has a production state of <code>alpha</code>, <code>beta</code> or other information.</p>
<h3 id="content">Content</h3>
<p>The <code>vf-badge</code> accepts a single text item of content.</p>
<table>
<thead>
<tr>
<th>content type</th>
<th>variable</th>
<th>description</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td><code>text</code></td>
<td></td>
</tr>
</tbody></table>
<h3 id="nunjucks-and-yml-options">Nunjucks and yml options</h3>
<h4 id="nunjucks-and-yml-variables-available">Nunjucks and YML variables available</h4>
<table>
<thead>
<tr>
<th>variable</th>
<th>options</th>
<th>default</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td></td>
<td></td>
</tr>
<tr>
<td>badge_href</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>theme</td>
<td>‘primary’, ‘secondary’, ‘tertiary’</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>‘pill’, ‘rounded’, ‘square’, ‘outline’</td>
<td></td>
</tr>
<tr>
<td>override_class</td>
<td></td>
<td></td>
</tr>
<tr>
<td>id</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h4 id="component-specific-variants">Component Specific Variants</h4>
<p>The <code>vf-badge</code> allows for two sets of variants</p>
<h5 id="theme-variants">Theme Variants</h5>
<p>There are three theme variants available for the component that are <strong>primary</strong>, <strong>secondary</strong>, and <strong>tertiary</strong>. To add a theme to the component you would need to add <code>theme: primary</code>, <code>theme: secondary</code>, or <code>theme: tertiary</code> to the <code>.yml</code> file.</p>
<h5 id="design-variants">Design Variants</h5>
<p>There are four design variants for the component. We have <code>square</code>, <code>pill</code>, and <code>rounded</code> as well as <code>outline</code>. The <code>outline</code> 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 <code>[&quot;rounded&quot;]</code> but if we wanted to have a rounded button with the outline rather than filled colour we would have to write <code>[&quot;outline&quot;, &quot;rounded&quot;]</code>.</p>
<h2 id="help">Help</h2>
<ul>
<li><a href="https://visual-framework.github.io/vf-welcome/troubleshooting/">Read the Visual Framework troubleshooting</a></li>
<li><a href="https://github.com/visual-framework/vf-core/issues">Open a ticket</a></li>
<li><a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Chat on Slack</a></li>
</ul>
</div>
......@@ -340,6 +410,10 @@ class="vf-logo | vf-logo--has-text">
All notable changes to this project will be documented in this file.
See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-link">https://conventionalcommits.org</span>) for commit guidelines.
<span class="hljs-section"># 1.1.0</span>
<span class="hljs-bullet">
* </span>adds if statement to allow for context data to pass through
<span class="hljs-section"># 1.0.0 (2019-12-17)</span>
<span class="hljs-bullet">
* </span>Initial stable release
......@@ -358,7 +432,7 @@ See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-li
Filesystem path: components/vf-badge/CHANGELOG.md
</li>
<li class="vf-list__item">
Size: 214 Bytes
Size: 286 Bytes
</li>
</ul>
</section>
......
......@@ -260,13 +260,83 @@ class="vf-logo | vf-logo--has-text">
<p><a href="https://badge.fury.io/js/%40visual-framework%2Fvf-badge"><img src="https://badge.fury.io/js/%40visual-framework%2Fvf-badge.svg" alt="npm version"></a></p>
<h2 id="about">About</h2>
<p>The <code>vf-badge</code> component is used to label a page, part of a page, or a component. The <code>vf-badge</code> component can also be a link using <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>.</p>
<h2 id="install">Install</h2>
<p>This component is distributed with npm. After <a href="https://www.npmjs.com/get-npm">installing npm</a>, you can install the <code>vf-badge</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><p>The source files included are written in <a href="http://sass-lang.com">Sass</a>(<code>scss</code>). You can point your Sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<h2 id="installation">Installation</h2>
<p>This repository is distributed with <a href="https://www.npmjs.com/">npm</a>. After <a href="https://www.npmjs.com/get-npm">installing npm</a> and <a href="https://classic.yarnpkg.com/en/docs/install">yarn</a>, you can install <code>vf-profile</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><h3 id="sasscss">Sass/CSS</h3>
<p>The source files included are written in [Sass][sass] (<code>scss</code>) You can simply point your sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<pre><code class="hljs"><span class="hljs-keyword">@import</span> <span class="hljs-string">"@visual-framework/vf-badge/index.scss"</span>;</code></pre><p><em>Make sure you import Sass requirements along with the modules.</em></p>
<h2 id="usage">Usage</h2>
<p>If you are using the badge as a link, you must include the relevant url within the <code>href=&quot;&quot;</code> part of <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>, for example:</p>
<pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge vf-badge--phases vf-badge--primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>&gt;</span>badge title<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
<p>The <code>vf-badge</code> component is used to denote if a page, section, or link has a production state of <code>alpha</code>, <code>beta</code> or other information.</p>
<h3 id="content">Content</h3>
<p>The <code>vf-badge</code> accepts a single text item of content.</p>
<table>
<thead>
<tr>
<th>content type</th>
<th>variable</th>
<th>description</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td><code>text</code></td>
<td></td>
</tr>
</tbody></table>
<h3 id="nunjucks-and-yml-options">Nunjucks and yml options</h3>
<h4 id="nunjucks-and-yml-variables-available">Nunjucks and YML variables available</h4>
<table>
<thead>
<tr>
<th>variable</th>
<th>options</th>
<th>default</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td></td>
<td></td>
</tr>
<tr>
<td>badge_href</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>theme</td>
<td>‘primary’, ‘secondary’, ‘tertiary’</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>‘pill’, ‘rounded’, ‘square’, ‘outline’</td>
<td></td>
</tr>
<tr>
<td>override_class</td>
<td></td>
<td></td>
</tr>
<tr>
<td>id</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h4 id="component-specific-variants">Component Specific Variants</h4>
<p>The <code>vf-badge</code> allows for two sets of variants</p>
<h5 id="theme-variants">Theme Variants</h5>
<p>There are three theme variants available for the component that are <strong>primary</strong>, <strong>secondary</strong>, and <strong>tertiary</strong>. To add a theme to the component you would need to add <code>theme: primary</code>, <code>theme: secondary</code>, or <code>theme: tertiary</code> to the <code>.yml</code> file.</p>
<h5 id="design-variants">Design Variants</h5>
<p>There are four design variants for the component. We have <code>square</code>, <code>pill</code>, and <code>rounded</code> as well as <code>outline</code>. The <code>outline</code> 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 <code>[&quot;rounded&quot;]</code> but if we wanted to have a rounded button with the outline rather than filled colour we would have to write <code>[&quot;outline&quot;, &quot;rounded&quot;]</code>.</p>
<h2 id="help">Help</h2>
<ul>
<li><a href="https://visual-framework.github.io/vf-welcome/troubleshooting/">Read the Visual Framework troubleshooting</a></li>
<li><a href="https://github.com/visual-framework/vf-core/issues">Open a ticket</a></li>
<li><a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Chat on Slack</a></li>
</ul>
</div>
......@@ -340,6 +410,10 @@ class="vf-logo | vf-logo--has-text">
All notable changes to this project will be documented in this file.
See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-link">https://conventionalcommits.org</span>) for commit guidelines.
<span class="hljs-section"># 1.1.0</span>
<span class="hljs-bullet">
* </span>adds if statement to allow for context data to pass through
<span class="hljs-section"># 1.0.0 (2019-12-17)</span>
<span class="hljs-bullet">
* </span>Initial stable release
......@@ -358,7 +432,7 @@ See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-li
Filesystem path: components/vf-badge/CHANGELOG.md
</li>
<li class="vf-list__item">
Size: 214 Bytes
Size: 286 Bytes
</li>
</ul>
</section>
......
......@@ -260,13 +260,83 @@ class="vf-logo | vf-logo--has-text">
<p><a href="https://badge.fury.io/js/%40visual-framework%2Fvf-badge"><img src="https://badge.fury.io/js/%40visual-framework%2Fvf-badge.svg" alt="npm version"></a></p>
<h2 id="about">About</h2>
<p>The <code>vf-badge</code> component is used to label a page, part of a page, or a component. The <code>vf-badge</code> component can also be a link using <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>.</p>
<h2 id="install">Install</h2>
<p>This component is distributed with npm. After <a href="https://www.npmjs.com/get-npm">installing npm</a>, you can install the <code>vf-badge</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><p>The source files included are written in <a href="http://sass-lang.com">Sass</a>(<code>scss</code>). You can point your Sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<h2 id="installation">Installation</h2>
<p>This repository is distributed with <a href="https://www.npmjs.com/">npm</a>. After <a href="https://www.npmjs.com/get-npm">installing npm</a> and <a href="https://classic.yarnpkg.com/en/docs/install">yarn</a>, you can install <code>vf-profile</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><h3 id="sasscss">Sass/CSS</h3>
<p>The source files included are written in [Sass][sass] (<code>scss</code>) You can simply point your sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<pre><code class="hljs"><span class="hljs-keyword">@import</span> <span class="hljs-string">"@visual-framework/vf-badge/index.scss"</span>;</code></pre><p><em>Make sure you import Sass requirements along with the modules.</em></p>
<h2 id="usage">Usage</h2>
<p>If you are using the badge as a link, you must include the relevant url within the <code>href=&quot;&quot;</code> part of <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>, for example:</p>
<pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge vf-badge--phases vf-badge--primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>&gt;</span>badge title<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
<p>The <code>vf-badge</code> component is used to denote if a page, section, or link has a production state of <code>alpha</code>, <code>beta</code> or other information.</p>
<h3 id="content">Content</h3>
<p>The <code>vf-badge</code> accepts a single text item of content.</p>
<table>
<thead>
<tr>
<th>content type</th>
<th>variable</th>
<th>description</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td><code>text</code></td>
<td></td>
</tr>
</tbody></table>
<h3 id="nunjucks-and-yml-options">Nunjucks and yml options</h3>
<h4 id="nunjucks-and-yml-variables-available">Nunjucks and YML variables available</h4>
<table>
<thead>
<tr>
<th>variable</th>
<th>options</th>
<th>default</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td></td>
<td></td>
</tr>
<tr>
<td>badge_href</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>theme</td>
<td>‘primary’, ‘secondary’, ‘tertiary’</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>‘pill’, ‘rounded’, ‘square’, ‘outline’</td>
<td></td>
</tr>
<tr>
<td>override_class</td>
<td></td>
<td></td>
</tr>
<tr>
<td>id</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h4 id="component-specific-variants">Component Specific Variants</h4>
<p>The <code>vf-badge</code> allows for two sets of variants</p>
<h5 id="theme-variants">Theme Variants</h5>
<p>There are three theme variants available for the component that are <strong>primary</strong>, <strong>secondary</strong>, and <strong>tertiary</strong>. To add a theme to the component you would need to add <code>theme: primary</code>, <code>theme: secondary</code>, or <code>theme: tertiary</code> to the <code>.yml</code> file.</p>
<h5 id="design-variants">Design Variants</h5>
<p>There are four design variants for the component. We have <code>square</code>, <code>pill</code>, and <code>rounded</code> as well as <code>outline</code>. The <code>outline</code> 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 <code>[&quot;rounded&quot;]</code> but if we wanted to have a rounded button with the outline rather than filled colour we would have to write <code>[&quot;outline&quot;, &quot;rounded&quot;]</code>.</p>
<h2 id="help">Help</h2>
<ul>
<li><a href="https://visual-framework.github.io/vf-welcome/troubleshooting/">Read the Visual Framework troubleshooting</a></li>
<li><a href="https://github.com/visual-framework/vf-core/issues">Open a ticket</a></li>
<li><a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Chat on Slack</a></li>
</ul>
</div>
......@@ -340,6 +410,10 @@ class="vf-logo | vf-logo--has-text">
All notable changes to this project will be documented in this file.
See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-link">https://conventionalcommits.org</span>) for commit guidelines.
<span class="hljs-section"># 1.1.0</span>
<span class="hljs-bullet">
* </span>adds if statement to allow for context data to pass through
<span class="hljs-section"># 1.0.0 (2019-12-17)</span>
<span class="hljs-bullet">
* </span>Initial stable release
......@@ -358,7 +432,7 @@ See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-li
Filesystem path: components/vf-badge/CHANGELOG.md
</li>
<li class="vf-list__item">
Size: 214 Bytes
Size: 286 Bytes
</li>
</ul>
</section>
......
......@@ -260,13 +260,83 @@ class="vf-logo | vf-logo--has-text">
<p><a href="https://badge.fury.io/js/%40visual-framework%2Fvf-badge"><img src="https://badge.fury.io/js/%40visual-framework%2Fvf-badge.svg" alt="npm version"></a></p>
<h2 id="about">About</h2>
<p>The <code>vf-badge</code> component is used to label a page, part of a page, or a component. The <code>vf-badge</code> component can also be a link using <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>.</p>
<h2 id="install">Install</h2>
<p>This component is distributed with npm. After <a href="https://www.npmjs.com/get-npm">installing npm</a>, you can install the <code>vf-badge</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><p>The source files included are written in <a href="http://sass-lang.com">Sass</a>(<code>scss</code>). You can point your Sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<h2 id="installation">Installation</h2>
<p>This repository is distributed with <a href="https://www.npmjs.com/">npm</a>. After <a href="https://www.npmjs.com/get-npm">installing npm</a> and <a href="https://classic.yarnpkg.com/en/docs/install">yarn</a>, you can install <code>vf-profile</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><h3 id="sasscss">Sass/CSS</h3>
<p>The source files included are written in [Sass][sass] (<code>scss</code>) You can simply point your sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<pre><code class="hljs"><span class="hljs-keyword">@import</span> <span class="hljs-string">"@visual-framework/vf-badge/index.scss"</span>;</code></pre><p><em>Make sure you import Sass requirements along with the modules.</em></p>
<h2 id="usage">Usage</h2>
<p>If you are using the badge as a link, you must include the relevant url within the <code>href=&quot;&quot;</code> part of <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>, for example:</p>
<pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge vf-badge--phases vf-badge--primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>&gt;</span>badge title<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
<p>The <code>vf-badge</code> component is used to denote if a page, section, or link has a production state of <code>alpha</code>, <code>beta</code> or other information.</p>
<h3 id="content">Content</h3>
<p>The <code>vf-badge</code> accepts a single text item of content.</p>
<table>
<thead>
<tr>
<th>content type</th>
<th>variable</th>
<th>description</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td><code>text</code></td>
<td></td>
</tr>
</tbody></table>
<h3 id="nunjucks-and-yml-options">Nunjucks and yml options</h3>
<h4 id="nunjucks-and-yml-variables-available">Nunjucks and YML variables available</h4>
<table>
<thead>
<tr>
<th>variable</th>
<th>options</th>
<th>default</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td></td>
<td></td>
</tr>
<tr>
<td>badge_href</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>theme</td>
<td>‘primary’, ‘secondary’, ‘tertiary’</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>‘pill’, ‘rounded’, ‘square’, ‘outline’</td>
<td></td>
</tr>
<tr>
<td>override_class</td>
<td></td>
<td></td>
</tr>
<tr>
<td>id</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h4 id="component-specific-variants">Component Specific Variants</h4>
<p>The <code>vf-badge</code> allows for two sets of variants</p>
<h5 id="theme-variants">Theme Variants</h5>
<p>There are three theme variants available for the component that are <strong>primary</strong>, <strong>secondary</strong>, and <strong>tertiary</strong>. To add a theme to the component you would need to add <code>theme: primary</code>, <code>theme: secondary</code>, or <code>theme: tertiary</code> to the <code>.yml</code> file.</p>
<h5 id="design-variants">Design Variants</h5>
<p>There are four design variants for the component. We have <code>square</code>, <code>pill</code>, and <code>rounded</code> as well as <code>outline</code>. The <code>outline</code> 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 <code>[&quot;rounded&quot;]</code> but if we wanted to have a rounded button with the outline rather than filled colour we would have to write <code>[&quot;outline&quot;, &quot;rounded&quot;]</code>.</p>
<h2 id="help">Help</h2>
<ul>
<li><a href="https://visual-framework.github.io/vf-welcome/troubleshooting/">Read the Visual Framework troubleshooting</a></li>
<li><a href="https://github.com/visual-framework/vf-core/issues">Open a ticket</a></li>
<li><a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Chat on Slack</a></li>
</ul>
</div>
......@@ -340,6 +410,10 @@ class="vf-logo | vf-logo--has-text">
All notable changes to this project will be documented in this file.
See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-link">https://conventionalcommits.org</span>) for commit guidelines.
<span class="hljs-section"># 1.1.0</span>
<span class="hljs-bullet">
* </span>adds if statement to allow for context data to pass through
<span class="hljs-section"># 1.0.0 (2019-12-17)</span>
<span class="hljs-bullet">
* </span>Initial stable release
......@@ -358,7 +432,7 @@ See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-li
Filesystem path: components/vf-badge/CHANGELOG.md
</li>
<li class="vf-list__item">
Size: 214 Bytes
Size: 286 Bytes
</li>
</ul>
</section>
......
......@@ -260,13 +260,83 @@ class="vf-logo | vf-logo--has-text">
<p><a href="https://badge.fury.io/js/%40visual-framework%2Fvf-badge"><img src="https://badge.fury.io/js/%40visual-framework%2Fvf-badge.svg" alt="npm version"></a></p>
<h2 id="about">About</h2>
<p>The <code>vf-badge</code> component is used to label a page, part of a page, or a component. The <code>vf-badge</code> component can also be a link using <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>.</p>
<h2 id="install">Install</h2>
<p>This component is distributed with npm. After <a href="https://www.npmjs.com/get-npm">installing npm</a>, you can install the <code>vf-badge</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><p>The source files included are written in <a href="http://sass-lang.com">Sass</a>(<code>scss</code>). You can point your Sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<h2 id="installation">Installation</h2>
<p>This repository is distributed with <a href="https://www.npmjs.com/">npm</a>. After <a href="https://www.npmjs.com/get-npm">installing npm</a> and <a href="https://classic.yarnpkg.com/en/docs/install">yarn</a>, you can install <code>vf-profile</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><h3 id="sasscss">Sass/CSS</h3>
<p>The source files included are written in [Sass][sass] (<code>scss</code>) You can simply point your sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<pre><code class="hljs"><span class="hljs-keyword">@import</span> <span class="hljs-string">"@visual-framework/vf-badge/index.scss"</span>;</code></pre><p><em>Make sure you import Sass requirements along with the modules.</em></p>
<h2 id="usage">Usage</h2>
<p>If you are using the badge as a link, you must include the relevant url within the <code>href=&quot;&quot;</code> part of <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>, for example:</p>
<pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge vf-badge--phases vf-badge--primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>&gt;</span>badge title<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
<p>The <code>vf-badge</code> component is used to denote if a page, section, or link has a production state of <code>alpha</code>, <code>beta</code> or other information.</p>
<h3 id="content">Content</h3>
<p>The <code>vf-badge</code> accepts a single text item of content.</p>
<table>
<thead>
<tr>
<th>content type</th>
<th>variable</th>
<th>description</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td><code>text</code></td>
<td></td>
</tr>
</tbody></table>
<h3 id="nunjucks-and-yml-options">Nunjucks and yml options</h3>
<h4 id="nunjucks-and-yml-variables-available">Nunjucks and YML variables available</h4>
<table>
<thead>
<tr>
<th>variable</th>
<th>options</th>
<th>default</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td></td>
<td></td>
</tr>
<tr>
<td>badge_href</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>theme</td>
<td>‘primary’, ‘secondary’, ‘tertiary’</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>‘pill’, ‘rounded’, ‘square’, ‘outline’</td>
<td></td>
</tr>
<tr>
<td>override_class</td>
<td></td>
<td></td>
</tr>
<tr>
<td>id</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h4 id="component-specific-variants">Component Specific Variants</h4>
<p>The <code>vf-badge</code> allows for two sets of variants</p>
<h5 id="theme-variants">Theme Variants</h5>
<p>There are three theme variants available for the component that are <strong>primary</strong>, <strong>secondary</strong>, and <strong>tertiary</strong>. To add a theme to the component you would need to add <code>theme: primary</code>, <code>theme: secondary</code>, or <code>theme: tertiary</code> to the <code>.yml</code> file.</p>
<h5 id="design-variants">Design Variants</h5>
<p>There are four design variants for the component. We have <code>square</code>, <code>pill</code>, and <code>rounded</code> as well as <code>outline</code>. The <code>outline</code> 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 <code>[&quot;rounded&quot;]</code> but if we wanted to have a rounded button with the outline rather than filled colour we would have to write <code>[&quot;outline&quot;, &quot;rounded&quot;]</code>.</p>
<h2 id="help">Help</h2>
<ul>
<li><a href="https://visual-framework.github.io/vf-welcome/troubleshooting/">Read the Visual Framework troubleshooting</a></li>
<li><a href="https://github.com/visual-framework/vf-core/issues">Open a ticket</a></li>
<li><a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Chat on Slack</a></li>
</ul>
</div>
......@@ -340,6 +410,10 @@ class="vf-logo | vf-logo--has-text">
All notable changes to this project will be documented in this file.
See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-link">https://conventionalcommits.org</span>) for commit guidelines.
<span class="hljs-section"># 1.1.0</span>
<span class="hljs-bullet">
* </span>adds if statement to allow for context data to pass through
<span class="hljs-section"># 1.0.0 (2019-12-17)</span>
<span class="hljs-bullet">
* </span>Initial stable release
......@@ -358,7 +432,7 @@ See [<span class="hljs-string">Conventional Commits</span>](<span class="hljs-li
Filesystem path: components/vf-badge/CHANGELOG.md
</li>
<li class="vf-list__item">
Size: 214 Bytes
Size: 286 Bytes
</li>
</ul>
</section>
......
......@@ -260,13 +260,83 @@ class="vf-logo | vf-logo--has-text">
<p><a href="https://badge.fury.io/js/%40visual-framework%2Fvf-badge"><img src="https://badge.fury.io/js/%40visual-framework%2Fvf-badge.svg" alt="npm version"></a></p>
<h2 id="about">About</h2>
<p>The <code>vf-badge</code> component is used to label a page, part of a page, or a component. The <code>vf-badge</code> component can also be a link using <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>.</p>
<h2 id="install">Install</h2>
<p>This component is distributed with npm. After <a href="https://www.npmjs.com/get-npm">installing npm</a>, you can install the <code>vf-badge</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><p>The source files included are written in <a href="http://sass-lang.com">Sass</a>(<code>scss</code>). You can point your Sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<h2 id="installation">Installation</h2>
<p>This repository is distributed with <a href="https://www.npmjs.com/">npm</a>. After <a href="https://www.npmjs.com/get-npm">installing npm</a> and <a href="https://classic.yarnpkg.com/en/docs/install">yarn</a>, you can install <code>vf-profile</code> with this command.</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> --dev @visual-framework/vf-badge</span></code></pre><h3 id="sasscss">Sass/CSS</h3>
<p>The source files included are written in [Sass][sass] (<code>scss</code>) You can simply point your sass <code>include-path</code> at your <code>node_modules</code> directory and import it like this.</p>
<pre><code class="hljs"><span class="hljs-keyword">@import</span> <span class="hljs-string">"@visual-framework/vf-badge/index.scss"</span>;</code></pre><p><em>Make sure you import Sass requirements along with the modules.</em></p>
<h2 id="usage">Usage</h2>
<p>If you are using the badge as a link, you must include the relevant url within the <code>href=&quot;&quot;</code> part of <code>&lt;a class=&quot;vf-badge&quot; href=&quot;&quot;&gt;badge title&lt;/a&gt;</code>, for example:</p>
<pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge vf-badge--phases vf-badge--primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span>&gt;</span>badge title<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
<p>The <code>vf-badge</code> component is used to denote if a page, section, or link has a production state of <code>alpha</code>, <code>beta</code> or other information.</p>
<h3 id="content">Content</h3>
<p>The <code>vf-badge</code> accepts a single text item of content.</p>
<table>
<thead>
<tr>
<th>content type</th>
<th>variable</th>
<th>description</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td><code>text</code></td>
<td></td>
</tr>
</tbody></table>
<h3 id="nunjucks-and-yml-options">Nunjucks and yml options</h3>
<h4 id="nunjucks-and-yml-variables-available">Nunjucks and YML variables available</h4>
<table>
<thead>
<tr>
<th>variable</th>
<th>options</th>
<th>default</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td></td>
<td></td>
</tr>
<tr>
<td>badge_href</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>theme</td>
<td>‘primary’, ‘secondary’, ‘tertiary’</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>‘pill’, ‘rounded’, ‘square’, ‘outline’</td>
<td></td>
</tr>
<tr>
<td>override_class</td>
<td></td>
<td></td>
</tr>
<tr>
<td>id</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h4 id="component-specific-variants">Component Specific Variants</h4>
<p>The <code>vf-badge</code> allows for two sets of variants</p>
<h5 id="theme-variants">Theme Variants</h5>
<p>There are three theme variants available for the component that are <strong>primary</strong>, <strong>secondary</strong>, and <strong>tertiary</strong>. To add a theme to the component you would need to add <code>theme: primary</code>, <code>theme: secondary</code>, or <code>theme: tertiary</code> to the <code>.yml</code> file.</p>
<h5 id="design-variants">Design Variants</h5>
<p>There are four design variants for the component. We have <code>square</code>, <code>pill</code>, and <code>rounded</code> as well as <code>outline</code>. The <code>outline</code> 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 <code>[&quot;rounded&quot;]</code> but if we wanted to have a rounded button with the outline rather than filled colour we would have to write <code>[&quot;outline&quo