primer_view_components 0.0.101 → 0.0.102

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

@@ -79,8 +79,6 @@ module Primer
 
       # @private
       def before_render
-        return if @sub_group
-
         if heading.present?
           @system_arguments[:"aria-labelledby"] = @id
         elsif aria(:label, @system_arguments).blank?

data/app/components/primer/alpha/nav_list/item.rb

@@ -73,7 +73,7 @@ module Primer
 
           super
 
-          raise "Cannot render a trailing visual for an item with subitems" if items.present? && trailing_visual.present?
+          raise "Cannot render a trailing action for an item with subitems" if items.present? && trailing_action.present?
 
           return if items.blank?
 

data/app/components/primer/alpha/toggle_switch.d.ts

@@ -1,4 +1,4 @@
-export declare class ToggleSwitchElement extends HTMLElement {
+declare class ToggleSwitchElement extends HTMLElement {
     switch: HTMLElement;
     loadingSpinner: HTMLElement;
     errorIcon: HTMLElement;
@@ -26,3 +26,4 @@ declare global {
         ToggleSwitchElement: typeof ToggleSwitchElement;
     }
 }
+export {};

data/app/components/primer/alpha/toggle_switch.js

@@ -135,7 +135,6 @@ __decorate([
 ToggleSwitchElement = __decorate([
     controller
 ], ToggleSwitchElement);
-export { ToggleSwitchElement };
 if (!window.customElements.get('toggle-switch')) {
     window.ToggleSwitchElement = ToggleSwitchElement;
     window.customElements.define('toggle-switch', ToggleSwitchElement);

data/app/components/primer/alpha/toggle_switch.ts

@@ -2,7 +2,7 @@ import {controller, target} from '@github/catalyst'
 import {debounce} from '@github/mini-throttle/decorators'
 
 @controller
-export class ToggleSwitchElement extends HTMLElement {
+class ToggleSwitchElement extends HTMLElement {
   @target switch: HTMLElement
   @target loadingSpinner: HTMLElement
   @target errorIcon: HTMLElement

data/app/components/primer/alpha/tool-tip-element.d.ts

@@ -0,0 +1,23 @@
+declare type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
+declare class ToolTipElement extends HTMLElement {
+    #private;
+    styles(): string;
+    get htmlFor(): string;
+    set htmlFor(value: string);
+    get type(): 'description' | 'label';
+    set type(value: 'description' | 'label');
+    get direction(): Direction;
+    set direction(value: Direction);
+    get control(): HTMLElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string): void;
+}
+declare global {
+    interface Window {
+        ToolTipElement: typeof ToolTipElement;
+    }
+}
+export {};

data/app/components/primer/alpha/tool-tip-element.js

@@ -0,0 +1,352 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updatePosition;
+import { getAnchoredPosition } from '@primer/behaviors';
+const TOOLTIP_OPEN_CLASS = 'tooltip-open';
+const TOOLTIP_ARROW_EDGE_OFFSET = 6;
+const DIRECTION_CLASSES = [
+    'tooltip-n',
+    'tooltip-s',
+    'tooltip-e',
+    'tooltip-w',
+    'tooltip-ne',
+    'tooltip-se',
+    'tooltip-nw',
+    'tooltip-sw'
+];
+class ToolTipElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ToolTipElement_instances.add(this);
+        _ToolTipElement_abortController.set(this, void 0);
+        _ToolTipElement_align.set(this, 'center');
+        _ToolTipElement_side.set(this, 'outside-bottom');
+        _ToolTipElement_allowUpdatePosition.set(this, false);
+    }
+    styles() {
+        return `
+      :host {
+        position: absolute;
+        z-index: 1000000;
+        padding: .5em .75em;
+        font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        -webkit-font-smoothing: subpixel-antialiased;
+        color: var(--color-fg-on-emphasis);
+        text-align: center;
+        text-decoration: none;
+        text-shadow: none;
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: break-word;
+        white-space: pre;
+        background: var(--color-neutral-emphasis-plus);
+        border-radius: 6px;
+        opacity: 0;
+        max-width: 250px;
+        word-wrap: break-word;
+        white-space: normal;
+        width: max-content;
+      }
+
+      :host:before{
+        position: absolute;
+        z-index: 1000001;
+        color: var(--color-neutral-emphasis-plus);
+        content: "";
+        border: 6px solid transparent;
+        opacity: 0
+      }
+
+      @keyframes tooltip-appear {
+        from {
+          opacity: 0
+        }
+        to {
+          opacity: 1
+        }
+      }
+
+      :host:after{
+        position: absolute;
+        display: block;
+        right: 0;
+        left: 0;
+        height: 12px;
+        content: ""
+      }
+
+      :host(.${TOOLTIP_OPEN_CLASS}),
+      :host(.${TOOLTIP_OPEN_CLASS}):before {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
+        animation-delay: .4s
+      }
+
+      :host(.tooltip-s):before,
+      :host(.tooltip-n):before {
+        right: 50%;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+
+      :host(.tooltip-s):before,
+      :host(.tooltip-se):before,
+      :host(.tooltip-sw):before {
+        bottom: 100%;
+        border-bottom-color: var(--color-neutral-emphasis-plus)
+      }
+
+      :host(.tooltip-s):after,
+      :host(.tooltip-se):after,
+      :host(.tooltip-sw):after {
+        bottom: 100%
+      }
+
+      :host(.tooltip-n):before,
+      :host(.tooltip-ne):before,
+      :host(.tooltip-nw):before {
+        top: 100%;
+        border-top-color: var(--color-neutral-emphasis-plus)
+      }
+
+      :host(.tooltip-n):after,
+      :host(.tooltip-ne):after,
+      :host(.tooltip-nw):after {
+        top: 100%
+      }
+
+      :host(.tooltip-se):before,
+      :host(.tooltip-ne):before {
+        left: 0;
+        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+
+      :host(.tooltip-sw):before,
+      :host(.tooltip-nw):before {
+        right: 0;
+        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+
+      :host(.tooltip-w):before {
+        top: 50%;
+        bottom: 50%;
+        left: 100%;
+        margin-top: -6px;
+        border-left-color: var(--color-neutral-emphasis-plus)
+      }
+
+      :host(.tooltip-e):before {
+        top: 50%;
+        right: 100%;
+        bottom: 50%;
+        margin-top: -6px;
+        border-right-color: var(--color-neutral-emphasis-plus)
+      }
+    `;
+    }
+    get htmlFor() {
+        return this.getAttribute('for') || '';
+    }
+    set htmlFor(value) {
+        this.setAttribute('for', value);
+    }
+    get type() {
+        const type = this.getAttribute('data-type');
+        return type === 'label' ? 'label' : 'description';
+    }
+    set type(value) {
+        this.setAttribute('data-type', value);
+    }
+    get direction() {
+        return (this.getAttribute('data-direction') || 's');
+    }
+    set direction(value) {
+        this.setAttribute('data-direction', value);
+    }
+    get control() {
+        return this.ownerDocument.getElementById(this.htmlFor);
+    }
+    connectedCallback() {
+        var _a;
+        if (!this.shadowRoot) {
+            const shadow = this.attachShadow({ mode: 'open' });
+            // eslint-disable-next-line github/no-inner-html
+            shadow.innerHTML = `
+        <style>
+          ${this.styles()}
+        </style>
+        <slot></slot>
+      `;
+        }
+        this.hidden = true;
+        __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
+        if (!this.id) {
+            this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
+        }
+        if (!this.control)
+            return;
+        this.setAttribute('role', 'tooltip');
+        (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
+        const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
+        this.addEventListener('mouseleave', this, { signal });
+        this.control.addEventListener('mouseenter', this, { signal });
+        this.control.addEventListener('mouseleave', this, { signal });
+        this.control.addEventListener('focus', this, { signal });
+        this.control.addEventListener('blur', this, { signal });
+        this.ownerDocument.addEventListener('keydown', this, { signal });
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    handleEvent(event) {
+        if (!this.control)
+            return;
+        // Ensures that tooltip stays open when hovering between tooltip and element
+        // WCAG Success Criterion 1.4.13 Hoverable
+        if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
+            this.hidden = false;
+        }
+        else if (event.type === 'blur') {
+            this.hidden = true;
+        }
+        else if (event.type === 'mouseleave' &&
+            event.relatedTarget !== this.control &&
+            event.relatedTarget !== this) {
+            this.hidden = true;
+        }
+        else if (event.type === 'keydown' && event.key === 'Escape' && !this.hidden) {
+            this.hidden = true;
+        }
+    }
+    attributeChangedCallback(name) {
+        if (name === 'id' || name === 'data-type') {
+            if (!this.id || !this.control)
+                return;
+            if (this.type === 'label') {
+                this.control.setAttribute('aria-labelledby', this.id);
+                this.setAttribute('aria-hidden', 'true');
+            }
+            else {
+                let describedBy = this.control.getAttribute('aria-describedby');
+                describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id);
+                this.control.setAttribute('aria-describedby', describedBy);
+            }
+        }
+        else if (this.isConnected && name === 'hidden') {
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
+        }
+        else if (name === 'data-direction') {
+            this.classList.remove(...DIRECTION_CLASSES);
+            const direction = this.direction;
+            if (direction === 'n') {
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+            }
+            else if (direction === 'ne') {
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+            }
+            else if (direction === 'e') {
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-right', "f");
+            }
+            else if (direction === 'se') {
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'start', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+            }
+            else if (direction === 's') {
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+            }
+            else if (direction === 'sw') {
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-bottom', "f");
+            }
+            else if (direction === 'w') {
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-left', "f");
+            }
+            else if (direction === 'nw') {
+                __classPrivateFieldSet(this, _ToolTipElement_align, 'end', "f");
+                __classPrivateFieldSet(this, _ToolTipElement_side, 'outside-top', "f");
+            }
+        }
+    }
+}
+_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
+    if (this.hidden) {
+        this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
+    }
+    else {
+        this.classList.add(TOOLTIP_OPEN_CLASS);
+        for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
+            if (tooltip !== this)
+                tooltip.hidden = true;
+        }
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
+    }
+}, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
+    if (!this.control)
+        return;
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hidden)
+        return;
+    const TOOLTIP_OFFSET = 10;
+    this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
+    const position = getAnchoredPosition(this, this.control, {
+        side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
+        align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
+        anchorOffset: TOOLTIP_OFFSET
+    });
+    const anchorSide = position.anchorSide;
+    const align = position.anchorAlign;
+    this.style.top = `${position.top}px`;
+    this.style.left = `${position.left}px`;
+    let direction = 's';
+    if (anchorSide === 'outside-left') {
+        direction = 'w';
+    }
+    else if (anchorSide === 'outside-right') {
+        direction = 'e';
+    }
+    else if (anchorSide === 'outside-top') {
+        if (align === 'center') {
+            direction = 'n';
+        }
+        else if (align === 'start') {
+            direction = 'ne';
+        }
+        else {
+            direction = 'nw';
+        }
+    }
+    else {
+        if (align === 'center') {
+            direction = 's';
+        }
+        else if (align === 'start') {
+            direction = 'se';
+        }
+        else {
+            direction = 'sw';
+        }
+    }
+    this.classList.add(`tooltip-${direction}`);
+};
+ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'hidden'];
+if (!window.customElements.get('tool-tip')) {
+    window.ToolTipElement = ToolTipElement;
+    window.customElements.define('tool-tip', ToolTipElement);
+}

data/app/components/primer/clipboard_copy_component.d.ts

@@ -0,0 +1 @@
+import '@github/clipboard-copy-element';

data/app/components/primer/clipboard_copy_component.js

@@ -0,0 +1,43 @@
+import '@github/clipboard-copy-element';
+const CLIPBOARD_COPY_TIMER_DURATION = 2000;
+function showSVG(svg) {
+    svg.style.display = 'inline-block';
+}
+function hideSVG(svg) {
+    svg.style.display = 'none';
+}
+// Toggle a copy button.
+function showCopy(button) {
+    const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
+    if (!copyIcon || !checkIcon)
+        return;
+    showSVG(copyIcon);
+    hideSVG(checkIcon);
+}
+// Toggle a copy button.
+function showCheck(button) {
+    const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
+    if (!copyIcon || !checkIcon)
+        return;
+    hideSVG(copyIcon);
+    showSVG(checkIcon);
+}
+const clipboardCopyElementTimers = new WeakMap();
+document.addEventListener('clipboard-copy', function ({ target }) {
+    if (!(target instanceof HTMLElement))
+        return;
+    if (!target.hasAttribute('data-view-component'))
+        return;
+    const currentTimeout = clipboardCopyElementTimers.get(target);
+    if (currentTimeout) {
+        clearTimeout(currentTimeout);
+        clipboardCopyElementTimers.delete(target);
+    }
+    else {
+        showCheck(target);
+    }
+    clipboardCopyElementTimers.set(target, setTimeout(() => {
+        showCopy(target);
+        clipboardCopyElementTimers.delete(target);
+    }, CLIPBOARD_COPY_TIMER_DURATION));
+});

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

@@ -1,5 +1,4 @@
-<%# erblint:counter DeprecatedComponentsCounter 1 %>
-<%= render(Primer::FlexComponent.new(**@system_arguments)) do %>
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
   <% if @side == :left %>
     <%= sidebar %>
   <% end %>

data/app/components/primer/layout_component.rb

@@ -61,6 +61,8 @@ module Primer
         @system_arguments[:classes]
       )
       @system_arguments[:direction] = responsive ? [:column, nil, :row] : nil
+      @system_arguments[:display] = :flex
+      @system_arguments[:tag] = :div
 
       @sidebar_col = fetch_or_fallback(ALLOWED_SIDEBAR_COLS, sidebar_col, DEFAULT_SIDEBAR_COL)
       @main_col = MAX_COL - @sidebar_col

data/lib/primer/deprecations.rb

@@ -13,8 +13,6 @@ module Primer
       "Primer::CounterComponent" => "Primer::Beta::Counter",
       "Primer::DetailsComponent" => "Primer::Beta::Details",
       "Primer::DropdownMenuComponent" => nil,
-      "Primer::FlexComponent" => nil,
-      "Primer::FlexItemComponent" => nil,
       "Primer::HeadingComponent" => "Primer::Beta::Heading",
       "Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
       "Primer::IconButton" => "Primer::Beta::IconButton",

data/lib/primer/view_components/version.rb

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

data/lib/tasks/docs.rake

@@ -59,8 +59,6 @@ namespace :docs do
       Primer::Dropdown,
       Primer::DropdownMenuComponent,
       Primer::Beta::Flash,
-      Primer::FlexComponent,
-      Primer::FlexItemComponent,
       Primer::Beta::Heading,
       Primer::Alpha::HiddenTextExpander,
       Primer::LabelComponent,

data/lib/tasks/test.rake

@@ -4,7 +4,7 @@ require "rake/testtask"
 
 namespace :test do
   desc "Run all tests"
-  task all: [:fast, :system]
+  task all: [:fast, :system, :accessibility, :bench]
 
   Rake::TestTask.new(:single) do |t|
     ENV["TZ"] = "Asia/Taipei"
@@ -22,6 +22,7 @@ namespace :test do
     t.test_files = FileList[
       "test/components/**/*_test.rb",
       "test/lib/**/*_test.rb",
+      "test/forms/**/*_test.rb",
       "test/primer/**/*_test.rb",
       "test/linters/**/*_test.rb",
       "test/rubocop/**/*_test.rb"
@@ -36,6 +37,25 @@ namespace :test do
     t.test_files = FileList["test/system/**/*_test.rb"]
   end
 
+  Rake::TestTask.new(:accessibility) do |t|
+    ENV["TZ"] = "Asia/Taipei"
+
+    t.libs << "test"
+    t.libs << "lib"
+    t.test_files = FileList["test/accessibility_test.rb"]
+  end
+
+  Rake::TestTask.new(:snapshots) do |t|
+    # Clear folder
+    FileUtils.rm_rf("test/snapshots")
+
+    ENV["TZ"] = "Asia/Taipei"
+
+    t.libs << "test"
+    t.libs << "lib"
+    t.test_files = FileList["test/snapshots_test.rb"]
+  end
+
   Rake::TestTask.new(:bench) do |t|
     t.libs << "test"
     t.test_files = FileList["test/benchmarks/**/bench_*.rb"]

data/previews/primer/alpha/underline_nav_preview.rb

@@ -31,7 +31,7 @@ module Primer
             component.with_tab(href: "#", selected: i.zero?) do |t|
               t.icon(icon: :star)
               t.text { "Item #{i + 1}" }
-              t.counter(count: rand(1..10))
+              t.counter(count: (i + 1) * 5)
             end
           end
         end

data/static/arguments.json

@@ -1559,66 +1559,6 @@
       }
     ]
   },
-  {
-    "component": "Flex",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/flex_component.rb",
-    "parameters": [
-      {
-        "name": "justify_content",
-        "type": "Symbol",
-        "default": "`JUSTIFY_CONTENT_DEFAULT`",
-        "description": "Use this param to distribute space between and around flex items along the main axis of the container. One of `nil`, `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`."
-      },
-      {
-        "name": "inline",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Defaults to false."
-      },
-      {
-        "name": "flex_wrap",
-        "type": "Boolean",
-        "default": "`FLEX_WRAP_DEFAULT`",
-        "description": "Defaults to nil."
-      },
-      {
-        "name": "align_items",
-        "type": "Symbol",
-        "default": "`ALIGN_ITEMS_DEFAULT`",
-        "description": "Use this param to align items on the cross axis. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
-      },
-      {
-        "name": "direction",
-        "type": "Symbol",
-        "default": "`nil`",
-        "description": "Use this param to define the orientation of the main axis (row or column). By default, flex items will display in a row. One of `nil`, `:column`, `:column_reverse`, `:row`, or `:row_reverse`."
-      },
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
-  {
-    "component": "FlexItem",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/flex_item_component.rb",
-    "parameters": [
-      {
-        "name": "flex_auto",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Fills available space and auto-sizes based on the content. Defaults to false"
-      },
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
   {
     "component": "HellipButton",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/hellip_button.rb",

data/static/audited_at.json

@@ -60,8 +60,6 @@
   "Primer::Dropdown::Menu": "",
   "Primer::Dropdown::Menu::Item": "",
   "Primer::DropdownMenuComponent": "",
-  "Primer::FlexComponent": "",
-  "Primer::FlexItemComponent": "",
   "Primer::HeadingComponent": "",
   "Primer::HellipButton": "",
   "Primer::HiddenTextExpander": "",