jira-web-components
Version:
A web component library for JiRa
688 lines (312 loc) • 13.6 kB
HTML
<html lang="en" dir="ltr" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.frctl = {
env: 'static'
};
</script>
<script>var cl = document.querySelector('html').classList; cl.remove('no-js'); cl.add('has-js');</script>
<link rel="shortcut icon" href="themes/mandelbrot/favicon.ico" type="image/ico">
<link rel="stylesheet" href="themes/mandelbrot/css/grey.css?cachebust=1.2.1" type="text/css">
<title>JiRa web components | JiRa web components</title>
</head>
<body>
<div class="Frame" id="frame">
<div class="Frame-header">
<div class="Header">
<button class="Header-button Header-navToggle" data-action="toggle-sidebar">
<svg class="Header-navToggleIcon Header-navToggleIcon--open" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/>
</svg>
<svg class="Header-navToggleIcon Header-navToggleIcon--closed" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
</button>
<a href="" class="Header-title" data-pjax>JiRa web components</a>
</div>
</div>
<div class="Frame-body" data-role="body">
<div class="Frame-panel Frame-panel--main" data-role="main">
<div class="Frame-inner" id="pjax-container">
<div class="Document">
<div class="Document-header">
<h1 class="Document-title">JiRa web components</h1>
</div>
<div class="Document-content">
<div class="Prose">
<p>You can browse the component library using the navigation on the left.</p>
<h3>Component statuses</h3>
<p>Components and their variants have been given statuses reflecting their state of completion. The available statuses are listed below.</p>
<table>
<tr>
<th>Label</th>
<th>Description</th>
</tr>
<tr>
<td>
<div class="Status Status--tag">
<label class="Status-label" style="background-color: #FF3333; border-color: #FF3333;">Prototype</label>
</div>
</td>
<td>Do not implement.</td>
</tr>
<tr>
<td>
<div class="Status Status--tag">
<label class="Status-label" style="background-color: #FF9233; border-color: #FF9233;">WIP</label>
</div>
</td>
<td>Work in progress. Implement with caution.</td>
</tr>
<tr>
<td>
<div class="Status Status--tag">
<label class="Status-label" style="background-color: #29CC29; border-color: #29CC29;">Ready</label>
</div>
</td>
<td>Ready to implement.</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="Frame-handle" data-role="frame-resize-handle"></div>
<div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
<nav class="Navigation">
<div class="Navigation-group">
<div class="Tree" data-behaviour="tree" id="tree-components">
<h3 class="Tree-title">components</h3>
<ul class="Tree-items Tree-depth-1">
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/all-components.html" data-pjax>
<span>All Components</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
<li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-auth">
<h4 class="Tree-collectionLabel" data-role="toggle">
<span>Auth</span>
</h4>
<ul class="Tree-collectionItems" data-role="items">
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/auth.html" data-pjax>
<span>Auth</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/auth-form.html" data-pjax>
<span>Auth Form</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/auth-user-card.html" data-pjax>
<span>Auth User Card</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-board">
<h4 class="Tree-collectionLabel" data-role="toggle">
<span>Board</span>
</h4>
<ul class="Tree-collectionItems" data-role="items">
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/board-panel.html" data-pjax>
<span>Board Panel</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/board-select.html" data-pjax>
<span>Board Select</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/boards.html" data-pjax>
<span>Boards</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-global">
<h4 class="Tree-collectionLabel" data-role="toggle">
<span>Global</span>
</h4>
<ul class="Tree-collectionItems" data-role="items">
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/config.html" data-pjax>
<span>Config</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-issue">
<h4 class="Tree-collectionLabel" data-role="toggle">
<span>Issue</span>
</h4>
<ul class="Tree-collectionItems" data-role="items">
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/issue.html" data-pjax>
<span>Issue</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/issue-tag.html" data-pjax>
<span>Issue Tag</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-project">
<h4 class="Tree-collectionLabel" data-role="toggle">
<span>Project</span>
</h4>
<ul class="Tree-collectionItems" data-role="items">
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/project-card.html" data-pjax>
<span>Project Card</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/project-select.html" data-pjax>
<span>Project Select</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/projects.html" data-pjax>
<span>Projects</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-status">
<h4 class="Tree-collectionLabel" data-role="toggle">
<span>Status</span>
</h4>
<ul class="Tree-collectionItems" data-role="items">
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/status.html" data-pjax>
<span>Status</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/status-tag.html" data-pjax>
<span>Status Tag</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-text">
<h4 class="Tree-collectionLabel" data-role="toggle">
<span>Text</span>
</h4>
<ul class="Tree-collectionItems" data-role="items">
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/text-wrapper.html" data-pjax>
<span>Text Wrapper</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="Navigation-group">
<div class="Tree" data-behaviour="tree" id="tree-docs">
<h3 class="Tree-title">documentation</h3>
<ul class="Tree-items Tree-depth-1">
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<script src="themes/mandelbrot/js/mandelbrot.js?cachebust=1.2.1"></script>
</body>
</html>