Merge pull request #240 from CityOfDetroit/issue.229

Support long content in offcanvas body

src/components/atoms/OffcanvasBody/OffcanvasBody.scss

@@ -2,6 +2,10 @@
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins/breakpoints';
 
+:host(:not([data-expand])) {
+  overflow-y: auto;
+}
+
 @each $breakpoint-name, $_ in $grid-breakpoints {
   @include media-breakpoint-up($breakpoint-name) {
     .navbar-expand-#{$breakpoint-name}.offcanvas-body {

src/stories/offcanvas.stories.js

@@ -74,8 +74,51 @@ export const Basic = () => html`
     <cod-offcanvas-body>
       <p>
         Some text as placeholder. In real life you can have the elements you
-        have chosen. Like, text, images, lists, etc.
+        have chosen. Like, text, images, lists, etc. Here's an example of a very
+        long list.
       </p>
+      <ol>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+        <li>8</li>
+        <li>9</li>
+        <li>10</li>
+        <li>11</li>
+        <li>12</li>
+        <li>13</li>
+        <li>14</li>
+        <li>15</li>
+        <li>16</li>
+        <li>17</li>
+        <li>18</li>
+        <li>19</li>
+        <li>20</li>
+        <li>21</li>
+        <li>22</li>
+        <li>23</li>
+        <li>24</li>
+        <li>25</li>
+        <li>26</li>
+        <li>27</li>
+        <li>28</li>
+        <li>29</li>
+        <li>30</li>
+        <li>31</li>
+        <li>32</li>
+        <li>33</li>
+        <li>34</li>
+        <li>35</li>
+        <li>36</li>
+        <li>37</li>
+        <li>38</li>
+        <li>39</li>
+        <li>40</li>
+      </ol>
     </cod-offcanvas-body>
   </cod-offcanvas>
 `;