feat(banner): add styling sample

RivaIvanova · RivaIvanova · commit 2e1746deaa7a · 2024-06-12T09:01:23.000+03:00
diff --git a/browser/public/index.html b/browser/public/index.html
@@ -992,6 +992,7 @@
            <a class="nav-link" href="#" data-nav="/samples/notifications/banner/banner-advanced-sample">─<span>Advanced Sample</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/notifications/banner/banner-sample-1">─<span>Sample1</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/notifications/banner/banner-sample-2">─<span>Sample2</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/notifications/banner/banner-styling">─<span>Styling</span></a> 
        </div>
        <label id="nav-dialog" class="nav-component">Dialog</label> 
        <div id="nav-dialog-list" class="nav-list" state="collapsed"> 
diff --git a/samples/notifications/banner/banner-advanced-sample/igniteui-webcomponents-0.0.0.tgz b/samples/notifications/banner/banner-advanced-sample/igniteui-webcomponents-0.0.0.tgz
diff --git a/samples/notifications/banner/banner-advanced-sample/package.json b/samples/notifications/banner/banner-advanced-sample/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "wc-dialog-styling",
+  "name": "wc-banner-advanced-sample",
   "version": "1.0.0",
-  "description": "This project provides example of Dialog Styling using IgniteUI for Web Components",
+  "description": "This project provides example of Banner Advanced Sample using IgniteUI for Web Components",
   "main": "src/index.ts",
   "scripts": {
     "build": "npm run build:prod",
@@ -23,7 +23,7 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "file:igniteui-webcomponents-0.0.0.tgz",
+    "igniteui-webcomponents": "4.9.0",
     "lit": "^2.0.2",
     "lit-html": "^2.2.0",
     "tslib": "^2.0.0"
diff --git a/samples/notifications/banner/banner-advanced-sample/src/index.ts b/samples/notifications/banner/banner-advanced-sample/src/index.ts
@@ -1,5 +1,5 @@
 import { defineComponents, registerIconFromText, IgcBannerComponent, IgcIconComponent, IgcCardComponent, IgcNavbarComponent, IgcButtonComponent, IgcRippleComponent, IgcToastComponent } from "igniteui-webcomponents";
-import "igniteui-webcomponents/themes/light/material.css";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
 import "./BannerStyling.css";
 
 defineComponents(IgcBannerComponent, IgcNavbarComponent, IgcIconComponent, IgcCardComponent, IgcButtonComponent, IgcRippleComponent, IgcToastComponent);
diff --git a/samples/notifications/banner/banner-sample-1/igniteui-webcomponents-0.0.0.tgz b/samples/notifications/banner/banner-sample-1/igniteui-webcomponents-0.0.0.tgz
diff --git a/samples/notifications/banner/banner-sample-1/package.json b/samples/notifications/banner/banner-sample-1/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "wc-dialog-styling",
+  "name": "wc-banner-sample-1",
   "version": "1.0.0",
-  "description": "This project provides example of Dialog Styling using IgniteUI for Web Components",
+  "description": "This project provides example of Banner sample using IgniteUI for Web Components",
   "main": "src/index.ts",
   "scripts": {
     "build": "npm run build:prod",
@@ -23,7 +23,7 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "file:igniteui-webcomponents-0.0.0.tgz",
+    "igniteui-webcomponents": "4.9.0",
     "lit": "^2.0.2",
     "lit-html": "^2.2.0",
     "tslib": "^2.0.0"
diff --git a/samples/notifications/banner/banner-sample-1/src/index.ts b/samples/notifications/banner/banner-sample-1/src/index.ts
@@ -1,5 +1,5 @@
 import { defineComponents, registerIconFromText, IgcBannerComponent, IgcIconComponent, IgcCardComponent, IgcNavbarComponent } from "igniteui-webcomponents";
-import "igniteui-webcomponents/themes/light/material.css";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
 import "./BannerStyling.css";
 
 defineComponents(IgcBannerComponent, IgcNavbarComponent, IgcIconComponent, IgcCardComponent);
diff --git a/samples/notifications/banner/banner-sample-2/igniteui-webcomponents-0.0.0.tgz b/samples/notifications/banner/banner-sample-2/igniteui-webcomponents-0.0.0.tgz
diff --git a/samples/notifications/banner/banner-sample-2/package.json b/samples/notifications/banner/banner-sample-2/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "wc-dialog-styling",
+  "name": "wc-banner-sample-2",
   "version": "1.0.0",
-  "description": "This project provides example of Dialog Styling using IgniteUI for Web Components",
+  "description": "This project provides example of Banner sample using IgniteUI for Web Components",
   "main": "src/index.ts",
   "scripts": {
     "build": "npm run build:prod",
@@ -23,7 +23,7 @@
     "@webcomponents/template": "^1.4.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "igniteui-webcomponents": "file:igniteui-webcomponents-0.0.0.tgz",
+    "igniteui-webcomponents": "4.9.0",
     "lit": "^2.0.2",
     "lit-html": "^2.2.0",
     "tslib": "^2.0.0"
diff --git a/samples/notifications/banner/banner-sample-2/src/index.ts b/samples/notifications/banner/banner-sample-2/src/index.ts
@@ -1,5 +1,5 @@
 import { defineComponents, registerIconFromText, IgcBannerComponent, IgcIconComponent, IgcCardComponent, IgcNavbarComponent, IgcButtonComponent, IgcRippleComponent } from "igniteui-webcomponents";
-import "igniteui-webcomponents/themes/light/material.css";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
 import "./BannerStyling.css";
 
 defineComponents(IgcBannerComponent, IgcNavbarComponent, IgcIconComponent, IgcCardComponent, IgcButtonComponent, IgcRippleComponent);
diff --git a/samples/notifications/banner/banner-styling/.prettierrc b/samples/notifications/banner/banner-styling/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
diff --git a/samples/notifications/banner/banner-styling/ReadMe.md b/samples/notifications/banner/banner-styling/ReadMe.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Styling feature using [Banner](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/notifications/banner/banner-styling" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/notifications/banner/banner-styling?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/notifications/banner/banner-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/notifications/banner/banner-styling/index.html b/samples/notifications/banner/banner-styling/index.html
@@ -0,0 +1,62 @@
+<html>
+
+<head>
+  <title>Banner Styling Sample</title>
+  <meta charset="UTF-8" />
+
+  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+</head>
+
+<body>
+  <div id="root">
+    <div class="gallery__wrapper">
+      <div class="gallery__content">
+        <igc-navbar>
+          <h1>Gallery</h1>
+          <igc-icon id="icon" name="signal_wifi_off" slot="end" size="large"></igc-icon>
+        </igc-navbar>
+        
+        <igc-banner id="banner" class="offline-banner">
+          <igc-icon name="signal_wifi_off" slot="prefix" size="large"></igc-icon>
+          You have lost connection to the internet. This app is offline.
+          <div slot="actions">
+            <igc-button variant="flat" onclick="banner.hide()">
+              <igc-ripple></igc-ripple>
+              Continue Offline
+            </igc-button>
+            <igc-button id="button" variant="flat">
+              <igc-ripple></igc-ripple>
+              Turn On Wifi
+            </igc-button>
+          </div>
+        </igc-banner>
+
+        <igc-card class="gallery__item" elevated>
+            <div>
+              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg">
+            </div>
+        </igc-card>
+        <igc-card class="gallery__item" elevated>
+            <div>
+              <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg">
+            </div>
+        </igc-card>
+
+        <igc-toast id="toast" position="middle"></igc-toast>
+      </div>
+    </div>
+    
+  </div>
+
+  <!-- This script is needed only for parcel and it will be excluded for webpack -->
+  <% if (false) { %>
+    <script src="src/index.ts"></script>
+    <% } %>
+
+</body>
+
+</html>
diff --git a/samples/notifications/banner/banner-styling/package.json b/samples/notifications/banner/banner-styling/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "wc-banner-styling",
+  "version": "1.0.0",
+  "description": "This project provides example of Banner Styling using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "4.9.0",
+    "lit": "^2.0.2",
+    "lit-html": "^2.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
diff --git a/samples/notifications/banner/banner-styling/sandbox.config.json b/samples/notifications/banner/banner-styling/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+  
diff --git a/samples/notifications/banner/banner-styling/src/BannerStyling.css b/samples/notifications/banner/banner-styling/src/BannerStyling.css
@@ -0,0 +1,44 @@
+.offline-banner {
+    border-bottom: 1px solid rgba(0, 0, 0, .12);
+}
+
+.gallery__wrapper {
+    max-width: 400px;
+    padding-top: 24px;
+    margin: 0 auto;
+}
+
+.gallery__content {
+    display: flex;
+    flex-flow: column;
+    max-height: 430px;
+    overflow: hidden;
+    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
+}
+
+.gallery__item {
+    margin: 8px 16px;
+    overflow: visible;
+    border-radius: 0;
+
+    & div {
+        display: flex;
+        justify-content: center;
+    }
+}
+
+img {
+    max-width: 100%;
+}
+
+igc-banner::part(spacer) {
+    background: #dedede;
+}
+
+igc-banner::part(illustration) {
+    color: #666666;
+}
+
+igc-banner::part(content) {
+    color: #151515;
+}
diff --git a/samples/notifications/banner/banner-styling/src/index.css b/samples/notifications/banner/banner-styling/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/notifications/banner/banner-styling/src/index.ts b/samples/notifications/banner/banner-styling/src/index.ts
@@ -0,0 +1,56 @@
+import { defineComponents, registerIconFromText, IgcBannerComponent, IgcIconComponent, IgcCardComponent, IgcNavbarComponent, IgcButtonComponent, IgcRippleComponent, IgcToastComponent } from "igniteui-webcomponents";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import "./BannerStyling.css";
+
+defineComponents(IgcBannerComponent, IgcNavbarComponent, IgcIconComponent, IgcCardComponent, IgcButtonComponent, IgcRippleComponent, IgcToastComponent);
+
+const wifiOnIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.01 21.49L23.64 7c-.45-.34-4.93-4-11.64-4C5.28 3 .81 6.66.36 7l11.63 14.49.01.01.01-.01z"/></svg>';
+
+const wifiOffIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63 14.49.01.01.01-.01 3.9-4.86 3.32 3.32 1.27-1.27-3.46-3.46z"/></svg>';
+
+export class BannerStylingSample {
+    private banner: IgcBannerComponent;
+    private icon: IgcIconComponent;
+    private button: IgcButtonComponent;
+    private toast: IgcToastComponent;
+
+    private wifiState: boolean = false;
+
+    constructor() {
+        registerIconFromText('signal_wifi_off', wifiOffIcon);
+        registerIconFromText('signal_wifi_4_bar', wifiOnIcon);
+
+        this.banner = document.getElementById('banner') as IgcBannerComponent;
+        this.icon = document.getElementById('icon') as IgcIconComponent;
+        this.button = document.getElementById('button') as IgcButtonComponent;
+        this.toast = document.getElementById('toast') as IgcToastComponent;
+
+        this.banner.open = true;
+
+        this.button.addEventListener('click', () => this.refreshBanner());
+        this.icon.addEventListener('click', () => this.refreshBanner());
+    }
+
+    public refreshBanner() {
+        if (!this.wifiState) {
+            this.icon.name = 'signal_wifi_4_bar';
+            this.banner.hide();
+        } else {
+            this.icon.name = 'signal_wifi_off';
+            this.banner.show();
+        }
+
+        this.wifiState = !this.wifiState;
+        this.showToast();
+    }
+
+    public showToast() {
+        this.toast.open = false;
+        this.toast.textContent = `Wifi is now ${this.wifiState ? 'on' : 'off'}`;
+        this.toast.show();
+    }
+}
+
+new BannerStylingSample();
diff --git a/samples/notifications/banner/banner-styling/tsconfig.json b/samples/notifications/banner/banner-styling/tsconfig.json
diff --git a/samples/notifications/banner/banner-styling/webpack.config.js b/samples/notifications/banner/banner-styling/webpack.config.js
