Merge pull request #55 from oramasearch/feature/orm-1876

Feature/orm-1876
oramasearch · Oct 28, 2024 · b09a07c · b09a07c
2 parents b5c7187 + 1e3ab00
commit b09a07c
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 33 deletions.
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,