fix: autocomplete stories (#100)

Altinn · Nov 29, 2024 · 43dd26a · 43dd26a
1 parent 0061eec
commit 43dd26a
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 76 deletions.
diff --git a/lib/components/Dialog/DialogSummary.tsx → lib/components/Dialog/DialogDescription.tsx b/lib/components/Dialog/DialogSummary.tsx → lib/components/Dialog/DialogDescription.tsx
@@ -2,9 +2,9 @@ import type { ReactNode } from 'react';
 import { Skeleton } from '../Skeleton';
 import type { DialogListItemSize } from './DialogListItem';
 
-import styles from './dialogSummary.module.css';
+import styles from './dialogDescription.module.css';
 
-export interface DialogSummaryProps {
+export interface DialogDescriptionProps {
   size: DialogListItemSize;
   className?: string;
   loading?: boolean;
@@ -15,7 +15,7 @@ export interface DialogSummaryProps {
  * Dialog summary
  */
 
-export const DialogSummary = ({ size = 'lg', loading, children }: DialogSummaryProps) => {
+export const DialogDescription = ({ size = 'lg', loading, children }: DialogDescriptionProps) => {
   return (
     <p data-size={size} className={styles.summary}>
       <Skeleton loading={loading}>{children}</Skeleton>

diff --git a/lib/components/Dialog/DialogListItem.tsx b/lib/components/Dialog/DialogListItem.tsx
@@ -1,14 +1,14 @@
 import type { ElementType } from 'react';
 import { ListItemBase, type ListItemBaseProps, ListItemLabel } from '../List';
 import { DialogBorder } from './DialogBorder';
+import { DialogDescription } from './DialogDescription';
 import { DialogHeaderBase } from './DialogHeaderBase';
 import { DialogHeadings } from './DialogHeadings';
 import type { DialogRecipientProps, DialogSenderProps } from './DialogHeadings';
 import { DialogMetadata } from './DialogMetadata';
 import type { DialogSeenByProps } from './DialogSeenBy';
 import { DialogSelect, type DialogSelectProps } from './DialogSelect';
 import type { DialogStatusProps } from './DialogStatus';
-import { DialogSummary } from './DialogSummary';
 import { DialogTitle } from './DialogTitle';
 import { DialogTouchedBy, type DialogTouchedByActor } from './DialogTouchedBy';
 
@@ -20,6 +20,8 @@ import styles from './dialogListItem.module.css';
 export interface DialogListItemProps extends ListItemBaseProps {
   /** Dialog title */
   title: string;
+  /** Dialog description */
+  description?: string;
   /** Dialog is loading */
   loading?: boolean;
   /** Render as */
@@ -42,8 +44,6 @@ export interface DialogListItemProps extends ListItemBaseProps {
   recipient?: DialogRecipientProps;
   /** Group view, show avatar for recipient */
   grouped?: boolean;
-  /** Dialog summary */
-  summary?: string;
   /** Updated datetime */
   updatedAt?: string;
   /** Updated at label */
@@ -105,7 +105,7 @@ export const DialogListItem = ({
   touchedBy,
   attachmentsCount,
   title,
-  summary,
+  description,
   ...rest
 }: DialogListItemProps) => {
   const applicableVariant = trashedAt ? 'trashed' : archivedAt ? 'archived' : variant;
@@ -114,7 +114,7 @@ export const DialogListItem = ({
     return (
       <ListItemBase {...rest} loading={loading} size={size} className={styles.item}>
         <DialogBorder className={styles.border} size={size} seen={seen} loading={loading}>
-          <ListItemLabel loading={loading} size={size} title={title} description={summary} />
+          <ListItemLabel loading={loading} size={size} title={title} description={description} />
           <DialogMetadata loading={loading} updatedAt={updatedAt} updatedAtLabel={updatedAtLabel} />
         </DialogBorder>
       </ListItemBase>
@@ -136,9 +136,9 @@ export const DialogListItem = ({
           </DialogTitle>
           <DialogHeadings loading={loading} size={size} grouped={grouped} sender={sender} recipient={recipient} />
         </DialogHeaderBase>
-        <DialogSummary loading={loading} size={size}>
-          {summary}
-        </DialogSummary>
+        <DialogDescription loading={loading} size={size}>
+          {description}
+        </DialogDescription>
         <footer data-size={size} className={styles.footer}>
           <DialogMetadata
             loading={loading}

diff --git a/...omponents/Dialog/dialogSummary.module.css → ...nents/Dialog/dialogDescription.module.css b/...omponents/Dialog/dialogSummary.module.css → ...nents/Dialog/dialogDescription.module.css
diff --git a/lib/components/List/ListItem.tsx b/lib/components/List/ListItem.tsx
@@ -47,7 +47,6 @@ export const ListItem = ({
   avatarGroup,
   title,
   description,
-  children,
   collapsible,
   expanded,
   badge,
@@ -56,6 +55,7 @@ export const ListItem = ({
   menu,
   select,
   controls,
+  children,
   ...rest
 }: ListItemProps) => {
   const applicableLinkIcon = collapsible && expanded ? 'chevron-up' : collapsible ? 'chevron-down' : linkIcon;

diff --git a/lib/components/Searchbar/Autocomplete.stories.tsx b/lib/components/Searchbar/Autocomplete.stories.tsx
@@ -39,7 +39,11 @@ export const TooFewWords: Story = {
         id: '1a',
         type: 'scope',
         href: '#',
-        label: 'Skriv minst 3 tegn for søke i innboks',
+        label: () => (
+          <span>
+            <mark>sk</mark> i innboks
+          </span>
+        ),
       },
       {
         id: '1b',
@@ -59,7 +63,7 @@ export const ScopesAndResults: Story = {
   args: {
     groups: {
       '3': {
-        title: 'Mest relevante treff',
+        title: 'Anbefalte treff',
       },
     },
     items: [
@@ -69,7 +73,7 @@ export const ScopesAndResults: Story = {
         type: 'scope',
         href: '#',
         badge: {
-          label: '2 treff',
+          label: '24 treff',
         },
         label: () => (
           <span>
@@ -94,15 +98,94 @@ export const ScopesAndResults: Story = {
         type: 'dialog',
         href: '#',
         title: 'Skattemeldingen 2023',
-        summary: 'Skattemeldingen er klar for innsending.',
+        description: 'Skattemeldingen er klar for innsending.',
       },
       {
         id: '2b',
         groupId: '3',
         type: 'dialog',
         href: '#',
         title: 'Skatteoppgjør 2022',
-        summary: 'Skatteoppgjøret ditt er klart.',
+        description: 'Skatteoppgjøret ditt er klart.',
+      },
+      {
+        id: '2c',
+        groupId: '3',
+        type: 'dialog',
+        href: '#',
+        title: 'Skatteoppgjør 2020',
+        description: 'Skatteoppgjøret ditt er ferdigstilt.',
+      },
+    ],
+  },
+};
+
+export const LoadingResults: Story = {
+  args: {
+    groups: {
+      '3': {
+        title: 'Søker etter «skatt» ...',
+      },
+    },
+    items: ScopesAndResults.args.items.map((item) => {
+      if (item.groupId === '3') {
+        return {
+          ...item,
+          type: null,
+          icon: 'inbox',
+          loading: true,
+        };
+      }
+
+      return item;
+    }),
+  },
+};
+
+export const NoHits: Story = {
+  args: {
+    ...ScopesAndResults.args,
+    groups: {
+      noHits: {
+        title: 'Ingen treff',
+      },
+    },
+    items: [
+      {
+        id: '1a',
+        groupId: '1',
+        type: 'scope',
+        href: '#',
+        disabled: true,
+        badge: {
+          label: 'Ingen treff',
+        },
+        label: () => (
+          <span>
+            <mark>skatt</mark> i innboks
+          </span>
+        ),
+      },
+      {
+        id: '1b',
+        groupId: '1',
+        type: 'scope',
+        href: '#',
+        label: () => (
+          <span>
+            <mark>skatt</mark> i hele Altinn
+          </span>
+        ),
+      },
+      {
+        groupId: 'noHits',
+        id: '2a',
+        type: 'information',
+        label: () => (
+          <span>
+            Søk etter <mark>skatt</mark> ga ingen treff.
+          </span>
+        ),
       },
     ],
   },
@@ -265,52 +348,3 @@ export const ScopesResultsAndSuggestions: Story = {
     ],
   },
 };
-
-export const NoHits: Story = {
-  args: {
-    ...ScopesAndSuggestions.args,
-    groups: {
-      noHits: {
-        title: 'Ingen treff',
-      },
-    },
-    items: [
-      {
-        id: '1a',
-        groupId: '1',
-        type: 'scope',
-        href: '#',
-        disabled: true,
-        badge: {
-          label: 'Ingen treff',
-        },
-        label: () => (
-          <span>
-            <mark>skatt</mark> i innboks
-          </span>
-        ),
-      },
-      {
-        id: '1b',
-        groupId: '1',
-        type: 'scope',
-        href: '#',
-        label: () => (
-          <span>
-            <mark>skatt</mark> i hele Altinn
-          </span>
-        ),
-      },
-      {
-        groupId: 'noHits',
-        id: '2a',
-        type: 'information',
-        label: () => (
-          <span>
-            Søk etter <mark>skatt</mark> ga ingen treff.
-          </span>
-        ),
-      },
-    ],
-  },
-};
diff --git a/lib/components/Searchbar/Autocomplete.tsx b/lib/components/Searchbar/Autocomplete.tsx
@@ -8,6 +8,7 @@ export interface AutocompleteProps {
   groups?: Record<string, AutocompleteGroupProps>;
   expanded?: boolean;
   className?: string;
+  onSelect?: () => void;
 }
 
 export const Autocomplete = ({ className, items, groups = {}, expanded }: AutocompleteProps) => {

diff --git a/lib/components/Searchbar/AutocompleteItem.tsx b/lib/components/Searchbar/AutocompleteItem.tsx
@@ -40,12 +40,12 @@ export const AutocompleteItem = ({ type, ...props }: AutocompleteItemProps) => {
   switch (type) {
     case 'scope':
       return <ScopeListItem {...(props as ScopeAutocompleteItemProps)} shadow="none" tabIndex={-1} />;
-    case 'information':
-      return <ScopeListItem {...(props as ScopeAutocompleteItemProps)} shadow="none" tabIndex={-1} />;
     case 'bookmark':
       return <BookmarksListItem {...(props as BookmarksListItemProps)} shadow="none" size="sm" tabIndex={-1} />;
     case 'dialog':
       return <DialogListItem {...(props as DialogListItemProps)} shadow="none" size="sm" tabIndex={-1} />;
+    case 'information':
+      return <ListItem {...(props as ListItemProps)} shadow="none" tabIndex={-1} disabled={true} />;
     default:
       return <ListItem {...(props as ListItemProps)} shadow="none" size="sm" tabIndex={-1} />;
   }

diff --git a/lib/components/Searchbar/Searchbar.tsx b/lib/components/Searchbar/Searchbar.tsx
@@ -14,12 +14,13 @@ export const Searchbar = ({
   autocomplete,
   expanded = false,
   onClose,
+  onEnter,
   tabIndex,
   ...search
 }: SearchbarProps) => {
   return (
     <SearchbarBase className={className} expanded={expanded} autocomplete={!!autocomplete}>
-      <SearchField {...search} expanded={expanded} onClose={onClose} tabIndex={tabIndex} />
+      <SearchField {...search} expanded={expanded} onClose={onClose} onEnter={onEnter} tabIndex={tabIndex} />
       {autocomplete && <Autocomplete {...autocomplete} expanded={expanded} />}
     </SearchbarBase>
   );

diff --git a/package.json b/package.json
@@ -3,15 +3,10 @@
   "version": "0.7.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "!dist/stories"
-  ],
+  "files": ["dist", "!dist/stories"],
   "type": "module",
   "description": "Reusable react components",
-  "sideEffects": [
-    "*.css"
-  ],
+  "sideEffects": ["*.css"],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",