willba-component-library 0.2.78 → 0.2.80

package/lib/themes/useTheme.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+export type Palette = {
+    primary: string;
+    secondary: string;
+};
+export type ThemeProps = {
+    palette?: Palette;
+};
+export interface CustomPaletteTypes extends CSSProperties {
+    '--will-primary'?: string;
+    '--will-secondary'?: string;
+}
+export default function useTheme({ palette }: ThemeProps): CustomPaletteTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.2.78",
+  "version": "0.2.80",
   "description": "A custom UI component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/assets/SpinnerSvg.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+export const SpinnerSVG = ({
+  fill,
+  size,
+}: {
+  fill?: string
+  size?: number
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size || 25}`}
+    height={`${size || 25}`}
+    viewBox="0 0 24 24"
+  >
+    <style>
+      {`
+  .spinner_z9k8 {
+  transform-origin: center;
+  animation: spinner_StKS .75s infinite linear;
+  }
+  @keyframes spinner_StKS {
+  100% {
+  transform: rotate(360deg);
+  }
+  }
+  `}
+    </style>
+    <path
+      d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+      opacity=".25"
+      fill={fill}
+    />
+    <path
+      d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
+      className="spinner_z9k8"
+      fill={fill}
+    />
+  </svg>
+)

package/src/components/FilterBar/FilterBar.stories.tsx

@@ -13,7 +13,7 @@ export default meta
 
 type Story = StoryObj<typeof FilterBar>
 
-export const Main: Story = {
+export const Primary: Story = {
   args: {
     disableCalendarDates: {
       disabledDatesByPage: [
@@ -53,7 +53,6 @@ export const Main: Story = {
     palette: {
       primary: '',
       secondary: '',
-      error: '#d32f2f',
     },
     mode: 'dark',
     tabs: [

package/src/components/FilterBar/FilterBar.tsx

@@ -10,7 +10,7 @@ import {
   useUpdateTranslations,
 } from '../../core/hooks'
 import { Calendar, SubmitButton, CloseButton } from '../../core/components'
-import { parseDates } from '../../core/components/calendar/utils'
+import { parseDates } from '../../core/utils'
 
 import { parseGuests } from './utils'
 import { FilterBarProps, FilterSections, Pages } from './FilterBarTypes'

package/src/components/FilterBar/components/buttons/tab-button/TabButton.css

@@ -29,7 +29,7 @@
 
   .will-filter-bar-tab-button.dark.active,
   .will-filter-bar-tab-button:hover {
-    background-color: var(--will-transparent-lavender);
+    background-color: var(--will-transparent-black);
   }
 
  

package/src/components/FilterBar/hooks/useFilterBar.tsx

@@ -124,7 +124,7 @@ export const useFilterBar = ({
 
     handleSelectedFilter(false)
 
-    if (onSubmit && selectedPath === Pages.ROOMS) {
+    if (onSubmit && window.location.href.includes(selectedPath)) {
       onSubmit(newParams)
     } else {
       setInnerLoading(true),

package/src/components/FilterCalendar/FilterCalendar.css

@@ -5,7 +5,6 @@
     position: absolute;
     top: 0;
     left: 0;
-   
 }
 
 .will-root .will-calendar-wrapper .will-calendar-header,
@@ -26,14 +25,10 @@
 /* Footer */
 
 .will-root .will-calendar-wrapper .will-calendar-footer {
-    border-top: 1px solid var(--will-grey);
-}
-
-/* Footer actions */
-
-.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {
     display: flex;
     justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid var(--will-grey);
 }
 
 .will-root .will-calendar-wrapper .will-calendar-footer-dates > div {
@@ -47,23 +42,19 @@
 .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {
     display: flex;
     min-height: 20.5px;
-    margin-top: 10px;
 }
 
-.will-root .will-calendar-wrapper .will-calendar-footer-error {
+.will-root .will-calendar-wrapper .will-calendar-footer-actions {
     display: flex;
-    max-width: 80%;
+    align-items: center;
+    gap: 10px;
 }
 
-.will-root .will-calendar-wrapper .will-calendar-footer-error span {
-    display: inline-block;
-    margin-left: 10px;
-}
+
 
 @media (max-width: 960px) {
     .will-root .will-calendar-wrapper {
         width: -webkit-fill-available;
-        margin: 0 -6%;
     }
 
     .will-root .will-calendar-wrapper .will-calendar-header,
@@ -72,11 +63,12 @@
         padding: 20px 10px;
     }
 
-    .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {
+    .will-root .will-calendar-wrapper .will-calendar-footer {
         flex-direction: column;
     }
 
     .will-root .will-calendar-wrapper .will-calendar-footer-dates  {
+        margin-bottom: 12px;
         text-align: center;
     }
 
@@ -91,19 +83,11 @@
 
     .will-root .will-calendar-wrapper .will-calendar-footer-actions button{
         width: 100%;
-        margin-top: 10px;
      }
-
-     .will-root .will-calendar-wrapper .will-calendar-footer-error {
-        max-width: 100%;
-    }
-
-    .will-root .will-calendar-wrapper .will-calendar-footer-error span {
-        text-align: center;
-        margin-left: 5px;
-    }
   }
 
+/**/
+
 .will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {
     position: initial;
 }