Skip to content

Instantly share code, notes, and snippets.

View doubleedesign's full-sized avatar

Leesa Ward doubleedesign

View GitHub Profile
@doubleedesign
doubleedesign / ColorThemeTypedExample.styled.ts
Last active April 7, 2023 01:34
Typing styled-components props: Valid string values according to what's available in theme
import styled from 'styled-components';
import { ThemeColor } from '../../types';
interface ButtonProps {
color: ThemeColor
}
export const StyledButton = styled.button<ButtonProps>`
background: ${({ theme, color }): string => theme.colors[color]};
// more styles
@doubleedesign
doubleedesign / ThemeUtils.ts
Last active April 7, 2023 01:33
Shortcut function for choosing text colour based on background colour using Styled Components + Polished
import { meetsContrastGuidelines } from 'polished';
import { ContrastScores } from 'polished/lib/types/color';
type WCAGLevel = keyof ContrastScores;
export function contrastTextColour(color: string, wcag: WCAGLevel = 'AA') {
const scores = meetsContrastGuidelines(color, '#fff');
if(scores[wcag]) {
return '#fff';
}
@doubleedesign
doubleedesign / Button.styled.ts
Created April 7, 2023 00:10
Extend a styled component as a different HTML element
import styled from 'styled-components';
interface ButtonProps {
// Props to be used for styling below
}
export const StyledButton = styled.button<ButtonProps>`
// Styles
&:hover, &:focus, &:active {
@doubleedesign
doubleedesign / _useResize.ts
Last active March 31, 2023 02:20
useResize React hook. Dynamically get height and width of an element when its size changes and store the values in state. Demo: https://codesandbox.io/s/useresize-demo-de04o8?file=/src/hooks/useResize.ts
import { MutableRefObject, useMemo, useEffect, useState } from 'react';
interface Dimensions {
width: number;
height: number;
}
export function useResize(ref: MutableRefObject<HTMLElement | undefined>, deps: unknown[]): Dimensions {
const [width, setWidth] = useState<number>(0);
const [height, setHeight] = useState<number>(0);
@doubleedesign
doubleedesign / filter-orders-by-role.php
Last active March 22, 2023 21:45
Add the ability to filter WooCommerce orders by role in wp-admin
<?php
/**
* Add role drop-down to orders screen
*/
function doublee_add_order_user_role_filter_selectbox() {
global $typenow, $wp_query;
if (in_array($typenow, wc_get_order_types('order-meta-boxes'))) :
$user_role = '';
@doubleedesign
doubleedesign / class-unhooky-plugin-custom-admin-stuff.php
Last active March 21, 2023 11:26
Unhook a Ninja Forms plugin action from within another plugin. The context for this example was using Ninja Forms for Expression of Interest forms associated with Jobs (a custom post type), and a customised admin screen for viewing submissions. (This isn't the whole plugin, it's just the parts required to show how to unhook a Ninja Forms functio…
/**
* Job listings functionality for Client Website
* Note: Requires Ninja Forms plugin
* Note: Truncated for use in a gist to demonstrate unhooking a Ninja Forms function
*
* @since 1.0.0
* @package MyPlugin
* @subpackage MyPlugin/admin
*/
class MyPlugin_Jobs extends MyPlugin_Settings {
@doubleedesign
doubleedesign / useLocalStorage.ts
Created March 21, 2023 11:25
useLocalStorage React hook. Keep a state value in sync with one cached in the browser using local storage.
import { useState, useEffect, Dispatch, SetStateAction } from 'react';
export function useLocalStorage<T>(key: string, defaultValue: T): { value: T; setValue: Dispatch<SetStateAction<T>> } {
const [value, setValue] = useState(() => {
return localStorage?.getItem(key) ? JSON.parse(localStorage.getItem(key)) : defaultValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
@doubleedesign
doubleedesign / _box.scss
Last active March 19, 2023 10:27
Vertically centred CSS arrow/triangle on side of box. Demo: https://codesandbox.io/s/css-arrowbox-demo-8pif6y?file=/src/styles.scss
$spacing: (
xs: 0.25rem,
sm: 0.5rem,
md: 0.75rem,
lg: 1rem,
xl: 1.5rem,
xxl: 2rem
);
$colours: (
@doubleedesign
doubleedesign / mixin-tags.scss
Last active March 7, 2023 23:12
Mixin to display a list of links like label tags
@mixin tags {
ul {
margin: 0;
li {
list-style: none;
display: inline-block;
&:before {
@doubleedesign
doubleedesign / widget-product-categories.php
Created January 17, 2021 06:27
Override the output of the WooCommerce product categories widget to be a Bootstrap accordion
<?php
/**
* Product Categories Widget
* Modifies the WooCommerce product categories widget to display as a Bootstrap accordion.
*
* @package WooCommerce/Widgets
* @version 2.3.0
*/
defined( 'ABSPATH' ) || exit;