Updating docs, fixing typo

Author: sblinde

Diff for: docs/docs/examples/simple-carousel.mdx

@@ -86,7 +86,7 @@ function reducer(state: CarouselState, action: CarouselAction): CarouselState {
 
 Then, building upon the reducer logic, the `<Carousel>` is constructed. We hold the number of items within a count of `numItems`. We utilize the reducer within the `React.useReducer` hook.
 
-By creating `slide`, as a `const`, we can utilize that later in the component, calling it within `useSwipeable`: called upon `slide(NEXT)` and `slide(PREV)`, invoking the `dispatch` and the `timeout` we built within `slide`. Within the use of `useSwippeable`, we set `swipeDuration` to `500ms`. We set `preventScrollOnSwipe` to `true`, and `trackMouse` to `true`.
+By creating `slide`, as a `const`, we can utilize that later in the component, calling it within `useSwipeable`: called upon `slide(NEXT)` and `slide(PREV)`, invoking the `dispatch` and the `timeout` we built within `slide`. Within the use of `useSwipeable`, we set `swipeDuration` to `500ms`. We set `preventScrollOnSwipe` to `true`, and `trackMouse` to `true`.
 
 At the end, we return the component itself, built with the components we've created, with `handlers` passed into the wrapping `<div>` around the surrounding container. The `<CarouselContainer>` holds the directional and sliding state, and within that container the items we want to display are mapped as `React.Children`, utilizing `getOrder`. 
 

Diff for: docs/docs/examples/simple-pattern.mdx

@@ -16,7 +16,7 @@ You can see this full example as pure code within the [Pattern.tsx](https://gith
 
 ## Simple Carousel Code Explained
 
-Import the hook directly from the `react-swipeable` library, along with . In our example, we built and imported a local set of UI components: you can utilize your own UI and styling, or use your favorite UI component library of choice.
+Import the hook directly from the `react-swipeable` library, along with the directions from the library, and the `SwipeEventData`. In our example, we built and imported a local set of UI components: you can utilize your own UI and styling, or use your favorite UI component library of choice.
 
 ```typescript
 import React, { FunctionComponent, ReactNode } from 'react';
@@ -32,7 +32,7 @@ import {
 } from '../components';
 ```
 
-In our example, we stylize our own `UpArrow` and `DownArrow`, but know you can use whatever UI library of your choice, or stylize your own!
+In our example, we utilize SVGs for our `UpArrow` and `DownArrow` to give indications of when someone is successfully activating the pattern for user feedback, but know you can use whatever UI library of your choice, or stylize your own!
 
 ```typescript
 const UpArrow = ({active}: {active: boolean}) => (
@@ -52,19 +52,7 @@ const DownArrow = ({active}: {active: boolean}) => (
 );
 ```
 
-```typescript
-type Direction = typeof PREV | typeof NEXT;
-
-interface CarouselState {
-  pos: number;
-  sliding: boolean;
-  dir: Direction;
-}
-
-type CarouselAction =
-  | { type: Direction, numItems: number }
-  | { type: 'stopSliding' };
-```
+Next, we set up our types for the `Directions`, `CarouselState`, and `CarouselAction`.
 
 ```typescript
 type Direction = typeof PREV | typeof NEXT;
@@ -80,6 +68,8 @@ type CarouselAction =
   | { type: 'stopSliding' };
 ```
 
+Below, we create a function called `getOrder`, which drives the position of each item in the carousel, and what order of position each will be displayed in the context of the carousel. Then, we set a `pattern` as an array of the pattern we want the user to follow to unlock the slide action. Finally here, we then set `getInitialState`, setting the position of the initial items, the `sliding`, as false, and the direction. 
+
 ```typescript
 
 const getOrder = (index: number, pos: number, numItems: number) => {
@@ -92,6 +82,7 @@ const getInitialState = (numItems: number): CarouselState => ({ pos: numItems -
 
 ```
 
+At the bottom of the file, we set up a reducer for controlling the action of the Carousel utilizing a switch to set the `CarouselState` logic.
 
 ```typescript
 function reducer(state: CarouselState, action: CarouselAction): CarouselState {
@@ -118,6 +109,17 @@ function reducer(state: CarouselState, action: CarouselAction): CarouselState {
 }
 ```
 
+Then, building upon the reducer logic, the `<Carousel>` is constructed. We hold the number of items within `numItems`, and utilize the reducer within the `React.useReducer` hook.
+
+By creating the `slide`, as a `const`, we can utilize that to call within `handleSwiped` as an action that is called upon the user successfully execution of the pattern.
+
+It may help to briefly look at the `handlers` for a moment, and how we utilize `useSwipeable`. Within this, with each `onSwiped`, we call `handleSwiped`. So for each swipe the user takes within the text box above the carousel, we execute `handleSwiped` and pass along the `eventData`. If the `eventData.dir` matches the pattern for this indexed (`pIdx`) item, and the direction indicated, then we `setPIdx` to a greater number. 
+
+What does this do? Two things: it helps us know when the user successfully got to the end of the pattern, and activate the `slide` action, and it also controls the arrows activating the color within the `<PatternBox>` to give feedback to the user that they were successful in activating the steps of the pattern! 
+
+Two other important items to note: we utilized `onTouchStartOrOnMouseDown` to pass through `event.preventDefault()` as a callback, and used `touchEventOptions: {passive: false}` in case certain browsers ignored the `preventDefault()` callback bubbling up. 
+
+From there, the rest of the UI of the component is built. The `<PatternBox>` holds where the user swipes in order to interact with the Carousel itself, along with the arrows that give the feedback to the user that the pattern was successful. The `<CarouselContainer>` holds the Carousel display and items. Our Simple Pattern is complete!
 
 ```typescript
 const Carousel: FunctionComponent<{children: ReactNode}> = (props) => {
@@ -191,6 +193,5 @@ const Carousel: FunctionComponent<{children: ReactNode}> = (props) => {
     </>
   );
 };
-
 ```
 

Diff for: docs/src/components/examples/SimplePattern/pattern.tsx

@@ -102,8 +102,8 @@ const Carousel: FunctionComponent<{ children: ReactNode }> = (props) => {
   return (
     <>
       <PatternBox {...handlers}>
-        Swipe the pattern below, within this box, to make the carousel go to the
-        next slide
+        Within this text area, swipe the pattern seen below to make the carousel
+        navigate to the next slide.
         {`\n`}
         <p style={{ textAlign: "center", paddingTop: "15px" }}>
           Swipe:

Diff for: examples/app/SimplePattern/pattern.tsx

@@ -90,8 +90,8 @@ const Carousel: FunctionComponent<{children: ReactNode}> = (props) => {
   return (
     <>
       <PatternBox {...handlers}>
-        Swipe the pattern below, within this box, to make the carousel go to the next
-        slide
+      Within this text area, swipe the pattern seen below to make the carousel
+      navigate to the next slide.
         {`\n`}
         <p style={{textAlign: 'center', paddingTop: '15px'}}>
           Swipe: