@smileid/web-components 1.0.0-beta

package/index.js

@@ -0,0 +1,5 @@
+import DocumentCaptureScreens from './components/document/src';
+import SelfieCaptureScreens from './components/selfie/src';
+import SmartCameraWeb from './components/smart-camera-web/src/SmartCameraWeb';
+
+export { DocumentCaptureScreens, SelfieCaptureScreens, SmartCameraWeb };

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@smileid/web-components",
+  "version": "1.0.0-beta",
+  "exports": {
+    ".": "./index.js",
+    "./combobox": "./components/combobox/src/index.js",
+    "./document-capture": "./components/document/src/index.js",
+    "./end-user-consent": "./components/end-user-consent/src/index.js",
+    "./navigation": "./components/navigation/src/index.js",
+    "./selfie-capture": "./components/selfie/src/index.js",
+    "./signature-pad": "./components/signature-pad/src/index.js",
+    "./totp-consent": "./components/totp-consent/src/index.js",
+    "./smart-camera-web": "./components/smart-camera-web/src/SmartCameraWeb.js"
+  },
+  "scripts": {
+    "build": "NODE_ENV=development node esbuild.js",
+    "clean": "rm -rf build dist",
+    "lint:fix": "eslint . --ext .js --fix",
+    "lint:html": "npx prettier --write $(git ls-files '*.html')",
+    "lint": "eslint . --ext .js",
+    "start": "npm run build && npx serve -p 8000 build",
+    "test": "npx cypress run"
+  },
+  "description": "A collection of Web Components used by SmileID",
+  "keywords": [
+    "Web Components"
+  ],
+  "type": "module",
+  "author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
+  "dependencies": {
+    "signature_pad": "^4.1.7",
+    "validate.js": "^0.13.1"
+  },
+  "devDependencies": {
+    "cypress": "^13.6.6",
+    "esbuild": "^0.20.2",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^28.2.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "^3.2.2"
+  }
+}

package/styles/README.md

@@ -0,0 +1,3 @@
+# @smileid/styles
+
+This is a package that contains global styles exported as a string to be used in composing CSS in Web Components and anywhere else

package/styles/src/styles.js

@@ -0,0 +1,348 @@
+import typography from './typography';
+
+const styles = `<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link
+  href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap"
+  rel="stylesheet"
+  as="style"
+/>
+<style>
+${typography}
+:host {
+    --color-active: #001096;
+    --color-default: #2d2b2a;
+    --color-disabled: #848282;
+    --web-digital-blue: #001096;
+  }
+
+  * {
+    font-family: "DM Sans", sans-serif;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  [disabled] {
+    cursor: not-allowed !important;
+    filter: grayscale(75%);
+  }
+
+  .visually-hidden {
+    border: 0;
+    clip: rect(1px 1px 1px 1px);
+    clip: rect(1px, 1px, 1px, 1px);
+    height: auto;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+
+  video {
+    background-color: black;
+  }
+
+  a {
+    color: currentColor;
+    text-decoration: none;
+  }
+
+  svg {
+    max-width: 100%;
+  }
+
+  .color-gray {
+    color: #797979;
+  }
+
+  .color-red {
+    color: red;
+  }
+
+  .color-richblue {
+    color: #4e6577;
+  }
+
+  .color-richblue-shade {
+    color: #0e1b42;
+  }
+
+  .color-digital-blue {
+    color: var(--web-digital-blue) !important;
+  }
+
+  .color-deep-blue {
+    color: #001096;
+  }
+
+  .center {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .font-size-small {
+    font-size: 0.75rem;
+  }
+
+  .font-size-large {
+    font-size: 1.5rem;
+  }
+
+  .text-transform-uppercase {
+    text-transform: uppercase;
+  }
+
+  [id*=-"screen"] {
+    min-block-size: 100%;
+  }
+
+  [data-variant~="full-width"] {
+    inline-size: 100%;
+  }
+
+  .flow > * + * {
+    margin-top: var(--flow-space, 1rem);
+  }
+
+  .button {
+    --button-color: var(--color-active);
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 2.5rem;
+    border: 0;
+    background-color: transparent;
+    color: #fff;
+    cursor: pointer;
+    display: block;
+    font-size: 18px;
+    font-weight: 600;
+    padding: 0.75rem 1.5rem;
+    text-align: center;
+  }
+
+  .button:hover,
+  .button:focus,
+  .button:active {
+    --button-color: var(--color-default);
+  }
+
+  .button:disabled {
+    --button-color: var(--color-disabled);
+  }
+
+  .button[data-variant~="solid"] {
+    background-color: var(--button-color);
+    border: 2px solid var(--button-color);
+  }
+
+  .button[data-variant~="outline"] {
+    color: var(--button-color);
+    border: 2px solid var(--button-color);
+  }
+
+  .button[data-variant~="ghost"] {
+    padding: 0px;
+    color: var(--button-color);
+    background-color: transparent;
+  }
+
+  .icon-btn {
+    appearance: none;
+    background: none;
+    border: none;
+    color: hsl(0deg 0% 94%);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 8px;
+  }
+  .justify-right {
+    justify-content: end !important;
+  }
+  .nav {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .back-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .back-button-text {
+    font-size: 11px;
+    line-height: 11px;
+    color: rgb(21, 31, 114);
+  }
+
+
+  .selfie-capture-review-image {
+    overflow: hidden;
+    aspect-ratio: 1/1;
+  }
+
+  #review-image {
+    scale: 1.75;
+  }
+
+  @media (max-aspect-ratio: 1/1) {
+    #review-image {
+      transform: scaleX(-1) translateY(-10%);
+    }
+  }
+
+  .tips,
+  .powered-by {
+    align-items: center;
+    border-radius: 0.25rem;
+    color: #4e6577;
+    display: flex;
+    justify-content: center;
+    letter-spacing: 0.075em;
+  }
+
+  .powered-by {
+    box-shadow: 0px 2.57415px 2.57415px rgba(0, 0, 0, 0.06);
+    display: inline-flex;
+    font-size: 0.5rem;
+  }
+
+  .tips {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 17rem;
+  }
+
+  .tips > * + *,
+  .powered-by > * + * {
+    display: inline-block;
+    margin-left: 0.5em;
+  }
+
+  .powered-by .company {
+    color: #18406d;
+    font-weight: 700;
+    letter-spacing: 0.15rem;
+  }
+
+  .logo-mark {
+    background-color: #004071;
+    display: inline-block;
+    padding: 0.25em 0.5em;
+  }
+
+  .logo-mark svg {
+    height: auto;
+    justify-self: center;
+    width: 0.75em;
+  }
+
+  #document-capture-instructions-screen,
+  #back-of-document-capture-instructions-screen {
+    padding-block: 2rem;
+    display: flex;
+    flex-direction: column;
+    max-block-size: 100%;
+    max-inline-size: 40ch;
+    justify-content: space-between;
+  }
+
+  #document-capture-instructions-screen header p {
+    margin-block: 0 !important;
+  }
+
+  .description {
+    color: var(--neutral-off-black, #2D2B2A);
+    text-align: center;
+
+    /* p */
+    font-family: DM Sans;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
+  }
+
+  .padding-bottom-2 {
+    padding-bottom: 2rem;
+  }
+
+  .instructions-wrapper {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin-block-start: 2rem;
+    margin-block-end: 2rem;
+  }
+  .instructions {
+    display: flex;
+    align-items: center;
+    text-align: initial;
+  }
+
+  .instructions svg {
+    flex-shrink: 0;
+    margin-inline-end: 2rem;
+  }
+
+  .instructions p {
+    margin-block: 0;
+  }
+
+  .instruction {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .instruction-body {
+    font-size: 0.75rem;
+  }
+
+  .instruction-header {
+    color: var(--web-digital-blue, #001096);
+  }
+
+  .flex-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @keyframes spin {
+    0% {
+        transform: translate3d(-50%, -50%, 0) rotate(0deg);
+    }
+    100% {
+        transform: translate3d(-50%, -50%, 0) rotate(360deg);
+    }
+}
+
+.spinner {
+    animation: 1.5s linear infinite spin;
+    animation-play-state: inherit;
+    border: solid 5px #cfd0d1;
+    border-bottom-color: var(--color-active);
+    border-radius: 50%;
+    content: "";
+    display: block;
+    height: 25px;
+    width: 25px;
+    will-change: transform;
+    position: relative;
+    top: .675rem;
+    left: 1.25rem;
+    }
+
+</style>`;
+
+export default styles;

package/styles/src/typography.js

@@ -0,0 +1,52 @@
+const typography = `
+  .text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+  .text-sm {
+    font-size: 0.875rem;
+    line-height: 1.125rem;
+  }
+  .text-base {
+    font-size: 1rem;
+    line-height: 1rem;
+  }
+  .text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+  .text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+  .text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+  .text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+  .text-4xl {
+    font-size: 2rem;
+    line-height: 2.5rem;
+  }
+  .text-5xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+  .font-bold {
+    font-weight: 700;
+  }
+  .font-semibold {
+    font-weight: 600;
+  }
+  .font-medium {
+    font-weight: 500;
+  }
+  .font-normal {
+    font-weight: 400;
+  }
+`;
+
+export default typography;