guestbell-forms 3.0.45 → 3.0.47

package/src/lib/components/inputHeader/InputHeader.tsx

@@ -165,6 +165,11 @@ export class InputHeaderRaw
       this.props.collapsed !== undefined
         ? !this.props.collapsed
         : !this.state.collapsed;
+    const showButtons = Boolean(
+      this.props.mainButton ||
+        this.props.extraButtons?.length ||
+        this.props.collapsible
+    );
     return (
       <div
         className={
@@ -214,43 +219,45 @@ export class InputHeaderRaw
               {this.props.subTitle}
             </div>
           )}
-          <div
-            className="input__header__top__button-container"
-            onClick={this.mainButtonClick}
-          >
-            {this.props.mainButton && this.props.mainButton}
-            {this.props.extraButtons ? (
-              <Dropdown
-                header={
-                  <Button
-                    blank={true}
-                    circular={true}
-                    {...this.props.extraButtonsButtonProps}
-                  >
-                    <MoreIcon />
-                  </Button>
-                }
-                showArrow={false}
-                headerClassName={'line-height--0'}
-                className={''}
-              >
-                {this.renderExtraButtons()}
-              </Dropdown>
-            ) : null}
-            {this.props.collapsible && (
-              <Button
-                circular={true}
-                blank={true}
-                className={`input__header__collapse-button line-height--0 ${
-                  this.state.collapsed ? 'collapsed' : ''
-                }`}
-                {...this.props.collapseButtonsButtonProps}
-                onClick={this.toggleClick}
-              >
-                <PlusIcon />
-              </Button>
-            )}
-          </div>
+          {showButtons && (
+            <div
+              className="input__header__top__button-container"
+              onClick={this.mainButtonClick}
+            >
+              {this.props.mainButton && this.props.mainButton}
+              {this.props.extraButtons ? (
+                <Dropdown
+                  header={
+                    <Button
+                      blank={true}
+                      circular={true}
+                      {...this.props.extraButtonsButtonProps}
+                    >
+                      <MoreIcon />
+                    </Button>
+                  }
+                  showArrow={false}
+                  headerClassName={'line-height--0'}
+                  className={''}
+                >
+                  {this.renderExtraButtons()}
+                </Dropdown>
+              ) : null}
+              {this.props.collapsible && (
+                <Button
+                  circular={true}
+                  blank={true}
+                  className={`input__header__collapse-button line-height--0 ${
+                    this.state.collapsed ? 'collapsed' : ''
+                  }`}
+                  {...this.props.collapseButtonsButtonProps}
+                  onClick={this.toggleClick}
+                >
+                  <PlusIcon />
+                </Button>
+              )}
+            </div>
+          )}
           {this.props.showExpandAll &&
             Object.keys(this.state.inputHeaderContext.components).length > 0 &&
             this.renderCollapseExpandAll()}

package/src/lib/scss/components/bookingCalendar/bookingCalendar.scss

@@ -274,3 +274,30 @@ $border-color-dark: black;
   animation-name: fadeOut;
   animation-fill-mode: forwards;
 }
+
+.bookingCalendar__nowSection {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+  pointer-events: none;
+  grid-column: 2;
+  grid-row-start: 2;
+  display: flex;
+}
+
+.bookingCalendar__nowSection__now {
+  width: 1px;
+  background-color: rgba(0, 0, 0, 0.35);
+  background-image: repeating-linear-gradient(
+    45deg,
+    white,
+    white 5px,
+    transparent 5px,
+    transparent 10px
+  );
+}
+
+.bookingCalendar__nowSection__before {
+  background-color: rgba(0, 0, 0, 0.075);
+}

package/src/stories/Schedule.tsx

@@ -32,7 +32,7 @@ const generateBookingItemsBetweenDates = (
 
 export const Schedule = () => {
   const [{ from, till }, setRange] = React.useState({
-    from: moment().startOf('day').subtract(0, 'day'),
+    from: moment().startOf('day').subtract(1, 'day'),
     till: moment().startOf('day').add(7, 'days'),
   });