heyMP’s gists

heyMP / index.ts

Created April 17, 2025 14:37

Inject Styles into Lit component with Constructible Stylesheets

	// before we add our component to the DOM
	// we are going to alter the rh-cta definition
	// this will alter the stylesheet for all CTAs
	await customElements.whenDefined('rh-cta').then(() => {
	const RhCta = customElements.get('rh-cta');
	if (!RhCta) { return; }
	const styles = RhCta.styles?.[0].styleSheet as CSSStyleSheet;
	styles.insertRule(`
	::slotted(a) { white-space: normal !important; }
	`, styles.cssRules.length);

heyMP / SketchSystems.spec

Last active October 23, 2024 13:01 — forked from ryanlucas/SketchSystems.spec

Product Lifecycle

heyMP / SketchSystems.spec

Last active October 23, 2024 11:20

shop

heyMP / custom-elements.json

Created August 12, 2024 21:43

RHDS Custom Element Manifest Schema

heyMP / AsyncQueue.ts

Last active May 24, 2024 16:26

Playwright stream events from browser.

	/**
	* An async queue that can stream existing values
	* and stream new values as they are added using
	* async generators and async iterators.
	*
	* @example
	*
	* const counter = new AsyncQueue<number>();
	* counter.add(1);
	* counter.add(2);

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 / RhFooter.js

Last active March 23, 2023 17:27

	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 / 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 / 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 / query.graphql

Created December 20, 2022 04:16

Get Issue Statuses in Projects

Michael Potter heyMP