From b18ccb6d0060da988f656aa0c5d46175fb19c72e Mon Sep 17 00:00:00 2001
From: palewire <b@palewi.re>
Date: Mon, 3 Apr 2023 04:55:27 -0400
Subject: [PATCH] Added new SortArrow component

---
 src/components/Table/SortArrow.svelte     | 35 +++++++++++++++++++++++
 src/components/Table/Table.stories.svelte |  2 +-
 src/components/Table/Table.svelte         | 29 ++++++++++---------
 src/components/Table/stories/docs/sort.md | 14 ++++-----
 4 files changed, 59 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Table/SortArrow.svelte

diff --git a/src/components/Table/SortArrow.svelte b/src/components/Table/SortArrow.svelte
new file mode 100644
index 00000000..1a23961f
--- /dev/null
+++ b/src/components/Table/SortArrow.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  /**
+   * The direction of the sort. By default it's ascending.
+   * @type {SortDirection}
+   */
+  type SortDirection = 'ascending' | 'descending';
+  export let sortDirection: SortDirection = 'ascending';
+</script>
+
+<svg
+  width="15"
+  height="21"
+  viewBox="0 0 15 21"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    class:active="{sortDirection === 'ascending'}"
+    d="M6.76474 20.2244L0.236082 13.4649C-0.0786943 13.139 -0.0786943 12.6104 0.236082 12.2845C0.550521 11.959 1.19794 11.96 1.51305 12.2845L7.33483 12.2845L13 12.2845C13.43 11.8545 14.1195 11.9593 14.4339 12.2849C14.7487 12.6107 14.7487 13.1394 14.4339 13.4653L7.90492 20.2244C7.59015 20.5503 7.07952 20.5503 6.76474 20.2244Z"
+  ></path>
+  <path
+    class:active="{sortDirection === 'descending'}"
+    d="M7.90518 0.244414L14.4338 7.00385C14.7486 7.32973 14.7486 7.85838 14.4338 8.18427C14.1194 8.50981 13.472 8.50876 13.1569 8.18427L7.33509 8.18427L1.66992 8.18427C1.23992 8.61427 0.550443 8.50946 0.236003 8.18392C-0.0787725 7.85803 -0.0787725 7.32938 0.236003 7.0035L6.765 0.244414C7.07978 -0.0814713 7.5904 -0.0814713 7.90518 0.244414Z"
+  ></path>
+</svg>
+
+<style lang="scss">
+  @import '../../scss/colours/thematic/tr';
+  path {
+    fill: $tr-muted-grey;
+    &.active {
+      fill: $tr-dark-grey;
+    }
+  }
+</style>
diff --git a/src/components/Table/Table.stories.svelte b/src/components/Table/Table.stories.svelte
index 855a609d..76d6f609 100644
--- a/src/components/Table/Table.stories.svelte
+++ b/src/components/Table/Table.stories.svelte
@@ -144,7 +144,7 @@
     sortDirection: 'descending',
     paginated: true,
     title: 'Press Freedom Index',
-    notes:
+    source:
       "Source: <a href='https://en.wikipedia.org/wiki/Press_Freedom_Index'>Reporters Without Borders</a>",
   }}"
 />
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index ce457be9..39470635 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -133,6 +133,7 @@
   /** Import local helpers */
   import Block from '../Block/Block.svelte';
   import Pagination from './Pagination.svelte';
+  import SortArrow from './SortArrow.svelte';
   import {
     filterArray,
     paginateArray,
@@ -287,6 +288,7 @@
             {#each includedFields as field}
               <th
                 scope="col"
+                class="table--thead--th"
                 class:sortable
                 class:sort-ascending="{sortable &&
                   sortField === field &&
@@ -299,6 +301,14 @@
                 style="text-align: {fieldAlignments[field]}"
               >
                 {field}
+                {#if sortable}
+                  <div
+                    class="table--thead--sortarrow"
+                    class:invisible="{sortField !== field}"
+                  >
+                    <SortArrow bind:sortDirection />
+                  </div>
+                {/if}
               </th>
             {/each}
           </tr>
@@ -399,19 +409,12 @@
             &.sortable {
               cursor: pointer;
             }
-            &.sort-ascending:after {
-              content: ' ▲';
-              font-size: 0.75rem;
-              color: $tr-orange;
-              vertical-align: 10%;
-              padding: 0 0 0 0.0612rem;
-            }
-            &.sort-descending:after {
-              content: ' ▼';
-              font-size: 0.75rem;
-              color: $tr-orange;
-              vertical-align: 10%;
-              padding: 0 0 0 0.0612rem;
+            .table--thead--sortarrow {
+              display: inline-block;
+              margin: 0 0 0 0.125rem;
+              &.invisible {
+                display: none;
+              }
             }
           }
         }
diff --git a/src/components/Table/stories/docs/sort.md b/src/components/Table/stories/docs/sort.md
index 706adac8..57e03e5a 100644
--- a/src/components/Table/stories/docs/sort.md
+++ b/src/components/Table/stories/docs/sort.md
@@ -1,12 +1,12 @@
-Allow users to sort the table by setting the optional `searchable` variable to `true`. Specify the starting order by setting `sortField` to a column name and `sortDirection` to `ascending` or `descending`.
+Allow users to sort the table by setting the `searchable` input. Specify the starting order by setting `sortField` to a column name and `sortDirection` to `ascending` or `descending`.
 
 ```svelte
 <Table
-  data={yourData}
-  sortable=true,
-  sortField='Score',
-  sortDirection='descending',
-  title='Press Freedom Index',
-  notes='Source: <a href="https://en.wikipedia.org/wiki/Press_Freedom_Index">Reporters Without Borders</a>',
+  data="{yourData}"
+  sortable="{true},"
+  sortField="{'Score'},"
+  sortDirection="{'descending'},"
+  title="{'Press Freedom Index'},"
+  source="{'Source: <a href="https://en.wikipedia.org/wiki/Press_Freedom_Index">Reporters Without Borders</a>'},"
 />
 ```