primer_view_components 0.0.110 → 0.0.112

data/app/components/primer/beta/link.pcss

@@ -0,0 +1,60 @@
+/* Links */
+
+.Link {
+  color: var(--color-accent-fg);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
+}
+
+.Link--primary {
+  color: var(--color-fg-default) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+  }
+}
+
+.Link--secondary {
+  color: var(--color-fg-muted) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+  }
+}
+
+.Link--muted {
+  color: var(--color-fg-muted) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+    text-decoration: none;
+  }
+}
+
+/* Set the link color only on hover
+   Useful when you want only part of a link to turn blue on hover */
+.Link--onHover {
+  &:hover {
+    color: var(--color-accent-fg) !important;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+/* When using a color utility class inside of a link class
+   color should change with link on hover. */
+.Link--secondary,
+.Link--primary,
+.Link--muted {
+  &:hover [class*='color-fg'] {
+    color: inherit !important;
+  }
+}

data/app/components/primer/beta/popover.css

@@ -0,0 +1 @@
+.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--color-canvas-overlay);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--color-border-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--color-canvas-overlay);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--color-border-default);bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--color-canvas-overlay);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--color-border-default);right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--color-canvas-overlay);right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--color-border-default);left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--color-canvas-overlay);left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--primer-stack-gap-condensed,8px);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--primer-control-medium-paddingInline-normal,12px)!important}.Popover-message:after,.Popover-message:before{display:none}}

data/app/components/primer/beta/popover.css.json

@@ -0,0 +1 @@
+{"name":"beta/popover","selectors":[".Popover",".Popover-message",".Popover-message:after",".Popover-message:before",".Popover-message--no-caret:after",".Popover-message--no-caret:before",".Popover-message--bottom-left:after",".Popover-message--bottom-left:before",".Popover-message--bottom-right:after",".Popover-message--bottom-right:before",".Popover-message--bottom:after",".Popover-message--bottom:before",".Popover-message--bottom-right",".Popover-message--top-right",".Popover-message--top-right:after",".Popover-message--top-right:before",".Popover-message--bottom-left",".Popover-message--top-left",".Popover-message--top-left:after",".Popover-message--top-left:before",".Popover-message--left-bottom:after",".Popover-message--left-bottom:before",".Popover-message--left-top:after",".Popover-message--left-top:before",".Popover-message--left:after",".Popover-message--left:before",".Popover-message--right-bottom:after",".Popover-message--right-bottom:before",".Popover-message--right-top:after",".Popover-message--right-top:before",".Popover-message--right:after",".Popover-message--right:before",".Popover-message--large",".Popover-message>.btn-octicon"]}

data/app/components/primer/beta/popover.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAAgD,CAAhD,mDAAgD,CAFhD,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,4CAA6C,CAD7C,YAEF,CAEA,wGAEE,4CAA6C,CAD7C,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,6CAA8C,CAD9C,WAEF,CAEA,qGAEE,6CAA8C,CAD9C,WAEF,CAOA,qGAEE,8CAA+C,CAD/C,UAEF,CAEA,kGAEE,8CAA+C,CAD/C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,4CAA8C,CAJ9C,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,wEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n  position: absolute;\n  z-index: 100;\n}\n\n.Popover-message {\n  position: relative;\n  width: 232px;\n  margin-right: auto;\n  margin-left: auto;\n  background-color: var(--color-canvas-overlay);\n  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n\n  /* Carets */\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: '';\n  }\n\n  &::before {\n    top: -16px;\n    margin-left: -9px;\n    border: 8px solid transparent;\n    border-bottom-color: var(--color-border-default);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -8px;\n    border: 7px solid transparent;\n    border-bottom-color: var(--color-canvas-overlay);\n  }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n  &::before,\n  &::after {\n    display: none;\n  }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n  &::before,\n  &::after {\n    top: auto;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    bottom: -16px;\n    border-top-color: var(--color-border-default);\n  }\n\n  &::after {\n    bottom: -14px;\n    border-top-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Top & Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n  right: -9px;\n  margin-right: 0;\n\n  &::before,\n  &::after {\n    left: auto;\n    margin-left: 0;\n  }\n\n  &::before {\n    right: 20px;\n  }\n\n  &::after {\n    right: 21px;\n  }\n}\n\n/* Top & Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n  left: -9px;\n  margin-left: 0;\n\n  &::before,\n  &::after {\n    left: 24px;\n    margin-left: 0;\n  }\n\n  &::after {\n    left: 25px;\n  }\n}\n\n/* Right- & Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: 50%;\n    left: auto;\n    margin-left: 0;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    margin-top: -9px;\n  }\n\n  &::after {\n    margin-top: -8px;\n  }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n  &::before {\n    right: -16px;\n    border-left-color: var(--color-border-default);\n  }\n\n  &::after {\n    right: -14px;\n    border-left-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before {\n    left: -16px;\n    border-right-color: var(--color-border-default);\n  }\n\n  &::after {\n    left: -14px;\n    border-right-color: var(--color-canvas-overlay);\n  }\n}\n\n/* Right & Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n  &::before,\n  &::after {\n    top: 24px;\n  }\n}\n\n/* Right & Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: auto;\n  }\n\n  &::before {\n    bottom: 16px;\n  }\n\n  &::after {\n    bottom: 17px;\n  }\n}\n\n@media (min-width: 544px) {\n  .Popover-message--large {\n    min-width: 320px;\n  }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n  .Popover {\n    position: fixed;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: 0 !important;\n  }\n\n  .Popover-message {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n    width: auto !important;\n    margin: var(--primer-stack-gap-condensed, 8px);\n  }\n\n  /* Increase tap area for touch input */\n  .Popover-message > .btn-octicon {\n    padding: var(--primer-control-medium-paddingInline-normal, 12px) !important;\n  }\n\n  /* Remove caret */\n  .Popover-message::after,\n  .Popover-message::before {\n    display: none;\n  }\n}\n"]}

data/app/components/primer/beta/popover.pcss

@@ -0,0 +1,225 @@
+/* Popover */
+
+.Popover {
+  position: absolute;
+  z-index: 100;
+}
+
+.Popover-message {
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: var(--color-canvas-overlay);
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+
+  /* Carets */
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: '';
+  }
+
+  &::before {
+    top: -16px;
+    margin-left: -9px;
+    border: 8px solid transparent;
+    border-bottom-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: -14px;
+    margin-left: -8px;
+    border: 7px solid transparent;
+    border-bottom-color: var(--color-canvas-overlay);
+  }
+}
+
+/* No caret */
+.Popover-message--no-caret {
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
+/* Bottom-oriented carets */
+.Popover-message--bottom,
+.Popover-message--bottom-right,
+.Popover-message--bottom-left {
+  &::before,
+  &::after {
+    top: auto;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    bottom: -16px;
+    border-top-color: var(--color-border-default);
+  }
+
+  &::after {
+    bottom: -14px;
+    border-top-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Top & Bottom: Right-oriented carets */
+.Popover-message--top-right,
+.Popover-message--bottom-right {
+  right: -9px;
+  margin-right: 0;
+
+  &::before,
+  &::after {
+    left: auto;
+    margin-left: 0;
+  }
+
+  &::before {
+    right: 20px;
+  }
+
+  &::after {
+    right: 21px;
+  }
+}
+
+/* Top & Bottom: Left-oriented carets */
+.Popover-message--top-left,
+.Popover-message--bottom-left {
+  left: -9px;
+  margin-left: 0;
+
+  &::before,
+  &::after {
+    left: 24px;
+    margin-left: 0;
+  }
+
+  &::after {
+    left: 25px;
+  }
+}
+
+/* Right- & Left-oriented carets */
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom,
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: 50%;
+    left: auto;
+    margin-left: 0;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    margin-top: -9px;
+  }
+
+  &::after {
+    margin-top: -8px;
+  }
+}
+
+/* Right-oriented carets */
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom {
+  &::before {
+    right: -16px;
+    border-left-color: var(--color-border-default);
+  }
+
+  &::after {
+    right: -14px;
+    border-left-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Left-oriented carets */
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before {
+    left: -16px;
+    border-right-color: var(--color-border-default);
+  }
+
+  &::after {
+    left: -14px;
+    border-right-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Right & Left: Top-oriented carets */
+.Popover-message--right-top,
+.Popover-message--left-top {
+  &::before,
+  &::after {
+    top: 24px;
+  }
+}
+
+/* Right & Left: Bottom-oriented carets */
+.Popover-message--right-bottom,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: auto;
+  }
+
+  &::before {
+    bottom: 16px;
+  }
+
+  &::after {
+    bottom: 17px;
+  }
+}
+
+@media (min-width: 544px) {
+  .Popover-message--large {
+    min-width: 320px;
+  }
+}
+
+/* Responsive Popover
+** For < md it will show full-width anchored to the bottom */
+
+@media (max-width: 767.98px) {
+  .Popover {
+    position: fixed;
+    top: auto !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+  }
+
+  .Popover-message {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    width: auto !important;
+    margin: var(--primer-stack-gap-condensed, 8px);
+  }
+
+  /* Increase tap area for touch input */
+  .Popover-message > .btn-octicon {
+    padding: var(--primer-control-medium-paddingInline-normal, 12px) !important;
+  }
+
+  /* Remove caret */
+  .Popover-message::after,
+  .Popover-message::before {
+    display: none;
+  }
+}

data/app/components/primer/beta/popover.rb

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
+    #
+    # 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.
+    class Popover < Primer::Component
+      status :beta
+
+      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
+
+      DEFAULT_HEADING_TAG = :h4
+
+      # The heading
+      #
+      # @param tag [Symbol] (Primer::Beta::Popover::DEFAULT_HEADING_TAG) <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
+        system_arguments[:tag] = tag
+        system_arguments[:mb] ||= 2
+
+        Primer::Beta::Heading.new(**system_arguments)
+      }
+
+      # The body
+      #
+      # @param caret [Symbol] <%= one_of(Primer::Beta::Popover::CARET_MAPPINGS.keys) %>
+      # @param large [Boolean] Whether to use the large version of the component.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |caret: CARET_DEFAULT, large: false, **system_arguments|
+        @body_arguments = system_arguments
+        @body_arguments[:classes] = class_names(
+          @body_arguments[:classes],
+          "Popover-message Box",
+          CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
+          "Popover-message--large" => large
+        )
+        @body_arguments[:p] ||= 4
+        @body_arguments[:mt] ||= 2
+        @body_arguments[:mx] ||= :auto
+        @body_arguments[:text_align] ||= :left
+        @body_arguments[:box_shadow] ||= :large
+
+        Primer::Content.new
+      }
+
+      # @example Default
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body do %>
+      #       This is the Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Large
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(large: true) do %>
+      #       This is the large Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Caret position
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(caret: :left) do %>
+      #       This is the Popover body.
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With multiple elements in the body
+      #   <%= render Primer::Beta::Popover.new do |component| %>
+      #     <% component.with_heading do %>
+      #       Activity feed
+      #     <% end %>
+      #     <% component.with_body(caret: :left) do %>
+      #       <p>This is the Popover body.</p>
+      #       <%= render Primer::ButtonComponent.new(type: :submit) do %>
+      #         Got it!
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "Popover"
+        )
+        @system_arguments[:position] ||= :relative
+        @system_arguments[:right] = false unless @system_arguments.delete(:right)
+        @system_arguments[:left] = false unless @system_arguments.delete(:left)
+      end
+
+      def render?
+        body.present?
+      end
+
+      def body_component
+        Primer::Box.new(**@body_arguments)
+      end
+    end
+  end
+end

data/app/components/primer/component.rb

@@ -121,11 +121,11 @@ module Primer
     end
 
     def should_raise_error?
-      raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
+      !Rails.env.production? && raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
     end
 
     def should_raise_aria_error?
-      raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
+      !Rails.env.production? && raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
     end
   end
 end

data/app/components/primer/dropdown/menu.rb

@@ -2,97 +2,12 @@
 
 module Primer
   class Dropdown
-    # This component is part of `Dropdown` and should not be
-    # used as a standalone component.
-    class Menu < Primer::Component
-      AS_DEFAULT = :default
-      AS_OPTIONS = [AS_DEFAULT, :list].freeze
+    # :nodoc:
+    class Menu < Primer::Alpha::Dropdown::Menu
+      status :deprecated
 
-      SCHEME_DEFAULT = :default
-      SCHEME_MAPPINGS = {
-        SCHEME_DEFAULT => "",
-        :dark => "dropdown-menu-dark"
-      }.freeze
-
-      DIRECTION_DEFAULT = :se
-      DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
-
-      # @param tag [Symbol] <%= one_of(Primer::Dropdown::Menu::Item::TAG_OPTIONS) %>.
-      # @param divider [Boolean] Whether the item is a divider without any function.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_many :items, lambda { |divider: false, **system_arguments|
-        Primer::Dropdown::Menu::Item.new(as: @as, divider: divider, **system_arguments)
-      }
-
-      # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
-      # @param direction [Symbol] <%= one_of(Primer::Dropdown::Menu::DIRECTION_OPTIONS) %>.
-      # @param header [String] Header to be displayed above the menu.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(as: AS_DEFAULT, direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
-        @header = header
-        @direction = direction
-        @as = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
-
-        @system_arguments = deny_tag_argument(**system_arguments)
-        @system_arguments[:tag] = "details-menu"
-        @system_arguments[:role] = "menu"
-
-        @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "dropdown-menu",
-          "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
-          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
-        )
-      end
-
-      private
-
-      def list?
-        @as == :list
-      end
-
-      # Items to be rendered in the `Dropdown` menu.
-      class Item < Primer::Component
-        TAG_DEFAULT = :a
-        BUTTON_TAGS = [:button, :summary].freeze
-        TAG_OPTIONS = [TAG_DEFAULT, *BUTTON_TAGS].freeze
-
-        def initialize(as:, tag: TAG_DEFAULT, divider: false, **system_arguments)
-          @divider = divider
-          @as = as
-
-          @system_arguments = system_arguments
-          @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
-          @system_arguments[:tag] = :li if list? && divider?
-          @system_arguments[:role] ||= :menuitem
-          @system_arguments[:role] = :separator if divider
-          @system_arguments[:classes] = class_names(
-            @system_arguments[:classes],
-            "dropdown-item" => !divider,
-            "dropdown-divider" => divider
-          )
-        end
-
-        def call
-          component = if BUTTON_TAGS.include?(@system_arguments[:tag])
-                        Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
-                      else
-                        Primer::BaseComponent.new(**@system_arguments)
-                      end
-
-          # divider has no content
-          render(component) if divider?
-
-          render(component) { content }
-        end
-
-        def divider?
-          @divider
-        end
-
-        def list?
-          @as == :list
-        end
+      class Item < Primer::Alpha::Dropdown::Menu::Item
+        status :deprecated
       end
     end
   end