@beequip/hexagon 0.11.0

package/dist/theme/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.baseline = exports.media = exports.breakpoints = exports.fontSizes = exports.theme = void 0;
+var theme_1 = require("./theme");
+Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return theme_1.theme; } });
+var typography_1 = require("./typography");
+Object.defineProperty(exports, "fontSizes", { enumerable: true, get: function () { return typography_1.fontSizes; } });
+var breakpoints_1 = require("./breakpoints");
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return breakpoints_1.breakpoints; } });
+Object.defineProperty(exports, "media", { enumerable: true, get: function () { return breakpoints_1.media; } });
+exports.baseline = 8;
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":";;;AAAA,iCAA+B;AAAtB,8FAAA,KAAK,OAAA;AACd,2CAAwC;AAA/B,uGAAA,SAAS,OAAA;AAClB,6CAAkD;AAAzC,0GAAA,WAAW,OAAA;AAAE,oGAAA,KAAK,OAAA;AAEd,QAAA,QAAQ,GAAG,CAAC,CAAA"}

package/dist/theme/theme.d.ts

@@ -0,0 +1,72 @@
+import { FontSizesMap, SpacingMap, ButtonColorType, ShadesMap } from './types';
+export declare const GREY1 = "#131923";
+export declare const GREY2 = "#5A5E65";
+export declare const GREY3 = "#B8BABD";
+export declare const GREY4 = "#E5E6E7";
+export declare const GREY5 = "#F6F6F6";
+export declare const PRIMARY = "#FFA100";
+export declare const PRIMARY_LIGHT = "#FFC400";
+export declare const PRIMARY_DARK = "#FFA100";
+export declare const PRIMARY_LIGHT_BACKGROUND = "#F9FAFB";
+export declare const ACCENT = "#056fff";
+export declare const ACCENT_LIGHT = "#207DFF";
+export declare const ACCENT_DARK = "#2A1BFF";
+export interface ThemeInterface {
+    baseline: number;
+    font: {
+        default: string;
+        heading: string;
+        sizes: FontSizesMap<string>;
+        lineHeight: number;
+    };
+    colors: {
+        primary: string;
+        primaryLight: string;
+        primaryDark: string;
+        primaryLightBackground: string;
+        accent: string;
+        accentLight: string;
+        accentDark: string;
+        black: string;
+        white: string;
+        grey: ShadesMap<string>;
+        red: string;
+        green: string;
+        orange: string;
+        success: string;
+        warning: string;
+        error: string;
+        message: string;
+        text: {
+            default: string;
+            heading: string;
+            light: string;
+        };
+        input: {
+            border: string;
+            focus: string;
+            error: string;
+            background: string;
+            backgroundHover: string;
+            placeholder: string;
+            color: string;
+        };
+        buttons: ButtonColorType;
+        links: {
+            default: string;
+            hover: string;
+            focus: string;
+        };
+    };
+    borderColor: string;
+    borderRadius: {
+        default: number;
+        button: number;
+        input: number;
+    };
+    borderWidth: number;
+    spacing: SpacingMap<number>;
+    shadow: string;
+    shadowHover: string;
+}
+export declare const theme: ThemeInterface;

package/dist/theme/theme.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.theme = exports.ACCENT_DARK = exports.ACCENT_LIGHT = exports.ACCENT = exports.PRIMARY_LIGHT_BACKGROUND = exports.PRIMARY_DARK = exports.PRIMARY_LIGHT = exports.PRIMARY = exports.GREY5 = exports.GREY4 = exports.GREY3 = exports.GREY2 = exports.GREY1 = void 0;
+var typography_1 = require("./typography");
+// Standard colors and shades
+var BLACK = '#000';
+var WHITE = '#fff';
+exports.GREY1 = '#131923';
+exports.GREY2 = '#5A5E65';
+exports.GREY3 = '#B8BABD';
+exports.GREY4 = '#E5E6E7';
+exports.GREY5 = '#F6F6F6';
+var RED = '#FF6259';
+var GREEN = '#43DC75';
+var ORANGE = '#FFA100';
+// Main color that indicates productive actions
+exports.PRIMARY = '#FFA100';
+exports.PRIMARY_LIGHT = '#FFC400';
+exports.PRIMARY_DARK = ORANGE;
+exports.PRIMARY_LIGHT_BACKGROUND = '#F9FAFB';
+// Secondary color that indicates counterproductive actions
+var SECONDARY = exports.GREY1;
+var SECONDARY_LIGHT = exports.GREY2;
+// Accent color that draws attention
+exports.ACCENT = '#056fff';
+exports.ACCENT_LIGHT = '#207DFF';
+exports.ACCENT_DARK = '#2A1BFF';
+// Notification colors
+var SUCCESS = GREEN;
+var WARNING = exports.PRIMARY;
+var ERROR = RED;
+var MESSAGE = exports.ACCENT;
+// Global defaults
+var BORDER_COLOR = exports.GREY4;
+var FONT_DEFAULT = "'Gotham Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;";
+var FONT_HEADING = "'Gotham Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;";
+exports.theme = {
+    baseline: 8,
+    font: {
+        default: FONT_DEFAULT,
+        heading: FONT_HEADING,
+        sizes: typography_1.fontSizes,
+        lineHeight: 1.5,
+    },
+    colors: {
+        primary: exports.PRIMARY,
+        primaryLight: exports.PRIMARY_LIGHT,
+        primaryDark: exports.PRIMARY_DARK,
+        primaryLightBackground: exports.PRIMARY_LIGHT_BACKGROUND,
+        accent: exports.ACCENT,
+        accentLight: exports.ACCENT_LIGHT,
+        accentDark: exports.ACCENT_DARK,
+        black: BLACK,
+        white: WHITE,
+        grey: {
+            1: exports.GREY1,
+            2: exports.GREY2,
+            3: exports.GREY3,
+            4: exports.GREY4,
+            5: exports.GREY5,
+        },
+        red: RED,
+        green: GREEN,
+        orange: ORANGE,
+        success: SUCCESS,
+        warning: WARNING,
+        error: ERROR,
+        message: MESSAGE,
+        // Typography
+        text: {
+            default: exports.GREY1,
+            heading: exports.GREY1,
+            light: exports.GREY2,
+        },
+        // Form elements
+        input: {
+            border: exports.GREY5,
+            focus: exports.ACCENT,
+            error: WARNING,
+            background: exports.GREY5,
+            backgroundHover: WHITE,
+            placeholder: exports.GREY3,
+            color: BLACK,
+        },
+        // Buttons
+        buttons: {
+            primary: exports.PRIMARY,
+            primaryHover: exports.PRIMARY_LIGHT,
+            primaryFocus: exports.PRIMARY_LIGHT,
+            secondary: SECONDARY,
+            secondaryHover: SECONDARY_LIGHT,
+            secondaryFocus: SECONDARY_LIGHT,
+        },
+        // Links
+        links: {
+            default: exports.PRIMARY,
+            hover: exports.PRIMARY_LIGHT,
+            focus: exports.PRIMARY_LIGHT,
+        },
+    },
+    borderColor: BORDER_COLOR,
+    borderRadius: {
+        default: 0,
+        button: 0,
+        input: 0,
+    },
+    borderWidth: 1,
+    spacing: {
+        0: 0,
+        1: 8,
+        2: 16,
+        3: 24,
+        4: 32,
+        5: 40,
+        6: 48,
+        7: 56,
+    },
+    shadow: '0 1px 3px 0px rgba(0, 0, 0, 0.15)',
+    shadowHover: '0 2px 3px 0px rgba(0, 0, 0, 0.10)',
+};
+//# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":";;;AACA,2CAAwC;AAExC,6BAA6B;AAC7B,IAAM,KAAK,GAAG,MAAM,CAAA;AACpB,IAAM,KAAK,GAAG,MAAM,CAAA;AACP,QAAA,KAAK,GAAG,SAAS,CAAA;AACjB,QAAA,KAAK,GAAG,SAAS,CAAA;AACjB,QAAA,KAAK,GAAG,SAAS,CAAA;AACjB,QAAA,KAAK,GAAG,SAAS,CAAA;AACjB,QAAA,KAAK,GAAG,SAAS,CAAA;AAC9B,IAAM,GAAG,GAAG,SAAS,CAAA;AACrB,IAAM,KAAK,GAAG,SAAS,CAAA;AACvB,IAAM,MAAM,GAAG,SAAS,CAAA;AAExB,+CAA+C;AAClC,QAAA,OAAO,GAAG,SAAS,CAAA;AACnB,QAAA,aAAa,GAAG,SAAS,CAAA;AACzB,QAAA,YAAY,GAAG,MAAM,CAAA;AACrB,QAAA,wBAAwB,GAAG,SAAS,CAAA;AAEjD,2DAA2D;AAC3D,IAAM,SAAS,GAAG,aAAK,CAAA;AACvB,IAAM,eAAe,GAAG,aAAK,CAAA;AAE7B,oCAAoC;AACvB,QAAA,MAAM,GAAG,SAAS,CAAA;AAClB,QAAA,YAAY,GAAG,SAAS,CAAA;AACxB,QAAA,WAAW,GAAG,SAAS,CAAA;AAEpC,sBAAsB;AACtB,IAAM,OAAO,GAAG,KAAK,CAAA;AACrB,IAAM,OAAO,GAAG,eAAO,CAAA;AACvB,IAAM,KAAK,GAAG,GAAG,CAAA;AACjB,IAAM,OAAO,GAAG,cAAM,CAAA;AAEtB,kBAAkB;AAClB,IAAM,YAAY,GAAG,aAAK,CAAA;AAC1B,IAAM,YAAY,GAAG,+DAA+D,CAAA;AACpF,IAAM,YAAY,GAAG,+DAA+D,CAAA;AAiEvE,QAAA,KAAK,GAAmB;IACjC,QAAQ,EAAE,CAAC;IACX,IAAI,EAAE;QACF,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,sBAAS;QAChB,UAAU,EAAE,GAAG;KAClB;IACD,MAAM,EAAE;QACJ,OAAO,EAAE,eAAO;QAChB,YAAY,EAAE,qBAAa;QAC3B,WAAW,EAAE,oBAAY;QACzB,sBAAsB,EAAE,gCAAwB;QAChD,MAAM,EAAE,cAAM;QACd,WAAW,EAAE,oBAAY;QACzB,UAAU,EAAE,mBAAW;QACvB,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE;YACF,CAAC,EAAE,aAAK;YACR,CAAC,EAAE,aAAK;YACR,CAAC,EAAE,aAAK;YACR,CAAC,EAAE,aAAK;YACR,CAAC,EAAE,aAAK;SACX;QACD,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,OAAO;QAChB,aAAa;QACb,IAAI,EAAE;YACF,OAAO,EAAE,aAAK;YACd,OAAO,EAAE,aAAK;YACd,KAAK,EAAE,aAAK;SACf;QACD,gBAAgB;QAChB,KAAK,EAAE;YACH,MAAM,EAAE,aAAK;YACb,KAAK,EAAE,cAAM;YACb,KAAK,EAAE,OAAO;YACd,UAAU,EAAE,aAAK;YACjB,eAAe,EAAE,KAAK;YACtB,WAAW,EAAE,aAAK;YAClB,KAAK,EAAE,KAAK;SACf;QACD,UAAU;QACV,OAAO,EAAE;YACL,OAAO,EAAE,eAAO;YAChB,YAAY,EAAE,qBAAa;YAC3B,YAAY,EAAE,qBAAa;YAC3B,SAAS,EAAE,SAAS;YACpB,cAAc,EAAE,eAAe;YAC/B,cAAc,EAAE,eAAe;SAClC;QACD,QAAQ;QACR,KAAK,EAAE;YACH,OAAO,EAAE,eAAO;YAChB,KAAK,EAAE,qBAAa;YACpB,KAAK,EAAE,qBAAa;SACvB;KACJ;IACD,WAAW,EAAE,YAAY;IACzB,YAAY,EAAE;QACV,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,CAAC;KACX;IACD,WAAW,EAAE,CAAC;IACd,OAAO,EAAE;QACL,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,EAAE;QACL,CAAC,EAAE,EAAE;QACL,CAAC,EAAE,EAAE;QACL,CAAC,EAAE,EAAE;QACL,CAAC,EAAE,EAAE;QACL,CAAC,EAAE,EAAE;KACR;IACD,MAAM,EAAE,mCAAmC;IAC3C,WAAW,EAAE,mCAAmC;CACnD,CAAA"}

package/dist/theme/types.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare type FontSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
+export declare type FontSizesMap<T> = Record<FontSizes, T>;
+export declare type Spacing = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 0;
+export declare type SpacingMap<T> = Record<Spacing, T>;
+export declare type BoxSides = 'top' | 'right' | 'bottom' | 'left';
+export declare type BoxSidesMap<T> = Record<BoxSides, T>;
+export declare type Shades = 1 | 2 | 3 | 4 | 5;
+export declare type ShadesMap<T> = Record<Shades, T>;
+export declare type InputType = 'text' | 'number' | 'password' | 'tel' | 'email';
+export declare type TextAlignType = 'left' | 'center' | 'right';
+export declare type AlignType = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+export declare type JustifyType = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+export interface ButtonColorType {
+    primary: string;
+    primaryHover: string;
+    primaryFocus: string;
+    secondary: string;
+    secondaryHover: string;
+    secondaryFocus: string;
+}
+export declare type ButtonStyles = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'none';
+export declare const SIZE_SMALL = "small";
+export declare const SIZE_MEDIUM = "medium";
+export declare const SIZE_LARGE = "large";
+export declare type ButtonSize = typeof SIZE_SMALL | typeof SIZE_MEDIUM | typeof SIZE_LARGE;
+export interface IconProps {
+    width?: number | string;
+    color?: string;
+}
+export interface Tooltip {
+    content: React.ReactNode;
+    place?: 'top' | 'bottom' | 'left' | 'right';
+}

package/dist/theme/types.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIZE_LARGE = exports.SIZE_MEDIUM = exports.SIZE_SMALL = void 0;
+exports.SIZE_SMALL = 'small';
+exports.SIZE_MEDIUM = 'medium';
+exports.SIZE_LARGE = 'large';
+//# sourceMappingURL=types.js.map

package/dist/theme/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":";;;AAyCa,QAAA,UAAU,GAAG,OAAO,CAAA;AACpB,QAAA,WAAW,GAAG,QAAQ,CAAA;AACtB,QAAA,UAAU,GAAG,OAAO,CAAA"}

package/dist/theme/typography.d.ts

@@ -0,0 +1,9 @@
+export declare const fontSizes: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+};

package/dist/theme/typography.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontSizes = void 0;
+exports.fontSizes = {
+    xs: '12px',
+    s: '14px',
+    m: '16px',
+    l: '20px',
+    xl: '24px',
+    xxl: '28px',
+    xxxl: '32px',
+};
+//# sourceMappingURL=typography.js.map

package/dist/theme/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":";;;AAAa,QAAA,SAAS,GAAG;IACrB,EAAE,EAAE,MAAM;IACV,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;IACT,EAAE,EAAE,MAAM;IACV,GAAG,EAAE,MAAM;IACX,IAAI,EAAE,MAAM;CACf,CAAA"}

package/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "@beequip/hexagon",
+    "version": "0.11.0",
+    "description": "Component library for BEEQUIP",
+    "main": "dist/index.js",
+    "files": [
+        "dist/"
+    ],
+    "author": "BEEQUIP B.V.",
+    "license": "MIT",
+    "scripts": {
+        "build": "tsc",
+        "watch": "tsc --watch",
+        "lint:check": "eslint --ext .js --ext .ts --ext .tsx .",
+        "lint:fix": "yarn run lint:check --fix",
+        "preversion": "del './dist/*' && yarn run build",
+        "release-canary": "np --any-branch",
+        "release": "np",
+        "test": "yarn run lint:check",
+        "storybook": "start-storybook -s ./fonts -p 6006",
+        "build-storybook": "build-storybook -s ./fonts"
+    },
+    "types": "./dist/index.d.ts",
+    "devDependencies": {
+        "@babel/core": "^7.11.6",
+        "@beequip/eslint-config-react-typescript": "^0.3.0",
+        "@storybook/addon-actions": "^6.0.22",
+        "@storybook/addon-essentials": "^6.0.22",
+        "@storybook/addon-links": "^6.0.22",
+        "@storybook/react": "^6.3.7",
+        "@types/react-dom": "^17.0.9",
+        "@types/react-router-dom": "^5.1.8",
+        "@types/styled-components": "^5.1.12",
+        "babel-loader": "^8.1.0",
+        "chromatic": "^5.2.0",
+        "del-cli": "^3.0.0",
+        "eslint": "^6.6.0",
+        "np": "^5.1.2",
+        "prettier": "^1.16.4",
+        "react-is": "^16.13.1",
+        "ts-loader": "^6.2.1",
+        "typescript": "^4.3.5"
+    },
+    "dependencies": {
+        "downshift": "^3.2.14",
+        "react": "^16.8.6",
+        "react-dom": "^16.8.3",
+        "react-pose": "^4.0.8",
+        "react-router-dom": "^5.0.0",
+        "react-tooltip": "^4.2.8",
+        "styled-components": "^5.3.0",
+        "styled-map": "^3.2.0-rc.1",
+        "tslib": "^2.2.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}