# Zuora Connect UI ## Installation Add these lines to your application's Gemfile: ```ruby gem 'zuora_connect_ui' # Peek gem 'peek' gem 'peek-git' gem 'peek-pg' gem 'peek-performance_bar' gem 'peek-redis' gem 'peek-resque' ``` And then execute: ```shell $ bundle ``` Or install it yourself as: ```shell $ gem install zuora_connect_ui ``` ## Usage ### HTML Imports Add to `` in `layouts/application.html.erb` ```erb <%= stylesheet_link_tag "application", :media => "all"%> <%= javascript_include_tag "application" %> <%= zuo_include_tag %> <%= yield :head %> ``` If these lines are in the ``, **they are no longer necesary** as of version 0.2.9 ```html ``` ### SCSS Imports Add to `app/assets/stylesheets/application.scss` ```scss //************ Peek ************ @import "peek"; @import "peek/views/performance_bar"; @import "peek/vendor/tipsy"; @import "zuora_connect_ui"; ``` Any style you create for your app should be imported below this ### Javascript Imports Add to `app/assets/javascripts/application.js` ```javascript //************** Peek **************** //= require peek //= require peek/views/performance_bar // //= require zuora_connect_ui ``` Any scripts you create for your app should be imported below this ### Peek Add the peek initializer in `config/initializers/peek.rb`: ```ruby # List of Peek Views shown in the container require 'peek' Peek.into Peek::Views::Git if Rails.env.development? Peek.into Peek::Views::PerformanceBar Peek.into Peek::Views::PG Peek.into Peek::Views::Redis Peek.into Peek::Views::Resque Peek.into Peek::Views::Connect if Gem.loaded_specs.has_key?('zuora_connect') Peek::Railtie.configure do config.peek.adapter = :redis end ``` and the peek route in `config/routes.rb` under the `app_admin` constraint ```ruby constraints app_admin do ... mount Peek::Railtie => '/peek' end ``` ## Layout ### Admin Button Partial: `partials/admin_menu` ```erb ``` Additional links can be added by putting `
  • ` tags in the block If you added Peek, you can enable it by passing `peek_bar: true` to the partial ### Row Actions Dropdown Menu Partial: `partials/row_actions' ```erb <%= render 'shared/row_actions' do %> <%= link_to 'Show', page, remote: true, data: { toggle: 'modal', target: '#z_hub_modal' } %> <%= link_to 'Edit', edit_page_path(page), remote: true, data: { toggle: 'modal', target: '#z_hub_modal' } %> <%= link_to 'Delete', page, :remote => true, method: :delete, data: { confirm: 'Are you sure?' } %> <% end %> ``` ### Table #### Classes | Class | Description | | ---------------- | --------------------------------------------- | | `.zuo-table` | Base table class | | `.zuo-table__th` | Header cell class (for `th`-like container) | | `.zuo-table__tr` | Content cell class (for `td`-like container) | #### Example ```erb <% @notifications.each do |n|%> <% end %>
    Description Status Priority Action
    <%= n.metadata["description"]%> <%= n.status %> <%= n.priority %>
    ``` ### Datatable See [datatable.md](doc/datatable.md) ## Components Component's labels must come directly after their input, and have `for` html attribute corresponding to their input. Using a `.zuo-form-group` is recommended but not required. ### Textbox ```erb <%= f.text_field :name, class: 'zuo-textbox' %> <%= f.label :name, class: 'zuo-floating-label' %> ``` ### Text Area ```erb <%= f.text_area :description, class: 'zuo-textbox' %> <%= f.label :description, class: 'zuo-floating-label' %> ``` ### Floating Label See [Textbox](#textbox) for code example Label must come directly after input, and have `zuo-floating-label` class ### Basic Support Label ```erb
    <%= f.text_field :name, class: 'zuo-textbox' %> <%= f.label :name, class: 'zuo-floating-label' %>
    ``` ### Error Support Label ```erb
    <%= f.text_field :name, class: 'zuo-textbox' %> <%= f.label :name, class: 'zuo-floating-label' %> <% if @workflow.errors[:name].present? %> <% end %>
    ``` ### Buttons Use anjuna buttons, as documented [here](https://git.zias.io/pages/ui-foundation/anjuna/core/js/anj-button) `data-*` attributes placed on the `anj-button` will be passed to the `button`/`a` inside it, so you can still use `data-remote="true"` ```erb <%# submit button %> <%= f.object.new_record? ? "Create" : "Update" %> <%# button %> Edit Campaign <%# js button %> Start Logging ... <% content_for :scripts do %> $('#my-app-button').on('click' () => alert('Logging Started')); <% end %> ``` **Only if you **REALLY** can't get the anjuna buttons to work should you can use the following, keeping in mind that it will not be supported for as long:** ```erb <%= link_to "Cancel", "#", class: "zuo-btn secondary", data: {dismiss: "modal"} %> <%= f.submit f.object.new_record? ? "Create" : "Update", class: "zuo-btn primary" %> ``` `
    `, `