Skip to content

Instantly share code, notes, and snippets.

View heyMP's full-sized avatar

Michael Potter heyMP

58 followers · 22 following
  • Red Hat
View GitHub Profile
@heyMP
heyMP / utils.js
Last active April 18, 2024 07:58
Recursively find elements through multiple layers of shadow dom.
/**
* Example usage:
* const hotspots = findAllDeep(element, `[slot*="hotspot"]`, 10);
*/
const findAllDeep = (parent, selectors, depth = null) => {
let nodes = new Set();
let currentDepth = 1;
const recordResult = (nodesArray) => {
for (const node of nodesArray) {
nodes.add(node)
@heyMP
heyMP / rhpt-my-trials-app.test.ts
Created September 22, 2023 18:59
Testing with Xstate
import { html, fixture, expect, fixtureCleanup, aTimeout } from '@open-wc/testing/index-no-side-effects.js';
import '@open-wc/testing/register-chai-plugins.js';
import { visualDiff } from '@web/test-runner-visual-regression';
import { setViewport } from '@web/test-runner-commands';
import type { RhptMyTrialsApp } from '../src/rhpt-my-trials-app.js';
import { globalMachine } from '../src/machines/globalMachine.js';
import { initializerMachine } from '../src/machines/initializerMachine.js';
import '../src/rhpt-my-trials-app.js';
import { trials } from '../src/machines/mocks/trials.js';
@heyMP
heyMP / RhFooter.js
Last active March 23, 2023 17:27
RHDS https://github.com/RedHat-UX/red-hat-design-system/commit/54ce28abda2fa04c0be8f8fc7945423fbfba66ea
var _RhFooter_instances, _RhFooter_matchMedia, _RhFooter_logger, _RhFooter_renderLinksTemplate;
import { __classPrivateFieldGet, __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators/property.js';
import { classMap } from 'lit/directives/class-map.js';
import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
import { css } from "lit";
const style = css `:host{color:var(--rh-color-white,#fff);font-family:var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);line-height:var(--rh-line-height-body-text, 1.5);font-weight:var(--_font-weight);font-size:initial;display:flex;flex-direction:column}.global-base,footer{--_icon-color:var(--rh-footer-icon-color, var(--rh-color-black-500, #8a8d90));--_icon-colo
@heyMP
heyMP / index.html
Last active February 23, 2023 21:05
rh-footer@^1.0.0-beta.32 bundle
<style>
/* Via pfe-base.css */
:is(rh-footer, rh-global-footer) a {
color: var(--rh-color-link-inline-on-dark, var(--rh-color-blue-200, #73bcf7));
text-decoration: none;
}
:is(rh-footer, rh-global-footer) a:hover {
color: var(--rh-color-link-inline-hover-on-dark, var(--rh-color-blue-100, #bee1f4));
text-decoration: underline;
@heyMP
heyMP / index.html
Created January 31, 2023 02:32
Footer with no existing dependencies example
<!DOCTYPE html>
<html>
<head>
<link href="/rhds-lightdom.css" rel="stylesheet">
</head>
<body>
<rh-global-footer>
<h3 slot="links-primary" data-analytics-text="Red Hat legal and privacy links" hidden>Red Hat legal and privacy links</h3>
<ul slot="links-primary" data-analytics-region="page-footer-bottom-primary">
@heyMP
heyMP / query.graphql
Created December 20, 2022 04:16
Get Issue Statuses in Projects
query ($issue_id: ID!) {
node(id: $issue_id) {
__typename
... on Issue {
id
title
number
projectV2(number: 1) {
id
items(first: 100) {
@heyMP
heyMP / controller.ts
Created November 23, 2022 16:52
import * as C from '@lit-labs/context';
class S<T extends C.ContextKey<unknown, unknown>> {
constructor(
public host: HTMLElement,
public context: T,
public provider: C.ContextType<T>,
) {}
}
@heyMP
heyMP / gist:109fa841a44c022657b2f5cf36f37311
Created November 16, 2022 21:38
## 🚚 Installation
```sh
npm i @rhds/tokens
```
## 🎭 Usage
We use [style-dictionary](https://amzn.github.io/style-dictionary/) to transform our tokens into multiple formats and helpers.
### Stylelint Plugin
@heyMP
heyMP / countdown.js
Last active November 12, 2022 23:40
A promised based overservable pattern.
// @ts-check
/**
* Countdown timer as an observable.
*
* @param {number} timeout - Specified time to resolve the countdown specified in seconds.
* @param {?(number) => void} callback - Callback that updates on countdown change.
* @returns {{ cancel?: (string) => void, promise: Promise<void>}}
*/
export function countdown(timeout, callback = null) {
const ret = {};
@heyMP
heyMP / gist:cb70262cfbb395f6531a1e87fbd46b35
Last active November 4, 2022 12:18
Good explainer on focus-visible
Chris Coyer's Vid
https://twitter.com/chriscoyier/status/1588241068331786240
Adam A's vids
https://twitter.com/argyleink/status/1588255406375153665
https://twitter.com/ChromiumDev/status/1582786176917774337