Skip to content
Snippets Groups Projects
Commit 508924d3 authored by Tögl, Christina's avatar Tögl, Christina
Browse files

Add new component for inline notifications

parent 78bca35a
No related branches found
No related tags found
1 merge request!11Add new component for inline notifications
Pipeline #14257 failed
Stage: test
This commit is part of merge request !11. Comments created here will be created in the context of that merge request.
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 891 additions and 0 deletions
packages/inline-notification/.gitignore 0 → 100644
+ 5
− 0
View file @ 508924d3
dist
node_modules
.idea
npm-debug.log
package-lock.json
packages/inline-notification/LICENSE 0 → 100644
+ 502
− 0
View file @ 508924d3
This diff is collapsed.
packages/inline-notification/README.md 0 → 100644
+ 41
− 0
View file @ 508924d3
# Inline Notification Web Component
## Usage
```html
<dbp-inline-notification></dbp-inline-notification>
```
## Attributes
- `lang` (optional, default: `de`): set to `de` or `en` for German or English
- example `<dbp-inline-notification lang="de" ></dbp-inline-notification>`
- `type` (optional, default: `info`): set to `primary`, `info`, `success`, `danger`, `warning`
- example `<dbp-inline-notification lang="de" type="" ></dbp-inline-notification>`
- `summary` (optional): set to a specific text for an optional summary headline
- example `<dbp-inline-notification summary="Item deleted"></dbp-inline-notification>`
- `body` : can be set to a specific text and/or HTML.
- example `<dbp-inline-notification body="Item <b>foo</b> was deleted"></dbp-inline-notification>`
## Local development
```bash
# get the source
git clone git@gitlab.tugraz.at:dbp/web-components/toolkit.git
cd toolkit/packages/inline-notification
# install dependencies
yarn install
# constantly build dist/bundle.js and run a local web-server on port 8002
yarn run watch
# run tests
yarn test
# build local packages in dist directory
yarn run build
```
Jump to <http://localhost:8002> and you should get a demo page.
packages/inline-notification/assets/favicon.ico 0 → 100644
+ 0
− 0
View file @ 508924d3
packages/inline-notification/assets/favicon.ico

2.49 KiB

packages/inline-notification/assets/index.html 0 → 100644
+ 13
− 0
View file @ 508924d3
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="module" src="dbp-inline-notification-demo.js"></script>
</head>
<body>
<dbp-inline-notification-demo lang="de"></dbp-inline-notification-demo>
</body>
</html>
packages/inline-notification/i18next-scanner.config.js 0 → 100644
+ 15
− 0
View file @ 508924d3
module.exports = {
input: [
'src/*.js',
],
output: './',
options: {
debug: false,
removeUnusedKeys: true,
lngs: ['en','de'],
resource: {
loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
savePath: 'src/i18n/{{lng}}/{{ns}}.json'
},
},
}
packages/inline-notification/karma.conf.js 0 → 100644
+ 23
− 0
View file @ 508924d3
// Trick to use the auto-downloaded puppeteer chrome binary
process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function(config) {
config.set({
basePath: 'dist',
frameworks: ['mocha', 'chai'],
files: [
{pattern: './*.js', included: true, watched: true, served: true, type: 'module'},
{pattern: './**/*', included: false, watched: true, served: true},
],
autoWatch: true,
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
singleRun: false,
logLevel: config.LOG_ERROR
});
}
packages/inline-notification/package.json 0 → 100644
+ 46
− 0
View file @ 508924d3
{
"name": "dbp-inline-notification",
"version": "1.0.0",
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"private": true,
"devDependencies": {
"@rollup/plugin-commonjs": "^15.1.0",
"@rollup/plugin-json": "^4.0.0",
"@rollup/plugin-node-resolve": "^9.0.0",
"@rollup/plugin-url": "^5.0.1",
"chai": "^4.2.0",
"i18next-scanner": "^2.10.2",
"karma": "^5.1.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^3.0.0",
"karma-mocha": "^2.0.1",
"mocha": "^8.0.1",
"puppeteer": "^5.3.1",
"rollup": "^2.19.0",
"rollup-plugin-consts": "^1.0.1",
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@open-wc/scoped-elements": "^1.1.1",
"dbp-common": "^1.0.0",
"lit-element": "^2.3.1"
},
"scripts": {
"clean": "rm dist/*",
"build": "npm run build-local",
"build-local": "rollup -c",
"build-dev": "rollup -c --environment BUILD:development",
"build-prod": "rollup -c --environment BUILD:production",
"build-demo": "rollup -c --environment BUILD:demo",
"build-test": "rollup -c --environment BUILD:test",
"i18next": "i18next-scanner",
"watch": "npm run watch-local",
"watch-local": "rollup -c --watch",
"watch-dev": "rollup -c --watch --environment BUILD:development",
"test": "npm run build-test && karma start --singleRun"
}
}
packages/inline-notification/rollup.config.js 0 → 100644
+ 48
− 0
View file @ 508924d3
import glob from 'glob';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import copy from 'rollup-plugin-copy';
import {terser} from "rollup-plugin-terser";
import json from '@rollup/plugin-json';
import serve from 'rollup-plugin-serve';
import url from "@rollup/plugin-url";
import consts from 'rollup-plugin-consts';
import del from 'rollup-plugin-delete';
const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
console.log("build: " + build);
export default {
input: (build != 'test') ? ['src/dbp-inline-notification.js', 'src/dbp-inline-notification-demo.js'] : glob.sync('test/**/*.js'),
output: {
dir: 'dist',
entryFileNames: '[name].js',
chunkFileNames: 'shared/[name].[hash].[format].js',
format: 'esm',
sourcemap: true
},
plugins: [
del({
targets: 'dist/*'
}),
consts({
environment: build,
}),
resolve(),
commonjs(),
json(),
url({
limit: 0,
emitFiles: true,
fileName: 'shared/[name].[hash][extname]'
}),
(build !== 'local' && build !== 'test') ? terser() : false,
copy({
targets: [
{src: 'assets/index.html', dest: 'dist'},
{src: 'assets/favicon.ico', dest: 'dist'},
]
}),
(process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
]
};
packages/inline-notification/src/dbp-inline-notification-demo.js 0 → 100644
+ 73
− 0
View file @ 508924d3
import {i18n} from './i18n';
import {css, html, LitElement} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {InlineNotification} from './inline-notification.js';
import * as commonUtils from 'dbp-common/utils';
import * as commonStyles from "dbp-common/styles";
export class InlineNotificationDemo extends ScopedElementsMixin(LitElement) {
constructor() {
super();
this.lang = 'de';
this.isNotificationVisible = false;
}
static get scopedElements() {
return {
'dbp-inline-notification': InlineNotification,
};
}
static get properties() {
return {
lang: { type: String },
isNotificationVisible: { type: Boolean, attribute: false }
};
}
connectedCallback() {
super.connectedCallback();
i18n.changeLanguage(this.lang);
this.updateComplete.then(()=>{
});
}
showNotification() {
this.isNotificationVisible ? this.isNotificationVisible = false : this.isNotificationVisible = true;
}
static get styles() {
// language=css
return css`
${commonStyles.getThemeCSS()}
${commonStyles.getGeneralCSS()}
${commonStyles.getButtonCSS()}
`;
}
render() {
const types = ["primary", "info", "success", "danger", "warning"];
return html`
<section class="section">
<div class="container">
<h1 class="title">Inline-Notification-Demo</h1>
</div>
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<button id="send-button" @click="${this.showNotification}" class="button">${i18n.t('show')}</button>
<br><br>
${this.isNotificationVisible ? html`
<dbp-inline-notification summary="Item deleted" body="Item <b>${Math.random().toString(36).substring(7)}</b> foo was deleted!" type="${types[Math.floor(Math.random() * types.length)]}"></dbp-inline-notification>
`: ``}
</div>
</div>
</div>
</section>
`;
}
}
commonUtils.defineCustomElement('dbp-inline-notification-demo', InlineNotificationDemo);
packages/inline-notification/src/dbp-inline-notification.js 0 → 100644
+ 4
− 0
View file @ 508924d3
import * as commonUtils from 'dbp-common/utils';
import {InlineNotification} from './inline-notification.js';
commonUtils.defineCustomElement('dbp-inline-notification', InlineNotification);
packages/inline-notification/src/i18n.js 0 → 100644
+ 6
− 0
View file @ 508924d3
import {createInstance} from 'dbp-common/i18next.js';
import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json';
export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
packages/inline-notification/src/i18n/de/translation.json 0 → 100644
+ 3
− 0
View file @ 508924d3
{
"show": "anzeigen"
}
packages/inline-notification/src/i18n/en/translation.json 0 → 100644
+ 3
− 0
View file @ 508924d3
{
"show": "show"
}
packages/inline-notification/src/index.js 0 → 100644
+ 3
− 0
View file @ 508924d3
import {InlineNotification} from './inline-notification.js';
export {InlineNotification};
\ No newline at end of file
packages/inline-notification/src/inline-notification.js 0 → 100644
+ 76
− 0
View file @ 508924d3
import {i18n} from './i18n';
import {createUUID} from './utils'
import {css, html} from 'lit-element';
import DBPLitElement from 'dbp-common/dbp-lit-element';
import * as commonStyles from 'dbp-common/styles';
/**
* Inline Notification web component
*/
export class InlineNotification extends DBPLitElement {
constructor() {
super();
this.lang = 'de';
this.type = '';
this.summary = '';
this.body = '';
}
static get properties() {
return {
lang: { type: String },
type: { type: String },
summary: { type: String },
body: { type: String },
};
}
connectedCallback() {
super.connectedCallback();
i18n.changeLanguage(this.lang);
}
static get styles() {
// language=css
return css`
${commonStyles.getThemeCSS()}
${commonStyles.getGeneralCSS()}
${commonStyles.getNotificationCSS()}
.notification:not(:last-child) {
margin-bottom: 1.5rem;
}
.notification h3 {
font-weight: bold;
margin-bottom: 3px;
}
.notification h3 {
margin: 0 0 3px 0;
font: inherit;
font-weight: bold;
}
`;
}
createBodyHtml() {
return document.createRange().createContextualFragment(`${ this.body }`);
}
render() {
const notificationId = createUUID();
const bodyHtml = this.createBodyHtml();
return html`
<div class="columns">
<div class="column">
<div id="inline-notification-${ notificationId }" class="notification is-${ this.type }">
${ this.summary !== '' ? html`<h3>${ this.summary }</h3>` : `` }
${ bodyHtml }
</div>
</div>
</div>
`;
}
}
\ No newline at end of file
packages/inline-notification/src/utils.js 0 → 100644
+ 11
− 0
View file @ 508924d3
export const createUUID = () => {
let dt = new Date().getTime();
const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = (dt + Math.random()*16)%16 | 0;
dt = Math.floor(dt/16);
return (c==='x' ? r :(r&0x3|0x8)).toString(16);
});
return uuid;
};
packages/inline-notification/test/unit.js 0 → 100644
+ 19
− 0
View file @ 508924d3
import '../src/dbp-inline-notification';
describe('dbp-inline-notification basics', () => {
let node;
beforeEach(async () => {
node = document.createElement('dbp-inline-notification');
document.body.appendChild(node);
await node.updateComplete;
});
afterEach(() => {
node.remove();
});
it('should render', () => {
expect(node).to.have.property('shadowRoot');
});
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment