                       textarea
                       input-validation
                       ]}
-          {:id :accordion :title "Accordion [Deprecated]" :examples [accordion accordion-sidebar accordion-nested]
-           :documentation
-               "# Accordion [Deprecated]
-
-               Note: Expansion panels are better designed to show more information in a flexible way. We also have the list component now for showing informational data.
-
-               This object is redesigned to be un-opinionated and flexible for almost any interactive list you might need in your app. The simplified markup resembles this node list:
-               ``` shell\n.o-accordion [ --inline | --right | --small ]\n   __title   [ is-active | is-nested | is-selected ]\n   __content [ is-active ]\n     __group\n       __info\n       __actions\n         __action [ --informative | --success ]\n         __meta\n           __meta-item\n```"}
-          {:id :sidebar :title "Sidebar [Deprecated]" :examples [sidebar sidebar-right]}
           ])))
 

    ))


(defexample sidebar
  "# Sidebar Example

  **Deprecated** We should be using the drawer component or 2-pane article layout instead.
  "
  (let [example-class-modifier (str (if (om/get-state this :sidebar-visible) "" " u-hide")
                                 (if (om/get-state this :sidebar-collapsed) " is-collapsed" ""))]
    (dom/div #js {}
      (dom/button #js {:className "c-button"
                       :onClick   #(om/update-state! this update :sidebar-visible not)} "Show/Hide Example")
      (dom/nav #js {:style     #js {:left "50" :top "200" :width "16.25em" :height "300px"}
                    :className (str "o-sidebar o-sidebar--large" example-class-modifier)}
        (dom/div #js {:className "o-sidebar__controls"}
          (dom/input #js {:placeholder "Search library..." :className "c-input"})
          (dom/button #js {:className "c-button c-button--icon u-absolute--top-right"}
            (dom/svg #js {:version "1.1" :width "24" :height "24" :aria-labelledby "title" :role "img" :className "c-icon c-icon--search " :viewBox "0 0 24 24"}
              (dom/title #js {} "Search")
              (dom/path #js {:d "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))
          (dom/div #js {:className "u-wrapper c-dropdown--picker"}
            (dom/button #js {:className "c-button c-button--small"} " Filter items "
              (dom/svg #js {:version "1.1" :width "24" :height "24" :aria-labelledby "title" :role "img" :className "c-icon c-icon--arrow-drop-down" :viewBox "0 0 24 24"}
                (dom/title #js {} "Arrow Drop Down")
                (dom/path #js {:d "M7 10l5 5 5-5z"}))))
          (dom/button #js {:className "c-button c-button--anchor c-button--small"}
            (dom/svg #js {:version "1.1" :width "24" :height "24" :aria-labelledby "title" :role "img" :className "c-icon c-icon--remove-circle " :viewBox "0 0 24 24"}
              (dom/title #js {} "Remove Circle")
              (dom/path #js {:d "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"})) " Clear "))
        (dom/div #js {:className "o-accordion o-accordion--small"}
          (dom/div #js {:className "o-accordion__title is-nested is-active"} "Title 1")
          (dom/div #js {:className "o-accordion__content"}
            (dom/div #js {:className "o-accordion__group"}
              (dom/div #js {:className "o-accordion__info"} "View 1")
              (dom/div #js {:className "o-accordion__action"}
                (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-informative" :viewBox "0 0 24 24"}
                  (dom/path #js {:d "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"}))))
            (dom/div #js {:className "o-accordion__group"}
              (dom/div #js {:className "o-accordion__info"} "View 2.1")
              (dom/div #js {:className "o-accordion__action"}
                (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon is-informative" :viewBox "0 0 24 24"}
                  (dom/path #js {:d "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"})))))
          (dom/div #js {:className "o-accordion__title is-selected"} "Title 2")
          (dom/div #js {:className "o-accordion__title"} "Title 3")
          (map (fn [n] (dom/div #js {:className "o-accordion__group"}
                         (dom/div #js {:className "o-accordion__info"} (str "View " n))))
            (range 3 20))

          (dom/div #js {:className "o-accordion__title is-informative"}
            (dom/svg #js {:xmlns "http://www.w3.org/2000/svg" :width "24" :height "24" :className "c-icon c-icon--small" :viewBox "0 0 24 24"}
              (dom/path #js {:d "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"})) " Action 1 "))
        (dom/div #js {:className "o-sidebar__toggle"})))))

(defexample sidebar-right
  "# Sidebar Right side and inline example"
  (let [example-class-modifier (str (if (om/get-state this :sidebar-visible) "" " u-hide")
                                 (if (om/get-state this :sidebar-collapsed) " is-collapsed" ""))]
    (dom/div #js {}
      (dom/button #js {:className "c-button"
                       :onClick   #(om/update-state! this update :sidebar-visible not)} "Show/Hide Example")
      (dom/nav #js {:className (str "o-sidebar o-sidebar--right o-sidebar--inline" example-class-modifier)}
        (dom/textarea #js {:placeholder "Start typing here..." :className "c-input c-input--multi-line c-input--note"})
        (dom/button #js {:className "c-button"} "Save")
        (dom/div #js {:className "o-sidebar__toggle o-sidebar__toggle--alt"
                      :onClick   #(om/update-state! this update :sidebar-collapsed not)})))))

(defexample toolbar
  "# Toolbar Example"
  (let [changed-menu (om/get-state this :changed-menu)

;; OBJECTS start here
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

(defn toggle-pause [this] (om/update-state! this update :pause not))
(defexample button-group
  "# Button Group"
