fix: feedback ui autocomplete (#75)

Author: fpasquet

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.30.5",
+  "version": "0.31.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"

src/components/Molecules/Cards/PostCard/PostCard.stories.tsx

@@ -18,7 +18,6 @@ type Story = StoryObj<typeof PostCard>;
 export const Overview: Story = {};
 Overview.args = {
   contentType: 'article',
-  slug: 'slug',
   cover: {
     img: {
       src: '/imgs/default-cover.jpg',

src/components/Molecules/Cards/PostCard/PostCard.tsx

@@ -12,10 +12,10 @@ export const postCardVariant = ['highlight-light', 'highlight-dark', 'side-image
 export type PostCardVariantType = (typeof postCardVariant)[number];
 
 export interface PostCardProps extends BoxProps {
+  slug?: string;
   contentType?: 'article' | 'tutorial';
   variant?: PostCardVariantType;
   cover?: PictureProps;
-  slug?: string;
   title?: string;
   excerpt?: string;
   date?: string;

src/components/Organisms/Autocomplete/Autocomplete.stories.ts

@@ -25,67 +25,23 @@ export const Overview: Story = {};
 
 export const WithResult: Story = {};
 WithResult.args = {
+  isOpen: true,
   defaultValue: 'React',
-  items: [
-    {
-      slug: 'react-ssr',
-      title: 'React SSR',
-      date: '24 fév. 2021',
-      authors: [{ username: 'jdoe', name: 'J. Doe' }],
-      link: {
-        href: '#',
-      },
-    },
-    {
-      slug: 'react-ssg',
-      title: 'React SSG',
-      date: '22 fév. 2021',
-      authors: [{ username: 'jdoe', name: 'J. Doe' }],
-      link: {
-        href: '#',
-      },
-    },
-    {
-      slug: 'react-astro',
-      title: 'React + Astro',
-      date: '18 fév. 2021',
-      authors: [{ username: 'jdoe', name: 'J. Doe' }],
-      link: {
-        href: '#',
-      },
-    },
-    {
-      slug: 'react-nextjs',
-      title: 'React + NextJS',
-      date: '16 fév. 2021',
-      authors: [{ username: 'jdoe', name: 'J. Doe' }],
-      link: {
-        href: '#',
-      },
-    },
-    {
-      slug: 'react-apollo-client',
-      title: 'React + Apollo Client',
-      date: '12 fév. 2021',
-      authors: [{ username: 'jdoe', name: 'J. Doe' }],
-      link: {
-        href: '#',
-      },
-    },
-    {
-      slug: 'react-vs-vue',
-      title: 'React vs Vue',
-      date: '09 fév. 2021',
-      authors: [{ username: 'jdoe', name: 'J. Doe' }],
-      link: {
-        href: '#',
-      },
+  items: Array.from({ length: 4 }).map((_, index) => ({
+    slug: `slug-${index}`,
+    title:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget elit turpis. Aliquam sit amet leo mauris vehicula enim id ante aliquam',
+    date: '24 fév. 2021',
+    authors: [{ username: 'jdoe', name: 'J. Doe' }],
+    link: {
+      href: '#',
     },
-  ],
+  })),
 };
 
 export const WithNoResult: Story = {};
 WithNoResult.args = {
+  isOpen: true,
   defaultValue: 'React',
   items: [],
   searchNotFound: {

src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.scss

@@ -35,6 +35,10 @@
 
   &__link {
     color: black;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
 
     &::before {
       content: " ";

src/components/Organisms/Footer/Footer.tsx

@@ -41,7 +41,7 @@ export const Footer: React.FC<FooterProps> = ({
     <Flex
       flexDirection={{ xs: 'column', md: 'row' }}
       justifyContent="center"
-      alignItems="end"
+      alignItems={{ xs: 'center', md: 'end' }}
       py="m"
       bg="primary-very-dark"
       className="footer__intro"

src/components/Organisms/Header/Header.stories.tsx

@@ -56,7 +56,6 @@ export const WithMenuIsOpen: Story = {
 export const WithAutocompleteIsOpen: Story = {
   args: {
     autocomplete: {
-      isOpen: true,
       ...AutocompleteStories.default.args,
       ...AutocompleteStories.WithResult.args,
     } as HeaderProps['autocomplete'],
@@ -71,7 +70,6 @@ export const WithAutocompleteIsOpen: Story = {
 export const WithAutocompleteAndResultNotFound: Story = {
   args: {
     autocomplete: {
-      isOpen: true,
       ...AutocompleteStories.default.args,
       ...AutocompleteStories.WithNoResult.args,
     } as HeaderProps['autocomplete'],