coprl 0.1.0 → 3.0.0.beta.1

data/ROADMAP.md

@@ -0,0 +1,6 @@
+# Coprl::Presenters Roadmap
+
+This is the roadmap for the presenters. It outlines the development direction.
+
+## Web-Client
+  * Conversion to MDC for existing MDL components

data/Rakefile

@@ -1,12 +1,6 @@
-# frozen_string_literal: true
-
-require "bundler/gem_tasks"
-require "rspec/core/rake_task"
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
 
 RSpec::Core::RakeTask.new(:spec)
 
-require "rubocop/rake_task"
-
-RuboCop::RakeTask.new
-
-task default: %i[spec rubocop]
+task default: :spec

data/app/demo/components.pom

@@ -0,0 +1,19 @@
+require_relative 'helpers/indented_grid'
+
+Coprl::Presenters.define('components') do
+  helpers Demo::Helpers::IndentedGrid
+  attach 'top_nav'
+  attach 'component_drawer'
+  page_title 'Components'
+
+  indented_grid do
+    grid do
+      column 12 do
+        icon 'fa-hand-point-left', position: :left
+        subheading 'Select a component'
+      end
+    end
+  end
+  attach :code, file: __FILE__
+
+end

data/app/demo/components/avatars.pom

@@ -0,0 +1,40 @@
+Coprl::Presenters.define(:avatars) do
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Avatars'
+
+  grid do
+    column 1
+    column 10 do
+      body 'An avatar can contain an image or icon. Avatars can be used within a list line, the media section of a card, a content block or column.'
+
+      grid do
+        column 6 do
+          headline 'Types'
+          body '**With an Icon**'
+          avatar :thumb_up
+          body '**With an Image**'
+          avatar 'img/demo/grace-hopper-headshot.png'
+        end
+      end
+
+      grid do
+        column 6 do
+          headline 'Sizes'
+          body '**small**'
+          avatar :person, size: :small
+          body '**medium** (default)'
+          avatar 'img/demo/grace-hopper-headshot.png', size: :medium
+          body '**large**'
+          avatar :cake, size: :large
+          body '**x-large**'
+          avatar :golf_course, size: 'x-large'
+          body '**xx-large**'
+          avatar 'img/demo/grace-hopper-headshot.png', size: 'xx-large'
+        end
+      end
+
+    end
+  end
+
+end

data/app/demo/components/badges.pom

@@ -0,0 +1,26 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:badges) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Badges'
+  indented_grid do
+
+
+    headline 'Number'
+    badge 1, icon: :account_box
+
+    headline 'Icon'
+    badge '♥', icon: :account_box
+
+    headline 'Number'
+    badge 1, text: 'Inbox'
+
+    headline 'Icon'
+    badge '♥', text: 'Mood'
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/buttons.pom

@@ -0,0 +1,63 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:buttons) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Buttons'
+
+  indented_grid do
+
+    
+    # Raised buttons
+    headline 'Raised Button'
+    button 'Button', type: :raised
+
+    subheading 'Disabled'
+    button 'Button', type: :raised, disabled: true
+
+    subheading ' Accent colored'
+    button 'Button', type: :raised, color: :secondary
+
+    headline 'Flat button'
+    button 'Button'
+
+    subheading 'Disabled'
+    button 'Button', type: :flat, disabled: true
+
+    subheading 'Accent colored flat'
+    button 'Button', type: :flat, color: :secondary
+
+    subheading 'Aligned'
+    grid do
+      column 3 do
+        button 'Not Aligned'
+        button 'Right', position: :right
+        button 'Left', position: :left
+      end
+    end
+
+    # Icon Buttons
+    headline 'Icon button'
+    button icon: :mood
+    subheading 'Colored'
+    button icon: :mood, color: :primary
+    button icon: :mood, color: :secondary
+
+    subheading 'with text'
+    button "I'm happy", icon: :mood
+
+    headline 'Image button'
+    button type: :image do
+      image 'img/demo/grace-hopper-wide.png'
+    end
+
+    subheading 'with icon'
+    button type: :image do
+      image 'img/demo/grace-hopper-wide.png'
+      icon :link
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/cards.pom

@@ -0,0 +1,84 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:cards) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Cards'
+
+  indented_grid do
+    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
+
+    blank
+    headline 'Square', inline: true
+    switch checked: true do
+      tooltip 'Hide/Show Square Card'
+      event :click do
+        toggle_visibility 'square_card'
+      end
+    end
+    card id: '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', color: :secondary
+        button icon: :event, color: :secondary
+      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,103 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:chips) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Chips'
+
+  indented_grid do
+    chipset do
+      chip 'Chip 1'
+      chip 'Chip 1', color: :primary
+      chip 'Chip 2', color: :secondary
+      chip color: :hotpink do
+        text 'Chip 3', color: :white
+      end
+    end
+    subheading 'leading icon'
+    chipset do
+      chip 'Jane Smith', icon: :face
+    end
+
+    subheading 'trailing icon'
+    chipset do
+      chip 'Jane Smith' do
+        icon :more_vert, position: :right
+      end
+    end
+
+    subheading 'leading and trailing icon'
+    chipset do
+      chip 'Jane Smith' do
+        icon :face, position: :left
+        icon :more_vert, position: :right
+      end
+    end
+    heading 'Events'
+
+    chipset do
+      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
+    end
+
+    title 'Chips as input', id: :input_chips
+    body 'You can set the name and value attributes of a chip, they then can be posted.
+          An example of this can be found in the [search select](/search_select) pattern demo.'
+
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/content.pom

@@ -0,0 +1,111 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:content) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Content'
+
+  indented_grid do
+    headline 'Content blocks are wrappers for content and layout'
+    body %(They have many uses this demo will outline their attributes and their common use cases.)
+    blank
+    body %(See the [padding demo](#{presenters_path(:padding)}) for example on how padding works in content blocks.)
+    blank
+
+    title 'Content as a block element'
+    content do
+      text 'A content block with no attributes can turn an inline element into a block element', inline: true
+    end
+    text '..continuing text', inline: true
+    blank
+
+    title 'Attribute: `inline`'
+    content padding: :bottom3 do
+      text 'Inline controls the behavior of the content block within its context. It does not afffect the layout or flow' +
+               'of components within it. This provides a powerful method for building custom layouts'
+      content do
+        content inline: true, width: '500px', background_color: :cyan, padding: :full do
+          card do
+            text 'Section One (Chips in a block)'
+            chipset do
+              chip 'Chip 1'
+              chip 'Chip 1', color: :primary
+              chip 'Chip 2', color: :secondary
+              chip color: :hotpink do
+                text 'Chip 3', color: :white
+              end
+            end
+          end
+        end
+        content inline: false, width: '20%', position: [:top, :right] do
+          card do
+            text 'Section Two'
+          end
+        end
+        content inline: true, width: '20%' do
+          card do
+            text 'Section Three'
+          end
+        end
+      end
+    end
+    blank
+
+    title 'Attribute: `hidden`'
+    text 'A content block can be hidden and shown in response to page events.'
+    content id: :peekaboo, hidden: true do
+      title 'Peekabo'
+    end
+    button :show_hide do
+      event :click do
+        toggle_visibility :peekaboo
+      end
+    end
+    blank
+
+    title 'Attributes: `width` and `height`'
+    text 'A content block can set its width and height. Units can be pixels, rems or percentages.'
+    content width: '50%', height: '8rem' do
+      card do
+        title "I'm wider! and taller!"
+      end
+    end
+    blank
+
+    title 'Attributes: `position`'
+    text 'A content block can be positioned to be :top, :right, :bottom, :left or a combination of the container its inside'
+    content id: :parent, width: '50%', height: '8rem' do
+      content position: [:bottom, :right] do
+        card do
+          title "I'm on the bottom right"
+        end
+      end
+    end
+    blank
+
+    title 'Attributes: `text_align`'
+    text %(A content block can define how its typography will be alligned inside it.
+               Valid values: left|right|center|justify)
+    content width: '50%', height: '8rem' do
+      content text_align: :center do
+        title "I'm centered text", inline: 'true'
+        title ".. me 2", inline: 'true'
+      end
+    end
+    blank
+
+    title 'Attribute: `float`'
+    text 'A content block can float above the other content. This is useful for things like type ahead previews. Or hovering previews.'
+    content float: true do
+      card do
+        title "I'm floating!"
+      end
+    end
+    text "xxxxxxxxxxxxxxxx I'm text that is obscured by the floating card in the content block above me"
+    blank
+
+
+    attach :code, file: __FILE__
+  end
+end