jira-web-components
Version:
A web component library for JiRa
817 lines (391 loc) • 19.8 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>Text Wrapper | 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="../../index.html" 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="Pen" data-behaviour="pen" id="pen-eeb09e2551a0b7b329af0b9260905263">
<div class="Pen-panel Pen-header">
<h1 class="Pen-title">
<a class="Pen-previewLink" href="../preview/text-wrapper.html" title="Component preview">
Text Wrapper
<svg fill="#000000" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/>
</svg>
</a>
</h1>
<div class="Status Status--tag">
<label class="Status-label" style="background-color: #29CC29; border-color: #29CC29;">Ready</label>
</div>
</div>
<div class="Pen-panel Pen-preview Preview" data-behaviour="preview" id="preview-eeb09e2551a0b7b329af0b9260905263">
<div class="Preview-wrapper" data-role="resizer">
<div class="Preview-resizer">
<iframe
class="Preview-iframe"
data-role="window"
src="../preview/text-wrapper.html"
sandbox="allow-same-origin allow-scripts allow-forms allow-modals"
style=""
marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" scrolling="yes">
</iframe>
</div>
<div class="Preview-handle" data-role="resize-handle"></div>
<div class="Preview-overlay"></div>
</div>
</div>
<div class="Pen-handle Pen-handle--browser" data-role="resize-handle"></div>
<div class="Pen-panel Pen-info" data-role="info">
<div class="Browser" data-behaviour="browser" id="browser-eeb09e2551a0b7b329af0b9260905263">
<div class="Browser-controls">
<ul class="Browser-tabs">
<li class="Browser-tab Browser-tab--html is-active " data-role="tab">
<a href="#browser-eeb09e2551a0b7b329af0b9260905263-panel-html">HTML</a>
</li>
<li class="Browser-tab Browser-tab--view" data-role="tab">
<a href="#browser-eeb09e2551a0b7b329af0b9260905263-panel-view">View</a>
</li>
<li class="Browser-tab Browser-tab--context" data-role="tab">
<a href="#browser-eeb09e2551a0b7b329af0b9260905263-panel-context">Context</a>
</li>
<li class="Browser-tab Browser-tab--info" data-role="tab">
<a href="#browser-eeb09e2551a0b7b329af0b9260905263-panel-info">Info</a>
</li>
<li class="Browser-tab Browser-tab--notes" data-role="tab">
<a href="#browser-eeb09e2551a0b7b329af0b9260905263-panel-notes">Notes</a>
</li>
</ul>
</div>
<div class="Browser-panel Browser-code is-active" data-role="tab-panel" id="browser-eeb09e2551a0b7b329af0b9260905263-panel-html">
<code class="Code Code--lang-html">
<pre><span class="hljs-tag"><<span class="hljs-name">jira-text-wrapper</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum [JIRA:KITT-128] dolor sit [JIRA:PD-120] amet<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum [JIRA:REISS-30] dolor sit [JIRA:PD-119] amet<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum [JIRA:KITT-100] dolor sit [JIRA:SCS-111] amet<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum [JIRA:KITT-100] dolor sit [JIRA:SCS-111] amet<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">jira-text-wrapper</span>></span></pre>
</code>
</div>
<div class="Browser-panel Browser-code" data-role="tab-panel" id="browser-eeb09e2551a0b7b329af0b9260905263-panel-view">
<code class="Code Code--lang-text">
<pre><jira-<span class="hljs-type">text</span>-<span class="hljs-keyword">wrapper</span>>
<p>Lorem ipsum [JIRA:KITT<span class="hljs-number">-128</span>] dolor sit [JIRA:PD<span class="hljs-number">-120</span>] amet</p>
<p>Lorem ipsum [JIRA:REISS<span class="hljs-number">-30</span>] dolor sit [JIRA:PD<span class="hljs-number">-119</span>] amet</p>
<p>Lorem ipsum [JIRA:KITT<span class="hljs-number">-100</span>] dolor sit [JIRA:SCS<span class="hljs-number">-111</span>] amet</p>
<p>Lorem ipsum [JIRA:KITT<span class="hljs-number">-100</span>] dolor sit [JIRA:SCS<span class="hljs-number">-111</span>] amet</p>
</jira-<span class="hljs-type">text</span>-<span class="hljs-keyword">wrapper</span>></pre>
</code>
</div>
<div class="Browser-panel Browser-code" data-role="tab-panel" id="browser-eeb09e2551a0b7b329af0b9260905263-panel-context">
<code class="Code Code--lang-json">
<pre><span class="hljs-comment">/* No context defined for this component. */</span></pre>
</code>
</div>
<div class="Browser-panel" data-role="tab-panel" id="browser-eeb09e2551a0b7b329af0b9260905263-panel-info">
<ul class="Meta">
<li class="Meta-item">
<strong class="Meta-key">Handle:</strong>
<span class="Meta-value">@text-wrapper</span>
</li>
<li class="Meta-item">
<strong class="Meta-key">Preview:</strong>
<span class="Meta-value">
<ul>
<li><a data-no-pjax href="../preview/text-wrapper.html"><span>With layout</span> <svg fill="#000000" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/>
</svg>
</a></li>
<li><a data-no-pjax href="../render/text-wrapper.html"><span>Component only</span> <svg fill="#000000" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/>
</svg>
</a></li>
</ul>
</span>
</li>
<li class="Meta-item">
<strong class="Meta-key">Filesystem Path:</strong>
<span class="Meta-value">src/text/TextWrapper.preview.nunj</span>
</li>
<li class="Meta-item">
<strong class="Meta-key">Referenced by <em class="Meta-count">(1)</em>:</strong>
<span class="Meta-value Meta-value--linkList">
<a href="all-components.html">@<span>all-components</span></a>
</span>
</li>
</ul>
</div>
<div class="Browser-panel Browser-notes" data-role="tab-panel" id="browser-eeb09e2551a0b7b329af0b9260905263-panel-notes">
<div class="Prose Prose--condensed">
<p class="Browser-isEmptyNote">There are no notes for this item.</p>
</div>
</div>
</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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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 is-current" data-state="current" data-role="item">
<a class="Tree-entityLink" href="" 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>