Merge pull request #383 from pulibrary/fallback-luxsearchbox

Adds a fallback for the default slot in LuxSearchBox component
pulibrary · Nov 25, 2024 · 9775ce3 · 9775ce3
2 parents 0647c92 + 58b25c8
commit 9775ce3
Showing 1 changed file with 34 additions and 2 deletions.
diff --git a/src/components/LuxSearchBox.vue b/src/components/LuxSearchBox.vue
@@ -1,7 +1,24 @@
 <template>
   <component :is="type" class="lux-search-box">
     <!-- @slot The input and its button. -->
-    <slot />
+    <slot>
+      <lux-input-text
+        id="searchbox"
+        name="query"
+        label="Search"
+        :hide-label="true"
+        placeholder="Search for library materials and website content"
+        size="large"
+        class="default-input"
+      ></lux-input-text>
+      <lux-input-button
+        type="button"
+        variation="icon"
+        size="medium"
+        icon="search"
+        class="default-button"
+      ></lux-input-button>
+    </slot>
   </component>
 </template>
 
@@ -36,8 +53,8 @@ export default {
   box-sizing: border-box;
   display: flex;
   background: $color-white;
-  border-radius: $border-radius-default;
   margin-bottom: 1rem;
+  border: 2px solid #212529;
 
   &:hover,
   &[hover] {
@@ -58,13 +75,23 @@ export default {
   :deep(.lux-input) {
     flex: 1;
     margin-bottom: 0;
+    font-size: small !important;
+    height: 3rem;
 
     input {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
   }
 
+  :deep(.default-button) {
+    background-color: $color-princeton-orange-on-white;
+    border-radius: 0px !important;
+    padding: 12px 15px;
+  }
+
   :deep(.lux-button) {
     margin: 0;
     border-top-left-radius: 0;
@@ -86,5 +113,10 @@ export default {
         <lux-input-button type="button" variation="icon" size="medium" icon="search"></lux-input-button>
     </lux-search-box>
     </div>
+
+    <div>
+      <lux-search-box>
+      </lux-search-box>
+    </div>
 ```
   </docs>