organism-ui 0.2.1

data/lib/ui/menu/show.erb

@@ -0,0 +1,4 @@
+<nav class="<%= style %>">
+  <%= header %>
+  <%= items %>
+</nav>

data/lib/ui/menu/submenu.rb

@@ -0,0 +1,55 @@
+module Ui
+  class Menu < Component
+    class Submenu < Item
+      private
+
+      def render_item
+        content_tag(
+          :ul,
+          render_group(subitems),
+          data: {
+            controller: 'dropdown',
+            "dropdown-hidden-class": "hidden",
+            "dropdown-expanded-value": false,
+            "dropdown-mode-value": "click"
+          }
+        )
+      end
+
+      def subitems
+        [
+          content_tag(
+            :div,
+            render_group([
+              cell(
+                Ui::Menu::Item,
+                model.first,
+                depth: depth
+              ),
+              content_tag(:i, nil, class: 'fas fa-caret-down')
+            ]),
+            class: 'ui-submenu__header',
+            data: {
+              action: "click->dropdown#toggle"
+            }
+          ),
+          content_tag(
+            :div,
+            cell(
+              Ui::Menu::Item,
+              collection: model.last,
+              depth: depth + 1
+            ),
+            data: {
+              "dropdown-target": "expandable"
+            }
+          )
+        ]
+      end
+
+      def style
+        'ui-submenu'
+      end
+    end
+  end
+end

data/lib/ui/notification.rb

@@ -0,0 +1,37 @@
+module Ui
+  class Notification < Component
+    include Actionable
+    include Stylable
+
+    def show
+      render
+    end
+
+    private
+
+    def content
+      model
+    end
+
+    def notification_icon
+      content_tag(:span, class: 'ui-notification__icon') do
+        icon(options[:icon])
+      end if options[:icon]
+    end
+
+    def close_notification_link
+      content_tag(
+        :span,
+        icon('fas fa-times'),
+        class: 'ui-notification__close',
+        data: {
+          action: 'click->notification#toggle'
+        }
+      )
+    end
+
+    def component_style
+      "ui-notification"
+    end
+  end
+end

data/lib/ui/notification/show.erb

@@ -0,0 +1,19 @@
+<article
+  class="<%= style %>"
+  data-controller="notification"
+  data-notification-hidden-class="hidden">
+
+  <%= notification_icon %>
+
+  <section class="ui-notification__content">
+    <%= content %>
+
+    <% if has_actions? %>
+      <nav class="ui-notification__actions">
+        <%= actions %>
+      </nav>
+    <% end %>
+
+    <%= close_notification_link %>
+  </section>
+</article>

data/lib/ui/page_header.rb

@@ -0,0 +1,29 @@
+module Ui
+  class PageHeader < Component
+    include Ui::Actionable
+
+    def show(&block)
+      render(&block)
+    end
+
+    private
+
+    def title
+      content_tag(:h1, model)
+    end
+
+    def subheading
+      content_tag(:h2, options[:subheading]) if options[:subheading]
+    end
+
+    def back_button
+      link_to options[:back] do
+        content_tag(:i, nil, class: 'fas fa-arrow-left')
+      end if options[:back]
+    end
+
+    def breadcrumbs
+      options.fetch(:breadcrumbs, Proc.new{}).call
+    end
+  end
+end

data/lib/ui/page_header/show.erb

@@ -0,0 +1,18 @@
+<article class="ui-page-header">
+  <%= breadcrumbs %>
+
+  <header>
+    <%= back_button %>
+
+    <hgroup>
+      <%= title %>
+      <%= subheading %>
+    </hgroup>
+
+    <nav>
+      <%= actions %>
+    </nav>
+  </header>
+
+  <%= yield if block_given? %>
+</article>

data/lib/ui/pagination.rb

@@ -0,0 +1,105 @@
+module Ui
+  class Pagination < Component
+    class Page < Value
+      attribute :position, Types::Strict::Integer
+      attribute :path, Types::Strict::String
+      attribute :current, Types::Strict::Bool
+    end
+
+    class PageGroup < Value
+      attribute :pages, Types::Array.of(Page)
+      attribute :position, Types::Strict::Integer
+    end
+
+    def show
+      render
+    end
+
+    private
+
+    def previous_page_link
+      cell(
+        Ui::Buttons::Secondary,
+        nil,
+        path: previous_page_path,
+        disabled: previous_page.nil?,
+        icon: 'fas fa-chevron-left'
+      )
+    end
+
+    def previous_page_path
+      previous_page.try(:path)
+    end
+
+    def next_page_link
+      cell(
+        Ui::Buttons::Secondary,
+        nil,
+        path: next_page_path,
+        disabled: next_page.nil?,
+        icon: 'fas fa-chevron-right'
+      )
+    end
+
+    def next_page_path
+      next_page.try(:path)
+    end
+
+    def page_links
+      page_groups.inject('') do |content, page_group|
+        content += cell(
+          Ui::Pagination::Window,
+          page_group,
+          page_groups: page_groups
+        ).()
+      end
+    end
+
+    def page_groups
+      pages.each_slice(window_size).to_a.map.with_index do |slice, index|
+        PageGroup.new(
+          pages: slice,
+          position: index + 1
+        )
+      end
+    end
+
+    def pages
+      model.map.with_index do |page, index|
+        Page.new(
+          position: index + 1,
+          path: page,
+          current: page == current_path
+        )
+      end
+    end
+
+    def current_page
+      pages.find(&:current)
+    end
+
+    def next_page
+      pages.find do |page|
+        page.position == current_page.position + 1
+      end
+    end
+
+    def previous_page
+      pages.find do |page|
+        page.position == current_page.position - 1
+      end
+    end
+
+    def current_path
+      options[:current_path]
+    end
+
+    def window_size
+      options.fetch(:window_size, 5)
+    end
+
+    def disabled(content)
+      content_tag(:button, content, disabled: true)
+    end
+  end
+end

data/lib/ui/pagination/page_link.rb

@@ -0,0 +1,24 @@
+module Ui
+  class Pagination < Component
+    class PageLink < Component
+      property :position
+      property :current
+      property :path
+
+      def show
+        cell(
+          Ui::Buttons::Secondary,
+          position,
+          path: path,
+          style: style
+        )
+      end
+
+      def style
+        current ?
+          'ui-pagination__page--current' :
+          'ui-pagination__page'
+      end
+    end
+  end
+end

data/lib/ui/pagination/show.erb

@@ -0,0 +1,11 @@
+<nav
+     data-controller="pagination"
+     data-pagination-window-position-value="1"
+     data-pagination-hidden-class="hidden"
+     class="ui-pagination"
+     aria-label="pager"
+     role="navigation">
+  <%= previous_page_link %>
+  <%= page_links %>
+  <%= next_page_link %>
+</nav>

data/lib/ui/pagination/window.rb

@@ -0,0 +1,85 @@
+module Ui
+  class Pagination < Component
+    class Window < Component
+      property :pages
+      property :position
+
+      def show
+        content_tag(
+          :ul,
+          render_group([
+            previous_window,
+            page_links.html_safe,
+            next_window
+          ]),
+          class: 'ui-pagination__window',
+          data: {
+            position: position,
+            "pagination-target": "windows"
+          }
+        )
+      end
+
+      private
+
+      def next_window
+        unless last_window?
+          content_tag(:li, next_window_button)
+        end
+      end
+
+      def next_window_button
+        cell(
+          Ui::Buttons::Secondary,
+          nil,
+          icon: 'fas fa-ellipsis-h',
+          data: {
+            action: "click->pagination#next"
+          }
+        )
+      end
+
+      def previous_window
+        unless first_window?
+          content_tag(:li, previous_window_button)
+        end
+      end
+
+      def previous_window_button
+        cell(
+          Ui::Buttons::Secondary,
+          nil,
+          icon: 'fas fa-ellipsis-h',
+          data: {
+            action: "click->pagination#previous"
+          }
+        )
+      end
+
+
+      def page_links
+        pages.inject('') do |content, page|
+          content += content_tag(
+            :li,
+            cell(
+              Ui::Pagination::PageLink,
+              page
+            ).()
+          )
+        end
+      end
+
+      def last_window?
+        position == page_groups.size
+      end
+
+      def first_window?
+        position == 1
+      end
+
+      def page_groups
+        options[:page_groups]
+      end
+    end
+  end
+end

data/lib/ui/step.rb

@@ -0,0 +1,57 @@
+module Ui
+  class Step < Component
+    include Stylable
+
+    property :status
+    property :position
+    property :last?
+    property :current?
+
+    def show
+      render
+    end
+
+    private
+
+    def title
+      content_tag(:p, model.title, class: 'ui-step__title')
+    end
+
+    def subtitle
+      content_tag(:p, model.subtitle, class: 'ui-step__subtitle')
+    end
+
+    def description
+      content_tag(:p, model.description, class: 'ui-step__description')
+    end
+
+    def step_icon
+      if model.icon.blank?
+        case status
+        when 'finished'
+          icon('fas fa-check')
+        when 'processing'
+          position
+        when 'error'
+          icon('fas fa-times')
+        when 'waiting'
+          position
+        end
+      else
+        icon(model.icon)
+      end
+    end
+
+    def render_icon
+      content_tag(:span, step_icon, class: 'ui-step__icon')
+    end
+
+    def component_style
+      ['ui-step'].tap do |styles|
+        styles << 'ui-step--last' if last?
+        styles << 'ui-step--current' if current?
+        styles << "ui-step--#{status.downcase}"
+      end.join(' ')
+    end
+  end
+end