willba-component-library 0.2.45 → 0.2.47

package/lib/themes/useTheme.d.ts

@@ -6,9 +6,8 @@ export type Palette = {
 export type ThemeProps = {
     palette?: Palette;
 };
-interface CustomPaletteTypes extends CSSProperties {
+export interface CustomPaletteTypes extends CSSProperties {
     '--will-primary'?: string;
     '--will-secondary'?: string;
 }
 export default function useTheme({ palette }: ThemeProps): CustomPaletteTypes;
-export {};

package/package.json

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

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

@@ -75,6 +75,7 @@ export const Primary: Story = {
         },
       },
     ],
+    isLoading: true,
   },
   render: (args) => (
     <div style={{ background: 'white', padding: '30px', height: '100vh' }}>

package/src/components/FilterBar/FilterBar.tsx

@@ -35,6 +35,7 @@ export default function FilterBar({
   disableCalendarDates,
   mode,
   tabs,
+  isLoading,
 }: FilterBarProps) {
   const themePalette = useTheme({ palette })
 
@@ -143,6 +144,7 @@ export default function FilterBar({
           onClick={handleSubmit}
           startIcon={<FaSearch />}
           label={t('common:search')}
+          isLoading={isLoading}
         />
       </div>
 

package/src/components/FilterBar/FilterBarTypes.ts

@@ -12,6 +12,7 @@ export type FilterBarProps = {
   mode?: string
   defaultTab?: string
   tabs?: Tab[]
+  isLoading?: boolean
 }
 
 export type AgeCategoryCount = {

package/src/components/FilterCalendar/FilterCalendar.css

@@ -41,7 +41,7 @@
 
 .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {
     display: flex;
-    min-height: 17.50px;
+    min-height: 20.5px;
 }
 
 .will-root .will-calendar-wrapper .will-calendar-footer-actions {

package/src/core/components/buttons/submit-button/SubmitButton.css

@@ -31,3 +31,10 @@ button.will-filter-bar-submit-button:disabled  {
    
   }
 }
+
+/* --- */
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

package/src/core/components/buttons/submit-button/SubmitButton.tsx

@@ -1,12 +1,17 @@
 import React, { ReactNode } from 'react'
 
+import { SpinnerSVG } from '../../../../assets/SpinnerSvg'
+import { Palette } from '../../../../themes/useTheme'
+
 import './SubmitButton.css'
+import { FaSpinner } from 'react-icons/fa'
 
 type Props = {
   onClick?: () => void
   startIcon?: ReactNode
   label?: string
   disabled?: boolean
+  isLoading?: boolean
 }
 
 export const SubmitButton = ({
@@ -14,14 +19,21 @@ export const SubmitButton = ({
   startIcon,
   label,
   disabled,
+  isLoading,
 }: Props) => {
   return (
     <button
       className="will-filter-bar-submit-button"
       onClick={onClick}
-      disabled={disabled}
+      disabled={disabled || isLoading}
     >
-      {startIcon && <span>{startIcon}</span>}
+      {isLoading ? (
+        <span>
+          {<FaSpinner style={{ animation: 'spin 1s linear infinite' }} />}
+        </span>
+      ) : (
+        startIcon && <span>{startIcon}</span>
+      )}
       {label || 'Label'}
     </button>
   )

package/src/themes/useTheme.tsx

@@ -9,7 +9,7 @@ export type ThemeProps = {
   palette?: Palette
 }
 
-interface CustomPaletteTypes extends CSSProperties {
+export interface CustomPaletteTypes extends CSSProperties {
   '--will-primary'?: string
   '--will-secondary'?: string
 }