Skip to content

Instantly share code, notes, and snippets.

View SigurdMW's full-sized avatar

Sigurd Moland Wahl SigurdMW

11 followers · 17 following
View GitHub Profile
@SigurdMW
SigurdMW / store.ts
Created December 14, 2021 06:18
StencilJS Custom State Provider
import { forceUpdate } from '@stencil/core';
interface Todo {
completed: boolean;
name: string;
date: Date;
id: string;
}
interface State {
@SigurdMW
SigurdMW / zod-to-final-form-error.ts
Created March 1, 2021 11:15
import merge from "lodash/merge"
import * as z from "zod"
const recursiveError = (arr: Array<string | number>, lastError: string[] | object): any => {
if (!arr || arr.length === 0) {
return lastError
}
const [currPath, ...iss] = arr
let newErr
if (typeof currPath === "string") {
@SigurdMW
SigurdMW / README.md
Last active June 17, 2020 10:18
Test

Testing tools

Unit tests:

  • Jest
  • React Testing Library
  • Faker (generate mock data)
  • msw (mock server)

End to end tests

  • Cypress
  • Puppeteer / playwright?
@SigurdMW
SigurdMW / vue-dropdown.vue
Created May 16, 2018 11:20
Accessible dropdown for vue
<template>
<div
class="dropdown"
:class="{ 'dropdown--open': isOpen }"
v-click-outside="closeDropdown"
>
<button
class="dropdown__button"
type="button"
@click="toggle"
@SigurdMW
SigurdMW / vue-autocomplete.vue
Last active May 15, 2018 12:06
<template>
<div class="autocomplete">
<label :for="inputId">{{ label }}</label>
<div class="autocomplete__input-group" :class="{ 'autocomplete__input-group--error': validatonMessage }">
<input
type="text"
:name="inputName"
:id="inputId"
autocomplete="off"
aria-autocomplete="list"
@SigurdMW
SigurdMW / Collapse-group.js
Last active April 30, 2018 11:11
accessible collapse and collapse group for keyboard usage
class Accordation {
constructor ({ el, openOnLoad = false, id }) {
this.el = el;
this.openOnLoad = openOnLoad;
this.id = id;
this.trigger = null;
this.body = null;
this.isOpen = openOnLoad;
@SigurdMW
SigurdMW / toast.js
Created April 26, 2018 06:52
light weight, pure js, no dependencies js toast
function createHtmlEl (type, { classes, text, attributes }) {
const el = document.createElement(type);
if (classes) {
classes.map(classToAdd => {
el.classList.add(classToAdd);
});
}
if (attributes) {
attributes.map(attr => {
@SigurdMW
SigurdMW / vue-tabs.vue
Created April 24, 2018 08:15
accessible vue tab list
<template>
<div class="tabs">
<ul role="tablist" class="tabs__list">
<li role="presentation" v-for="(tab, key) in children" :key="key" class="tabs__list-item">
<a
:href="'#' + tab.id"
role="tab"
:aria-controls="tab.id"
:id="tab.trigger"
class="tabs__link"
@SigurdMW
SigurdMW / vue-modal.vue
Last active May 23, 2018 12:02
Accessible vue modal in pure js
<template>
<div class="modal" :class="{ 'modal--open': isOpen }" role="dialog" tabindex="-1" :aria-labelledby="id">
<div class="modal__content">
<div class="modal__header">
<div class="modal__header-left">
<h2 class="modal__heading" :class="{ 'sr-only': headingIsSrOnly }" :id="id">{{ heading }}</h2>
<slot name="header"></slot>
</div>
<div class="modal__header-right">
<button class="modal__close" @click="closeModal" aria-label="Closed modal">
@SigurdMW
SigurdMW / email.php
Created February 8, 2018 08:17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- thanks to Mailchimp: https://github.com/mailchimp/email-blueprints/blob/master/responsive-templates/base_boxed_basic_query.html -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>@yield('title')</title>
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */