Merge pull request #472 from OpenCatalogi/feature/OP-288/common-groun…

…d-rating-component-detail-page feature/OP-288/common-ground-rating-component-detail-page
OpenCatalogi · May 3, 2024 · db4a53c · db4a53c
2 parents 5b0d3b9 + e4a5e88
commit db4a53c
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 1 deletion.
diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css
@@ -326,6 +326,42 @@
   fill: #a97142;
 }
 
+.goldRatingButton > span > svg > g,
+.silverRatingButton > span > svg > g,
+.bronzeRatingButton > span > svg > g {
+  fill: var(--utrecht-button-color);
+}
+
+.goldRatingButton {
+  background-color: #d4af37;
+}
+.goldRatingButton:hover,
+.goldRatingButton:active,
+.goldRatingButton:focus {
+  cursor: default;
+  background-color: #d4af37 !important;
+}
+
+.silverRatingButton {
+  background-color: #bcc6cc;
+}
+.silverRatingButton:hover,
+.silverRatingButton:active,
+.silverRatingButton:focus {
+  cursor: default;
+  background-color: #bcc6cc !important;
+}
+
+.bronzeRatingButton {
+  background-color: #a97142;
+}
+.bronzeRatingButton:hover,
+.bronzeRatingButton:active,
+.bronzeRatingButton:focus {
+  cursor: default;
+  background-color: #a97142 !important;
+}
+
 /* Colors of the 5 layers */
 .interactionLayer,
 .interfaceLayer {

diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -533,6 +533,36 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
                     )}
                   </>
                 )}
+                {_getComponent.data.embedded.nl.embedded.commonground.rating &&
+                  _getComponent.data.embedded.nl.embedded.commonground.rating !== 0 && (
+                    <Button
+                      tabIndex={-1}
+                      className={clsx(
+                        styles[
+                          _.camelCase(
+                            t(
+                              `${getCommongroundRating(
+                                _getComponent.data.embedded?.nl?.embedded?.commonground?.rating ?? 0,
+                              )} ratingButton`,
+                            ),
+                          )
+                        ],
+                        styles.commongroundRating,
+                      )}
+                      onClick={(e) => {
+                        e.preventDefault();
+                      }}
+                      data-tooltip-id={TOOLTIP_ID}
+                      data-tooltip-content={t(
+                        getCommongroundRating(_getComponent.data.embedded?.nl?.embedded?.commonground?.rating ?? 0),
+                      )}
+                    >
+                      <Icon>
+                        {getCommongroundImage(_getComponent.data.embedded?.nl?.embedded?.commonground?.rating ?? 0)}
+                      </Icon>
+                      {t("Common Ground rating")}
+                    </Button>
+                  )}
               </div>
             </div>
           </div>

diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts
@@ -164,5 +164,6 @@ export const en = {
   "The repository has been submitted successfully.": "The repository has been submitted successfully.",
   "Show Percentages": "Show Percentages",
   "Show Total": "Show Total",
-  "More information": "More information"
+  "More information": "More information",
+  "Common Ground rating": "Common Ground rating",
 };
diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts
@@ -168,4 +168,5 @@ export const nl = {
   "Show Percentages": "Toon Percentages",
   "Show Total": "Toon Aantal",
   "More information": "Meer informatie",
+  "Common Ground rating": "Common Ground beoordeling",
 };