From c33330ea025661ca23cacff4446ba8263734278c Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Fri, 2 Apr 2021 11:42:01 +0200
Subject: [PATCH 1/2] fix(examples): fix GitHub example layout

---
 .../github-repositories-custom-plugin/app.tsx |  1 +
 .../createGitHubReposPlugin.tsx               | 88 ++++++++++---------
 2 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/examples/github-repositories-custom-plugin/app.tsx b/examples/github-repositories-custom-plugin/app.tsx
index b297010ea..9b25fd918 100644
--- a/examples/github-repositories-custom-plugin/app.tsx
+++ b/examples/github-repositories-custom-plugin/app.tsx
@@ -11,5 +11,6 @@ const gitHubReposPlugin = createGitHubReposPlugin({
 
 autocomplete({
   container: '#autocomplete',
+  debug: true,
   plugins: [gitHubReposPlugin],
 });
diff --git a/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx b/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx
index 703cb2055..993e2c09f 100644
--- a/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx
+++ b/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx
@@ -70,55 +70,57 @@ export function createGitHubReposPlugin(
 
                   return (
                     <Fragment>
-                      <div className="aa-ItemIcon">
-                        <img
-                          src={item.owner.avatar_url}
-                          alt={item.full_name}
-                          width="40"
-                          height="40"
-                        />
-                      </div>
                       <div className="aa-ItemContent">
-                        <div className="aa-ItemContentTitle">
-                          <div style={{ display: 'flex' }}>
-                            <div>{item.full_name}</div>
-                            <div
-                              style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                marginLeft: 'var(--aa-spacing-half)',
-                                position: 'relative',
-                                top: '1px',
-                              }}
-                            >
-                              <svg
-                                aria-label={`${stars} stars`}
-                                style={{
-                                  display: 'block',
-                                  width: 'calc(var(--aa-spacing-half) * 2)',
-                                  height: 'calc(var(--aa-spacing-half) * 2)',
-                                  color: '#ffa724',
-                                }}
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                              >
-                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                              </svg>{' '}
-                              <span
-                                aria-hidden="true"
+                        <div className="aa-ItemIcon aa-ItemIcon--alignTop">
+                          <img
+                            src={item.owner.avatar_url}
+                            alt={item.full_name}
+                            width="40"
+                            height="40"
+                          />
+                        </div>
+                        <div className="aa-ItemContentBody">
+                          <div className="aa-ItemContentTitle">
+                            <div style={{ display: 'flex' }}>
+                              <div>{item.full_name}</div>
+                              <div
                                 style={{
-                                  color: 'var(--aa-content-text-color)',
-                                  fontSize: '0.8em',
-                                  lineHeight: 'normal',
+                                  alignItems: 'center',
+                                  display: 'flex',
+                                  marginLeft: 'var(--aa-spacing-half)',
+                                  position: 'relative',
+                                  top: '1px',
                                 }}
                               >
-                                {stars}
-                              </span>
+                                <svg
+                                  aria-label={`${stars} stars`}
+                                  style={{
+                                    display: 'block',
+                                    width: 'calc(var(--aa-spacing-half) * 2)',
+                                    height: 'calc(var(--aa-spacing-half) * 2)',
+                                    color: '#ffa724',
+                                  }}
+                                  viewBox="0 0 20 20"
+                                  fill="currentColor"
+                                >
+                                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                                </svg>{' '}
+                                <span
+                                  aria-hidden="true"
+                                  style={{
+                                    color: 'var(--aa-content-text-color)',
+                                    fontSize: '0.8em',
+                                    lineHeight: 'normal',
+                                  }}
+                                >
+                                  {stars}
+                                </span>
+                              </div>
                             </div>
                           </div>
-                        </div>
-                        <div className="aa-ItemContentDescription">
-                          {item.description}
+                          <div className="aa-ItemContentDescription">
+                            {item.description}
+                          </div>
                         </div>
                       </div>
                       <div className="aa-ItemActions">

From 276a1fb2430c52e1c1cda3b21d0f5cd4891d0a08 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <sarah.dayan@algolia.com>
Date: Tue, 6 Apr 2021 12:01:46 +0200
Subject: [PATCH 2/2] fix: apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Clément Vannicatte <20689156+shortcuts@users.noreply.github.com>
---
 examples/github-repositories-custom-plugin/app.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/github-repositories-custom-plugin/app.tsx b/examples/github-repositories-custom-plugin/app.tsx
index 9b25fd918..b297010ea 100644
--- a/examples/github-repositories-custom-plugin/app.tsx
+++ b/examples/github-repositories-custom-plugin/app.tsx
@@ -11,6 +11,5 @@ const gitHubReposPlugin = createGitHubReposPlugin({
 
 autocomplete({
   container: '#autocomplete',
-  debug: true,
   plugins: [gitHubReposPlugin],
 });