willba-component-library 0.0.46 → 0.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/lib/index.esm.js +28 -40
  2. package/lib/index.esm.js.map +1 -1
  3. package/lib/index.js +28 -40
  4. package/lib/index.js.map +1 -1
  5. package/lib/index.umd.js +28 -40
  6. package/lib/index.umd.js.map +1 -1
  7. package/lib/themes/useTheme.d.ts +1 -1
  8. package/package.json +1 -1
  9. package/src/components/FilterBar/FilterBar.tsx +53 -49
  10. package/src/components/FilterBar/components/guests/Guests.tsx +1 -1
  11. package/src/themes/Default.css +11 -1
  12. package/src/themes/useTheme.tsx +8 -27
  13. package/src/themes/Kisakallio.css +0 -3
  14. package/src/themes/Pajulahti.css +0 -3
package/lib/themes/useTheme.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  type ThemeProps = {
2
2
  vendor?: string;
3
3
  };
4
- export default function useTheme({ vendor }: ThemeProps): void;
4
+ export default function useTheme({ vendor }: ThemeProps): "" | "will-root-kis" | "will-root-paj";
5
5
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "willba-component-library",
3
- "version": "0.0.46",
3
+ "version": "0.0.47",
4
4
  "description": "A stroybook 6 with TypeScript demo",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
package/src/components/FilterBar/FilterBar.tsx CHANGED
@@ -8,8 +8,8 @@ import Calendar from './components/calendar/Calendar'
8
8
  import Guests from './components/guests/Guests'
9
9
  import Categories from './components/categories/Categories'
10
10
 
11
- import useFilterBar from './hooks/useFilterBar'
12
11
  import useTheme from '../../themes/useTheme'
12
+ import useFilterBar from './hooks/useFilterBar'
13
13
 
14
14
  import './FilterBar.css'
15
15
  import '../../themes/Default.css'
@@ -21,8 +21,7 @@ type FilterBarProps = {
21
21
  }
22
22
 
23
23
  export default function FilterBar({ vendor, language }: FilterBarProps) {
24
- useTheme({ vendor })
25
-
24
+ const themeClass = useTheme({ vendor })
26
25
  const [rerenderKey, setRerenderKey] = useState(0)
27
26
 
28
27
  useEffect(() => {
@@ -49,53 +48,58 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
49
48
  } = useFilterBar()
50
49
 
51
50
  return (
52
- <div className={`filter-bar `}>
53
- <div className="filter-bar-header">
54
- <SelectButton
55
- label={t('calendar.startDate')}
56
- onClick={() => handleSelectedFilter(1)}
57
- />
58
- <Divider />
59
- <SelectButton
60
- label={t('calendar.endDate')}
61
- onClick={() => handleSelectedFilter(2)}
62
- />
63
- <Divider />
64
- <SelectButton
65
- label={t('guests.label')}
66
- onClick={() => handleSelectedFilter(3)}
67
- />
68
- <Divider />
69
- <SelectButton
70
- label={t('categories.label')}
71
- onClick={() => handleSelectedFilter(4)}
72
- />
73
- <SubmitButton onClick={handleSubmit} />
74
- </div>
75
-
76
- {selectedFilter && (
77
- <div className="filter-bar-container">
78
- {(selectedFilter === 1 || selectedFilter === 2) && (
79
- <Calendar
80
- calendarRange={calendarRange}
81
- setCalendarRange={setCalendarRange}
82
- />
83
- )}
84
- {selectedFilter === 3 && (
85
- <Guests
86
- guestsAdults={guestsAdults}
87
- guestsKids={guestsKids}
88
- decrementAdults={() => setGuestsAdults(guestsAdults - 1)}
89
- incrementAdults={() => setGuestsAdults(guestsAdults + 1)}
90
- decrementKids={() => setGuestsKids(guestsKids - 1)}
91
- incrementKids={() => setGuestsKids(guestsKids + 1)}
92
- />
93
- )}
94
- {selectedFilter === 4 && (
95
- <Categories categories={categories} setCategories={setCategories} />
96
- )}
51
+ <div className={`will-root ${themeClass}`}>
52
+ <div className={`filter-bar`}>
53
+ <div className="filter-bar-header">
54
+ <SelectButton
55
+ label={t('calendar.startDate')}
56
+ onClick={() => handleSelectedFilter(1)}
57
+ />
58
+ <Divider />
59
+ <SelectButton
60
+ label={t('calendar.endDate')}
61
+ onClick={() => handleSelectedFilter(2)}
62
+ />
63
+ <Divider />
64
+ <SelectButton
65
+ label={t('guests.label')}
66
+ onClick={() => handleSelectedFilter(3)}
67
+ />
68
+ <Divider />
69
+ <SelectButton
70
+ label={t('categories.label')}
71
+ onClick={() => handleSelectedFilter(4)}
72
+ />
73
+ <SubmitButton onClick={handleSubmit} />
97
74
  </div>
98
- )}
75
+
76
+ {selectedFilter && (
77
+ <div className="filter-bar-container">
78
+ {(selectedFilter === 1 || selectedFilter === 2) && (
79
+ <Calendar
80
+ calendarRange={calendarRange}
81
+ setCalendarRange={setCalendarRange}
82
+ />
83
+ )}
84
+ {selectedFilter === 3 && (
85
+ <Guests
86
+ guestsAdults={guestsAdults}
87
+ guestsKids={guestsKids}
88
+ decrementAdults={() => setGuestsAdults(guestsAdults - 1)}
89
+ incrementAdults={() => setGuestsAdults(guestsAdults + 1)}
90
+ decrementKids={() => setGuestsKids(guestsKids - 1)}
91
+ incrementKids={() => setGuestsKids(guestsKids + 1)}
92
+ />
93
+ )}
94
+ {selectedFilter === 4 && (
95
+ <Categories
96
+ categories={categories}
97
+ setCategories={setCategories}
98
+ />
99
+ )}
100
+ </div>
101
+ )}
102
+ </div>
99
103
  </div>
100
104
  )
101
105
  }
package/src/components/FilterBar/components/guests/Guests.tsx CHANGED
@@ -22,7 +22,7 @@ export default function Guests({
22
22
  <div className="guests-filter-inner">
23
23
  <span>{t('guests.adultsLabel')}</span>
24
24
  <div>
25
- <button onClick={decrementAdults} disabled={guestsAdults < 1}>
25
+ <button onClick={decrementAdults} disabled={guestsAdults < 2}>
26
26
  -
27
27
  </button>
28
28
  <span>{guestsAdults}</span>
package/src/themes/Default.css CHANGED
@@ -8,6 +8,16 @@
8
8
  box-sizing: border-box;
9
9
  }
10
10
 
11
- html {
11
+
12
+
13
+ .will-root {
12
14
  background-color: aqua;
15
+ }
16
+
17
+ .will-root-kis {
18
+ background-color: red;
19
+ }
20
+
21
+ .will-root-paj {
22
+ background-color: blue;
13
23
  }
package/src/themes/useTheme.tsx CHANGED
@@ -1,33 +1,14 @@
1
- import { useEffect } from 'react'
2
-
3
1
  type ThemeProps = {
4
2
  vendor?: string
5
3
  }
6
4
 
7
5
  export default function useTheme({ vendor }: ThemeProps) {
8
- useEffect(() => {
9
- if (vendor === 'Kisakallio') {
10
- addCSSFile(
11
- 'https://cdn.jsdelivr.net/npm/willba-component-library@latest/lib/themes/Kisakallio.css'
12
- )
13
- } else if (vendor === 'Pajulahti') {
14
- addCSSFile(
15
- 'https://cdn.jsdelivr.net/npm/willba-component-library@latest/lib/themes/Pajulahti.css'
16
- )
17
- } else {
18
- addCSSFile(
19
- 'https://cdn.jsdelivr.net/npm/willba-component-library@latest/lib/themes/Default.css'
20
- )
21
- }
22
- }, [vendor])
23
-
24
- return
25
- }
26
-
27
- const addCSSFile = (href: string) => {
28
- const link = document.createElement('link')
29
- link.rel = 'stylesheet'
30
- link.type = 'text/css'
31
- link.href = href
32
- document.head.appendChild(link)
6
+ const themeClass =
7
+ vendor === 'Kisakallio'
8
+ ? 'will-root-kis'
9
+ : vendor === 'Pajulahti'
10
+ ? 'will-root-paj'
11
+ : ''
12
+
13
+ return themeClass
33
14
  }
package/src/themes/Kisakallio.css DELETED
@@ -1,3 +0,0 @@
1
- html {
2
- background-color: blue;
3
- }
package/src/themes/Pajulahti.css DELETED
@@ -1,3 +0,0 @@
1
- html {
2
- background-color: red;
3
- }