Skip to content

Commit

Permalink
Added a demo page for the [p] (i.e. paragraph) component.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gregg8
Gregg8 committed May 24, 2017
1 parent 71b099d commit ebb07ba
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 7 deletions.
2 changes: 1 addition & 1 deletion src/re_com/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@
(def vertical-pill-tabs tabs/vertical-pill-tabs)

(def label text/label)
(def title text/title)
(def p text/p)
(def title text/title)

(def make-tour tour/make-tour)
(def start-tour tour/start-tour)
Expand Down
8 changes: 5 additions & 3 deletions src/re_com/text.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,10 @@
:style {:margin-bottom margin-bottom}])]]))


;; ------------------------------------------------------------------------------------
;; Component: p
;; ------------------------------------------------------------------------------------

(defn p
"acts like [:p ]
Expand All @@ -81,7 +85,7 @@
Why limited text width? See http://baymard.com/blog/line-length-readability
The actualy font-size is inherited.
The actual font-size is inherited.
At 14px, 450px will yield between 69 and 73 chars.
At 15px, 450px will yield about 66 to 70 chars.
Expand All @@ -98,5 +102,3 @@
:min-width "450px"}}
m)]
[:span m (into [:p] children)])) ;; the wrapping span allows children to contain [:ul] etc


6 changes: 4 additions & 2 deletions src/re_demo/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
[reagent.core :as reagent]
[alandipert.storage-atom :refer [local-storage]]
[secretary.core :as secretary]
[re-com.core :refer [h-box v-box box gap line scroller border label title alert-box h-split] :refer-macros [handler-fn]]
[re-com.core :refer [h-box v-box box gap line scroller border label p title alert-box h-split] :refer-macros [handler-fn]]
[re-com.util :refer [get-element-by-id item-for-id]]
[re-demo.utils :refer [panel-title scroll-to-top]]
[re-demo.introduction :as introduction]
Expand All @@ -14,6 +14,7 @@
[re-demo.input-text :as input-text]
[re-demo.slider :as slider]
[re-demo.label :as label]
[re-demo.p :as p]
[re-demo.title :as title]
[re-demo.progress-bar :as progress-bar]
[re-demo.throbber :as throbber]
Expand Down Expand Up @@ -72,7 +73,7 @@
{:id :time :level :minor :label "Input Time" :panel input-time/panel}

{:id :selection :level :major :label "Selection"}
{:id :dropdown :level :minor :label "Dropdowns" :panel dropdowns/panel}
{:id :dropdown :level :minor :label "Dropdown" :panel dropdowns/panel}
{:id :lists :level :minor :label "Selection List" :panel selection-list/panel}
{:id :tabs :level :minor :label "Tabs" :panel tabs/panel}
{:id :typeahead :level :minor :label "Typeahead" :panel typeahead/panel}
Expand All @@ -85,6 +86,7 @@

{:id :typography :level :major :label "Typography"}
{:id :label :level :minor :label "Label" :panel label/panel}
{:id :p :level :minor :label "Paragraph (p)" :panel p/panel}
{:id :title :level :minor :label "Title" :panel title/panel} ;; TODO: field-label?
{:id :alert-box :level :minor :label "Alert Box" :panel alert-box/panel}
{:id :alert-list :level :minor :label "Alert List" :panel alert-list/panel}
Expand Down
2 changes: 1 addition & 1 deletion src/re_demo/label.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
:gap "10px"
:children [[title2 "Demo"]
[v-box
:children [[label :label "This is a label"]]]]]]]]])
:children [[label :label "This is a label."]]]]]]]]])


;; core holds a reference to panel, so need one level of indirection to get figwheel updates
Expand Down
64 changes: 64 additions & 0 deletions src/re_demo/p.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
(ns re-demo.p
(:require [re-com.core :refer [h-box v-box box gap line label p hyperlink-href]]
[re-demo.utils :refer [panel-title title2 args-table github-hyperlink status-text ]]))


(def arg-style {:style {:display "inline-block"
:font-weight "bold"
:min-width "140px"}})

(defn p-demo
[]
[v-box
:size "auto"
:gap "10px"
:children [[panel-title "[p ... ]"
"src/re_com/text.cljs"
"src/re_demo/p.cljs"]
[h-box
:gap "100px"
:children [[v-box
:gap "10px"
:width "450px"
:children [[title2 "Notes"]
[status-text "Stable"]
[p "Acts like an html [:p]." [:br] [:br]

"Creates a paragraph of body text, expected to have a font-szie of 14px or 15px, which should have limited width (450px)." [:br] [:br]

"Why limited text width? See " [hyperlink-href
:label "this article"
:href "http://baymard.com/blog/line-length-readability"
:target "blank"] "." [:br] [:br]

"The actual font-size is inherited." [:br] [:br]

"At 14px, 450px will yield between 69 and 73 chars." [:br]
"At 15px, 450px will yield about 66 to 70 chars." [:br]
"So we're at the upper end of the prefered 50 to 75 char range." [:br] [:br]

"If the first child is a map, it is interpreted as a map of attributes." [:br] [:br]

"Note: This section is contained within a single [p]."]

[title2 "Parameters"]
[p [:span.bold "[p optional-attr-map & components]"] [:br] [:br]

[:span arg-style "optional-attr-map"] "e.g. " [:code "{:style {:color \"red\"}}"] [:br] [:br]

[:span arg-style "components"] "one or more hiccup components."
]
]]
[v-box
:gap "10px"
:children [[title2 "Demo"]
[v-box
:children [[p "This is the simplest form of a p with no attribute map and only a single string. It wraps at 450px."]
[p {:style {:color "red"}} "This is a p with an optional attribute map. In this case, we're setting the color to red."]
[p {:style {:width "300px" :min-width "300px"}} "If you really feel the need to change with default width,
you can do it with the attribute map. 300px in this case."]]]]]]]]])

;; core holds a reference to panel, so need one level of indirection to get figwheel updates
(defn panel
[]
[p-demo])

0 comments on commit ebb07ba

Please sign in to comment.