primer_view_components 0.0.36 → 0.0.41

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 (91) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +220 -24
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/components/primer/auto_complete.rb +3 -1
  6. data/app/components/primer/auto_complete/item.rb +1 -1
  7. data/app/components/primer/avatar_component.rb +22 -3
  8. data/app/components/primer/avatar_stack_component.rb +8 -5
  9. data/app/components/primer/base_button.rb +47 -0
  10. data/app/components/primer/base_component.rb +14 -10
  11. data/app/components/primer/blankslate_component.rb +10 -7
  12. data/app/components/primer/border_box_component.rb +1 -1
  13. data/app/components/primer/box_component.rb +1 -1
  14. data/app/components/primer/breadcrumb_component.rb +1 -1
  15. data/app/components/primer/button_component.html.erb +9 -0
  16. data/app/components/primer/button_component.rb +39 -21
  17. data/app/components/primer/{button_group_component.html.erb → button_group.html.erb} +0 -0
  18. data/app/components/primer/button_group.rb +61 -0
  19. data/app/components/primer/button_marketing_component.rb +4 -9
  20. data/app/components/primer/clipboard_copy.html.erb +8 -0
  21. data/app/components/primer/clipboard_copy.rb +26 -0
  22. data/app/components/primer/clipboard_copy_component.d.ts +1 -0
  23. data/app/components/primer/clipboard_copy_component.js +34 -0
  24. data/app/components/primer/clipboard_copy_component.ts +39 -0
  25. data/app/components/primer/close_button.rb +11 -2
  26. data/app/components/primer/component.rb +21 -2
  27. data/app/components/primer/counter_component.rb +6 -1
  28. data/app/components/primer/details_component.rb +1 -1
  29. data/app/components/primer/dropdown/menu_component.rb +1 -1
  30. data/app/components/primer/dropdown_component.rb +1 -1
  31. data/app/components/primer/flash_component.rb +3 -3
  32. data/app/components/primer/flex_component.rb +28 -1
  33. data/app/components/primer/flex_item_component.rb +20 -1
  34. data/app/components/primer/heading_component.rb +25 -4
  35. data/app/components/primer/hidden_text_expander.rb +2 -4
  36. data/app/components/primer/icon_button.rb +65 -0
  37. data/app/components/primer/image.rb +46 -0
  38. data/app/components/primer/image_crop.d.ts +1 -0
  39. data/app/components/primer/image_crop.html.erb +12 -0
  40. data/app/components/primer/image_crop.js +1 -0
  41. data/app/components/primer/image_crop.rb +36 -0
  42. data/app/components/primer/image_crop.ts +1 -0
  43. data/app/components/primer/label_component.rb +7 -3
  44. data/app/components/primer/layout_component.rb +1 -1
  45. data/app/components/primer/link_component.rb +1 -1
  46. data/app/components/primer/local_time.d.ts +1 -0
  47. data/app/components/primer/local_time.js +1 -0
  48. data/app/components/primer/local_time.rb +59 -0
  49. data/app/components/primer/local_time.ts +1 -0
  50. data/app/components/primer/{markdown_component.rb → markdown.rb} +6 -5
  51. data/app/components/primer/menu_component.rb +1 -1
  52. data/app/components/primer/navigation/tab_component.rb +8 -1
  53. data/app/components/primer/octicon_component.html.erb +7 -0
  54. data/app/components/primer/octicon_component.rb +53 -19
  55. data/app/components/primer/octicon_symbols_component.html.erb +3 -0
  56. data/app/components/primer/octicon_symbols_component.rb +61 -0
  57. data/app/components/primer/popover_component.rb +1 -1
  58. data/app/components/primer/primer.d.ts +3 -0
  59. data/app/components/primer/primer.js +3 -0
  60. data/app/components/primer/primer.ts +3 -0
  61. data/app/components/primer/progress_bar_component.rb +1 -1
  62. data/app/components/primer/spinner_component.rb +3 -3
  63. data/app/components/primer/state_component.rb +2 -2
  64. data/app/components/primer/subhead_component.rb +34 -4
  65. data/app/components/primer/tab_container_component.rb +1 -1
  66. data/app/components/primer/tab_nav_component.html.erb +2 -0
  67. data/app/components/primer/tab_nav_component.rb +23 -10
  68. data/app/components/primer/text_component.rb +6 -3
  69. data/app/components/primer/time_ago_component.rb +1 -1
  70. data/app/components/primer/timeline_item_component.rb +1 -1
  71. data/app/components/primer/{tooltip_component.rb → tooltip.rb} +11 -9
  72. data/app/components/primer/truncate.rb +1 -1
  73. data/app/components/primer/underline_nav_component.rb +1 -1
  74. data/app/lib/primer/classify.rb +11 -36
  75. data/app/lib/primer/classify/cache.rb +20 -15
  76. data/app/lib/primer/classify/flex.rb +111 -0
  77. data/app/lib/primer/classify/functional_border_colors.rb +1 -2
  78. data/app/lib/primer/fetch_or_fallback_helper.rb +2 -2
  79. data/app/lib/primer/octicon/cache.rb +42 -0
  80. data/app/lib/primer/view_helper.rb +2 -1
  81. data/lib/primer/view_components.rb +1 -1
  82. data/lib/primer/view_components/version.rb +1 -1
  83. data/lib/tasks/coverage.rake +14 -0
  84. data/lib/tasks/docs.rake +315 -0
  85. data/lib/tasks/statuses.rake +12 -0
  86. data/lib/yard/docs_helper.rb +57 -0
  87. data/static/statuses.json +54 -1
  88. metadata +50 -11
  89. data/app/components/primer/button_group_component.rb +0 -35
  90. data/app/components/primer/foo_bar.d.ts +0 -1
  91. data/app/components/primer/foo_bar.js +0 -1
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # Use popovers to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
4
+ # Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
5
5
  #
6
6
  # By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
7
7
  class PopoverComponent < Primer::Component
@@ -1,3 +1,6 @@
1
1
  import './auto_complete/auto_complete';
2
+ import './clipboard_copy_component';
2
3
  import './tab_container_component';
3
4
  import './time_ago_component';
5
+ import './local_time';
6
+ import './image_crop';
@@ -1,3 +1,6 @@
1
1
  import './auto_complete/auto_complete';
2
+ import './clipboard_copy_component';
2
3
  import './tab_container_component';
3
4
  import './time_ago_component';
5
+ import './local_time';
6
+ import './image_crop';
@@ -1,3 +1,6 @@
1
1
  import './auto_complete/auto_complete'
2
+ import './clipboard_copy_component'
2
3
  import './tab_container_component'
3
4
  import './time_ago_component'
5
+ import './local_time'
6
+ import './image_crop'
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # Use ProgressBar to visualize task completion.
4
+ # Use `ProgressBar` to visualize task completion.
5
5
  class ProgressBarComponent < Primer::Component
6
6
  status :beta
7
7
 
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # Use Primer::SpinnerComponent to let users know that content is being loaded.
4
+ # Use `Spinner` to let users know that content is being loaded.
5
5
  class SpinnerComponent < Primer::Component
6
6
  status :beta
7
7
 
@@ -27,10 +27,10 @@ module Primer
27
27
  # <%= render(Primer::SpinnerComponent.new(size: :large)) %>
28
28
  #
29
29
  # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
30
- def initialize(size: DEFAULT_SIZE, **system_arguments)
30
+ def initialize(size: DEFAULT_SIZE, style: DEFAULT_STYLE, **system_arguments)
31
31
  @system_arguments = system_arguments
32
32
  @system_arguments[:tag] = :svg
33
- @system_arguments[:style] ||= DEFAULT_STYLE
33
+ @system_arguments[:style] ||= style
34
34
  @system_arguments[:animation] = :rotate
35
35
  @system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
36
36
  @system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # Component for rendering the status of an item.
4
+ # Use `State` for rendering the status of an item.
5
5
  class StateComponent < Primer::Component
6
6
  status :beta
7
7
 
@@ -29,7 +29,7 @@ module Primer
29
29
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
30
30
 
31
31
  TAG_DEFAULT = :span
32
- TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
32
+ TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
33
33
 
34
34
  # @example Default
35
35
  # <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
@@ -1,16 +1,28 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # Use the Subhead component for page headings.
4
+ # Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.
5
+ #
6
+ # - Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.
7
+ # - Use a succint, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.
8
+ # - Use the actions slot to render a related action to the right of the heading. Use <%= link_to_component(Primer::ButtonComponent) %> or <%= link_to_component(Primer::LinkComponent) %>.
9
+ #
10
+ # @accessibility
11
+ # The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.
12
+ # <%= link_to_heading_practices %>
5
13
  class SubheadComponent < Primer::Component
6
14
  status :beta
7
15
 
16
+ DEFAULT_HEADING_TAG = :div
17
+ HEADING_TAG_OPTIONS = [DEFAULT_HEADING_TAG, :h1, :h2, :h3, :h4, :h5, :h6].freeze
18
+
8
19
  # The heading
9
20
  #
21
+ # @param tag [Symbol] <%= one_of(Primer::SubheadComponent::HEADING_TAG_OPTIONS)%>
10
22
  # @param danger [Boolean] Whether to style the heading as dangerous.
11
23
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
12
- renders_one :heading, lambda { |danger: false, **system_arguments|
13
- system_arguments[:tag] ||= :div
24
+ renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, **system_arguments|
25
+ system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, DEFAULT_HEADING_TAG)
14
26
  system_arguments[:classes] = class_names(
15
27
  system_arguments[:classes],
16
28
  "Subhead-heading",
@@ -42,7 +54,7 @@ module Primer
42
54
 
43
55
  # @example Default
44
56
  # <%= render(Primer::SubheadComponent.new) do |component| %>
45
- # <% component.heading do %>
57
+ # <% component.heading(tag: :h3) do %>
46
58
  # My Heading
47
59
  # <% end %>
48
60
  # <% component.description do %>
@@ -50,6 +62,24 @@ module Primer
50
62
  # <% end %>
51
63
  # <% end %>
52
64
  #
65
+ # @example With dangerous heading
66
+ # <%= render(Primer::SubheadComponent.new) do |component| %>
67
+ # <% component.heading(tag: :h3, danger: true) do %>
68
+ # My Heading
69
+ # <% end %>
70
+ # <% component.description do %>
71
+ # My Description
72
+ # <% end %>
73
+ # <% end %>
74
+ #
75
+ # @example With long description
76
+ # <%= render(Primer::SubheadComponent.new) do |component| %>
77
+ # <% component.heading(tag: :h3) do %>
78
+ # My Heading
79
+ # <% end %>
80
+ # <% end %>
81
+ # <p> This is a longer description that is sitting below the Subhead. It's much longer than a description that could sit comfortably in the Subhead. </p>
82
+ #
53
83
  # @example Without border
54
84
  # <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
55
85
  # <% component.heading do %>
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # Use TabContainer to create tabbed content with keyboard support. This component does not add any styles.
4
+ # Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
5
5
  # It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Primer::TabNavComponent) %>.
6
6
  #
7
7
  # This component requires javascript.
@@ -1,5 +1,7 @@
1
1
  <%= wrapper do %>
2
2
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
3
+ <%= extra %>
4
+
3
5
  <%= render Primer::BaseComponent.new(**@body_arguments) do %>
4
6
  <% tabs.each do |tab| %>
5
7
  <%= tab %>
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # Use TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
4
+ # Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
5
5
  class TabNavComponent < Primer::Component
6
6
  include Primer::TabbedComponentHelper
7
7
 
@@ -22,6 +22,9 @@ module Primer
22
22
  )
23
23
  }
24
24
 
25
+ # Renders extra content to the `TabNav`. This will be rendered after the tabs.
26
+ renders_one :extra
27
+
25
28
  # @example Default
26
29
  # <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
27
30
  # <% c.tab(selected: true, href: "#") { "Tab 1" }%>
@@ -68,12 +71,24 @@ module Primer
68
71
  # <% end %>
69
72
  # <% end %>
70
73
  #
74
+ # @example With extra content
75
+ # <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
76
+ # <% c.tab(selected: true, href: "#") { "Tab 1" }%>
77
+ # <% c.tab(href: "#") { "Tab 2" } %>
78
+ # <% c.tab(href: "#") { "Tab 3" } %>
79
+ # <% c.extra do %>
80
+ # <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
81
+ # <% end %>
82
+ # <% end %>
83
+ #
71
84
  # @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
72
85
  # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
86
+ # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
73
87
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
74
- def initialize(label:, with_panel: false, **system_arguments)
88
+ def initialize(label:, with_panel: false, body_arguments: {}, **system_arguments)
75
89
  @with_panel = with_panel
76
90
  @system_arguments = system_arguments
91
+ @body_arguments = body_arguments
77
92
 
78
93
  @system_arguments[:tag] ||= :div
79
94
  @system_arguments[:classes] = class_names(
@@ -81,15 +96,13 @@ module Primer
81
96
  system_arguments[:classes]
82
97
  )
83
98
 
84
- @body_arguments = {
85
- tag: navigation_tag(with_panel),
86
- classes: "tabnav-tabs",
87
- aria: {
88
- label: label
89
- }
90
- }
91
-
99
+ @body_arguments[:tag] = navigation_tag(with_panel)
100
+ @body_arguments[:"aria-label"] = label
92
101
  @body_arguments[:role] = :tablist if @with_panel
102
+ @body_arguments[:classes] = class_names(
103
+ "tabnav-tabs",
104
+ body_arguments[:classes]
105
+ )
93
106
  end
94
107
  end
95
108
  end
@@ -1,18 +1,21 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # The Text component is a wrapper component that will apply typography styles to the text inside.
4
+ # `Text` is a wrapper component that will apply typography styles to the text inside.
5
5
  class TextComponent < Primer::Component
6
6
  status :beta
7
7
 
8
+ DEFAULT_TAG = :span
9
+
8
10
  # @example Default
9
11
  # <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
10
12
  # <%= render(Primer::TextComponent.new(tag: :p, color: :text_danger)) { "Danger Text" } %>
11
13
  #
14
+ # @param tag [Symbol]
12
15
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
13
- def initialize(**system_arguments)
16
+ def initialize(tag: DEFAULT_TAG, **system_arguments)
14
17
  @system_arguments = system_arguments
15
- @system_arguments[:tag] ||= :span
18
+ @system_arguments[:tag] = tag
16
19
  end
17
20
 
18
21
  def call
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # Use Primer::TimeAgoComponent to display a time relative to how long ago it was. This component requires JavaScript.
4
+ # Use `TimeAgo` to display a time relative to how long ago it was. This component requires JavaScript.
5
5
  class TimeAgoComponent < Primer::Component
6
6
  status :beta
7
7
 
@@ -19,7 +19,7 @@ module Primer
19
19
 
20
20
  # Badge that will be connected to other TimelineItems.
21
21
  #
22
- # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
22
+ # @param icon [String] Name of <%= link_to_octicons %> to use.
23
23
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
24
24
  renders_one :badge, "BadgeComponent"
25
25
 
@@ -1,8 +1,10 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # The Tooltip component is a wrapper component that will apply a tooltip to the provided content.
5
- class TooltipComponent < Primer::Component
4
+ # `Tooltip` is a wrapper component that will apply a tooltip to the provided content.
5
+ class Tooltip < Primer::Component
6
+ status :beta
7
+
6
8
  DIRECTION_DEFAULT = :n
7
9
  ALIGN_DEFAULT = :default
8
10
  MULTILINE_DEFAULT = false
@@ -28,34 +30,34 @@ module Primer
28
30
 
29
31
  # @example Default
30
32
  # <div class="pt-5">
31
- # <%= render(Primer::TooltipComponent.new(label: "Even bolder")) { "Default Bold Text" } %>
33
+ # <%= render(Primer::Tooltip.new(label: "Even bolder")) { "Default Bold Text" } %>
32
34
  # </div>
33
35
  #
34
36
  # @example Wrapping another component
35
37
  # <div class="pt-5">
36
- # <%= render(Primer::TooltipComponent.new(label: "Even bolder")) do %>
38
+ # <%= render(Primer::Tooltip.new(label: "Even bolder")) do %>
37
39
  # <%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
38
40
  # <% end %>
39
41
  # </div>
40
42
  #
41
43
  # @example With a direction
42
44
  # <div class="pt-5">
43
- # <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
45
+ # <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
44
46
  # </div>
45
47
  #
46
48
  # @example With an alignment
47
49
  # <div class="pt-5">
48
- # <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
50
+ # <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
49
51
  # </div>
50
52
  #
51
53
  # @example Without a delay
52
54
  # <div class="pt-5">
53
- # <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
55
+ # <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
54
56
  # </div>
55
57
  #
56
58
  # @param label [String] the text to appear in the tooltip
57
- # @param direction [String] Direction of the tooltip. <%= one_of(Primer::TooltipComponent::DIRECTION_OPTIONS) %>
58
- # @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Primer::TooltipComponent::ALIGN_MAPPING.keys) %>
59
+ # @param direction [String] Direction of the tooltip. <%= one_of(Primer::Tooltip::DIRECTION_OPTIONS) %>
60
+ # @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Primer::Tooltip::ALIGN_MAPPING.keys) %>
59
61
  # @param multiline [Boolean] Use this when you have long content
60
62
  # @param no_delay [Boolean] By default the tooltips have a slight delay before appearing. Set true to override this
61
63
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # Use Truncate to shorten overflowing text with an ellipsis.
4
+ # Use `Truncate` to shorten overflowing text with an ellipsis.
5
5
  class Truncate < Primer::Component
6
6
  status :beta
7
7
 
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Primer
4
- # Use the UnderlineNav component to style navigation with a minimal
4
+ # Use `UnderlineNav` to style navigation with a minimal
5
5
  # underlined selected state, typically used for navigation placed at the top
6
6
  # of the page.
7
7
  class UnderlineNavComponent < Primer::Component
@@ -3,35 +3,29 @@
3
3
  module Primer
4
4
  # :nodoc:
5
5
  class Classify
6
- DIRECTION_KEY = :direction
7
- JUSTIFY_CONTENT_KEY = :justify_content
8
- ALIGN_ITEMS_KEY = :align_items
9
6
  DISPLAY_KEY = :display
10
7
  SPACING_KEYS = Primer::Classify::Spacing::KEYS
11
- RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
12
- BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
13
8
 
14
9
  # Keys where we can simply translate { key: value } into ".key-value"
15
10
  CONCAT_KEYS = SPACING_KEYS + %i[hide position v float col text box_shadow].freeze
16
11
 
17
12
  INVALID_CLASS_NAME_PREFIXES =
18
- (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
13
+ (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
19
14
 
20
15
  COLOR_KEY = :color
21
16
  BG_KEY = :bg
22
17
  VERTICAL_ALIGN_KEY = :vertical_align
23
18
  WORD_BREAK_KEY = :word_break
24
19
  TEXT_KEYS = %i[text_align font_weight].freeze
25
- FLEX_KEY = :flex
26
- FLEX_GROW_KEY = :flex_grow
27
- FLEX_SHRINK_KEY = :flex_shrink
28
- ALIGN_SELF_KEY = :align_self
29
20
  WIDTH_KEY = :width
30
21
  HEIGHT_KEY = :height
31
22
  BOX_SHADOW_KEY = :box_shadow
32
23
  VISIBILITY_KEY = :visibility
33
24
  ANIMATION_KEY = :animation
34
25
 
26
+ BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
27
+ RESPONSIVE_KEYS = ([DISPLAY_KEY, :col, :float] + SPACING_KEYS + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
28
+
35
29
  BOOLEAN_MAPPINGS = {
36
30
  underline: {
37
31
  mappings: [
@@ -89,6 +83,7 @@ module Primer
89
83
  BORDER_MARGIN_KEYS +
90
84
  TYPOGRAPHY_KEYS +
91
85
  TEXT_KEYS +
86
+ Primer::Classify::Flex::KEYS +
92
87
  [
93
88
  BORDER_KEY,
94
89
  BORDER_COLOR_KEY,
@@ -98,13 +93,6 @@ module Primer
98
93
  DISPLAY_KEY,
99
94
  VERTICAL_ALIGN_KEY,
100
95
  WORD_BREAK_KEY,
101
- DIRECTION_KEY,
102
- JUSTIFY_CONTENT_KEY,
103
- ALIGN_ITEMS_KEY,
104
- FLEX_KEY,
105
- FLEX_GROW_KEY,
106
- FLEX_SHRINK_KEY,
107
- ALIGN_SELF_KEY,
108
96
  WIDTH_KEY,
109
97
  HEIGHT_KEY,
110
98
  BOX_SHADOW_KEY,
@@ -120,7 +108,7 @@ module Primer
120
108
  extracted_results[:class] = [
121
109
  validated_class_names(classes),
122
110
  extracted_results.delete(:classes)
123
- ].compact.join(" ").presence
111
+ ].compact.join(" ").strip.presence
124
112
 
125
113
  extracted_results[:style] = [
126
114
  extracted_results.delete(:styles),
@@ -135,13 +123,13 @@ module Primer
135
123
  def validated_class_names(classes)
136
124
  return if classes.blank?
137
125
 
138
- if ENV["RAILS_ENV"] == "development"
126
+ if ENV["RAILS_ENV"] == "development" && !ENV["PRIMER_WARNINGS_DISABLED"]
139
127
  invalid_class_names =
140
128
  classes.split(" ").each_with_object([]) do |class_name, memo|
141
129
  memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
142
130
  end
143
131
 
144
- raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production." if invalid_class_names.any?
132
+ raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning." if invalid_class_names.any?
145
133
  end
146
134
 
147
135
  classes
@@ -216,23 +204,10 @@ module Primer
216
204
  memo[:classes] << "#{key.to_s.dasherize}-#{val}"
217
205
  elsif key == BORDER_RADIUS_KEY
218
206
  memo[:classes] << "rounded-#{val}"
219
- elsif key == DIRECTION_KEY
220
- memo[:classes] << "flex#{breakpoint}-#{val.to_s.dasherize}"
221
- elsif key == JUSTIFY_CONTENT_KEY
222
- formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
223
- memo[:classes] << "flex#{breakpoint}-justify-#{formatted_value}"
224
- elsif key == ALIGN_ITEMS_KEY
225
- memo[:classes] << "flex#{breakpoint}-items-#{val.to_s.gsub('flex_', '')}"
226
- elsif key == FLEX_KEY
227
- memo[:classes] << "flex-#{val}"
228
- elsif key == FLEX_GROW_KEY
229
- memo[:classes] << "flex-grow-#{val}"
230
- elsif key == FLEX_SHRINK_KEY
231
- memo[:classes] << "flex-shrink-#{val}"
232
- elsif key == ALIGN_SELF_KEY
233
- memo[:classes] << "flex-self-#{val}"
207
+ elsif Primer::Classify::Flex::KEYS.include?(key)
208
+ memo[:classes] << Primer::Classify::Flex.classes(key, val, breakpoint)
234
209
  elsif key == WIDTH_KEY || key == HEIGHT_KEY
235
- if val == :fit || val == :fill
210
+ if val == :fit
236
211
  memo[:classes] << "#{key}-#{val}"
237
212
  else
238
213
  memo[key] = val