Skip to content

Commit

Permalink
feat: CodeArtifact Migration - Phase 1 & Phase 2 (#67)
Browse files Browse the repository at this point in the history
* Demo cleanup, linting upgrade, publish to npm
  • Loading branch information
svanherk authored Jun 1, 2022
1 parent 667d3bd commit 57508d9
Show file tree
Hide file tree
Showing 19 changed files with 372 additions and 384 deletions.
3 changes: 1 addition & 2 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
{
"extends": "brightspace/polymer-3-config",
"globals": {
"fastdom": false,
"Promise": false
"fastdom": false
}
}
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ jobs:
- name: Setup Node
uses: Brightspace/third-party-actions@actions/setup-node
with:
node-version: '14'
node-version-file: .nvmrc
- name: Install dependencies
run: npm install
- name: Lint
Expand Down
7 changes: 4 additions & 3 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ name: Release
on:
push:
branches:
- master
- main
jobs:
release:
if: "!contains(github.event.head_commit.message, 'skip ci')"
Expand All @@ -17,9 +17,10 @@ jobs:
- name: Setup Node
uses: Brightspace/third-party-actions@actions/setup-node
with:
node-version: '14'
node-version-file: .nvmrc
- name: Semantic Release
uses: BrightspaceUI/actions/semantic-release@main
with:
DEFAULT_BRANCH: master
GITHUB_TOKEN: ${{ secrets.D2L_GITHUB_TOKEN }}
NPM: true
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
14
55 changes: 32 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,17 @@
# d2l-polymer-behaviors
[![Bower version][bower-image]][bower-url]
[![Build status][ci-image]][ci-url]

Shared [Polymer](https://www.polymer-project.org/1.0/)-based behaviors and modules for implementing and consuming web components.

## Installation

`d2l-polymer-behaviors` can be installed from [Bower][bower-url]:
Install from NPM:

```shell
bower install d2l-polymer-behaviors
npm install d2l-polymer-behaviors
```

## Usage

Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import the component or scripts as needed.

```html
<head>
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
<link rel="import" href="../d2l-polymer-behaviors/d2l-dom-focus.html">
</head>
```

#### Methods

**D2L.Dom**
Expand Down Expand Up @@ -168,22 +158,41 @@ The consumer of `d2l-example` adds the `d2l-visible-on-ancestor-target` class to
</div>
```

### Usage in Production
## Versioning & Releasing

> TL;DR: Commits prefixed with `fix:` and `feat:` will trigger patch and minor releases when merged to `main`. Read on for more details...
The [semantic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/semantic-release) is called from the `release.yml` GitHub Action workflow to handle version changes and releasing.

### Version Changes

In production, it's recommended to use a build tool like [Vulcanize](https://github.com/Polymer/vulcanize) to combine all your web components into a single import file. [More from the Polymer Docs: Optimize for Production](https://www.polymer-project.org/1.0/tools/optimize-for-production.html)...
All version changes should obey [semantic versioning](https://semver.org/) rules:
1. **MAJOR** version when you make incompatible API changes,
2. **MINOR** version when you add functionality in a backwards compatible manner, and
3. **PATCH** version when you make backwards compatible bug fixes.

## Coding styles
The next version number will be determined from the commit messages since the previous release. Our semantic-release configuration uses the [Angular convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) when analyzing commits:
* Commits which are prefixed with `fix:` or `perf:` will trigger a `patch` release. Example: `fix: validate input before using`
* Commits which are prefixed with `feat:` will trigger a `minor` release. Example: `feat: add toggle() method`
* To trigger a MAJOR release, include `BREAKING CHANGE:` with a space or two newlines in the footer of the commit message
* Other suggested prefixes which will **NOT** trigger a release: `build:`, `ci:`, `docs:`, `style:`, `refactor:` and `test:`. Example: `docs: adding README for new component`

See the [VUI Best Practices & Style Guide](https://github.com/Brightspace/valence-ui-docs/wiki/Best-Practices-&-Style-Guide) for information on VUI naming conventions, plus information about the [EditorConfig](http://editorconfig.org) rules used in this repo.
To revert a change, add the `revert:` prefix to the original commit message. This will cause the reverted change to be omitted from the release notes. Example: `revert: fix: validate input before using`.

![Build status](https://github.com/BrightspaceUI/progress/workflows/CI/badge.svg)
### Releases

## Versioning
When a release is triggered, it will:
* Update the version in `package.json`
* Tag the commit
* Create a GitHub release (including release notes)
* Deploy a new package to NPM

All version changes should obey [semantic versioning](https://semver.org/) rules.
### Releasing from Maintenance Branches

Releases use the [semantic-release](https://semantic-release.gitbook.io/) tooling and the [angular preset](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) for commit message syntax. Upon release, the version in `package.json` is updated, a tag and GitHub release is created and a new package will be deployed to NPM.
Occasionally you'll want to backport a feature or bug fix to an older release. `semantic-release` refers to these as [maintenance branches](https://semantic-release.gitbook.io/semantic-release/usage/workflow-configuration#maintenance-branches).

Commits prefixed with `feat` will trigger a minor release, while `fix` or `perf` will trigger a patch release. A commit containing `BREAKING CHANGE` will cause a major release to occur.
Maintenance branch names should be of the form: `+([0-9])?(.{+([0-9]),x}).x`.

Other useful prefixes that will not trigger a release: `build`, `ci`, `docs`, `refactor`, `style` and `test`. More details in the [Angular Contribution Guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#type).
Regular expressions are complicated, but this essentially means branch names should look like:
* `1.15.x` for patch releases on top of the `1.15` release (after version `1.16` exists)
* `2.x` for feature releases on top of the `2` release (after version `3` exists)
13 changes: 0 additions & 13 deletions demo/demo-styles.css

This file was deleted.

108 changes: 53 additions & 55 deletions demo/dom-expand-collapse/index.html
Original file line number Diff line number Diff line change
@@ -1,58 +1,56 @@
<html>
<head>
<title>D2L DOM Expand/Collapse</title>
<script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<link rel="stylesheet" href="../demo-styles.css">
<script type="module" src="../../../@polymer/polymer/polymer-legacy.js"></script>
<script type="module" src="../../d2l-dom-expand-collapse.js"></script>
<style>
.fixture {
box-sizing: border-box;
border: 1px solid black;
margin-top: 20px;
}
.fixture > div {
padding: 50px 20px;
}
.d2l-hidden {
display: none !important;
}
</style>
</head>
<body unresolved>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<link rel="stylesheet" href="/node_modules/@brightspace-ui/core/components/demo/styles.css" type="text/css">
<script type="module">
import '@brightspace-ui/core/components/demo/demo-page.js';
import '../../d2l-dom-expand-collapse.js';
</script>
<style>
.fixture {
box-sizing: border-box;
border: 1px solid black;
margin-top: 20px;
}
.fixture > div {
padding: 50px 20px;
}
</style>
</head>
<body unresolved>
<d2l-demo-page page-title="d2l-dom-expand-collapse">

<h2>d2l-dom-expand-collapse</h2>
<d2l-demo-snippet>
<button id="collapse">Collapse</button>
<button id="expand">Expand</button>
<div id="container1" class="fixture"><div>
Lorem ipsum dolor sit amet, scelerisque consectetuer lacus quam lectus orci, suscipit at duis, felis ligula pellentesque, dapibus mauris natoque eros sed, suspendisse wisi non. Non dictum turpis magna elit in eros, nostra tempor vulputate malesuada. Arcu imperdiet amet est massa. Sociis phasellus aliquip vel vestibulum rutrum magnis, fusce metus class mi lorem dolor integer, in leo. Imperdiet consequat, urna ipsum ipsum mauris, vel pellentesque rutrum in, metus cras etiam, leo ut. Luctus aliquet, urna condimentum nulla in, et libero. Quis ut vitae. Morbi in at est et, quod ullamcorper feugiat diam lacinia, in egestas lorem ornare. Cursus id nec ante, amet quam in at nibh, primis eget ac consectetuer massa blandit. Vivamus posuere. Porta tempora mauris et, nullam corporis, wisi luctus vestibulum neque nunc, risus venenatis cras libero morbi.

<h1>d2l-dom-expand-collapse</h1>
Ut vel sed, libero congue condimentum. Libero at dolor netus metus placerat, dui varius consectetuer tempus. Mi posuere volutpat elit et et, dignissim augue pulvinar wisi, mauris elementum convallis sed nulla magna dolor, nunc dis nulla amet, elit in gravida mi dui molestie. A feugiat neque pede morbi, nullam in tellus vel proin natoque eget. Mauris non venenatis, erat vel. Erat dapibus massa nulla facilisi. Ac ac per, malesuada varius. Lorem sociosqu ipsum. Donec quis. Nibh urna sem luctus cras, tortor condimentum, molestie lorem ut est amet et augue, lorem id fringilla. Lacinia neque, lacinia orci, nisl nunc faucibus.
</div></div>
</d2l-demo-snippet>
</d2l-demo-page>
<script type="module">
document.getElementById('expand').addEventListener('click', function() {
D2L.Dom.ExpandCollapse.expand(document.getElementById('container1'))
.then(function() {
console.log('expanded!'); /* eslint-disable-line no-console */
}).catch(function(reason) {
console.log(reason); /* eslint-disable-line no-console */
});
});

<div style="width: 60%;">
<button id="collapse">Collapse</button>
<button id="expand">Expand</button>
<div id="container1" class="fixture"><div>
Lorem ipsum dolor sit amet, scelerisque consectetuer lacus quam lectus orci, suscipit at duis, felis ligula pellentesque, dapibus mauris natoque eros sed, suspendisse wisi non. Non dictum turpis magna elit in eros, nostra tempor vulputate malesuada. Arcu imperdiet amet est massa. Sociis phasellus aliquip vel vestibulum rutrum magnis, fusce metus class mi lorem dolor integer, in leo. Imperdiet consequat, urna ipsum ipsum mauris, vel pellentesque rutrum in, metus cras etiam, leo ut. Luctus aliquet, urna condimentum nulla in, et libero. Quis ut vitae. Morbi in at est et, quod ullamcorper feugiat diam lacinia, in egestas lorem ornare. Cursus id nec ante, amet quam in at nibh, primis eget ac consectetuer massa blandit. Vivamus posuere. Porta tempora mauris et, nullam corporis, wisi luctus vestibulum neque nunc, risus venenatis cras libero morbi.

Ut vel sed, libero congue condimentum. Libero at dolor netus metus placerat, dui varius consectetuer tempus. Mi posuere volutpat elit et et, dignissim augue pulvinar wisi, mauris elementum convallis sed nulla magna dolor, nunc dis nulla amet, elit in gravida mi dui molestie. A feugiat neque pede morbi, nullam in tellus vel proin natoque eget. Mauris non venenatis, erat vel. Erat dapibus massa nulla facilisi. Ac ac per, malesuada varius. Lorem sociosqu ipsum. Donec quis. Nibh urna sem luctus cras, tortor condimentum, molestie lorem ut est amet et augue, lorem id fringilla. Lacinia neque, lacinia orci, nisl nunc faucibus.
</div></div>
</div>

<script type="module">
import '@polymer/polymer/polymer-legacy.js';
import '../../d2l-dom-expand-collapse.js';
document.getElementById('expand').addEventListener('click', function() {
D2L.Dom.ExpandCollapse.expand(document.getElementById('container1'))
.then(function() {
console.log('expanded!'); /* eslint-disable-line no-console */
}).catch(function(reason) {
console.log(reason); /* eslint-disable-line no-console */
});
});

document.getElementById('collapse').addEventListener('click', function() {
D2L.Dom.ExpandCollapse.collapse(document.getElementById('container1'))
.then(function() {
console.log('collapsed!'); /* eslint-disable-line no-console */
}).catch(function(reason) {
console.log(reason); /* eslint-disable-line no-console */
});
});
</script>
</body>
document.getElementById('collapse').addEventListener('click', function() {
D2L.Dom.ExpandCollapse.collapse(document.getElementById('container1'))
.then(function() {
console.log('collapsed!'); /* eslint-disable-line no-console */
}).catch(function(reason) {
console.log(reason); /* eslint-disable-line no-console */
});
});
</script>
</body>
</html>
Loading

0 comments on commit 57508d9

Please sign in to comment.