@occmundial/occ-atomic 2.0.0-beta.1 → 2.0.0-beta.11

package/build/tokens/fonts.json

@@ -0,0 +1,231 @@
+{
+  "button-large": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "18px"
+  },
+  "button-medium": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "16px"
+  },
+  "button-small": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "14px"
+  },
+  "text-field-label": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "14px"
+  },
+  "text-field-placeholder": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "16px"
+  },
+  "text-field-assistive-text": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "14px"
+  },
+  "alert-default": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "14px"
+  },
+  "alert-description": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 300,
+    "lineHeight": 1.5,
+    "fontSize": "14px"
+  },
+  "link-large": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 300,
+    "lineHeight": 1.5,
+    "fontSize": "18px",
+    "textDecoration": "underline"
+  },
+  "link-x-large": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 300,
+    "fontSize": "20px",
+    "lineHeight": 1.5,
+    "textDecoration": "underline"
+  },
+  "link-large-strong": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "18px",
+    "textDecoration": "underline"
+  },
+  "link-regular": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 300,
+    "lineHeight": 1.5,
+    "fontSize": "16px",
+    "textDecoration": "underline"
+  },
+  "link-regular-strong": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "16px",
+    "textDecoration": "underline"
+  },
+  "link-small": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 300,
+    "lineHeight": 1.5,
+    "fontSize": "14px",
+    "textDecoration": "underline"
+  },
+  "link-small-strong": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "14px",
+    "textDecoration": "underline"
+  },
+  "link-x-small": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 300,
+    "lineHeight": 1.5,
+    "fontSize": "12px",
+    "textDecoration": "underline"
+  },
+  "display-display-clean": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.1,
+    "fontSize": "72px",
+    "letterSpacing": "-0.02em"
+  },
+  "heading-h1": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.1,
+    "fontSize": "48px",
+    "letterSpacing": "-0.02em"
+  },
+  "heading-h2": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.1,
+    "fontSize": "40px"
+  },
+  "heading-h3": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.1,
+    "fontSize": "28px",
+    "letterSpacing": "-0.02em"
+  },
+  "heading-h4": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "fontSize": "24px",
+    "lineHeight": 1.1
+  },
+  "heading-h5": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.1,
+    "fontSize": "18px"
+  },
+  "heading-tag": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "10px"
+  },
+  "body-x-large": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 300,
+    "fontSize": "20px",
+    "lineHeight": 1.5
+  },
+  "body-large-strong": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "18px"
+  },
+  "body-large": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 300,
+    "lineHeight": 1.5,
+    "fontSize": "18px"
+  },
+  "body-regular-strong": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "16px"
+  },
+  "body-regular": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 300,
+    "lineHeight": 1.5,
+    "fontSize": "16px"
+  },
+  "body-small-strong": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.5,
+    "fontSize": "14px"
+  },
+  "body-small": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 300,
+    "lineHeight": 1.5,
+    "fontSize": "14px"
+  },
+  "body-x-small": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 300,
+    "lineHeight": 1.5,
+    "fontSize": "12px"
+  },
+  "mobile-display-clean-m": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.1,
+    "fontSize": "48px",
+    "letterSpacing": "-0.02em"
+  },
+  "mobile-h1-m": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.1,
+    "fontSize": "32px",
+    "letterSpacing": "-0.02em"
+  },
+  "mobile-h2-m": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.1,
+    "fontSize": "28px"
+  },
+  "mobile-h3-m": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.1,
+    "fontSize": "24px"
+  },
+  "mobile-h4-m": {
+    "fontFamily": "'OCC Text'",
+    "fontWeight": 400,
+    "lineHeight": 1.1,
+    "fontSize": "20px"
+  }
+}

package/build/tokens/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "colors", {
+  enumerable: true,
+  get: function get() {
+    return _colors["default"];
+  }
+});
+Object.defineProperty(exports, "fonts", {
+  enumerable: true,
+  get: function get() {
+    return _fonts["default"];
+  }
+});
+Object.defineProperty(exports, "borderRadius", {
+  enumerable: true,
+  get: function get() {
+    return _borderRadius["default"];
+  }
+});
+Object.defineProperty(exports, "shadows", {
+  enumerable: true,
+  get: function get() {
+    return _shadows["default"];
+  }
+});
+Object.defineProperty(exports, "spacing", {
+  enumerable: true,
+  get: function get() {
+    return _spacing["default"];
+  }
+});
+
+var _colors = _interopRequireDefault(require("./colors.json"));
+
+var _fonts = _interopRequireDefault(require("./fonts.json"));
+
+var _borderRadius = _interopRequireDefault(require("./borderRadius.json"));
+
+var _shadows = _interopRequireDefault(require("./shadows.json"));
+
+var _spacing = _interopRequireDefault(require("./spacing.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/build/tokens/shadows.json

@@ -0,0 +1,13 @@
+{
+  "focus-pink": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
+  "focus-indigo": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+  "focus-bright-blue": "0 0 0 8px rgba(0,110,255,0.3)",
+  "focus-white": "0 0 0 8px rgba(255,255,255,0.2)",
+  "focus-sky": "0 0 0 8px rgba(206,216,240,0.4)",
+  "focus-corp": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+  "elevation-elevation-1": "0 1px 2px 0 rgba(8,13,57,0.12), 0 1px 6px 0 rgba(9,61,173,0.05)",
+  "elevation-elevation-2": "0 3px 3px -1px rgba(8,13,57,0.12), 0 3px 12px 0 rgba(9,61,173,0.08)",
+  "elevation-elevation-3": "0 4px 5px -3px rgba(8,13,56,0.12), 0 6px 18px 0 rgba(9,61,173,0.08)",
+  "elevation-elevation-4": "0 9px 12px -5px rgba(8,13,56,0.12), 0 10px 32px 0 rgba(9,61,173,0.12)",
+  "elevation-elevation-5": "0 17px 12px -7px rgba(8,13,56,0.12), 0 14px 46px 0 rgba(9,61,173,0.16)"
+}

package/build/tokens/spacing.json

@@ -0,0 +1,16 @@
+{
+  "base-value": "16px",
+  "size-0": "2px",
+  "size-1": "4px",
+  "size-2": "8px",
+  "size-3": "12px",
+  "size-4": "16px",
+  "size-5": "24px",
+  "size-6": "32px",
+  "size-7": "40px",
+  "size-8": "48px",
+  "size-9": "64px",
+  "size-10": "80px",
+  "size-11": "120px",
+  "size-12": "160px"
+}

package/commitlint.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['@commitlint/config-angular'],
+  rules: {
+    'subject-case': [2, 'always', 'sentence-case']
+  }
+};

package/package.json

@@ -1,113 +1,124 @@
-{
-  "name": "@occmundial/occ-atomic",
-  "version": "2.0.0-beta.1",
-  "description": "Collection of shareable styled React components for OCC applications.",
-  "homepage": "http://occmundial.github.io/occ-atomic",
-  "main": "build/index.js",
-  "scripts": {
-    "prestart": "npm run gen-docs",
-    "start": "set NODE_ENV=development && npm-run-all --parallel start-docs gen-docs:watch",
-    "start:mac": "NODE_ENV=development  npm-run-all --parallel start-docs gen-docs:watch",
-    "start-docs": "node scripts/server.js",
-    "gen-docs": "node scripts/generateComponentData.js",
-    "gen-docs:watch": "npm run gen-docs -- --watch",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "build": "babel lib -d build",
-    "build:watch": "babel lib -w -d build",
-    "build:bundle": "babel-node scripts/build.js",
-    "lint": "esw webpack.config.* lib src --color",
-    "lint:watch": "npm run lint -- --watch",
-    "prepare": "npm run build",
-    "predeploy": "set NODE_ENV=production && npm run build:bundle && npm run playroom:build",
-    "deploy": "gh-pages -d dist",
-    "playroom:start": "playroom start",
-    "playroom:build": "playroom build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/occmundial/occ-atomic"
-  },
-  "author": "OCCMundial",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/node": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.0.0",
-    "@babel/plugin-proposal-do-expressions": "^7.0.0",
-    "@babel/plugin-proposal-export-default-from": "^7.0.0",
-    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
-    "@babel/plugin-proposal-function-bind": "^7.0.0",
-    "@babel/plugin-proposal-function-sent": "^7.0.0",
-    "@babel/plugin-proposal-json-strings": "^7.0.0",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
-    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
-    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-syntax-import-meta": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.4.2",
-    "babel-loader": "^8.0.2",
-    "base64-url": "^2.2.2",
-    "chokidar": "^2.0.3",
-    "css-loader": "^1.0.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.13.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.5.1",
-    "eslint-plugin-react-hooks": "^2.5.0",
-    "eslint-watch": "^3.1.3",
-    "gh-pages": "^1.2.0",
-    "highlight.js": "^9.12.0",
-    "jest": "^22.4.3",
-    "jsdom": "^11.11.0",
-    "npm-run-all": "^4.1.3",
-    "playroom": "^0.15.1",
-    "prop-types": "^15.6.0",
-    "react": "^16.13.0",
-    "react-addons-test-utils": "^15.6.2",
-    "react-docgen": "^5.3.0",
-    "react-dom": "^16.13.0",
-    "react-meta-tags": "^0.7.4",
-    "react-test-renderer": "^16.13.0",
-    "style-loader": "^0.21.0",
-    "uglifyjs-webpack-plugin": "^2.1.3",
-    "webpack": "^4.0.0",
-    "webpack-dev-server": "^3.7.2"
-  },
-  "dependencies": {
-    "class-autobind": "^0.1.4",
-    "classnames": "^2.2.6",
-    "hex-rgba": "^1.0.2",
-    "idx": "^2.5.6",
-    "lodash": "^4.17.14",
-    "natives": "1.1.6",
-    "react-jss": "10.0.4",
-    "react-text-mask": "^5.4.3",
-    "react-waypoint": "^8.0.0"
-  },
-  "jest": {
-    "testURL": "https://occmundial.github.io/occ-atomic",
-    "setupTestFrameworkScriptFile": "./setupTests.js",
-    "collectCoverageFrom": [
-      "lib/**/*.js"
-    ],
-    "coverageReporters": [
-      "lcov"
-    ],
-    "roots": [
-      "<rootDir>/lib/"
-    ]
-  }
-}
+{
+  "name": "@occmundial/occ-atomic",
+  "version": "2.0.0-beta.11",
+  "description": "Collection of shareable styled React components for OCC applications.",
+  "homepage": "http://occmundial.github.io/occ-atomic",
+  "main": "build/index.js",
+  "scripts": {
+    "prestart": "npm run gen-docs",
+    "start": "cross-env NODE_ENV=development npm-run-all --parallel start-docs gen-docs:watch",
+    "start-docs": "webpack serve --port 3030 --config webpack.config.dev.js",
+    "gen-docs": "node scripts/generateComponentData.js",
+    "gen-docs:watch": "npm run gen-docs -- --watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "build": "babel lib -d build --copy-files",
+    "build:watch": "babel lib -w -d build --copy-files",
+    "build:bundle": "babel-node scripts/build.js",
+    "lint": "esw webpack.config.* lib src --color",
+    "lint:watch": "npm run lint -- --watch",
+    "prepare": "npm run build && husky install",
+    "predeploy": "npm run build:bundle",
+    "deploy": "node scripts/deploy.js",
+    "semantic-release": "semantic-release",
+    "audit-fix": "cross-env npm_config_yes=true npx yarn-audit-fix"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/occmundial/occ-atomic.git"
+  },
+  "author": "OCCMundial",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/node": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-proposal-do-expressions": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-bind": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@commitlint/cli": "13.1.0",
+    "@commitlint/config-angular": "13.1.0",
+    "@semantic-release/changelog": "6.0.0",
+    "@semantic-release/git": "10.0.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^27.2.1",
+    "babel-loader": "^8.0.2",
+    "base64-url": "^2.2.2",
+    "buffer": "^6.0.3",
+    "chokidar": "^3.5.2",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.3.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.13.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.5.1",
+    "eslint-watch": "^7.0.0",
+    "gh-pages": "^3.2.3",
+    "husky": "^7.0.0",
+    "jest": "^27.2.1",
+    "jsdom": "^11.11.0",
+    "npm-run-all": "^4.1.3",
+    "prettier": "^2.0.4",
+    "prism-react-renderer": "^1.2.1",
+    "prop-types": "^15.6.0",
+    "react": "^16.4.1",
+    "react-addons-test-utils": "^15.6.2",
+    "react-docgen": "^2.20.1",
+    "react-dom": "^16.4.1",
+    "react-meta-tags": "^0.7.4",
+    "react-test-renderer": "^16.3.1",
+    "semantic-release": "18.0.0",
+    "semantic-release-slack-bot": "^2.1.1",
+    "style-loader": "^0.21.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "webpack": "^5.32.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.0"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.24.1",
+    "class-autobind": "^0.1.4",
+    "hex-rgba": "^1.0.2",
+    "idx": "^2.5.6",
+    "jquery": "^3.2.1",
+    "lodash": "^4.17.21",
+    "natives": "1.1.6",
+    "react-jss": "8.6.0",
+    "react-text-mask": "^5.4.3",
+    "react-waypoint": "^8.0.0",
+    "unorm": "^1.6.0"
+  },
+  "jest": {
+    "testURL": "https://occmundial.github.io/occ-atomic",
+    "setupTestFrameworkScriptFile": "./setupTests.js",
+    "testEnvironment": "jsdom",
+    "collectCoverageFrom": [
+      "lib/**/*.js"
+    ],
+    "coverageReporters": [
+      "lcov"
+    ],
+    "roots": [
+      "<rootDir>/lib/"
+    ]
+  }
+}

package/playroom/FrameComponent.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import injectSheet from 'react-jss';
+import MetaTags from 'react-meta-tags';
+
+import styles from './styles';
+
+class FrameComponent extends React.Component {
+  render() {
+    const { children } = this.props;
+
+    return (
+      <>
+        <MetaTags>
+          <link
+            href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600|Open+Sans:400,600,700"
+            rel="stylesheet"
+          />
+        </MetaTags>
+        {children}
+      </>
+    );
+  }
+}
+
+FrameComponent.propTypes = {
+  children: PropTypes.node.isRequired,
+  classes: PropTypes.object.isRequired
+};
+
+export default injectSheet(styles)(FrameComponent);

package/playroom/styles.js

@@ -0,0 +1,14 @@
+import colors from '../lib/subatomic/colors';
+
+export default {
+    '@global': {
+        '*': {
+            boxSizing: 'border-box',
+        },
+        body: {
+            padding: 0,
+            margin: 0,
+            background: colors.bgGrey
+        }
+    }
+};

package/playroom.config.js

@@ -1,7 +1,7 @@
-module.exports = {
-    components: './build/index',
-    outputPath: './dist/playroom',
-    frameComponent: './playroom/FrameComponent.js',
-    title: 'OCC-Atomic',
-    widths: [320, 576, 768, 992, 1200, 1500]
-};
+module.exports = {
+    components: './build/index',
+    outputPath: './dist/playroom',
+    frameComponent: './playroom/FrameComponent.js',
+    title: 'OCC-Atomic',
+    widths: [320, 576, 768, 992, 1200, 1500]
+};

package/build/Grid/Grid.test.js

@@ -1,22 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _enzyme = require("enzyme");
-
-var _Grid = _interopRequireDefault(require("./Grid"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-describe("Grid", function () {
-  it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Grid["default"], null));
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-  it('matches the snapshot with the fluid prop', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Grid["default"], {
-      fluid: true
-    }));
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-});