willba-component-library 0.3.24 → 0.3.25

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 (7) hide show
  1. package/README.md +1 -1
  2. package/lib/index.esm.js +1 -1
  3. package/lib/index.js +1 -1
  4. package/lib/index.umd.js +1 -1
  5. package/package.json +1 -1
  6. package/src/components/FilterBar/FilterBar.css +7 -1
  7. package/src/components/FilterBar/FilterBar.stories.tsx +2 -2
package/README.md CHANGED
@@ -107,7 +107,7 @@ ReactDOM.render(<App />, document.querySelector('#app'))
107
107
 
108
108
  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
109
109
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
110
- <script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.24/lib/index.umd.js"></script>
110
+ <script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.25/lib/index.umd.js"></script>
111
111
 
112
112
  <script>
113
113
  const renderFilterBar = async () => {
package/lib/index.esm.js CHANGED
@@ -12251,7 +12251,7 @@ var FilterTabs = function () {
12251
12251
  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";
12252
12252
  styleInject(css_248z$2);
12253
12253
 
12254
- 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";
12254
+ 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";
12255
12255
  styleInject(css_248z$1);
12256
12256
 
12257
12257
  var FilterBar = function (_a) {
package/lib/index.js CHANGED
@@ -12271,7 +12271,7 @@ var FilterTabs = function () {
12271
12271
  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";
12272
12272
  styleInject(css_248z$2);
12273
12273
 
12274
- 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";
12274
+ 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";
12275
12275
  styleInject(css_248z$1);
12276
12276
 
12277
12277
  var FilterBar = function (_a) {
package/lib/index.umd.js CHANGED
@@ -12273,7 +12273,7 @@
12273
12273
  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";
12274
12274
  styleInject(css_248z$2);
12275
12275
 
12276
- 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";
12276
+ 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";
12277
12277
  styleInject(css_248z$1);
12278
12278
 
12279
12279
  var FilterBar = function (_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "willba-component-library",
3
- "version": "0.3.24",
3
+ "version": "0.3.25",
4
4
  "description": "A custom UI component library",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
package/src/components/FilterBar/FilterBar.css CHANGED
@@ -8,7 +8,6 @@
8
8
 
9
9
  .will-root.is-full-width {
10
10
  width: 100%;
11
- min-width: auto;
12
11
  }
13
12
 
14
13
  .will-filter-bar {
@@ -16,6 +15,13 @@
16
15
  position: relative;
17
16
  }
18
17
 
18
+ @media (max-width: 960px) {
19
+ .will-root {
20
+ width: 100%;
21
+ min-width: auto;
22
+ }
23
+ }
24
+
19
25
  /* Common */
20
26
 
21
27
  .will-filter-bar-controls.dark,
package/src/components/FilterBar/FilterBar.stories.tsx CHANGED
@@ -27,7 +27,7 @@ export const Main: Story = {
27
27
  },
28
28
  ],
29
29
  },
30
- fullWidth: true,
30
+ fullWidth: false,
31
31
  language: 'en',
32
32
  redirectUrl: 'http://localhost:4000/',
33
33
  ageCategories: [
@@ -109,7 +109,7 @@ export const Main: Story = {
109
109
  },
110
110
  },
111
111
  render: (args) => (
112
- <div style={{ background: 'white', padding: '30px', height: '100vh' }}>
112
+ <div style={{ background: 'white', height: '100vh' }}>
113
113
  <FilterBar {...args} onSubmit={false ? null : (_val: Filters) => null} />
114
114
  </div>
115
115
  ),