@ncino/web-components 7.0.0-preview.8 → 7.0.0

package/dist/styles/gator/_gator-typography.css

@@ -0,0 +1,186 @@
+@import '../../../src/styles/fonts';
+/* Body Text */
+body {
+    font-family: var(--text-family-body, "Open Sans"), sans-serif;
+}
+
+.gator-body-1 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 400;
+	font-family: var(--text-family-body, "Open Sans");
+	color: var(--text-color-primary-base, #1F1F1F);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+	font-size: var(--text-font-size-body-1, 17px);
+	line-height: var(--text-line-height-body-1, 24px);
+}
+
+.gator-body-2 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 400;
+	font-family: var(--text-family-body, "Open Sans");
+	color: var(--text-color-primary-base, #1F1F1F);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+	font-size: var(--text-font-size-body-2, 15px);
+	line-height: var(--text-line-height-body-2, 22px);
+}
+
+.gator-body-3 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 400;
+	font-family: var(--text-family-body, "Open Sans");
+	color: var(--text-color-primary-base, #1F1F1F);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+	font-size: var(--text-font-size-body-3, 13px);
+	line-height: var(--text-line-height-body-3, 18px);
+}
+
+.gator-body-bold {
+	font-weight: 700;
+}
+
+.gator-body-semibold {
+	font-weight: 600;
+}
+
+.gator-uppercase {
+	text-transform: uppercase;
+}
+
+/* Headings */
+.gator-heading-display-1 {
+    font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-display-1, 72px);
+	line-height: var(--text-line-height-display-1, 90px);
+}
+
+.gator-heading-display-2 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-display-2, 64px);
+	line-height: var(--text-line-height-display-2, 78px);
+}
+
+.gator-heading-h1 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-1, 40px);
+	line-height: var(--text-line-height-heading-1, 50px);
+}
+
+.gator-heading-h1 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-1, 40px);
+	line-height: var(--text-line-height-heading-1, 50px);
+}
+
+.gator-heading-h2 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-2, 32px);
+	line-height: var(--text-line-height-heading-2, 40px);
+}
+
+.gator-heading-h3 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-3, 26px);
+	line-height: var(--text-line-height-heading-3, 36px);
+}
+
+.gator-heading-h4 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-4, 22px);
+	line-height: var(--text-line-height-heading-4, 32px);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+}
+.gator-heading-h5 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-5, 20px);
+	line-height: var(--text-line-height-heading-5, 30px);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+}
+.gator-heading-h6 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-6, 18px);
+	line-height: var(--text-line-height-28, 28px);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+}
+
+@media (max-width: 768px) {
+	.gator-heading-display-1 {
+		font-size: var(--text-font-size-sm-display-1, 48px);
+		line-height: var(--text-line-height-sm-display-1, 56px);
+	}
+	.gator-heading-display-2 {
+		font-size: var(--text-font-size-sm-display-2, 36px);
+		line-height: var(--text-line-height-sm-display-2, 48px);
+	}
+	.gator-heading-h1 {
+		font-size: var(--text-font-size-sm-heading-1, 28px);
+		line-height: var(--text-line-height-sm-heading-1, 36px);
+	}
+	.gator-heading-h2 {
+		font-size: var(--text-font-size-sm-heading-2, 24px);
+		line-height: var(--text-line-height-sm-heading-2, 32px);
+	}
+	.gator-heading-h3 {
+		font-size: var(--text-font-size-sm-heading-3, 22px);
+		line-height: var(--text-line-height-sm-heading-3, 32px);
+	}
+	.gator-heading-h4 {
+		font-size: var(--text-font-size-sm-heading-4, 20px);
+		line-height: var(--text-line-height-sm-heading-4, 30px);
+	}
+	.gator-heading-h5 {
+		font-size: var(--text-size-18, 18px);
+		line-height: var(--text-line-height-28, 28px);
+	}
+	.gator-heading-h6 {
+		font-size: var(--text-size-17, 17px);
+		line-height: var(--text-line-height-24, 24px);
+	}
+}

package/dist/styles/gator/gator-global-styles.css

@@ -1,10 +1,7 @@
 @import 'tokens/_gator-global-tokens.css';
 @import '_gator-grid.css';
 @import '_gator-sizing.css';
-
-body {
-    font-family: var(--text-family-body, "Open Sans"), sans-serif;
-}
+@import '_gator-typography.css';
 
 .gator-d-flex {
     display: flex;
@@ -12,4 +9,4 @@ body {
 
 .gator-d-inline-flex {
     display: inline-flex;
-}
+}

package/dist/types/components/progress-ring/gator/progress-ring.gator.d.ts

@@ -0,0 +1,37 @@
+import { TestableLitElement } from '../../../utils/components/testable-lit-element/testable-lit-element';
+export declare class NgcProgressRing extends TestableLitElement {
+    /**
+     * @property {number} value - The progress value from 0 to 100.
+     */
+    value: number;
+    /**
+     * @property {number} diameter - The diameter of the progress ring in px.
+     */
+    diameter: number | undefined;
+    /**
+     * @property {string} size - The size of the progress ring: default or large.
+     */
+    size: '' | 'large';
+    /**
+     * @property {boolean} skeleton - Whether to render the progress ring in a skeleton state.
+     */
+    skeleton: boolean;
+    /**
+     * @property {string} variant - The variant of the progress ring.
+     */
+    variant: '' | 'ai' | 'success' | 'warning' | 'error';
+    static styles: import('lit').CSSResult[];
+    get computedDiameter(): number;
+    get clampedValue(): number;
+    get radius(): number;
+    get circumference(): number;
+    get dashOffset(): number;
+    render(): import('lit').TemplateResult<1>;
+    private handleSlotChange;
+    private renderVariantIcon;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ngc-progress-ring': NgcProgressRing;
+    }
+}

package/dist/types/components/progress-ring/index.d.ts

@@ -0,0 +1 @@
+export * as NgcProgressRing from './gator/progress-ring.gator';

package/dist/types/index.d.ts

@@ -29,6 +29,7 @@ export * from './components/page-header';
 export * from './components/pill';
 export * from './components/popover';
 export * from './components/progress-bar';
+export * from './components/progress-ring';
 export * from './components/radio';
 export * from './components/radio-group';
 export * from './components/scoped-notification';

package/dist/types/index.gator.d.ts

@@ -28,6 +28,7 @@ export { NgcPageHeader } from './components/page-header';
 export { NgcPanel } from './components/panel';
 export { NgcPopover } from './components/popover';
 export { NgcProgressBar } from './components/progress-bar';
+export { NgcProgressRing } from './components/progress-ring';
 export { NgcRadio } from './components/radio';
 export { NgcRadioGroup } from './components/radio-group';
 export { NgcSelectionBox } from './components/selection-box';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "7.0.0-preview.8",
+  "version": "7.0.0",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -78,7 +78,7 @@
     "@deltablot/dropzone": "^7.3.1",
     "@floating-ui/dom": "^1.7.2",
     "@lit/localize": "^0.12.2",
-    "ckeditor5": "^45.2.1",
+    "ckeditor5": "^45.2.2",
     "color": "^5.0.0",
     "libphonenumber-js": "^1.12.9",
     "lit": "^3.3.0"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ncino/web-components",
-  "version": "7.0.0-preview.7",
+  "version": "7.0.0-preview.9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6261,6 +6261,60 @@
             "events": []
           }
         },
+        {
+          "name": "ngc-progress-ring",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "value", "value": { "type": "number", "default": "0" } },
+            {
+              "name": "diameter",
+              "value": { "type": "number | undefined", "default": "undefined" }
+            },
+            {
+              "name": "size",
+              "value": { "type": "'' | 'large'", "default": "''" }
+            },
+            {
+              "name": "skeleton",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "variant",
+              "value": {
+                "type": "'' | 'ai' | 'success' | 'warning' | 'error'",
+                "default": "''"
+              }
+            },
+            {
+              "name": "data-testid",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "value", "type": "number" },
+              { "name": "diameter", "type": "number | undefined" },
+              { "name": "size", "type": "'' | 'large'" },
+              { "name": "skeleton", "type": "boolean" },
+              {
+                "name": "variant",
+                "type": "'' | 'ai' | 'success' | 'warning' | 'error'"
+              },
+              { "name": "computedDiameter", "type": "number" },
+              { "name": "clampedValue" },
+              { "name": "radius" },
+              { "name": "circumference" },
+              { "name": "dashOffset" },
+              { "name": "dataTestid", "type": "string | undefined" },
+              { "name": "labelDataTestid" },
+              { "name": "helpTextDataTestid" },
+              { "name": "errorMessageDataTestid" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "ngc-selection-box",
           "description": "\n---\n\n\n### **Events:**\n - **change**",