primer_view_components 0.0.43 → 0.0.47
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +220 -3
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/components/primer/alpha/button_marketing.rb +70 -0
- data/app/components/primer/avatar_stack_component.rb +9 -3
- data/app/components/primer/base_component.rb +52 -23
- data/app/components/primer/beta/auto_complete.rb +159 -0
- data/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
- data/app/components/primer/{auto_complete → beta/auto_complete}/auto_complete.html.erb +1 -0
- data/app/components/primer/beta/auto_complete/auto_complete.js +1 -0
- data/app/components/primer/{auto_complete → beta/auto_complete}/auto_complete.ts +0 -0
- data/app/components/primer/beta/auto_complete/item.rb +44 -0
- data/app/components/primer/beta/avatar.rb +77 -0
- data/app/components/primer/beta/text.rb +27 -0
- data/app/components/primer/blankslate_component.rb +2 -1
- data/app/components/primer/border_box_component.rb +3 -0
- data/app/components/primer/button_component.rb +3 -2
- data/app/components/primer/clipboard_copy.rb +25 -7
- data/app/components/primer/component.rb +4 -0
- data/app/components/primer/details_component.rb +18 -3
- data/app/components/primer/dropdown.d.ts +1 -0
- data/app/components/primer/{dropdown_component.html.erb → dropdown.html.erb} +2 -1
- data/app/components/primer/dropdown.js +1 -0
- data/app/components/primer/dropdown.rb +149 -0
- data/app/components/primer/dropdown.ts +1 -0
- data/app/components/primer/dropdown/menu.d.ts +1 -0
- data/app/components/primer/dropdown/menu.html.erb +25 -0
- data/app/components/primer/dropdown/menu.js +1 -0
- data/app/components/primer/dropdown/menu.rb +99 -0
- data/app/components/primer/dropdown/menu.ts +1 -0
- data/app/components/primer/heading_component.rb +1 -1
- data/app/components/primer/icon_button.rb +1 -1
- data/app/components/primer/image_crop.rb +1 -1
- data/app/components/primer/markdown.rb +9 -9
- data/app/components/primer/menu_component.rb +7 -3
- data/app/components/primer/navigation/tab_component.rb +6 -6
- data/app/components/primer/octicon_component.rb +3 -2
- data/app/components/primer/popover_component.rb +6 -3
- data/app/components/primer/primer.d.ts +2 -1
- data/app/components/primer/primer.js +2 -1
- data/app/components/primer/primer.ts +2 -1
- data/app/components/primer/spinner_component.rb +2 -0
- data/app/components/primer/tab_nav_component.rb +5 -3
- data/app/components/primer/timeline_item_component.rb +2 -2
- data/app/components/primer/tooltip.rb +1 -1
- data/app/components/primer/truncate.rb +5 -0
- data/app/components/primer/underline_nav_component.rb +10 -4
- data/{app/lib → lib}/primer/classify.rb +16 -33
- data/{app/lib → lib}/primer/classify/cache.rb +6 -40
- data/{app/lib → lib}/primer/classify/flex.rb +0 -0
- data/{app/lib → lib}/primer/classify/functional_background_colors.rb +2 -0
- data/{app/lib → lib}/primer/classify/functional_border_colors.rb +2 -0
- data/{app/lib → lib}/primer/classify/functional_colors.rb +0 -0
- data/{app/lib → lib}/primer/classify/functional_text_colors.rb +2 -0
- data/{app/lib → lib}/primer/classify/grid.rb +0 -0
- data/lib/primer/classify/utilities.rb +148 -0
- data/lib/primer/classify/utilities.yml +1271 -0
- data/lib/primer/view_components.rb +1 -0
- data/lib/primer/view_components/linters/argument_mappers/button.rb +82 -0
- data/lib/primer/view_components/linters/argument_mappers/conversion_error.rb +10 -0
- data/lib/primer/view_components/linters/argument_mappers/system_arguments.rb +47 -0
- data/lib/primer/view_components/linters/button_component_migration_counter.rb +24 -1
- data/lib/primer/view_components/linters/flash_component_migration_counter.rb +1 -1
- data/lib/primer/view_components/linters/helpers.rb +137 -18
- data/lib/primer/view_components/statuses.rb +14 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +179 -110
- data/lib/tasks/utilities.rake +105 -0
- data/lib/yard/docs_helper.rb +13 -3
- data/static/statuses.json +9 -7
- metadata +41 -27
- data/app/components/primer/auto_complete.rb +0 -100
- data/app/components/primer/auto_complete/item.rb +0 -42
- data/app/components/primer/avatar_component.rb +0 -75
- data/app/components/primer/button_marketing_component.rb +0 -68
- data/app/components/primer/dropdown/menu_component.html.erb +0 -12
- data/app/components/primer/dropdown/menu_component.rb +0 -46
- data/app/components/primer/dropdown_component.rb +0 -73
- data/app/components/primer/text_component.rb +0 -25
- data/app/lib/primer/classify/spacing.rb +0 -63
@@ -1,42 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
class AutoComplete
|
5
|
-
# Use `AutoCompleteItem` to list results of an auto-completed search.
|
6
|
-
class Item < Primer::Component
|
7
|
-
status :beta
|
8
|
-
|
9
|
-
# @example Default
|
10
|
-
# <%= render(Primer::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
|
11
|
-
# Selected
|
12
|
-
# <% end %>
|
13
|
-
# <%= render(Primer::AutoComplete::Item.new(value: "value")) do |c| %>
|
14
|
-
# Not selected
|
15
|
-
# <% end %>
|
16
|
-
#
|
17
|
-
# @param value [String] Value of the item.
|
18
|
-
# @param selected [Boolean] Whether the item is selected.
|
19
|
-
# @param disabled [Boolean] Whether the item is disabled.
|
20
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
21
|
-
def initialize(value:, selected: false, disabled: false, **system_arguments)
|
22
|
-
@system_arguments = system_arguments
|
23
|
-
@system_arguments[:tag] = :li
|
24
|
-
@system_arguments[:role] = :option
|
25
|
-
@system_arguments[:"data-autocomplete-value"] = value
|
26
|
-
|
27
|
-
@system_arguments[:"aria-selected"] = true if selected
|
28
|
-
@system_arguments[:"aria-disabled"] = true if disabled
|
29
|
-
|
30
|
-
@system_arguments[:classes] = class_names(
|
31
|
-
"autocomplete-item",
|
32
|
-
system_arguments[:classes],
|
33
|
-
"disabled" => disabled
|
34
|
-
)
|
35
|
-
end
|
36
|
-
|
37
|
-
def call
|
38
|
-
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
39
|
-
end
|
40
|
-
end
|
41
|
-
end
|
42
|
-
end
|
@@ -1,75 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# `Avatar` can be used to represent users and organizations on GitHub.
|
5
|
-
#
|
6
|
-
# - Use the default round avatar for users, and the `square` argument
|
7
|
-
# for organizations or any other non-human avatars.
|
8
|
-
# - By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.
|
9
|
-
# - Set `size` to update the height and width of the `Avatar` in pixels.
|
10
|
-
# - To stack multiple avatars together, use <%= link_to_component(Primer::AvatarStackComponent) %>.
|
11
|
-
#
|
12
|
-
# @accessibility
|
13
|
-
# Images should have text alternatives that describe the information or function represented.
|
14
|
-
# If the avatar functions as a link, provide alt text that helps convey the function. For instance,
|
15
|
-
# if `Avatar` is a link to a user profile, the alt attribute should be `@kittenuser profile`
|
16
|
-
# rather than `@kittenuser`.
|
17
|
-
# [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
|
18
|
-
class AvatarComponent < Primer::Component
|
19
|
-
status :beta
|
20
|
-
|
21
|
-
SMALL_THRESHOLD = 24
|
22
|
-
|
23
|
-
# @example Default
|
24
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
|
25
|
-
#
|
26
|
-
# @example Square
|
27
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", square: true)) %>
|
28
|
-
#
|
29
|
-
# @example Link
|
30
|
-
# <%= render(Primer::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
|
31
|
-
#
|
32
|
-
# @example With size
|
33
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
|
34
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
|
35
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
|
36
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 28)) %>
|
37
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
|
38
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 36)) %>
|
39
|
-
#
|
40
|
-
# @param src [String] The source url of the avatar image.
|
41
|
-
# @param alt [String] Passed through to alt on img tag.
|
42
|
-
# @param size [Integer] Adds the avatar-small class if less than 24.
|
43
|
-
# @param square [Boolean] Used to create a square avatar.
|
44
|
-
# @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
|
45
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
46
|
-
def initialize(src:, alt:, size: 20, square: false, href: nil, **system_arguments)
|
47
|
-
@href = href
|
48
|
-
@system_arguments = system_arguments
|
49
|
-
@system_arguments[:tag] = :img
|
50
|
-
@system_arguments[:src] = src
|
51
|
-
@system_arguments[:alt] = alt
|
52
|
-
@system_arguments[:size] = size
|
53
|
-
@system_arguments[:height] = size
|
54
|
-
@system_arguments[:width] = size
|
55
|
-
|
56
|
-
@system_arguments[:classes] = class_names(
|
57
|
-
system_arguments[:classes],
|
58
|
-
"avatar",
|
59
|
-
"avatar-small" => size < SMALL_THRESHOLD,
|
60
|
-
"circle" => !square,
|
61
|
-
"lh-0" => href # Addresses an overflow issue with linked avatars
|
62
|
-
)
|
63
|
-
end
|
64
|
-
|
65
|
-
def call
|
66
|
-
if @href
|
67
|
-
render(Primer::LinkComponent.new(href: @href, classes: @system_arguments[:classes])) do
|
68
|
-
render(Primer::BaseComponent.new(**@system_arguments.except(:classes))) { content }
|
69
|
-
end
|
70
|
-
else
|
71
|
-
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
72
|
-
end
|
73
|
-
end
|
74
|
-
end
|
75
|
-
end
|
@@ -1,68 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# Use `ButtonMarketing` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
|
5
|
-
class ButtonMarketingComponent < Primer::Component
|
6
|
-
DEFAULT_SCHEME = :default
|
7
|
-
SCHEME_MAPPINGS = {
|
8
|
-
DEFAULT_SCHEME => "",
|
9
|
-
:primary => "btn-primary-mktg",
|
10
|
-
:outline => "btn-outline-mktg",
|
11
|
-
:transparent => "btn-transparent"
|
12
|
-
}.freeze
|
13
|
-
SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
|
14
|
-
|
15
|
-
DEFAULT_VARIANT = :default
|
16
|
-
VARIANT_MAPPINGS = {
|
17
|
-
DEFAULT_VARIANT => "",
|
18
|
-
:large => "btn-large-mktg"
|
19
|
-
}.freeze
|
20
|
-
VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
|
21
|
-
|
22
|
-
DEFAULT_TAG = :button
|
23
|
-
TAG_OPTIONS = [DEFAULT_TAG, :a].freeze
|
24
|
-
|
25
|
-
DEFAULT_TYPE = :button
|
26
|
-
TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
|
27
|
-
|
28
|
-
# @example Schemes
|
29
|
-
# <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
|
30
|
-
# <%= render(Primer::ButtonMarketingComponent.new(scheme: :primary, mr: 2)) { "Primary" } %>
|
31
|
-
# <%= render(Primer::ButtonMarketingComponent.new(scheme: :outline)) { "Outline" } %>
|
32
|
-
# <div class="color-bg-canvas-inverse">
|
33
|
-
# <%= render(Primer::ButtonMarketingComponent.new(scheme: :transparent)) { "Transparent" } %>
|
34
|
-
# </div>
|
35
|
-
#
|
36
|
-
# @example Sizes
|
37
|
-
# <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
|
38
|
-
# <%= render(Primer::ButtonMarketingComponent.new(variant: :large)) { "Large" } %>
|
39
|
-
#
|
40
|
-
# @param scheme [Symbol] <%= one_of(Primer::ButtonMarketingComponent::SCHEME_OPTIONS) %>
|
41
|
-
# @param variant [Symbol] <%= one_of(Primer::ButtonMarketingComponent::VARIANT_OPTIONS) %>
|
42
|
-
# @param tag [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TAG_OPTIONS) %>
|
43
|
-
# @param type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TYPE_OPTIONS) %>
|
44
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
45
|
-
def initialize(
|
46
|
-
scheme: DEFAULT_SCHEME,
|
47
|
-
variant: DEFAULT_VARIANT,
|
48
|
-
tag: DEFAULT_TAG,
|
49
|
-
type: DEFAULT_TYPE,
|
50
|
-
**system_arguments
|
51
|
-
)
|
52
|
-
@system_arguments = system_arguments
|
53
|
-
@system_arguments[:block] = false
|
54
|
-
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
|
55
|
-
@system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
|
56
|
-
@system_arguments[:classes] = class_names(
|
57
|
-
"btn-mktg",
|
58
|
-
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
|
59
|
-
VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
|
60
|
-
system_arguments[:classes]
|
61
|
-
)
|
62
|
-
end
|
63
|
-
|
64
|
-
def call
|
65
|
-
render(Primer::BaseButton.new(**@system_arguments)) { content }
|
66
|
-
end
|
67
|
-
end
|
68
|
-
end
|
@@ -1,46 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
module Dropdown
|
5
|
-
# This component is part of `Dropdown` and should not be
|
6
|
-
# used as a standalone component.
|
7
|
-
class MenuComponent < Primer::Component
|
8
|
-
SCHEME_DEFAULT = :default
|
9
|
-
SCHEME_MAPPINGS = {
|
10
|
-
SCHEME_DEFAULT => "",
|
11
|
-
:dark => "dropdown-menu-dark"
|
12
|
-
}.freeze
|
13
|
-
|
14
|
-
DIRECTION_DEFAULT = :se
|
15
|
-
DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
|
16
|
-
|
17
|
-
renders_many :items, lambda { |divider: false, **system_arguments|
|
18
|
-
system_arguments[:tag] = :li
|
19
|
-
system_arguments[:role] = :none if divider
|
20
|
-
system_arguments[:classes] = class_names(
|
21
|
-
system_arguments[:classes],
|
22
|
-
"dropdown-item" => !divider,
|
23
|
-
"dropdown-divider" => divider
|
24
|
-
)
|
25
|
-
|
26
|
-
Primer::BaseComponent.new(**system_arguments)
|
27
|
-
}
|
28
|
-
|
29
|
-
def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
|
30
|
-
@header = header
|
31
|
-
@direction = direction
|
32
|
-
@system_arguments = system_arguments
|
33
|
-
|
34
|
-
@system_arguments[:tag] = "details-menu"
|
35
|
-
@system_arguments[:role] = "menu"
|
36
|
-
|
37
|
-
@system_arguments[:classes] = class_names(
|
38
|
-
@system_arguments[:classes],
|
39
|
-
"dropdown-menu",
|
40
|
-
"dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
|
41
|
-
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
|
42
|
-
)
|
43
|
-
end
|
44
|
-
end
|
45
|
-
end
|
46
|
-
end
|
@@ -1,73 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# `Dropdown` is a lightweight context menu for housing navigation and actions.
|
5
|
-
# They're great for instances where you don't need the full power (and code) of the select menu.
|
6
|
-
class DropdownComponent < Primer::Component
|
7
|
-
# Required trigger for the dropdown. Only accepts a content.
|
8
|
-
# Its classes can be customized by the `summary_classes` param in the parent component
|
9
|
-
renders_one :button
|
10
|
-
|
11
|
-
# Required context menu for the dropdown
|
12
|
-
#
|
13
|
-
# @param direction [Symbol] <%= one_of(Primer::Dropdown::MenuComponent::DIRECTION_OPTIONS) %>
|
14
|
-
# @param scheme [Symbol] Pass `:dark` for dark mode theming
|
15
|
-
# @param header [String] Optional string to display as the header
|
16
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
17
|
-
renders_one :menu, Primer::Dropdown::MenuComponent
|
18
|
-
|
19
|
-
# @example Default
|
20
|
-
# <div>
|
21
|
-
# <%= render(Primer::DropdownComponent.new) do |c| %>
|
22
|
-
# <% c.button do %>
|
23
|
-
# Dropdown
|
24
|
-
# <% end %>
|
25
|
-
#
|
26
|
-
# <%= c.menu(header: "Options") do |menu|
|
27
|
-
# menu.item { "Item 1" }
|
28
|
-
# menu.item { "Item 2" }
|
29
|
-
# menu.item(divider: true)
|
30
|
-
# menu.item { "Item 3" }
|
31
|
-
# menu.item { "Item 4" }
|
32
|
-
# end %>
|
33
|
-
# <% end %>
|
34
|
-
# </div>
|
35
|
-
#
|
36
|
-
# @example With Direction
|
37
|
-
# <div>
|
38
|
-
# <%= render(Primer::DropdownComponent.new) do |c| %>
|
39
|
-
# <% c.button do %>
|
40
|
-
# Dropdown
|
41
|
-
# <% end %>
|
42
|
-
#
|
43
|
-
# <%= c.menu(header: "Options", direction: :s) do |menu|
|
44
|
-
# menu.item { "Item 1" }
|
45
|
-
# menu.item { "Item 2" }
|
46
|
-
# menu.item(divider: true)
|
47
|
-
# menu.item { "Item 3" }
|
48
|
-
# menu.item { "Item 4" }
|
49
|
-
# end %>
|
50
|
-
# <% end %>
|
51
|
-
# </div>
|
52
|
-
#
|
53
|
-
# @param overlay [Symbol] <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
|
54
|
-
# @param reset [Boolean] Whether to hide the default caret on the button
|
55
|
-
# @param summary_classes [String] Custom classes to add to the button
|
56
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
57
|
-
def initialize(overlay: :default, reset: true, summary_classes: "", **system_arguments)
|
58
|
-
@system_arguments = system_arguments
|
59
|
-
@system_arguments[:overlay] = overlay
|
60
|
-
@system_arguments[:reset] = reset
|
61
|
-
@system_arguments[:position] = :relative
|
62
|
-
@system_arguments[:classes] = class_names(
|
63
|
-
@system_arguments[:classes],
|
64
|
-
"dropdown"
|
65
|
-
)
|
66
|
-
@summary_classes = summary_classes
|
67
|
-
end
|
68
|
-
|
69
|
-
def render?
|
70
|
-
button.present? && menu.present?
|
71
|
-
end
|
72
|
-
end
|
73
|
-
end
|
@@ -1,25 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# `Text` is a wrapper component that will apply typography styles to the text inside.
|
5
|
-
class TextComponent < Primer::Component
|
6
|
-
status :beta
|
7
|
-
|
8
|
-
DEFAULT_TAG = :span
|
9
|
-
|
10
|
-
# @example Default
|
11
|
-
# <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
|
12
|
-
# <%= render(Primer::TextComponent.new(tag: :p, color: :text_danger)) { "Danger Text" } %>
|
13
|
-
#
|
14
|
-
# @param tag [Symbol]
|
15
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
16
|
-
def initialize(tag: DEFAULT_TAG, **system_arguments)
|
17
|
-
@system_arguments = system_arguments
|
18
|
-
@system_arguments[:tag] = tag
|
19
|
-
end
|
20
|
-
|
21
|
-
def call
|
22
|
-
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
23
|
-
end
|
24
|
-
end
|
25
|
-
end
|
@@ -1,63 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
class Classify
|
5
|
-
# Handler for PrimerCSS spacing classes.
|
6
|
-
class Spacing
|
7
|
-
BASE_OPTIONS = (0..6).to_a.freeze
|
8
|
-
BASE_MAPPINGS = {
|
9
|
-
my: BASE_OPTIONS,
|
10
|
-
pb: BASE_OPTIONS,
|
11
|
-
pl: BASE_OPTIONS,
|
12
|
-
pr: BASE_OPTIONS,
|
13
|
-
pt: BASE_OPTIONS,
|
14
|
-
px: BASE_OPTIONS,
|
15
|
-
py: BASE_OPTIONS
|
16
|
-
}.freeze
|
17
|
-
|
18
|
-
MARGIN_DIRECTION_OPTIONS = [*(-6..-1), *BASE_OPTIONS].freeze
|
19
|
-
MARGIN_DIRECTION_MAPPINGS = {
|
20
|
-
mb: MARGIN_DIRECTION_OPTIONS,
|
21
|
-
ml: MARGIN_DIRECTION_OPTIONS,
|
22
|
-
mr: MARGIN_DIRECTION_OPTIONS,
|
23
|
-
mt: MARGIN_DIRECTION_OPTIONS
|
24
|
-
}.freeze
|
25
|
-
|
26
|
-
AUTO_OPTIONS = [*BASE_OPTIONS, :auto].freeze
|
27
|
-
AUTO_MAPPINGS = {
|
28
|
-
m: AUTO_OPTIONS,
|
29
|
-
mx: AUTO_OPTIONS
|
30
|
-
}.freeze
|
31
|
-
|
32
|
-
RESPONSIVE_OPTIONS = [*BASE_OPTIONS, :responsive].freeze
|
33
|
-
RESPONSIVE_MAPPINGS = {
|
34
|
-
p: RESPONSIVE_OPTIONS
|
35
|
-
}.freeze
|
36
|
-
|
37
|
-
MAPPINGS = {
|
38
|
-
**BASE_MAPPINGS,
|
39
|
-
**MARGIN_DIRECTION_MAPPINGS,
|
40
|
-
**AUTO_MAPPINGS,
|
41
|
-
**RESPONSIVE_MAPPINGS
|
42
|
-
}.freeze
|
43
|
-
KEYS = MAPPINGS.keys.freeze
|
44
|
-
|
45
|
-
class << self
|
46
|
-
def spacing(key, val, breakpoint)
|
47
|
-
validate(key, val) unless Rails.env.production?
|
48
|
-
|
49
|
-
return "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}" if val.is_a?(Numeric) && val.negative?
|
50
|
-
|
51
|
-
"#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
|
52
|
-
end
|
53
|
-
|
54
|
-
private
|
55
|
-
|
56
|
-
def validate(key, val)
|
57
|
-
raise ArgumentError, "#{key} is not a spacing key" unless KEYS.include?(key)
|
58
|
-
raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{MAPPINGS[key]}" unless MAPPINGS[key].include?(val)
|
59
|
-
end
|
60
|
-
end
|
61
|
-
end
|
62
|
-
end
|
63
|
-
end
|