From ce736245a8dd9fa4bd173171ae2d5bbe841ec824 Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Mon, 28 Nov 2022 14:55:04 +0100
Subject: [PATCH 1/2] read only

---
 .../rating-field/rating-field.html.twig       | 14 +++++--
 .../rating-field/rating-field.story.js        | 38 ++-----------------
 .../rating-field/_rating-field.scss           | 24 ++++++++----
 src/playground/addons/story-utils/index.js    |  2 +-
 .../forms/rating-field/demo/index.js          | 17 ++++++++-
 .../forms/rating-field/docs/code.mdx          | 15 ++++++--
 .../forms/rating-field/demo/index.js          | 17 ++++++++-
 .../forms/rating-field/docs/code.mdx          | 15 ++++++--
 8 files changed, 89 insertions(+), 53 deletions(-)

diff --git a/src/implementations/twig/components/rating-field/rating-field.html.twig b/src/implementations/twig/components/rating-field/rating-field.html.twig
index adb80c98a9a..50d8dc8a685 100644
--- a/src/implementations/twig/components/rating-field/rating-field.html.twig
+++ b/src/implementations/twig/components/rating-field/rating-field.html.twig
@@ -5,6 +5,7 @@
   - "items" (array) (default: []): array of radio_button
   - "name" (string) (default: '')
   - "helper_id" (string) (default: '')
+  - "disabled" (boolean) (default: false)
   - "invalid" (boolean) (default: false)
   - "invalid_icon" (object) default({})
   - "star_filled_icon" (object) default({})
@@ -27,6 +28,7 @@
 {% set _items = items|default([]) %}
 {% set _name = name|default('') %}
 {% set _helper_id = helper_id|default('') %}
+{% set _disabled = disabled|default(false) %}
 {% set _invalid = invalid|default(false) %}
 {% set _required = required|default(false) %}
 {% set _helper_text = helper_text|default('') %}
@@ -69,7 +71,8 @@
   {%- if _label is not empty %}
     <legend
       class="ecl-form-label
-      {{- _invalid ? ' ecl-form-label--invalid' }}"
+      {{- _invalid ? ' ecl-form-label--invalid' }}
+      {{- _disabled ? ' ecl-form-label--disabled' -}}"
     >
       {%- block label _label -%}
       {%- if _required and _required_text is not empty -%}
@@ -82,7 +85,8 @@
 
   {% if _helper_text is not empty %}
     <div
-      class="ecl-help-block"
+      class="ecl-help-block
+      {{- _disabled ? ' ecl-help-block--disabled' -}}"
     {% if _helper_id is not empty %}
       id="{{ _helper_id }}"
     {% endif %}
@@ -104,7 +108,8 @@
   {% endif %}
 
   {% if _items is not empty and _items is iterable %}
-  <div class="ecl-rating-field">
+  <div class="ecl-rating-field
+      {{- _disabled ? ' ecl-rating-field--disabled' -}}">
     {%- for _item in _items|reverse %}
       <input
       id="rating-{{ _item.value }}" 
@@ -118,6 +123,9 @@
       {% if _required %}
         required 
       {% endif %}
+      {% if _disabled %}
+        disabled
+      {% endif %}
       />
       <label 
       class="ecl-rating-field__label" 
diff --git a/src/implementations/twig/components/rating-field/rating-field.story.js b/src/implementations/twig/components/rating-field/rating-field.story.js
index 64f8f06096b..702eaeabc8d 100644
--- a/src/implementations/twig/components/rating-field/rating-field.story.js
+++ b/src/implementations/twig/components/rating-field/rating-field.story.js
@@ -7,42 +7,24 @@ import dataDefault from '@ecl/specs-component-rating-field/demo/data';
 import ratingField from './rating-field.html.twig';
 import notes from './README.md';
 
-const itemClone = { ...dataDefault.items[0] };
-
 const getArgs = (data) => {
   const args = {
     show_label: true,
     show_helper: true,
     show_error: true,
+    invalid: data.invalid || false,
+    disabled: data.disabled || false,
+    required: data.required,
     label: data.label || '',
     helper_text: data.helper_text,
     invalid_text: data.invalid_text,
-    invalid: data.invalid || false,
-    required: data.required,
   };
 
-  if (!data.binary) {
-    args.show_item_helper = true;
-  }
-
   return args;
 };
 
 const getArgTypes = (data) => {
-  const argTypes = getFormControls(data, 'group');
-
-  if (!data.binary) {
-    argTypes.show_item_helper = {
-      name: 'radio helper text',
-      type: 'boolean',
-      description: 'Show radio helper text',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: true },
-        category: 'Optional',
-      },
-    };
-  }
+  const argTypes = getFormControls(data, 'element');
 
   return argTypes;
 };
@@ -51,8 +33,6 @@ const prepareData = (data, args) => {
   Object.assign(data, args);
   correctPaths(data);
 
-  const txt = args.show_item_helper ? itemClone.helper_text : '';
-
   if (!args.show_label) {
     data.label = '';
   }
@@ -62,16 +42,6 @@ const prepareData = (data, args) => {
   if (!args.show_helper) {
     data.helper_text = '';
   }
-  if (!data.binary) {
-    data.items.forEach((item) => {
-      item.helper_text = txt;
-    });
-  }
-
-  delete data.show_label;
-  delete data.show_helper;
-  delete data.show_error;
-  delete data.show_item_helper;
 
   return data;
 };
diff --git a/src/implementations/vanilla/components/rating-field/_rating-field.scss b/src/implementations/vanilla/components/rating-field/_rating-field.scss
index 3bd3dd0a6d5..166e8ee4c3b 100644
--- a/src/implementations/vanilla/components/rating-field/_rating-field.scss
+++ b/src/implementations/vanilla/components/rating-field/_rating-field.scss
@@ -16,8 +16,10 @@
   .ecl-rating-field__input:checked
     ~ .ecl-rating-field__label
     .ecl-rating-field__icon-filled,
-  & > .ecl-rating-field__label:hover .ecl-rating-field__icon-filled,
-  &
+  &:not(.ecl-rating-field--disabled)
+    > .ecl-rating-field__label:hover
+    .ecl-rating-field__icon-filled,
+  &:not(.ecl-rating-field--disabled)
     > .ecl-rating-field__label:hover
     ~ .ecl-rating-field__label
     .ecl-rating-field__icon-filled {
@@ -27,8 +29,10 @@
   .ecl-rating-field__input:checked
     ~ .ecl-rating-field__label
     .ecl-rating-field__icon-outline,
-  & > .ecl-rating-field__label:hover .ecl-rating-field__icon-outline,
-  &
+  &:not(.ecl-rating-field--disabled)
+    > .ecl-rating-field__label:hover
+    .ecl-rating-field__icon-outline,
+  &:not(.ecl-rating-field--disabled)
     > .ecl-rating-field__label:hover
     ~ .ecl-rating-field__label
     .ecl-rating-field__icon-outline {
@@ -50,16 +54,22 @@
 }
 
 // Focus, active state
-.ecl-rating-field__input:focus,
-.ecl-rating-field__input:active {
+.ecl-rating-field:not(.ecl-rating-field--disabled)
+  .ecl-rating-field__input:focus,
+.ecl-rating-field:not(.ecl-rating-field--disabled)
+  .ecl-rating-field__input:active {
   + .ecl-rating-field__label {
-    outline: 2px solid map.get(theme.$color, 'blue');
+    outline: 2px solid map.get(theme.$color, 'blue-100');
   }
 }
 
 .ecl-rating-field__label {
   cursor: pointer;
   margin-right: map.get(theme.$spacing, 'xs');
+
+  .ecl-rating-field--disabled & {
+    cursor: default;
+  }
 }
 
 .ecl-rating-field__icon-filled {
diff --git a/src/playground/addons/story-utils/index.js b/src/playground/addons/story-utils/index.js
index 6b965b80fa3..26e7eaa4ef8 100755
--- a/src/playground/addons/story-utils/index.js
+++ b/src/playground/addons/story-utils/index.js
@@ -170,7 +170,7 @@ export const getFormControls = (data, type) => {
   argTypes.disabled = {
     name: 'disabled',
     type: 'boolean',
-    description: `Disabled form ${type}`,
+    description: `Disabled (read only) form ${type}`,
     table: {
       type: { summary: 'boolean' },
       defaultValue: { summary: false },
diff --git a/src/website/src/pages/ec/components/forms/rating-field/demo/index.js b/src/website/src/pages/ec/components/forms/rating-field/demo/index.js
index cd4118523bb..c18960170f1 100644
--- a/src/website/src/pages/ec/components/forms/rating-field/demo/index.js
+++ b/src/website/src/pages/ec/components/forms/rating-field/demo/index.js
@@ -2,18 +2,33 @@ import demoContentDefault from '@ecl/specs-component-rating-field/demo/data';
 import template from '@ecl/twig-component-rating-field/rating-field.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
+const demoContentSelected = JSON.parse(JSON.stringify(demoContentDefault));
+demoContentSelected.items[2].checked = true;
+
 export const ratingFieldGroupDefault = template(
-  correctSvgPath(demoContentDefault)
+  correctSvgPath({
+    ...demoContentDefault,
+    id: 'rating-default',
+  })
 );
 export const ratingFieldGroupInvalid = template(
   correctSvgPath({
     ...demoContentDefault,
+    id: 'rating-invalid',
     invalid: true,
   })
 );
 export const ratingFieldGroupOptional = template(
   correctSvgPath({
     ...demoContentDefault,
+    id: 'rating-optional',
     required: false,
   })
 );
+export const ratingFieldGroupDisabled = template(
+  correctSvgPath({
+    ...demoContentSelected,
+    id: 'rating-disabled',
+    disabled: true,
+  })
+);
diff --git a/src/website/src/pages/ec/components/forms/rating-field/docs/code.mdx b/src/website/src/pages/ec/components/forms/rating-field/docs/code.mdx
index c26844b1460..ed6732b4365 100644
--- a/src/website/src/pages/ec/components/forms/rating-field/docs/code.mdx
+++ b/src/website/src/pages/ec/components/forms/rating-field/docs/code.mdx
@@ -9,6 +9,7 @@ import {
   ratingFieldGroupInvalid,
   ratingFieldGroupRequired,
   ratingFieldGroupOptional,
+  ratingFieldGroupDisabled,
 } from '../demo';
 
 ## Default rating field
@@ -17,7 +18,6 @@ import {
   system="ec"
   selectedKind="components-forms-rating-field"
   selectedStory="default"
-  showFrame
 >
   <Html markup={ratingFieldGroupDefault} />
 </Playground>
@@ -29,7 +29,6 @@ import {
   selectedKind="components-forms-rating-field"
   selectedStory="default"
   selectedArgs="invalid:true"
-  showFrame
 >
   <Html markup={ratingFieldGroupInvalid} />
 </Playground>
@@ -41,7 +40,17 @@ import {
   selectedKind="components-forms-rating-field"
   selectedStory="default"
   selectedArgs="required:false"
-  showFrame
 >
   <Html markup={ratingFieldGroupOptional} />
 </Playground>
+
+## Read only rating-field
+
+<Playground
+  system="ec"
+  selectedKind="components-forms-rating-field"
+  selectedStory="default"
+  selectedArgs="disabled:true"
+>
+  <Html markup={ratingFieldGroupDisabled} />
+</Playground>
diff --git a/src/website/src/pages/eu/components/forms/rating-field/demo/index.js b/src/website/src/pages/eu/components/forms/rating-field/demo/index.js
index cd4118523bb..c18960170f1 100644
--- a/src/website/src/pages/eu/components/forms/rating-field/demo/index.js
+++ b/src/website/src/pages/eu/components/forms/rating-field/demo/index.js
@@ -2,18 +2,33 @@ import demoContentDefault from '@ecl/specs-component-rating-field/demo/data';
 import template from '@ecl/twig-component-rating-field/rating-field.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
+const demoContentSelected = JSON.parse(JSON.stringify(demoContentDefault));
+demoContentSelected.items[2].checked = true;
+
 export const ratingFieldGroupDefault = template(
-  correctSvgPath(demoContentDefault)
+  correctSvgPath({
+    ...demoContentDefault,
+    id: 'rating-default',
+  })
 );
 export const ratingFieldGroupInvalid = template(
   correctSvgPath({
     ...demoContentDefault,
+    id: 'rating-invalid',
     invalid: true,
   })
 );
 export const ratingFieldGroupOptional = template(
   correctSvgPath({
     ...demoContentDefault,
+    id: 'rating-optional',
     required: false,
   })
 );
+export const ratingFieldGroupDisabled = template(
+  correctSvgPath({
+    ...demoContentSelected,
+    id: 'rating-disabled',
+    disabled: true,
+  })
+);
diff --git a/src/website/src/pages/eu/components/forms/rating-field/docs/code.mdx b/src/website/src/pages/eu/components/forms/rating-field/docs/code.mdx
index 0a95c0f4e79..b95ae179e2f 100644
--- a/src/website/src/pages/eu/components/forms/rating-field/docs/code.mdx
+++ b/src/website/src/pages/eu/components/forms/rating-field/docs/code.mdx
@@ -9,6 +9,7 @@ import {
   ratingFieldGroupInvalid,
   ratingFieldGroupRequired,
   ratingFieldGroupOptional,
+  ratingFieldGroupDisabled,
 } from '../demo';
 
 ## Default rating field
@@ -17,7 +18,6 @@ import {
   system="eu"
   selectedKind="components-forms-rating-field"
   selectedStory="default"
-  showFrame
 >
   <Html markup={ratingFieldGroupDefault} />
 </Playground>
@@ -29,7 +29,6 @@ import {
   selectedKind="components-forms-rating-field"
   selectedStory="default"
   selectedArgs="invalid:true"
-  showFrame
 >
   <Html markup={ratingFieldGroupInvalid} />
 </Playground>
@@ -41,7 +40,17 @@ import {
   selectedKind="components-forms-rating-field"
   selectedStory="default"
   selectedArgs="required:false"
-  showFrame
 >
   <Html markup={ratingFieldGroupOptional} />
 </Playground>
+
+## Read only rating-field
+
+<Playground
+  system="eu"
+  selectedKind="components-forms-rating-field"
+  selectedStory="default"
+  selectedArgs="disabled:true"
+>
+  <Html markup={ratingFieldGroupDisabled} />
+</Playground>

From d1c6c80ece497788bd702a4117e5bf1d372c75b9 Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Mon, 28 Nov 2022 15:29:09 +0100
Subject: [PATCH 2/2] fix website

---
 .../pages/ec/components/forms/rating-field/demo/index.js    | 6 ++++++
 .../pages/eu/components/forms/rating-field/demo/index.js    | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/src/website/src/pages/ec/components/forms/rating-field/demo/index.js b/src/website/src/pages/ec/components/forms/rating-field/demo/index.js
index c18960170f1..375d45c8608 100644
--- a/src/website/src/pages/ec/components/forms/rating-field/demo/index.js
+++ b/src/website/src/pages/ec/components/forms/rating-field/demo/index.js
@@ -3,18 +3,22 @@ import template from '@ecl/twig-component-rating-field/rating-field.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
 const demoContentSelected = JSON.parse(JSON.stringify(demoContentDefault));
+demoContentSelected.label = '';
+demoContentSelected.helper_text = '';
 demoContentSelected.items[2].checked = true;
 
 export const ratingFieldGroupDefault = template(
   correctSvgPath({
     ...demoContentDefault,
     id: 'rating-default',
+    name: 'rating-default',
   })
 );
 export const ratingFieldGroupInvalid = template(
   correctSvgPath({
     ...demoContentDefault,
     id: 'rating-invalid',
+    name: 'rating-invalid',
     invalid: true,
   })
 );
@@ -22,6 +26,7 @@ export const ratingFieldGroupOptional = template(
   correctSvgPath({
     ...demoContentDefault,
     id: 'rating-optional',
+    name: 'rating-optional',
     required: false,
   })
 );
@@ -29,6 +34,7 @@ export const ratingFieldGroupDisabled = template(
   correctSvgPath({
     ...demoContentSelected,
     id: 'rating-disabled',
+    name: 'rating-disabled',
     disabled: true,
   })
 );
diff --git a/src/website/src/pages/eu/components/forms/rating-field/demo/index.js b/src/website/src/pages/eu/components/forms/rating-field/demo/index.js
index c18960170f1..375d45c8608 100644
--- a/src/website/src/pages/eu/components/forms/rating-field/demo/index.js
+++ b/src/website/src/pages/eu/components/forms/rating-field/demo/index.js
@@ -3,18 +3,22 @@ import template from '@ecl/twig-component-rating-field/rating-field.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
 const demoContentSelected = JSON.parse(JSON.stringify(demoContentDefault));
+demoContentSelected.label = '';
+demoContentSelected.helper_text = '';
 demoContentSelected.items[2].checked = true;
 
 export const ratingFieldGroupDefault = template(
   correctSvgPath({
     ...demoContentDefault,
     id: 'rating-default',
+    name: 'rating-default',
   })
 );
 export const ratingFieldGroupInvalid = template(
   correctSvgPath({
     ...demoContentDefault,
     id: 'rating-invalid',
+    name: 'rating-invalid',
     invalid: true,
   })
 );
@@ -22,6 +26,7 @@ export const ratingFieldGroupOptional = template(
   correctSvgPath({
     ...demoContentDefault,
     id: 'rating-optional',
+    name: 'rating-optional',
     required: false,
   })
 );
@@ -29,6 +34,7 @@ export const ratingFieldGroupDisabled = template(
   correctSvgPath({
     ...demoContentSelected,
     id: 'rating-disabled',
+    name: 'rating-disabled',
     disabled: true,
   })
 );