From f55daf29cb4761ec1ada5d7e9719a3abe9ecbb54 Mon Sep 17 00:00:00 2001
From: Gregg8 <gregg.ramsey@day8.com.au>
Date: Mon, 2 May 2016 16:47:20 +1000
Subject: [PATCH] Bump Reagent to 0.6.0-SNAPSHOT and make the demo app
 compatible...  - Fix `<ul> cannot appear as a descendant of <p>` error by
 moving [:ul]s (and [:ol]s and [:div]s) out of [:p]s and [p]s in various demo
 pages  - The way the h-box demo was writing to a reaction is no longer
 allowed (not very idiomatic anyway). Fixed this (with another hack that
 works)

---
 project.clj                   |  2 +-
 src/re_demo/alert_list.cljs   | 15 ++++++----
 src/re_demo/gap.cljs          | 24 ++++++++--------
 src/re_demo/h_box.cljs        |  6 ++--
 src/re_demo/info_button.cljs  | 14 ++++-----
 src/re_demo/introduction.cljs | 49 +++++++++++++-------------------
 src/re_demo/layout.cljs       | 53 ++++++++++++++++++-----------------
 src/re_demo/popovers.cljs     | 28 +++++++++---------
 src/re_demo/scroller.cljs     |  7 ++---
 src/re_demo/tour.cljs         | 14 ++++-----
 10 files changed, 102 insertions(+), 110 deletions(-)

diff --git a/project.clj b/project.clj
index f8574d2a..33023d8e 100644
--- a/project.clj
+++ b/project.clj
@@ -11,7 +11,7 @@
 
   :dependencies     [[org.clojure/clojure         "1.7.0"]
                      [org.clojure/clojurescript   "1.7.145"]
-                     [reagent                     "0.5.1"]
+                     [reagent                     "0.6.0-SNAPSHOT"]
                      [com.andrewmcveigh/cljs-time "0.4.0"]]
 
   ;:plugins          [[lein-unpack-resources "0.1.1"]]
diff --git a/src/re_demo/alert_list.cljs b/src/re_demo/alert_list.cljs
index 5cb9f1e5..e3e1df28 100644
--- a/src/re_demo/alert_list.cljs
+++ b/src/re_demo/alert_list.cljs
@@ -40,12 +40,15 @@
                                :width    "600px"
                                :gap      "10px"
                                :children [[title2 "Demo"]
-                                          [p "To insert alerts at the top of the list, click "
-                                           [button
-                                            :label "Add alert"
-                                            :style {:width "100px"}
-                                            :on-click #(add-alert alerts (gensym) :info {:heading "New alert" :body "This alert was added by the \"Add alert\" button."})]]
-                                           [p "Also, try clicking the \"x\" on alerts."]
+                                          [h-box
+                                           :gap      "10px"
+                                           :align    :center
+                                           :children [[label :label "To insert alerts at the top of the list, click "]
+                                                      [button
+                                                       :label "Add alert"
+                                                       :style {:width "100px"}
+                                                       :on-click #(add-alert alerts (gensym) :info {:heading "New alert" :body "This alert was added by the \"Add alert\" button."})]]]
+                                          [p "Also, try clicking the \"x\" on alerts."]
                                            [p [:code ":max-height"] " is set to 300px. A scroll bar will appear as necessary."]
                                            [p "For demonstration purposes, a 'dotted' " [:code ":border-style"] " is set."]
                                           [alert-list
diff --git a/src/re_demo/gap.cljs b/src/re_demo/gap.cljs
index f11d9f60..01128639 100644
--- a/src/re_demo/gap.cljs
+++ b/src/re_demo/gap.cljs
@@ -60,14 +60,13 @@
                                                            :padding          "20px"}
                                                    :child "Box 3"]]]
                                       [gap :size "10px"]
-                                       [p "Notes:"
-                                        [:ul
-                                         [:li "h-box and v-box have a " [:code ":gap"] " parameter which inserts a
+                                      [p "Notes:"]
+                                      [:ul
+                                       [:li "h-box and v-box have a " [:code ":gap"] " parameter which inserts a
                                          given amount of white space between each child."]
-                                         [:li "For more ad hoc gaps, use the " [:span.bold "[gap ...]"] " component itself."]
-                                         [:li "In this example, the gap between components 2 and 3 will be 25px
-                                         because the [gap] is a child of the h-box and will have 10px left and right of it."]]]
-
+                                       [:li "For more ad hoc gaps, use the " [:span.bold "[gap ...]"] " component itself."]
+                                       [:li "In this example, the gap between components 2 and 3 will be 25px
+                                         because the [gap] is a child of the h-box and will have 10px left and right of it."]]
                                       [gap :size "10px"]
                                       [line]
                                       [title2 "Demo #2"]
@@ -101,10 +100,9 @@
                                                            :padding          "20px"}
                                                    :child "Box 3"]]]
                                       [gap :size "10px"]
-                                      [p "Notes:"
-                                       [:ul
-                                        [:li "This example has a gap with a " [:span.bold "proportional size"] " of \"1\", not an absolute size. Synonymous to 100%."]
-                                        [:li "Because it \"grows\" to fill all available space, it \"pushes\" box2 and box3 as far apart as possible."]
-                                        [:li "Imagine the boxes as buttons, to see how this might be useful."]]]
-                                      ]]]]
+                                      [p "Notes:"]
+                                      [:ul
+                                       [:li "This example has a gap with a " [:span.bold "proportional size"] " of \"1\", not an absolute size. Synonymous to 100%."]
+                                       [:li "Because it \"grows\" to fill all available space, it \"pushes\" box2 and box3 as far apart as possible."]
+                                       [:li "Imagine the boxes as buttons, to see how this might be useful."]]]]]]
               [gap :size "30px"]]])
diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs
index 20ed19d2..cf0ec07a 100644
--- a/src/re_demo/h_box.cljs
+++ b/src/re_demo/h_box.cljs
@@ -367,7 +367,8 @@
                                 [:li "Turn off the h-box " [:code ":height"] " parameter to see how it automatically expands to show the rest of the content in Box2."]
                                 [:li "Edit the box " [:code ":child"] " parameters to change the content to see how the current layout handles more or less content."]]]]}])
 
-(def box-state (reaction (get demos @current-demo)))
+(def box-state       (reagent/atom (get demos @current-demo)))
+(def reset-box-state (reaction (reset! box-state (get demos @current-demo))))
 
 (def show-desc? (reagent/atom true))
 
@@ -804,4 +805,5 @@
                                         [gap :size "0px"]
                                         [demo]
                                         [gap :size "0px"]
-                                        [choose-a-demo]]]]]]]))
+                                        [choose-a-demo]
+                                        (when (nil? @reset-box-state) "")]]]]]])) ;; For reset-box-state to fire, we must dereference it in a component
diff --git a/src/re_demo/info_button.cljs b/src/re_demo/info_button.cljs
index 872496c0..3637fb14 100644
--- a/src/re_demo/info_button.cljs
+++ b/src/re_demo/info_button.cljs
@@ -39,13 +39,13 @@
                                :width    "450px"
                                :children [[title2 "Notes"]
                                           [status-text "Stable"]
-                                           [p "A tiny information button, which is light grey and unobrusive. When clicked, displays a popup containing helpful information. "]
-                                           [p "Designed to be used with input fields, to explain the purpose of the field."]
-                                           [p "The popup has a dark theme, and uses white text. CSS classes for the text are available as follows:to format the text in the popover"
-                                           [:ul
-                                            [:li [:span.semibold "info-heading"] " - heading/title style"]
-                                            [:li [:span.semibold"info-subheading"] " - subheading style"]
-                                            [:li [:span.semibold "info-bold"] " - bold style"]]]
+                                          [p "A tiny information button, which is light grey and unobrusive. When clicked, displays a popup containing helpful information. "]
+                                          [p "Designed to be used with input fields, to explain the purpose of the field."]
+                                          [p "The popup has a dark theme, and uses white text. CSS classes for the text are available as follows:to format the text in the popover"]
+                                          [:ul
+                                           [:li [:span.semibold "info-heading"] " - heading/title style"]
+                                           [:li [:span.semibold"info-subheading"] " - subheading style"]
+                                           [:li [:span.semibold "info-bold"] " - bold style"]]
                                           [args-table info-button-args-desc]]]
                               [v-box
                                :gap      "10px"
diff --git a/src/re_demo/introduction.cljs b/src/re_demo/introduction.cljs
index aa04d87d..98fb8b2d 100644
--- a/src/re_demo/introduction.cljs
+++ b/src/re_demo/introduction.cljs
@@ -5,7 +5,7 @@
 
 ; narrow, light grey column of text, on the RHS
 (def RHS-column-style
-  {:style {:width "250px"
+  {:style {:width "450px"
            :font-size "13px"
            :color "#aaa"}})
 
@@ -44,12 +44,12 @@
               [h-box
                :gap center-gap-px
                :children [[v-box
-                           :children [[p "The demo app is an SPA, built using re-com. It serves as:"
-                                       [:ul
-                                        [:li "a visual showcase of the components"]
-                                        [:li "documentation for the components (parameters etc.)"]
-                                        [:li "shows, via its own code, how to use the components"]
-                                        [:li "a test harness"]]]]]
+                           :children [[p "The demo app is an SPA, built using re-com. It serves as:"]
+                                      [:ul
+                                       [:li "a visual showcase of the components"]
+                                       [:li "documentation for the components (parameters etc.)"]
+                                       [:li "shows, via its own code, how to use the components"]
+                                       [:li "a test harness"]]]]
                           [v-box
                            :children [[p RHS-column-style [:br] [:br] [:br]
                                        "Most pages of this app have hyperlinks which take you
@@ -65,8 +65,6 @@
 
               [p "Now, our sausage fingers sometimes type onmouseover instead of on-mouse-over,
                                      or centre rather than center, and sometimes we pass in a string where  there should be keyword."]
-
-
               [h-box
                :gap center-gap-px
                :children [[v-box
@@ -77,10 +75,7 @@
                                        {:style {:width "450px"}}
                                        ":closure-defines {:goog.DEBUG false}"]]]
                           [v-box
-                           :children [[p RHS-column-style "Parameter validation errors are written to the console."
-                                       ]
-                                      ]]
-                          ]]]])
+                           :children [[p RHS-column-style "Parameter validation errors are written to the console."]]]]]]])
 
 (defn named-params
   []
@@ -108,18 +103,16 @@
   :style     {:background-color \"blue\"}]"]
                                      [p "Each parameter involves a leading keyword name, followed by a value.  Always pairs. "]]]
                           [v-box
-                           :children [[p RHS-column-style "We use named parameters because:"
-                                        [:ol
-                                         [:li "the code seems more easily read and understood (although longer)"]
-                                         [:li "optionality - not all parameters need be supplied and defaults can be introduced"]
-                                         [:li "API flexibility - easy to add new parameters"]]]
-                                       [p RHS-column-style "Read further analysis "
+                           :children [[p RHS-column-style "We use named parameters because:"]
+                                      [:ol RHS-column-style
+                                       [:li "the code seems more easily read and understood (although longer)"]
+                                       [:li "optionality - not all parameters need be supplied and defaults can be introduced"]
+                                       [:li "API flexibility - easy to add new parameters"]]
+                                      [p RHS-column-style "Read further analysis "
                                         [hyperlink-href
                                          :label "here"
                                          :href "https://clojurefun.wordpress.com/2012/08/13/keyword-arguments-in-clojure/"
-                                         :target "_blank"] "."]]]
-                          ]]
-              ]])
+                                         :target "_blank"] "."]]]]]]])
 
 
 (defn layouts-section
@@ -154,19 +147,15 @@
                                         [hyperlink-href
                                          :label "flexbox"
                                          :href "https://css-tricks.com/snippets/css/a-guide-to-flexbox"
-                                         :target "_blank"]]
-                                       ]]]]]])
+                                         :target "_blank"]]]]]]]])
 
 
 (defn example-layout
   []
   [v-box
-   :children [
-              [h-box
-               :children [
-                          [v-box
-                           :children [
-                                      [p "And this example code, showing an " [:span.bold "h-box"] " as a child of a " [:span.bold "v-box"] " ..."]
+   :children [[h-box
+               :children [[v-box
+                           :children [[p "And this example code, showing an " [:span.bold "h-box"] " as a child of a " [:span.bold "v-box"] " ..."]
                                       [:pre
                                        {:style {:width "460px"}}
                                        "[v-box
diff --git a/src/re_demo/layout.cljs b/src/re_demo/layout.cljs
index 64b6c182..94c3b505 100644
--- a/src/re_demo/layout.cljs
+++ b/src/re_demo/layout.cljs
@@ -64,18 +64,18 @@
                                       [p "Re-com's layout model is a thin layer over " [:span.bold "CSS Flexbox"] "."]
                                       [p "To fully understand Re-com's layout components and use them
                                           powerfully, you " [:span.bold "will"] " need to have a strong understanding of
-                                          Flexbox. You should do these tutorials very soon:"
-                                       [:ul
-                                        [:li
-                                         [hyperlink-href
-                                          :label "CSS-Tricks guide to flexbox"
-                                          :href "https://css-tricks.com/snippets/css/a-guide-to-flexbox"
-                                          :target "_blank"]]
-                                        [:li
-                                         [hyperlink-href
-                                          :label "The Ultimate Flexbox Cheat Sheet"
-                                          :href "http://www.sketchingwithcss.com/samplechapter/cheatsheet.html"
-                                          :target "_blank"]]]]]]
+                                          Flexbox. You should do these tutorials very soon:"]
+                                      [:ul
+                                       [:li
+                                        [hyperlink-href
+                                         :label "CSS-Tricks guide to flexbox"
+                                         :href "https://css-tricks.com/snippets/css/a-guide-to-flexbox"
+                                         :target "_blank"]]
+                                       [:li
+                                        [hyperlink-href
+                                         :label "The Ultimate Flexbox Cheat Sheet"
+                                         :href "http://www.sketchingwithcss.com/samplechapter/cheatsheet.html"
+                                         :target "_blank"]]]]]
 
                           [v-box
                            :style {:font-size "13px" :color "#aaa"}
@@ -107,6 +107,7 @@
 (defn key-style-section
   []
   [v-box
+   :width "450px"
    :children [[title :level :level2 :label "The Key Style"]
               [p "Flexbox is about styles on " [:span.bold "containers"] " and their child " [:span.bold "items"] "."]
               [p "While tutorials will walk you through the menagerie of flexbox related styles,
@@ -115,22 +116,22 @@
                " [:span.bold "flex"] " styles on the items within that layout."]
               [title :level :level2 :label "flex=GSB"]
               [p "Tutorials will tell you that the " [:span.bold "flex"] " style can be single value like " [:span.bold "none"] "  or " [:span.bold "auto"]
-                 ". But those are shortcuts. Every flex style resolves to a triple of sub-values:"
-               [:ul
-                [:li [:span [:span.bold "grow"]   " - Integer which determines how an item grows in size (in proportion to its siblings) if there is
+                 ". But those are shortcuts. Every flex style resolves to a triple of sub-values:"]
+              [:ul
+               [:li [:span [:span.bold "grow"]   " - Integer which determines how an item grows in size (in proportion to its siblings) if there is
                                                    extra container space to distribute. 0 for no growing."]]
-                [:li [:span [:span.bold "shrink"] " - Integer which determines how an item shrinks in size (in proportion to its siblings) if container
+               [:li [:span [:span.bold "shrink"] " - Integer which determines how an item shrinks in size (in proportion to its siblings) if container
                                                    space is reduced. 0 for no shrinking."]]
-                [:li [:span [:span.bold "basis"]  " - The default size of an item before any necessary growing or shrinking. Can be:"
-                      [:ul
-                       [:li "absolute length values like \"100px\" or \"40em\""]
-                       [:li [:span.bold "auto"] " which means use the natural size of the item"]
-                       [:li "proporational values like \"60\""]]]]]]
-
-              [p "Shortcut values are always transformed into a triple. For example:"
-               [:ul
-                [:li  [:span.bold "flex=\"none\""] " is eqivalent to  " [:span.bold "flex=\"0 0 auto\""]]
-                [:li  [:span.bold "flex=\"auto\""] " is eqivalent to  " [:span.bold "flex=\"1 1 auto\""]]]]
+               [:li [:span [:span.bold "basis"]  " - The default size of an item before any necessary growing or shrinking. Can be:"
+                     [:ul
+                      [:li "absolute length values like \"100px\" or \"40em\""]
+                      [:li [:span.bold "auto"] " which means use the natural size of the item"]
+                      [:li "proporational values like \"60\""]]]]]
+
+              [p "Shortcut values are always transformed into a triple. For example:"]
+              [:ul
+               [:li  [:span.bold "flex=\"none\""] " is eqivalent to  " [:span.bold "flex=\"0 0 auto\""]]
+               [:li  [:span.bold "flex=\"auto\""] " is eqivalent to  " [:span.bold "flex=\"1 1 auto\""]]]
               [p "Sure, use the shortcuts. But it is only by understanding triples that you become a power user of flexbox (or re-com layouts)."]
               [gap :size "10px"]]])
 
diff --git a/src/re_demo/popovers.cljs b/src/re_demo/popovers.cljs
index cf46c2d2..fe29e0dc 100644
--- a/src/re_demo/popovers.cljs
+++ b/src/re_demo/popovers.cljs
@@ -117,21 +117,21 @@
                                             [p "Popovers appear above other components, and point to an anchor."]
                                             [p "In the simplest case, we're talking tooltips. In more complex cases, detailed dialog boxes."]
                                             [p "Even when the absolute position of the anchor changes, the popover stays pointing at it."]
-                                            [p "To create a popover, wrap the anchor with " [:code "popover-anchor-wrapper"] ". The arguments are:"
-                                             [:ul
-                                              [:li [:code ":showing?"] " - An atom. When true, the popover shows."]
-                                              [:li [:code ":position"] " - A keyword specifying the popover's position relative to the anchor. See the demo to the right for the values."]
-                                              [:li [:code ":anchor"] " - The anchor component to wrap."]
-                                              [:li [:code ":popover"] " - The popover body component (what gets shown in the popover)."]]]
-                                            [p "You should use the " [:code "popover-content-wrapper"] " component to wrap the body content. The main arguments are:"
-                                             [:ul
-                                              [:li [:code ":title"] " - Title of the popover. Can be ommitted."]
-                                              [:li [:code ":close-button?"] " - Add close button in the top right. Default is true."]
-                                              [:li [:code ":body"] " - Body component of the popover."]
-                                              [:li [:code ":on-cancel"] " - A function taking no parameters, invoked when the popover is cancelled (e.g. user clicks away)."]
-                                              [:li [:code ":no-clip?"] " - When an anchor is in a scrolling region (e.g. scroller component), the popover can sometimes be clipped.
+                                            [p "To create a popover, wrap the anchor with " [:code "popover-anchor-wrapper"] ". The arguments are:"]
+                                            [:ul
+                                             [:li [:code ":showing?"] " - An atom. When true, the popover shows."]
+                                             [:li [:code ":position"] " - A keyword specifying the popover's position relative to the anchor. See the demo to the right for the values."]
+                                             [:li [:code ":anchor"] " - The anchor component to wrap."]
+                                             [:li [:code ":popover"] " - The popover body component (what gets shown in the popover)."]]
+                                            [p "You should use the " [:code "popover-content-wrapper"] " component to wrap the body content. The main arguments are:"]
+                                            [:ul
+                                             [:li [:code ":title"] " - Title of the popover. Can be ommitted."]
+                                             [:li [:code ":close-button?"] " - Add close button in the top right. Default is true."]
+                                             [:li [:code ":body"] " - Body component of the popover."]
+                                             [:li [:code ":on-cancel"] " - A function taking no parameters, invoked when the popover is cancelled (e.g. user clicks away)."]
+                                             [:li [:code ":no-clip?"] " - When an anchor is in a scrolling region (e.g. scroller component), the popover can sometimes be clipped.
                                                                          By passing true for this parameter, re-com will use a different CSS method to show the popover.
-                                                                         This method is slightly inferior because the popover can't track the anchor if it is repositioned."]]]]]
+                                                                         This method is slightly inferior because the popover can't track the anchor if it is repositioned."]]]]
                                 [v-box
                                  :gap      "30px"
                                  :margin   "20px 0px 0px 0px"
diff --git a/src/re_demo/scroller.cljs b/src/re_demo/scroller.cljs
index c54d1d27..f5f1e252 100644
--- a/src/re_demo/scroller.cljs
+++ b/src/re_demo/scroller.cljs
@@ -33,8 +33,7 @@
  :v-scroll :auto
  :height   \"300px\"
  :child    [some-component]]"]
-                                      [p "Notes:"
-                                      [:ul
-                                       [:li "In this example, if the height of [some-component] is greater than 300px, a vertical scroll bar will be added."]
-                                       ]]]]]]
+                                     [p "Notes:"]
+                                     [:ul
+                                      [:li [:span "In this example, if the height of [some-component] is greater than 300px, a vertical scroll bar will be added."]]]]]]]
               [gap :size "30px"]]])
diff --git a/src/re_demo/tour.cljs b/src/re_demo/tour.cljs
index 1db0429b..364a8357 100644
--- a/src/re_demo/tour.cljs
+++ b/src/re_demo/tour.cljs
@@ -99,13 +99,13 @@
                            :children [[title2 "Notes"]
                                       [status-text "Alpha" {:color "#EA6B00"}]
 
-                                      [p "To create a tour:"
-                                       [:ul
-                                        [:li.spacer "Make a tour object, something like: " [:br]
-                                         [:code "(let [demo-tour (make-tour [:step1 :step2 :step3])])"] "."]
-                                        [:li.spacer "Then, wrap each anchor components in your tour with a popover component."]
-                                        [:li.spacer "Each each such popover the " [:code ":showing?"] " parameter should look like this: "
-                                         [:br] [:code ":showing? (:step1 demo-tour)"] "."]]]
+                                      [p "To create a tour:"]
+                                      [:ul
+                                       [:li.spacer "Make a tour object, something like: " [:br]
+                                        [:code "(let [demo-tour (make-tour [:step1 :step2 :step3])])"] "."]
+                                       [:li.spacer "Then, wrap each anchor components in your tour with a popover component."]
+                                       [:li.spacer "Each each such popover the " [:code ":showing?"] " parameter should look like this: "
+                                        [:br] [:code ":showing? (:step1 demo-tour)"] "."]]
                                       [p "To add navigation buttons to a popover, add the following component to
                                        the end of your popover's "
                                        [:code ":body"] " markup: " [:br] [:code "[make-tour-nav demo-tour]"] "."]