voom-presenters 0.1.0

data/app/demo/components/cards.pom

@@ -0,0 +1,79 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:cards) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+
+  indented_grid do
+    display 'Cards'
+
+    headline 'Wide'
+    card width: '512px' do
+      media do
+        image 'img/demo/welcome_card.jpg', width: 512, height: 176
+        title 'Welcome', color: :white, position: :bottom
+        button icon: :share_icon, color: :white do
+          menu do
+            item 'Share with mom'
+          end
+        end
+      end
+      text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia... "
+
+      actions do
+        button 'Get Started', color: :primary
+      end
+    end
+
+    headline 'Square'
+    card width: '330px' do
+      media height: '200px', color: '#46B6AC' do
+        image 'img/demo/dog.png', position: [:bottom, :right]
+        title 'Update', color: :white, position: :bottom
+      end
+      text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis."
+
+      actions do
+        button 'View Updates', color: :primary
+      end
+    end
+
+    headline 'Image'
+    card width: '330px' do
+      media do
+        image 'img/demo/image_card.jpg', width: 330, height: 330
+        title 'image.jpg', position: :bottom, color: :white
+      end
+    end
+
+    headline 'Event'
+    card width: '330px' do
+      media height: '230px', color: :MidnightBlue do
+        title ['Featured event:',
+               "May 24, 2016",
+               "7-11pm"],
+              color: :white, position: :top
+      end
+      actions do
+        button 'Add to Calendar'
+        button icon: :event
+      end
+    end
+
+    #
+    # headline 'Example'
+    # card width: '21rem', height: '42rem' do
+    #   title ['Auckland Sky Tower',
+    #          'Auckland, New Zealand'] do
+    #     background 'https://www.askideas.com/media/43/The-Sky-Tower-In-Auckland-New-Zealand.jpg'
+    #   end
+    #   text ["The Sky Tower is an observation and telecommunications tower located in Auckland,",
+    #         "New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure",
+    #         "in the Southern Hemisphere."].join(' ')
+    # end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/chips.pom

@@ -0,0 +1,91 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:chips) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    heading 'Chips'
+
+    chip 'Chip 1'
+    chip 'Chip 1', color: :primary
+    chip 'Chip 2', color: :secondary
+    chip color: :hotpink do
+      text 'Chip 3', color: :white
+    end
+
+    subheading 'leading icon'
+    chip 'Jane Smith', icon: :face
+
+    subheading 'trailing icon'
+    chip 'Jane Smith' do
+      icon :more_vert, position: :right
+    end
+
+    subheading 'leading and trailing icon'
+    chip 'Jane Smith' do
+      icon :face, position: :left
+      icon :more_vert, position: :right
+    end
+    heading 'Events'
+
+    chip 'Jane Smith' do
+      icon :face, position: :left
+      icon :more_vert, position: :right
+      event :click do
+        snackbar 'chip clicked!'
+      end
+    end
+
+    chip do
+      text 'Jane Smith' do
+        event :click do
+          snackbar 'text clicked'
+        end
+      end
+      icon :face, position: :left
+      icon :more_vert, position: :right
+      event :click do
+        snackbar 'chip clicked!'
+      end
+    end
+
+    chip do
+      text 'Jane Smith' do
+        event :click do
+          snackbar 'text clicked'
+        end
+      end
+      icon :face, position: :left do
+        event :click do
+          snackbar 'left icon clicked'
+        end
+      end
+      icon :more_vert, position: :right
+      event :click do
+        snackbar 'chip clicked!'
+      end
+    end
+
+    chip do
+      text 'Jane Smith' do
+        event :click do
+          snackbar 'text clicked'
+        end
+      end
+      icon :face, position: :left do
+        event :click do
+          snackbar 'left icon clicked'
+        end
+      end
+      icon :more_vert, position: :right do
+        event :click do
+          snackbar 'right icon clicked'
+        end
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/dialogs.pom

@@ -0,0 +1,27 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:dialogs) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    display 'Dialogs'
+
+    button 'Show Dialog' do
+      event :click do
+        dialog :hold_on
+      end
+    end
+
+    dialog id: :hold_on do
+      title "MDL Dialog"
+      body 'This is an example of the Material Design Lite dialog component. Please use responsibly.'
+
+      button 'Disabled action', disabled: true
+      button 'Close'
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/drawers.pom

@@ -0,0 +1,34 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:drawers) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+
+  drawer do
+    menu do
+      item 'About (Drawer)' do
+        event :click do
+          loads :index
+        end
+      end
+
+      item 'Components (Drawer)' do
+        event :click do
+          loads :components
+        end
+      end
+
+      item 'Styles (Drawer)' do
+        event :click do
+          loads :styles
+        end
+      end
+    end
+  end
+
+  indented_grid do
+    display 'Drawers'
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/expansion_panels.pom

@@ -0,0 +1,21 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:expansion_panels) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  
+  indented_grid do
+    display 'Expansion Panels'
+
+    expansion_panel do
+      text 'Personal data'
+      secondary_text 'Type your name and age'
+      content do
+        body "The canvas is 'transparent' for screen reader users. HTML content included in the HTML5 canvas sub DOM is announced and navigable by screen reader users and is navigable by keyboard users."
+      end
+    end
+    
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/fabs-mini.pom

@@ -0,0 +1,18 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:fabs_mini) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    display 'Float Action Button'
+    
+    # Mini Floating action buttons
+    headline 'Mini FAB'
+    body '*Mini size: Only used to create visual continuity with other screen elements*'
+    button icon: :add, type: :fab, size: :small
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/fabs.pom

@@ -0,0 +1,16 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:fabs) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    display 'Floating Action Button'
+
+    headline 'FAB'
+    button icon: :add, type: :fab, color: :primary
+    
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/footers.pom

@@ -0,0 +1,36 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:footers) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+
+  footer type: :small do
+    menu 'Stuff' do
+      item 'About (Footer)' do
+        event :click do
+          loads :index
+        end
+      end
+
+      item 'Components (Footer)' do
+        event :click do
+          loads :components
+        end
+      end
+
+      item 'Styles (Footer)' do
+        event :click do
+          loads :styles
+        end
+      end
+    end
+  end
+
+  indented_grid do
+    display 'Footers'
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/forms.pom

@@ -0,0 +1,30 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:forms) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  grid do
+    column 1
+    column 4 do
+      card do
+        display 'Posts in Form'
+        body 'This demonstrates that a change event on **ANY** form input will send all the form inputs to the event action. '\
+             'This works with posts and replace actions'
+        form do
+          text_field name: :myfield do
+            label 'Data to post'
+          end
+          text_field name: :myfield2 do
+            label 'More Data to post'
+          end
+          event :change do
+            replaces  :context_list, :context_list
+          end
+        end
+        attach :context_list
+      end
+    end
+  end
+end

data/app/demo/components/headers.pom

@@ -0,0 +1,37 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:headers) do
+  helpers Demo::Helpers::IndentedGrid
+  
+  attach :top_nav
+  attach :component_drawer
+
+
+  header 'Presenters Demo' do
+    menu do
+      item 'About (Header)' do
+              event :click do
+                loads :index
+              end
+            end
+
+            item 'Components (Header)' do
+              event :click do
+                loads :components
+              end
+            end
+
+            item 'Styles (Header)' do
+              event :click do
+                loads :styles
+              end
+            end
+    end
+  end
+
+  indented_grid do
+    display 'Headers'
+    
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/hidden_fields.pom

@@ -0,0 +1,20 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:hidden_fields) do
+  helpers Demo::Helpers::IndentedGrid
+  
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    headline 'Hidden'
+
+    form do
+      hidden_field name: :idoit_id do
+        value 'do it!'
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/icons.pom

@@ -0,0 +1,94 @@
+Voom::Presenters.define(:icons) do
+  attach :top_nav
+  attach :component_drawer
+
+  helpers do
+    def small_card(&block)
+      card height: '100px', width: '100px' do
+        yield_to(&block) # Special method that yields in the correct binding context
+      end
+    end
+  end
+
+  grid do
+    column 1
+    column 10 do
+      display 'Icons'
+      body 'An icon is commonly used on a menu, button, chip, list or card. They can be used standalone as well.'
+
+      headline 'Plain'
+      title 'Material design icons'
+      body 'By default the icon name will be assumed to be [material design](https://material.io/icons/).'
+      icon :thumb_up
+
+      title 'Font awesome icons'
+      body "[Font awesome](https://fontawesome.com/icons?d=gallery) icons can also be used."\
+         'You provide the font awesome class.'
+      body 'For example: `fa-thumbs-up`:', level: 2
+      icon 'fa-thumbs-up'
+      body 'You can also optionally add the font awesome style prefix, if not provided it defaults to `fas` (solid).', level: 2
+      body 'For example: `far fa-thumbs-up`:', level: 2
+      icon 'far fa-thumbs-up'
+
+
+      headline 'Color'
+      title 'primary'
+      icon :thumb_up, color: :primary
+      title 'secondary'
+      icon :thumb_up, color: :secondary
+      title 'custom'
+      icon :thumb_up, color: :hotpink
+
+      headline 'Size'
+      body 'You can specify the size of an icon'
+      icon :thumb_up, color: :hotpink, size: '64px'
+
+      title 'Position'
+      body "'Icon's can be positioned to left, right, top, and bottom"
+
+      grid do
+        column 1 do
+          small_card do
+            icon :face, position: :left
+          end
+        end
+        column 1 do
+          small_card do
+            icon :face, position: :right
+          end
+        end
+        column 1 do
+          small_card do
+            icon :face, position: :top
+          end
+        end
+        column 1 do
+          small_card do
+            icon :face, position: :bottom
+          end
+        end
+        column 1 do
+          small_card do
+            icon :face, position: [:top, :right]
+          end
+        end
+        column 1 do
+          small_card do
+            icon :face, position: [:bottom, :right]
+          end
+        end
+      end
+
+      headline 'Events'
+      body 'Icons can be bound to events. For example the `click` event.'
+
+      icon :face, position: :left do
+        event :click do
+          snackbar 'icon clicked'
+        end
+      end
+
+      attach :code, file: __FILE__
+    end
+  end
+end