openproject-primer_view_components 0.6.3

data/app/components/primer/alpha/dialog.pcss

@@ -0,0 +1,482 @@
+/* Overlay */
+
+.Overlay--hidden {
+  display: none !important;
+}
+
+.Overlay--visibilityHidden {
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.Overlay {
+  display: flex;
+  width: min(var(--overlay-width), 100vw - 2rem);
+  min-width: 192px;
+  max-height: min(calc(100vh - 2rem), var(--overlay-height));
+  white-space: normal;
+  flex-direction: column;
+  background-color: var(--overlay-bgColor);
+  border-radius: var(--borderRadius-large);
+  box-shadow: var(--shadow-floating-small);
+  opacity: 1;
+
+  &.Overlay--size-auto {
+    min-width: 192px;
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100vh - 2rem);
+  }
+
+  &.Overlay--size-full {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &.Overlay--size-xsmall {
+    --overlay-width: 192px;
+
+    max-height: calc(100vh - 2rem);
+  }
+
+  &.Overlay--size-small {
+    --overlay-height: 256px;
+    --overlay-width: 320px;
+  }
+
+  &.Overlay--size-small-portrait {
+    --overlay-height: 432px;
+    --overlay-width: 320px;
+  }
+
+  &.Overlay--size-medium {
+    --overlay-height: 320px;
+    --overlay-width: 480px;
+  }
+
+  &.Overlay--size-medium-portrait {
+    --overlay-height: 600px;
+    --overlay-width: 480px;
+  }
+
+  &.Overlay--size-large {
+    --overlay-height: 432px;
+    --overlay-width: 640px;
+  }
+
+  &.Overlay--size-xlarge {
+    --overlay-height: 600px;
+    --overlay-width: 960px;
+  }
+
+  &.Overlay--height-auto {
+    height: auto;
+  }
+
+  /* start deprecate in favor of Alpha::Dialog */
+  &.Overlay--height-xsmall {
+    height: min(192px, 100vh - 2rem);
+  }
+
+  &.Overlay--height-small {
+    height: min(256px, 100vh - 2rem);
+  }
+
+  &.Overlay--height-medium {
+    height: min(320px, 100vh - 2rem);
+  }
+
+  &.Overlay--height-large {
+    height: min(432px, 100vh - 2rem);
+  }
+
+  &.Overlay--height-xlarge {
+    height: min(600px, 100vh - 2rem);
+  }
+
+  &.Overlay--width-auto {
+    width: auto;
+  }
+
+  &.Overlay--width-small {
+    width: min(256px, 100vw - 2rem);
+  }
+
+  &.Overlay--width-medium {
+    width: min(320px, 100vw - 2rem);
+  }
+
+  &.Overlay--width-large {
+    width: min(480px, 100vw - 2rem);
+  }
+
+  &.Overlay--width-xlarge {
+    width: min(640px, 100vw - 2rem);
+  }
+
+  &.Overlay--width-xxlarge {
+    width: min(960px, 100vw - 2rem);
+  }
+
+  /* end deprecate */
+
+  &.Overlay--motion-scaleFade {
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
+    }
+  }
+}
+
+@keyframes Overlay--motion-scaleFade {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* for <form> element that wraps entire contents of overlay */
+.Overlay-form {
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.Overlay-header {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  color: var(--fgColor-default);
+
+  &.Overlay-header--divided {
+    padding-bottom: var(--stack-padding-condensed);
+    box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);
+
+    & + .Overlay-body {
+      padding-top: var(--stack-padding-normal);
+    }
+  }
+
+  &.Overlay-header--large {
+    & .Overlay-headerContentWrap {
+      & .Overlay-titleWrap {
+        gap: var(--stack-gap-condensed);
+
+        & .Overlay-title {
+          font-size: var(--text-title-size-medium);
+        }
+
+        & .Overlay-description {
+          font-size: var(--text-body-size-medium);
+        }
+      }
+    }
+  }
+
+  & .Overlay-headerContentWrap {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--stack-gap-condensed);
+    padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);
+
+    & .Overlay-actionWrap {
+      display: flex;
+      flex-direction: row;
+      gap: var(--stack-gap-condensed);
+    }
+
+    & .Overlay-titleWrap {
+      display: flex;
+      padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)
+        var(--stack-gap-condensed);
+      flex-direction: column;
+      flex-grow: 1;
+      gap: var(--control-small-gap);
+
+      & .Overlay-title {
+        margin: 0;
+        font-size: var(--text-body-size-medium);
+        font-weight: var(--base-text-weight-semibold);
+      }
+
+      & .Overlay-description {
+        margin: 0;
+        font-size: var(--text-body-size-small);
+        font-weight: var(--base-text-weight-normal);
+        color: var(--fgColor-muted);
+      }
+    }
+  }
+}
+
+/* generic body content slot */
+.Overlay-body {
+  padding: var(--stack-padding-normal);
+  padding-top: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  font-size: var(--text-body-size-medium);
+  flex-grow: 1;
+
+  &.Overlay-body--paddingCondensed {
+    padding: var(--stack-padding-condensed);
+    padding-top: 0;
+  }
+
+  &.Overlay-body--paddingNone {
+    padding: 0;
+  }
+}
+
+/* generic footer slot */
+.Overlay-footer {
+  z-index: 1;
+  display: flex;
+  padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);
+  flex-direction: row;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+
+  &.Overlay-footer--divided {
+    padding-top: var(--stack-padding-normal);
+    box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);
+  }
+
+  &.Overlay-footer--alignStart {
+    justify-content: flex-start;
+    gap: var(--stack-gap-condensed);
+  }
+
+  &.Overlay-footer--alignCenter {
+    justify-content: center;
+    gap: var(--stack-gap-condensed);
+  }
+
+  &.Overlay-footer--alignEnd {
+    justify-content: flex-end;
+    gap: var(--stack-gap-condensed);
+  }
+}
+
+/* TODO: replace with refactored IconButton */
+.Overlay-closeButton {
+  position: relative;
+  display: grid;
+  width: var(--base-size-32);
+  height: var(--base-size-32);
+  padding: 0;
+  color: var(--fgColor-muted);
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: var(--borderWidth-thin) solid transparent;
+  border-radius: var(--borderRadius-medium);
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition-property: color, background-color, border-color;
+  place-content: center;
+  align-self: flex-start;
+  flex-shrink: 0;
+
+  &:hover,
+  &:focus {
+    background-color: var(--button-default-bgColor-hover);
+    border: var(--borderWidth-thin) solid var(--control-bgColor-hover);
+  }
+
+  /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */
+  &.close-button {
+    border: var(--borderWidth-thin) solid transparent;
+  }
+}
+
+@define-mixin Overlay-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  display: flex;
+  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
+}
+
+@define-mixin Overlay-backdrop--transparent {
+  position: absolute;
+  z-index: 999;
+  background-color: transparent;
+}
+
+/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */
+
+/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */
+
+/* center */
+@define-mixin Overlay-backdrop--center {
+  @mixin Overlay-backdrop;
+
+  align-items: center;
+  justify-content: center;
+}
+
+/* anchor */
+@define-mixin Overlay-backdrop--anchor {
+  @mixin Overlay-backdrop--transparent;
+}
+
+/* anchor side(s) */
+@define-mixin Overlay-backdrop--side $responsiveVariant {
+  @mixin Overlay-backdrop;
+
+  /* default left */
+  align-items: center;
+  justify-content: left;
+
+  &.Overlay-backdrop--placement-left$(responsiveVariant) {
+    align-items: center;
+    justify-content: left;
+
+    & > .Overlay$(responsiveVariant) {
+      height: 100vh;
+      max-height: unset;
+      border-radius: var(--borderRadius-large);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;
+      }
+    }
+  }
+
+  &.Overlay-backdrop--placement-right$(responsiveVariant) {
+    align-items: center;
+    justify-content: right;
+
+    & > .Overlay$(responsiveVariant) {
+      height: 100vh;
+      max-height: unset;
+      border-radius: var(--borderRadius-large);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
+      }
+    }
+  }
+
+  &.Overlay-backdrop--placement-bottom$(responsiveVariant) {
+    align-items: end;
+    justify-content: center;
+
+    & > .Overlay$(responsiveVariant) {
+      width: 100vw;
+      height: auto;
+      max-height: calc(100vh - 2rem);
+      border-radius: var(--borderRadius-large);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
+      }
+    }
+  }
+
+  &.Overlay-backdrop--placement-top$(responsiveVariant) {
+    align-items: start;
+    justify-content: center;
+
+    & > .Overlay$(responsiveVariant) {
+      border-radius: var(--borderRadius-large);
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
+      }
+    }
+  }
+}
+
+/* full width */
+@define-mixin Overlay-backdrop--full {
+  @mixin Overlay-backdrop;
+
+  & .Overlay {
+    width: 100%;
+    max-width: 100vw;
+    height: 100%;
+    max-height: 100vh;
+    border-radius: unset !important;
+    flex-grow: 1;
+  }
+}
+
+/* Overlay variant classnames */
+.Overlay-backdrop--center {
+  @mixin Overlay-backdrop--center;
+}
+
+.Overlay-backdrop--anchor {
+  @mixin Overlay-backdrop--anchor;
+}
+
+.Overlay-backdrop--side {
+  @mixin Overlay-backdrop--side;
+}
+
+.Overlay-backdrop--full {
+  @mixin Overlay-backdrop--full;
+}
+
+/* responsive variants */
+
+/* --viewportRange-narrowLandscape */
+@media (max-width: 767px) {
+  .Overlay-backdrop--center-whenNarrow {
+    @mixin Overlay-backdrop--center;
+  }
+
+  .Overlay-backdrop--anchor-whenNarrow {
+    @mixin Overlay-backdrop--anchor;
+  }
+
+  .Overlay-backdrop--side-whenNarrow {
+    @mixin Overlay-backdrop--side -whenNarrow;
+  }
+
+  .Overlay-backdrop--full-whenNarrow {
+    @mixin Overlay-backdrop--full;
+  }
+}
+
+@keyframes Overlay--motion-slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes Overlay--motion-slideUp {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes Overlay--motion-slideInRight {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes Overlay--motion-slideInLeft {
+  from {
+    transform: translateX(100%);
+  }
+}

data/app/components/primer/alpha/dialog.rb

@@ -0,0 +1,176 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # A `Dialog` is used to remove the user from the main application flow,
+    # to confirm actions, ask for disambiguation or to present small forms.
+    #
+    # @accessibility
+    #   - **Dialog Accessible Name**: A dialog should have an accessible name,
+    #   so screen readers are aware of the purpose of the dialog when it opens.
+    #   Give an accessible name setting `:title`. The accessible name will be
+    #   used as the main heading inside the dialog.
+    #   - **Dialog unique id**: A dialog should be unique. Give a unique id
+    #   setting `:dialog_id`. If no `:dialog_id` is given, a default randomize
+    #   hex id is generated.
+    #
+    #   The combination of both `:title` and `:dialog_id` establishes an
+    #   `aria-labelledby` relationship between the title and the unique id of
+    #   the dialog.
+    class Dialog < Primer::Component
+      status :alpha
+      audited_at "2022-10-10"
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => "Overlay--size-small-portrait",
+        :medium_portrait => "Overlay--size-medium-portrait",
+        DEFAULT_SIZE => "Overlay--size-medium",
+        :large => "Overlay--size-large",
+        :xlarge => "Overlay--size-xlarge",
+        :auto => "Overlay--size-auto"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      DEFAULT_POSITION = :center
+      POSITION_MAPPINGS = {
+        DEFAULT_POSITION => "Overlay-backdrop--center",
+        :left => "Overlay-backdrop--side Overlay-backdrop--placement-left",
+        :right => "Overlay-backdrop--side Overlay-backdrop--placement-right"
+      }.freeze
+      POSITION_OPTIONS = POSITION_MAPPINGS.keys
+
+      DEFAULT_POSITION_NARROW = :inherit
+      POSITION_NARROW_MAPPINGS = {
+        DEFAULT_POSITION_NARROW => "",
+        :bottom => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-bottom-whenNarrow",
+        :fullscreen => "Overlay-backdrop--full-whenNarrow",
+        :left => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-left-whenNarrow",
+        :right => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-right-whenNarrow"
+      }.freeze
+      POSITION_NARROW_OPTIONS = POSITION_NARROW_MAPPINGS.keys
+
+      # The dialog's ID value.
+      #
+      attr_reader :id
+
+      # Optional button to open the dialog.
+      #
+      # @param system_arguments [Hash] The same arguments as <%= link_to_component(Primer::Beta::Button) %>.
+      renders_one :show_button, lambda { |icon: nil, **system_arguments|
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes]
+        )
+        system_arguments[:id] = "dialog-show-#{@system_arguments[:id]}"
+        system_arguments[:data] = (system_arguments[:data] || {}).merge({ "show-dialog-id": @system_arguments[:id] })
+        if icon.present?
+          Primer::Beta::IconButton.new(icon: icon, **system_arguments)
+        else
+          Primer::Beta::Button.new(**system_arguments)
+        end
+      }
+
+      # Header content.
+      #
+      # @param show_divider [Boolean] Show a divider between the header and body.
+      # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :header, lambda { |show_divider: false, visually_hide_title: @visually_hide_title, **system_arguments|
+        Primer::Alpha::Dialog::Header.new(
+          id: @id,
+          title: @title,
+          subtitle: @subtitle,
+          show_divider: show_divider,
+          visually_hide_title: visually_hide_title,
+          **system_arguments
+        )
+      }
+
+      # Required body content.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, "Body"
+
+      # Footer content.
+      #
+      # @param show_divider [Boolean] Show a divider between the footer and body.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :footer, "Footer"
+
+      # @example Dialog with Cancel and Submit buttons
+      #   @description
+      #     An ID is provided which enables wiring of the open and close buttons to the dialog.
+      #   @code
+      #     <%= render(Primer::Alpha::Dialog.new(
+      #       title: "Dialog Example",
+      #       id: "my-dialog",
+      #     )) do |d| %>
+      #       <% d.with_show_button { "Show Dialog" } %>
+      #       <% d.with_body do %>
+      #         <p>Some content</p>
+      #       <% end %>
+      #       <% d.with_footer do %>
+      #         <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
+      #         <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
+      #       <% end %>
+      #     <% end %>
+      # @param id [String] The id of the dialog.
+      # @param title [String] Describes the content of the dialog.
+      # @param subtitle [String] Provides additional context for the dialog, also setting the `aria-describedby` attribute.
+      # @param size [Symbol] The size of the dialog. <%= one_of(Primer::Alpha::Dialog::SIZE_OPTIONS) %>
+      # @param position [Symbol] The position of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_OPTIONS) %>
+      # @param position_narrow [Symbol] The position of the dialog when narrow. <%= one_of(Primer::Alpha::Dialog::POSITION_NARROW_OPTIONS) %>
+      # @param visually_hide_title [Boolean] If true will hide the heading title, while still making it available to Screen Readers.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        title:,
+        subtitle: nil,
+        size: DEFAULT_SIZE,
+        position: DEFAULT_POSITION,
+        position_narrow: DEFAULT_POSITION_NARROW,
+        visually_hide_title: false,
+        id: self.class.generate_id,
+        **system_arguments
+      )
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @id = id.to_s
+        @title = title
+        @subtitle = subtitle
+        @size = size
+        @position = position
+        @position_narrow = position_narrow
+        @visually_hide_title = visually_hide_title
+
+        @system_arguments[:tag] = "modal-dialog"
+        @system_arguments[:role] = "dialog"
+        @system_arguments[:id] = @id
+        @system_arguments[:aria] = { modal: true }
+        @system_arguments[:aria] = merge_aria(
+          @system_arguments, {
+            aria: {
+              disabled: true,
+              describedby: "#{@id}-title #{@id}-description"
+            }
+          }
+        )
+        @system_arguments[:classes] = class_names(
+          "Overlay",
+          "Overlay-whenNarrow",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
+          "Overlay--motion-scaleFade",
+          system_arguments[:classes]
+        )
+        @backdrop_classes = class_names(
+          POSITION_MAPPINGS[fetch_or_fallback(POSITION_OPTIONS, @position, DEFAULT_POSITION)],
+          POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)]
+        )
+      end
+
+      def before_render
+        with_header unless header?
+        with_body unless body?
+      end
+    end
+  end
+end

data/app/components/primer/alpha/dropdown/menu.d.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/components/primer/alpha/dropdown/menu.html.erb

@@ -0,0 +1,25 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if @header.present? %>
+    <div class="dropdown-header">
+      <%= @header %>
+    </div>
+  <% end %>
+
+  <% if list? %>
+    <ul>
+      <% items.each do |item| %>
+        <% if item.divider? %>
+          <%= item %>
+        <% else %>
+          <li>
+            <%= item %>
+          </li>
+        <% end %>
+      <% end %>
+    </ul>
+  <% else %>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/dropdown/menu.js

@@ -0,0 +1 @@
+import '@github/details-menu-element';