arara 0.2.0

data/app/components/arara/icon_toggle_component.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag(:i, class: html_class) do %>
+  <%= title %>
+<% end %>

data/app/components/arara/icon_toggle_component.rb

@@ -0,0 +1,18 @@
+module Arara
+  class IconToggleComponent < ActionView::Component::Base
+
+    def initialize(title:, on: false)
+      @title = title
+      @on = on
+    end
+
+    private
+      attr_reader :title, :on
+
+      def html_class
+        classes = ['material-icons', 'mdc-icon-button__icon']
+        classes << 'mdc-icon-button__icon--on' if on
+        classes
+      end
+  end
+end

data/app/components/arara/material_icon_component.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag(html_tag, html_options) do %>
+  <%= content %>
+<% end %>

data/app/components/arara/material_icon_component.rb

@@ -0,0 +1,18 @@
+module Arara
+  class MaterialIconComponent < ActionView::Component::Base
+    include Arara::BaseComponent
+
+    def initialize(icon:, **kw)
+      super(tag: "i", **kw)
+      @icon = icon
+    end
+
+    def default_html_class
+      "material-icons"
+    end
+
+    def content
+      @icon
+    end
+  end
+end

data/app/components/arara/menu_component.html.erb

@@ -0,0 +1,5 @@
+<%= content_tag(html_tag, html_options) do %>
+  <ul class="mdc-list" role="menu" aria-hidden="true">
+    <%= content %>
+  </ul>
+<% end %>

data/app/components/arara/menu_component.rb

@@ -0,0 +1,19 @@
+class Arara::MenuComponent < ActionView::Component::Base
+  include Arara::BaseComponent
+
+  validates :content, presence: true
+
+  def initialize(**kw)
+    super(tag: "div", **kw)
+  end
+
+  def default_html_class
+    "mdc-menu mdc-menu-surface"
+  end
+
+  def html_options
+    opts = super
+    opts[:tabindex] = "-1"
+    opts
+  end
+end

data/app/components/arara/menu_divider_component.html.erb

@@ -0,0 +1 @@
+<%= tag(html_tag, html_options) %>

data/app/components/arara/menu_divider_component.rb

@@ -0,0 +1,19 @@
+module Arara
+  class MenuDividerComponent < ActionView::Component::Base
+    include Arara::BaseComponent
+
+    def initialize(**kw)
+      super(tag: "hr", **kw)
+    end
+
+    def default_html_class
+      "mdc-list-divider"
+    end
+
+    def html_options
+      opts = super
+      opts[:role] = "separator"
+      opts
+    end
+  end
+end

data/app/components/arara/menu_item_component.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag(html_tag, html_options) do %>
+  <%= content %>
+<% end %>

data/app/components/arara/menu_item_component.rb

@@ -0,0 +1,22 @@
+class Arara::MenuItemComponent < ActionView::Component::Base
+  include Arara::BaseComponent
+
+  def initialize(**kw)
+    super(tag: "li", **kw)
+  end
+
+  def default_html_class
+    "mdc-list-item"
+  end
+
+  def html_options
+    opts = super
+    opts[:role] = "menuitem"
+    opts[:tabindex] = "-1"
+    opts
+  end
+
+  def content
+    user_content
+  end
+end

data/app/components/arara/nav_bar_component.html.erb

@@ -0,0 +1,293 @@
+<style>
+.nav_bar__top {
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  top: 0;
+}
+
+.nav_bar__settings {
+  margin-left: 0px;
+}
+
+.nav_bar__utils_avatar {
+
+}
+
+.nav_bar__menu {
+  background-color: white;
+  padding-top: 15px;
+  position: absolute;
+  height: calc(100vh);
+  overflow-y: auto;
+  width: 280px;
+}
+
+.nav_bar__menu_item:not(.nav_bar__menu_item--active):hover {
+  background-color: #f1f3f4 !important;
+}
+
+/* closed on mobile */
+body.menu--toggler #nav_bar .nav_bar__menu {
+  visibility: hidden;
+  -webkit-transform: translateX(-280px);
+  transform: translateX(-280px);
+  -webkit-transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear .25s;
+  transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear .25s;
+}
+
+/* open on mobile */
+body:not(.menu--toggler) #nav_bar .nav_bar__menu {
+  visibility: visible;
+  -webkit-transform: translateX(0);
+  transform: translateX(0);
+  -webkit-transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear 0s;
+  transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear 0s;
+}
+
+.nav_bar__logo {
+  min-width: 150px;
+  width: 150px;
+  padding-right: 14px;
+}
+
+@media (max-width: 768px) {
+  body #nav_bar .nav_bar__menu {
+    box-shadow: 0 0 16px rgba(0,0,0,.28);
+    top: 0;
+    position: absolute;
+  }
+}
+@media (min-width: 640px) {
+  .nav_bar__logo {
+    min-width: 200px;
+    width: 200px;
+    padding-right: 14px;
+  }
+}
+
+@media (min-width: 768px) {
+  .nav_bar__logo {
+    min-width: 268px;
+    padding-right: 30px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .nav_bar__settings {
+    margin-left: 50px;
+  }
+
+  .nav_bar__utils {
+    padding-left: 30px;
+  }
+
+  .nav_bar__menu {
+    padding-top: 15px;
+    position: absolute;
+    height: calc(100vh - 64px);
+    overflow-y: auto;
+    width: 280px;
+  }
+
+  body.menu--toggler #nav_bar .nav_bar__menu {
+    visibility: visible;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    -webkit-transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear 0s;
+    transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear 0s;
+  }
+
+  body:not(.menu--toggler) #nav_bar .nav_bar__menu {
+    visibility: hidden;
+    -webkit-transform: translateX(-280px);
+    transform: translateX(-280px);
+    -webkit-transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear .25s;
+    transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear .25s;
+  }
+}
+
+@media (min-width: 1280px) {
+}
+
+.nav_bar__menu::-webkit-scrollbar-track {
+    border: 0 solid transparent;
+    background-clip: padding-box;
+    background-color: transparent;
+}
+
+.nav_bar__menu::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: transparent;
+    border: 0 solid transparent;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    min-height: 28px;
+}
+
+.nav_bar__menu::-webkit-scrollbar-corner {
+    background-color: transparent;
+}
+
+.nav_bar__menu::-webkit-scrollbar-button {
+    height: 0;
+    width: 0;
+}
+
+.nav_bar__menu::-webkit-scrollbar {
+    width: 10px;
+    height: 16px;
+}
+
+.nav_bar__menu::-webkit-scrollbar-button {
+    height: 0;
+    width: 0;
+}
+.nav_bar__menu::-webkit-scrollbar-corner {
+    background-color: transparent;
+}
+.nav_bar__menu:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(0,0,0,.2);
+    box-shadow: inset 1px 1px 0 rgba(0,0,0,.1), inset 0 -1px 0 rgba(0,0,0,.0666);
+}
+.nav_bar__menu::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: transparent;
+    border: 0 solid transparent;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    min-height: 28px;
+}
+.nav_bar__menu::-webkit-scrollbar-track {
+    border: 0 solid transparent;
+    background-clip: padding-box;
+    background-color: transparent;
+}
+</style>
+<div id="nav_bar">
+  <div class="nav_bar__top flex items-center h-16" style="padding: 8px;">
+    <div class="nav_bar__logo flex" style="">
+      <div class="ml-1" style="color: #5f6368;" data-controller="body-class-toggler" data-action="click->body-class-toggler#toggle" data-body-class-toggler-class="menu--toggler">
+        <%= render(Arara::IconButtonComponent) do %>
+          <%= render(Arara::MaterialIconComponent, icon: 'menu') %>
+        <% end %>
+      </div>
+      <div class="flex items-center">
+        <%= image_tag "arara_logo.png", class: "ml-1 mr-2 hidden md:block", alt: "", 'aria-hidden': "true", style: "width:40px;height:40px", 'data-iml': "11962.05000000191", 'data-atf': "true" %>
+        <span style="font-size: 22px; color: #5f6368;">Arara</span>
+      </div>
+    </div>
+    <div class="nav_bar__search flex flex-grow justify-end" style="height: 46px;">
+      <%# search desk %>
+      <div class="flex-grow hidden md:block" style="padding-left: 10px; padding-right: 30px; width: 100%; max-width: 100%;">
+        <div class="flex flex-grow items-center rounded-lg" style="height: 46px; max-width: 720px; background: #f1f3f4; color: #5f6368;">
+          <%= render(Arara::IconButtonComponent) do %>
+            <%= render(Arara::MaterialIconComponent, icon: 'search') %>
+          <% end %>
+          <div>
+            Search
+          </div>
+        </div>
+      </div>
+      <div class="nav_bar__settings flex" style="">
+        <%# search mobile %>
+        <div class="flex-grow flex items-center block md:hidden" style="color: #5f6368;">
+          <%= render(Arara::IconButtonComponent) do %>
+            <%= render(Arara::MaterialIconComponent, icon: 'search') %>
+          <% end %>
+        </div>
+        <div class="flex items-center justify-center" style="height: 48px; min-width: 48px; vertical-align: middle;">
+          <svg width="20" height="20" viewBox="0 0 24 24" style="color: #5f6368; fill: currentColor;"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"></path></svg>
+        </div>
+        <div class="flex items-center justify-center" style="height: 48px; min-width: 48px; vertical-align: middle;">
+          <svg width="20" height="20" viewBox="0 0 24 24" style="color: #5f6368; fill: currentColor;"><path d="M13.85 22.25h-3.7c-.74 0-1.36-.54-1.45-1.27l-.27-1.89c-.27-.14-.53-.29-.79-.46l-1.8.72c-.7.26-1.47-.03-1.81-.65L2.2 15.53c-.35-.66-.2-1.44.36-1.88l1.53-1.19c-.01-.15-.02-.3-.02-.46 0-.15.01-.31.02-.46l-1.52-1.19c-.59-.45-.74-1.26-.37-1.88l1.85-3.19c.34-.62 1.11-.9 1.79-.63l1.81.73c.26-.17.52-.32.78-.46l.27-1.91c.09-.7.71-1.25 1.44-1.25h3.7c.74 0 1.36.54 1.45 1.27l.27 1.89c.27.14.53.29.79.46l1.8-.72c.71-.26 1.48.03 1.82.65l1.84 3.18c.36.66.2 1.44-.36 1.88l-1.52 1.19c.01.15.02.3.02.46s-.01.31-.02.46l1.52 1.19c.56.45.72 1.23.37 1.86l-1.86 3.22c-.34.62-1.11.9-1.8.63l-1.8-.72c-.26.17-.52.32-.78.46l-.27 1.91c-.1.68-.72 1.22-1.46 1.22zm-3.23-2h2.76l.37-2.55.53-.22c.44-.18.88-.44 1.34-.78l.45-.34 2.38.96 1.38-2.4-2.03-1.58.07-.56c.03-.26.06-.51.06-.78s-.03-.53-.06-.78l-.07-.56 2.03-1.58-1.39-2.4-2.39.96-.45-.35c-.42-.32-.87-.58-1.33-.77l-.52-.22-.37-2.55h-2.76l-.37 2.55-.53.21c-.44.19-.88.44-1.34.79l-.45.33-2.38-.95-1.39 2.39 2.03 1.58-.07.56a7 7 0 0 0-.06.79c0 .26.02.53.06.78l.07.56-2.03 1.58 1.38 2.4 2.39-.96.45.35c.43.33.86.58 1.33.77l.53.22.38 2.55z"></path><circle cx="12" cy="12" r="3.5"></circle></svg>
+        </div>
+      </div>
+    </div>
+    <div class="nav_bar__utils flex" style="padding-right: 4px;">
+      <div class="flex items-center">
+        <div class="flex items-center justify-center hidden lg:flex" style="height: 48px; min-width: 48px; vertical-align: middle;">
+          <svg width="24" height="24" focusable="false" viewBox="0 0 24 24" style="color: #5f6368; fill: currentColor;"><path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg>
+        </div>
+        <div class="flex items-center justify-center" style="height: 40px; min-width: 40px; vertical-align: middle; padding: 4px;">
+          <img class="rounded-full overflow-hidden" style="height: 32px; width: 32px; vertical-align: middle;" src="https://www.gravatar.com/avatar/2df88e06bc946068934732ea24e3113e.jpg?s=32" alt="lovely avatar" class="object-cover object-center w-full h-full visible group-hover:hidden" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="nav_bar__menu">
+    <div style="width: 260px;">
+      <%= link_to pages_path("button") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "crop_5_4", title: "Button") %>
+      <% end %>
+      <%= link_to pages_path("card") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "insert_photo", title: "Card") %>
+      <% end %>
+      <%= link_to pages_path("checkbox") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "check_box", title: "Checkbox") %>
+      <% end %>
+      <%= link_to pages_path("chips") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "face", title: "Chips") %>
+      <% end %>
+      <%= link_to pages_path("data_table") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "list", title: "Data Table") %>
+      <% end %>
+      <%= link_to pages_path("dialog") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "chat_bubble_outline", title: "Dialog") %>
+      <% end %>
+      <%= link_to pages_path("elevation") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "flip_to_front", title: "Elevation") %>
+      <% end %>
+      <%= link_to pages_path("fab") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "add_circle_outline", title: "FAB") %>
+      <% end %>
+      <%= link_to pages_path("icon_button") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "crop_5_4", title: "Icon Button") %>
+      <% end %>
+      <%= link_to pages_path("image_list") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "collections", title: "Image List") %>
+      <% end %>
+      <%= link_to pages_path("layout_grid") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "table_chart", title: "Layout Grid") %>
+      <% end %>
+      <%= link_to pages_path("linear_progress_indicator") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "linear_scale", title: "Linear Progress Indicator") %>
+      <% end %>
+      <%= link_to pages_path("list") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "format_list_bulleted", title: "List") %>
+      <% end %>
+      <%= link_to pages_path("menu") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "menu", title: "Menu") %>
+      <% end %>
+      <%= link_to pages_path("radio_button") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "radio_button_checked", title: "Radio Button") %>
+      <% end %>
+      <%= link_to pages_path("ripple") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "dynamic_feed", title: "Ripple") %>
+      <% end %>
+      <%= link_to pages_path("select") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "view_stream", title: "Select") %>
+      <% end %>
+      <%= link_to pages_path("slider") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "remove", title: "Slider") %>
+      <% end %>
+      <%= link_to pages_path("snackbar") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "mode_comment", title: "Snackbar") %>
+      <% end %>
+      <%= link_to pages_path("switch") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "toggle_off", title: "Switch") %>
+      <% end %>
+      <%= link_to pages_path("tab_bar") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "tab", title: "Tab Bar") %>
+      <% end %>
+      <%= link_to pages_path("text_field") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "text_format", title: "Text Field") %>
+      <% end %>
+      <%= link_to pages_path("top_app_bar") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "web_asset", title: "Top App Bar") %>
+      <% end %>
+      <%= link_to pages_path("typography") do %>
+        <%= render(Arara::GoogleCalendar::MenuItemComponent, icon: "text_fields", title: "Typography") %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/arara/nav_bar_component.rb

@@ -0,0 +1,7 @@
+module Arara
+  class NavBarComponent < ActionView::Component::Base
+
+    def initialize(*)
+    end
+  end
+end

data/app/components/arara/radio_button_component.html.erb

@@ -0,0 +1,8 @@
+<%= content_tag(html_tag, html_options) do %>
+  <%= tag("input", html_input_options) %>
+  <div class="mdc-radio__background">
+    <div class="mdc-radio__outer-circle"></div>
+    <div class="mdc-radio__inner-circle"></div>
+  </div>
+  <div class="mdc-radio__ripple"></div>
+<% end %>

data/app/components/arara/radio_button_component.rb

@@ -0,0 +1,35 @@
+module Arara
+  class RadioButtonComponent < ActionView::Component::Base
+    include Arara::BaseComponent
+    
+    attr_reader :id, :name, :checked, :value, :type
+
+    def initialize(id:, name:, value:, checked: false, type: "radio", **kw)
+      @id = id
+      @name = name
+      @checked = checked
+      @value = value
+      @type = type
+
+      super(tag: "div", **kw)
+    end
+
+    def html_input_options
+      opts = {
+        class: "mdc-radio__native-control",
+        type: type,
+        id: id,
+        name: name,
+        value: value
+      }
+
+      opts[:checked] = "" if checked
+
+      opts
+    end
+
+    def default_html_class
+      "mdc-radio"
+    end
+  end
+end