willba-component-library 0.3.1 → 0.3.3

package/lib/index.esm.js

@@ -12148,7 +12148,7 @@ var useScrollInToView = function (_a) {
     return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
 };
 
-var css_248z$9 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n  color: var(--will-black);\n  font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n \n  color: var(--will-black);\n  font-weight: 400;\n  opacity: 0.5;\n  white-space: nowrap;\n  min-height: 19px;\n }\n\n .will-filter-bar-select-button .select-button-description span {\n  font: inherit\n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n  overflow: hidden;\n  text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n  font-weight: 700;\n  font-size: 15px;\n  opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n   }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 15px 0;\n   }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-description {\n    white-space: wrap;\n   }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
+var css_248z$9 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n  color: var(--will-black);\n  font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n  color: var(--will-black);\n  font-weight: 400;\n  opacity: 0.5;\n  white-space: nowrap;\n  min-height: 19px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.will-filter-bar-select-button .select-button-description span {\n  font: inherit\n}\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n  font-weight: 700;\n  font-size: 15px;\n  opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n   }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 15px 0;\n   }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-description {\n    white-space: wrap;\n   }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
 styleInject(css_248z$9);
 
 var SelectButton = forwardRef(function (_a, ref) {

package/lib/index.js

@@ -12150,7 +12150,7 @@ var useScrollInToView = function (_a) {
     return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
 };
 
-var css_248z$9 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n  color: var(--will-black);\n  font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n \n  color: var(--will-black);\n  font-weight: 400;\n  opacity: 0.5;\n  white-space: nowrap;\n  min-height: 19px;\n }\n\n .will-filter-bar-select-button .select-button-description span {\n  font: inherit\n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n  overflow: hidden;\n  text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n  font-weight: 700;\n  font-size: 15px;\n  opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n   }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 15px 0;\n   }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-description {\n    white-space: wrap;\n   }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
+var css_248z$9 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n  color: var(--will-black);\n  font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n  color: var(--will-black);\n  font-weight: 400;\n  opacity: 0.5;\n  white-space: nowrap;\n  min-height: 19px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.will-filter-bar-select-button .select-button-description span {\n  font: inherit\n}\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n  font-weight: 700;\n  font-size: 15px;\n  opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n   }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 15px 0;\n   }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-description {\n    white-space: wrap;\n   }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
 styleInject(css_248z$9);
 
 var SelectButton = React.forwardRef(function (_a, ref) {

package/lib/index.umd.js

@@ -12151,7 +12151,7 @@
         return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
     };
 
-    var css_248z$9 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n  color: var(--will-black);\n  font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n \n  color: var(--will-black);\n  font-weight: 400;\n  opacity: 0.5;\n  white-space: nowrap;\n  min-height: 19px;\n }\n\n .will-filter-bar-select-button .select-button-description span {\n  font: inherit\n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n  overflow: hidden;\n  text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n  font-weight: 700;\n  font-size: 15px;\n  opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n   }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 15px 0;\n   }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-description {\n    white-space: wrap;\n   }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
+    var css_248z$9 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n  color: var(--will-black);\n  font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n  color: var(--will-black);\n  font-weight: 400;\n  opacity: 0.5;\n  white-space: nowrap;\n  min-height: 19px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.will-filter-bar-select-button .select-button-description span {\n  font: inherit\n}\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n  font-weight: 700;\n  font-size: 15px;\n  opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n   }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 15px 0;\n   }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-description {\n    white-space: wrap;\n   }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
     styleInject(css_248z$9);
 
     var SelectButton = React.forwardRef(function (_a, ref) {

package/package.json

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

package/rollup.config.mjs

@@ -46,7 +46,9 @@ export default [
       peerDepsExternal(),
       resolve(),
       commonjs(),
-      typescript(),
+      typescript({
+        jsx: 'react',
+      }),
       postcss({
         extensions: ['.css'],
       }),

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

@@ -27,7 +27,7 @@ export const Main: Story = {
         },
       ],
     },
-    fullWidth: true,
+    fullWidth: false,
     language: 'en',
     redirectUrl: 'http://localhost:4000/',
     ageCategories: [
@@ -81,9 +81,9 @@ export const Main: Story = {
       multiSelect: false,
       data: [
         {
-          id: '1',
+          id: 1,
           label: {
-            en: 'Location 1',
+            en: 'Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1 Location 1',
             fi: 'Location 1 fi',
           },
           description: {
@@ -94,14 +94,14 @@ export const Main: Story = {
             '//i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-fall-nature-scenery-free-image.jpeg?w=2210&quality=70',
         },
         {
-          id: '2',
+          id: 2,
           label: {
             en: 'Location 2',
             fi: 'Location 2 fi',
           },
         },
         {
-          id: '3',
+          id: 3,
           label: {
             en: 'Location 3',
             fi: 'Location 3 fi',
@@ -114,7 +114,7 @@ export const Main: Story = {
             '//i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-fall-nature-scenery-free-image.jpeg?w=2210&quality=70',
         },
         {
-          id: '4',
+          id: 4,
           label: {
             en: 'Location 4',
             fi: 'Location 4 fi',
@@ -123,7 +123,7 @@ export const Main: Story = {
             '//i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-fall-nature-scenery-free-image.jpeg?w=2210&quality=70',
         },
         {
-          id: '5',
+          id: 5,
           label: {
             en: 'Location 5',
             fi: 'Location 5 fi',

package/src/components/FilterBar/components/buttons/select-button/SelectButton.css

@@ -28,22 +28,18 @@
 }
 
 .will-filter-bar-select-button .select-button-description {
- 
   color: var(--will-black);
   font-weight: 400;
   opacity: 0.5;
   white-space: nowrap;
   min-height: 19px;
- }
-
- .will-filter-bar-select-button .select-button-description span {
-  font: inherit
- }
-
- .will-root.is-full-width .will-filter-bar-select-button .select-button-description {
   overflow: hidden;
   text-overflow: ellipsis;
- }
+}
+
+.will-filter-bar-select-button .select-button-description span {
+  font: inherit
+}
 
  .will-filter-bar-select-button .select-button-label.active,
  .will-filter-bar-select-button .select-button-description.active {

package/tsconfig.json

@@ -13,11 +13,11 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     
     "baseUrl": "./",
     "paths": {