primer_view_components 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8e2de200019cce82f6ab8da4f177fffa54cf62f703bca353b05376c9c7cb62ab
-  data.tar.gz: 9166cc8d3208cbaee4e9c0ae12cca3c5b53faa56d081fd4baa28f79b0d48f1fa
+  metadata.gz: 25626f31190d4622e822db5eb8f435f103c0a77668cb78c1db16eec60ac4dfb9
+  data.tar.gz: e551785879e69a0bd7c2ae62a97a39f311dc3dbc415bc5dade637d97fa297910
 SHA512:
-  metadata.gz: deb5e962d169066fe55d7c28f9c81f7d5e59f5e13ee57dd33dfc80b0f37422c60feabb850ec4c6c02253ad3cace554a0146f74ed1287e075560ee39453e2f1f3
-  data.tar.gz: e15db34d645de8e42bb29136d95c2caf87c61e4c2c84f09bbbe9a4f11ed48a99478c1f06b0fc7bf165806a74b30e6ff15fcaf1439b3bebee290765759cd3f0b5
+  metadata.gz: 6a77219748e0c7018f789df844cd6f6e83159b2fef82a5b81985c277d0427d85442e4e14c6f9934e387afc3f1d2291f31a3d88c9630c8f4910bae992d39a0188
+  data.tar.gz: 15b0b2a9faa1603f57d263a2a6b18f2eb4e1aa325d8c261bfce9f803571ae9a5075b1d51f8a5f3bf31bc7f12662dbe914f7380f71518fe6896b947f2d000757b

data/CHANGELOG.md

@@ -1,3 +1,21 @@
+# main
+
+# 0.0.8
+
+* Add support for border margins, such as: `border_top: 0`.
+
+    *Natasha Umer*
+
+* Add FlashComponent and OcticonComponent.
+
+    *Joel Hawksley*
+
+## Breaking changes
+
+* BlankslateComponent accepts `icon_size` instead of `icon_height`.
+
+    *Joel Hawksley*
+
 # 0.0.7
 
 * Use `octicons_helper` v11.0.0.

data/README.md

@@ -77,6 +77,10 @@ Some components have their own specific arguments, but they can all be styled wi
 | `font_weight`     | `text-<value>` | `font_weight: :bold` → `.text-bold` |
 | `border`     | `border-<value>` | `border: :bottom` → `.border-bottom` |
 | `border_color`     | `border-<value>` | `border: :green` → `.border-green` |
+| `border_top`     | `border-top-<value>` | `border_top: 0` → `.border-top-0` |
+| `border_bottom`     | `border-bottom-<value>` | `border_bottom: 0` → `.border-bottom-0` |
+| `border_left`     | `border-left-<value>` | `border_left: 0` → `.border-left-0` |
+| `border_right`     | `border-right-<value>` | `border_right: 0` → `.border-right-0` |
 | `word_break`     | `wb-<value>` | `word_break: :break_all` → `.wb-break-all` |
 | `direction`     | `flex-<value>` | `direction: :row` → `.flex-row` |
 | `justify_content`    | `flex-justify-<value>` | `justify_content: :center` → `.flex-justify-center` |

data/app/components/primer/base_component.rb

@@ -23,9 +23,7 @@ module Primer
     end
 
     def call
-      tag.public_send(
-        @tag, content, **@content_tag_args.merge(@result)
-      )
+      content_tag(@tag, content, **@content_tag_args.merge(@result))
     end
 
     private

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

@@ -1,13 +1,19 @@
 <%= render Primer::BaseComponent.new(**@kwargs) do %>
   <% if @icon.present? %>
-    <%= octicon @icon, height: @icon_height, class: "blankslate-icon" %>
+    <%= render(Primer::OcticonComponent.new(
+      icon: @icon,
+      size: @icon_size,
+      class: "blankslate-icon"
+    )) %>
   <% end %>
 
   <% if @image_src.present? && @image_alt.present? %>
     <%= image_tag "#{@image_src}", class: "mb-3", size: "56x56", alt: "#{@image_alt}" %>
   <% end %>
 
-  <<%= @title_tag %> class="mb-1"><%= @title %></<%= @title_tag %>>
+  <% if @title.present? %>
+    <%= render Primer::BaseComponent.new(tag: @title_tag, mb: 1) do %><%= @title %><% end %>
+  <% end %>
 
   <% if @description.present? %>
     <p><%= @description %></p>

data/app/components/primer/blankslate_component.rb

@@ -7,7 +7,7 @@ module Primer
   #
   # The `Primer::BlankslateComponent` supports the following arguments to add a basic blankslate:
   #
-  # 1. `title` (`String` required). Text that appears in a larger bold font.
+  # 1. `title` (`String` optional). Text that appears in a larger bold font.
   # 2. `description` (`String` optional). Text that appears below the title. Typically a whole sentence.
   #
   # ```ruby
@@ -114,13 +114,10 @@ module Primer
   # ```
   class BlankslateComponent < Primer::Component
     def initialize(
-      # required
-      title:,
-
-      # optional
+      title: "",
       title_tag: :h3,
       icon: "",
-      icon_height: 32,
+      icon_size: :medium,
       image_src: "",
       image_alt: " ",
       description: "",
@@ -138,7 +135,7 @@ module Primer
       **kwargs
     )
       @kwargs = kwargs
-      @kwargs[:tag] = :div
+      @kwargs[:tag] ||= :div
       @kwargs[:classes] = class_names(
         @kwargs[:classes],
         "blankslate",
@@ -149,7 +146,7 @@ module Primer
 
       @title_tag = title_tag
       @icon = icon
-      @icon_height = icon_height
+      @icon_size = icon_size
       @image_src = image_src
       @image_alt = image_alt
       @title = title

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

@@ -0,0 +1,14 @@
+<%= render Primer::BaseComponent.new(**@kwargs) do %>
+  <%= render(Primer::OcticonComponent.new(icon: @icon)) if @icon %>
+  <%= content %>
+  <% if @dismissible %>
+    <button class="flash-close js-flash-close" type="button" aria-label="Close">
+      <%= render(Primer::OcticonComponent.new(icon: "x")) %>
+    </button>
+  <% end %>
+  <% if actions.present? %>
+    <%= render Primer::BaseComponent.new(**actions.kwargs) do %>
+      <%= actions.content %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/flash_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Primer
+  class FlashComponent < Primer::Component
+    include ViewComponent::Slotable
+
+    with_slot :actions, class_name: "Actions"
+
+    DEFAULT_VARIANT = :default
+    VARIANT_MAPPINGS = {
+      DEFAULT_VARIANT => "",
+      :warning => "flash-warn",
+      :danger => "flash-error",
+      :success => "flash-success"
+    }.freeze
+
+    def initialize(full: false, spacious: false, dismissible: false, icon: nil, variant: DEFAULT_VARIANT, **kwargs)
+      @icon = icon
+      @dismissible = dismissible
+      @kwargs = kwargs
+      @kwargs[:tag] = :div
+      @kwargs[:classes] = class_names(
+        @kwargs[:classes],
+        "flash",
+        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant.to_sym, DEFAULT_VARIANT)],
+        "flash-full": full
+      )
+      @kwargs[:mb] ||= spacious ? 4 : nil
+    end
+
+    class Actions < ViewComponent::Slot
+      include ClassNameHelper
+
+      attr_reader :kwargs
+
+      def initialize(**kwargs)
+        @kwargs = kwargs
+        @kwargs[:tag] = :div
+        @kwargs[:classes] = class_names(@kwargs[:classes], "flash-action")
+      end
+    end
+  end
+end

data/app/components/primer/octicon_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Primer
+  class OcticonComponent < Primer::Component
+    include Primer::ClassNameHelper
+    include OcticonsHelper
+
+    SIZE_DEFAULT = :small
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => 16,
+      :medium => 32,
+      :large => 64,
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(icon:, size: SIZE_DEFAULT, **kwargs)
+      @icon, @kwargs = icon, kwargs
+
+      @kwargs[:height] = SIZE_MAPPINGS[size.to_sym]
+      @kwargs[:class] = class_names(@kwargs[:class], Primer::Classify.call(**@kwargs)[:class])
+    end
+
+    def call
+      octicon(@icon, **@kwargs)
+    end
+  end
+end

data/app/components/primer/view_components.rb

@@ -33,12 +33,14 @@ require_relative "button_component"
 require_relative "counter_component"
 require_relative "details_component"
 require_relative "dropdown_menu_component"
+require_relative "flash_component"
 require_relative "flex_component"
 require_relative "flex_item_component"
 require_relative "heading_component"
 require_relative "label_component"
 require_relative "layout_component"
 require_relative "link_component"
+require_relative "octicon_component"
 require_relative "popover_component"
 require_relative "progress_bar_component"
 require_relative "state_component"

data/lib/primer/classify.rb

@@ -78,11 +78,13 @@ module Primer
       }
     }.freeze
     BORDER_KEYS = [:border, :border_color].freeze
+    BORDER_MARGIN_KEYS = [:border_top, :border_bottom, :border_left, :border_right].freeze
     TYPOGRAPHY_KEYS = [:font_size].freeze
     VALID_KEYS = (
       CONCAT_KEYS +
       BOOLEAN_MAPPINGS.keys +
       BORDER_KEYS +
+      BORDER_MARGIN_KEYS +
       TYPOGRAPHY_KEYS +
       TEXT_KEYS +
       [
@@ -196,6 +198,8 @@ module Primer
               memo[:classes] << "wb-#{dasherized_val}"
             elsif BORDER_KEYS.include?(key)
               memo[:classes] << "border-#{dasherized_val}"
+            elsif BORDER_MARGIN_KEYS.include?(key)
+              memo[:classes] << "#{key.to_s.dasherize}-#{val}"
             elsif key == DIRECTION_KEY
               memo[:classes] << "flex#{breakpoint}-#{dasherized_val}"
             elsif key == JUSTIFY_CONTENT_KEY

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 7
+      PATCH = 8
 
       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.7
+  version: 0.0.8
 platform: ruby
 authors:
 - GitHub Open Source
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-09-09 00:00:00.000000000 Z
+date: 2020-09-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -168,7 +168,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.9.25
-description: 
+description:
 email:
 - opensource+primer_view_components@github.com
 executables: []
@@ -194,6 +194,8 @@ files:
 - app/components/primer/details_component.rb
 - app/components/primer/dropdown_menu_component.html.erb
 - app/components/primer/dropdown_menu_component.rb
+- app/components/primer/flash_component.html.erb
+- app/components/primer/flash_component.rb
 - app/components/primer/flex_component.rb
 - app/components/primer/flex_item_component.rb
 - app/components/primer/heading_component.rb
@@ -201,6 +203,7 @@ files:
 - app/components/primer/layout_component.html.erb
 - app/components/primer/layout_component.rb
 - app/components/primer/link_component.rb
+- app/components/primer/octicon_component.rb
 - app/components/primer/popover_component.html.erb
 - app/components/primer/popover_component.rb
 - app/components/primer/progress_bar_component.html.erb
@@ -226,7 +229,7 @@ licenses:
 - MIT
 metadata:
   allowed_push_host: https://rubygems.org
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -242,7 +245,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: []