@epilot360/icons 1.12.1 → 1.12.2

package/.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

package/.eslintrc.yml

@@ -0,0 +1,18 @@
+extends:
+  - "@epilot/eslint-config"
+ignorePatterns:
+  - node_modules
+  - dist
+rules:
+  "import/no-duplicates": "off"
+  "prettier/prettier":
+    - error
+    - printWidth: 120 # https://hackernoon.com/does-column-width-of-80-make-sense-in-2018-50c161fbdcf6
+      trailingComma: all # better diffs, obviously
+      bracketSpacing: true # more space = pretty
+      semi: true # https://github.com/standard/semistandard
+      useTabs: false
+      tabWidth: 2
+      singleQuote: true
+      quoteProps: as-needed
+      proseWrap: never

package/.gitignore

@@ -0,0 +1,12 @@
+node_modules
+npm_debug.log*
+dist/
+*.js
+*.js.map
+*.d.ts
+!webpack.config.js
+!webpack.config*.js
+!src/*.d.ts
+build/
+storybook-static/
+.idea

package/.gitlab-ci.yml

@@ -0,0 +1,19 @@
+include:
+  - project: "e-pilot/platform/epilot-ci"
+    ref: "4.3.0"
+    file: "gitlab/node/ci.cdk-spa.yml"
+
+variables:
+  SERVICE_NAME: epilot360-icons
+
+# publish npm package when a semver tag is pushed
+npm:publish:
+  stage: deploy
+  script:
+    - echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
+    - yarn --frozen-lockfile
+    - npm publish
+  rules:
+    - if: $CI_COMMIT_TAG =~ /^v\d+.*/i
+  tags:
+    - gitlab-org

package/.storybook/main.ts

@@ -0,0 +1,55 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    {
+      name: 'storybook-addon-turbo-build',
+      options: {
+        // Please refer below tables for available options
+        optimizationLevel: 2
+      }
+    }
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+    defaultName: "Usage",
+  },
+  webpackFinal: (defaultConfig) => {
+    if (defaultConfig.module?.rules) {
+      // exclude svg from file-loader
+      defaultConfig.module.rules = defaultConfig.module.rules.map((rule) => {
+        if (typeof rule === 'object' && rule?.test instanceof RegExp && rule['test'].test(".svg")) {
+          return {
+            ...rule,
+            exclude: /\.svg$/i,
+          };
+        }
+        return rule;
+      })
+
+      defaultConfig.module.rules.push({
+        test: /\.svg$/i,
+        use: [
+          {
+            loader: '@svgr/webpack',
+          },
+          {
+            loader: 'raw-loader',
+          },
+        ],
+      });
+    }
+
+    return defaultConfig;
+  }
+};
+export default config;

package/.storybook/preview.css

@@ -0,0 +1,227 @@
+:root {
+  /* typography */
+  --font-weight-regular: 400;
+  --font-weight-bold: 600;
+  --font-size: 14px;
+  --font-family: ProximaNova, Open Sans, Helvetica, Arial, sans-serif;
+
+  /* headers */
+  --h1-font-size: 96px;
+  --h2-font-size: 60px;
+  --h3-font-size: 48px;
+  --h3-line-height: 120%;
+  --h4-font-size: 32px;
+  --h4-line-height: 120%;
+  --h5-font-size: 24px;
+  --h5-line-height: 150%;
+  --h6-font-size: 20px;
+  --h6-line-height: 150%;
+
+  /* subtitles */
+  --subtitle1-font-size: 16px;
+  --subtitle1-line-height: 150%;
+  --subtitle2-font-size: 14px;
+  --subtitle2-line-height: 150%;
+
+  /* other font settings  */
+  --body1-font-size: 16px;
+  --body1-line-height: 150%;
+  --body2-font-size: 14px;
+  --body2-line-height: 157%;
+  --button-font-size: 16px;
+  --button-text-transform: none;
+  --caption-font-size: 12px;
+  --caption-line-height: 150%;
+  --overline-font-size: 12px;
+  --overline-line-height: 150%;
+  --overline-text-transform: uppercase;
+
+  /* palette */
+  /* primary */
+  --primary: var(--primary-40);
+  --on-primary: var(--primary-100);
+  --primary-container: var(--primary-90);
+  --on-primary-container: var(--primary-10);
+
+  --primary-100: #ffffff;
+  --primary-90: #d5e3ff;
+  --primary-80: #a8c8ff;
+  --primary-70: #77acff;
+  --primary-60: #4691f4;
+  --primary-50: #2177d8;
+  --primary-40: #005eb4;
+  --primary-30: #00468a;
+  --primary-20: #003062;
+  --primary-10: #001b3c;
+
+  /* secondary */
+  --secondary: var(--secondary-40);
+  --on-secondary: var(--secondary-100);
+  --secondary-container: var(--secondary-90);
+  --on-secondary-container: var(--secondary-10);
+
+  --secondary-100: #ffffff;
+  --secondary-90: #ffd6fa;
+  --secondary-80: #ffa9fe;
+  --secondary-70: #e987eb;
+  --secondary-60: #cb6dce;
+  --secondary-50: #ae53b2;
+  --secondary-40: #913997;
+  --secondary-30: #761e71;
+  --secondary-20: #590062;
+  --secondary-10: #36003c;
+
+  /* surface */
+  --surface: #F5F6FF;
+  --surface-container-highest: #D1D8FA;
+  --surface-container-high: #DAE0FB;
+  --surface-container: #E3E7FD;
+  --surface-container-low: #ECEFFE;
+  --surface-container-lowest: #FFFFFF;
+
+  /* neutral */
+  --neutral-100: #ffffff;
+  --neutral-90: #d1d8fa;
+  --neutral-80: #b3c5ff;
+  --neutral-70: #8ca8fc;
+  --neutral-60: #718ee0;
+  --neutral-50: #5674c4;
+  --neutral-40: #3c5ba9;
+  --neutral-30: #21428f;
+  --neutral-20: #002b75;
+  --neutral-10: #001849;
+
+  /* neutral variant */
+  --neutral-variant-90: #e0e2ec;
+  --neutral-variant-80: #c4c6cf;
+  --neutral-variant-70: #a8abb4;
+  --neutral-variant-60: #8e9099;
+  --neutral-variant-50: #74777f;
+  --neutral-variant-40: #5b5e66;
+  --neutral-variant-30: #43474e;
+  --neutral-variant-20: #2d3038;
+  --neutral-variant-10: #181c22;
+
+  /* success */
+  --success: var(--success-40);
+  --on-success: var(--success-100);
+  --success-container: var(--success-90);
+  --on-success-container: var(--success-10);
+
+  --success-100: #ffffff;
+  --success-90: #daf1da;
+  --success-80: #b5e3b6;
+  --success-70: #8fd691;
+  --success-60: #6ac86d;
+  --success-50: #428540;
+  --success-40: #286c2a;
+  --success-30: #29702b;
+  --success-20: #1c4a1d;
+  --success-10: #0e250e;
+
+  /* warning */
+  --warning: var(--warning-40);
+  --on-warning: var(--warning-100);
+  --warning-container: var(--warning-90);
+  --on-warning-container: var(--warning-10);
+
+  --warning-100: #ffffff;
+  --warning-90: #fff2cc;
+  --warning-80: #ffe499;
+  --warning-70: #ffd766;
+  --warning-60: #ffc933;
+  --warning-50: #ffbc00;
+  --warning-40: #cc9600;
+  --warning-30: #997100;
+  --warning-20: #664b00;
+  --warning-10: #332600;
+
+  /* error */
+  --error: var(--error-40);
+  --on-error: var(--error-100);
+  --error-container: var(--error-90);
+  --on-error-container: var(--error-10);
+
+  --error-100: #ffffff;
+  --error-90: #ffcccf;
+  --error-80: #ff99a3;
+  --error-70: #ff6674;
+  --error-60: #ff3346;
+  --error-50: #ff0018;
+  --error-40: #cc0013;
+  --error-30: #99000e;
+  --error-20: #66000a;
+  --error-10: #330005;
+
+  /* action */
+  --action-active: #324C66;
+  --action-hover: #EFF5FA;
+  --action-selected: #324C66;
+  --action-selected-text: #ffffff;
+  --action-disabled: #E6EEF7;
+  --action-focus: #324C66;
+
+  /* other colors */
+  --text-primary: #001849;
+  --text-secondary: #43474e;
+  --divider: var(--neutral-variant-80);
+  --outline: var(--neutral-variant-50);
+  --green: #2FBC8A;
+  --green-contrast-text: #FFFFFF;
+  --darkgrey: #1B3855;
+  --darkgrey-contrast-text: #FFFFFF;
+  --bostonblue: #349BBC;
+  --bostonblue-contrast-text: #FFFFFF;
+  --darkgreen: #165D37;
+  --darkgreen-contrast-text: #FFFFFF;
+  --purple: #9A79F8;
+  --purple-contrast-text: #FFFFFF;
+  --pink: #F09DDE;
+  --pink-contrast-text: #FFFFFF;
+  --lightblue: #6299F8;
+  --lightblue-contrast-text: #FFFFFF;
+  --blue: #0A69F7;
+  --blue-contrast-text: #FFFFFF;
+  --lavender: #CDD6F8;
+  --lavender-contrast-text: #172B4D;
+  --red: #F9747C;
+  --red-contrast-text: #172B4D;
+  --cyan: #B6EFF3;
+  --cyan-contrast-text: #172B4D;
+  --orange: #FFC65C;
+  --orange-contrast-text: #172B4D;
+
+  /* other */
+  --spacing: 4px;
+  --border-radius: 16px;
+
+  /* shadows */
+  --shadow-0: none;
+  --shadow-1: 0px 1px 4px rgba(21, 43, 66, 0.16);
+  --shadow-2: 0px 0px 8px rgba(21, 43, 66, 0.24);
+  --shadow-3: 0px 0px 24px rgba(21, 43, 66, 0.12);
+  --shadow-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  --shadow-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+  --shadow-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  --shadow-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+  --shadow-8: 0px 0px 8px rgba(21, 43, 66, 0.24);
+  --shadow-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
+  --shadow-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
+  --shadow-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
+  --shadow-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+  --shadow-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
+  --shadow-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
+  --shadow-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
+  --shadow-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
+  --shadow-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
+  --shadow-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
+  --shadow-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
+  --shadow-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
+  --shadow-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
+  --shadow-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
+  --shadow-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
+  --shadow-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+
+  --enable_ripple: false;
+  --content_max_width: 1128
+}

package/.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from "@storybook/react";
+
+import './preview.css'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from './react';
+export * from './svg';
+export * from './types';