willba-component-library 0.2.80 → 0.2.81

package/lib/themes/useTheme.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 export type Palette = {
     primary: string;
     secondary: string;
+    error: string;
 };
 export type ThemeProps = {
     palette?: Palette;
@@ -9,5 +10,6 @@ export type ThemeProps = {
 export interface CustomPaletteTypes extends CSSProperties {
     '--will-primary'?: string;
     '--will-secondary'?: string;
+    '--will-error'?: string;
 }
 export default function useTheme({ palette }: ThemeProps): CustomPaletteTypes;

package/package.json

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

package/src/assets/IconsSvg.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+
+type Icon = 'spinner' | 'warning'
+
+type Props = {
+  fill?: string
+  size?: number
+  icon: Icon
+}
+
+export const IconsSvg = ({ fill, size, icon }: Props) => {
+  switch (icon) {
+    case 'spinner':
+      return (
+        <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>
+      )
+    case 'warning':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={`${size || 25}`}
+          height={`${size || 25}`}
+          className="svg-icon"
+          style={{
+            verticalAlign: 'middle',
+            fill: fill,
+            overflow: 'hidden',
+            minWidth: '25px',
+            minHeight: '25px',
+          }}
+          viewBox="0 0 1024 1024"
+          version="1.1"
+        >
+          <path d="M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" />
+        </svg>
+      )
+    default:
+  }
+}

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

@@ -13,7 +13,7 @@ export default meta
 
 type Story = StoryObj<typeof FilterBar>
 
-export const Primary: Story = {
+export const Main: Story = {
   args: {
     disableCalendarDates: {
       disabledDatesByPage: [
@@ -53,6 +53,7 @@ export const Primary: 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/utils'
+import { parseDates } from '../../core/components/calendar/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-black);
+    background-color: var(--will-transparent-lavender);
   }
 
  

package/src/components/FilterCalendar/FilterCalendar.css

@@ -5,6 +5,7 @@
     position: absolute;
     top: 0;
     left: 0;
+   
 }
 
 .will-root .will-calendar-wrapper .will-calendar-header,
@@ -25,10 +26,14 @@
 /* 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 {
@@ -42,19 +47,23 @@
 .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-actions {
+.will-root .will-calendar-wrapper .will-calendar-footer-error {
     display: flex;
-    align-items: center;
-    gap: 10px;
+    max-width: 80%;
 }
 
-
+.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,
@@ -63,12 +72,11 @@
         padding: 20px 10px;
     }
 
-    .will-root .will-calendar-wrapper .will-calendar-footer {
+    .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {
         flex-direction: column;
     }
 
     .will-root .will-calendar-wrapper .will-calendar-footer-dates  {
-        margin-bottom: 12px;
         text-align: center;
     }
 
@@ -83,10 +91,18 @@
 
     .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;