oramasearch · g-francesca · Oct 28, 2024 · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024
diff --git a/apps/storybook/stories/public/orama-search-box.stories.tsx b/apps/storybook/stories/public/orama-search-box.stories.tsx
@@ -25,20 +25,22 @@ const meta: Meta<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }>
         },
       },
     },
-    chatPlaceholder: {
+    searchPlaceholder: {
+      control: { type: 'text' },
       table: {
         type: {
           summary: 'string',
         },
         defaultValue: { summary: '' },
       },
     },
-    searchPlaceholder: {
+    chatPlaceholder: {
+      control: { type: 'text' },
       table: {
         type: {
           summary: 'string',
         },
-        defaultValue: { summary: 'Search...' },
+        defaultValue: { summary: '' },
       },
     },
     colorScheme: {
@@ -64,22 +66,37 @@ const meta: Meta<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }>
 }
 export default meta
 
-const Template = ({ preset, chatPlaceholder, searchPlaceholder, colorScheme, disableChat }) => {
+const Template = ({
+  preset,
+  chatPlaceholder,
+  searchPlaceholder,
+  colorScheme,
+  disableChat,
+  suggestions,
+  open,
+  facetProperty,
+  themeConfig,
+  index,
+  sourceBaseUrl,
+  sourcesMap,
+  highlight,
+  resultMap,
+}) => {
   return html`<div>
       <div style="width: 240px">
         <orama-search-button>Search...</orama-search-button>
       </div>
       <orama-search-box
-      .open=${preset?.open}
-      .facetProperty=${preset?.facetProperty}
-      .resultMap=${preset?.resultMap}
+      .open=${open || preset?.open}
+      .facetProperty=${facetProperty || preset?.facetProperty}
+      .resultMap=${resultMap || preset?.resultMap}
       .colorScheme=${colorScheme}
-      .themeConfig=${preset.themeConfig}
-      .index=${preset.index}
+      .themeConfig=${themeConfig || preset.themeConfig}
+      .index=${index || preset.index}
       .instance=${preset.instance}
-      .suggestions=${preset?.suggestions}
-      .sourceBaseUrl=${preset?.sourceBaseUrl}
-      .sourcesMap=${preset?.sourcesMap}
+      .suggestions=${suggestions || preset?.suggestions}
+      .sourceBaseUrl=${sourceBaseUrl || preset?.sourceBaseUrl}
+      .sourcesMap=${sourcesMap || preset?.sourcesMap}
       .disableChat=${disableChat}
       .chatPlaceholder=${chatPlaceholder}
       .searchPlaceholder=${searchPlaceholder}
@@ -91,20 +108,34 @@ const Template = ({ preset, chatPlaceholder, searchPlaceholder, colorScheme, dis
     ></orama-search-box></div>`
 }
 
-const TemplateAsEmbed = ({ preset, chatPlaceholder, searchPlaceholder, colorScheme, disableChat }) => {
+const TemplateAsEmbed = ({
+  preset,
+  chatPlaceholder,
+  searchPlaceholder,
+  colorScheme,
+  disableChat,
+  open,
+  facetProperty,
+  resultMap,
+  themeConfig,
+  index,
+  sourceBaseURL,
+  suggestions,
+  sourcesMap,
+}) => {
   return html`<div style="height: 420px">
     <orama-search-box
       layout="embed"
-      .open=${preset?.open}
-      .facetProperty=${preset?.facetProperty}
-      .resultMap=${preset?.resultMap}
+      .open=${open || preset?.open}
+      .facetProperty=${facetProperty || preset?.facetProperty}
+      .resultMap=${resultMap || preset?.resultMap}
       .colorScheme=${colorScheme}
-      .themeConfig=${preset.themeConfig}
-      .index=${preset.index}
+      .themeConfig=${themeConfig || preset.themeConfig}
+      .index=${index || preset.index}
       .instance=${preset.instance}
-      .suggestions=${preset?.suggestions}
-      .sourceBaseUrl=${preset?.sourceBaseUrl}
-      .sourcesMap=${preset?.sourcesMap}
+      .suggestions=${suggestions || preset?.suggestions}
+      .sourceBaseUrl=${sourceBaseURL || preset?.sourceBaseUrl}
+      .sourcesMap=${sourcesMap || preset?.sourcesMap}
       .disableChat=${disableChat}
       .chatPlaceholder=${chatPlaceholder}
       .searchPlaceholder=${searchPlaceholder}
@@ -119,13 +150,11 @@ const TemplateAsEmbed = ({ preset, chatPlaceholder, searchPlaceholder, colorSche
 
 type Story = StoryObj<Components.OramaSearchBox & { preset: keyof DemoIndexConfig }>
 
-export const SearchBox: Story = {
+export const SearchBoxAsModal: Story = {
   render: Template as any,
   args: {
     preset: 'orama',
     colorScheme: 'light',
-    searchPlaceholder: 'Search...',
-    chatPlaceholder: 'Ask me anything...',
     disableChat: false,
   },
 }
@@ -135,7 +164,6 @@ export const SearchBoxAsEmbed: Story = {
   args: {
     preset: 'orama',
     colorScheme: 'light',
-    searchPlaceholder: 'Search...',
     chatPlaceholder: 'Ask me anything...',
     disableChat: false,
   },

diff --git a/packages/ui-stencil/src/components/internal/icons.tsx b/packages/ui-stencil/src/components/internal/icons.tsx
@@ -9,7 +9,7 @@ interface IconProps {
 export const Icon: FunctionalComponent<IconProps> = ({ name, size = 24, color = 'black' }) => {
   const getIconSvg = (iconName: string) => {
     const icons: { [key: string]: string } = {
-      star: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      star: `<svg xmlns="http://www.w3.org/2000/svg" width=${size} height=${size} viewBox="0 0 16 16" fill="none">
           <path d="M8.1875 0.6875L9.12531 3.22189C9.78366 5.00107 11.1864 6.40384 12.9656 7.06219L15.5 8L12.9656 8.93781C11.1864 9.59616 9.78366 10.9989 9.12531 12.7781L8.1875 15.3125L7.24969 12.7781C6.59134 10.9989 5.18857 9.59616 3.40939 8.93781L0.875 8L3.40939 7.06219C5.18857 6.40384 6.59134 5.00107 7.24969 3.22189L8.1875 0.6875Z" fill="url(#paint0_radial_1183_175)"/>
           <defs>
           <radialGradient id="paint0_radial_1183_175" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.5 -9.5) rotate(141.053) scale(24.2042)">

diff --git a/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx b/packages/ui-stencil/src/components/internal/orama-chat-button/orama-chat-button.tsx
@@ -44,7 +44,7 @@ export class OramaChatButton {
           type="button"
         >
           <span class="icon-star">
-            <Icon name="star" size={14} />
+            <Icon name="star" size={16} />
           </span>
           <span class="button-label">{this.label}</span>
           <span class="icon-enter">

diff --git a/...ges/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss b/...ges/ui-stencil/src/components/internal/orama-chat-suggestions/orama-chat-suggestions.scss
@@ -7,7 +7,6 @@
   align-items: center;
   gap: var(--spacing-m, $spacing-m);
   padding: var(--radius-s, $spacing-s) var(--radius-l, $spacing-l);
-
   list-style: none;
   margin: 0;
   overflow-x: auto;
@@ -80,6 +79,7 @@
   -webkit-text-fill-color: transparent;
   width: 100%;
   border: 1px solid transparent;
+  font-family: inherit;
 
   &:focus-visible {
     outline: none;

diff --git a/packages/ui-stencil/src/components/internal/orama-embed/orama-embed.scss b/packages/ui-stencil/src/components/internal/orama-embed/orama-embed.scss
@@ -1,5 +1,5 @@
 .embed {
-  background-color: var(--background-color-secondary, background-color('secondary'));
+  background-color: var(--background-color-primary, background-color('primary'));
   border: 1px solid var(--border-color-primary, border-color('primary'));
   border-radius: var(--radius-m, $radius-m);
   inset: 0;
@@ -14,6 +14,8 @@
   flex-direction: column;
 
   @media (--md-min) {
+    background-color: var(--background-color-secondary, background-color('secondary'));
+
     orama-input {
       padding: 0;
       margin: 0;
@@ -24,4 +26,4 @@
       border-radius: var(--radius-m, $radius-m) var(--radius-m, $radius-m) 0 0;
     }
   }
-}
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss b/packages/ui-stencil/src/components/internal/orama-search/orama-search.scss
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  width: 100%;
 
   orama-input {
     @media (--md-max) {

diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.scss
@@ -32,6 +32,7 @@
 
 .section-active {
   display: flex;
+  overflow: hidden;
 }
 
 .section-inactive {

diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx
@@ -177,9 +177,16 @@ export class SearchBox {
 
   getSearchBox() {
     return (
-      <Fragment>
+      <div
+        class={`${
+          this.windowWidth > 1024
+            ? 'section-active'
+            : globalContext.currentTask === 'search'
+              ? 'section-active'
+              : 'section-inactive'
+        }`}
+      >
         <orama-search
-          class={`${this.windowWidth > 1024 ? 'section-active' : globalContext.currentTask === 'search' ? 'section-active' : 'section-inactive'}`}
           placeholder={this?.searchPlaceholder || 'Search...'}
           focusInput={globalContext.currentTask === 'search'}
           sourceBaseUrl={this.sourceBaseUrl}
@@ -201,7 +208,7 @@ export class SearchBox {
             />
           )}
         </orama-search>
-      </Fragment>
+      </div>
     )
   }
 

diff --git a/packages/ui-stencil/src/styles/_colors.scss b/packages/ui-stencil/src/styles/_colors.scss
@@ -3,6 +3,8 @@
 TODO: We'll make this task automatic in the future
 */
 
+@use 'sass:color';
+
 /**
 * * PRIMITIVE COLORS
 */
@@ -69,6 +71,8 @@ $semanticColors: (
 
 $elementColors: (
   'button-text': (
+    // TODO: example of how to use the color functions with semantic colors
+    // primary: color.adjust(text-color('primary', $semanticColors), $lightness: 10%),
     primary: $purple100,
     secondary: text-color('secondary', $semanticColors),
     inactive: $gray500,