Deploy refactor/rating-stars to bernerslee (#456)

* chore: implement password protected staging server, tidy up scripts (#434)

* feat: badge (#394)

* feat: init badge

* refactor: everything

* feat: init hbs

* refactor: inline style to css class mapping

* refactor: deleting global variables

* refactor: removing border

* refactor: deleting old test cases

* added storybook

* Storybook & Handlebar done

* copied and added the index.html from main branch

* prettier & lint

* fixed errors according to Daniel check,  after merge request 1

* format and lint

* changes commited according to Daniels check from first MR

* applied change according to Daniel, from merge request 2.

* design tokens added

* Font-Family fixed

* added design token for font-family

* Edited storybook - Font

Co-authored-by: marvinLaubenstein <marvin.laubenstein@telekom.de>

* ci(bernerslee): remove s3 pipeline

* Sketch/readonly input state (#373)

* feat(sketch): add readonly states to text-fields

* feat(sketch): add readonly states for textarea

* feat(textarea): add readonly styles

* refactor(sketch): add readonly to smybol name state resolver

* chore(sketch): update sketch symbol DB

* feat: implement scaleBeforeClose event in Modal (#430)

* Update includes and symbol names (#372)

* chore: update static sketch symbols

* chore: update color swatches and missing readonly state

* refactor: change symbol hirarchy for textarea / text-field

* refactor: update readonly assignments

* fix(button): add icon scaling and resiziable layout of slot elements

* fix(dropdown/sketch): improve rendering for select element

* chore: autoformat files

* fix: datepicker not updating on outside value change (#441)

* refactor(rating-stars): rework with input range approach

also make the whole thing more modular with parts

* feat(rating-stars): add half star rating

* feat(rating-stars): use correct aria value and add better half visuals

* refactor: add size, editable label; css

* feat: only first star can clear all stars

* refactor: prop renaming; remove watcher;

* test: writing tests

* refactor: renaming value to rating

* refactor: stories

* feat: implement onTouchEnd

* feat(rating-stars): add readonly state and a11y features

* feat(rating-stars): simplify revert logic / handle minRating input

* feat: add prop readonly

* feat: edit PR requests

* feat: firstStarSelected with a default value of false

* feat: input gets focus onClick

* feat(rating-stars): add sketch generation and adjust input handling

* fix: revert handmade sketch includes

* test: update snapshots

Co-authored-by: Kutlovcidenis <57406040+Kutlovcidenis@users.noreply.github.com>
Co-authored-by: marvinLaubenstein <marvin.laubenstein@telekom.de>
Co-authored-by: Daniel Beck <daniel@beck.win>
Co-authored-by: Stefan Kopco <mail@oddobsessions.com>
Co-authored-by: Calvin Schröder <calvin.schroeder@telekom.de>
Co-authored-by: Christian Pajung <christian.pajung@telekom.de>

packages/components-sketch/app.js

@@ -33,7 +33,9 @@ app.get('/', (req, res) => {
 app.get('/:component', (req, res) => {
   try {
     res.render(req.params.component, {
-      title: req.params.component.replace(/^./, c => c.toUpperCase()),
+      title: req.params.component
+        .replace(/-/g, ' ')
+        .replace(/\b\w/g, (c) => c.toUpperCase()),
     });
   } catch (error) {
     res.render('error', { error: error.message });

packages/components-sketch/public/symbol_names.js

@@ -32,14 +32,31 @@ function order(category, title) {
   );
 }
 
+function evalNaming(btn) {
+  if (btn.getAttribute('helper-text') && btn.getAttribute('status') !== 'error')
+    return 'Info';
+  if (btn.getAttribute('status') === 'error') return 'Error';
+  return 'Standard';
+}
+
 function getStateName(btn) {
   if (btn.hasAttribute('disabled')) {
     return 'Disabled';
-  } else if (btn.dataset.sketchState) {
+  }
+  if (btn.hasAttribute('readonly')) {
+    if (btn.dataset.sketchState) {
+      return `Read only ${btn.dataset.sketchState}`;
+    }
+    return 'Read only';
+  }
+  if (btn.dataset.sketchState) {
     return capitalize(btn.dataset.sketchState);
-  } else {
-    return 'Standard';
   }
+
+  if (btn.dataset.fakeState) {
+    return capitalize(btn.dataset.fakeState);
+  }
+  return 'Standard';
 }
 
 function getSizeName(btn) {

packages/components-sketch/views/checkbox.hbs

@@ -320,15 +320,6 @@ C22.2,4.45 21.55,4.5 21.15,4.85 Z{{/inline}}
 <script src="/symbol_names.js"></script>
 <script>
   Array.from(document.querySelectorAll('scale-checkbox')).forEach((btn) => {
-    function evalNaming(btn) {
-      if (
-        btn.getAttribute('helper-text') &&
-        btn.getAttribute('status') !== 'error'
-      )
-        return 'Info';
-      if (btn.getAttribute('status') === 'error') return 'Error';
-      return 'Standard';
-    }
     btn.dataset.sketchSymbol = `Checkbox / ${order(
       1,
       btn.hasAttribute('checked') ? 'Selected' : 'Standard'

packages/components-sketch/views/index.hbs

@@ -22,7 +22,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
   <p><a href="/link">Link</a></p>
   <p><a href="/progress-bar">Progress Bar</a></p>
   <p><a href="/radio">Radio Button</a></p>
-  <p><a href="/rating">Rating Stars</a></p>
+  <p><a href="/rating-stars">Rating Stars</a></p>
   <p><a href="/sidebar-nav">Sidebar Navigation Example</a></p>
   <p><a href="/sidebar-nav-components">Sidebar Navigation Components</a></p>
   <p><a href="/slider">Slider</a></p>

packages/components-sketch/views/radio.hbs

@@ -304,15 +304,6 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
 <script src="/symbol_names.js"></script>
 <script>
   Array.from(document.querySelectorAll('scale-radio-button')).forEach((btn) => {
-    function evalNaming(btn) {
-      if (
-        btn.getAttribute('helper-text') &&
-        btn.getAttribute('status') !== 'error'
-      )
-        return 'Info';
-      if (btn.getAttribute('status') === 'error') return 'Error';
-      return 'Standard';
-    }
     btn.dataset.sketchSymbol = `Radio Button / ${order(
       1,
       btn.hasAttribute('checked') ? 'Selected' : 'Standard'