feat(examples): add vanilla (#733)

telekom · Dec 10, 2021 · 91259f8 · 91259f8
1 parent 1bab1c3
commit 91259f8
Show file tree

Hide file tree

Showing 16 changed files with 150 additions and 9 deletions.
diff --git a/examples/angular-boilerplate/package.json b/examples/angular-boilerplate/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "%TODO%",
+  "name": "TODO",
   "version": "1.0.0",
   "private": true,
   "scripts": {

diff --git a/examples/angular-reactive-forms/package.json b/examples/angular-reactive-forms/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "%TODO%",
+  "name": "TODO",
   "version": "1.0.0",
   "private": true,
   "scripts": {

diff --git a/examples/gatsby-ssr/package.json b/examples/gatsby-ssr/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "%TODO%",
+  "name": "TODO",
   "version": "1.0.0",
   "private": true,
   "description": "A simple starter to get up and developing quickly with Gatsby",

diff --git a/examples/nuxt-ssr/package.json b/examples/nuxt-ssr/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "%TODO%",
+  "name": "TODO",
   "version": "1.0.0",
   "private": true,
   "description": "My legendary Nuxt.js project",

diff --git a/examples/react-boilerplate/package.json b/examples/react-boilerplate/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "%TODO%",
+  "name": "TODO",
   "version": "1.0.0",
   "private": true,
   "dependencies": {

diff --git a/examples/react-form/package.json b/examples/react-form/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "%TODO%",
+  "name": "TODO",
   "version": "1.0.0",
   "private": true,
   "main": "dist/index.js",
@@ -45,4 +45,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/examples/vanilla-cdn/README.md b/examples/vanilla-cdn/README.md
@@ -0,0 +1,13 @@
+# vanilla cdn
+
+## Project setup
+
+```
+npm install
+```
+
+### Starts a local server with hot-reloads for development
+
+```
+npm run start
+```
diff --git a/examples/vanilla-cdn/index.html b/examples/vanilla-cdn/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@telekom/scale-components-neutral/dist/scale-components/scale-components.css"
+    />
+    <script
+      type="module"
+      src="https://unpkg.com/@telekom/scale-components-neutral/dist/scale-components/scale-components.esm.js"
+    ></script>
+    <link rel="stylesheet" href="styles.css" />
+    <title>Vanilla</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Scale + UNPKG</h1>
+      <scale-button
+        href="https://www.brand-design.telekom.com/en/account/login/?redirect_url=/scale/"
+        >Open the docs</scale-button
+      >
+    </div>
+  </body>
+</html>
diff --git a/examples/vanilla-cdn/package.json b/examples/vanilla-cdn/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "TODO",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "npx servor --reload --browse"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "devDependencies": {
+    "servor": "^4.0.2"
+  }
+}
diff --git a/examples/vanilla-cdn/styles.css b/examples/vanilla-cdn/styles.css
@@ -0,0 +1,13 @@
+body {
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+}
+
+.container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+}
diff --git a/examples/vanilla/README.md b/examples/vanilla/README.md
@@ -0,0 +1,13 @@
+# vanilla
+
+## Project setup
+
+```
+npm install
+```
+
+### Starts a local server with hot-reloads for development
+
+```
+npm run start
+```
diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="node_modules/@telekom/scale-components-neutral/dist/scale-components/scale-components.css"
+    />
+    <script
+      type="module"
+      src="node_modules/@telekom/scale-components-neutral/dist/scale-components/scale-components.esm.js"
+    ></script>
+    <link rel="stylesheet" href="styles.css" />
+    <title>Vanilla</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Scale + Vanilla</h1>
+      <scale-button
+        href="https://www.brand-design.telekom.com/en/account/login/?redirect_url=/scale/"
+        >Open the docs</scale-button
+      >
+    </div>
+  </body>
+</html>
diff --git a/examples/vanilla/package.json b/examples/vanilla/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "TODO",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "npx servor --reload --browse"
+  },
+  "dependencies": {
+    "@telekom/scale-components-neutral": "^3.0.0-beta.33"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "devDependencies": {
+    "servor": "^4.0.2"
+  }
+}
diff --git a/examples/vanilla/styles.css b/examples/vanilla/styles.css
@@ -0,0 +1,13 @@
+body {
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+}
+
+.container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+}
diff --git a/examples/vue-boilerplate/package.json b/examples/vue-boilerplate/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "%TODO%",
+  "name": "TODO",
   "version": "1.0.0",
   "private": true,
   "scripts": {

diff --git a/examples/vue3-boilerplate/package.json b/examples/vue3-boilerplate/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "%TODO%",
+  "name": "TODO",
   "version": "1.0.0",
   "private": true,
   "scripts": {