@origin-digital/helper 0.0.5

package/README.md

@@ -0,0 +1,31 @@
+# @origin-digital/helper
+
+A utility package.
+
+## Features
+
+- ES6 syntax, managed with Prettier + Eslint and Stylelint
+- Unit testing via Jest
+
+## Install
+
+```sh
+yarn add @origin-digital/helper
+// or
+npm install @origin-digital/helper
+```
+
+### Requirements
+
+- Node.js v 12.x or later
+- VS Code, Atom, or SublimeText have packages / plugins that will work with the configurations
+
+### Required IDE Packages / Tools
+
+- Babel (apply to JS / JSX syntax)
+- Eslint
+- Styled components
+- Prettier
+    - In VS Code and Atom, enable the integration between Prettier and Eslint / Stylelint in your Editor
+    - In SublimeText, set the `"auto_format_on_save": true,` flag in JsPrettier settings
+- Editorconfig

package/dist/es/consts/media/breakPoints.js

@@ -0,0 +1,30 @@
+/*
+    Extra small devices (portrait phones, less than 544px)
+    No media query since this is the default at Origin because we are "mobile first"
+    */
+
+/* Small devices (landscape phones, 544px and up) */
+export var BREAK_POINTS = {
+  SM: {
+    Min: '576px',
+    Max: '575px'
+  },
+
+  /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
+  MD: {
+    Min: '768px',
+    Max: '767px'
+  },
+
+  /* Large devices (desktops, 992px and up) */
+  LG: {
+    Min: '992px',
+    Max: '991px'
+  },
+
+  /* Extra large devices (large desktops, 1200px and up) */
+  XL: {
+    Min: '1200px',
+    Max: '1199px'
+  }
+};

package/dist/es/consts/metrics/font.js

@@ -0,0 +1,21 @@
+export var FontSizes = {
+  H1: 36,
+  H2: 24,
+  H3: 18,
+  H4: 16,
+  H5: 16,
+  H6: 16,
+  BODY: 14,
+  SMALL: 12,
+  Large: {
+    H1: 56,
+    H2: 32,
+    H3: 20
+  }
+};
+export var FontWeights = {
+  REGULAR: 400,
+  MEDIUM: 600,
+  BOLD: 700
+};
+export var fontFamilySansSerif = "\nfont-family: 'gordita', sans-serif, -apple-system, BlinkMacSystemFont;\n";

package/dist/es/consts/metrics/lineHeight.js

@@ -0,0 +1,15 @@
+export var LineHeights = {
+  H1: 40,
+  H2: 28,
+  H3: 24,
+  H4: 24,
+  H5: 24,
+  H6: 24,
+  BODY: 24,
+  SMALL: 20,
+  Large: {
+    H1: 64,
+    H2: 40,
+    H3: 28
+  }
+};

package/dist/es/consts/palette/colors.js

@@ -0,0 +1,21 @@
+export var RED_PINK = '#ff373c';
+export var RED = '#ec0000';
+export var ORANGE = '#ff8228';
+export var LIGHT_ORANGE = '#ffb432';
+export var LIGHT_BLUE = '#d2f0ff';
+export var GREY = '#505050';
+export var LIGHT_GREY = '#535353';
+export var BLUE = '#3f75c6';
+export var GREEN = '#008906';
+export var LIGHT_GREEN = '#a5bb48';
+export var PURPLE = '#c34789';
+export var GREY4 = '#f8f8f8';
+export var GREY8 = '#f1f1f1';
+export var GREY16 = '#e3e3e3';
+export var GREY24 = '#d5d5d5';
+export var GREY48 = '#ababab';
+export var GREY80 = '#737373';
+export var GREY56 = '#232323';
+export var WHITE = 'white';
+export var BLACK = 'black';
+export var TRANSPARENT = 'transparent';

package/dist/es/utils/colorStyle.js

@@ -0,0 +1,19 @@
+import _Map from "@babel/runtime-corejs2/core-js/map";
+import { css } from 'styled-components';
+import * as Colors from '../consts/palette/colors';
+var colorLabelMap = new _Map([['redPink', Colors.RED_PINK], ['red', Colors.RED], ['orange', Colors.ORANGE], ['lightOrange', Colors.LIGHT_ORANGE], ['lightBlue', Colors.LIGHT_BLUE], ['grey', Colors.GREY], ['lightGrey', Colors.LIGHT_GREY], ['blue', Colors.BLUE], ['green', Colors.GREEN], ['lightGreen', Colors.LIGHT_GREEN], ['purple', Colors.PURPLE], ['grey4', Colors.GREY4], ['grey8', Colors.GREY8], ['grey16', Colors.GREY16], ['grey24', Colors.GREY24], ['grey48', Colors.GREY48], ['grey80', Colors.GREY80], ['grey56', Colors.GREY56], ['white', Colors.WHITE], ['black', Colors.BLACK], ['transparent', Colors.TRANSPARENT]]);
+export var mapColorLabelToHex = function mapColorLabelToHex(colorLabel) {
+  // If no color is provided, use the default.
+  var hex = colorLabelMap.get(colorLabel);
+  return hex;
+};
+export var backgroundColor = function backgroundColor() {
+  return css(["", ";"], function (_ref) {
+    var color = _ref.color;
+    return "background-color: ".concat(mapColorLabelToHex(color), ";");
+  });
+};
+export var color = css(["", ";"], function (_ref2) {
+  var color = _ref2.color;
+  return "color: ".concat(mapColorLabelToHex(color), ";");
+});

package/dist/es/utils/media.js

@@ -0,0 +1,36 @@
+import { css } from 'styled-components';
+import { BREAK_POINTS } from '../consts/media';
+var styledCss = css;
+export var breakPoint = function breakPoint(label, BREAK_POINT) {
+  return function () {
+    return css(["@media only screen and (min-width:", "){", ";}"], BREAK_POINT, styledCss.apply(void 0, arguments));
+  };
+};
+export var SM = function SM() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return breakPoint('SM', BREAK_POINTS.SM.Min)(args);
+};
+export var MD = function MD() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+
+  return breakPoint('MD', BREAK_POINTS.MD.Min)(args);
+};
+export var LG = function LG() {
+  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    args[_key3] = arguments[_key3];
+  }
+
+  return breakPoint('LG', BREAK_POINTS.LG.Min)(args);
+};
+export var XL = function XL() {
+  for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+    args[_key4] = arguments[_key4];
+  }
+
+  return breakPoint('XL', BREAK_POINTS.XL.Min)(args);
+};

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@origin-digital/helper",
+  "version": "0.0.5",
+  "private": false,
+  "description": "misc utilities for common tasks",
+  "license": "MIT",
+  "author": "horgn-dig",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "npm run mkdir",
+    "mkdir": "node build.js",
+    "prepublishOnly": "npm run build",
+    "test": "exit 0"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs2": "^7.18.3",
+    "styled-components": "^5.3.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}