updated rating component to NLDS

OpenCatalogi · Nov 8, 2023 · 9d69e84 · 9d69e84
1 parent 71f7c9d
commit 9d69e84
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 19 deletions.
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@conduction/components": "2.2.24",
-    "@conduction/theme": "1.0.52",
+    "@conduction/theme": "1.0.54",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "6.4.2",

diff --git a/pwa/src/services/getTokenValue.ts b/pwa/src/services/getTokenValue.ts
@@ -1,3 +1,7 @@
 export const getTokenValue = (tokenKey: string) => {
-  return getComputedStyle(document.documentElement).getPropertyValue(tokenKey);
+  const body = document.querySelector("body");
+  const bodyToken = getComputedStyle(body!).getPropertyValue(tokenKey);
+  const rootToken = getComputedStyle(document.documentElement).getPropertyValue(tokenKey);
+
+  return bodyToken !== "" ? bodyToken : rootToken;
 };
diff --git a/pwa/src/styling/global.css b/pwa/src/styling/global.css
@@ -91,4 +91,9 @@ body {
   --web-app-component-rating-indicator-height: 160px;
   --web-app-organization-card-logo-height: 100px;
   --web-app-organization-card-logo-width: 100px;
+  --open-catalogi-rating-font-family: Arial, sans-serif;
+  --open-catalogi-rating-font-size: var(--web-app-size-md);
+  --open-catalogi-rating-rating-bar-color: green;
+  --open-catalogi-rating-rating-bar-background-color: #bfbfbf;
+  --web-app-overlay-background: rgba(0, 0, 0, 0.3);
 }
diff --git a/pwa/src/templates/templateParts/ratingIndicator/RatingIndicatorTemplate.module.css b/pwa/src/templates/templateParts/ratingIndicator/RatingIndicatorTemplate.module.css
@@ -1,8 +1,8 @@
 :export {
-  ratingFontFamily: --web-app-primary-font-family;
-  ratingFontSize: --web-app-font-size-xl;
-  ratingActiveColor: --web-app-rating-active-color;
-  ratingDisabledColor: --web-app-rating-disable-color;
+  ratingFontFamily: --open-catalogi-rating-font-family;
+  ratingFontSize: --open-catalogi-rating-font-size;
+  ratingBarActiveColor: --open-catalogi-rating-rating-bar-color;
+  ratingBarBackgroundColor: --open-catalogi-rating-rating-bar-background-color;
 }
 .container {
   display: flex;

diff --git a/pwa/src/templates/templateParts/ratingIndicator/RatingIndicatorTemplate.tsx b/pwa/src/templates/templateParts/ratingIndicator/RatingIndicatorTemplate.tsx
@@ -19,10 +19,12 @@ export const RatingIndicatorTemplate: React.FC<RatingIndicatorTemplateProps> = (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
       <PieChart
         className={styles.ratingPieChart}
-        data={[{ value: 1, key: 1, color: getTokenValue(styles.ratingActiveColor), title: `${rating}/${maxRating}` }]}
+        data={[
+          { value: 1, key: 1, color: getTokenValue(styles.ratingBarActiveColor), title: `${rating}/${maxRating}` },
+        ]}
         reveal={(rating / maxRating) * 100}
         lineWidth={20}
-        background={getTokenValue(styles.ratingDisabledColor)}
+        background={getTokenValue(styles.ratingBarBackgroundColor)}
         startAngle={270}
         lengthAngle={360}
         rounded
@@ -32,7 +34,7 @@ export const RatingIndicatorTemplate: React.FC<RatingIndicatorTemplateProps> = (
         labelStyle={{
           fontSize: getTokenValue(styles.ratingFontSize),
           fontFamily: getTokenValue(styles.ratingFontFamily),
-          fill: getTokenValue(styles.ratingActiveColor),
+          fill: getTokenValue(styles.ratingBarActiveColor),
         }}
         labelPosition={0}
       />

diff --git a/pwa/static/.env.development b/pwa/static/.env.development
@@ -11,12 +11,14 @@ GATSBY_FRONTEND_URL=https://api.opencatalogi.nl
 GATSBY_LOGIN_REDIRECT=vault
 GATSBY_ADMIN_DASHBOARD_URL=https://admin.opencatalogi.nl
 
+
 # Config
 GATSBY_NL_DESIGN_THEME_CLASSNAME=rotterdam-theme
 # GATSBY_GITHUB_ORGANIZATION_URL="https://github.com/ConductionNL"
 GATSBY_FAVICON_URL="https://dev.opencatalogi.nl/static/logo_OpenCatalogi-8b1b0a001c3f37dae4d3f69b5964ec72.png"
 GATSBY_PAGE_TITLE=
 
+
 # Header
 GATSBY_HEADER_LOGO_URL=https://www.rotterdam.nl/images/logo-base.svg
 GATSBY_HEADER_SHOW_LOGIN="false"
@@ -36,16 +38,13 @@ GATSBY_JUMBOTRON_SEARCHFORM="true"
 # options: "true" | "false"
 GATSBY_JUMBOTRON_CONTAINER="true"
 
-
 # Footer
 GATSBY_FOOTER_SHOW_CREATOR="false"
 GATSBY_FOOTER_LOGO_URL="false"
 GATSBY_FOOTER_CONTENT="https://raw.githubusercontent.com/OpenCatalogi/web-app/25995205e1dbb043822d1c58c5c23f8e6f77ff7e/pwa/src/templates/templateParts/footer/FooterContent.json"
 # options: "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" 
 GATSBY_FOOTER_CONTENT_HEADER="" 
 
-# options: "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5"
-GATSBY_FOOTER_CONTENT_HEADER=""
 
 # Home
 GATSBY_OPTIONAL_START_PAGE=
diff --git a/pwa/static/.env.production b/pwa/static/.env.production
@@ -14,6 +14,8 @@ GATSBY_ADMIN_DASHBOARD_URL=
 # Config
 GATSBY_NL_DESIGN_THEME_CLASSNAME=
 GATSBY_GITHUB_ORGANIZATION_URL=
+GATSBY_FAVICON_URL=
+GATSBY_PAGE_TITLE=
 
 # Header
 GATSBY_HEADER_LOGO_URL=
@@ -32,6 +34,8 @@ GATSBY_JUMBOTRON_DESCRIPTION=
 GATSBY_JUMBOTRON_ISCARD=
 # options: "true" | "false"
 GATSBY_JUMBOTRON_SEARCHFORM=
+# options: "true" | "false"
+GATSBY_JUMBOTRON_CONTAINER=
 
 # Footer
 GATSBY_FOOTER_SHOW_CREATOR=
@@ -40,8 +44,6 @@ GATSBY_FOOTER_CONTENT=
 # options: "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5"
 GATSBY_FOOTER_CONTENT_HEADER=
 
-# options: "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5"
-GATSBY_FOOTER_CONTENT_HEADER=
 
 # Home
 GATSBY_OPTIONAL_START_PAGE=
diff --git a/pwa/static/themes/rotterdam.css b/pwa/static/themes/rotterdam.css
@@ -117,7 +117,6 @@
 
 .rotterdam-theme {
   /* @gemeente-utrecht: Databadge */
-  --utrecht-badge-padding-block: var(--web-app-size-xs) !important;
   --utrecht-badge-background-color: var(--rotterdam-color-base-black) !important;
   --utrecht-badge-font-size: var(--web-app-font-size-sm) !important;
   --utrecht-badge-font-weight: var(--web-app-font-weight-normal) !important;