primer_view_components 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: be0c09210143e8465e55e213978714a4b27a19d2ddb690e3dfc378e4e3123e3b
-  data.tar.gz: '0862e8437eff534e74fc1275f99c53f0445285de2cd409cd9ea4f20e54349ec0'
+  metadata.gz: 2ea13d4d8ce56ffb157e20f463e512f3f0b0d8f437202e9cee264edea500344c
+  data.tar.gz: 615a05c503420d654c6d5db7c772e9caca674af934aecc7c89100507d7dc405f
 SHA512:
-  metadata.gz: 2b0511a3995c27d1d0b7bb8979c53a1b72e6ae1ea73bff636278ccb590a386d96e46393d871e3993c613604c6e10dbc386cc1a1de6f6ebeebccbf3f973965326
-  data.tar.gz: 20ba7273f5b2d655c5ebb6c283ea2d36e34e2417fd51f6bd4698dc7187985baa1944b4f548a3756622f7c697742f3388bec5dd3f3d00d1e7a12936e011dea440
+  metadata.gz: 998e0a5a94c8e5a639d636b8a67b41a62fb596d4380d7b0f234709ae03599139df3c8a86d5854db8fc00b102a0b21ad3f0d1a854b1cf93141f9f1feafbfdf7dd
+  data.tar.gz: 9095e97ae9f8d0bcea88bc0ae239f30fb1484dae7ab8f4830f79500e7a122b2e6ecfc899ce28e0b38a0936799efc32af9dcf8ec611c25f8bdad1b429de9c68f4

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # main
 
+# 0.0.5
+
+* Add support for box_shadow
+* Add components:
+    * Popover
+
+    *Sarah Vessels*
+
 # 0.0.4
 
 * Added support for mx: and my: :auto.

data/README.md

@@ -81,6 +81,7 @@ Some components have their own specific arguments, but they can all be styled wi
 | `direction`     | `flex-<value>` | `direction: :row` → `.flex-row` |
 | `justify_content`    | `flex-justify-<value>` | `justify_content: :center` → `.flex-justify-center` |
 | `align_items`   | `flex-items-<value>` | `align_items: :baseline` → `.flex-items-baseline` |
+| `box_shadow` | `box-shadow-<value>` | `box_shadow: :medium` → `.box-shadow-medium` |
 
 #### Boolean arguments
 | Component arguments | True    | False |

data/app/components/primer/blankslate_component.html.erb

@@ -16,11 +16,11 @@
   <%= content %>
 
   <% if @button_text.present? && @button_url.present? %>
-    <p><a class="btn <%= @button_classes %>" href="<%= @button_url %>"><%= @button_text %></a></p>
+    <a class="btn <%= @button_classes %>" href="<%= @button_url %>"><%= @button_text %></a>
   <% end %>
 
   <% if @link_text.present? && @link_url.present? %>
-    <p class="mt-3">
+    <p>
       <%= link_to "#{@link_url}" do %><%= @link_text %><% end %>
     </p>
   <% end %>

data/app/components/primer/blankslate_component.rb

@@ -122,7 +122,7 @@ module Primer
       description: "",
       button_text: "",
       button_url: "",
-      button_classes: "btn-sm btn-primary",
+      button_classes: "btn-primary my-3",
       link_text: "",
       link_url: "",
 

data/app/components/primer/popover_component.html.erb

@@ -0,0 +1,10 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <%= render body.component do %>
+    <% if heading %>
+      <%= render heading.component do %>
+        <%= heading.content %>
+      <% end %>
+    <% end %>
+    <%= body.content %>
+  <% end %>
+<% end %>

data/app/components/primer/popover_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Primer
+  class PopoverComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :heading, class_name: "Heading"
+    with_slot :body, class_name: "Body"
+
+    def initialize(**kwargs)
+      @kwargs = kwargs
+      @kwargs[:tag] ||= :div
+      @kwargs[:classes] = class_names(
+        kwargs[:classes],
+        "Popover"
+      )
+      @kwargs[:position] ||= :relative
+      @kwargs[:right] = false unless kwargs.key?(:right)
+      @kwargs[:left] = false unless kwargs.key?(:left)
+    end
+
+    def render?
+      body.present?
+    end
+
+    class Heading < ViewComponent::Slot
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:mb] ||= 2
+        @kwargs[:tag] ||= :h4
+      end
+
+      def component
+        Primer::HeadingComponent.new(**@kwargs)
+      end
+    end
+
+    class Body < Slot
+      CARET_DEFAULT = :top
+      CARET_MAPPINGS = {
+        CARET_DEFAULT => "",
+        :bottom => "Popover-message--bottom",
+        :bottom_right => "Popover-message--bottom-right",
+        :bottom_left => "Popover-message--bottom-left",
+        :left => "Popover-message--left",
+        :left_bottom => "Popover-message--left-bottom",
+        :left_top => "Popover-message--left-top",
+        :right => "Popover-message--right",
+        :right_bottom => "Popover-message--right-bottom",
+        :right_top => "Popover-message--right-top",
+        :top_left => "Popover-message--top-left",
+        :top_right => "Popover-message--top-right"
+      }.freeze
+
+      def initialize(caret: CARET_DEFAULT, large: false, **kwargs)
+        @kwargs = kwargs
+        @kwargs[:classes] = class_names(
+          kwargs[:classes],
+          "Popover-message Box",
+          CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
+          "Popover-message--large" => large
+        )
+        @kwargs[:p] ||= 4
+        @kwargs[:mt] ||= 2
+        @kwargs[:mx] ||= :auto
+        @kwargs[:text_align] ||= :left
+        @kwargs[:box_shadow] ||= :large
+      end
+
+      def component
+        Primer::BoxComponent.new(**@kwargs)
+      end
+    end
+  end
+end

data/app/components/primer/view_components.rb

@@ -39,6 +39,7 @@ require_relative "heading_component"
 require_relative "label_component"
 require_relative "layout_component"
 require_relative "link_component"
+require_relative "popover_component"
 require_relative "progress_bar_component"
 require_relative "state_component"
 require_relative "subhead_component"

data/lib/primer/classify.rb

@@ -12,10 +12,10 @@ module Primer
     BREAKPOINTS = ["", "-sm", "-md", "-lg"]
 
     # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = SPACING_KEYS + [:hide, :position, :v, :float, :col, :text].freeze
+    CONCAT_KEYS = SPACING_KEYS + [:hide, :position, :v, :float, :col, :text, :box_shadow].freeze
 
     INVALID_CLASS_NAME_PREFIXES =
-      (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
+      (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
 
     COLOR_KEY = :color
     BG_KEY = :bg
@@ -28,6 +28,7 @@ module Primer
     ALIGN_SELF_KEY = :align_self
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
+    BOX_SHADOW_KEY = :box_shadow
 
 
     BOOLEAN_MAPPINGS = {
@@ -98,7 +99,8 @@ module Primer
         FLEX_SHRINK_KEY,
         ALIGN_SELF_KEY,
         WIDTH_KEY,
-        HEIGHT_KEY
+        HEIGHT_KEY,
+        BOX_SHADOW_KEY
       ]
     ).freeze
 
@@ -221,6 +223,12 @@ module Primer
               memo[:classes] << "f#{dasherized_val}"
             elsif MARGIN_DIRECTION_KEYS.include?(key) && val < 0
               memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}"
+            elsif key == BOX_SHADOW_KEY
+              if val == true
+                memo[:classes] << "box-shadow"
+              else
+                memo[:classes] << "box-shadow-#{dasherized_val}"
+              end
             else
               memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{dasherized_val}"
             end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 4
+      PATCH = 5
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
 platform: ruby
 authors:
 - GitHub Open Source
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-08-14 00:00:00.000000000 Z
+date: 2020-08-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -126,7 +126,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.13.0
-description: 
+description:
 email:
 - opensource+primer_view_components@github.com
 executables: []
@@ -159,6 +159,8 @@ files:
 - app/components/primer/layout_component.html.erb
 - app/components/primer/layout_component.rb
 - app/components/primer/link_component.rb
+- app/components/primer/popover_component.html.erb
+- app/components/primer/popover_component.rb
 - app/components/primer/progress_bar_component.html.erb
 - app/components/primer/progress_bar_component.rb
 - app/components/primer/slot.rb
@@ -182,7 +184,7 @@ licenses:
 - MIT
 metadata:
   allowed_push_host: https://rubygems.org
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -198,7 +200,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.1.2
-signing_key: 
+signing_key:
 specification_version: 4
 summary: ViewComponents for the Primer Design System
 test_files: []