Explain the map's symbols with a legend

For comparison [see this commit][commit]

Nothing exciting here. The ergonomics is similar to the Stimulus version.

[commit]: seanpdoyle@e234aba

app/components/SeatingLegend.js

@@ -0,0 +1,53 @@
+import React from 'react'
+
+export default class extends React.Component {
+  render() {
+    return (
+      <div className="syos-frame__legend" aria-hidden="true">
+        <p className="syos-u-margin-bottom-3 syos-u-font-weight-bold">
+        Legend
+        </p>
+
+        <ul className="syos-block-stack">
+          <li className="syos-block-stack__item">
+            <svg
+              width="16px"
+              height="16px"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <use
+                width="16px"
+                height="16px"
+                xlinkHref="#seat-icon-unselected"
+              >
+              </use>
+            </svg>
+
+              Available
+          </li>
+
+          <li className="syos-block-stack__item">
+            <svg
+              width="16px"
+              height="16px"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <use
+                width="16px"
+                height="16px"
+                xlinkHref="#seat-icon-selected"
+              >
+              </use>
+            </svg>
+
+              Selected
+          </li>
+        </ul>
+      </div>
+    )
+  }
+}

app/views/seats/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import SeatDialog from '../../components/SeatDialog'
 import Cart from '../../components/Cart'
 import SeatingMap from '../../components/SeatingMap'
+import SeatingLegend from '../../components/SeatingLegend'
 import Layout from '../../components/Layout'
 
 export default (props) => {
@@ -26,6 +27,7 @@ export default (props) => {
           className="syos-frame"
         >
           <div className="syos-frame__map">
+            <SeatingLegend />
             <SeatingMap sections={sections} />
           </div>
           <div className="syos-frame__sidebar">