gitlab-org--gitlab-foss/app/views/help/ui.html.haml

- page_title "UI Development Kit", "Help"
- lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum nisi sapien, non consequat lectus aliquam ultrices. Suspendisse sodales est euismod nunc condimentum, a consectetur diam ornare."

.gitlab-ui-dev-kit
  %h1 GitLab UI development kit
  %p.light
    Use page inspector in your browser to check element classes and structure
    of examples below.
  %hr
  %ul
    %li
      = link_to 'Blocks', '#blocks'
    %li
      = link_to 'Lists', '#lists'
    %li
      = link_to 'Tables', '#tables'
    %li
      = link_to 'Nav', '#nav'
    %li
      = link_to 'Buttons', '#buttons'
    %li
      = link_to 'Dropdowns', '#dropdowns'
    %li
      = link_to 'Panels', '#panels'
    %li
      = link_to 'Alerts', '#alerts'
    %li
      = link_to 'Forms', '#forms'
    %li
      = link_to 'Files', '#file'
    %li
      = link_to 'Markdown', '#markdown'

  %h2#blocks Blocks

  .lead
    Content block separated with botton border
    %code .content-block

  .example
    .content-block
      %h4 Normal block inside content
      = lorem

    .content-block
      %h4 Second block
      = lorem

  .lead
    Gray content block with side padding using
    %code .row-content-block

  .example
    .row-content-block
      %h4 Normal block inside content
      = lorem

    .row-content-block.second-block
      %h4 Second block
      = lorem


  .lead
    Cover block for profile page with avatar, name and description
    %code .cover-block
  .example
    .cover-block
      .avatar-holder
        = image_tag avatar_icon_for_email('admin@example.com', 90), class: "avatar s90", alt: ''
      .cover-title
        John Smith

      .cover-desc
        = lorem

      .cover-controls
        = link_to '#', class: 'btn btn-default' do
          = icon('pencil')
         
        = link_to '#', class: 'btn btn-default' do
          = icon('rss')

  %h2#lists Lists

  .lead
    Simple list using
    %code .content-list

  .example
    %ul.content-list
      %li
        One item
      %li
        One item
      %li
        One item

  .lead
    List with avatar, title and description using
    %code .content-list

  .example
    %ul.content-list
      %li
        = image_tag 'no_avatar.png', class: 'avatar s40'
        .title Title
        .description Description
      %li
        = image_tag 'no_avatar.png', class: 'avatar s40'
        .title Title
        .description Description
      %li
        = image_tag 'no_avatar.png', class: 'avatar s40'
        .title Title
        .description Description

  .lead
    List with hover effect
    %code .hover-list
  .example
    %ul.hover-list
      %li
        One item
      %li
        One item
      %li
        One item

  .lead
    List inside panel
  .example
    .card
      .card-header Your list
      %ul.content-list
        %li
          One item
        %li
          One item
        %li
          One item

  %h2#tables Tables

  .example
    %table.table
      %thead
        %tr
          %th #
          %th First Name
          %th Last Name
          %th Username
      %tbody
        %tr
          %td 1
          %td Mark
          %td Otto
          %td @mdo
        %tr
          %td 2
          %td Jacob
          %td Thornton
          %td @fat
        %tr
          %td 3
          %td Larry
          %td the Bird
          %td @twitter

  %h2#navs Navigation

  .lead
    Holder for top page navigation. Includes navigation, search field, sorting and button
    %code .top-area

  .example
    .top-area
      %ul.nav-links.nav.nav-tabs
        %li.active
          %a Open
        %li
          %a Closed
      .nav-controls
        = text_field_tag 'sample', nil, class: 'form-control'
        .dropdown
          %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
            %span Sort by name
            = icon('chevron-down')
          %ul.dropdown-menu
            %li
              = link_to 'Sort by date', '#'

        = link_to 'New issue', '#', class: 'btn btn-new btn-inverted'

  .lead
    Only nav links without button and search
    %code .nav-links
  .example
    %ul.nav-links
      %li.active
        %a Open
      %li
        %a Closed


  %h2#buttons Buttons

  .example
    %button.btn.btn-default{ :type => "button" } Secondary
    %button.btn.btn-primary{ :type => "button" } Primary
    %button.btn.btn-success{ :type => "button" } Success
    %button.btn.btn-info{ :type => "button" } Info
    %button.btn.btn-warning{ :type => "button" } Warning
    %button.btn.btn-danger{ :type => "button" } Danger
    %button.btn.btn-link{ :type => "button" } Link

  %h2#dropdowns Dropdowns

  .example
    .clearfix
      .dropdown.inline.float-left
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
          Dropdown
          = icon('chevron-down')
        %ul.dropdown-menu
          %li
            %a{ href: "#" }
              Dropdown option
      .dropdown.inline.float-right
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
          Dropdown
          = icon('chevron-down')
        %ul.dropdown-menu.dropdown-menu-right
          %li
            %a{ href: "#" }
              Dropdown option
  .example
    %div
      .dropdown.inline
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
          Dropdown
          = icon('chevron-down')
        %ul.dropdown-menu.dropdown-menu-selectable
          %li
            %a.is-active{ href: "#" }
              Dropdown option
  .example
    %div
      .dropdown.inline
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
          Dropdown
          = icon('chevron-down')
        .dropdown-menu.dropdown-select.dropdown-menu-selectable
          .dropdown-title
            %span Dropdown title
            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
              = icon('times')
          .dropdown-input
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
            = icon('search')
          .dropdown-content
            %ul
              %li
                %a.is-active{ href: "#" }
                  Dropdown option
              %li
                %a{ href: "#" }
                  Dropdown option
              %li.divider
              %li
                %a{ href: "#" }
                  Dropdown option
              %li
                %a{ href: "#" }
                  Dropdown option
              %li
                %a{ href: "#" }
                  Dropdown option
              %li
                %a{ href: "#" }
                  Dropdown option
              %li
                %a{ href: "#" }
                  Dropdown option
          .dropdown-footer
            %strong Tip:
            If an author is not a member of this project, you can still filter by his name while using the search field.
      .dropdown.inline
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
          Dropdown loading
          = icon('chevron-down')
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
          .dropdown-title
            %span Dropdown title
            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
              = icon('times')
          .dropdown-input
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
            = icon('search')
          .dropdown-content
            %ul
              %li
                %a.is-active{ href: "#" }
                  Dropdown option
              %li
                %a{ href: "#" }
                  Dropdown option
              %li.divider
              %li
                %a{ href: "#" }
                  Dropdown option
              %li
                %a{ href: "#" }
                  Dropdown option
              %li
                %a{ href: "#" }
                  Dropdown option
              %li
                %a{ href: "#" }
                  Dropdown option
              %li
                %a{ href: "#" }
                  Dropdown option
          .dropdown-footer
            %strong Tip:
            If an author is not a member of this project, you can still filter by his name while using the search field.
          .dropdown-loading
            = icon('spinner spin')

  .example
    %div
      .dropdown.inline
        %button.dropdown-menu-toggle{ type: 'button', data: {toggle: 'dropdown' } }
          Dropdown user
          = icon('chevron-down')
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
          .dropdown-title
            %span Dropdown title
            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
              = icon('times')
          .dropdown-input
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
            = icon('search')
          .dropdown-content
            %ul
              %li
                %a.dropdown-menu-user-link.is-active{ href: "#" }
                  = link_to_member_avatar(@user, size: 30)
                  %strong.dropdown-menu-user-full-name
                    = @user.name
                  .dropdown-menu-user-username
                    = @user.to_reference

  .example
    %div
      .dropdown.inline
        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
          Dropdown page 2
          = icon('chevron-down')
        .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
          .dropdown-page-one
            .dropdown-title
              %button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
                = icon('arrow-left')
              %span Dropdown title
              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
                = icon('times')
            .dropdown-input
              %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
              = icon('search')
            .dropdown-content
              %ul
                %li
                  %a.dropdown-menu-user-link.is-active{ href: "#" }
                    = link_to_member_avatar(@user, size: 30)
                    %strong.dropdown-menu-user-full-name
                      = @user.name
                    .dropdown-menu-user-username
                      = @user.to_reference
          .dropdown-page-two
            .dropdown-title
              %button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
                = icon('arrow-left')
              %span Create label
              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
                = icon('times')
            .dropdown-input
              %input.dropdown-input-field{ type: "search", placeholder: "Name new label" }
            .dropdown-content
              %button.btn.btn-primary
                Create

  .example
    %div
      .dropdown.inline
        %button#js-project-dropdown.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
          Projects
          = icon('chevron-down')
        .dropdown-menu.dropdown-select.dropdown-menu-selectable
          .dropdown-title
            %span Go to project
            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
              = icon('times')
          .dropdown-input
            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
            = icon('search')
          .dropdown-content
          .dropdown-loading
            = icon('spinner spin')

  .example
    %div
      = dropdown_tag("Projects", options: { title: "Go to project", filter: true, placeholder: "Filter projects" })

  %h2#panels Panels

  .row
    .col-md-6
      .card.bg-success
        .card-header Success
        .card-body
          = lorem
      .card.bg-primary
        .card-header Primary
        .card-body
          = lorem
      .card.bg-info
        .card-header Info
        .card-body
          = lorem
    .col-md-6
      .card.bg-warning
        .card-header Warning
        .card-body
          = lorem
      .card.bg-danger
        .card-header Danger
        .card-body
          = lorem

  %h2#alerts Alerts

  .row
    .col-md-6
      .alert.alert-success
        = lorem
      .alert.alert-info
        = lorem
    .col-md-6
      .alert.alert-warning
        = lorem
      .alert.alert-danger
        = lorem

  %h2#forms Forms

  .lead
    Horizontal form when label rendered inline with input
    %code form.horizontal-form

  .example
    %form
      .form-group.row
        %label.col-sm-2.col-form-label{ :for => "inputEmail3" } Email
        .col-sm-10
          %input#inputEmail3.form-control{ :placeholder => "Email", :type => "email" }/
      .form-group.row
        %label.col-sm-2.col-form-label{ :for => "inputPassword3" } Password
        .col-sm-10
          %input#inputPassword3.form-control{ :placeholder => "Password", :type => "password" }/
      .form-group.row
        .offset-sm-2.col-sm-10
          .form-check
            %input.form-check-input{ :type => "checkbox" }/
            %label.form-check-label
              Remember me
      .form-group.row
        .offset-sm-2.col-sm-10
          %button.btn.btn-default{ :type => "submit" } Sign in

  .lead
    Form when label rendered above input
    %code form

  .example
    %form
      .form-group
        %label{ :for => "exampleInputEmail1" } Email address
        %input#exampleInputEmail1.form-control{ :placeholder => "Enter email", :type => "email" }/
      .form-group
        %label{ :for => "exampleInputPassword1" } Password
        %input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/
      .form-check
        %input.form-check-input{ :type => "checkbox" }/
        %label.form-check-label
          Remember me
      %button.btn.btn-default{ :type => "submit" } Sign in

  %h2#file File
  %h4
    %code .file-holder

  - blob = Snippet.new(content: "Wow\nSuch\nFile").blob
  .example
    .file-holder
      .js-file-title.file-title
        Awesome file
        .file-actions
          .btn-group
            %a.btn Edit
            %a.btn.btn-danger Remove
      .file-contenta.code
        = render 'shared/file_highlight', blob: blob

  %h2#markdown Markdown
  %h4
    %code .md or .wiki and others

  Markdown rendering has a bit different css and presented in next UI elements:

  %ul
    %li comment
    %li issue, merge request description
    %li wiki page
    %li help page

  You can check how markdown rendered at #{link_to 'Markdown help page', help_page_path("user/markdown")}.