Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add breadcrumb component README documentation #551

Merged
merged 2 commits into from Apr 17, 2021
Merged

Add breadcrumb component README documentation #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5285658
docs: update the component description
sebnitu Apr 7, 2021
0fb7919
docs: add README docs and update docs web page to match
sebnitu Apr 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
122 changes: 121 additions & 1 deletion docs/_packages/breadcrumb.md
View file
Open in desktop
@@ -1,7 +1,7 @@
---
layout: article
title: Breadcrumb
description: "The breadcrumb component is a navigation component that shows the hierarchical path to a users current location."
description: "A navigation component that shows the hierarchical path to a users current location."
package: "@vrembem/breadcrumb"
category: compound
usage:
Expand All @@ -11,6 +11,8 @@ usage:

## breadcrumb

The breadcrumb component is composed of three parts: `breadcrumb`, `breadcrumb__item` and `breadcrumb__link`.

{% include demo_open.html class_grid="grid_stack" %}
<ol class="breadcrumb">
<li class="breadcrumb__item">
Expand Down Expand Up @@ -42,6 +44,8 @@ usage:

## breadcrumb_invert

Inverts the colors of the breadcrumb component to be used on dark backgrounds when more contrast is needed.

{% include demo_open.html class_grid="grid_stack" %}
<div class="padding background-night radius">
<ol class="breadcrumb breadcrumb_invert">
Expand All @@ -66,3 +70,119 @@ usage:
</ol>
```
{% include demo_close.html %}

## Sass Variables

<div class="scroll-box">
<table class="table table_style_bordered table_zebra table_hover table_responsive_lg">
<thead>
<tr>
<th>Variable</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<!-- Prefixes -->
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$prefix-block</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">null</code></td>
<td data-mobile-label="Desc">String to prefix blocks with.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$prefix-element</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">"__"</code></td>
<td data-mobile-label="Desc">String to prefix elements with.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$prefix-modifier</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">"_"</code></td>
<td data-mobile-label="Desc">String to prefix modifiers with.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$prefix-modifier-value</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">"_"</code></td>
<td data-mobile-label="Desc">String to prefix modifier values with.</td>
</tr>
<!-- General -->
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$color</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$color-subtle</code></td>
<td data-mobile-label="Desc">Sets the color property.</td>
</tr>
<!-- Delimiter -->
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$delimiter</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">"/"</code></td>
<td data-mobile-label="Desc">Sets the delimiter character used after each <code class="code">breadcrumb__item</code> element.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$delimiter-color</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$border-color-dark</code></td>
<td data-mobile-label="Desc">Sets the color property for the delimiter character.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$delimiter-padding</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">0 0.5em</code></td>
<td data-mobile-label="Desc">Sets the padding property for the delimiter character.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$delimiter-last</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">false</code></td>
<td data-mobile-label="Desc">Whether or not to render the delimiter at the end of the breadcrumb.</td>
</tr>
<!-- Link element -->
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$link-color</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">base.$link-color</code></td>
<td data-mobile-label="Desc">Sets the color property on the <code class="code">breadcrumb__link</code> element.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$link-color-hover</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">base.$link-color-hover</code></td>
<td data-mobile-label="Desc">Sets the color property on the <code class="code">breadcrumb__link</code> element for its <code class="code">:hover</code> state.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$link-border</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$border</code></td>
<td data-mobile-label="Desc">Sets the border property on the <code class="code">breadcrumb__link</code> element.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$link-border-hover</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">1px solid base.$link-color-hover</code></td>
<td data-mobile-label="Desc">Sets the border property on the <code class="code">breadcrumb__link</code> element for its <code class="code">:hover</code> state.</td>
</tr>
<!-- Invert modifier -->
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$invert-color</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$color-invert-subtle</code></td>
<td data-mobile-label="Desc">Sets the color property on the <code class="code">breadcrumb_invert</code> modifier.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$invert-delimiter-color</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$border-color-invert-dark</code></td>
<td data-mobile-label="Desc">Sets the color property for the delimiter character on the <code class="code">breadcrumb_invert</code> modifier.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$invert-link-color</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">base.$link-invert-color</code></td>
<td data-mobile-label="Desc">Sets the color property on the <code class="code">breadcrumb__link</code> element on the <code class="code">breadcrumb_invert</code> modifier.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$invert-link-color-hover</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">base.$link-invert-color-hover</code></td>
<td data-mobile-label="Desc">Sets the color property on the <code class="code">breadcrumb__link</code> element on the <code class="code">breadcrumb_invert</code> modifier for its <code class="code">:hover</code> state.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$invert-link-border</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$border-invert</code></td>
<td data-mobile-label="Desc">Sets the border property on the <code class="code">breadcrumb__link</code> element on the <code class="code">breadcrumb_invert</code> modifier.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$invert-link-border-hover</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">1px solid core.$white</code></td>
<td data-mobile-label="Desc">Sets the border property on the <code class="code">breadcrumb__link</code> element on the <code class="code">breadcrumb_invert</code> modifier for its <code class="code">:hover</code> state.</td>
</tr>
</tbody>
</table>
</div>
68 changes: 67 additions & 1 deletion packages/breadcrumb/README.md
View file
Open in desktop
@@ -1,7 +1,73 @@
# Breadcrumb

The breadcrumb component is a navigation component that shows the hierarchical path to a users current location.
A navigation component that shows the hierarchical path to a users current location.

[![npm version](https://img.shields.io/npm/v/%40vrembem%2Fbreadcrumb.svg)](https://www.npmjs.com/package/%40vrembem%2Fbreadcrumb)

[Documentation](https://vrembem.com/packages/breadcrumb)

## Installation

```sh
npm install @vrembem/breadcrumb
```

### Styles

```scss
@use "@vrembem/breadcrumb";
```

### Markup

The breadcrumb component is composed of three parts: `breadcrumb`, `breadcrumb__item` and `breadcrumb__link`.

```html
<ol class="breadcrumb">
<li class="breadcrumb__item">
<a href="/" class="breadcrumb__link">Home</a>
</li>
...
<li class="breadcrumb__item">
Current Page
</li>
</ol>
```

## Modifiers

### `breadcrumb_invert`

Inverts the colors of the breadcrumb component to be used on dark backgrounds when more contrast is needed.

```html
<ol class="breadcrumb breadcrumb_invert">
...
</ol>
```

## Customization

### Sass Variables

| Variable | Default | Description |
| --------------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `$prefix-block` | `null` | String to prefix blocks with. |
| `$prefix-element` | `"__"` | String to prefix element with. |
| `$prefix-modifier` | `"_"` | String to prefix modifier with. |
| `$prefix-modifier-value` | `"_"` | String to prefix modifier values with. |
| `$color` | `core.$color-subtle` | Sets the color property. |
| `$delimiter` | `"/"` | Sets the delimiter character used after each `breadcrumb__item` element. |
| `$delimiter-color` | `core.$border-color-dark` | Sets the color property for the delimiter character. |
| `$delimiter-padding` | `0 0.5em` | Sets the padding property for the delimiter character. |
| `$delimiter-last` | `false` | Whether or not to render the delimiter at the end of the breadcrumb. |
| `$link-color` | `base.$link-color` | Sets the color property on the `breadcrumb__link` element. |
| `$link-color-hover` | `base.$link-color-hover` | Sets the color property on the `breadcrumb__link` element for its `:hover` state. |
| `$link-border` | `core.$border` | Sets the border property on the `breadcrumb__link` element. |
| `$link-border-hover` | `1px solid base.$link-color-hover` | Sets the border property on the `breadcrumb__link` element for its `:hover` state. |
| `$invert-color` | `core.$color-invert-subtle` | Sets the color property on the `breadcrumb_invert` modifier. |
| `$invert-delimiter-color` | `core.$border-color-invert-dark` | Sets the color property for the delimiter character on the `breadcrumb_invert` modifier. |
| `$invert-link-color` | `base.$link-invert-color` | Sets the color property on the `breadcrumb__link` element on the `breadcrumb_invert` modifier. |
| `$invert-link-color-hover` | `base.$link-invert-color-hover` | Sets the color property on the `breadcrumb__link` element on the `breadcrumb_invert` modifier for its `:hover` state. |
| `$invert-link-border` | `core.$border-invert` | Sets the border property on the `breadcrumb__link` element on the `breadcrumb_invert` modifier. |
| `$invert-link-border-hover` | `1px solid core.$white` | Sets the border property on the `breadcrumb__link` element on the `breadcrumb_invert` modifier for its `:hover` state. |
2 changes: 1 addition & 1 deletion packages/breadcrumb/package.json
View file
Open in desktop
@@ -1,6 +1,6 @@
{
"name": "@vrembem/breadcrumb",
"description": "The breadcrumb component is a navigation component that shows the hierarchical path to a users current location.",
"description": "A navigation component that shows the hierarchical path to a users current location.",
"version": "1.22.3",
"license": "MIT",
"keywords": [
Expand Down