-
Notifications
You must be signed in to change notification settings - Fork 257
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds in new search,list svg icons and blacklight_icons helper
This commit adds in several things: - Blacklight::Icons - a svg icon reader class - Blacklight::IconHelperBehavior - a helper that calls and wraps in a span, also caches the svg lookups - svg icons for search, and list. Both optimized for size reduction. Link to sketch document used to create svgs: https://drive.google.com/open?id=0BzWuWHFTTIPES0tXUnkwQXZNaFk
- Loading branch information
1 parent
ab3dbf9
commit 2df3ea1
Showing
12 changed files
with
163 additions
and
4 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
.blacklight-icons { | ||
display: inline-block; | ||
height: $font-size-root; | ||
width: $font-size-root; | ||
vertical-align: text-top; | ||
} | ||
|
||
.btn-primary { | ||
.blacklight-icons g { | ||
stroke: $btn-primary-color; | ||
} | ||
} | ||
|
||
.btn-secondary { | ||
.blacklight-icons g { | ||
stroke: $btn-secondary-color; | ||
} | ||
} | ||
|
||
.btn-info { | ||
.blacklight-icons g { | ||
stroke: $btn-info-color; | ||
} | ||
} | ||
|
||
.btn-success { | ||
.blacklight-icons g { | ||
stroke: $btn-success-color; | ||
} | ||
} | ||
|
||
.btn-warning { | ||
.blacklight-icons g { | ||
stroke: $btn-warning-color; | ||
} | ||
} | ||
|
||
.btn-danger { | ||
.blacklight-icons g { | ||
stroke: $btn-danger-color; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
## | ||
# Module to help generate icon helpers for SVG images | ||
module Blacklight::IconHelperBehavior | ||
## | ||
# Returns the raw SVG (String) for a Blacklight Icon located in | ||
# app/assets/images/blacklight/*.svg. Caches them so we don't have to look up | ||
# the svg everytime. | ||
# @param [String, Symbol] icon_name | ||
# @return [String] | ||
def blacklight_icon(icon_name, options = {}) | ||
Rails.cache.fetch("blacklight_icons/#{icon_name}") do | ||
icon = Blacklight::Icon.new(icon_name, options) | ||
content_tag(:span, icon.svg.html_safe, icon.options) | ||
end | ||
end | ||
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
module Blacklight | ||
class Icon | ||
attr_reader :icon_name | ||
## | ||
# @param [String, Symbol] icon_name | ||
# @param [Hash] options | ||
# @param [String] classes additional classes separated by a string | ||
def initialize(icon_name, classes: '') | ||
@icon_name = icon_name | ||
@classes = classes | ||
end | ||
|
||
## | ||
# Returns the raw source, but you could extend this to add additional attributes | ||
# @return [String] | ||
def svg | ||
file_source | ||
end | ||
|
||
## | ||
# @return [Hash] | ||
def options | ||
{ | ||
class: classes | ||
} | ||
end | ||
|
||
## | ||
# @return [String] | ||
def path | ||
"blacklight/#{icon_name}.svg" | ||
end | ||
|
||
## | ||
# @return [String] | ||
def file_source | ||
raise Blacklight::Exceptions::IconNotFound, "Could not find #{path}" if file.blank? | ||
file.source.force_encoding('UTF-8') | ||
end | ||
|
||
private | ||
|
||
def file | ||
Rails.application.assets.find_asset(path) | ||
end | ||
|
||
def classes | ||
" blacklight-icons #{@classes} ".strip | ||
end | ||
end | ||
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
RSpec.describe Blacklight::IconHelperBehavior do | ||
describe '#blacklight_icon' do | ||
it 'wraps the svg in a span with classes' do | ||
expect(helper.blacklight_icon(:search)) | ||
.to have_css 'span.blacklight-icons svg' | ||
end | ||
end | ||
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
RSpec.describe Blacklight::Icon do | ||
subject { described_class.new(:search, classes: 'awesome') } | ||
describe '#svg' do | ||
it 'returns a string' do | ||
expect(subject.svg).to be_an String | ||
end | ||
it 'returns raw svg' do | ||
expect(Capybara.string(subject.svg)) | ||
.to have_css 'svg title', text: 'Search' | ||
end | ||
end | ||
describe '#options' do | ||
it 'applies options classes and default class' do | ||
expect(subject.options[:class]).to eq 'blacklight-icons awesome' | ||
end | ||
end | ||
describe '#path' do | ||
it 'prepends blacklight and sufixes .svg' do | ||
expect(subject.path).to eq 'blacklight/search.svg' | ||
end | ||
end | ||
describe 'file_source' do | ||
context 'file is not available' do | ||
subject { described_class.new(:yolo) } | ||
it { expect { subject.file_source } | ||
.to raise_error(Blacklight::Exceptions::IconNotFound) } | ||
end | ||
context 'file is available' do | ||
it 'returns the filesource' do | ||
expect(subject.file_source).to include '<svg' | ||
end | ||
end | ||
end | ||
end |