coprl 0.1.0 → 3.0.0.beta.1

data/app/demo/components/expansion_panels.pom

@@ -0,0 +1,20 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:expansion_panels) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Expansion Panels'
+
+  indented_grid do
+    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,17 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:fabs_mini) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Float Action Button'
+
+  indented_grid do
+    # 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'
+
+Coprl::Presenters.define(:fabs) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Floating Action Button'
+
+  indented_grid do
+
+    headline 'FAB'
+    button icon: :add, type: :fab, color: :primary
+    
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/file_inputs.pom

@@ -0,0 +1,52 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:file_inputs) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'File Inputs'
+
+  indented_grid do
+
+    file_input name: :event_image, preview: [:preview_id, :filename] do
+      grid do
+        column 6 do
+          card do
+            image 'https://dev-doc-images.s3.amazonaws.com/grace-hopper.png', id: :preview_id, width: 512, height: 176
+            text id: :filename
+            text 'Drag and drop or click this button to upload'
+            button icon: :cloud_upload
+          end
+        end
+        column 6 do
+        end
+      end
+    end
+
+
+    title 'Simple'
+    file_input name: :upload
+
+    title 'With image preview'
+    file_input preview: :image_id, accept: 'image/png, image/jpeg, image/gif, image/svg+xml'
+    image 'img/demo/grace-hopper.png', height: 100, width: 100, id: :image_id
+
+    title 'With image button preview'
+    file_input preview: :button_id, accept: 'image/png, image/jpeg, image/gif, image/svg+xml'
+    button type: :image, id: :button_id do
+      image 'img/demo/grace-hopper-wide.png'
+    end
+    text 'Note: it binds to the button id, not the nested image id.'
+
+    title 'With text_area preview'
+    file_input preview: :text_area_id, accept: 'text/plain, text/markdown'
+    text_area id: :text_area_id
+
+    title 'With image and file_name preview'
+    file_input preview: [:text_area_id2, :filename_id], accept: 'text/plain, text/markdown'
+    subtitle2 id: :filename_id
+    text_area id: :text_area_id2
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/footers.pom

@@ -0,0 +1,36 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::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
+    headline 'Footers', level: 3
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/google_maps.pom

@@ -0,0 +1,22 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:maps) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Maps'
+
+  indented_grid do
+    subheading 'Static Maps'
+
+    address = '125 Park Street, Traverse City, MI'
+    google_map address: address, height: 300, width: 400  do
+      event :click do
+        loads "https://www.google.com/maps/place/#{address}"
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+
+end

data/app/demo/components/headers.pom

@@ -0,0 +1,101 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:static_header, namespace: :headers) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :component_drawer
+
+  indented_grid do
+    text 'The **static header** disappears when scrolling.'
+    text 'It is the default header type and will never cover page content.'
+    text 'You can expand the **Show Source** area below to see it in action.'
+  end
+
+  header title: 'Static Header', placement: :static do
+    nav do
+      item 'Headers' do
+        event :click do
+          loads '/headers'
+        end
+      end
+    end
+  end
+
+  indented_grid do
+    headline 'Headers'
+    
+    attach :code, file: __FILE__
+  end
+end
+
+Coprl::Presenters.define(:fixed_header, namespace: :headers) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :component_drawer
+
+  indented_grid do
+    text 'The **fixed header** remains fixed to the top of the viewport when scrolling.'
+    text 'A header can be made fixed via `placement: :fixed`, and can cover page content.'
+    text 'You can expand the **Show Source** area below to see it in action.'
+  end
+
+  header title: 'Fixed Header', placement: :fixed do
+    nav do
+      item 'Headers' do
+        event :click do
+          loads '/headers'
+        end
+      end
+    end
+  end
+
+  indented_grid do
+    headline 'Headers'
+    
+    attach :code, file: __FILE__
+  end
+end
+
+Coprl::Presenters.define(:headers) do
+  helpers Demo::Helpers::IndentedGrid
+  
+  attach :top_nav
+  attach :component_drawer
+
+  header 'Presenters Demo' do
+    nav 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
+
+  page_title 'Page about headers' do
+    icon :subtitles
+  end
+
+  indented_grid do
+    headline 'Headers'
+
+    text '* [Static](/headers/static_header): Hides when the viewport is scrolled'
+    text '* [Fixed](/headers/fixed_header): Remains fixed at the top of the viewport'
+  end
+
+  indented_grid do
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/hidden_fields.pom

@@ -0,0 +1,18 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:hidden_fields) do
+  helpers Demo::Helpers::IndentedGrid
+  
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Hidden'
+  indented_grid do
+    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,125 @@
+Coprl::Presenters.define(:icons) do
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Icons'
+
+  helpers do
+    def small_card(&block)
+      card height: '100px', width: '100%' do
+        yield_to(&block) # Special method that yields in the correct binding context
+      end
+    end
+  end
+
+  grid do
+    column 1
+    column 10 do
+      body 'An icon is commonly used on a menu, button, chip, list or card. They can be used standalone as well.'
+
+      grid do
+        column 12 do
+          headline 'Plain'
+          subtitle 'Material design icons'
+          body 'By default the icon name will be assumed to be [material design](https://material.io/icons/).'
+          icon :thumb_up
+        end
+      end
+
+      grid do
+        column 12 do
+          headline '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'
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Color'
+          body '**primary**'
+          icon :thumb_up, color: :primary
+          body '**secondary**'
+          icon :thumb_up, color: :secondary
+          body '**custom from palette**'
+          icon :thumb_up, color: :red
+          body '**custom**'
+          icon :thumb_up, color: :hotpink
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Size'
+          body 'You can specify the size of an icon'
+          subtitle '**x-small**'
+          icon :thumb_up, size: 'x-small'
+          subtitle '**small**'
+          icon :thumb_up, size: 'small'
+          subtitle '**medium** (default)'
+          icon :thumb_up, size: 'medium'
+          subtitle '**large**'
+          icon :thumb_up, size: 'large'
+          subtitle '**x-large**'
+          icon :thumb_up, size: 'x-large'
+          subtitle '**xx-large**'
+          icon :thumb_up, size: 'xx-large'
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Position'
+          body "Icon's can be positioned to the left, right, top, and bottom"
+          grid padding: false 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
+        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

data/app/demo/components/image_lists.pom

@@ -0,0 +1,100 @@
+Coprl::Presenters.define(:image_lists) do
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Image Lists'
+
+  grid do
+    column 1
+    column 8 do
+
+      grid do
+        column 12 do
+          headline 'Standard with 5 columns'
+          image_list do
+            image 'img/demo/dog.png', label: 'Dog'
+            image 'img/demo/dog.png', label: 'Dog'
+            image 'img/demo/dog.png', label: 'Cat'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png', label: 'I have an action' do
+              event :click do
+                snackbar 'Clicked a dog!'
+              end
+            end
+          end
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Text protection with 3 columns'
+          image_list list_type: 'text-protection', columns: 3 do
+            image 'img/demo/dog.png', label: 'Dog'
+            image 'img/demo/dog.png', label: 'Dog'
+            image 'img/demo/dog.png', label: 'Cat'
+          end
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Masonry with 4 columns'
+          image_list list_type: 'masonry', columns: 4 do
+            image 'img/demo/image_card.jpg', label: 'Person'
+            image 'img/demo/dog.png', label: 'Dog'
+            image 'img/demo/dog.png', label: 'Cat'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+          end
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Inherits image component border attributes'
+          image_list list_type: 'standard', columns: 4 do
+            image 'img/demo/image_card.jpg', label: 'No border'
+            image 'img/demo/dog.png', label: 'Round', border_radius: '50%'
+            image 'img/demo/image_card.jpg', label: 'Rounded Corners', border_radius: '5%'
+            image 'img/demo/dog.png', label: 'Thick Border', border: '10px'
+            image 'img/demo/image_card.jpg', label: 'Thin secondary border', border: '1px', border_color: :secondary
+          end
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Image attributes applied globally'
+          image_list list_type: 'standard', columns: 4, border_radius: '50%' do
+            image 'img/demo/image_card.jpg'
+            image 'img/demo/dog.png'
+            image 'img/demo/image_card.jpg'
+            image 'img/demo/dog.png'
+            image 'img/demo/image_card.jpg'
+          end
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Primary color border with spacing'
+          image_list list_type: 'standard', columns: 4, border: '2px', border_color: :primary, spacing: '10px' do
+            image 'img/demo/image_card.jpg'
+            image 'img/demo/dog.png'
+            image 'img/demo/image_card.jpg'
+            image 'img/demo/dog.png'
+            image 'img/demo/image_card.jpg'
+          end
+        end
+      end
+
+      attach :code, file: __FILE__
+
+    end
+  end
+end
+