BarCard Function

Documentation: https://barcard-components.netlify.com

Intro

Pairs nicely with @barcard/components.

Installation

yarn add @barcard/functions

Usage

1. Styles

• colors - an object that contains the default colors used by BarCard. Additionally, contains some 'helper' colors (opaque, white25, white75, white80, etc)
• fonts - an object that contains the default fonts used by BarCard. Encapsulates the concept of font-weight as we use a single font (Open Sans)

2. Scale

• scale(size) - takes a number, and scales it up/down based on the deviceWidth. Primarily designed for mobile, needs to adjusted to work for web (screens larger than 414px). For web, it just returns (size * 1) for now.

• scaleFont(size) - similar to scale, but meant to encapsulate the fact that font sizes should not scale linearly like most elements. Not really used.

• verticalScale and moderateScale are also exported, but not used.

3. Helpers

• totTileCase(str) - takes 'a thing' and returns 'A Thing'
• hexToRgba(hex, opacity) - takes a hex string (#16CCD9), and opacity (0.5), and returns an rgba string (essentially, an easy way to add opacity to hex values)
• toCurrency(float)- takes '14.99997' and returns '14.99'. Or, takes '15' and returns '15.00'. does not add the currency symbol
• hashMap(arr, key) - takes an array, and makes an object hash
• getImgUrl(handle) - takes an image handle (from filestack) and returns the url (specific to our image cdn)