feat: make Place Opening Hours colors customizable

PiperOrigin-RevId: 580678862
googlemaps · Nov 9, 2023 · 574f3b3 · 574f3b3
1 parent 3b03f39
commit 574f3b3
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 23 deletions.
diff --git a/build/make_docs.js b/build/make_docs.js
@@ -36,12 +36,13 @@ const CSS_CUSTOM_PROPERTY_DEFAULTS = {
   '--gmpx-font-size-base': '0.875rem',
   '--gmpx-rating-color': '#ffb300',
   '--gmpx-rating-color-empty': '#e0e0e0',
+  '--gmpx-hours-color-open': '#188038',
+  '--gmpx-hours-color-closed': '#d50000'
 };
 const COMPONENTS_STYLED_AS_TEXT = new Set([
   'PlaceAttribution',
   'PlaceFieldLink',
   'PlaceFieldText',
-  'PlaceOpeningHours',
   'PlacePriceLevel',
 ]);
 const FRIENDLY_NAMES = {

diff --git a/src/place_building_blocks/place_opening_hours/README.md b/src/place_building_blocks/place_opening_hours/README.md
@@ -39,16 +39,14 @@ import { PlaceOpeningHours } from '@googlemaps/extended-component-library/place_
 
 ## Styling
 
-This is a low-level component designed to be styled with built-in CSS properties. For most styling purposes, it is equivalent to a `<span>` element.
+You can use most built-in CSS properties to control the positioning or display of this component, similar to a `<span>` element. The component also supports the following styling inputs for more customization:
 
-For example, by default this component will inherit the color of its parent element. However, you can change the color by writing the following CSS:
+### CSS Custom Properties
 
-
-```css
-gmpx-place-opening-hours {
-  color: blue;
-}
-```
+| Name                        | Default   | Description                                    |
+| --------------------------- | --------- | ---------------------------------------------- |
+| `--gmpx-hours-color-open`   | `#188038` | Text color when the place is currently open.   |
+| `--gmpx-hours-color-closed` | `#d50000` | Text color when the place is currently closed. |
 
 
 
diff --git a/src/place_building_blocks/place_opening_hours/place_opening_hours.ts b/src/place_building_blocks/place_opening_hours/place_opening_hours.ts
@@ -35,6 +35,11 @@ declare global {
  * which case it will render the place’s business status instead). A place’s
  * opening status is determined by its business status, opening hours periods,
  * and UTC offset minutes.
+ *
+ * @cssproperty [--gmpx-hours-color-open] - Text color when the place is
+ * currently open.
+ * @cssproperty [--gmpx-hours-color-closed] - Text color when the place
+ * is currently closed.
  */
 @customElement('gmpx-place-opening-hours')
 export class PlaceOpeningHours extends PlaceDataConsumer {
@@ -60,11 +65,11 @@ export class PlaceOpeningHours extends PlaceDataConsumer {
     }
 
     .closed {
-      color: #d50000;
+      color: var(--gmpx-hours-color-closed, #d50000);
     }
 
     .open {
-      color: #188038;
+      color: var(--gmpx-hours-color-open, #188038);
     }
 
     .icon {

diff --git a/src/place_overview/README.md b/src/place_overview/README.md
@@ -73,18 +73,20 @@ You can use most built-in CSS properties to control the positioning or display o
 
 ### CSS Custom Properties
 
-| Name                              | Default                          | Description                                       |
-| --------------------------------- | -------------------------------- | ------------------------------------------------- |
-| `--gmpx-color-surface`            | `#fff`                           | Background color. 🌎                              |
-| `--gmpx-color-on-surface`         | `#212121`                        | Main text color. 🌎                               |
-| `--gmpx-color-on-surface-variant` | `#757575`                        | Color of less important text such as captions. 🌎 |
-| `--gmpx-color-primary`            | `#1976d2`                        | Color of buttons and icons. 🌎                    |
-| `--gmpx-color-outline`            | `#e0e0e0`                        | Color of divider elements and button outlines. 🌎 |
-| `--gmpx-font-family-base`         | `'Google Sans Text', sans-serif` | Font family for regular text. 🌎                  |
-| `--gmpx-font-family-headings`     | `--gmpx-font-family-base`        | Font family for headings. 🌎                      |
-| `--gmpx-font-size-base`           | `0.875rem`                       | Text size, sets scale for the component. 🌎       |
-| `--gmpx-rating-color`             | `#ffb300`                        | Color of star rating icons.                       |
-| `--gmpx-rating-color-empty`       | `#e0e0e0`                        | Background color of star rating icons.            |
+| Name                              | Default                          | Description                                        |
+| --------------------------------- | -------------------------------- | -------------------------------------------------- |
+| `--gmpx-color-surface`            | `#fff`                           | Background color. 🌎                               |
+| `--gmpx-color-on-surface`         | `#212121`                        | Main text color. 🌎                                |
+| `--gmpx-color-on-surface-variant` | `#757575`                        | Color of less important text such as captions. 🌎  |
+| `--gmpx-color-primary`            | `#1976d2`                        | Color of buttons and icons. 🌎                     |
+| `--gmpx-color-outline`            | `#e0e0e0`                        | Color of divider elements and button outlines. 🌎  |
+| `--gmpx-font-family-base`         | `'Google Sans Text', sans-serif` | Font family for regular text. 🌎                   |
+| `--gmpx-font-family-headings`     | `--gmpx-font-family-base`        | Font family for headings. 🌎                       |
+| `--gmpx-font-size-base`           | `0.875rem`                       | Text size, sets scale for the component. 🌎        |
+| `--gmpx-rating-color`             | `#ffb300`                        | Color of star rating icons.                        |
+| `--gmpx-rating-color-empty`       | `#e0e0e0`                        | Background color of star rating icons.             |
+| `--gmpx-hours-color-open`         | `#188038`                        | Opening hours text color when the place is open.   |
+| `--gmpx-hours-color-closed`       | `#d50000`                        | Opening hours text color when the place is closed. |
 
 🌎 _indicates a global style token shared by
                                     multiple components. Please see the library

diff --git a/src/place_overview/place_overview.ts b/src/place_overview/place_overview.ts
@@ -103,6 +103,10 @@ declare global {
  * @cssproperty [--gmpx-rating-color] - Color of star rating icons.
  * @cssproperty [--gmpx-rating-color-empty] - Background color of star
  * rating icons.
+ * @cssproperty [--gmpx-hours-color-open] - Opening hours text color
+ * when the place is open.
+ * @cssproperty [--gmpx-hours-color-closed] - Opening hours text color
+ * when the place is closed.
  */
 @customElement('gmpx-place-overview')
 export class PlaceOverview extends BaseComponent {