openproject-primer_view_components 0.94.0 → 0.95.0

data/app/components/primer/open_project/color_swatch.css

@@ -0,0 +1 @@
+.ColorSwatch--indicator{border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-small);height:var(--base-size-12);width:var(--base-size-12)}

data/app/components/primer/open_project/color_swatch.css.json

@@ -0,0 +1,6 @@
+{
+  "name": "open_project/color_swatch",
+  "selectors": [
+    ".ColorSwatch--indicator"
+  ]
+}

data/app/components/primer/open_project/color_swatch.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["color_swatch.pcss"],"names":[],"mappings":"AAEA,wBACE,+DAAgE,CAChE,uCAAwC,CACxC,0BAA2B,CAC3B,yBACF","file":"color_swatch.css","sourcesContent":["/* CSS for ColorSwatch  */\n\n.ColorSwatch--indicator {\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-small);\n  height: var(--base-size-12);\n  width: var(--base-size-12);\n}\n"]}

data/app/components/primer/open_project/color_swatch.pcss

@@ -0,0 +1,8 @@
+/* CSS for ColorSwatch  */
+
+.ColorSwatch--indicator {
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-small);
+  height: var(--base-size-12);
+  width: var(--base-size-12);
+}

data/app/components/primer/open_project/color_swatch.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # Displays a small colored indicator for a given hex color code, optionally
+    # showing the hex value next to it.
+    class ColorSwatch < Primer::Component
+      status :open_project
+
+      # @param hexcode [String] The hex color code to display, e.g. `#FF0000`.
+      # @param show_value [Boolean] Whether to display the hex value next to the swatch.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(hexcode:, show_value: false, **system_arguments)
+        @hexcode = hexcode
+        @show_value = show_value
+        @system_arguments = system_arguments
+        @system_arguments[:align_items] ||= :center
+
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "ColorSwatch"
+        )
+      end
+
+      def call
+        render(Primer::OpenProject::FlexLayout.new(**@system_arguments)) do |flex|
+          flex.with_column do
+            render(Primer::BaseComponent.new(**swatch_arguments))
+          end
+
+          if show_value?
+            flex.with_column do
+              render(Primer::Beta::Text.new(tag: :span, ml: 2)) { hexcode }
+            end
+          end
+        end
+      end
+
+      private
+
+      attr_reader :hexcode
+
+      def show_value?
+        @show_value
+      end
+
+      def swatch_arguments
+        {
+          tag: :div,
+          classes: "ColorSwatch--indicator",
+          aria: { hidden: true },
+          style: "background-color: #{hexcode}"
+        }
+      end
+    end
+  end
+end

data/app/components/primer/open_project/inset_box.css

@@ -0,0 +1 @@
+.InsetBox--title-container{display:flex;align-items:center;gap:var(--base-size-8);margin-bottom:var(--base-size-8)}.InsetBox--body{display:grid;grid-template-areas:"content clip_board_copy" "actions actions";grid-template-columns:1fr auto;grid-template-rows:auto auto auto;align-items:center}.InsetBox--body--clip_board_copy{align-self:flex-start}.InsetBox--actions{gap:var(--base-size-8)}

data/app/components/primer/open_project/inset_box.css.json

@@ -0,0 +1,9 @@
+{
+  "name": "open_project/inset_box",
+  "selectors": [
+    ".InsetBox--title-container",
+    ".InsetBox--body",
+    ".InsetBox--body--clip_board_copy",
+    ".InsetBox--actions"
+  ]
+}

data/app/components/primer/open_project/inset_box.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["inset_box.pcss"],"names":[],"mappings":"AAEA,2BACE,YAAa,CACb,kBAAmB,CACnB,sBAAuB,CACvB,gCACF,CAEA,gBACE,YAAa,CACb,+DAAgE,CAChE,8BAA+B,CAC/B,iCAAkC,CAClC,kBACF,CAEA,iCACE,qBACF,CAEA,mBACE,sBACF","file":"inset_box.css","sourcesContent":["/* CSS for InsetBox  */\n\n.InsetBox--title-container {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  margin-bottom: var(--base-size-8);\n}\n\n.InsetBox--body {\n  display: grid;\n  grid-template-areas: \"content clip_board_copy\" \"actions actions\";\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto auto;\n  align-items: center;\n}\n\n.InsetBox--body--clip_board_copy {\n  align-self: flex-start;\n}\n\n.InsetBox--actions {\n  gap: var(--base-size-8);\n}\n"]}

data/app/components/primer/open_project/inset_box.html.erb

@@ -0,0 +1,46 @@
+<%= render(
+      Primer::Box.new(
+        border: @border,
+        border_radius: 2,
+        p: 3,
+        **@scheme_arguments,
+        **@system_arguments
+      )
+    ) do %>
+  <% if title? || title_icon? %>
+    <div class="InsetBox--title-container">
+      <%= title_icon %>
+      <%= title %>
+    </div>
+  <% end %>
+
+  <%= render(Primer::OpenProject::GridLayout.new(css_class: "InsetBox--body", tag: :div)) do |grid| %>
+    <% if clipboard_copy_button?
+         grid.with_area(:clip_board_copy) do
+           render(clipboard_copy_button)
+         end
+       end %>
+
+    <% grid.with_area(:content, overflow: :hidden) do
+         content
+       end %>
+
+    <% if actions.any? %>
+      <% grid.with_area(:actions) do %>
+        <%= render(
+              Primer::Box.new(
+                display: :flex,
+                align_items: :center,
+                flex_wrap: :wrap,
+                mt: 2,
+                classes: "InsetBox--actions"
+              )
+            ) do %>
+          <% actions.each do |action| %>
+            <%= action %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/inset_box.pcss

@@ -0,0 +1,24 @@
+/* CSS for InsetBox  */
+
+.InsetBox--title-container {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-8);
+  margin-bottom: var(--base-size-8);
+}
+
+.InsetBox--body {
+  display: grid;
+  grid-template-areas: "content clip_board_copy" "actions actions";
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto auto;
+  align-items: center;
+}
+
+.InsetBox--body--clip_board_copy {
+  align-self: flex-start;
+}
+
+.InsetBox--actions {
+  gap: var(--base-size-8);
+}

data/app/components/primer/open_project/inset_box.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A box with an inset background, used to call out a piece of content such
+    # as a tip, a warning, or a code snippet, optionally with a title, icon and actions.
+    class InsetBox < Primer::Component
+      status :open_project
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => { bg: :inset },
+        info: { bg: :accent, border_color: :accent },
+        warning: { bg: :attention, border_color: :attention },
+        danger: { bg: :danger, border_color: :danger },
+        success: { bg: :success, border_color: :success }
+      }.freeze
+
+      attr_reader :border, :scheme_arguments, :system_arguments
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :title_icon, Primer::Beta::Octicon
+
+      # @param tag [Symbol] <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :title, lambda { |tag: :h3, **system_arguments|
+        Primer::Beta::Heading.new(tag: tag, font_size: 5, font_weight: :semibold, **system_arguments)
+      }
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :actions, types: {
+        button: lambda { |**system_arguments|
+          Primer::Beta::Button.new(**system_arguments)
+        },
+        menu: lambda { |**system_arguments|
+          Primer::Alpha::ActionMenu.new(**system_arguments)
+        }
+      }
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :clipboard_copy_button, lambda { |**system_arguments|
+        system_arguments[:scheme] ||= :invisible
+        system_arguments[:size] = :small
+        system_arguments[:ml] = 2
+        Primer::Beta::ClipboardCopyButton.new(**system_arguments)
+      }
+
+      # @param border [Boolean] Whether to render a border around the box.
+      # @param scheme [Symbol] <%= one_of(Primer::OpenProject::InsetBox::SCHEME_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(border: true, scheme: DEFAULT_SCHEME, **system_arguments)
+        @border = border
+        @scheme_arguments = SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)]
+        @system_arguments = system_arguments
+
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "InsetBox"
+        )
+      end
+    end
+  end
+end

data/app/components/primer/primer.pcss

@@ -58,3 +58,5 @@
 @import "./open_project/collapsible_section.pcss";
 @import "./open_project/pagination.pcss";
 @import "./open_project/filterable_tree_view.pcss";
+@import "./open_project/color_swatch.pcss";
+@import "./open_project/inset_box.pcss";

data/lib/primer/view_components/version.rb

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

data/previews/primer/open_project/color_swatch_preview.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label ColorSwatch
+    class ColorSwatchPreview < ViewComponent::Preview
+      # @label Playground
+      # @param hexcode [String] text
+      # @param show_value [Boolean] toggle
+      def playground(hexcode: "#CC0000", show_value: false)
+        render(Primer::OpenProject::ColorSwatch.new(hexcode: hexcode, show_value: show_value))
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::OpenProject::ColorSwatch.new(hexcode: "#CC0000"))
+      end
+
+      # @label With value
+      # @snapshot
+      def with_value
+        render(Primer::OpenProject::ColorSwatch.new(hexcode: "#CC0000", show_value: true))
+      end
+    end
+  end
+end

data/previews/primer/open_project/inset_box_preview.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label InsetBox
+    class InsetBoxPreview < ViewComponent::Preview
+      # @label Playground
+      # @param border [Boolean] toggle
+      # @param scheme [Symbol] select [default, info, warning, danger, success]
+      # @param show_title [Boolean] toggle
+      # @param show_icon [Boolean] toggle
+      # @param show_actions [Boolean] toggle
+      # @param show_clipboard_copy_button [Boolean] toggle
+      def playground(border: true, scheme: :default, show_title: true, show_icon: false, show_actions: false, show_clipboard_copy_button: false)
+        render(Primer::OpenProject::InsetBox.new(border: border, scheme: scheme)) do |component|
+          component.with_title_icon(icon: :info) if show_icon
+          component.with_title { "Title" } if show_title
+          component.with_clipboard_copy_button(value: "Copyable value", "aria-label": "Copy value") if show_clipboard_copy_button
+
+          component.with_action_button(scheme: :default) { "Action" } if show_actions
+
+          "This is the content of the inset box."
+        end
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::OpenProject::InsetBox.new) do |component|
+          component.with_title { "Title" }
+          "This is the content of the inset box."
+        end
+      end
+
+      # @label With scheme
+      # @snapshot
+      def with_scheme
+        render(Primer::OpenProject::InsetBox.new(scheme: :warning)) do |component|
+          component.with_title { "Watch out" }
+          "This is a warning message."
+        end
+      end
+
+      # @label With icon
+      # @snapshot
+      def with_icon
+        render(Primer::OpenProject::InsetBox.new) do |component|
+          component.with_title_icon(icon: :info)
+          component.with_title { "Title" }
+          "This is the content of the inset box."
+        end
+      end
+
+      # @label With clipboard copy button
+      # @snapshot
+      def with_clipboard_copy_button
+        render(Primer::OpenProject::InsetBox.new) do |component|
+          component.with_title { "Title" }
+          component.with_clipboard_copy_button(value: "Copyable value", "aria-label": "Copy value")
+          "This is the content of the inset box."
+        end
+      end
+
+      # @label With actions
+      # @snapshot
+      def with_actions
+        render(Primer::OpenProject::InsetBox.new) do |component|
+          component.with_title { "Title" }
+          component.with_action_button(scheme: :default) { "Edit" }
+          component.with_action_button(scheme: :danger) { "Delete" }
+          "This is the content of the inset box."
+        end
+      end
+
+      # @label Without border
+      # @snapshot
+      def without_border
+        render(Primer::OpenProject::InsetBox.new(border: false)) do |component|
+          component.with_title { "Title" }
+          "This is the content of the inset box."
+        end
+      end
+    end
+  end
+end

data/static/arguments.json

@@ -6127,6 +6127,34 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::ColorSwatch",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectColorSwatch",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/color_swatch.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/color_swatch/default/",
+    "parameters": [
+      {
+        "name": "hexcode",
+        "type": "String",
+        "default": "N/A",
+        "description": "The hex color code to display, e.g. `#FF0000`."
+      },
+      {
+        "name": "show_value",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to display the hex value next to the swatch."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::DangerDialog",
     "status": "open_project",
@@ -6543,6 +6571,34 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::InsetBox",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectInsetBox",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/inset_box.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/inset_box/default/",
+    "parameters": [
+      {
+        "name": "border",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "Whether to render a border around the box."
+      },
+      {
+        "name": "scheme",
+        "type": "Symbol",
+        "default": "`:default`",
+        "description": "One of `:danger`, `:default`, `:info`, `:success`, or `:warning`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::PageHeader",
     "status": "open_project",

data/static/audited_at.json

@@ -147,6 +147,7 @@
   "Primer::OpenProject::BorderGrid::Cell": "",
   "Primer::OpenProject::CollapsibleSection": "",
   "Primer::OpenProject::ColorField": "",
+  "Primer::OpenProject::ColorSwatch": "",
   "Primer::OpenProject::DangerDialog": "",
   "Primer::OpenProject::DangerDialog::ConfirmationCheckBox": "",
   "Primer::OpenProject::DangerDialog::FormWrapper": "",
@@ -163,6 +164,7 @@
   "Primer::OpenProject::Heading": "",
   "Primer::OpenProject::InlineMessage": "",
   "Primer::OpenProject::InputGroup": "",
+  "Primer::OpenProject::InsetBox": "",
   "Primer::OpenProject::PageHeader": "",
   "Primer::OpenProject::PageHeader::Dialog": "",
   "Primer::OpenProject::PageHeader::Menu": "",

data/static/classes.json

@@ -268,6 +268,9 @@
   "ColorField": [
     "Primer::OpenProject::ColorField"
   ],
+  "ColorSwatch--indicator": [
+    "Primer::OpenProject::ColorSwatch"
+  ],
   "Counter": [
     "Primer::Beta::Counter"
   ],
@@ -388,6 +391,18 @@
   "InputGroup": [
     "Primer::OpenProject::InputGroup"
   ],
+  "InsetBox--actions": [
+    "Primer::OpenProject::InsetBox"
+  ],
+  "InsetBox--body": [
+    "Primer::OpenProject::InsetBox"
+  ],
+  "InsetBox--body--clip_board_copy": [
+    "Primer::OpenProject::InsetBox"
+  ],
+  "InsetBox--title-container": [
+    "Primer::OpenProject::InsetBox"
+  ],
   "Label": [
     "Primer::Beta::Label"
   ],

data/static/classnames.cjs

@@ -126,6 +126,7 @@ module.exports = new Set([
   'ColorField-picker',
   'ColorField-swatch',
   'ColorField-wrap',
+  'ColorSwatch--indicator',
   'Counter',
   'Counter--primary',
   'Counter--secondary',
@@ -196,6 +197,10 @@ module.exports = new Set([
   'InputGroup-input-width--xlarge',
   'InputGroup-input-width--xsmall',
   'InputGroup-input-width--xxlarge',
+  'InsetBox--actions',
+  'InsetBox--body',
+  'InsetBox--body--clip_board_copy',
+  'InsetBox--title-container',
   'Label',
   'Label--accent',
   'Label--attention',

data/static/classnames.js

@@ -126,6 +126,7 @@ const classNames = new Set([
   'ColorField-picker',
   'ColorField-swatch',
   'ColorField-wrap',
+  'ColorSwatch--indicator',
   'Counter',
   'Counter--primary',
   'Counter--secondary',
@@ -196,6 +197,10 @@ const classNames = new Set([
   'InputGroup-input-width--xlarge',
   'InputGroup-input-width--xsmall',
   'InputGroup-input-width--xxlarge',
+  'InsetBox--actions',
+  'InsetBox--body',
+  'InsetBox--body--clip_board_copy',
+  'InsetBox--title-container',
   'Label',
   'Label--accent',
   'Label--attention',

data/static/constants.json

@@ -1767,6 +1767,9 @@
   "Primer::OpenProject::ColorField": {
     "GeneratedSlotMethods": "Primer::OpenProject::ColorField::GeneratedSlotMethods"
   },
+  "Primer::OpenProject::ColorSwatch": {
+    "GeneratedSlotMethods": "Primer::OpenProject::ColorSwatch::GeneratedSlotMethods"
+  },
   "Primer::OpenProject::DangerDialog": {
     "ConfirmationCheckBox": "Primer::OpenProject::DangerDialog::ConfirmationCheckBox",
     "FormWrapper": "Primer::OpenProject::DangerDialog::FormWrapper",
@@ -1900,6 +1903,31 @@
       "xxlarge"
     ]
   },
+  "Primer::OpenProject::InsetBox": {
+    "DEFAULT_SCHEME": "default",
+    "GeneratedSlotMethods": "Primer::OpenProject::InsetBox::GeneratedSlotMethods",
+    "SCHEME_MAPPINGS": {
+      "default": {
+        "bg": "inset"
+      },
+      "info": {
+        "bg": "accent",
+        "border_color": "accent"
+      },
+      "warning": {
+        "bg": "attention",
+        "border_color": "attention"
+      },
+      "danger": {
+        "bg": "danger",
+        "border_color": "danger"
+      },
+      "success": {
+        "bg": "success",
+        "border_color": "success"
+      }
+    }
+  },
   "Primer::OpenProject::PageHeader": {
     "BACK_BUTTON_ICON_OPTIONS": [
       "arrow-left",