@adobe/coral-spectrum
Version:
Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.
289 lines (271 loc) • 26.4 kB
HTML
<html>
<head>
<meta charset="utf-8">
<base data-ice="baseUrl" href="../">
<title data-ice="title">Manual | Coral Spectrum</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
<script src="script/prettify/prettify.js"></script>
<script src="script/manual.js"></script>
<script src="./inject/script/0-typekit.js"></script><script src="./inject/script/0-guide.js"></script><link rel="stylesheet" href="./inject/css/0-guide.css"><meta name="description" content="Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns."><meta property="twitter:card" content="summary"><meta property="twitter:title" content="Coral Spectrum"><meta property="twitter:description" content="Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns."></head>
<body class="layout-container manual-root" data-ice="rootContainer">
<header>
<a href="./" style="display: flex; align-items: center;"><img src="./image/brand_logo.svg" style="width:34px;"></a>
<a href="identifiers.html">Reference</a>
<a href="source.html">Source</a>
<div class="search-box">
<span>
<img src="./image/search.png">
<span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
</span>
<ul class="search-result"></ul>
</div>
<a style="position:relative; top:3px;" href="https://github.com/adobe/coral-spectrum"><img width="20px" src="./image/github.png"></a></header>
<nav class="navigation" data-ice="nav"><div class="manual-toc-root">
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/README.html"><a href="manual/README.html#coral-spectrum--img-src--https---github-com-adobe-coral-spectrum-workflows-unit-20tests-20and-20accessibility-20ci-badge-svg--alt--build-status--" data-ice="link">Coral Spectrum </a></li>
<li data-ice="manualNav" class="indent-h1" data-link="manual/README.html"><a href="manual/README.html#important" data-ice="link">Important</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/README.html"><a href="manual/README.html#showcase" data-ice="link">Showcase</a></li>
<li data-ice="manualNav" class="indent-h4" data-link="manual/README.html"><a href="manual/README.html#-a-href--http---opensource-adobe-com-coral-spectrum-examples--component-examples--a-" data-ice="link">Component Examples</a></li>
<li data-ice="manualNav" class="indent-h4" data-link="manual/README.html"><a href="manual/README.html#-a-href--http---opensource-adobe-com-coral-spectrum-documentation-identifiers-html--api-references--a-" data-ice="link">API References</a></li>
<li data-ice="manualNav" class="indent-h4" data-link="manual/README.html"><a href="manual/README.html#-a-href--http---opensource-adobe-com-coral-spectrum-playground--playground--a-" data-ice="link">Playground</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/README.html"><a href="manual/README.html#spectrum" data-ice="link">Spectrum</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/README.html"><a href="manual/README.html#angular--react--vue-js-compatibility" data-ice="link">Angular, React, Vue.js compatibility</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/README.html"><a href="manual/README.html#browser-support" data-ice="link">Browser support</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/README.html"><a href="manual/README.html#theme--light--dark--lightest--darkest-" data-ice="link">Theme (light, dark, lightest, darkest)</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/README.html"><a href="manual/README.html#large-scale-support" data-ice="link">Large scale support</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/README.html"><a href="manual/README.html#built-in-accessibility-and-keyboard-support" data-ice="link">Built-in Accessibility and Keyboard support</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/README.html"><a href="manual/README.html#internationalization-support" data-ice="link">Internationalization support</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/README.html"><a href="manual/README.html#using-coral-spectrum" data-ice="link">Using Coral Spectrum</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/README.html"><a href="manual/README.html#easiest-way-via-a-cdn" data-ice="link">Easiest way via a CDN</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/README.html"><a href="manual/README.html#copying-the-distribution-files" data-ice="link">Copying the distribution files</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/README.html"><a href="manual/README.html#including-entire-library-with-a-bundler-like-parcel" data-ice="link">Including entire library with a bundler like parcel</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/README.html"><a href="manual/README.html#including-only-the-components-you-need" data-ice="link">Including only the components you need</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/README.html"><a href="manual/README.html#contributing" data-ice="link">Contributing</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/README.html"><a href="manual/README.html#building-and-testing" data-ice="link">Building and Testing</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/README.html"><a href="manual/README.html#releasing" data-ice="link">Releasing</a></li>
<li data-ice="manualNav" class="indent-h4" data-link="manual/README.html"><a href="manual/README.html#automatic-release-" data-ice="link">Automatic release:</a></li>
<li data-ice="manualNav" class="indent-h4" data-link="manual/README.html"><a href="manual/README.html#manual-releasing-" data-ice="link">Manual releasing:</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/overview.html"><a href="manual/overview.html" data-ice="link">Overview</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/overview.html"><a href="manual/overview.html#introduction" data-ice="link">Introduction</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/overview.html"><a href="manual/overview.html#unified-experience" data-ice="link">Unified Experience</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/overview.html"><a href="manual/overview.html#enhanced-api" data-ice="link">Enhanced API</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/overview.html"><a href="manual/overview.html#future-thinking" data-ice="link">Future Thinking</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/overview.html"><a href="manual/overview.html#spectrum" data-ice="link">Spectrum</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/overview.html"><a href="manual/overview.html#built-in-accessibility-and-keyboard-support" data-ice="link">Built-in Accessibility and Keyboard support</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/overview.html"><a href="manual/overview.html#internationalization-support" data-ice="link">Internationalization support</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/overview.html"><a href="manual/overview.html#browser-support" data-ice="link">Browser Support</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/overview.html"><a href="manual/overview.html#backwards-compatibility" data-ice="link">Backwards Compatibility</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/manual.html"><a href="manual/manual.html" data-ice="link">Manual</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/manual.html"><a href="manual/manual.html#using-coral-spectrum" data-ice="link">Using Coral Spectrum</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/manual.html"><a href="manual/manual.html#easiest-way-via-a-cdn" data-ice="link">Easiest way via a CDN</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/manual.html"><a href="manual/manual.html#copying-the-distribution-files" data-ice="link">Copying the distribution files</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/manual.html"><a href="manual/manual.html#using-a-bundler-like-webpack" data-ice="link">Using a bundler like Webpack</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/manual.html"><a href="manual/manual.html#building-and-testing" data-ice="link">Building and Testing</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/manual.html"><a href="manual/manual.html#releasing" data-ice="link">Releasing</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/upgrade.html"><a href="manual/upgrade.html" data-ice="link">Upgrade</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/upgrade.html"><a href="manual/upgrade.html#from-coralui3-to-coral-spectrum" data-ice="link">From CoralUI3 to Coral Spectrum</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#custom-elements-v1" data-ice="link">Custom Elements v1</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#spectrum" data-ice="link">Spectrum</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#performance" data-ice="link">Performance</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#overlay-mechanism" data-ice="link">Overlay mechanism</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/upgrade.html"><a href="manual/upgrade.html#upgrade-changes" data-ice="link">Upgrade changes</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#custom-elements-v1" data-ice="link">Custom Elements v1</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#spectrum" data-ice="link">Spectrum</a></li>
<li data-ice="manualNav" class="indent-h4" data-link="manual/upgrade.html"><a href="manual/upgrade.html#selection-pattern-for-table--columnview-and-masonry" data-ice="link">Selection pattern for Table, ColumnView and Masonry</a></li>
<li data-ice="manualNav" class="indent-h4" data-link="manual/upgrade.html"><a href="manual/upgrade.html#svg-icons" data-ice="link">SVG Icons</a></li>
<li data-ice="manualNav" class="indent-h4" data-link="manual/upgrade.html"><a href="manual/upgrade.html#unsupported-styles" data-ice="link">Unsupported styles</a></li>
<li data-ice="manualNav" class="indent-h4" data-link="manual/upgrade.html"><a href="manual/upgrade.html#internal-private-markup-and-classes" data-ice="link">Internal private markup and classes</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#parent-child-component-events" data-ice="link">Parent-child component events</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#dependencies" data-ice="link">Dependencies</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#api-changes" data-ice="link">API changes</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/upgrade.html"><a href="manual/upgrade.html#compatibility-with-coralui3" data-ice="link">Compatibility with CoralUI3</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#coral-register" data-ice="link">Coral.register</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#coral-commons-ready" data-ice="link">Coral.commons.ready</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/upgrade.html"><a href="manual/upgrade.html#off-line-custom-elements-v0-creation" data-ice="link">Off-line Custom Elements v0 creation</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/styles.html"><a href="manual/styles.html" data-ice="link">Styles</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/styles.html"><a href="manual/styles.html#theme--light--dark--lightest--darkest-" data-ice="link">Theme (light, dark, lightest, darkest)</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/styles.html"><a href="manual/styles.html#large-scale-support" data-ice="link">Large scale support</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/styles.html"><a href="manual/styles.html#css-utility-classes" data-ice="link">CSS utility classes</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-clearfix" data-ice="link">u-coral-clearFix</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-noborder" data-ice="link">u-coral-noBorder</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-noscroll" data-ice="link">u-coral-noScroll</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-screenreaderonly" data-ice="link">u-coral-screenReaderOnly</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-closedhand" data-ice="link">u-coral-closedHand</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-openhand" data-ice="link">u-coral-openHand</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-pullleft" data-ice="link">u-coral-pullLeft</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-pullright" data-ice="link">u-coral-pullRight</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-padding" data-ice="link">u-coral-padding</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-padding-horizontal" data-ice="link">u-coral-padding-horizontal</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-padding-vertical" data-ice="link">u-coral-padding-vertical</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-margin" data-ice="link">u-coral-margin</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-nopadding" data-ice="link">u-coral-noPadding</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-nopadding-horizontal" data-ice="link">u-coral-noPadding-horizontal</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-nopadding-vertical" data-ice="link">u-coral-noPadding-vertical</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-nomargin" data-ice="link">u-coral-noMargin</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-ellipsis" data-ice="link">u-coral-ellipsis</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-visiblexs---u-coral-hiddenxs" data-ice="link">u-coral-visibleXS | u-coral-hiddenXS</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-visibles---u-coral-hiddens" data-ice="link">u-coral-visibleS | u-coral-hiddenS</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-visiblem---u-coral-hiddenm" data-ice="link">u-coral-visibleM | u-coral-hiddenM</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-visiblel---u-coral-hiddenl" data-ice="link">u-coral-visibleL | u-coral-hiddenL</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-visiblexl---u-coral-hiddenxl" data-ice="link">u-coral-visibleXL | u-coral-hiddenXL</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#u-coral-visiblexxl---u-coral-hiddenxxl" data-ice="link">u-coral-visibleXXL | u-coral-hiddenXXL</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/styles.html"><a href="manual/styles.html#fonts-via-typekit" data-ice="link">Fonts via Typekit</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#domains" data-ice="link">Domains</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#using-a-custom-kit-with-coral-spectrum" data-ice="link">Using a Custom Kit with Coral Spectrum</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/styles.html"><a href="manual/styles.html#font-loading" data-ice="link">Font loading</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/architecture.html"><a href="manual/architecture.html" data-ice="link">Architecture</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/architecture.html"><a href="manual/architecture.html#web-components" data-ice="link">Web Components</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/architecture.html"><a href="manual/architecture.html#content-zones" data-ice="link">Content Zones</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/architecture.html"><a href="manual/architecture.html#dependencies" data-ice="link">Dependencies</a></li>
</ul>
</div>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav" class="indent-h1" data-link="manual/contribution.html"><a href="manual/contribution.html" data-ice="link">Contribution</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/contribution.html"><a href="manual/contribution.html#code-of-conduct" data-ice="link">Code Of Conduct</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/contribution.html"><a href="manual/contribution.html#have-a-question-" data-ice="link">Have A Question?</a></li>
<li data-ice="manualNav" class="indent-h3" data-link="manual/contribution.html"><a href="manual/contribution.html#security-issues" data-ice="link">Security Issues</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/contribution.html"><a href="manual/contribution.html#contributor-license-agreement" data-ice="link">Contributor License Agreement</a></li>
<li data-ice="manualNav" class="indent-h2" data-link="manual/contribution.html"><a href="manual/contribution.html#code-reviews" data-ice="link">Code Reviews</a></li>
</ul>
</div>
</div>
</nav>
<div class="content" data-ice="content"><div class="github-markdown" data-ice="content"><h1 id="manual">Manual</h1><h2 id="using-coral-spectrum">Using Coral Spectrum</h2><h3 id="easiest-way-via-a-cdn">Easiest way via a CDN</h3><p>The easiest way to consume Coral Spectrum is to use a CDN e.g. copy these lines into your html file. </p>
<pre><code><code class="source-code prettyprint"><head>
<!-- Adjust version accordingly -->
<link rel="stylesheet" href="https://unpkg.com/@adobe/coral-spectrum@4.5.0/dist/css/coral.min.css">
<script src="https://unpkg.com/@adobe/coral-spectrum@4.5.0/dist/js/coral.min.js" data-coral-icons-external="js"></script>
</head>
<body class="coral--light">
<button is="coral-button" icon="add">My Button</button>
</body> </code>
</code></pre><h3 id="copying-the-distribution-files">Copying the distribution files</h3><p>You can also download the distribution package of the
latest release by running <code>npm i @adobe/coral-spectrum</code>. It includes all components and styles.</p>
<p>After you've unzipped the package, look for the <code>dist</code> folder and :</p>
<ul>
<li>Copy the files from <code>dist/css</code>, <code>dist/js</code> and <code>dist/resources</code> in your project.</li>
<li>Reference the files in your page with :<pre><code><code class="source-code prettyprint"><link rel="stylesheet" href="css/coral.min.css">
<script src="js/coral.min.js"></script></code>
</code></pre></li>
</ul>
<h3 id="using-a-bundler-like-webpack">Using a bundler like Webpack</h3><p>If your project only requires a few components, you can use a module bundler like <a href="https://webpack.js.org/">Webpack</a> to only import the components needed.
Below is an example of a Webpack config:</p>
<pre><code><code class="source-code prettyprint">const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
mode: 'production',
devtool: 'source-map',
entry: './src/index.js',
output: {
filename: 'bundle.min.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.svg$/,
use: [
{
loader: 'file-loader',
options: {
name: 'icons/[name].[ext]'
},
},
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.min.css'
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /style\.min\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
}
})
]
}; </code>
</code></pre><p>Then in your <code>index.js</code> file, you can import and use single components :</p>
<pre><code><code class="source-code prettyprint">// Import Component
import {Button} from '@adobe/coral-spectrum/coral-component-button';
const button = new Button();</code>
</code></pre><p>If icons are not displayed, ensure the path to the styles and icons are set e.g. :</p>
<pre><code><code class="source-code prettyprint"><link rel="stylesheet" href="dist/style.min.css">
<script data-coral-icons="dist/icons/" src="dist/bundle.min.js"></script></code>
</code></pre><p><strong>Note:</strong> Calendar, Clock and Datepicker components will leverage <a href="http://momentjs.com/">moment.js</a> if available.</p>
<h2 id="building-and-testing">Building and Testing</h2><p>Run the following commands first :</p>
<pre><code><code class="source-code prettyprint">npm install -g gulp-cli
npm install</code>
</code></pre><p>You can use below tasks to get started:</p>
<ul>
<li><code>gulp</code> to generate the build in the <code>dist</code> folder and run the dev server on <code>localhost:9001</code> by default.</li>
<li><code>gulp build</code> to generate the build in the <code>dist</code> folder.</li>
<li><code>gulp dev</code> to run the dev server on <code>localhost:9001</code> by default. </li>
<li><code>gulp test</code> to run the tests. Test reports are in <code>dist/coverage</code>.</li>
<li><code>gulp docs</code> to build the documentation in <code>dist/documentation</code>. </li>
<li><code>gulp axe</code> to run the accessibility checks.</li>
</ul>
<p>Each component can be built independently e.g. <code>cd coral-component-button && gulp</code>.</p>
<h2 id="releasing">Releasing</h2><p>We are currently releasing this package on <code>npm</code>.</p>
<p>Before we get started, clean up your dependencies with the following command :</p>
<pre><code><code class="source-code prettyprint">git checkout master
rm -rf node_modules && npm install</code>
</code></pre><p>Then run <code>gulp release</code>. You'll be asked to bump the version (minor version bump by default). Coral Spectrum is following
<a href="https://docs.npmjs.com/about-semantic-versioning">semantic versioning</a> (either patch, minor or major).</p>
<p>The command will take care of increasing, tagging the version and publishing the package to <code>npm</code>. </p>
<p>If everything went well, run <code>gulp deploy</code> to publish the documentation on the <code>gh-pages</code> branch else revert the version bump.</p>
</div>
</div>
<footer class="footer">
Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>
<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>