willba-component-library 0.3.23 → 0.3.25

package/README.md

@@ -107,7 +107,7 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 
 <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.23/lib/index.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.25/lib/index.umd.js"></script>
 
 <script>
   const renderFilterBar = async () => {

package/lib/index.esm.js

@@ -12078,7 +12078,7 @@ var ImageCard = forwardRef(function (_a, ref) {
 });
 ImageCard.displayName = 'ImageCard';
 
-var css_248z$7 = "#will-filter-bar-locations {\n  text-align: initial;\n}\n\n.will-locations-filter-container {\n  display: flex;\n  flex-direction: column;\n  min-width: 400px;\n  padding-bottom: 16px;\n}\n\n@media (max-width: 960px) {\n  .will-locations-filter-container {\n    margin-top: 15px;\n    min-width: 100%;\n  }\n}\n";
+var css_248z$7 = "#will-filter-bar-locations {\n  text-align: initial;\n}\n\n.will-locations-filter-container {\n  display: flex;\n  flex-direction: column;\n  min-width: 400px;\n  padding-bottom: 16px;\n}\n\n@media (max-width: 960px) {\n  .will-locations-filter-container {\n    min-width: 100%;\n  }\n}\n";
 styleInject(css_248z$7);
 
 var Locations = forwardRef(function (_a, ref) {
@@ -12251,7 +12251,7 @@ var FilterTabs = function () {
 var css_248z$2 = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n \n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-light-grey: #C8C8C8;\n  --will-white: #fff;\n  --will-white-transparent: #ffffffcf;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-error: #d32f2f;\n\n  /* Transparent */\n  --will-transparent-black: rgba(0, 0, 0, 0.5);\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-lavender: rgba(171, 167, 175, 0.30);\n\n  /* Color mix */\n  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n  /* Shadows */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
 styleInject(css_248z$2);
 
-var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Common */\n\n.will-filter-bar-controls.dark,\n.will-filter-bar-panels.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-controls.light,\n.will-filter-bar-panels.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n";
+var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n@media (max-width: 960px) {\n  .will-root {\n    width: 100%;\n    min-width: auto;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-controls.dark,\n.will-filter-bar-panels.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-controls.light,\n.will-filter-bar-panels.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n";
 styleInject(css_248z$1);
 
 var FilterBar = function (_a) {

package/lib/index.js

@@ -12098,7 +12098,7 @@ var ImageCard = React.forwardRef(function (_a, ref) {
 });
 ImageCard.displayName = 'ImageCard';
 
-var css_248z$7 = "#will-filter-bar-locations {\n  text-align: initial;\n}\n\n.will-locations-filter-container {\n  display: flex;\n  flex-direction: column;\n  min-width: 400px;\n  padding-bottom: 16px;\n}\n\n@media (max-width: 960px) {\n  .will-locations-filter-container {\n    margin-top: 15px;\n    min-width: 100%;\n  }\n}\n";
+var css_248z$7 = "#will-filter-bar-locations {\n  text-align: initial;\n}\n\n.will-locations-filter-container {\n  display: flex;\n  flex-direction: column;\n  min-width: 400px;\n  padding-bottom: 16px;\n}\n\n@media (max-width: 960px) {\n  .will-locations-filter-container {\n    min-width: 100%;\n  }\n}\n";
 styleInject(css_248z$7);
 
 var Locations = React.forwardRef(function (_a, ref) {
@@ -12271,7 +12271,7 @@ var FilterTabs = function () {
 var css_248z$2 = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n \n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-light-grey: #C8C8C8;\n  --will-white: #fff;\n  --will-white-transparent: #ffffffcf;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-error: #d32f2f;\n\n  /* Transparent */\n  --will-transparent-black: rgba(0, 0, 0, 0.5);\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-lavender: rgba(171, 167, 175, 0.30);\n\n  /* Color mix */\n  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n  /* Shadows */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
 styleInject(css_248z$2);
 
-var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Common */\n\n.will-filter-bar-controls.dark,\n.will-filter-bar-panels.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-controls.light,\n.will-filter-bar-panels.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n";
+var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n@media (max-width: 960px) {\n  .will-root {\n    width: 100%;\n    min-width: auto;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-controls.dark,\n.will-filter-bar-panels.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-controls.light,\n.will-filter-bar-panels.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n";
 styleInject(css_248z$1);
 
 var FilterBar = function (_a) {

package/lib/index.umd.js

@@ -12100,7 +12100,7 @@
     });
     ImageCard.displayName = 'ImageCard';
 
-    var css_248z$7 = "#will-filter-bar-locations {\n  text-align: initial;\n}\n\n.will-locations-filter-container {\n  display: flex;\n  flex-direction: column;\n  min-width: 400px;\n  padding-bottom: 16px;\n}\n\n@media (max-width: 960px) {\n  .will-locations-filter-container {\n    margin-top: 15px;\n    min-width: 100%;\n  }\n}\n";
+    var css_248z$7 = "#will-filter-bar-locations {\n  text-align: initial;\n}\n\n.will-locations-filter-container {\n  display: flex;\n  flex-direction: column;\n  min-width: 400px;\n  padding-bottom: 16px;\n}\n\n@media (max-width: 960px) {\n  .will-locations-filter-container {\n    min-width: 100%;\n  }\n}\n";
     styleInject(css_248z$7);
 
     var Locations = React.forwardRef(function (_a, ref) {
@@ -12273,7 +12273,7 @@
     var css_248z$2 = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n \n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-light-grey: #C8C8C8;\n  --will-white: #fff;\n  --will-white-transparent: #ffffffcf;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-charcoal-blue: #384265;\n  --will-error: #d32f2f;\n\n  /* Transparent */\n  --will-transparent-black: rgba(0, 0, 0, 0.5);\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n  --will-transparent-lavender: rgba(171, 167, 175, 0.30);\n\n  /* Color mix */\n  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n  /* Shadows */\n  --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n  --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n  /* Breakpoints */\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n  margin: 0 !important;\n}\n\n.will-root button {\n  line-height: normal !important;\n}\n";
     styleInject(css_248z$2);
 
-    var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Common */\n\n.will-filter-bar-controls.dark,\n.will-filter-bar-panels.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-controls.light,\n.will-filter-bar-panels.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n";
+    var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n@media (max-width: 960px) {\n  .will-root {\n    width: 100%;\n    min-width: auto;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-controls.dark,\n.will-filter-bar-panels.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-controls.light,\n.will-filter-bar-panels.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n";
     styleInject(css_248z$1);
 
     var FilterBar = function (_a) {

package/package.json

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

package/src/components/FilterBar/FilterBar.css

@@ -8,7 +8,6 @@
 
 .will-root.is-full-width {
   width: 100%;
-  min-width: auto;
 }
 
 .will-filter-bar {
@@ -16,6 +15,13 @@
   position: relative;
 }
 
+@media (max-width: 960px) {
+  .will-root {
+    width: 100%;
+    min-width: auto;
+  }
+}
+
 /* Common */
 
 .will-filter-bar-controls.dark,

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: [
@@ -109,7 +109,7 @@ export const Main: Story = {
     },
   },
   render: (args) => (
-    <div style={{ background: 'white', padding: '30px', height: '100vh' }}>
+    <div style={{ background: 'white', height: '100vh' }}>
       <FilterBar {...args} onSubmit={false ? null : (_val: Filters) => null} />
     </div>
   ),

package/src/components/FilterBar/components/FilterPanels/Locations/Locations.css

@@ -11,7 +11,6 @@
 
 @media (max-width: 960px) {
   .will-locations-filter-container {
-    margin-top: 15px;
     min-width: 100%;
   }
 }