organism-ui 0.2.14 → 0.2.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93f273285d90a758e4f76dc2edf5c9c1024868f65750f86d9a4d21a0be03e2b3
-  data.tar.gz: 8024fe03394aaad8b44904b09a5dd6c38f9552e42b01d9c2fdcf44a9352433c8
+  metadata.gz: f27836996619577882186d159e7ca50cc282dddcfd8090832f901965cce8828c
+  data.tar.gz: abb2ae83b2f31627e6df9ea53b2f5fbe9a240ea1a7ec1f6e089c97ae265789a8
 SHA512:
-  metadata.gz: 25f414159a5bbfd726a9a7da8baeab7d2082b8294e897c4e80e870149a9872e3faa0172f65024e1513b3fb3a74e1b244a8a6ceef344e9a69f661728ab31c48be
-  data.tar.gz: 7ae976e18d782c1b025bd1ad24f64b6e4cddc43ca0b735a6cae3a11e57bfbd1d92e5d4e8cf5b4cb8394e14f2e006c8b949f2dfdfa3000e5f9d7e1101bf2832e8
+  metadata.gz: 5a4e588f073083ac3d9dc3cb735567c4e5fd7d9b899de3c33e040c0af948e68700ceba48d76d893f7ad2e2ab6ba60df8b6514749aa16d14821c5e6f787acf916
+  data.tar.gz: ae0d450685712bc9d35669299de10c8ba0f132ec56ff03865d78004d1b7917105ffc59a041a4d70768f84c1cb4731cf96bfdb9c6c294be73b5a12bd7950e2fdd

data/app/views/ui/style_guide/show.html.erb

@@ -677,7 +677,7 @@
             renderable: ->(item) {
               content_tag(
                 :div,
-                [
+                render_group([
                   content_tag(:p, item),
                   content_tag(
                     :nav,
@@ -688,7 +688,7 @@
                       size: :small
                     ).call(:edit)
                   )
-                ].join(' ').html_safe,
+                ]),
                 class: 'flex flex-row justify-between items-center p-4'
               )
             }
@@ -727,6 +727,32 @@
         </div>
       </section>
 
+      <section class="style-guide__example" id="type">
+        <header>
+          <h2>Vertical</h2>
+        </header>
+
+        <div class="space-y-4">
+          <%= cell(
+            Ui::Table,
+            [
+              "Data 1",
+              "Data 2",
+              "Data 3",
+            ],
+            columns: [
+              ["", ->(data) { data } ],
+              ["Column 2", ->(data) { "Column 2 data" } ],
+              ["Column 3", ->(data) { "Column 3 data" } ],
+              ["Actions", ->(data) { cell(Ui::Buttons::Tertiary, 'More')} ],
+            ],
+            header: 'My title',
+            orientation: 'vertical',
+            style: 'my-style'
+          ).() %>
+        </div>
+      </section>
+
       <section class="style-guide__example" id="type">
         <header>
           <h2>Selectable</h2>
@@ -748,6 +774,8 @@
             ],
             header: 'Multi select',
             style: 'my-style',
+            row_renderer: ->(row, columns) {
+            },
             features: {
               selectable: {
                 multiple: true

data/lib/ui/actionable.rb

@@ -1,21 +1,27 @@
 module Ui
   module Actionable
+    Actions = Types::Array.default([].freeze).of(Types::Callable)
+
     def actions
       content_tag(:nav, class: 'ui-actions', role: 'navigation') do
         render_group(
-          options.fetch(:actions, Array.new).map do |action|
+          Actions[actions_list].map do |action|
             action.call(model)
           end
         )
       end
     end
 
+    def actions_list
+      options.fetch(:actions, Array.new) || Array.new
+    end
+
     def actions_length
       options.fetch(:actions, Array.new).size
     end
 
     def has_actions?
-      options.fetch(:actions, []).any?
+      actions_list.any?
     end
   end
 end

data/lib/ui/breadcrumbs.rb

@@ -13,11 +13,13 @@ module Ui
     end
 
     def breadcrumb_links
-      breadcrumbs.map.with_index do |crumb, index|
-        [item_renderer.call(crumb)].tap do |renderable|
-          renderable.unshift(delimiter) unless index == 0
-        end
-      end.flatten.join(' ').html_safe
+      render_group(
+        breadcrumbs.map.with_index do |crumb, index|
+          [item_renderer.call(crumb)].tap do |renderable|
+            renderable.unshift(delimiter) unless index == 0
+          end
+        end.flatten
+      )
     end
 
     def delimiter

data/lib/ui/breadcrumbs/breadcrumb.rb

@@ -9,9 +9,7 @@ module Ui
       def show
         content_tag(
           :span,
-          link_to(path) do
-            title.html_safe
-          end,
+          link_to(path, title),
           class: style
         )
       end

data/lib/ui/buttons/base.rb

@@ -1,6 +1,8 @@
 module Ui
   module Buttons
     class Base < Component
+      include Stylable
+
       def show
         display(
           text_with_icon(icon),
@@ -38,6 +40,22 @@ module Ui
         )
       end
 
+      def phone
+        display(
+          text_with_icon(phone_icon),
+          "tel:#{path}",
+          button_options
+        )
+      end
+
+      def email
+        mail_to(
+          path,
+          text_with_icon(email_icon),
+          button_options
+        )
+      end
+
       private
 
       def display(*args)
@@ -46,7 +64,7 @@ module Ui
             :button,
             args.first,
             disabled: true,
-            class: button_classes
+            class: style
           )
         else
           if path == '#'
@@ -69,13 +87,12 @@ module Ui
         'fas fa-trash'
       end
 
-      def button_classes
-        [
-          "button",
-          style,
-          size,
-          options.fetch(:style, '')
-        ].compact.join(' ')
+      def phone_icon
+        'fas fa-phone'
+      end
+
+      def email_icon
+        'fas fa-envelope'
       end
 
       def size
@@ -92,25 +109,40 @@ module Ui
       end
 
       def text_with_icon(icon)
-        if icon
-          content_tag(
-            :span,
-            render_group([
-              content_tag(:i, nil, class: icon),
-              text
-            ].compact)
-          )
-        else
-          text
+        order = [text].tap do |array|
+          case icon_position
+          when 'end'
+            array.push(display_icon(icon))
+          else
+            array.unshift(display_icon(icon))
+          end
         end
+
+        render_group(order)
+      end
+
+      def display_icon(icon)
+        content_tag(:i, nil, class: icon) unless icon.blank?
       end
 
-      def style
-        ''
+      def component_style
+        [
+          'button',
+          size,
+        ].join(' ')
       end
 
       def icon
-        options[:icon]
+        icon_options.fetch(:style, '')
+      end
+
+      def icon_position
+        icon_options.fetch(:position, 'start')
+      end
+
+      def icon_options
+        opts = options.fetch(:icon, {})
+        opts.is_a?(Hash) ? opts : { style: opts }
       end
 
       def path
@@ -135,7 +167,7 @@ module Ui
 
       def button_options
         {
-          class: button_classes,
+          class: style,
           disabled: disabled?,
           data: data,
           method: method

data/lib/ui/buttons/primary.rb

@@ -3,8 +3,11 @@ module Ui
     class Primary < Base
       private
 
-      def style
-        'button--primary'
+      def component_style
+        [
+          'button--primary',
+          super
+        ].flatten
       end
     end
   end

data/lib/ui/buttons/secondary.rb

@@ -3,8 +3,11 @@ module Ui
     class Secondary < Base
       private
 
-      def style
-        'button--secondary'
+      def component_style
+        [
+          'button--secondary',
+          super
+        ].flatten
       end
     end
   end

data/lib/ui/buttons/tertiary.rb

@@ -3,8 +3,11 @@ module Ui
     class Tertiary < Base
       private
 
-      def style
-        'button--tertiary'
+      def component_style
+        [
+          'button--tertiary',
+          super
+        ].flatten
       end
     end
   end

data/lib/ui/collapse.rb

@@ -13,7 +13,8 @@ module Ui
     def panels
       cell(
         Ui::Collapse::Panel,
-        collection: model
+        collection: model,
+        actions: options[:actions]
       ).()
     end
 

data/lib/ui/collapse/panel.rb

@@ -1,6 +1,8 @@
 module Ui
   class Collapse < Component
     class Panel < Component
+      include Actionable
+
       def show
         render
       end
@@ -18,11 +20,11 @@ module Ui
       end
 
       def header
-        content_tag(:p, display(model[0]))
+        display(model[0])
       end
 
       def content
-        content_tag(:p, display(model[1]))
+        display(model[1])
       end
 
       def display(item)

data/lib/ui/collapse/panel/show.erb

@@ -1,16 +1,17 @@
 <article 
   class="ui-collapse-panel" 
   data-controller="collapsable"
-  data-collapsable-collapsed-value="false"
+  data-collapsable-collapsed-value="true"
   data-collapsable-hidden-class="hidden"
   data-collapsable-collapsed-class="ui-collapsed">
 
-  <header data-action="click->collapsable#toggle">
+  <header data-action="click->collapsable#toggle" class="ui-collapse-panel__header">
     <%= collapse_icon %>
     <%= header %>
+    <%= actions %>
   </header>
 
-  <div data-collapsable-target="content" class="ui-collapse-panel__content">
+  <section data-collapsable-target="content" class="ui-collapse-panel__content">
     <%= content %>
-  </div>
+  </section>
 </article>

data/lib/ui/component.rb

@@ -9,7 +9,12 @@ module Ui
     self.view_paths << VIEWPATH
 
     def capture(*args)
-      yield(*args).html_safe
+      content = yield(*args)
+      if content.is_a?(String)
+        content.html_safe
+      else
+        content
+      end
     end
 
     def render_group(items)

data/lib/ui/descriptive_list.rb

@@ -25,14 +25,14 @@ module Ui
       content_tag(
         :header,
         render_group([
-          content_tag(:h2, title),
-          content_tag(:nav, actions)
+          options[:header],
+          actions
         ])
-      ) if title || has_actions?
+      ) if display_header?
     end
 
-    def title
-      options[:title]
+    def display_header?
+      options[:header] || has_actions?
     end
 
     def items

data/lib/ui/descriptive_list/item.rb

@@ -6,7 +6,7 @@ module Ui
           :div,
           render_group([
             content_tag(:dt, title),
-            content_tag(:dd, value.html_safe)
+            content_tag(:dd, value)
           ]),
           class: 'ui-descriptive-list__item'
         )

data/lib/ui/menu/item.rb

@@ -24,7 +24,7 @@ module Ui
       private
 
       def render_item
-        model.html_safe
+        model
       end
 
       def depth

data/lib/ui/pagination/window.rb

@@ -9,7 +9,7 @@ module Ui
           :ul,
           render_group([
             previous_window,
-            page_links.html_safe,
+            page_links,
             next_window
           ]),
           class: 'ui-pagination__window',
@@ -58,15 +58,17 @@ module Ui
 
 
       def page_links
-        pages.inject('') do |content, page|
-          content += content_tag(
-            :li,
-            cell(
-              Ui::Pagination::PageLink,
-              page
-            ).()
-          )
-        end
+        render_group(
+          pages.map do |page|
+            content += content_tag(
+              :li,
+              cell(
+                Ui::Pagination::PageLink,
+                page
+              ).()
+            )
+          end
+        )
       end
 
       def last_window?

data/lib/ui/table.rb

@@ -1,10 +1,21 @@
 require "ui/table/header"
 require "ui/table/row"
+require "ui/table/vertical"
 
 module Ui
   class Table < Component
     include Actionable
     include Stylable
+    include ::Cell::Builder
+
+    builds do |model, options|
+      case options.fetch(:orientation, 'horizontal')
+      when 'vertical'
+        Ui::Table::Vertical
+      else
+        self
+      end
+    end
 
     def show
       render
@@ -22,6 +33,20 @@ module Ui
     end
 
     def table_headers
+      custom_header_renderer.is_a?(Proc) ?
+        custom_table_headers :
+        default_table_headers
+    end
+
+    def custom_table_headers
+      render_group(
+        columns.map do |column|
+          custom_header_renderer.call(column)
+        end
+      )
+    end
+
+    def default_table_headers
       content_tag(:tr) do
         cell(
           Ui::Table::Header,
@@ -31,31 +56,53 @@ module Ui
     end
 
     def table_rows
-      if rows.any?
-        cell(
-          Ui::Table::Row,
-          collection: rows,
-          columns: columns
-        )
+      if model.any?
+        custom_row_renderer.is_a?(Proc) ?
+          custom_table_rows :
+          default_table_rows
       else
         render_empty
       end
     end
 
+    def custom_table_rows
+      render_group(
+        model.map do |row|
+          custom_row_renderer.call(row, columns)
+        end
+      )
+    end
+
+    def default_table_rows
+      cell(
+        Ui::Table::Row,
+        collection: model,
+        columns: columns
+      ).()
+    end
+
     def table_data_attributes
       {
         controller: table_controllers,
-        "selectable-selected-value": "[]",
-        "selectable-type-value": multi_select? ? 'many' : 'one'
-      }
+      }.tap do |hash|
+        if selectable?
+          hash["selectable-selected-value"] = "[]"
+          hash["selectable-type-value"] = multi_select? ? 'many' : 'one'
+        end
+      end
     end
 
     def table_body_data_attributes
       {
         controller: table_body_controllers,
-        "sortable-update-url-value": sortable_options.fetch(:update_url, '#'),
-        "sortable-input-name-value": sortable_options.fetch(:input_name, "object[position]")
-      }
+      }.tap do |hash|
+        if sortable?
+          hash["sortable-update-url-value"] =
+            sortable_options.fetch(:update_url, '#')
+          hash["sortable-input-name-value"] =
+            sortable_options.fetch(:input_name, "object[position]")
+        end
+      end
     end
 
     def table_controllers
@@ -87,10 +134,6 @@ module Ui
       ) if options[:footer]
     end
 
-    def component_style
-      "ui-table"
-    end
-
     def columns
       @columns ||= options.fetch(:columns, Array.new).tap do |columns|
         columns.unshift(selectable_column) if selectable?
@@ -140,8 +183,12 @@ module Ui
       options.fetch(:features, Hash.new)
     end
 
-    def rows
-      model
+    def custom_row_renderer
+      options.fetch(:row_renderer, nil)
+    end
+
+    def custom_header_renderer
+      options.fetch(:header_renderer, nil)
     end
 
     def render_empty
@@ -158,5 +205,9 @@ module Ui
         colspan: columns.size
       )
     end
+
+    def component_style
+      "ui-table ui-table--horizontal"
+    end
   end
 end

data/lib/ui/table/header.rb

@@ -1,20 +1,30 @@
 module Ui
   class Table < Component
     class Header < Component
+      include Stylable
+
       def show
-        content_tag(:th, title)
+        content_tag(:th, title, class: style)
       end
 
       private
 
+      def component_style
+        'ui-table__header'
+      end
+
       def title
         case
-        when model[0].is_a?(Proc)
-          model[0].call
+        when column_title.is_a?(Proc)
+          column_title.call
         else
-          model[0]
+          column_title
         end
       end
+
+      def column_title
+        model[0]
+      end
     end
   end
 end

data/lib/ui/table/row.rb

@@ -1,12 +1,18 @@
 module Ui
   class Table < Component
     class Row < Component
+      include Stylable
+
       def show
-        content_tag(:tr, render_group(table_data))
+        content_tag(:tr, render_group(table_data), class: style)
       end
 
       private
 
+      def component_style
+        'ui-table__row'
+      end
+
       def table_data
         columns.map do |column|
           content_tag(:td, apply(column))

data/lib/ui/table/vertical.rb

@@ -0,0 +1,45 @@
+module Ui
+  class Table < Component
+    class Vertical < Table
+
+      private
+
+      def table_rows
+        if model.any?
+          cell(
+            row_renderer,
+            collection: columns[1..-1],
+            data: model
+          )
+        else
+          render_empty
+        end
+      end
+
+      def table_headers
+        content_tag(:tr) do
+          render_group([
+            content_tag(:th, columns[0].try(:first)),
+            cell(
+              header_renderer,
+              collection: model,
+              column: columns[0],
+            )
+          ])
+        end
+      end
+
+      def row_renderer
+        Ui::Table::Vertical::Row
+      end
+
+      def header_renderer
+        Ui::Table::Vertical::Header
+      end
+
+      def component_style
+        "ui-table ui-table--vertical"
+      end
+    end
+  end
+end

data/lib/ui/table/vertical/header.rb

@@ -0,0 +1,26 @@
+module Ui
+  class Table < Component
+    class Vertical < Table
+      class Header < Ui::Table::Header
+        def show
+          content_tag(:th, title)
+        end
+
+        private
+
+        def title
+          case
+          when column[1].is_a?(Proc)
+            column[1].call(model)
+          else
+            model.to_s
+          end
+        end
+
+        def column
+          options[:column]
+        end
+      end
+    end
+  end
+end

data/lib/ui/table/vertical/row.rb

@@ -0,0 +1,34 @@
+module Ui
+  class Table < Component
+    class Vertical < Table
+      class Row < Ui::Table::Row
+
+        private
+
+        def table_data
+          data.map do |item|
+            content_tag(:td, apply(item))
+          end.tap do |array|
+            array.unshift(content_tag(:th, column_title))
+          end
+        end
+
+        def apply(item)
+          column[1].call(item)
+        end
+
+        def column
+          model
+        end
+
+        def column_title
+          column[0]
+        end
+
+        def data
+          options.fetch(:data, Array.new)
+        end
+      end
+    end
+  end
+end

data/lib/ui/types.rb

@@ -3,5 +3,7 @@ require 'dry-types'
 module Ui
   module Types
     include Dry.Types()
+
+    Callable = Types.Interface(:call)
   end
 end

data/lib/ui/version.rb

@@ -1,3 +1,3 @@
 module Ui
-  VERSION = '0.2.14'
+  VERSION = '0.2.15'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: organism-ui
 version: !ruby/object:Gem::Version
-  version: 0.2.14
+  version: 0.2.15
 platform: ruby
 authors:
 - Nolan Tait
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-20 00:00:00.000000000 Z
+date: 2021-03-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -245,6 +245,9 @@ files:
 - lib/ui/table/select_all.rb
 - lib/ui/table/show.erb
 - lib/ui/table/sort.rb
+- lib/ui/table/vertical.rb
+- lib/ui/table/vertical/header.rb
+- lib/ui/table/vertical/row.rb
 - lib/ui/tooltip.rb
 - lib/ui/tooltip/show.erb
 - lib/ui/types.rb