@wedgekit/primitives NPM

Primitives

Primitives are the building blocks of WedgeKit components. They are largely settings or wrapper components designed for keeping all WedgeKit components consistent in a composable and discoverable way.

Usage

import settings from '@wedgekit/primitives';

Settings

@wedgekit/primitives exports a settings object as its default export. These settings are intended to enforce consistency across wedgekit and A2W apps. The following settings are included in the settings object:

animations

transitions for transform, box-shadow, and border are included in settings.animations

base

base is a set number of pixels that all sizes in wedgekit and A2W apps should be based on; inspired by Evergreen UI's major scale

border

provides width and radius settings

colors

contains status color codes

cursor

the CSS styles for disabled and readOnly

font

code font settings

fontFamily

a CSS complaint font-family string

fontSize

provides sizes for the following:

label
link
body
bodySmall
input
tooltip
h1
h2
h3
h4
h5
h6

fontWeight

provides font-weights for title, normal & link

tabIndex

the tabIndex for disabled for those who strongly prefer package exports over extremely trivial code

widths

inexplicably the widths for toast and multiselect-card are in settings and not in their respective components

zindex

z-index values for modal and header

Mixins

BackgroundMixin

Background for form elements

Props

disabled

required: ❌

type: boolean

invalid

required: ❌

type: boolean

readOnly

required: ❌

type: boolean

CursorMixin

Same... I think this is a cursor mixin for use with inputs.

Props

disabled

required: ❌

type: boolean

invalid

required: ❌

type: boolean

readOnly

required: ❌

type: boolean

InputBorderMixin

I know this one is for inputs.

disabled

required: ❌

type: boolean

invalid

required: ❌

type: boolean

readOnly

required: ❌

type: boolean

status

required: ❌

type: 'default' | 'error' | 'success' | 'pending'

wrapsGroup

required: ❌

type: boolean

InputFocusMixin

Wipes out existing browser styling(?)

OptionMixin

a mixin for checkboxes and radio inputs which handles hover and focus-within styling

Props

active

required: ❌

type: boolean

disabled

required: ❌

type: boolean

PopoverShadowMixin

It's a shadow mixin for popovers. Which is not in the popover package because it's so versatile.

Props

disabled

required: ❌

type: boolean

invalid

required: ❌

type: boolean

status

required: ❌

type: 'default' | 'error' | 'success' | 'pending'

readOnly

required: ❌

type: boolean

wrapsGroup

required: ❌

type: boolean

UpdatedInputMixin

It's updated, which is how you know its the right one. Unless there's an updatedUpdatedInputMixin of course, in which case please use that instead.

Props

disabled

required: ❌

type: boolean

fullWidth

required: ❌

type: boolean

invalid

required: ❌

type: boolean

labelHidden

required: ❌

type: boolean

labelInline

required: ❌

type: boolean

status

required: ❌

type: 'default' | 'error' | 'success' | 'pending'

readOnly

required: ❌

type: boolean

Animations

withUpDown

withUpDown is a React HOC which has a direction prop which can be set to up or down. It will transform the content 180 degrees when direction is up