@prijsvrijtechsupport/ui 0.0.32 → 0.0.34

package/dist/components/searchBlock/SearchBlock.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SearchBlock } from "./index";
+declare const meta: Meta<typeof SearchBlock>;
+export default meta;
+type Story = StoryObj<typeof SearchBlock>;
+export declare const Default: Story;

package/dist/components/searchBlock/index.d.ts

@@ -0,0 +1,20 @@
+interface SearchBlockProps {
+    "data-testid"?: string;
+    className?: string;
+    searchBlockTitle?: string;
+    searchBlockForm?: React.ReactNode;
+    onClickFn?: () => void;
+}
+interface SearchBlockButtonProps {
+    className?: string;
+    label?: string;
+    labelOutside?: boolean;
+    icon?: React.ReactNode;
+    downIcon?: React.ReactNode;
+    onClick?: () => void;
+    selectedValue?: string;
+    secondarySelectedValue?: string;
+}
+export declare const SearchBlockButton: ({ className, label, labelOutside, icon, downIcon, onClick, selectedValue, secondarySelectedValue, ...props }: SearchBlockButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchBlock: ({ className, searchBlockTitle, searchBlockForm, onClickFn, "data-testid": dataTestId, ...props }: SearchBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/searchBlock/styles.css

@@ -0,0 +1,46 @@
+.searchBlock {
+    background-color: var(--searchBlock-background-color);
+    color: var(--searchBlock-text-color); 
+    font-size: var(--searchBlock-text-size);
+    font-weight: var(--searchBlock-text-weight);
+    font-family: var(--searchBlock-font-family);
+    border-radius: var(--searchBlock-border-radius);
+}
+
+.searchBlockButton {
+    background-color: white;
+    border-radius: var(--searchBlockButtonRadius);
+    min-height: var(--searchBlockButtonHeight);
+}
+
+.searchBlockButtonLabel {
+    font-size: var(--searchBlockButtonLabel-text-size) !important;
+    font-weight: var(--searchBlockButtonLabel-text-weight);
+    font-family: var(--searchBlockButtonLabel-font-family);
+    color: var(--searchBlockButtonLabel-color); 
+}
+
+.searchBlockButtonIcon {
+    color: var(--searchBlockButtonIcon-color);
+}
+
+.searchBlockButtonSelectedValue {
+
+    font-family: var(--searchBlockButtonSelectedValue-font-family);
+    color: var(--searchBlockButtonSelectedValue-color);
+    font-size: var(--searchBlockButtonSelectedValue-text-size) !important;
+    font-weight: var(--searchBlockButtonSelectedValue-text-weight); 
+    margin-top: var(--searchBlockButtonSelectedValue-margin-top);
+
+}
+
+.searchBlockButtonSecondarySelectedValue {
+    font-size: var(--searchBlockButtonLabel-text-size) !important;
+    color: var(--searchBlockButtonIcon-color);
+}
+
+.searchBlockButtonDownIcon {
+    color: var(--searchBlockButtonDownIcon-color);
+    width: var(--searchBlockButtonDownIcon-size);
+    height: var(--searchBlockButtonDownIcon-size);
+}

package/dist/dist/index.css

@@ -962,51 +962,51 @@ button.btn-secondary:hover:active {
 .blog-widget-date {
   font-family: var(--fontFamily-blog-widget-date);
 }
-.bookModule {
-    background-color: var(--bookModule-background-color);
-    color: var(--bookModule-text-color); 
-    font-size: var(--bookModule-text-size);
-    font-weight: var(--bookModule-text-weight);
-    font-family: var(--bookModule-font-family);
-    border-radius: var(--bookModule-border-radius);
+.searchBlock {
+    background-color: var(--searchBlock-background-color);
+    color: var(--searchBlock-text-color); 
+    font-size: var(--searchBlock-text-size);
+    font-weight: var(--searchBlock-text-weight);
+    font-family: var(--searchBlock-font-family);
+    border-radius: var(--searchBlock-border-radius);
 }
 
-.bookModuleButton {
+.searchBlockButton {
     background-color: white;
-    border-radius: var(--bookModuleButtonRadius);
-    height: var(--bookModuleButtonHeight);
+    border-radius: var(--searchBlockButtonRadius);
+    min-height: var(--searchBlockButtonHeight);
 }
 
-.bookModuleButtonLabel {
-    font-size: var(--bookModuleButtonLabel-text-size);
-    font-weight: var(--bookModuleButtonLabel-text-weight);
-    font-family: var(--bookModuleButtonLabel-font-family);
-    color: var(--bookModuleButtonLabel-color); 
+.searchBlockButtonLabel {
+    font-size: var(--searchBlockButtonLabel-text-size) !important;
+    font-weight: var(--searchBlockButtonLabel-text-weight);
+    font-family: var(--searchBlockButtonLabel-font-family);
+    color: var(--searchBlockButtonLabel-color); 
 }
 
-.bookModuleButtonIcon {
-    color: var(--bookModuleButtonIcon-color);
+.searchBlockButtonIcon {
+    color: var(--searchBlockButtonIcon-color);
 }
 
-.bookModuleButtonSelectedValue {
+.searchBlockButtonSelectedValue {
 
-    font-family: var(--bookModuleButtonSelectedValue-font-family);
-    color: var(--bookModuleButtonSelectedValue-color);
-    font-size: var(--bookModuleButtonSelectedValue-text-size);
-    font-weight: var(--bookModuleButtonSelectedValue-text-weight); 
-    margin-top: var(--bookModuleButtonSelectedValue-margin-top);
+    font-family: var(--searchBlockButtonSelectedValue-font-family);
+    color: var(--searchBlockButtonSelectedValue-color);
+    font-size: var(--searchBlockButtonSelectedValue-text-size) !important;
+    font-weight: var(--searchBlockButtonSelectedValue-text-weight); 
+    margin-top: var(--searchBlockButtonSelectedValue-margin-top);
 
 }
 
-.bookModuleButtonSecondarySelectedValue {
-    font-size: var(--bookModuleButtonLabel-text-size);
-    color: var(--bookModuleButtonIcon-color);
+.searchBlockButtonSecondarySelectedValue {
+    font-size: var(--searchBlockButtonLabel-text-size) !important;
+    color: var(--searchBlockButtonIcon-color);
 }
 
-.bookModuleButtonDownIcon {
-    color: var(--bookModuleButtonDownIcon-color);
-    width: var(--bookModuleButtonDownIcon-size);
-    height: var(--bookModuleButtonDownIcon-size);
+.searchBlockButtonDownIcon {
+    color: var(--searchBlockButtonDownIcon-color);
+    width: var(--searchBlockButtonDownIcon-size);
+    height: var(--searchBlockButtonDownIcon-size);
 }
 .category-filter {
     font-family: var(--category-filter-font-family);
@@ -1291,7 +1291,6 @@ button.btn-secondary:hover:active {
   }
 
   html {
-    box-sizing: border-box;
     -ms-overflow-style: scrollbar;
     -webkit-tap-highlight-color: rgba(#000, 0);
     font-family: var(--font-open-sans), sans-serif;
@@ -1748,30 +1747,30 @@ button.btn-secondary:hover:active {
   --color-footer-navigation-link: var(--prijsvrij-primary); 
   --color-footer-navigation-category-link: var(--prijsvrij-secondary); 
 
-  --bookModule-background-color: var(--prijsvrij-alternative);
-  --bookModule-text-color: var(--prijsvrij-secondary);
-  --bookModule-text-size: 24px;
-  --bookModule-text-weight: 400;
-  --bookModule-font-family: "Hermes Maia T4", sans-serif;
-  --bookModule-border-radius: 8px;
+  --searchBlock-background-color: var(--prijsvrij-alternative);
+  --searchBlock-text-color: var(--prijsvrij-secondary);
+  --searchBlock-text-size: 24px;
+  --searchBlock-text-weight: 400;
+  --searchBlock-font-family: "Hermes Maia T4", sans-serif;
+  --searchBlock-border-radius: 8px;
 
-  --bookModuleButtonLabel-text-size: 12px;
-  --bookModuleButtonLabel-text-weight: 600;
-  --bookModuleButtonLabel-font-family: var(--font-open-sans), sans-serif;
-  --bookModuleButtonLabel-color: var(--prijsvrij-dark-300);
-  --bookModuleButtonIcon-color: var(--prijsvrij-secondary);
+  --searchBlockButtonLabel-text-size: clamp(10px, 2.5vw, 12px);
+  --searchBlockButtonLabel-text-weight: 600;
+  --searchBlockButtonLabel-font-family: var(--font-open-sans), sans-serif;
+  --searchBlockButtonLabel-color: var(--prijsvrij-dark-300);
+  --searchBlockButtonIcon-color: var(--prijsvrij-secondary);
 
-  --bookModuleButtonRadius: 4px;
-  --bookModuleButtonHeight: 50px;
+  --searchBlockButtonRadius: 4px;
+  --searchBlockButtonHeight: 50px;
 
-  --bookModuleButtonSelectedValue-font-family: var(--font-open-sans), sans-serif;
-  --bookModuleButtonSelectedValue-color: var(--prijsvrij-dark-400);
-  --bookModuleButtonSelectedValue-text-size: 14px;
-  --bookModuleButtonSelectedValue-text-weight: 400;
-  --bookModuleButtonSelectedValue-margin-top: -4px;
+  --searchBlockButtonSelectedValue-font-family: var(--font-open-sans), sans-serif;
+  --searchBlockButtonSelectedValue-color: var(--prijsvrij-dark-400);
+  --searchBlockButtonSelectedValue-text-size: clamp(12px, 3vw, 14px);
+  --searchBlockButtonSelectedValue-text-weight: 400;
+  --searchBlockButtonSelectedValue-margin-top: -4px;
 
-  --bookModuleButtonDownIcon-color: var(--prijsvrij-primary-light-25);
-  --bookModuleButtonDownIcon-size: 20px;
+  --searchBlockButtonDownIcon-color: var(--prijsvrij-primary-light-25);
+  --searchBlockButtonDownIcon-size: 20px;
 
   --category-filter-font-family: var(--font-open-sans), sans-serif;
 
@@ -1968,30 +1967,30 @@ button.btn-secondary:hover:active {
   --color-footer-navigation-link: var(--color-dark-600); 
   --color-footer-navigation-category-link: #0077bf;
 
-  --bookModule-background-color: var(--color-secondary);
-  --bookModule-text-color: white;
-  --bookModule-text-size: 20px;
-  --bookModule-text-weight: 700;
-  --bookModule-font-family: var(--font-lato), sans-serif;
-  --bookModule-border-radius: 2px;
-
-  --bookModuleButtonLabel-text-size: 14px;
-  --bookModuleButtonLabel-text-weight: 700;
-  --bookModuleButtonLabel-font-family: var(--font-lato), sans-serif;
-  --bookModuleButtonLabel-color: var(--dreizen-dark-600);
-  --bookModuleButtonIcon-color: var(--dreizen-dark-200); 
-
-  --bookModuleButtonRadius: 3px;
-  --bookModuleButtonHeight: 40px;
-
-  --bookModuleButtonSelectedValue-font-family: var(--font-lato), sans-serif;
-  --bookModuleButtonSelectedValue-color: var(--dreizen-dark-600);
-  --bookModuleButtonSelectedValue-text-size: 14px;
-  --bookModuleButtonSelectedValue-text-weight: 500;
-  --bookModuleButtonSelectedValue-margin-top: 0;
-
-  --bookModuleButtonDownIcon-color: var(--dreizen-primary);
-  --bookModuleButtonDownIcon-size: 16px;
+  --searchBlock-background-color: var(--color-secondary);
+  --searchBlock-text-color: white;
+  --searchBlock-text-size: 20px;
+  --searchBlock-text-weight: 700;
+  --searchBlock-font-family: var(--font-lato), sans-serif;
+  --searchBlock-border-radius: 2px;
+
+  --searchBlockButtonLabel-text-size: clamp(12px, 3vw, 14px);
+  --searchBlockButtonLabel-text-weight: 700;
+  --searchBlockButtonLabel-font-family: var(--font-lato), sans-serif;
+  --searchBlockButtonLabel-color: var(--dreizen-dark-600);
+  --searchBlockButtonIcon-color: var(--dreizen-dark-200); 
+
+  --searchBlockButtonRadius: 3px;
+  --searchBlockButtonHeight: 40px;
+
+  --searchBlockButtonSelectedValue-font-family: var(--font-lato), sans-serif;
+  --searchBlockButtonSelectedValue-color: var(--dreizen-dark-600);
+  --searchBlockButtonSelectedValue-text-size: clamp(12px, 3vw, 14px);
+  --searchBlockButtonSelectedValue-text-weight: 500;
+  --searchBlockButtonSelectedValue-margin-top: 0;
+
+  --searchBlockButtonDownIcon-color: var(--dreizen-primary);
+  --searchBlockButtonDownIcon-size: 16px;
 
   --category-filter-font-family: var(--font-lato), sans-serif;