From 15461588ecf59613fcbceb5abec4be508d2ca8aa Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Tue, 28 Sep 2021 12:57:13 +0200
Subject: [PATCH] Edit browse locations section

Create badge atom,
---
 src/components/atoms/Badge.svelte         |  8 ++++++++
 src/components/molecules/Location.svelte  |  7 ++++++-
 src/components/organisms/Locations.svelte |  4 +++-
 src/style/atoms/_badge.scss               | 22 ++++++++++++++++++++++
 src/style/molecules/_location.scss        | 12 +++++++++++-
 src/style/organisms/_locations.scss       | 12 ++++++++++++
 src/style/style.scss                      |  1 +
 7 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 src/components/atoms/Badge.svelte
 create mode 100644 src/style/atoms/_badge.scss

diff --git a/src/components/atoms/Badge.svelte b/src/components/atoms/Badge.svelte
new file mode 100644
index 0000000..f774850
--- /dev/null
+++ b/src/components/atoms/Badge.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    export let text: string
+    export let size: string = 'small'
+</script>
+
+<div class="badge badge--{size}">
+    <span>{text}</span>
+</div>
\ No newline at end of file
diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index aecbbd6..401ab76 100644
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     // Components
     import Image from '$components/atoms/Image.svelte'
+    import Badge from '$components/atoms/Badge.svelte'
 
     export let location: any
+    export let index: number
 
     const { name, slug, country, last_updated } = location
 </script>
@@ -13,6 +15,9 @@
         <h3 class="location__name">
             {name}
         </h3>
-        <span class="text-label">{country.name}</span>
+        <span class="text-label location__country">{country.name}</span>
+        {#if index < 2}
+            <Badge text="New" />
+        {/if}
     </a>
 </div>
\ No newline at end of file
diff --git a/src/components/organisms/Locations.svelte b/src/components/organisms/Locations.svelte
index ce365f0..acd59de 100644
--- a/src/components/organisms/Locations.svelte
+++ b/src/components/organisms/Locations.svelte
@@ -14,13 +14,15 @@
     <ul class="browse__continents" id="continents">
         <li>
             <Button tag="button" text="All" class="button-outline" />
+            <Button tag="button" text="Europe" class="button-outline" />
         </li>
     </ul>
 
     <div class="browse__locations" id="locations_list" role="list">
-        {#each locations as location (location.slug)}
+        {#each locations as location, index}
             <Location
                 location={location}
+                index={index}
             />
         {/each}
     </div>
diff --git a/src/style/atoms/_badge.scss b/src/style/atoms/_badge.scss
new file mode 100644
index 0000000..7faa5b2
--- /dev/null
+++ b/src/style/atoms/_badge.scss
@@ -0,0 +1,22 @@
+.badge {
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    padding: 0 6px;
+    background-color: $color-secondary-light;
+    border-radius: 100vh;
+    text-transform: uppercase;
+    color: $color-primary-darker;
+    font-weight: 500;
+    letter-spacing: 1px;
+    line-height: 1;
+    min-height: 16px;
+    margin-top: 20px;
+
+    // Small size
+    &--small {
+        span {
+            font-size: rem(7px);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss
index 53b8351..4d73de0 100644
--- a/src/style/molecules/_location.scss
+++ b/src/style/molecules/_location.scss
@@ -1,7 +1,16 @@
 .location {
     text-align: center;
+
+    & > * {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
     // Flag
     img {
+        display: block;
+        margin: 0 auto;
         border-radius: 100%;
     }
     // Link
@@ -17,7 +26,8 @@
         font-weight: 300;
         line-height: 1.2;
     }
-    span {
+    &__country {
         color: $color-tertiary;
     }
+
 }
\ No newline at end of file
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index cc02939..3a902ff 100644
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -1,9 +1,21 @@
 .browse {
 
+    // Description
     &__description {
         text-align: center;
+        margin-bottom: 56px;
     }
 
+    // Continents
+    &__continents {
+        text-align: center;
+
+        button {
+            margin: 0 8px;
+        }
+    }
+
+    // Locations
     &__locations {
         display: flex;
         flex-flow: row wrap;
diff --git a/src/style/style.scss b/src/style/style.scss
index 76f6290..654d00e 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -24,6 +24,7 @@
 // Atomic Design System
 // Atoms
 @import "atoms/button";
+@import "atoms/badge";
 
 // Molecules
 @import "molecules/photo-card";