primer_view_components 0.0.33 → 0.0.34

Sign up to get free protection for your applications and to get access to all the features.
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