Merge remote-tracking branch 'origin/feat/color-picker-accessibility'…

… into feat/color-picker-accessibility
Refinitiv · Nov 2, 2022 · 02144f8 · 02144f8
2 parents 68de723 + 38636fa
commit 02144f8
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 122 deletions.
diff --git a/documents/src/navigation.md b/documents/src/navigation.md
@@ -77,8 +77,8 @@ type: nav
     - [Grid](./elements/grid)
 
 - Using Components
+  - [Bundling Configuration](./guides/bundling-configuration)
   + Framework Integration
-    - [Vanilla](./tutorials/vanilla-js)
     - [Angular](./tutorials/angular)
     - [React](./tutorials/react)
     - [Vue](./tutorials/vue)

diff --git a/...d-app/framework-integration/javascript.md → ...pages/build-app/bundling-configuration.md b/...d-app/framework-integration/javascript.md → ...pages/build-app/bundling-configuration.md
@@ -1,129 +1,12 @@
 <!--
 type: page
 title: Vanilla JavaScript
-location: ./tutorials/vanilla-js
+location: ./guides/bundling-configuration
 layout: default
 -->
 
-# Without a framework
-EF elements are Web Component. They can be used with JavaScript frameworks or without a framework (vanilla JavaScript). This guideline provides how you can use EF elements without a framework, either with bundling tool or without bundling tool.
-
-## No bundling tools
-It's the simplest and the quickest way for creating a quick standalone demo and getting started with EF. However, without any extra tools it will only support browsers that natively support JavaScript module syntax. [[see list]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).
-
-EF elements are shipped as ES6 module. To use EF elements without a JavaScript framework, simply include a script with `type=module` into your HTML template.
-
-The following tutorial will guide you through creating a simple login page using EF.
-
-Create a new project folder.
-
-```sh
-mkdir project-demo
-cd project-demo
-```
-
-Use `npm init` command to initialise the project. It will create `package.json` file which contains application information and its dependencies.
-
-```sh
-npm init
-```
-
-Install element and theme packages using npm.
-
-```sh
-npm i @refinitiv-ui/elements @refinitiv-ui/halo-theme
-```
-
-Create file `index.html` with a typical HTML template.
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>A Simple HTML</title>
-  </head>
-  <body></body>
-</html>
-```
-
-Create a script `type="module"` tag that imports EF dependencies, then include it to `index.html`.
-
-```html
-<script type="module">
-  import '@refinitiv-ui/elements/button';
-  import '@refinitiv-ui/elements/panel';
-  import '@refinitiv-ui/elements/text-field';
-  import '@refinitiv-ui/elements/password-field';
-
-  import '@refinitiv-ui/halo-theme/dark/imports/native-elements';
-  import '@refinitiv-ui/elements/button/themes/halo/dark';
-  import '@refinitiv-ui/elements/panel/themes/halo/dark';
-  import '@refinitiv-ui/elements/text-field/themes/halo/dark';
-  import '@refinitiv-ui/elements/password-field/themes/halo/dark';
-</script>
-```
-
-Now, we can start adding elements, styling and logics into `index.html`.
-
-```html
-<style>
-  ef-panel {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 450px;
-    height: 100%;
-    margin: 40px auto;
-    border: solid 1px #e1e1e1;
-  }
-
-  h1 {
-    margin-top: 40px;
-  }
-</style>
-<ef-panel spacing>
-  <h1>Hello!</h1>
-  <ef-text-field placeholder="Username"></ef-text-field>
-  <ef-password-field placeholder="Password"></ef-password-field>
-  <div>
-    <ef-button disabled>Login</ef-button>
-    <ef-button>Cancel</ef-button>
-  </div>
-</ef-panel>
-<script>
-  const username = document.querySelector("ef-text-field");
-  const password = document.querySelector("ef-password-field");
-  const loginButton = document.querySelector("ef-button");
-
-  const onTextChanges = function () {
-    if (username.value.length === 0 || password.value.length === 0) {
-      loginButton.disabled = true;
-    } else {
-      loginButton.disabled = false;
-    }
-  };
-
-  username.addEventListener("value-changed", onTextChanges);
-  password.addEventListener("value-changed", onTextChanges);
-
-  loginButton.addEventListener("tap", function () {
-    document.querySelector("h1").textContent = "Done!";
-  });
-</script>
-```
-
-In order to correctly serve **bare modules**, we need a tool that rewrites the path. For the simplicity, we are going to use [es-dev-server](https://github.com/open-wc/es-dev-server)
-
-@> In the browser, import must get either a relative or absolute URL. Modules without any path are called “bare” modules.
-
-At root directory in your sample application, run this command to serve the app.
-
-```bash
-npx es-dev-server --node-resolve --watch
-```
+# Bundling Configuration
+EF elements are Web Component. They can be used with JavaScript frameworks or without a framework. This guideline provides how you can use EF elements with bundling tool.
 
 ## Vite
 [Vite](https://vitejs.dev/) is a built tool for javascript and typescript project. It is very fast and provides a lot of features with minimum configuration to getting start with.

diff --git a/documents/src/pages/build-app/framework-integration/vue.md b/documents/src/pages/build-app/framework-integration/vue.md
@@ -59,7 +59,6 @@ import '@refinitiv-ui/elements/panel/themes/halo/dark';
 import '@refinitiv-ui/elements/text-field/themes/halo/dark';
 import '@refinitiv-ui/elements/password-field/themes/halo/dark';
 ```
-If you're using webpack 4, you can set path aliases in `webpack.config.js` similar to [Vanilla](./tutorials/vanilla-js#webpack-4).
 
 Components can be used like any other native `HTMLElement`. Try replacing content in `src/App.vue` with the code below.