Skip to content

Instantly share code, notes, and snippets.

View okonet's full-sized avatar

Andrey Okonetchnikov okonet

View GitHub Profile
@okonet
okonet / mixins.js
Created January 29, 2020 14:17
Mixins to handle focus ring in CSS-in-JS
import "focus-visible"; // :focus-visible polyfill
import { darken, transparentize } from "polished";
/**
* Mixin to generate consistent box-shadow rule for focus rings and selections
*/
export function focusBoxShadow(color, hasInset = false) {
return {
boxShadow: `
0 0 0 0.2em ${transparentize(0.75, color)}
@okonet
okonet / machine.js
Created February 12, 2020 10:04
Generated by XState Viz: https://xstate.js.org/viz
const patterJourneyMachine = Machine({
id: 'pattern',
initial: 'Pattern exists in the UI library?',
states: {
"Pattern exists in the UI library?": {
on: {
YES: 'Does it fulfill all the requirements?',
NO: 'Similar pattern exists in other projects?'
}
},
@okonet
okonet / SketchSystems.spec
Last active February 28, 2020 12:28
Pattern Journey
Pattern Journey
Pattern exists in the UI library?*
Yes -> Does it fulfill all the requirements?
No -> Similar pattern exists in other projects?
Does it fulfill all the requirements?
Yes -> Just use it
No -> Can be modified to fulfill all requirements?
Similar pattern exists in other projects?
@okonet
okonet / BothDatesSelected.png
Last active August 17, 2020 10:01
DateRangePicker
BothDatesSelected.png
@okonet
okonet / SketchSystems.spec
Created August 13, 2020 15:34
DynamicDateRangePicker
DynamicDateRangePicker
DateRangeNotSet
click -> CustomRange
CustomRange
fixedStart -> FixedStart
prevPeriod -> PreviousPeriod
nextPeriod -> NextPeriod
currentPeriod -> CurrentPeriod
# See https://sketch.systems/okonet/sketch/64ddad32ec5753cdab12da7d4eb53a48
DateRangePicker&
@okonet
okonet / SketchSystems.spec
Created August 13, 2020 15:38
DatePicker
DatePicker
DateNotSet
click -> SelectDate
SelectDate
hover -> DateHighlighted
DateHighlighted
click -> DateSet
DateSelected
hover -> DateHighlighted
@okonet
okonet / CurrentPeriod.jpg
Last active August 17, 2020 10:39 — forked from jtatarko/CurrentPeriod.jpg
DynamicDateRangePicker
CurrentPeriod.jpg