primer_view_components 0.0.33 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +30 -0
  3. data/app/components/primer/base_component.rb +115 -83
  4. data/app/components/primer/button_component.rb +11 -11
  5. data/app/components/primer/button_group_component.rb +3 -3
  6. data/app/components/primer/button_marketing_component.rb +12 -12
  7. data/app/components/primer/flash_component.rb +10 -10
  8. data/app/components/primer/link_component.rb +9 -9
  9. data/app/components/primer/state_component.rb +13 -13
  10. data/app/components/primer/subhead_component.rb +1 -1
  11. data/app/lib/primer/classify.rb +3 -12
  12. data/app/lib/primer/classify/cache.rb +14 -4
  13. data/app/lib/primer/classify/spacing.rb +63 -0
  14. data/lib/primer/view_components/version.rb +1 -1
  15. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: bc1d93aedd6cfbf47bbea33d144f7dfbad5fdd3297acc343952a4c5853a27423
4
- data.tar.gz: 952bfd2071bf837067f9970952d5348c372453e891cdcec911fc8e4480166974
3
+ metadata.gz: b3251ede218a760e400098f3aab65c1f4bb91dedcc780efa32d0f7b814f35a7c
4
+ data.tar.gz: 32676c086a6e0ad4c585fa5cc5ddbe6b5296451974f4f892afb24786886bd8e0
5
5
  SHA512:
6
- metadata.gz: 69d0b38e3b03833e5656b1e54defff8336e46e3e1d571815fb62db27c6759e8637ba9357d74706e3495f49d1a2b30073f2b9f8c35c0594f7d750904473b52611
7
- data.tar.gz: 2d18d853748fbfc3998077cb82dde8f42d84e0fb1e832461bf2197f9b2200972eb9811c12f28f874a7416896c1075815bb823a62a25a2c40f91b9766d0ce99a7
6
+ metadata.gz: b67005b172fc5b314bcd8f18a4340ca4b7c33e6eb88d4b469714fac0c25a5ca82819205c70e3bd3bdd21edb6c3a3bf56870bea68eb61a09c931a7cada5614f5c
7
+ data.tar.gz: b84b0c68ed718fdb8af16748215c763c87a3f26bea3d5e6ecd0e15d682f50d7849bac2290ebb0023d4770aa5ef47211b31f2f94f5590401410afa6ea2cda193a
data/CHANGELOG.md CHANGED
@@ -2,6 +2,36 @@
2
2
 
3
3
  ## main
4
4
 
5
+ ## 0.0.34
6
+
7
+ * Add `p: :responsive` and `m: :auto` system arguments.
8
+
9
+ *Manuel Puyol*
10
+
11
+ * Remove `my: :auto` and negative `m:` system arguments.
12
+
13
+ *Manuel Puyol*
14
+
15
+ * **Breaking change**: Rename `FlashComponent` `variant` argument to `scheme`.
16
+
17
+ *Manuel Puyol*
18
+
19
+ * **Breaking change**: Rename `LinkComponent` `variant` argument to `scheme`.
20
+
21
+ *Manuel Puyol*
22
+
23
+ * **Breaking change**: Rename `ButtonComponent` `button_type` argument to `scheme`.
24
+
25
+ *Manuel Puyol*
26
+
27
+ * **Breaking change**: Rename `ButtonMarketingComponent` `button_type` argument to `scheme`.
28
+
29
+ *Manuel Puyol*
30
+
31
+ * **Breaking change**: Rename `StateComponent` `color` argument to `scheme`.
32
+
33
+ *Manuel Puyol*
34
+
5
35
  ## 0.0.33
6
36
 
7
37
  * Remove `TabbedComponent` validation requiring a tab to be selected.
data/app/components/primer/base_component.rb CHANGED
@@ -22,94 +22,126 @@ module Primer
22
22
  # ```html
23
23
  # <h1 class="mt-0 mt-lg-4 mt-xl-2">Hello world</h1>
24
24
  # ```
25
- #
26
- # ## HTML attributes
27
- #
28
- # System arguments include most HTML attributes. For example:
29
- #
30
- # | Name | Type | Description |
31
- # | :- | :- | :- |
32
- # | `width` | `Integer` | Width. |
33
- # | `height` | `Integer` | Height. |
34
- # | `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |
35
- # | `aria` | `Hash` | Aria attributes: `aria: { label: "foo" }` renders `aria-label='foo'`. |
36
- # | `title` | `String` | The `title` attribute. |
37
- # | `style` | `String` | Inline styles. |
38
- # | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |
39
25
  class BaseComponent < Primer::Component
40
26
  status :beta
41
27
 
42
28
  include TestSelectorHelper
43
29
 
44
- # @param test_selector [String] Adds `data-test-selector='given value'` in non-Production environments for testing purposes.
45
- #
46
- # @param m [Integer] Margin. <%= one_of((-6..6).to_a) %>
47
- # @param mt [Integer] Margin top. <%= one_of((-6..6).to_a) %>
48
- # @param mr [Integer] Margin right. <%= one_of((-6..6).to_a) %>
49
- # @param mb [Integer] Margin bottom. <%= one_of((-6..6).to_a) %>
50
- # @param ml [Integer] Margin left. <%= one_of((-6..6).to_a) %>
51
- # @param mx [Integer] Horizontal margins. <%= one_of((-6..6).to_a + [:auto]) %>
52
- # @param my [Integer] Vertical margins. <%= one_of((-6..6).to_a) %>
53
- # @param p [Integer] Padding. <%= one_of((0..6).to_a) %>
54
- # @param pt [Integer] Padding left. <%= one_of((0..6).to_a) %>
55
- # @param pr [Integer] Padding right. <%= one_of((0..6).to_a) %>
56
- # @param pb [Integer] Padding bottom. <%= one_of((0..6).to_a) %>
57
- # @param pl [Integer] Padding left. <%= one_of((0..6).to_a) %>
58
- # @param px [Integer] Horizontal padding. <%= one_of((0..6).to_a) %>
59
- # @param py [Integer] Vertical padding. <%= one_of((0..6).to_a) %>
60
- #
61
- # @param position [Symbol] <%= one_of([:relative, :absolute, :fixed]) %>
62
- #
63
- # @param top [Boolean] If `false`, sets `top: 0`.
64
- # @param right [Boolean] If `false`, sets `right: 0`.
65
- # @param bottom [Boolean] If `false`, sets `bottom: 0`.
66
- # @param left [Boolean] If `false`, sets `left: 0`.
67
- #
68
- # @param display [Symbol] <%= one_of([:none, :block, :flex, :inline, :inline_block, :table, :table_cell]) %>
69
- #
70
- # @param v [Symbol] Visibility. <%= one_of([:hidden, :visible]) %>
71
- #
72
- # @param hide [Symbol] Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %>
73
- #
74
- # @param vertical_align [Symbol] <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %>
75
- #
76
- # @param float [Symbol] <%= one_of([:left, :right]) %>
77
- #
78
- # @param col [Integer] Number of columns.
79
- #
80
- # @param underline [Boolean] Whether text should be underlined.
81
- #
82
- # @param color [Symbol] Text color. <br /> <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> <br /> Deprecated options: <%= one_of(Primer::Classify::FunctionalTextColors::DEPRECATED_OPTIONS) %>
83
- # @param bg [String, Symbol] Background color. Accepts either a hex value as a String or a color name as a Symbol.
84
- #
85
- # @param box_shadow [Boolean, Symbol] Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %>
86
- # @param border [Symbol] <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %>
87
- # @param border_color [Symbol] <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> <br /> Deprecated options: <%= one_of(Primer::Classify::FunctionalBorderColors::DEPRECATED_OPTIONS) %>
88
- # @param border_top [Integer] Set to `0` to remove the top border.
89
- # @param border_bottom [Integer] Set to `0` to remove the bottom border.
90
- # @param border_left [Integer] Set to `0` to remove the left border.
91
- # @param border_right [Integer] Set to `0` to remove the right border.
92
- # @param border_radius [Integer] <%= one_of([0, 1, 2, 3]) %>
93
- #
94
- # @param font_size [String, Integer] <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %>
95
- # @param text_align [Symbol] Text alignment. <%= one_of([:left, :right, :center]) %>
96
- # @param font_weight [Symbol] Font weight. <%= one_of([:light, :normal, :bold]) %>
97
- #
98
- # @param flex [Integer, Symbol] <%= one_of([1, :auto]) %>
99
- # @param flex_grow [Integer] To enable, set to `0`.
100
- # @param flex_shrink [Integer] To enable, set to `0`.
101
- # @param align_self [Symbol] <%= one_of([:auto, :start, :end, :center, :baseline, :stretch]) %>
102
- # @param justify_content [Symbol] <%= one_of([:flex_start, :flex_end, :center, :space_between, :space_around]) %>
103
- # @param align_items [Symbol] <%= one_of([:flex_start, :flex_end, :center, :baseline, :stretch]) %>
104
- # @param width [Symbol] <%= one_of([:fit, :fill]) %>
105
- # @param height [Symbol] <%= one_of([:fit, :fill]) %>
106
- #
107
- # @param word_break [Symbol] Whether to break words on line breaks. Can only be `:break_all`.
108
- #
109
- # @param animation [Symbol] <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %>
110
- #
111
- # @param tag [Symbol] HTML tag name to be passed to `tag.send`.
112
- # @param classes [String] CSS class name value to be concatenated with generated Primer CSS classes.
30
+ # ## HTML attributes
31
+ #
32
+ # System arguments include most HTML attributes. For example:
33
+ #
34
+ # | Name | Type | Description |
35
+ # | :- | :- | :- |
36
+ # | `aria` | `Hash` | Aria attributes: `aria: { label: "foo" }` renders `aria-label='foo'`. |
37
+ # | `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |
38
+ # | `height` | `Integer` | Height. |
39
+ # | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |
40
+ # | `style` | `String` | Inline styles. |
41
+ # | `title` | `String` | The `title` attribute. |
42
+ # | `width` | `Integer` | Width. |
43
+ #
44
+ # ## Animation
45
+ #
46
+ # | Name | Type | Description |
47
+ # | :- | :- | :- |
48
+ # | `animation` | Symbol | <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %> |
49
+ #
50
+ # ## Border
51
+ #
52
+ # | Name | Type | Description |
53
+ # | :- | :- | :- |
54
+ # | `border_bottom` | Integer | Set to `0` to remove the bottom border. |
55
+ # | `border_left` | Integer | Set to `0` to remove the left border. |
56
+ # | `border_radius` | Integer | <%= one_of([0, 1, 2, 3]) %> |
57
+ # | `border_right` | Integer | Set to `0` to remove the right border. |
58
+ # | `border_top` | Integer | Set to `0` to remove the top border. |
59
+ # | `border` | Symbol | <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %> |
60
+ # | `box_shadow` | Boolean, Symbol | Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %> |
61
+ #
62
+ # ## Color
63
+ #
64
+ # | Name | Type | Description |
65
+ # | :- | :- | :- |
66
+ # | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS, lower: true) %> |
67
+ # | `border_color` | Symbol | Border color. <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> |
68
+ # | `color` | Symbol | Text color. <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> |
69
+ #
70
+ # ## Flex
71
+ #
72
+ # | Name | Type | Description |
73
+ # | :- | :- | :- |
74
+ # | `align_items` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :baseline, :stretch]) %> |
75
+ # | `align_self` | Symbol | <%= one_of([:auto, :start, :end, :center, :baseline, :stretch]) %> |
76
+ # | `flex_grow` | Integer | To enable, set to `0`. |
77
+ # | `flex_shrink` | Integer | To enable, set to `0`. |
78
+ # | `flex` | Integer, Symbol | <%= one_of([1, :auto]) %> |
79
+ # | `justify_content` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :space_between, :space_around]) %> |
80
+ # | `width` | Symbol | <%= one_of([:fit, :fill]) %> |
81
+ #
82
+ # ## Grid
83
+ #
84
+ # | Name | Type | Description |
85
+ # | :- | :- | :- |
86
+ # | `col` | Integer | Number of columns. |
87
+ #
88
+ # ## Layout
89
+ #
90
+ # | Name | Type | Description |
91
+ # | :- | :- | :- |
92
+ # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :table, :table_cell]) %> |
93
+ # | `height` | Symbol | <%= one_of([:fit, :fill]) %> |
94
+ # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %> |
95
+ # | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
96
+ # | `vertical_align` | Symbol | <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %> |
97
+ #
98
+ # ## Position
99
+ #
100
+ # | Name | Type | Description |
101
+ # | :- | :- | :- |
102
+ # | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
103
+ # | `float` | Symbol | <%= one_of([:left, :right]) %> |
104
+ # | `left` | Boolean | If `false`, sets `left: 0`. |
105
+ # | `position` | Symbol | <%= one_of([:relative, :absolute, :fixed]) %> |
106
+ # | `right` | Boolean | If `false`, sets `right: 0`. |
107
+ # | `top` | Boolean | If `false`, sets `top: 0`. |
108
+ #
109
+ # ## Spacing
110
+ #
111
+ # | Name | Type | Description |
112
+ # | :- | :- | :- |
113
+ # | `m` | Integer | Margin. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:m]) %> |
114
+ # | `mb` | Integer | Margin bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mb]) %> |
115
+ # | `ml` | Integer | Margin left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:ml]) %> |
116
+ # | `mr` | Integer | Margin right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mr]) %> |
117
+ # | `mt` | Integer | Margin top. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mt]) %> |
118
+ # | `mx` | Integer | Horizontal margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mx]) %> |
119
+ # | `my` | Integer | Vertical margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:my]) %> |
120
+ # | `p` | Integer | Padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:p]) %> |
121
+ # | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pb]) %> |
122
+ # | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pl]) %> |
123
+ # | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pr]) %> |
124
+ # | `pt` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pt]) %> |
125
+ # | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:px]) %> |
126
+ # | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:py]) %> |
127
+ #
128
+ # ## Typography
129
+ #
130
+ # | Name | Type | Description |
131
+ # | :- | :- | :- |
132
+ # | `font_size` | String, Integer | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %> |
133
+ # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold]) %> |
134
+ # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
135
+ # | `underline` | Boolean | Whether text should be underlined. |
136
+ # | `word_break` | Symbol | Whether to break words on line breaks. Can only be `:break_all`. |
137
+ #
138
+ # ## Other
139
+ #
140
+ # | Name | Type | Description |
141
+ # | :- | :- | :- |
142
+ # | classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |
143
+ # | tag | Symbol | HTML tag name to be passed to `content_tag`. |
144
+ # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
113
145
  def initialize(tag:, classes: nil, **system_arguments)
114
146
  @tag = tag
115
147
  @result = Primer::Classify.call(**system_arguments.merge(classes: classes))
data/app/components/primer/button_component.rb CHANGED
@@ -3,14 +3,14 @@
3
3
  module Primer
4
4
  # Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
5
5
  class ButtonComponent < Primer::Component
6
- DEFAULT_BUTTON_TYPE = :default
7
- BUTTON_TYPE_MAPPINGS = {
8
- DEFAULT_BUTTON_TYPE => "",
6
+ DEFAULT_SCHEME = :default
7
+ SCHEME_MAPPINGS = {
8
+ DEFAULT_SCHEME => "",
9
9
  :primary => "btn-primary",
10
10
  :danger => "btn-danger",
11
11
  :outline => "btn-outline"
12
12
  }.freeze
13
- BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
13
+ SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
14
14
 
15
15
  DEFAULT_VARIANT = :medium
16
16
  VARIANT_MAPPINGS = {
@@ -26,24 +26,24 @@ module Primer
26
26
  DEFAULT_TYPE = :button
27
27
  TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
28
28
 
29
- # @example Button types
29
+ # @example Schemes
30
30
  # <%= render(Primer::ButtonComponent.new) { "Default" } %>
31
- # <%= render(Primer::ButtonComponent.new(button_type: :primary)) { "Primary" } %>
32
- # <%= render(Primer::ButtonComponent.new(button_type: :danger)) { "Danger" } %>
33
- # <%= render(Primer::ButtonComponent.new(button_type: :outline)) { "Outline" } %>
31
+ # <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
32
+ # <%= render(Primer::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
33
+ # <%= render(Primer::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
34
34
  #
35
35
  # @example Variants
36
36
  # <%= render(Primer::ButtonComponent.new(variant: :small)) { "Small" } %>
37
37
  # <%= render(Primer::ButtonComponent.new(variant: :medium)) { "Medium" } %>
38
38
  # <%= render(Primer::ButtonComponent.new(variant: :large)) { "Large" } %>
39
39
  #
40
- # @param button_type [Symbol] <%= one_of(Primer::ButtonComponent::BUTTON_TYPE_OPTIONS) %>
40
+ # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
41
41
  # @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
42
42
  # @param tag [Symbol] <%= one_of(Primer::ButtonComponent::TAG_OPTIONS) %>
43
43
  # @param type [Symbol] <%= one_of(Primer::ButtonComponent::TYPE_OPTIONS) %>
44
44
  # @param group_item [Boolean] Whether button is part of a ButtonGroup.
45
45
  def initialize(
46
- button_type: DEFAULT_BUTTON_TYPE,
46
+ scheme: DEFAULT_SCHEME,
47
47
  variant: DEFAULT_VARIANT,
48
48
  tag: DEFAULT_TAG,
49
49
  type: DEFAULT_TYPE,
@@ -62,7 +62,7 @@ module Primer
62
62
  @system_arguments[:classes] = class_names(
63
63
  "btn",
64
64
  system_arguments[:classes],
65
- BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
65
+ SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
66
66
  VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
67
67
  "BtnGroup-item" => group_item
68
68
  )
data/app/components/primer/button_group_component.rb CHANGED
@@ -11,9 +11,9 @@ module Primer
11
11
  # @example Default
12
12
  # <%= render(Primer::ButtonGroupComponent.new) do |component|
13
13
  # component.button { "Default" }
14
- # component.button(button_type: :primary) { "Primary" }
15
- # component.button(button_type: :danger) { "Danger" }
16
- # component.button(button_type: :outline) { "Outline" }
14
+ # component.button(scheme: :primary) { "Primary" }
15
+ # component.button(scheme: :danger) { "Danger" }
16
+ # component.button(scheme: :outline) { "Outline" }
17
17
  # component.button(classes: "my-class") { "Custom class" }
18
18
  # end %>
19
19
  #
data/app/components/primer/button_marketing_component.rb CHANGED
@@ -3,14 +3,14 @@
3
3
  module Primer
4
4
  # Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
5
5
  class ButtonMarketingComponent < Primer::Component
6
- DEFAULT_BUTTON_TYPE = :default
7
- BUTTON_TYPE_MAPPINGS = {
8
- DEFAULT_BUTTON_TYPE => "",
6
+ DEFAULT_SCHEME = :default
7
+ SCHEME_MAPPINGS = {
8
+ DEFAULT_SCHEME => "",
9
9
  :primary => "btn-primary-mktg",
10
10
  :outline => "btn-outline-mktg",
11
11
  :transparent => "btn-transparent"
12
12
  }.freeze
13
- BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
13
+ SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
14
14
 
15
15
  DEFAULT_VARIANT = :default
16
16
  VARIANT_MAPPINGS = {
@@ -25,25 +25,25 @@ module Primer
25
25
  DEFAULT_TYPE = :button
26
26
  TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
27
27
 
28
- # @example Button types
28
+ # @example Schemes
29
29
  # <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
30
- # <%= render(Primer::ButtonMarketingComponent.new(button_type: :primary, mr: 2)) { "Primary" } %>
31
- # <%= render(Primer::ButtonMarketingComponent.new(button_type: :outline)) { "Outline" } %>
32
- # <div class="bg-gray-dark">
33
- # <%= render(Primer::ButtonMarketingComponent.new(button_type: :transparent)) { "Transparent" } %>
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
34
  # </div>
35
35
  #
36
36
  # @example Sizes
37
37
  # <%= render(Primer::ButtonMarketingComponent.new(mr: 2)) { "Default" } %>
38
38
  # <%= render(Primer::ButtonMarketingComponent.new(variant: :large)) { "Large" } %>
39
39
  #
40
- # @param button_type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::BUTTON_TYPE_OPTIONS) %>
40
+ # @param scheme [Symbol] <%= one_of(Primer::ButtonMarketingComponent::SCHEME_OPTIONS) %>
41
41
  # @param variant [Symbol] <%= one_of(Primer::ButtonMarketingComponent::VARIANT_OPTIONS) %>
42
42
  # @param tag [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TAG_OPTIONS) %>
43
43
  # @param type [Symbol] <%= one_of(Primer::ButtonMarketingComponent::TYPE_OPTIONS) %>
44
44
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
45
45
  def initialize(
46
- button_type: DEFAULT_BUTTON_TYPE,
46
+ scheme: DEFAULT_SCHEME,
47
47
  variant: DEFAULT_VARIANT,
48
48
  tag: DEFAULT_TAG,
49
49
  type: DEFAULT_TYPE,
@@ -60,7 +60,7 @@ module Primer
60
60
 
61
61
  @system_arguments[:classes] = class_names(
62
62
  "btn-mktg",
63
- BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
63
+ SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
64
64
  VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
65
65
  system_arguments[:classes]
66
66
  )
data/app/components/primer/flash_component.rb CHANGED
@@ -15,18 +15,18 @@ module Primer
15
15
  Primer::BaseComponent.new(**system_arguments)
16
16
  }
17
17
 
18
- DEFAULT_VARIANT = :default
19
- VARIANT_MAPPINGS = {
20
- DEFAULT_VARIANT => "",
18
+ DEFAULT_SCHEME = :default
19
+ SCHEME_MAPPINGS = {
20
+ DEFAULT_SCHEME => "",
21
21
  :warning => "flash-warn",
22
22
  :danger => "flash-error",
23
23
  :success => "flash-success"
24
24
  }.freeze
25
- # @example Variants
25
+ # @example Schemes
26
26
  # <%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
27
- # <%= render(Primer::FlashComponent.new(variant: :warning)) { "This is a warning flash message!" } %>
28
- # <%= render(Primer::FlashComponent.new(variant: :danger)) { "This is a danger flash message!" } %>
29
- # <%= render(Primer::FlashComponent.new(variant: :success)) { "This is a success flash message!" } %>
27
+ # <%= render(Primer::FlashComponent.new(scheme: :warning)) { "This is a warning flash message!" } %>
28
+ # <%= render(Primer::FlashComponent.new(scheme: :danger)) { "This is a danger flash message!" } %>
29
+ # <%= render(Primer::FlashComponent.new(scheme: :success)) { "This is a success flash message!" } %>
30
30
  #
31
31
  # @example Full width
32
32
  # <%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>
@@ -49,9 +49,9 @@ module Primer
49
49
  # @param spacious [Boolean] Whether to add margin to the bottom of the component.
50
50
  # @param dismissible [Boolean] Whether the component can be dismissed with an X button.
51
51
  # @param icon [String] Name of Octicon icon to use.
52
- # @param variant [Symbol] <%= one_of(Primer::FlashComponent::VARIANT_MAPPINGS.keys) %>
52
+ # @param scheme [Symbol] <%= one_of(Primer::FlashComponent::SCHEME_MAPPINGS.keys) %>
53
53
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
54
- def initialize(full: false, spacious: false, dismissible: false, icon: nil, variant: DEFAULT_VARIANT, **system_arguments)
54
+ def initialize(full: false, spacious: false, dismissible: false, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
55
55
  @icon = icon
56
56
  @dismissible = dismissible
57
57
  @system_arguments = system_arguments
@@ -59,7 +59,7 @@ module Primer
59
59
  @system_arguments[:classes] = class_names(
60
60
  @system_arguments[:classes],
61
61
  "flash",
62
- VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
62
+ SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
63
63
  "flash-full": full
64
64
  )
65
65
  @system_arguments[:mb] ||= spacious ? 4 : nil
data/app/components/primer/link_component.rb CHANGED
@@ -5,9 +5,9 @@ module Primer
5
5
  class LinkComponent < Primer::Component
6
6
  status :beta
7
7
 
8
- DEFAULT_VARIANT = :default
9
- VARIANT_MAPPINGS = {
10
- DEFAULT_VARIANT => "",
8
+ DEFAULT_SCHEME = :default
9
+ SCHEME_MAPPINGS = {
10
+ DEFAULT_SCHEME => "",
11
11
  :primary => "Link--primary",
12
12
  :secondary => "Link--secondary"
13
13
  }.freeze
@@ -21,9 +21,9 @@ module Primer
21
21
  # @example Muted
22
22
  # <%= render(Primer::LinkComponent.new(href: "#", muted: true)) { "Link" } %>
23
23
  #
24
- # @example Variants
25
- # <%= render(Primer::LinkComponent.new(href: "#", variant: :primary)) { "Primary" } %>
26
- # <%= render(Primer::LinkComponent.new(href: "#", variant: :secondary)) { "Secondary" } %>
24
+ # @example Schemes
25
+ # <%= render(Primer::LinkComponent.new(href: "#", scheme: :primary)) { "Primary" } %>
26
+ # <%= render(Primer::LinkComponent.new(href: "#", scheme: :secondary)) { "Secondary" } %>
27
27
  #
28
28
  # @example Without underline
29
29
  # <%= render(Primer::LinkComponent.new(href: "#", underline: false)) { "Link" } %>
@@ -33,17 +33,17 @@ module Primer
33
33
  #
34
34
  # @param tag [String] <%= one_of(Primer::LinkComponent::TAG_OPTIONS) %>
35
35
  # @param href [String] URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
36
- # @param variant [Symbol] <%= one_of(Primer::LinkComponent::VARIANT_MAPPINGS.keys) %>
36
+ # @param scheme [Symbol] <%= one_of(Primer::LinkComponent::SCHEME_MAPPINGS.keys) %>
37
37
  # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
38
38
  # @param underline [Boolean] Whether or not to underline the link.
39
39
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
40
- def initialize(href: nil, tag: DEFAULT_TAG, variant: DEFAULT_VARIANT, muted: false, underline: true, **system_arguments)
40
+ def initialize(href: nil, tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, muted: false, underline: true, **system_arguments)
41
41
  @system_arguments = system_arguments
42
42
  @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
43
43
  @system_arguments[:href] = href
44
44
  @system_arguments[:classes] = class_names(
45
45
  @system_arguments[:classes],
46
- VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
46
+ SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
47
47
  "Link" => tag == :span,
48
48
  "Link--muted" => muted,
49
49
  "no-underline" => !underline
data/app/components/primer/state_component.rb CHANGED
@@ -5,21 +5,21 @@ module Primer
5
5
  class StateComponent < Primer::Component
6
6
  status :beta
7
7
 
8
- COLOR_DEFAULT = :default
9
- NEW_COLOR_MAPPINGS = {
8
+ SCHEME_DEFAULT = :default
9
+ NEW_SCHEME_MAPPINGS = {
10
10
  open: "State--open",
11
11
  closed: "State--closed",
12
12
  merged: "State--merged"
13
13
  }.freeze
14
14
 
15
- DEPRECATED_COLOR_MAPPINGS = {
16
- COLOR_DEFAULT => "",
15
+ DEPRECATED_SCHEME_MAPPINGS = {
16
+ SCHEME_DEFAULT => "",
17
17
  :green => "State--open",
18
18
  :red => "State--closed",
19
19
  :purple => "State--merged"
20
20
  }.freeze
21
- COLOR_MAPPINGS = NEW_COLOR_MAPPINGS.merge(DEPRECATED_COLOR_MAPPINGS)
22
- COLOR_OPTIONS = COLOR_MAPPINGS.keys
21
+ SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
22
+ SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
23
23
 
24
24
  SIZE_DEFAULT = :default
25
25
  SIZE_MAPPINGS = {
@@ -34,24 +34,24 @@ module Primer
34
34
  # @example Default
35
35
  # <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
36
36
  #
37
- # @example Colors
37
+ # @example Schemes
38
38
  # <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
39
- # <%= render(Primer::StateComponent.new(title: "title", color: :open)) { "Open" } %>
40
- # <%= render(Primer::StateComponent.new(title: "title", color: :closed)) { "Closed" } %>
41
- # <%= render(Primer::StateComponent.new(title: "title", color: :merged)) { "Merged" } %>
39
+ # <%= render(Primer::StateComponent.new(title: "title", scheme: :open)) { "Open" } %>
40
+ # <%= render(Primer::StateComponent.new(title: "title", scheme: :closed)) { "Closed" } %>
41
+ # <%= render(Primer::StateComponent.new(title: "title", scheme: :merged)) { "Merged" } %>
42
42
  #
43
43
  # @example Sizes
44
44
  # <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
45
45
  # <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
46
46
  #
47
47
  # @param title [String] `title` HTML attribute.
48
- # @param color [Symbol] Background color. <%= one_of(Primer::StateComponent::COLOR_OPTIONS) %>
48
+ # @param scheme [Symbol] Background color. <%= one_of(Primer::StateComponent::SCHEME_OPTIONS) %>
49
49
  # @param tag [Symbol] HTML tag for element. <%= one_of(Primer::StateComponent::TAG_OPTIONS) %>
50
50
  # @param size [Symbol] <%= one_of(Primer::StateComponent::SIZE_OPTIONS) %>
51
51
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
52
52
  def initialize(
53
53
  title:,
54
- color: COLOR_DEFAULT,
54
+ scheme: SCHEME_DEFAULT,
55
55
  tag: TAG_DEFAULT,
56
56
  size: SIZE_DEFAULT,
57
57
  **system_arguments
@@ -62,7 +62,7 @@ module Primer
62
62
  @system_arguments[:classes] = class_names(
63
63
  @system_arguments[:classes],
64
64
  "State",
65
- COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
65
+ SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, SCHEME_DEFAULT)],
66
66
  SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
67
67
  )
68
68
  end
data/app/components/primer/subhead_component.rb CHANGED
@@ -71,7 +71,7 @@ module Primer
71
71
  # <% component.actions do %>
72
72
  # <%= render(
73
73
  # Primer::ButtonComponent.new(
74
- # tag: :a, href: "http://www.google.com", button_type: :danger
74
+ # tag: :a, href: "http://www.google.com", scheme: :danger
75
75
  # )
76
76
  # ) { "Action" } %>
77
77
  # <% end %>
data/app/lib/primer/classify.rb CHANGED
@@ -3,12 +3,11 @@
3
3
  module Primer
4
4
  # :nodoc:
5
5
  class Classify
6
- MARGIN_DIRECTION_KEYS = %i[mt ml mb mr].freeze
7
- SPACING_KEYS = (%i[m my mx p py px pt pl pb pr] + MARGIN_DIRECTION_KEYS).freeze
8
6
  DIRECTION_KEY = :direction
9
7
  JUSTIFY_CONTENT_KEY = :justify_content
10
8
  ALIGN_ITEMS_KEY = :align_items
11
9
  DISPLAY_KEY = :display
10
+ SPACING_KEYS = Primer::Classify::Spacing::KEYS
12
11
  RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
13
12
  BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
14
13
 
@@ -184,14 +183,8 @@ module Primer
184
183
  return if val.nil? || val == ""
185
184
 
186
185
  if SPACING_KEYS.include?(key)
187
- if MARGIN_DIRECTION_KEYS.include?(key)
188
- raise ArgumentError, "value of #{key} must be between -6 and 6" if val < -6 || val > 6
189
- elsif !((key == :mx || key == :my) && val == :auto)
190
- raise ArgumentError, "value of #{key} must be between 0 and 6" if val.negative? || val > 6
191
- end
192
- end
193
-
194
- if BOOLEAN_MAPPINGS.key?(key)
186
+ memo[:classes] << Primer::Classify::Spacing.spacing(key, val, breakpoint)
187
+ elsif BOOLEAN_MAPPINGS.key?(key)
195
188
  BOOLEAN_MAPPINGS[key][:mappings].each do |m|
196
189
  memo[:classes] << m[:css_class] if m[:value] == val && m[:css_class].present?
197
190
  end
@@ -248,8 +241,6 @@ module Primer
248
241
  memo[:classes] << "text-#{val.to_s.dasherize}"
249
242
  elsif TYPOGRAPHY_KEYS.include?(key)
250
243
  memo[:classes] << "f#{val.to_s.dasherize}"
251
- elsif MARGIN_DIRECTION_KEYS.include?(key) && val.negative?
252
- memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}"
253
244
  elsif key == BOX_SHADOW_KEY
254
245
  memo[:classes] << if val == true
255
246
  "color-shadow-small"
data/app/lib/primer/classify/cache.rb CHANGED
@@ -20,13 +20,23 @@ module Primer
20
20
 
21
21
  def preload!
22
22
  preload(
23
- keys: Primer::Classify::MARGIN_DIRECTION_KEYS,
24
- values: [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6]
23
+ keys: Primer::Classify::Spacing::MARGIN_DIRECTION_MAPPINGS.keys,
24
+ values: Primer::Classify::Spacing::MARGIN_DIRECTION_OPTIONS
25
25
  )
26
26
 
27
27
  preload(
28
- keys: (Primer::Classify::SPACING_KEYS - Primer::Classify::MARGIN_DIRECTION_KEYS),
29
- values: [0, 1, 2, 3, 4, 5, 6]
28
+ keys: Primer::Classify::Spacing::BASE_MAPPINGS.keys,
29
+ values: Primer::Classify::Spacing::BASE_OPTIONS
30
+ )
31
+
32
+ preload(
33
+ keys: Primer::Classify::Spacing::AUTO_MAPPINGS.keys,
34
+ values: Primer::Classify::Spacing::AUTO_OPTIONS
35
+ )
36
+
37
+ preload(
38
+ keys: Primer::Classify::Spacing::RESPONSIVE_MAPPINGS.keys,
39
+ values: Primer::Classify::Spacing::RESPONSIVE_OPTIONS
30
40
  )
31
41
 
32
42
  preload(
data/app/lib/primer/classify/spacing.rb ADDED
@@ -0,0 +1,63 @@
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
data/lib/primer/view_components/version.rb CHANGED
@@ -5,7 +5,7 @@ module Primer
5
5
  module VERSION
6
6
  MAJOR = 0
7
7
  MINOR = 0
8
- PATCH = 33
8
+ PATCH = 34
9
9
 
10
10
  STRING = [MAJOR, MINOR, PATCH].join(".")
11
11
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: primer_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.33
4
+ version: 0.0.34
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-03-26 00:00:00.000000000 Z
11
+ date: 2021-04-01 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: octicons_helper
@@ -334,6 +334,7 @@ files:
334
334
  - app/lib/primer/classify/functional_border_colors.rb
335
335
  - app/lib/primer/classify/functional_colors.rb
336
336
  - app/lib/primer/classify/functional_text_colors.rb
337
+ - app/lib/primer/classify/spacing.rb
337
338
  - app/lib/primer/fetch_or_fallback_helper.rb
338
339
  - app/lib/primer/join_style_arguments_helper.rb
339
340
  - app/lib/primer/status/dsl.rb