{
+ test("when attribute name is not correct", () => {
const marginLeftPrefix = '
{
- test('paste token items by attribute name', () => {
- const borderRadiusToken = myExtension.getAttributeTokens('borderRadius');
+ suite("getAttributeTokens", () => {
+ test("paste token items by attribute name", () => {
+ const borderRadiusToken = myExtension.getAttributeTokens("borderRadius");
assert.strictEqual(borderRadiusToken.length, 6);
- const zIndexToken = myExtension.getAttributeTokens('zIndex');
+ const zIndexToken = myExtension.getAttributeTokens("zIndex");
assert.strictEqual(zIndexToken.length, 10);
});
- test('when attribute name is not correct and empty', () => {
- const borderRadiusToken = myExtension.getAttributeTokens('borderRadi');
+ test("when attribute name is not correct and empty", () => {
+ const borderRadiusToken = myExtension.getAttributeTokens("borderRadi");
assert.strictEqual(borderRadiusToken.length, 0);
- const zIndexToken = myExtension.getAttributeTokens('');
+ const zIndexToken = myExtension.getAttributeTokens("");
assert.strictEqual(zIndexToken.length, 0);
});
});
- suite('getCompletionItem', () => {
- test('returns completion color item when type is color', () => {
+ suite("getCompletionItem", () => {
+ test("returns completion color item when type is color", () => {
const result = myExtension.getCompletionItem({
- type: 'color',
- category: 'background-color',
- value: '#1f304c',
- comment: 'Strong default background color.',
- name: 'color-background-strong',
+ type: "color",
+ category: "background-color",
+ value: "#1f304c",
+ comment: "Strong default background color.",
+ name: "color-background-strong",
});
const expected = {
- label: 'colorBackgroundStrong',
- documentation: '#1f304c',
+ label: "colorBackgroundStrong",
+ documentation: "#1f304c",
kind: vscode.CompletionItemKind.Color,
- detail: '#1f304c',
+ detail: "#1f304c",
};
assert.deepStrictEqual(result, expected);
});
- test('returns basic completion when type is not color', () => {
+ test("returns basic completion when type is not color", () => {
const result = myExtension.getCompletionItem({
- type: 'size',
- category: 'radius',
- value: '0',
- comment: 'Border radius reset',
- name: 'border-radius-0',
+ type: "size",
+ category: "radius",
+ value: "0",
+ comment: "Border radius reset",
+ name: "border-radius-0",
});
const expected = new vscode.CompletionItem(
{
- description: '0',
- label: 'borderRadius0',
+ description: "0",
+ label: "borderRadius0",
},
- vscode.CompletionItemKind.Constant
+ vscode.CompletionItemKind.Constant,
);
assert.deepStrictEqual(result, expected);
});
diff --git a/apps/vs-code-intellisense/src/test/suite/index.ts b/apps/vs-code-intellisense/src/test/suite/index.ts
index 6fce3bc95b..43f5dd0020 100644
--- a/apps/vs-code-intellisense/src/test/suite/index.ts
+++ b/apps/vs-code-intellisense/src/test/suite/index.ts
@@ -1,18 +1,18 @@
-import * as path from 'path';
-import Mocha from 'mocha';
-import glob from 'glob';
+import * as path from "path";
+import glob from "glob";
+import Mocha from "mocha";
export function run(): Promise
{
// Create the mocha test
const mocha = new Mocha({
- ui: 'tdd',
+ ui: "tdd",
color: true,
});
- const testsRoot = path.resolve(__dirname, '..');
+ const testsRoot = path.resolve(__dirname, "..");
return new Promise((c, e) => {
- glob('**/**.test.js', {cwd: testsRoot}, (err: any, files: string[]) => {
+ glob("**/**.test.js", { cwd: testsRoot }, (err: any, files: string[]) => {
if (err) {
return e(err);
}
diff --git a/apps/vs-code-intellisense/src/test/suite/utils/get-theme-tokens.test.ts b/apps/vs-code-intellisense/src/test/suite/utils/get-theme-tokens.test.ts
index 78607f0b06..23487a2592 100644
--- a/apps/vs-code-intellisense/src/test/suite/utils/get-theme-tokens.test.ts
+++ b/apps/vs-code-intellisense/src/test/suite/utils/get-theme-tokens.test.ts
@@ -1,6 +1,5 @@
-import assert from 'assert';
+import assert from "assert";
-import {getThemeTokens} from '../../../utils';
import {
darkThemeTokens,
defaultThemeTokens,
@@ -8,11 +7,12 @@ import {
sendGridThemeTokens,
twilioDarkThemeTokens,
twilioThemeTokens,
-} from '../../../tokens';
-import {Theme} from '../../../types';
+} from "../../../tokens";
+import { Theme } from "../../../types";
+import { getThemeTokens } from "../../../utils";
-suite('getThemeTokens', () => {
- ['Default', 'default', undefined, null, 'foo'].forEach((theme) => {
+suite("getThemeTokens", () => {
+ ["Default", "default", undefined, null, "foo"].forEach((theme) => {
test(`when theme is '${theme}', returns defaultThemeTokens`, () => {
const result = getThemeTokens(theme as Theme | undefined);
@@ -21,31 +21,31 @@ suite('getThemeTokens', () => {
});
test(`when theme is 'Dark', returns darkThemeTokens`, () => {
- const result = getThemeTokens('Dark');
+ const result = getThemeTokens("Dark");
assert.strictEqual(result, darkThemeTokens);
});
test(`when theme is 'Evergreen', returns evergreenThemeTokens`, () => {
- const result = getThemeTokens('Evergreen');
+ const result = getThemeTokens("Evergreen");
assert.strictEqual(result, evergreenThemeTokens);
});
test(`when theme is 'SendGrid', returns sendGridThemeTokens`, () => {
- const result = getThemeTokens('SendGrid');
+ const result = getThemeTokens("SendGrid");
assert.strictEqual(result, sendGridThemeTokens);
});
test(`when theme is 'Twilio', returns twilioThemeTokens`, () => {
- const result = getThemeTokens('Twilio');
+ const result = getThemeTokens("Twilio");
assert.strictEqual(result, twilioThemeTokens);
});
test(`when theme is 'Twilio Dark', returns twilioDarkThemeTokens`, () => {
- const result = getThemeTokens('Twilio Dark');
+ const result = getThemeTokens("Twilio Dark");
assert.strictEqual(result, twilioDarkThemeTokens);
});
diff --git a/apps/vs-code-intellisense/src/test/suite/utils/is-color-category.test.ts b/apps/vs-code-intellisense/src/test/suite/utils/is-color-category.test.ts
index 74bd805264..8946d025a0 100644
--- a/apps/vs-code-intellisense/src/test/suite/utils/is-color-category.test.ts
+++ b/apps/vs-code-intellisense/src/test/suite/utils/is-color-category.test.ts
@@ -1,25 +1,25 @@
-import assert from 'assert';
+import assert from "assert";
-import {isColorCategory} from '../../../utils/is-color-category';
-import {TokenCategory} from '../../../types';
+import { TokenCategory } from "../../../types";
+import { isColorCategory } from "../../../utils/is-color-category";
-const COLOR_CATEGORIES: TokenCategory[] = ['border-color', 'background-color', 'color', 'text-color'];
+const COLOR_CATEGORIES: TokenCategory[] = ["border-color", "background-color", "color", "text-color"];
const NON_COLOR_CATEGORIES: TokenCategory[] = [
- 'radius',
- 'border-width',
- 'box-shadow',
- 'data-visualization',
- 'font',
- 'font-size',
- 'font-weight',
- 'line-height',
- 'sizing',
- 'spacing',
- 'z-index',
+ "radius",
+ "border-width",
+ "box-shadow",
+ "data-visualization",
+ "font",
+ "font-size",
+ "font-weight",
+ "line-height",
+ "sizing",
+ "spacing",
+ "z-index",
];
-suite('isColorCategory', () => {
+suite("isColorCategory", () => {
COLOR_CATEGORIES.forEach((category) => {
test(`should return true for ${category}`, () => {
assert.strictEqual(true, isColorCategory(category));
diff --git a/apps/vs-code-intellisense/src/test/suite/utils/rem-to-px.test.ts b/apps/vs-code-intellisense/src/test/suite/utils/rem-to-px.test.ts
index f84b7bb568..60d8dc24fa 100644
--- a/apps/vs-code-intellisense/src/test/suite/utils/rem-to-px.test.ts
+++ b/apps/vs-code-intellisense/src/test/suite/utils/rem-to-px.test.ts
@@ -1,37 +1,37 @@
-import assert from 'assert';
+import assert from "assert";
-import {remToPx} from '../../../utils/rem-to-px';
+import { remToPx } from "../../../utils/rem-to-px";
-suite('remToPx', () => {
+suite("remToPx", () => {
test("when 'rem' is not found in value, returns unmodified string", () => {
- const value = '0';
+ const value = "0";
const result = remToPx(value);
assert.strictEqual(result, value);
});
- test('converts 0.5rem to 8px', () => {
- const value = '0.5rem';
+ test("converts 0.5rem to 8px", () => {
+ const value = "0.5rem";
const result = remToPx(value);
- assert.strictEqual(result, '0.5rem (8px)');
+ assert.strictEqual(result, "0.5rem (8px)");
});
- test('converts 1rem to 16px', () => {
- const value = '1rem';
+ test("converts 1rem to 16px", () => {
+ const value = "1rem";
const result = remToPx(value);
- assert.strictEqual(result, '1rem (16px)');
+ assert.strictEqual(result, "1rem (16px)");
});
- test('gracefully handles extra whitespace on either side of rem value', () => {
- const value = ' 1 rem';
+ test("gracefully handles extra whitespace on either side of rem value", () => {
+ const value = " 1 rem";
const result = remToPx(value);
- assert.strictEqual(result, '1rem (16px)');
+ assert.strictEqual(result, "1rem (16px)");
});
});
diff --git a/apps/vs-code-intellisense/src/tokens/dark-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/dark-theme-tokens.ts
index 2e15c7392c..efa9d0263f 100644
--- a/apps/vs-code-intellisense/src/tokens/dark-theme-tokens.ts
+++ b/apps/vs-code-intellisense/src/tokens/dark-theme-tokens.ts
@@ -1 +1 @@
-export {props as darkThemeTokens} from '@twilio-paste/design-tokens/dist/themes/dark/tokens.raw.json';
+export { props as darkThemeTokens } from "@twilio-paste/design-tokens/dist/themes/dark/tokens.raw.json";
diff --git a/apps/vs-code-intellisense/src/tokens/default-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/default-theme-tokens.ts
index 3353e12539..5c9e10899f 100644
--- a/apps/vs-code-intellisense/src/tokens/default-theme-tokens.ts
+++ b/apps/vs-code-intellisense/src/tokens/default-theme-tokens.ts
@@ -1 +1 @@
-export {props as defaultThemeTokens} from '@twilio-paste/design-tokens/dist/tokens.raw.json';
+export { props as defaultThemeTokens } from "@twilio-paste/design-tokens/dist/tokens.raw.json";
diff --git a/apps/vs-code-intellisense/src/tokens/evergreen-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/evergreen-theme-tokens.ts
index cc3d944b13..34a66f8e45 100644
--- a/apps/vs-code-intellisense/src/tokens/evergreen-theme-tokens.ts
+++ b/apps/vs-code-intellisense/src/tokens/evergreen-theme-tokens.ts
@@ -1 +1 @@
-export {props as evergreenThemeTokens} from '@twilio-paste/design-tokens/dist/themes/evergreen/tokens.raw.json';
+export { props as evergreenThemeTokens } from "@twilio-paste/design-tokens/dist/themes/evergreen/tokens.raw.json";
diff --git a/apps/vs-code-intellisense/src/tokens/index.ts b/apps/vs-code-intellisense/src/tokens/index.ts
index a3701027e0..bbedf4533d 100644
--- a/apps/vs-code-intellisense/src/tokens/index.ts
+++ b/apps/vs-code-intellisense/src/tokens/index.ts
@@ -1,7 +1,7 @@
-export * from './dark-theme-tokens';
-export * from './default-theme-tokens';
-export * from './evergreen-theme-tokens';
-export * from './paste-token-attributes';
-export * from './sendgrid-theme-tokens';
-export * from './twilio-theme-tokens';
-export * from './twilio-dark-theme-tokens';
+export * from "./dark-theme-tokens";
+export * from "./default-theme-tokens";
+export * from "./evergreen-theme-tokens";
+export * from "./paste-token-attributes";
+export * from "./sendgrid-theme-tokens";
+export * from "./twilio-theme-tokens";
+export * from "./twilio-dark-theme-tokens";
diff --git a/apps/vs-code-intellisense/src/tokens/paste-token-attributes.ts b/apps/vs-code-intellisense/src/tokens/paste-token-attributes.ts
index 7bcaf3ec59..e9dacf417b 100644
--- a/apps/vs-code-intellisense/src/tokens/paste-token-attributes.ts
+++ b/apps/vs-code-intellisense/src/tokens/paste-token-attributes.ts
@@ -1,43 +1,43 @@
-import {TokenCategory} from '../types';
+import { TokenCategory } from "../types";
export const pasteTokenAttributes: Record = {
- margin: 'spacing',
- marginTop: 'spacing',
- marginRight: 'spacing',
- marginBottom: 'spacing',
- marginLeft: 'spacing',
- marginX: 'spacing',
- marginY: 'spacing',
- padding: 'spacing',
- paddingTop: 'spacing',
- paddingRight: 'spacing',
- paddingBottom: 'spacing',
- paddingLeft: 'spacing',
- paddingX: 'spacing',
- paddingY: 'spacing',
- borderRadius: 'radius',
- borderTopLeftRadius: 'radius',
- borderTopRightRadius: 'radius',
- borderBottomRightRadius: 'radius',
- borderBottomLeftRadius: 'radius',
- borderWidth: 'border-width',
- borderTopWidth: 'border-width',
- borderRightWidth: 'border-width',
- borderBottomWidth: 'border-width',
- borderLeftWidth: 'border-width',
- borderColor: 'border-color',
- borderTopColor: 'border-color',
- borderRightColor: 'border-color',
- borderBottomColor: 'border-color',
- borderLeftColor: 'border-color',
- zIndex: 'z-index',
- backgroundColor: 'background-color',
- columnGap: 'spacing',
- rowGap: 'spacing',
- boxShadow: 'box-shadow',
- fontSize: 'font-size',
- fontWeight: 'font-weight',
- lineHeight: 'line-height',
- color: 'text-color',
- size: 'sizing',
+ margin: "spacing",
+ marginTop: "spacing",
+ marginRight: "spacing",
+ marginBottom: "spacing",
+ marginLeft: "spacing",
+ marginX: "spacing",
+ marginY: "spacing",
+ padding: "spacing",
+ paddingTop: "spacing",
+ paddingRight: "spacing",
+ paddingBottom: "spacing",
+ paddingLeft: "spacing",
+ paddingX: "spacing",
+ paddingY: "spacing",
+ borderRadius: "radius",
+ borderTopLeftRadius: "radius",
+ borderTopRightRadius: "radius",
+ borderBottomRightRadius: "radius",
+ borderBottomLeftRadius: "radius",
+ borderWidth: "border-width",
+ borderTopWidth: "border-width",
+ borderRightWidth: "border-width",
+ borderBottomWidth: "border-width",
+ borderLeftWidth: "border-width",
+ borderColor: "border-color",
+ borderTopColor: "border-color",
+ borderRightColor: "border-color",
+ borderBottomColor: "border-color",
+ borderLeftColor: "border-color",
+ zIndex: "z-index",
+ backgroundColor: "background-color",
+ columnGap: "spacing",
+ rowGap: "spacing",
+ boxShadow: "box-shadow",
+ fontSize: "font-size",
+ fontWeight: "font-weight",
+ lineHeight: "line-height",
+ color: "text-color",
+ size: "sizing",
};
diff --git a/apps/vs-code-intellisense/src/tokens/sendgrid-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/sendgrid-theme-tokens.ts
index c2bcee8f9c..135ed5e56a 100644
--- a/apps/vs-code-intellisense/src/tokens/sendgrid-theme-tokens.ts
+++ b/apps/vs-code-intellisense/src/tokens/sendgrid-theme-tokens.ts
@@ -1 +1 @@
-export {props as sendGridThemeTokens} from '@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.raw.json';
+export { props as sendGridThemeTokens } from "@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.raw.json";
diff --git a/apps/vs-code-intellisense/src/tokens/twilio-dark-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/twilio-dark-theme-tokens.ts
index 9a1d90ca39..62243985d0 100644
--- a/apps/vs-code-intellisense/src/tokens/twilio-dark-theme-tokens.ts
+++ b/apps/vs-code-intellisense/src/tokens/twilio-dark-theme-tokens.ts
@@ -1 +1 @@
-export {props as twilioDarkThemeTokens} from '@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.raw.json';
+export { props as twilioDarkThemeTokens } from "@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.raw.json";
diff --git a/apps/vs-code-intellisense/src/tokens/twilio-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/twilio-theme-tokens.ts
index bf49d2231a..5d9d0dc89f 100644
--- a/apps/vs-code-intellisense/src/tokens/twilio-theme-tokens.ts
+++ b/apps/vs-code-intellisense/src/tokens/twilio-theme-tokens.ts
@@ -1 +1 @@
-export {props as twilioThemeTokens} from '@twilio-paste/design-tokens/dist/themes/twilio/tokens.raw.json';
+export { props as twilioThemeTokens } from "@twilio-paste/design-tokens/dist/themes/twilio/tokens.raw.json";
diff --git a/apps/vs-code-intellisense/src/types/index.ts b/apps/vs-code-intellisense/src/types/index.ts
index 9f96fae9cf..91815f311d 100644
--- a/apps/vs-code-intellisense/src/types/index.ts
+++ b/apps/vs-code-intellisense/src/types/index.ts
@@ -1,5 +1,5 @@
-export * from './paste-token';
-export * from './themes';
-export * from './token-category';
-export * from './token-map';
-export * from './token-type';
+export * from "./paste-token";
+export * from "./themes";
+export * from "./token-category";
+export * from "./token-map";
+export * from "./token-type";
diff --git a/apps/vs-code-intellisense/src/types/paste-token.ts b/apps/vs-code-intellisense/src/types/paste-token.ts
index f22cdb745a..21d920ce16 100644
--- a/apps/vs-code-intellisense/src/types/paste-token.ts
+++ b/apps/vs-code-intellisense/src/types/paste-token.ts
@@ -1,5 +1,5 @@
-import {TokenCategory} from './token-category';
-import {TokenType} from './token-type';
+import { TokenCategory } from "./token-category";
+import { TokenType } from "./token-type";
export interface PasteToken {
name: string;
diff --git a/apps/vs-code-intellisense/src/types/themes.ts b/apps/vs-code-intellisense/src/types/themes.ts
index 59874c58ae..548c00022a 100644
--- a/apps/vs-code-intellisense/src/types/themes.ts
+++ b/apps/vs-code-intellisense/src/types/themes.ts
@@ -1 +1 @@
-export type Theme = 'Default' | 'Dark' | 'SendGrid' | 'Twilio' | 'Twilio Dark' | 'Evergreen';
+export type Theme = "Default" | "Dark" | "SendGrid" | "Twilio" | "Twilio Dark" | "Evergreen";
diff --git a/apps/vs-code-intellisense/src/types/token-category.ts b/apps/vs-code-intellisense/src/types/token-category.ts
index 17c9c3a44f..158dd93576 100644
--- a/apps/vs-code-intellisense/src/types/token-category.ts
+++ b/apps/vs-code-intellisense/src/types/token-category.ts
@@ -1,16 +1,16 @@
export type TokenCategory =
- | 'background-color'
- | 'border-color'
- | 'radius'
- | 'border-width'
- | 'box-shadow'
- | 'data-visualization'
- | 'font'
- | 'font-size'
- | 'font-weight'
- | 'line-height'
- | 'color'
- | 'sizing'
- | 'spacing'
- | 'text-color'
- | 'z-index';
+ | "background-color"
+ | "border-color"
+ | "radius"
+ | "border-width"
+ | "box-shadow"
+ | "data-visualization"
+ | "font"
+ | "font-size"
+ | "font-weight"
+ | "line-height"
+ | "color"
+ | "sizing"
+ | "spacing"
+ | "text-color"
+ | "z-index";
diff --git a/apps/vs-code-intellisense/src/types/token-map.ts b/apps/vs-code-intellisense/src/types/token-map.ts
index c174604502..e70030246e 100644
--- a/apps/vs-code-intellisense/src/types/token-map.ts
+++ b/apps/vs-code-intellisense/src/types/token-map.ts
@@ -1,3 +1,3 @@
-import {PasteToken} from './paste-token';
+import { PasteToken } from "./paste-token";
export type TokenMap = Record;
diff --git a/apps/vs-code-intellisense/src/types/token-type.ts b/apps/vs-code-intellisense/src/types/token-type.ts
index deda187cd2..a0fc542b9e 100644
--- a/apps/vs-code-intellisense/src/types/token-type.ts
+++ b/apps/vs-code-intellisense/src/types/token-type.ts
@@ -1 +1 @@
-export type TokenType = 'color' | 'size' | 'shadow' | 'font' | 'font-size' | 'font-weight' | 'number' | 'z-index';
+export type TokenType = "color" | "size" | "shadow" | "font" | "font-size" | "font-weight" | "number" | "z-index";
diff --git a/apps/vs-code-intellisense/src/utils/get-color-preview.ts b/apps/vs-code-intellisense/src/utils/get-color-preview.ts
index 3cf17e1741..f0235c7b19 100644
--- a/apps/vs-code-intellisense/src/utils/get-color-preview.ts
+++ b/apps/vs-code-intellisense/src/utils/get-color-preview.ts
@@ -1,8 +1,8 @@
-import * as base64 from 'base-64';
-import * as utf8 from 'utf8';
+import * as base64 from "base-64";
+import * as utf8 from "utf8";
const HEIGHT = 50;
-const WIDTH = '100%';
+const WIDTH = "100%";
/**
* Generates markdown to render an svg of the provided color
diff --git a/apps/vs-code-intellisense/src/utils/get-theme-setting.ts b/apps/vs-code-intellisense/src/utils/get-theme-setting.ts
index ef919ed11f..afa2326562 100644
--- a/apps/vs-code-intellisense/src/utils/get-theme-setting.ts
+++ b/apps/vs-code-intellisense/src/utils/get-theme-setting.ts
@@ -1,6 +1,6 @@
-import * as vscode from 'vscode';
+import * as vscode from "vscode";
-import {Theme} from '../types';
+import { Theme } from "../types";
export const getThemeSetting = (): Theme =>
- (vscode.workspace.getConfiguration('vs-code-intellisense').get('theme') as Theme) ?? 'Default';
+ (vscode.workspace.getConfiguration("vs-code-intellisense").get("theme") as Theme) ?? "Default";
diff --git a/apps/vs-code-intellisense/src/utils/get-theme-tokens.ts b/apps/vs-code-intellisense/src/utils/get-theme-tokens.ts
index ac24dd4a9f..e3a124280e 100644
--- a/apps/vs-code-intellisense/src/utils/get-theme-tokens.ts
+++ b/apps/vs-code-intellisense/src/utils/get-theme-tokens.ts
@@ -5,22 +5,22 @@ import {
sendGridThemeTokens,
twilioDarkThemeTokens,
twilioThemeTokens,
-} from '../tokens';
-import {Theme, TokenMap} from '../types';
+} from "../tokens";
+import { Theme, TokenMap } from "../types";
export const getThemeTokens = (theme?: Theme): TokenMap => {
switch (theme) {
- case 'Dark':
+ case "Dark":
return darkThemeTokens as TokenMap;
- case 'Evergreen':
+ case "Evergreen":
return evergreenThemeTokens as TokenMap;
- case 'SendGrid':
+ case "SendGrid":
return sendGridThemeTokens as TokenMap;
- case 'Twilio':
+ case "Twilio":
return twilioThemeTokens as TokenMap;
- case 'Twilio Dark':
+ case "Twilio Dark":
return twilioDarkThemeTokens as TokenMap;
- case 'Default':
+ case "Default":
default:
return defaultThemeTokens as TokenMap;
}
diff --git a/apps/vs-code-intellisense/src/utils/index.ts b/apps/vs-code-intellisense/src/utils/index.ts
index a2d9ca2fa6..4192ae89ff 100644
--- a/apps/vs-code-intellisense/src/utils/index.ts
+++ b/apps/vs-code-intellisense/src/utils/index.ts
@@ -1,5 +1,5 @@
-export * from './get-color-preview';
-export * from './get-theme-setting';
-export * from './get-theme-tokens';
-export * from './is-color-category';
-export * from './rem-to-px';
+export * from "./get-color-preview";
+export * from "./get-theme-setting";
+export * from "./get-theme-tokens";
+export * from "./is-color-category";
+export * from "./rem-to-px";
diff --git a/apps/vs-code-intellisense/src/utils/is-color-category.ts b/apps/vs-code-intellisense/src/utils/is-color-category.ts
index 317749d8cb..f560dfc0e9 100644
--- a/apps/vs-code-intellisense/src/utils/is-color-category.ts
+++ b/apps/vs-code-intellisense/src/utils/is-color-category.ts
@@ -1,4 +1,4 @@
-import {TokenCategory} from '../types';
+import { TokenCategory } from "../types";
export const isColorCategory = (category: TokenCategory): boolean =>
- category === 'background-color' || category === 'border-color' || category === 'color' || category === 'text-color';
+ category === "background-color" || category === "border-color" || category === "color" || category === "text-color";
diff --git a/apps/vs-code-intellisense/src/utils/rem-to-px.ts b/apps/vs-code-intellisense/src/utils/rem-to-px.ts
index 26cf603364..829b328cb3 100644
--- a/apps/vs-code-intellisense/src/utils/rem-to-px.ts
+++ b/apps/vs-code-intellisense/src/utils/rem-to-px.ts
@@ -3,11 +3,11 @@
* If the value is not a rem unit, it returns the original value.
*/
export const remToPx = (value: string): string => {
- if (!value.includes('rem')) {
+ if (!value.includes("rem")) {
return value;
}
- const remValue = Number(value.replace('rem', '').trim());
+ const remValue = Number(value.replace("rem", "").trim());
if (isNaN(remValue)) {
return value;
}
diff --git a/babel.config.js b/babel.config.js
index db42e523a8..54ba9fb1a8 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,7 +1,7 @@
const getPresets = (isDev) => [
- '@babel/preset-env',
- '@babel/preset-react',
- '@babel/preset-typescript',
+ "@babel/preset-env",
+ "@babel/preset-react",
+ "@babel/preset-typescript",
[
/** [@emotion/babel-preset-css-prop]
* This preset is used to automatically enable Emotion’s css prop when using the classic JSX runtime.
@@ -14,22 +14,22 @@ const getPresets = (isDev) => [
* 1. remove this preset
* 2. add the `@emotion/babel` plugin to our plugin section.
*/
- '@emotion/babel-preset-css-prop',
+ "@emotion/babel-preset-css-prop",
{
sourceMap: isDev,
- autoLabel: 'dev-only',
- labelFormat: '[local]',
+ autoLabel: "dev-only",
+ labelFormat: "[local]",
cssPropOptimization: !isDev,
},
],
];
const BASE_PLUGINS = [
- 'macros',
- ['@babel/proposal-class-properties', {loose: true}],
- '@babel/proposal-object-rest-spread',
- ['@babel/proposal-private-property-in-object', {loose: true}],
- '@babel/plugin-proposal-optional-chaining',
+ "macros",
+ ["@babel/proposal-class-properties", { loose: true }],
+ "@babel/proposal-object-rest-spread",
+ ["@babel/proposal-private-property-in-object", { loose: true }],
+ "@babel/plugin-proposal-optional-chaining",
];
module.exports = {
diff --git a/biome.json b/biome.json
new file mode 100644
index 0000000000..05d86c9b6c
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,70 @@
+{
+ "$schema": "https://biomejs.dev/schemas/1.2.2/schema.json",
+ "files": {
+ "maxSize": 5242880,
+ "ignore": [
+ "node_modules",
+ "bower_components",
+ "dist",
+ "bin",
+ "__testfixtures__",
+ "__fixtures__",
+ "packages/paste-icons/cjs",
+ "packages/paste-icons/esm",
+ "packages/paste-icons/json",
+ "packages/paste-theme-designer/public",
+ "packages/paste-theme-designer/out",
+ "packages/paste-token-contrast-checker/public",
+ "packages/paste-website/data",
+ ".cache",
+ ".next",
+ ".netlify",
+ ".yarn",
+ "packages/**/dist/*",
+ "tsconfig.build.tsbuildinfo",
+ "**/*.d.ts",
+ ".codesandbox/ci.json",
+ "build.icon-list.js",
+ "**/*.hbs"
+ ]
+ },
+ "organizeImports": {
+ "enabled": true
+ },
+ "linter": {
+ "enabled": true,
+ "rules": {
+ "recommended": true,
+ "a11y": {
+ "noSvgWithoutTitle": "off"
+ },
+ "suspicious": {
+ "noExplicitAny": "off"
+ },
+ "complexity": {
+ "noUselessSwitchCase": "off",
+ "noMultipleSpacesInRegularExpressionLiterals": "off"
+ }
+ }
+ },
+ "formatter": {
+ "enabled": true,
+ "indentStyle": "space",
+ "indentSize": 2,
+ "lineWidth": 120
+ },
+ "javascript": {
+ "formatter": {
+ "indentStyle": "space",
+ "indentSize": 2,
+ "lineWidth": 120
+ }
+ },
+ "json": {
+ "formatter": {
+ "indentStyle": "space",
+ "indentSize": 2,
+ "lineWidth": 120
+ }
+ }
+}
diff --git a/commitlint.config.js b/commitlint.config.js
index 84dcb122af..69b4242cc7 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,3 +1,3 @@
module.exports = {
- extends: ['@commitlint/config-conventional'],
+ extends: ["@commitlint/config-conventional"],
};
diff --git a/cypress.config.ts b/cypress.config.ts
index 97f56103c7..b50cec7423 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,31 +1,31 @@
-import {defineConfig} from 'cypress';
+import { defineConfig } from "cypress";
// eslint-disable-next-line import/no-default-export
export default defineConfig({
e2e: {
- baseUrl: 'http://localhost:3000',
+ baseUrl: "http://localhost:3000",
env: {
USE_CYPRESS_VRT: process.env.USE_CYPRESS_VRT,
CYPRESS_BASE_URL: process.env.CYPRESS_BASE_URL,
},
viewportWidth: 1440,
viewportHeight: 1440,
- projectId: 'pe4h41',
+ projectId: "pe4h41",
retries: {
runMode: 2,
openMode: 2,
},
video: false,
blockHosts: [
- '*.google-analytics.com',
- '*.codesandbox.io',
- 'codesandbox.io',
- '*.loom.com',
- '*.youtube.com',
- '*.github.com',
- '*.googletagmanager.com',
+ "*.google-analytics.com",
+ "*.codesandbox.io",
+ "codesandbox.io",
+ "*.loom.com",
+ "*.youtube.com",
+ "*.github.com",
+ "*.googletagmanager.com",
],
- specPattern: ['cypress/**/*.spec.ts'],
+ specPattern: ["cypress/**/*.spec.ts"],
defaultCommandTimeout: 6000,
},
});
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
index da18d9352a..02e4254378 100644
--- a/cypress/fixtures/example.json
+++ b/cypress/fixtures/example.json
@@ -2,4 +2,4 @@
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
-}
\ No newline at end of file
+}
diff --git a/cypress/integration/e2e/components/alert-dialog.spec.ts b/cypress/integration/e2e/components/alert-dialog.spec.ts
index a2d59ff455..45f6344e55 100644
--- a/cypress/integration/e2e/components/alert-dialog.spec.ts
+++ b/cypress/integration/e2e/components/alert-dialog.spec.ts
@@ -1,11 +1,11 @@
-describe('Alert-dialog component documentation page', function () {
+describe("Alert-dialog component documentation page", function () {
beforeEach(() => {
- cy.visit('/components/alert-dialog');
+ cy.visit("/components/alert-dialog");
});
- it('should render the alert-dialog component page correctly', () => {
+ it("should render the alert-dialog component page correctly", () => {
cy.pageHeaderShouldBeVisible({
- headerText: 'Alert Dialog',
+ headerText: "Alert Dialog",
shouldHaveGithubLink: true,
shouldHaveStorybook: true,
shouldHaveOpenGraph: true,
diff --git a/cypress/integration/e2e/components/overview-page.spec.ts b/cypress/integration/e2e/components/overview-page.spec.ts
index 80a3a8c521..16b04b2220 100644
--- a/cypress/integration/e2e/components/overview-page.spec.ts
+++ b/cypress/integration/e2e/components/overview-page.spec.ts
@@ -1,11 +1,11 @@
-describe('Overview page', () => {
+describe("Overview page", () => {
beforeEach(() => {
- cy.visit('/components');
+ cy.visit("/components");
});
- it('should render the components overview page correctly', () => {
+ it("should render the components overview page correctly", () => {
cy.pageHeaderShouldBeVisible({
- headerText: 'Components',
+ headerText: "Components",
});
cy.overviewTableRendersCorrectly();
diff --git a/cypress/integration/e2e/patterns/button-vs-anchor.spec.ts b/cypress/integration/e2e/patterns/button-vs-anchor.spec.ts
index e357314a3e..479348a0fa 100644
--- a/cypress/integration/e2e/patterns/button-vs-anchor.spec.ts
+++ b/cypress/integration/e2e/patterns/button-vs-anchor.spec.ts
@@ -1,11 +1,11 @@
-describe('Button-vs-anchor patterns documentation page', () => {
+describe("Button-vs-anchor patterns documentation page", () => {
beforeEach(() => {
- cy.visit('/patterns/button-vs-anchor');
+ cy.visit("/patterns/button-vs-anchor");
});
- it('should render the button-vs-anchor patterns page correctly', () => {
+ it("should render the button-vs-anchor patterns page correctly", () => {
cy.pageHeaderShouldBeVisible({
- headerText: 'Button vs. Anchor',
+ headerText: "Button vs. Anchor",
});
cy.checkInPageNavigationLinks();
diff --git a/cypress/integration/e2e/patterns/overview-page.spec.ts b/cypress/integration/e2e/patterns/overview-page.spec.ts
index a6d306ec26..cf6c50e417 100644
--- a/cypress/integration/e2e/patterns/overview-page.spec.ts
+++ b/cypress/integration/e2e/patterns/overview-page.spec.ts
@@ -1,11 +1,11 @@
-describe('Overview page', () => {
+describe("Overview page", () => {
beforeEach(() => {
- cy.visit('/patterns');
+ cy.visit("/patterns");
});
- it('should render the patterns overview page correctly', () => {
+ it("should render the patterns overview page correctly", () => {
cy.pageHeaderShouldBeVisible({
- headerText: 'Patterns',
+ headerText: "Patterns",
});
cy.overviewTableRendersCorrectly();
diff --git a/cypress/integration/e2e/primitives/box.spec.ts b/cypress/integration/e2e/primitives/box.spec.ts
index c98d0518b3..817199c356 100644
--- a/cypress/integration/e2e/primitives/box.spec.ts
+++ b/cypress/integration/e2e/primitives/box.spec.ts
@@ -1,11 +1,11 @@
-describe('Box primitives documentation page', () => {
+describe("Box primitives documentation page", () => {
beforeEach(() => {
- cy.visit('/primitives/box');
+ cy.visit("/primitives/box");
});
- it('should render the box primitives page correctly', () => {
+ it("should render the box primitives page correctly", () => {
cy.pageHeaderShouldBeVisible({
- headerText: 'Box',
+ headerText: "Box",
shouldHaveGithubLink: true,
shouldHaveStorybook: true,
shouldHaveOpenGraph: true,
diff --git a/cypress/integration/e2e/primitives/overview-page.spec.ts b/cypress/integration/e2e/primitives/overview-page.spec.ts
index 33ec59e7b7..49683211f4 100644
--- a/cypress/integration/e2e/primitives/overview-page.spec.ts
+++ b/cypress/integration/e2e/primitives/overview-page.spec.ts
@@ -1,11 +1,11 @@
-describe('Overview page', () => {
+describe("Overview page", () => {
beforeEach(() => {
- cy.visit('/primitives');
+ cy.visit("/primitives");
});
- it('should render the primitives overview page correctly', () => {
+ it("should render the primitives overview page correctly", () => {
cy.pageHeaderShouldBeVisible({
- headerText: 'Primitives',
+ headerText: "Primitives",
});
cy.overviewTableRendersCorrectly();
diff --git a/cypress/integration/e2e/roadmap-page.spec.ts b/cypress/integration/e2e/roadmap-page.spec.ts
index 8f5e6b6183..5d0620203f 100644
--- a/cypress/integration/e2e/roadmap-page.spec.ts
+++ b/cypress/integration/e2e/roadmap-page.spec.ts
@@ -1,34 +1,34 @@
-describe('Roadmap Page', () => {
+describe("Roadmap Page", () => {
beforeEach(() => {
- cy.visit('/roadmap');
+ cy.visit("/roadmap");
});
- it('should render the future and current release table(s)', () => {
- cy.get('[data-cy^="release-container"]').its('length').should('be.greaterThan', 0);
+ it("should render the future and current release table(s)", () => {
+ cy.get('[data-cy^="release-container"]').its("length").should("be.greaterThan", 0);
});
- it('should load the roadmap correctly', () => {
- cy.get('[data-cy^="release-container"]').as('release-containers');
+ it("should load the roadmap correctly", () => {
+ cy.get('[data-cy^="release-container"]').as("release-containers");
- cy.get('@release-containers').each((container) => {
- cy.wrap(container).find('h2').should('exist');
- cy.wrap(container).find('table').should('exist');
+ cy.get("@release-containers").each((container) => {
+ cy.wrap(container).find("h2").should("exist");
+ cy.wrap(container).find("table").should("exist");
cy.wrap(container)
- .find('table')
- .find('thead')
- .find('tr')
- .find('th')
- .as('table-headers')
- .its('length')
- .should('eql', 3);
- const expectedHeaders = ['Feature', 'Description', 'Status'];
- cy.get('@table-headers').each((headerEl, idx) => {
+ .find("table")
+ .find("thead")
+ .find("tr")
+ .find("th")
+ .as("table-headers")
+ .its("length")
+ .should("eql", 3);
+ const expectedHeaders = ["Feature", "Description", "Status"];
+ cy.get("@table-headers").each((headerEl, idx) => {
expect(headerEl.text()).to.eql(expectedHeaders[idx]);
});
});
});
- it('should render in page navigation correctly', () => {
+ it("should render in page navigation correctly", () => {
cy.checkInPageNavigationLinks();
});
});
diff --git a/cypress/integration/filter-group-examples/index.spec.ts b/cypress/integration/filter-group-examples/index.spec.ts
index c484634dc0..263215d1e0 100644
--- a/cypress/integration/filter-group-examples/index.spec.ts
+++ b/cypress/integration/filter-group-examples/index.spec.ts
@@ -1,160 +1,160 @@
-describe('Filter group pattern examples', () => {
+describe("Filter group pattern examples", () => {
beforeEach(() => {
- cy.visit('/patterns/filter-group');
- cy.get('[data-cy="filter-group-default-example"]').first().as('filterGroupWrapper');
- cy.get('@filterGroupWrapper').find('select[name="type"]').as('roomTypeSelect');
- cy.get('@filterGroupWrapper').find('select[name="range"]').as('dateRangeSelect');
- cy.get('@filterGroupWrapper').find('input[name="search"]').as('searchInput');
+ cy.visit("/patterns/filter-group");
+ cy.get('[data-cy="filter-group-default-example"]').first().as("filterGroupWrapper");
+ cy.get("@filterGroupWrapper").find('select[name="type"]').as("roomTypeSelect");
+ cy.get("@filterGroupWrapper").find('select[name="range"]').as("dateRangeSelect");
+ cy.get("@filterGroupWrapper").find('input[name="search"]').as("searchInput");
});
- it('filters the table with the search bar', () => {
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);
- cy.get('@searchInput').type('test').should('have.value', 'test');
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-search-button"]').click();
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 3);
+ it("filters the table with the search bar", () => {
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
+ cy.get("@searchInput").type("test").should("have.value", "test");
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-search-button"]').click();
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 3);
});
- it('filters the table with the selects', () => {
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);
- cy.get('@roomTypeSelect').select('Group').should('have.value', 'Group');
- cy.get('@dateRangeSelect').select('day').should('have.value', 'day');
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-apply-button"]').click();
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 2);
+ it("filters the table with the selects", () => {
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
+ cy.get("@roomTypeSelect").select("Group").should("have.value", "Group");
+ cy.get("@dateRangeSelect").select("day").should("have.value", "day");
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-apply-button"]').click();
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 2);
});
- describe('Empty state', () => {
- it('shows the empty state when search returns no results', () => {
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);
- cy.get('@searchInput').type('asdfasdf');
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-search-button"]').click();
- cy.get('@filterGroupWrapper').find('table').should('have.length', 0);
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-empty-state-clear-button"]').should('be.visible');
+ describe("Empty state", () => {
+ it("shows the empty state when search returns no results", () => {
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
+ cy.get("@searchInput").type("asdfasdf");
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-search-button"]').click();
+ cy.get("@filterGroupWrapper").find("table").should("have.length", 0);
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').should("be.visible");
});
- it('shows the empty state when selects returns no results', () => {
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);
- cy.get('@roomTypeSelect').select('Peer to Peer');
- cy.get('@dateRangeSelect').select('day');
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-apply-button"]').click();
- cy.get('@filterGroupWrapper').find('table').should('have.length', 0);
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-empty-state-clear-button"]').should('be.visible');
+ it("shows the empty state when selects returns no results", () => {
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
+ cy.get("@roomTypeSelect").select("Peer to Peer");
+ cy.get("@dateRangeSelect").select("day");
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-apply-button"]').click();
+ cy.get("@filterGroupWrapper").find("table").should("have.length", 0);
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').should("be.visible");
});
});
- describe('Clear buttons', () => {
+ describe("Clear buttons", () => {
beforeEach(() => {
- cy.get('@roomTypeSelect').select('Group');
- cy.get('@dateRangeSelect').select('day');
- cy.get('@searchInput').type('sfasdf');
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-apply-button"]').click();
+ cy.get("@roomTypeSelect").select("Group");
+ cy.get("@dateRangeSelect").select("day");
+ cy.get("@searchInput").type("sfasdf");
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-apply-button"]').click();
});
- it('clears the filters when press clear button', () => {
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 0);
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-clear-button"]').click();
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);
- cy.get('@roomTypeSelect').should('have.value', 'All');
- cy.get('@dateRangeSelect').should('have.value', 'all');
- cy.get('@searchInput').should('have.value', '');
+ it("clears the filters when press clear button", () => {
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 0);
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-clear-button"]').click();
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
+ cy.get("@roomTypeSelect").should("have.value", "All");
+ cy.get("@dateRangeSelect").should("have.value", "all");
+ cy.get("@searchInput").should("have.value", "");
});
- it('clears the filters when press empty state clear button', () => {
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 0);
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-empty-state-clear-button"]').click();
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);
- cy.get('@roomTypeSelect').should('have.value', 'All');
- cy.get('@dateRangeSelect').should('have.value', 'all');
- cy.get('@searchInput').should('have.value', '');
+ it("clears the filters when press empty state clear button", () => {
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 0);
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').click();
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
+ cy.get("@roomTypeSelect").should("have.value", "All");
+ cy.get("@dateRangeSelect").should("have.value", "all");
+ cy.get("@searchInput").should("have.value", "");
});
});
});
-describe('Custom date/time pattern example', () => {
+describe("Custom date/time pattern example", () => {
beforeEach(() => {
- cy.visit('/patterns/filter-group');
- cy.get('[data-cy="custom-filter-group-example"]').first().as('filterGroupWrapper');
- cy.get('@filterGroupWrapper').find('select[name="type"]').as('roomTypeSelect');
- cy.get('@filterGroupWrapper').find('select[name="range"]').as('dateRangeSelect');
- cy.get('@filterGroupWrapper').find('input[name="search"]').as('searchInput');
- cy.get('@filterGroupWrapper').find('[data-cy="custom-filter-group-popover-button"]').as('dateTimePopoverButton');
+ cy.visit("/patterns/filter-group");
+ cy.get('[data-cy="custom-filter-group-example"]').first().as("filterGroupWrapper");
+ cy.get("@filterGroupWrapper").find('select[name="type"]').as("roomTypeSelect");
+ cy.get("@filterGroupWrapper").find('select[name="range"]').as("dateRangeSelect");
+ cy.get("@filterGroupWrapper").find('input[name="search"]').as("searchInput");
+ cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-popover-button"]').as("dateTimePopoverButton");
});
- it('filters the table with the search bar', () => {
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);
- cy.get('@searchInput').type('test').should('have.value', 'test');
- cy.get('@filterGroupWrapper').find('[data-cy="custom-filter-group-search-button"]').click();
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 3);
+ it("filters the table with the search bar", () => {
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
+ cy.get("@searchInput").type("test").should("have.value", "test");
+ cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-search-button"]').click();
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 3);
});
- it('filters the table with the selects', () => {
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);
- cy.get('@roomTypeSelect').select('WebRTC Go').should('have.value', 'WebRTC Go');
- cy.get('@dateRangeSelect').select('day').should('have.value', 'day');
- cy.get('@filterGroupWrapper').find('[data-cy="custom-filter-group-apply-button"]').click();
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 3);
+ it("filters the table with the selects", () => {
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
+ cy.get("@roomTypeSelect").select("WebRTC Go").should("have.value", "WebRTC Go");
+ cy.get("@dateRangeSelect").select("day").should("have.value", "day");
+ cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-apply-button"]').click();
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 3);
});
- describe('Empty state', () => {
- it('shows the empty state when search returns no results', () => {
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);
- cy.get('@searchInput').type('asdfasdf');
- cy.get('@filterGroupWrapper').find('[data-cy="custom-filter-group-search-button"]').click();
- cy.get('@filterGroupWrapper').find('table').should('have.length', 0);
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-empty-state-clear-button"]').should('be.visible');
+ describe("Empty state", () => {
+ it("shows the empty state when search returns no results", () => {
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
+ cy.get("@searchInput").type("asdfasdf");
+ cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-search-button"]').click();
+ cy.get("@filterGroupWrapper").find("table").should("have.length", 0);
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').should("be.visible");
});
- it('shows the empty state when selects returns no results', () => {
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);
- cy.get('@roomTypeSelect').select('Peer to Peer');
- cy.get('@dateRangeSelect').select('12hours');
- cy.get('@filterGroupWrapper').find('[data-cy="custom-filter-group-apply-button"]').click();
- cy.get('@filterGroupWrapper').find('table').should('have.length', 0);
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-empty-state-clear-button"]').should('be.visible');
+ it("shows the empty state when selects returns no results", () => {
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
+ cy.get("@roomTypeSelect").select("Peer to Peer");
+ cy.get("@dateRangeSelect").select("12hours");
+ cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-apply-button"]').click();
+ cy.get("@filterGroupWrapper").find("table").should("have.length", 0);
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').should("be.visible");
});
});
- it('clears the filters when press empty state clear button', () => {
- cy.get('@roomTypeSelect').select('Peer to Peer');
- cy.get('@dateRangeSelect').select('12hours');
- cy.get('@searchInput').type('sfasdf');
- cy.get('@filterGroupWrapper').find('[data-cy="custom-filter-group-apply-button"]').click();
-
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 0);
- cy.get('@filterGroupWrapper').find('[data-cy="filter-group-empty-state-clear-button"]').click();
- cy.get('@filterGroupWrapper').find('tr').should('have.length', 8);
- cy.get('@roomTypeSelect').should('have.value', 'All');
- cy.get('@dateRangeSelect').should('have.value', 'all');
- cy.get('@searchInput').should('have.value', '');
+ it("clears the filters when press empty state clear button", () => {
+ cy.get("@roomTypeSelect").select("Peer to Peer");
+ cy.get("@dateRangeSelect").select("12hours");
+ cy.get("@searchInput").type("sfasdf");
+ cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-apply-button"]').click();
+
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 0);
+ cy.get("@filterGroupWrapper").find('[data-cy="filter-group-empty-state-clear-button"]').click();
+ cy.get("@filterGroupWrapper").find("tr").should("have.length", 8);
+ cy.get("@roomTypeSelect").should("have.value", "All");
+ cy.get("@dateRangeSelect").should("have.value", "all");
+ cy.get("@searchInput").should("have.value", "");
});
- describe('Custom date/time popover', () => {
+ describe("Custom date/time popover", () => {
beforeEach(() => {
- cy.get('@dateTimePopoverButton').click();
+ cy.get("@dateTimePopoverButton").click();
- cy.get('input[name="customDate.startDate"]').as('startDateInput');
- cy.get('input[name="customDate.startTime"]').as('startTimeInput');
- cy.get('input[name="customDate.endDate"]').as('endDateInput');
- cy.get('input[name="customDate.endTime"]').as('endTimeInput');
- cy.get('[data-cy="custom-filter-group-popover-apply-button"]').as('popoverApplyButton');
+ cy.get('input[name="customDate.startDate"]').as("startDateInput");
+ cy.get('input[name="customDate.startTime"]').as("startTimeInput");
+ cy.get('input[name="customDate.endDate"]').as("endDateInput");
+ cy.get('input[name="customDate.endTime"]').as("endTimeInput");
+ cy.get('[data-cy="custom-filter-group-popover-apply-button"]').as("popoverApplyButton");
});
- it('clears the date/time values if change the range select', () => {
+ it("clears the date/time values if change the range select", () => {
const TODAY = new Date();
- cy.get('@startDateInput').type('2022-05-01');
- cy.get('@startTimeInput').type('10:30');
- cy.get('@endDateInput').type('2022-05-01');
- cy.get('@endTimeInput').type('20:30');
+ cy.get("@startDateInput").type("2022-05-01");
+ cy.get("@startTimeInput").type("10:30");
+ cy.get("@endDateInput").type("2022-05-01");
+ cy.get("@endTimeInput").type("20:30");
- cy.get('@popoverApplyButton').click();
+ cy.get("@popoverApplyButton").click();
- cy.get('@dateRangeSelect').select('12hours');
- cy.get('@filterGroupWrapper').find('[data-cy="custom-filter-group-apply-button"]').click();
+ cy.get("@dateRangeSelect").select("12hours");
+ cy.get("@filterGroupWrapper").find('[data-cy="custom-filter-group-apply-button"]').click();
- cy.get('@startDateInput').should('have.value', TODAY.toISOString().slice(0, 10));
- cy.get('@startTimeInput').should('have.value', '00:00');
- cy.get('@endDateInput').should('have.value', TODAY.toISOString().slice(0, 10));
- cy.get('@endTimeInput').should('have.value', '23:59');
+ cy.get("@startDateInput").should("have.value", TODAY.toISOString().slice(0, 10));
+ cy.get("@startTimeInput").should("have.value", "00:00");
+ cy.get("@endDateInput").should("have.value", TODAY.toISOString().slice(0, 10));
+ cy.get("@endTimeInput").should("have.value", "23:59");
});
});
});
diff --git a/cypress/integration/landing-page/index.spec.ts b/cypress/integration/landing-page/index.spec.ts
index ee6ed3a6ef..bac3ddefc9 100644
--- a/cypress/integration/landing-page/index.spec.ts
+++ b/cypress/integration/landing-page/index.spec.ts
@@ -1,11 +1,11 @@
// ℹ️ If we use anon functions instead of arrow functions, we can leverage Mocha's context and pull the test name directly from this
-describe('Landing Page', function () {
+describe("Landing Page", function () {
// ℹ️ We are able to reference `this.title` because we have bound this describe block to the Cypress context.
const testSuiteName = this.title;
- describe('Visual regression tests', () => {
- it('Basic VRT', () => {
- cy.visualRegressionTestUrl({url: '/', testName: `${testSuiteName}-landing-page-check`});
+ describe("Visual regression tests", () => {
+ it("Basic VRT", () => {
+ cy.visualRegressionTestUrl({ url: "/", testName: `${testSuiteName}-landing-page-check` });
});
});
});
diff --git a/cypress/integration/link-checker/index.spec.ts b/cypress/integration/link-checker/index.spec.ts
index ab2b5069fc..08768c2dac 100644
--- a/cypress/integration/link-checker/index.spec.ts
+++ b/cypress/integration/link-checker/index.spec.ts
@@ -17,19 +17,19 @@ const IGNORE_LIST = [];
*/
const shouldVisitLink = (link, baseUrl) => {
// We should never have a `//` in a url other than the one in `http://`
- const passesDoubleSlashTest = link.split('//')[2] == null;
- const passesIrrelevantTest = !link.includes('page-data') && !link.includes('socket.io');
+ const passesDoubleSlashTest = link.split("//")[2] == null;
+ const passesIrrelevantTest = !link.includes("page-data") && !link.includes("socket.io");
// does it include the baseUrl the site is running on, or a production link url including Storybook
- const passesHostTest = link.includes(baseUrl) || link.includes('paste-storybook.twilio.design');
+ const passesHostTest = link.includes(baseUrl) || link.includes("paste-storybook.twilio.design");
const passesIgnoreTest = !IGNORE_LIST.some((ignoreItem) => link.includes(ignoreItem));
return passesDoubleSlashTest && passesIrrelevantTest && passesHostTest && passesIgnoreTest;
};
-describe('Broken link checker', () => {
- it('recursively check all website links for any broken links', () => {
+describe("Broken link checker", () => {
+ it("recursively check all website links for any broken links", () => {
const VISITED_LINKS = new Set();
- const baseUrl = Cypress.env('CYPRESS_BASE_URL');
+ const baseUrl = Cypress.env("CYPRESS_BASE_URL");
cy.log(`[LINK CHECKER]: Link checking starting on ${baseUrl}`);
@@ -45,8 +45,8 @@ describe('Broken link checker', () => {
// so it omits the need to wait for the JS to execute.
// This makes this crawler much more performant, but it only
// works because we SSR our website.
- cy.request({url: pagePath})
- .its('body')
+ cy.request({ url: pagePath })
+ .its("body")
.then((html) => {
// Cyprus has a jQuery like syntax (called Cheerio) to traverse
// the html content: https://cheerio.js.org
@@ -58,10 +58,10 @@ describe('Broken link checker', () => {
// until every link has been crawled. #recursion
$anchors.each((index: number) => {
// Gatsby or Cypress does some weird "/__/" routing. This removes that oddity.
- const href = $anchors[index].href.replace('/__/', '/');
+ const href = $anchors[index].href.replace("/__/", "/");
// Remove the hash to prevent checking the same actual link multiple times
- const link = href.split('#')[0];
+ const link = href.split("#")[0];
if (shouldVisitLink(link, baseUrl)) {
crawlPageLinks(link);
diff --git a/cypress/integration/opengraph/index.spec.ts b/cypress/integration/opengraph/index.spec.ts
index b2e7a4e375..beaeff28e2 100644
--- a/cypress/integration/opengraph/index.spec.ts
+++ b/cypress/integration/opengraph/index.spec.ts
@@ -1,17 +1,17 @@
-describe('OpenGraph Cards', () => {
- it('renders opengraph cards correctly', () => {
- cy.visit('/opengraph/?path=components/alert');
+describe("OpenGraph Cards", () => {
+ it("renders opengraph cards correctly", () => {
+ cy.visit("/opengraph/?path=components/alert");
// Check the title
- cy.get('h1').should('have.text', 'Alert');
+ cy.get("h1").should("have.text", "Alert");
// Check the logo
- cy.get('svg').should('be.visible');
+ cy.get("svg").should("be.visible");
// Check the aria-label
- cy.get('[aria-label="Open Graph Template"]').should('be.visible');
+ cy.get('[aria-label="Open Graph Template"]').should("be.visible");
// Check the fonts
- cy.document().its('fonts.status').should('equal', 'loaded');
+ cy.document().its("fonts.status").should("equal", "loaded");
});
});
diff --git a/cypress/integration/sidebar-navigation/index.spec.ts b/cypress/integration/sidebar-navigation/index.spec.ts
index e2f90e2618..f8540cd864 100644
--- a/cypress/integration/sidebar-navigation/index.spec.ts
+++ b/cypress/integration/sidebar-navigation/index.spec.ts
@@ -1,27 +1,27 @@
const sidebarNavigationDisclosures = [
- 'introduction',
- 'for-designers',
- 'for-engineers',
- 'contributing',
- 'foundations',
- 'content',
- 'patterns',
- 'components',
- 'combobox',
- 'icon',
- 'primitives',
- 'tokens',
- 'core',
- 'libraries',
- 'customization',
- 'theme',
+ "introduction",
+ "for-designers",
+ "for-engineers",
+ "contributing",
+ "foundations",
+ "content",
+ "patterns",
+ "components",
+ "combobox",
+ "icon",
+ "primitives",
+ "tokens",
+ "core",
+ "libraries",
+ "customization",
+ "theme",
];
-const BASE = 'sidebar-disclosure';
+const BASE = "sidebar-disclosure";
-describe('Sidebar navigation', () => {
+describe("Sidebar navigation", () => {
before(() => {
- cy.visit('/');
+ cy.visit("/");
cy.wait(1000);
});
@@ -30,11 +30,11 @@ describe('Sidebar navigation', () => {
const contentSelector = `${BASE}-content-${disclosureName}`;
it(`should open the the "${disclosureName}" sidebar disclosure`, () => {
- cy.get(`[data-cy="${buttonSelector}"]`).click().should('have.attr', 'aria-expanded', 'true');
+ cy.get(`[data-cy="${buttonSelector}"]`).click().should("have.attr", "aria-expanded", "true");
// creates an alias for the content
- cy.get(`[data-cy="${contentSelector}"]`).as('currentContent');
+ cy.get(`[data-cy="${contentSelector}"]`).as("currentContent");
- cy.get('@currentContent').scrollIntoView().should('be.visible');
+ cy.get("@currentContent").scrollIntoView().should("be.visible");
});
});
@@ -42,20 +42,20 @@ describe('Sidebar navigation', () => {
const buttonSelector = `${BASE}-button-${disclosureName}`;
it(`should close the the "${disclosureName}" sidebar disclosure`, () => {
- cy.get(`[data-cy="${buttonSelector}"]`).click().should('have.attr', 'aria-expanded', 'false');
+ cy.get(`[data-cy="${buttonSelector}"]`).click().should("have.attr", "aria-expanded", "false");
});
});
});
-describe('Sidebar opens correct section on first load', () => {
- it('opens the sidebar category and selects the page correctly on first load', () => {
- cy.visit('/components/alert-dialog/');
+describe("Sidebar opens correct section on first load", () => {
+ it("opens the sidebar category and selects the page correctly on first load", () => {
+ cy.visit("/components/alert-dialog/");
const componentsCategoryButton = cy.get(`[data-cy="sidebar-disclosure-button-components"]`);
- componentsCategoryButton.should('have.attr', 'aria-expanded', 'true');
+ componentsCategoryButton.should("have.attr", "aria-expanded", "true");
const componentsCategoryList = cy.get(`[data-cy="sidebar-disclosure-content-components"]`);
- const alertDialogLink = componentsCategoryList.contains('Alert Dialog');
- alertDialogLink.should('have.attr', 'aria-current', 'page');
+ const alertDialogLink = componentsCategoryList.contains("Alert Dialog");
+ alertDialogLink.should("have.attr", "aria-current", "page");
});
});
diff --git a/cypress/integration/site-search/index.spec.ts b/cypress/integration/site-search/index.spec.ts
index 200178ea57..9107fa017c 100644
--- a/cypress/integration/site-search/index.spec.ts
+++ b/cypress/integration/site-search/index.spec.ts
@@ -1,23 +1,23 @@
-describe('Docs website search', () => {
+describe("Docs website search", () => {
before(() => {
- cy.visit('/roadmap');
+ cy.visit("/roadmap");
cy.wait(1000);
});
beforeEach(() => {
- cy.intercept({url: 'https://**.algolia.net/**', method: 'POST'}).as('searchRequest');
+ cy.intercept({ url: "https://**.algolia.net/**", method: "POST" }).as("searchRequest");
});
beforeEach(() => {
- cy.get('[data-cy="paste-docsearch-container"] button:visible').as('searchButtonEl');
+ cy.get('[data-cy="paste-docsearch-container"] button:visible').as("searchButtonEl");
});
- it('should handle a search string', () => {
- cy.get('@searchButtonEl').scrollIntoView().should('be.visible').click({force: true});
- cy.get('.DocSearch-Input').should('be.visible').should('be.focused').type('checkbox');
- cy.wait('@searchRequest');
- cy.get('.DocSearch-Hits').should('have.length.above', 0);
- cy.get('.DocSearch-Hits [role="listbox"]').should('have.length.above', 0);
- cy.get('.DocSearch-Hits [role="option"]').should('have.length.above', 0);
+ it("should handle a search string", () => {
+ cy.get("@searchButtonEl").scrollIntoView().should("be.visible").click({ force: true });
+ cy.get(".DocSearch-Input").should("be.visible").should("be.focused").type("checkbox");
+ cy.wait("@searchRequest");
+ cy.get(".DocSearch-Hits").should("have.length.above", 0);
+ cy.get('.DocSearch-Hits [role="listbox"]').should("have.length.above", 0);
+ cy.get('.DocSearch-Hits [role="option"]').should("have.length.above", 0);
});
});
diff --git a/cypress/integration/sitemap-vrt/batch2.spec.ts b/cypress/integration/sitemap-vrt/batch2.spec.ts
index 0cdff81cbe..8b144185ba 100644
--- a/cypress/integration/sitemap-vrt/batch2.spec.ts
+++ b/cypress/integration/sitemap-vrt/batch2.spec.ts
@@ -1,9 +1,9 @@
-import {SITEMAP_CHUNKS} from './constants';
+import { SITEMAP_CHUNKS } from "./constants";
-describe('Full Site VRT Batch 2', function () {
+describe("Full Site VRT Batch 2", function () {
SITEMAP_CHUNKS[1].forEach((url) => {
it(`should vrt ${url}`, () => {
- cy.visualRegressionTestUrl({url, testName: url});
+ cy.visualRegressionTestUrl({ url, testName: url });
});
});
});
diff --git a/cypress/integration/sitemap-vrt/batch3.spec.ts b/cypress/integration/sitemap-vrt/batch3.spec.ts
index 607164f874..aff51ca608 100644
--- a/cypress/integration/sitemap-vrt/batch3.spec.ts
+++ b/cypress/integration/sitemap-vrt/batch3.spec.ts
@@ -1,9 +1,9 @@
-import {SITEMAP_CHUNKS} from './constants';
+import { SITEMAP_CHUNKS } from "./constants";
-describe('Full Site VRT Batch 3', function () {
+describe("Full Site VRT Batch 3", function () {
SITEMAP_CHUNKS[2].forEach((url) => {
it(`should vrt ${url}`, () => {
- cy.visualRegressionTestUrl({url, testName: url});
+ cy.visualRegressionTestUrl({ url, testName: url });
});
});
});
diff --git a/cypress/integration/sitemap-vrt/batch4.spec.ts b/cypress/integration/sitemap-vrt/batch4.spec.ts
index 320acc2d44..f3c98affb4 100644
--- a/cypress/integration/sitemap-vrt/batch4.spec.ts
+++ b/cypress/integration/sitemap-vrt/batch4.spec.ts
@@ -1,9 +1,9 @@
-import {SITEMAP_CHUNKS} from './constants';
+import { SITEMAP_CHUNKS } from "./constants";
-describe('Full Site VRT Batch 4', function () {
+describe("Full Site VRT Batch 4", function () {
SITEMAP_CHUNKS[3].forEach((url) => {
it(`should vrt ${url}`, () => {
- cy.visualRegressionTestUrl({url, testName: url});
+ cy.visualRegressionTestUrl({ url, testName: url });
});
});
});
diff --git a/cypress/integration/sitemap-vrt/batch5.spec.ts b/cypress/integration/sitemap-vrt/batch5.spec.ts
index 9896651ca7..a4282a059a 100644
--- a/cypress/integration/sitemap-vrt/batch5.spec.ts
+++ b/cypress/integration/sitemap-vrt/batch5.spec.ts
@@ -1,9 +1,9 @@
-import {SITEMAP_CHUNKS} from './constants';
+import { SITEMAP_CHUNKS } from "./constants";
-describe('Full Site VRT Batch 5', function () {
+describe("Full Site VRT Batch 5", function () {
SITEMAP_CHUNKS[4].forEach((url) => {
it(`should vrt ${url}`, () => {
- cy.visualRegressionTestUrl({url, testName: url});
+ cy.visualRegressionTestUrl({ url, testName: url });
});
});
});
diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts
index 6b2d90d032..16cc79e1ea 100644
--- a/cypress/integration/sitemap-vrt/constants.ts
+++ b/cypress/integration/sitemap-vrt/constants.ts
@@ -1,179 +1,179 @@
export const SITEMAP = [
- '/customization/',
- '/',
- '/blog/',
- '/blog/2020-11-26-growing-pains-and-how-we-scaled-our-design-system-support/',
- '/blog/2021-04-29-insights-and-metrics-that-inform-the-paste-design-system/',
- '/blog/2021-07-26-pastes-path-to-a-transparent-package-categorization-system/',
- '/blog/2022-04-06-paste-newsletter/',
- '/blog/2022-05-17-bringing-cohesion-to-the-twilio-product-suite-part-i/',
- '/blog/2022-06-28-paste-newsletter/',
- '/blog/2022-07-26-paste-newsletter/',
- '/blog/2022-09-23-paste-newsletter/',
- '/blog/2022-10-31-paste-newsletter/',
- '/blog/2022-12-06-announcing-the-conversations-ui-kit/',
- '/blog/2022-12-09-paste-newsletter/',
- '/blog/2023-01-27-paste-newsletter/',
- '/blog/2023-04-13-paste-newsletter/',
- '/blog/2023-06-12-paste-newsletter/',
- '/blog/2023-08-01-bringing-cohesion-to-the-twilio-product-suite-part-ii/',
- '/blog/2023-08-02-paste-newsletter/',
- '/components/account-switcher/',
- '/components/aspect-ratio/',
- '/components/aspect-ratio/api',
- '/components/aspect-ratio/changelog',
- '/components/anchor/',
- '/components/anchor/api',
- '/components/anchor/changelog',
- '/components/alert-dialog/',
- '/components/avatar/',
- '/components/breadcrumb/',
- '/components/badge/',
- '/components/callout/',
- '/components/code-block/',
- '/components/card/',
- '/components/chat-composer/',
- '/components/chat-log/',
- '/components/checkbox/',
- '/components/data-grid/',
- '/components/detail-text',
- '/components/description-list/',
- '/components/display-heading/',
- '/components/display-pill-group/',
- '/components/disclosure/',
- '/components/button/',
- '/components/button/api',
- '/components/button/changelog',
- '/components/button-group/',
- '/components/flex/',
- '/components/flex/api',
- '/components/flex/changelog',
- '/components/file-picker/',
- '/components/file-uploader/',
- '/components/form/',
- '/components/combobox/',
- '/components/date-picker/',
- '/components/grid/',
- '/components/grid/api',
- '/components/grid/changelog',
- '/components/heading/',
- '/components/form-pill-group/',
- '/components/alert/',
- '/components/help-text/',
- '/components/icon/',
- '/components/icon/usage-guidelines/',
- '/components/',
- '/components/in-page-navigation',
- '/components/inline-code/',
- '/components/input/',
- '/components/label/',
- '/components/list/',
- '/components/minimizable-dialog/',
- '/components/media-object/',
- '/components/media-object/api',
- '/components/media-object/changelog',
- '/components/meter',
- '/components/pagination/',
- '/components/modal/',
- '/components/menu/',
- '/components/paragraph/',
- '/components/popover/',
- '/components/product-switcher/',
- '/components/progress-steps/',
- '/components/radio-group/',
- '/components/radio-button-group/',
- '/components/screen-reader-only/',
- '/components/select/',
- '/components/separator/',
- '/components/sidebar/',
- '/components/sidebar-navigation/',
- '/components/stack/',
- '/components/stack/api',
- '/components/stack/changelog',
- '/components/status-badge/',
- '/components/status-menu/',
- '/components/spinner/',
- '/components/skeleton-loader/',
- '/components/slider/',
- '/components/switch/',
- '/components/tabs/',
- '/components/toast/',
- '/components/time-picker/',
- '/components/truncate/',
- '/components/tooltip/',
- '/components/topbar',
- '/components/user-dialog/',
- '/components/textarea/',
- '/components/table/',
- '/components/table/api',
- '/components/table/changelog',
- '/components/visual-picker/',
- '/core/',
- '/core/changelog/',
- '/core/libraries/',
- '/core/libraries/code-editor/',
- '/core/libraries/codemods/',
- '/core/libraries/data-visualization/',
- '/core/libraries/uid-library/',
- '/core/libraries/vs-code-plugin/',
- '/core/upgrade-guide/',
- '/customization/composing-custom-components-with-design-tokens/',
- '/customization/creating-a-custom-theme/',
- '/customization/customization-provider/',
- '/customization/customizing-component-elements/',
- '/foundations/colors/',
- '/foundations/content/content-checklist/',
- '/foundations/content/voice-and-tone/',
- '/foundations/content/word-list/',
- '/foundations/illustrations/',
- '/foundations/data-visualization/',
- '/foundations/spacing-and-layout/',
- '/foundations/typography/',
- '/inclusive-design/',
- '/foundations/content/product-style-guide/',
- '/introduction/about-paste/',
- '/introduction/contributing/components/',
- '/foundations/content/',
- '/introduction/contributing/icons/',
- '/introduction/contributing/patterns/',
- '/introduction/for-designers/design-guidelines/',
- '/introduction/for-engineers/manual-installation/',
- '/introduction/for-engineers/quickstart/',
- '/introduction/working-with-us/',
- '/page-templates/',
- '/page-templates/object-details/',
- '/page-templates/objects-list/',
- '/page-templates/settings/',
- '/patterns/button-vs-anchor/',
- '/patterns/confirmation/',
- '/patterns/delete/',
- '/patterns/data-export/',
- '/patterns/filter-group/',
- '/patterns/',
- '/patterns/empty-state/',
- '/patterns/error-state/',
- '/patterns/navigation/',
- '/patterns/notifications-and-feedback/',
- '/patterns/privacy/',
- '/patterns/status/',
- '/primitives/combobox-primitive/',
- '/patterns/create/',
- '/primitives/',
- '/primitives/menu-primitive/',
- '/primitives/disclosure-primitive/',
- '/primitives/modal-dialog-primitive/',
- '/primitives/non-modal-dialog-primitive/',
- '/primitives/tabs-primitive/',
- '/primitives/text/',
- '/primitives/tooltip-primitive/',
- '/primitives/listbox-primitive/',
- '/roadmap/',
- '/theme/',
- '/theme/changing-theme/',
- '/theme/dark-theme/',
- '/tokens/design-tokens-package/',
- '/tokens/',
- '/primitives/box/',
+ "/customization/",
+ "/",
+ "/blog/",
+ "/blog/2020-11-26-growing-pains-and-how-we-scaled-our-design-system-support/",
+ "/blog/2021-04-29-insights-and-metrics-that-inform-the-paste-design-system/",
+ "/blog/2021-07-26-pastes-path-to-a-transparent-package-categorization-system/",
+ "/blog/2022-04-06-paste-newsletter/",
+ "/blog/2022-05-17-bringing-cohesion-to-the-twilio-product-suite-part-i/",
+ "/blog/2022-06-28-paste-newsletter/",
+ "/blog/2022-07-26-paste-newsletter/",
+ "/blog/2022-09-23-paste-newsletter/",
+ "/blog/2022-10-31-paste-newsletter/",
+ "/blog/2022-12-06-announcing-the-conversations-ui-kit/",
+ "/blog/2022-12-09-paste-newsletter/",
+ "/blog/2023-01-27-paste-newsletter/",
+ "/blog/2023-04-13-paste-newsletter/",
+ "/blog/2023-06-12-paste-newsletter/",
+ "/blog/2023-08-01-bringing-cohesion-to-the-twilio-product-suite-part-ii/",
+ "/blog/2023-08-02-paste-newsletter/",
+ "/components/account-switcher/",
+ "/components/aspect-ratio/",
+ "/components/aspect-ratio/api",
+ "/components/aspect-ratio/changelog",
+ "/components/anchor/",
+ "/components/anchor/api",
+ "/components/anchor/changelog",
+ "/components/alert-dialog/",
+ "/components/avatar/",
+ "/components/breadcrumb/",
+ "/components/badge/",
+ "/components/callout/",
+ "/components/code-block/",
+ "/components/card/",
+ "/components/chat-composer/",
+ "/components/chat-log/",
+ "/components/checkbox/",
+ "/components/data-grid/",
+ "/components/detail-text",
+ "/components/description-list/",
+ "/components/display-heading/",
+ "/components/display-pill-group/",
+ "/components/disclosure/",
+ "/components/button/",
+ "/components/button/api",
+ "/components/button/changelog",
+ "/components/button-group/",
+ "/components/flex/",
+ "/components/flex/api",
+ "/components/flex/changelog",
+ "/components/file-picker/",
+ "/components/file-uploader/",
+ "/components/form/",
+ "/components/combobox/",
+ "/components/date-picker/",
+ "/components/grid/",
+ "/components/grid/api",
+ "/components/grid/changelog",
+ "/components/heading/",
+ "/components/form-pill-group/",
+ "/components/alert/",
+ "/components/help-text/",
+ "/components/icon/",
+ "/components/icon/usage-guidelines/",
+ "/components/",
+ "/components/in-page-navigation",
+ "/components/inline-code/",
+ "/components/input/",
+ "/components/label/",
+ "/components/list/",
+ "/components/minimizable-dialog/",
+ "/components/media-object/",
+ "/components/media-object/api",
+ "/components/media-object/changelog",
+ "/components/meter",
+ "/components/pagination/",
+ "/components/modal/",
+ "/components/menu/",
+ "/components/paragraph/",
+ "/components/popover/",
+ "/components/product-switcher/",
+ "/components/progress-steps/",
+ "/components/radio-group/",
+ "/components/radio-button-group/",
+ "/components/screen-reader-only/",
+ "/components/select/",
+ "/components/separator/",
+ "/components/sidebar/",
+ "/components/sidebar-navigation/",
+ "/components/stack/",
+ "/components/stack/api",
+ "/components/stack/changelog",
+ "/components/status-badge/",
+ "/components/status-menu/",
+ "/components/spinner/",
+ "/components/skeleton-loader/",
+ "/components/slider/",
+ "/components/switch/",
+ "/components/tabs/",
+ "/components/toast/",
+ "/components/time-picker/",
+ "/components/truncate/",
+ "/components/tooltip/",
+ "/components/topbar",
+ "/components/user-dialog/",
+ "/components/textarea/",
+ "/components/table/",
+ "/components/table/api",
+ "/components/table/changelog",
+ "/components/visual-picker/",
+ "/core/",
+ "/core/changelog/",
+ "/core/libraries/",
+ "/core/libraries/code-editor/",
+ "/core/libraries/codemods/",
+ "/core/libraries/data-visualization/",
+ "/core/libraries/uid-library/",
+ "/core/libraries/vs-code-plugin/",
+ "/core/upgrade-guide/",
+ "/customization/composing-custom-components-with-design-tokens/",
+ "/customization/creating-a-custom-theme/",
+ "/customization/customization-provider/",
+ "/customization/customizing-component-elements/",
+ "/foundations/colors/",
+ "/foundations/content/content-checklist/",
+ "/foundations/content/voice-and-tone/",
+ "/foundations/content/word-list/",
+ "/foundations/illustrations/",
+ "/foundations/data-visualization/",
+ "/foundations/spacing-and-layout/",
+ "/foundations/typography/",
+ "/inclusive-design/",
+ "/foundations/content/product-style-guide/",
+ "/introduction/about-paste/",
+ "/introduction/contributing/components/",
+ "/foundations/content/",
+ "/introduction/contributing/icons/",
+ "/introduction/contributing/patterns/",
+ "/introduction/for-designers/design-guidelines/",
+ "/introduction/for-engineers/manual-installation/",
+ "/introduction/for-engineers/quickstart/",
+ "/introduction/working-with-us/",
+ "/page-templates/",
+ "/page-templates/object-details/",
+ "/page-templates/objects-list/",
+ "/page-templates/settings/",
+ "/patterns/button-vs-anchor/",
+ "/patterns/confirmation/",
+ "/patterns/delete/",
+ "/patterns/data-export/",
+ "/patterns/filter-group/",
+ "/patterns/",
+ "/patterns/empty-state/",
+ "/patterns/error-state/",
+ "/patterns/navigation/",
+ "/patterns/notifications-and-feedback/",
+ "/patterns/privacy/",
+ "/patterns/status/",
+ "/primitives/combobox-primitive/",
+ "/patterns/create/",
+ "/primitives/",
+ "/primitives/menu-primitive/",
+ "/primitives/disclosure-primitive/",
+ "/primitives/modal-dialog-primitive/",
+ "/primitives/non-modal-dialog-primitive/",
+ "/primitives/tabs-primitive/",
+ "/primitives/text/",
+ "/primitives/tooltip-primitive/",
+ "/primitives/listbox-primitive/",
+ "/roadmap/",
+ "/theme/",
+ "/theme/changing-theme/",
+ "/theme/dark-theme/",
+ "/tokens/design-tokens-package/",
+ "/tokens/",
+ "/primitives/box/",
];
const SITEMAP_CHUNKS: string[][] = [];
@@ -183,4 +183,4 @@ for (var i = 0, len = SITEMAP.length; i < len; i += CHUNK_SIZE) {
SITEMAP_CHUNKS.push(SITEMAP.slice(i, i + CHUNK_SIZE));
}
-export {SITEMAP_CHUNKS};
+export { SITEMAP_CHUNKS };
diff --git a/cypress/integration/sitemap-vrt/index.spec.ts b/cypress/integration/sitemap-vrt/index.spec.ts
index 5c7adc5064..b627644c1a 100644
--- a/cypress/integration/sitemap-vrt/index.spec.ts
+++ b/cypress/integration/sitemap-vrt/index.spec.ts
@@ -1,9 +1,9 @@
-import {SITEMAP_CHUNKS} from './constants';
+import { SITEMAP_CHUNKS } from "./constants";
-describe('Full Site VRT Batch 1', function () {
+describe("Full Site VRT Batch 1", function () {
SITEMAP_CHUNKS[0].forEach((url) => {
it(`should vrt ${url}`, () => {
- cy.visualRegressionTestUrl({url, testName: url});
+ cy.visualRegressionTestUrl({ url, testName: url });
});
});
});
diff --git a/cypress/integration/token-list/index.spec.ts b/cypress/integration/token-list/index.spec.ts
index d0f090fdf9..1bba292404 100644
--- a/cypress/integration/token-list/index.spec.ts
+++ b/cypress/integration/token-list/index.spec.ts
@@ -1,78 +1,78 @@
// ℹ️ If we use anon functions instead of arrow functions, we can leverage Mocha's context and pull the test name directly from this
-describe('Token list filter with no existing search params', function () {
+describe("Token list filter with no existing search params", function () {
// ℹ️ We are able to reference `this.title` because we have bound this describe block to the Cypress context.
const testSuiteName = this.title;
beforeEach(() => {
- cy.visit('/tokens/list');
+ cy.visit("/tokens/list");
});
- describe('Visual regression tests', () => {
- it('Basic VRT', () => {
- cy.visualRegressionTestUrl({url: '/tokens/list', testName: `${testSuiteName}-basic-page-check`});
+ describe("Visual regression tests", () => {
+ it("Basic VRT", () => {
+ cy.visualRegressionTestUrl({ url: "/tokens/list", testName: `${testSuiteName}-basic-page-check` });
});
});
});
-describe('Token list filter format control and theme control', function () {
+describe("Token list filter format control and theme control", function () {
beforeEach(() => {
- cy.visit('/tokens/list');
+ cy.visit("/tokens/list");
});
- it('controls format of token name (default = css)', () => {
+ it("controls format of token name (default = css)", () => {
const tokenNode = cy.get('[data-cy="tokens-table-container"] li:first dt [data-paste-element="TEXT"]');
- cy.get('[data-cy="format-control"]').should('have.value', 'css');
+ cy.get('[data-cy="format-control"]').should("have.value", "css");
cy.wait(300);
tokenNode.contains(/^[$]/);
tokenNode.contains(/[^A-Z]/);
});
- it('controls format of token name (Javascript)', () => {
+ it("controls format of token name (Javascript)", () => {
const tokenNode = cy.get('[data-cy="tokens-table-container"] li:first dt [data-paste-element="TEXT"]');
- cy.get('[data-cy="format-control"]').select('javascript').should('have.value', 'javascript');
+ cy.get('[data-cy="format-control"]').select("javascript").should("have.value", "javascript");
cy.wait(300);
tokenNode.contains(/^[a-z]/);
tokenNode.contains(/[^$-]/);
});
- it('controls format of token name (CSS)', () => {
+ it("controls format of token name (CSS)", () => {
const tokenNode = cy.get('[data-cy="tokens-table-container"] li:first dt [data-paste-element="TEXT"]');
- cy.get('[data-cy="format-control"]').select('css').should('have.value', 'css');
+ cy.get('[data-cy="format-control"]').select("css").should("have.value", "css");
cy.wait(300);
tokenNode.contains(/^[$]/);
tokenNode.contains(/[^A-Z]/);
});
- it('controls the theme of filtered tokens', () => {
- cy.get('[data-cy="theme-control"]').select('dark').should('have.value', 'dark');
+ it("controls the theme of filtered tokens", () => {
+ cy.get('[data-cy="theme-control"]').select("dark").should("have.value", "dark");
cy.get('[data-cy="tokens-table-container"] li:first dd [data-paste-element="TEXT"]:first').should(
- 'include.text',
- 'rgb(18, 28, 45)'
+ "include.text",
+ "rgb(18, 28, 45)",
);
- cy.get('[data-cy="theme-control"]').select('default').should('have.value', 'default');
+ cy.get('[data-cy="theme-control"]').select("default").should("have.value", "default");
cy.get('[data-cy="tokens-table-container"] li:first dd [data-paste-element="TEXT"]:first').should(
- 'include.text',
- 'rgb(244, 244, 246)'
+ "include.text",
+ "rgb(244, 244, 246)",
);
});
- it('has a responsive layout', () => {
- cy.get('[data-cy="input-column"]').should('have.css', 'min-width', '0px');
- cy.viewport('iphone-x');
- cy.get('[data-cy="input-column"]').should('have.css', 'min-width', '100%');
+ it("has a responsive layout", () => {
+ cy.get('[data-cy="input-column"]').should("have.css", "min-width", "0px");
+ cy.viewport("iphone-x");
+ cy.get('[data-cy="input-column"]').should("have.css", "min-width", "100%");
});
});
-describe('Token Card', function () {
+describe("Token Card", function () {
beforeEach(() => {
- cy.visit('/tokens/list');
+ cy.visit("/tokens/list");
});
- it('has a responsive layout', () => {
- cy.get('[data-paste-element=TOKEN_CARD] dd').should('have.css', 'display', 'flex');
- cy.get('[data-paste-element=TOKEN_CARD] dd ul').should('have.css', 'maxWidth', '192px');
- cy.viewport('iphone-x');
- cy.get('[data-paste-element=TOKEN_CARD] dd').should('have.css', 'display', 'block');
- cy.get('[data-paste-element=TOKEN_CARD] dd ul').should('have.css', 'maxWidth', 'none');
+ it("has a responsive layout", () => {
+ cy.get("[data-paste-element=TOKEN_CARD] dd").should("have.css", "display", "flex");
+ cy.get("[data-paste-element=TOKEN_CARD] dd ul").should("have.css", "maxWidth", "192px");
+ cy.viewport("iphone-x");
+ cy.get("[data-paste-element=TOKEN_CARD] dd").should("have.css", "display", "block");
+ cy.get("[data-paste-element=TOKEN_CARD] dd ul").should("have.css", "maxWidth", "none");
});
});
diff --git a/cypress/integration/word-list/index.spec.ts b/cypress/integration/word-list/index.spec.ts
index cdf2f4f9ca..e48466450d 100644
--- a/cypress/integration/word-list/index.spec.ts
+++ b/cypress/integration/word-list/index.spec.ts
@@ -1,26 +1,26 @@
-describe('Word list with no filters', function () {
+describe("Word list with no filters", function () {
beforeEach(() => {
- cy.visit('/foundations/content/word-list');
+ cy.visit("/foundations/content/word-list");
});
- it('should have a pre-populated list of words in the table', () => {
- cy.get('[data-cy="word-list-table"] tbody tr').its('length').should('be.greaterThan', 70);
+ it("should have a pre-populated list of words in the table", () => {
+ cy.get('[data-cy="word-list-table"] tbody tr').its("length").should("be.greaterThan", 70);
});
});
-describe('Word list with filters', function () {
+describe("Word list with filters", function () {
beforeEach(() => {
- cy.visit('/foundations/content/word-list');
+ cy.visit("/foundations/content/word-list");
});
- it('should filter the table when a filter string is provided', () => {
- cy.get('[data-cy="word-list-table"] tbody tr').as('table-rows');
- cy.get('[data-cy="word-list-filter-input"]').click().type('ad');
- cy.get('@table-rows').its('length').should('eq', 4);
+ it("should filter the table when a filter string is provided", () => {
+ cy.get('[data-cy="word-list-table"] tbody tr').as("table-rows");
+ cy.get('[data-cy="word-list-filter-input"]').click().type("ad");
+ cy.get("@table-rows").its("length").should("eq", 4);
});
- it('should show empty state when nothing returned', () => {
- cy.get('[data-cy="word-list-filter-input"]').click().type('adddd');
- cy.get('[data-cy="word-list-table"]').should('not.exist');
- cy.get('[data-cy="word-list-empty-state"]').should('be.visible');
+ it("should show empty state when nothing returned", () => {
+ cy.get('[data-cy="word-list-filter-input"]').click().type("adddd");
+ cy.get('[data-cy="word-list-table"]').should("not.exist");
+ cy.get('[data-cy="word-list-empty-state"]').should("be.visible");
});
});
diff --git a/cypress/support/commands/index.ts b/cypress/support/commands/index.ts
index ed5dbd5761..ecb3461918 100644
--- a/cypress/support/commands/index.ts
+++ b/cypress/support/commands/index.ts
@@ -1 +1 @@
-import './parent-commands';
+import "./parent-commands";
diff --git a/cypress/support/commands/parent-commands.ts b/cypress/support/commands/parent-commands.ts
index d160d2acd7..2ebafe8126 100644
--- a/cypress/support/commands/parent-commands.ts
+++ b/cypress/support/commands/parent-commands.ts
@@ -1,4 +1,4 @@
-import {DEFAULT_VRT_OPTIONS, vrtIsEnabled} from '../utils/vrt';
+import { DEFAULT_VRT_OPTIONS, vrtIsEnabled } from "../utils/vrt";
/**
* @file Custom parent commands
@@ -8,101 +8,106 @@ import {DEFAULT_VRT_OPTIONS, vrtIsEnabled} from '../utils/vrt';
* @see https://on.cypress.io/custom-commands#Parent-Commands
*/
-Cypress.Commands.add('getDocsPageContentArea', () => cy.get('#paste-docs-content-area'));
+Cypress.Commands.add("getDocsPageContentArea", () => cy.get("#paste-docs-content-area"));
Cypress.Commands.add(
- 'pageHeaderShouldBeVisible',
- ({headerText, shouldHaveGithubLink, shouldHaveStorybook, shouldHaveOpenGraph}) => {
- cy.contains('h1', headerText).should('be.visible');
- shouldHaveGithubLink && cy.contains('Github').should('be.visible');
- shouldHaveStorybook && cy.contains('Storybook').should('be.visible');
- shouldHaveOpenGraph && cy.get('meta[property="og:image"]').should('exist');
- }
+ "pageHeaderShouldBeVisible",
+ ({ headerText, shouldHaveGithubLink, shouldHaveStorybook, shouldHaveOpenGraph }) => {
+ cy.contains("h1", headerText).should("be.visible");
+ shouldHaveGithubLink && cy.contains("Github").should("be.visible");
+ shouldHaveStorybook && cy.contains("Storybook").should("be.visible");
+ shouldHaveOpenGraph && cy.get('meta[property="og:image"]').should("exist");
+ },
);
-Cypress.Commands.add('overviewTableRendersCorrectly', () => {
- cy.get('table').first().as('componentsTable').should('be.visible');
- cy.get('@componentsTable').find('thead').find('tr').find('th').as('overviewTableHeaders');
- cy.get('@componentsTable').find('tbody').find('tr').as('tableRows');
+Cypress.Commands.add("overviewTableRendersCorrectly", () => {
+ cy.get("table").first().as("componentsTable").should("be.visible");
+ cy.get("@componentsTable").find("thead").find("tr").find("th").as("overviewTableHeaders");
+ cy.get("@componentsTable").find("tbody").find("tr").as("tableRows");
// Table has correct number of headers
- cy.get('@overviewTableHeaders').should('have.length', 6);
+ cy.get("@overviewTableHeaders").should("have.length", 6);
// Table has correct text for headers
- const headers = ['Name', 'Status', 'Code ready', 'Design assets', 'Documentation', 'Peer review'];
- cy.get('@overviewTableHeaders').each((header, index) => {
+ const headers = ["Name", "Status", "Code ready", "Design assets", "Documentation", "Peer review"];
+ cy.get("@overviewTableHeaders").each((header, index) => {
// using include here to do a loose match of headers
- cy.wrap(header).should('include.text', headers[index]);
+ cy.wrap(header).should("include.text", headers[index]);
});
// verify at least one row is rendered.
- cy.get('@tableRows').its('length').should('be.greaterThan', 0);
+ cy.get("@tableRows").its("length").should("be.greaterThan", 0);
});
-Cypress.Commands.add('checkInPageNavigationLinks', () => {
- cy.getDocsPageContentArea().as('contentArea');
+Cypress.Commands.add("checkInPageNavigationLinks", () => {
+ cy.getDocsPageContentArea().as("contentArea");
- cy.get('@contentArea').find('[data-cy="page-aside-anchor"]').as('pageAsideAnchors');
+ cy.get("@contentArea").find('[data-cy="page-aside-anchor"]').as("pageAsideAnchors");
- cy.get('@contentArea')
+ cy.get("@contentArea")
.find(
- '[data-cy="anchored-heading-h2"]:not(#component-changelog a),[data-cy="anchored-heading-h3"]:not(#component-changelog a)'
+ '[data-cy="anchored-heading-h2"]:not(#component-changelog a),[data-cy="anchored-heading-h3"]:not(#component-changelog a)',
)
- .as('anchoredHeadings');
-
- cy.get('@pageAsideAnchors').then((anchors) => {
- cy.get('@anchoredHeadings').each((anchor, idx) => {
- cy.wrap(anchor).should('have.attr', 'href').and('include', '#');
- cy.wrap(anchors[idx]).should('have.attr', 'href').and('include', '#').and('eql', anchor.attr('href'));
+ .as("anchoredHeadings");
+
+ cy.get("@pageAsideAnchors").then((anchors) => {
+ cy.get("@anchoredHeadings").each((anchor, idx) => {
+ cy.wrap(anchor).should("have.attr", "href").and("include", "#");
+ cy.wrap(anchors[idx])
+ .should("have.attr", "href")
+ .and("include", "#")
+ .and("eql", anchor.attr("href"));
});
});
});
-Cypress.Commands.add('checkPageAside', () => {
- cy.getDocsPageContentArea().getInFixedContainer('[data-cy="page-aside"]').as('pageAside');
- cy.get('@pageAside').find('[data-cy="table-of-contents"]').should('be.visible');
- cy.get('@pageAside').contains('button', 'Rate this page').should('be.visible');
- cy.get('@pageAside').find('[data-cy="page-aside-anchor"]').should('be.visible');
+Cypress.Commands.add("checkPageAside", () => {
+ cy.getDocsPageContentArea().getInFixedContainer('[data-cy="page-aside"]').as("pageAside");
+ cy.get("@pageAside").find('[data-cy="table-of-contents"]').should("be.visible");
+ cy.get("@pageAside").contains("button", "Rate this page").should("be.visible");
+ cy.get("@pageAside").find('[data-cy="page-aside-anchor"]').should("be.visible");
});
-Cypress.Commands.add('checkLivePreviews', () => {
- cy.getDocsPageContentArea().find('[data-cy="live-preview"]').should('have.length.above', 0);
+Cypress.Commands.add("checkLivePreviews", () => {
+ cy.getDocsPageContentArea().find('[data-cy="live-preview"]').should("have.length.above", 0);
});
-Cypress.Commands.add('checkDoDonts', () => {
- cy.getDocsPageContentArea().find('[data-cy="do-dont-container"]').and('have.length.above', 0);
- cy.getDocsPageContentArea().find('[data-cy="do-box"]').and('have.length.above', 0);
- cy.getDocsPageContentArea().find('[data-cy="dont-box"]').and('have.length.above', 0);
+Cypress.Commands.add("checkDoDonts", () => {
+ cy.getDocsPageContentArea().find('[data-cy="do-dont-container"]').and("have.length.above", 0);
+ cy.getDocsPageContentArea().find('[data-cy="do-box"]').and("have.length.above", 0);
+ cy.getDocsPageContentArea().find('[data-cy="dont-box"]').and("have.length.above", 0);
});
-Cypress.Commands.add('checkChangelogRevealer', () => {
- cy.getInFixedContainer('#component-changelog')
- .as('changelogContainer')
- .contains('h2', 'Changelog')
- .should('be.visible')
+Cypress.Commands.add("checkChangelogRevealer", () => {
+ cy.getInFixedContainer("#component-changelog")
+ .as("changelogContainer")
+ .contains("h2", "Changelog")
+ .should("be.visible")
.click(); // Note: when cypress is upgraded, we can specify ScrollBehavior here to center if not default
- cy.get('@changelogContainer').find('[data-cy="changelog-revealer-content"]').should('be.visible');
+ cy.get("@changelogContainer").find('[data-cy="changelog-revealer-content"]').should("be.visible");
});
-Cypress.Commands.add('getInFixedContainer', (selector) => {
- cy.get(selector).as('target');
+Cypress.Commands.add("getInFixedContainer", (selector) => {
+ cy.get(selector).as("target");
return cy
- .get('@target')
- .invoke('innerHeight')
+ .get("@target")
+ .invoke("innerHeight")
.then((height) => {
- return cy.get('@target').scrollIntoView({offset: {top: (height as number) / 2, left: 0}, ensureScrollable: true});
+ return cy
+ .get("@target")
+ .scrollIntoView({ offset: { top: (height as number) / 2, left: 0 }, ensureScrollable: true });
});
});
-Cypress.Commands.add('visualRegressionTestUrl', ({url, testName}) => {
+Cypress.Commands.add("visualRegressionTestUrl", ({ url, testName }) => {
cy.visit(url);
cy.wait(2500);
- cy.log('[VRT]: checking if VRT is enabled');
+ cy.log("[VRT]: checking if VRT is enabled");
if (vrtIsEnabled()) {
- cy.log('[VRT]: VRT is enabled, proceed.');
+ cy.log("[VRT]: VRT is enabled, proceed.");
const vrtOptions = {
...DEFAULT_VRT_OPTIONS,
@@ -119,7 +124,7 @@ Cypress.Commands.add('visualRegressionTestUrl', ({url, testName}) => {
cy.log(`[VRT]: Taking snapshot with these params: ${vrtOptions}`);
cy.percySnapshot(testName, vrtOptions);
} else {
- cy.log('[VRT]: VRT is not enabled, skipping');
+ cy.log("[VRT]: VRT is not enabled, skipping");
}
expect(true).to.equal(true);
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
index d10b6821dc..28c852a52a 100644
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
@@ -13,16 +13,16 @@
// https://on.cypress.io/configuration
// ***********************************************************
-import '@percy/cypress';
+import "@percy/cypress";
// Import commands.js using ES2015 syntax:
-import './commands';
+import "./commands";
// Alternatively you can use CommonJS syntax:
// require('./commands')
const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/;
-Cypress.on('uncaught:exception', (err) => {
+Cypress.on("uncaught:exception", (err) => {
/* returning false here prevents Cypress from failing the test
Benign error occurs when an observer takes longer than one frame to execute, like
in the case of disclosures opening on the website sidebar.
diff --git a/cypress/support/utils/vrt.ts b/cypress/support/utils/vrt.ts
index 5aaffc066e..c0470fdf13 100644
--- a/cypress/support/utils/vrt.ts
+++ b/cypress/support/utils/vrt.ts
@@ -1,5 +1,5 @@
enum EnvironmentVariables {
- UseCypressVRT = 'USE_CYPRESS_VRT',
+ UseCypressVRT = "USE_CYPRESS_VRT",
}
export const DEFAULT_VRT_OPTIONS = {};
@@ -9,6 +9,6 @@ export const DEFAULT_VRT_OPTIONS = {};
*/
export const vrtIsEnabled = (): boolean => {
const vrtEnabled = Cypress.env(EnvironmentVariables.UseCypressVRT);
- cy.log(`[VRT]: VRT is ${vrtEnabled ? '' : 'not '}enabled`);
+ cy.log(`[VRT]: VRT is ${vrtEnabled ? "" : "not "}enabled`);
return Cypress.env(EnvironmentVariables.UseCypressVRT);
};
diff --git a/dangerfile.ts b/dangerfile.ts
index d0ca61b941..633ef36455 100644
--- a/dangerfile.ts
+++ b/dangerfile.ts
@@ -1,12 +1,12 @@
+import changesetsThatNeedCoreCheck from "./.danger/changesets-that-need-core-check";
+import missingChangesetsCheck from "./.danger/missing-changesets-check";
+import missingUpgradeGuide from "./.danger/missing-upgrade-guide-check";
// https://danger.systems/js/reference.html
-import packageJsonCheck from './.danger/package-json-check';
-import missingChangesetsCheck from './.danger/missing-changesets-check';
-import changesetsThatNeedCoreCheck from './.danger/changesets-that-need-core-check';
-import missingUpgradeGuide from './.danger/missing-upgrade-guide-check';
-import websitePageVrtCheck from './.danger/website-page-vrt-check';
-import pinExternalDeps from './.danger/pin-external-deps';
-import {getRepoPackages} from './tools/utils/getRepoPackages';
-import type {PackageShape} from './tools/utils/getRepoPackages';
+import packageJsonCheck from "./.danger/package-json-check";
+import pinExternalDeps from "./.danger/pin-external-deps";
+import websitePageVrtCheck from "./.danger/website-page-vrt-check";
+import { getRepoPackages } from "./tools/utils/getRepoPackages";
+import type { PackageShape } from "./tools/utils/getRepoPackages";
// eslint-disable-next-line import/no-default-export
export default async (): Promise => {
diff --git a/internal-docs/engineering/ci.md b/internal-docs/engineering/ci.md
index 1bd3853026..952db8db11 100644
--- a/internal-docs/engineering/ci.md
+++ b/internal-docs/engineering/ci.md
@@ -7,7 +7,7 @@
- [Lint](#lint)
- [Test React 17](#test-react-17)
- [Test React 16](#test-react-16)
- - [Prettier checks](#prettier-checks)
+ - [Code formatting checks](#code-formatting-checks)
- [Categorize the PR using labels](#categorize-the-pr-using-labels)
- [Danger checks](#danger-checks)
- [Check package sizes](#check-package-sizes)
@@ -55,9 +55,12 @@ This job downloads the build cache of the monorepo, and then runs our Jest test
This job downloads the build cache of the monorepo, and then runs our Jest test suite using React 16.
-### Prettier checks
+### Code formatting checks
+
+This job downloads the build cache of the monorepo, and then runs [BiomeJS](https://biomejs.dev/) and [Prettier](https://prettier.io/). BiomeJS runs on all TS(X) / JS(X) / JSON(C) / CSS files. Prettier runs on everything else, such as HTML, MDX, etc...
+
+Biome was selected due to its tremendous performance improvements over prettier to run on our main codebase. It lacks complete support for all file extensions, so prettier is still used where needed on unsupported file types.
-This job downloads the build cache of the monorepo, and then runs Prettier.
### Categorize the PR using labels
diff --git a/internal-docs/engineering/technologies.md b/internal-docs/engineering/technologies.md
index 2ee4c70a48..7ae5600799 100644
--- a/internal-docs/engineering/technologies.md
+++ b/internal-docs/engineering/technologies.md
@@ -118,4 +118,4 @@ Our icons are converted from SVG to React components at compile time using our o
## Code Style
-We use eslint (https://eslint.org/) and Prettier ([https://prettier.io/](https://prettier.io/)) to maintain a consistent, readable code style throughout the entire monorepo.
+We use eslint (https://eslint.org/), [BiomeJS](https://biomejs.dev/), and Prettier ([https://prettier.io/](https://prettier.io/)) to maintain a consistent, readable code style throughout the entire monorepo.
diff --git a/internal-docs/engineering/testing.md b/internal-docs/engineering/testing.md
index 7c94655167..faef716fd6 100644
--- a/internal-docs/engineering/testing.md
+++ b/internal-docs/engineering/testing.md
@@ -9,7 +9,7 @@
- [End-to-end testing](#end-to-end-testing)
- [Visual Regression Testing (VRT)](#visual-regression-testing-vrt)
- [Linting](#linting)
- - [PrettierJS](#prettierjs)
+ - [BiomeJS and PrettierJS](#biomejs-and-prettierjs)
- [Commit lint](#commit-lint)
- [Running tests/checks](#running-testschecks)
- [Locally](#locally)
@@ -98,11 +98,11 @@ Linting should be performed:
If your code fails to meet the ESLint rules, you will “break the build”. This will prevent you from merging a PR or publishing new packages on `main`.
-### PrettierJS
+### BiomeJS and PrettierJS
-Manually formatting code can be tiresome so we use [PrettierJS](https://prettier.io/) (Prettier) to do the leg work for you. Prettier is an opinionated code formatter which is configured to respect our ESLint rules.
+Manually formatting code can be tiresome so we use [BiomeJS](https://biomejs.dev/) and [PrettierJS](https://prettier.io/) (Prettier) to do the leg work for you. They are both an opinionated code formatter which is configured to respect our ESLint rules.
-It is configured to format your code when you commit it to git automatically. If using an IDE or Code Editor it is also recommended, if your IDE or editor supports it, to set it to “format on save”. The setting is often found in the user settings of your editor, and may require a Prettier plugin or extension.
+It is configured to format your code when you commit it to git automatically. If using an IDE or Code Editor it is also recommended, if your IDE or editor supports it, to set it to “format on save”. The setting is often found in the user settings of your editor, and may require a plugin or extension.
### Commit lint
diff --git a/jest.config.js b/jest.config.js
index fbaa4f09fa..e07b997a9d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,29 +1,29 @@
-const TestTheme = require('./.jest/globals/TestTheme');
+const TestTheme = require("./.jest/globals/TestTheme");
module.exports = {
globals: {
TestTheme,
},
- testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(js|jsx|ts|tsx)?$',
- testEnvironment: 'jsdom',
+ testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(js|jsx|ts|tsx)?$",
+ testEnvironment: "jsdom",
testPathIgnorePatterns: [
- '/packages/(?:.+?)/dist/',
- '/packages/(?:.+?)/.cache/',
- '/cypress/',
- '/apps/',
- '/packages/(?:.+?)/.next/',
- '/templates/(?:.+?)/.next/',
- '/packages/(?:.+?)/.netlify/',
+ "/packages/(?:.+?)/dist/",
+ "/packages/(?:.+?)/.cache/",
+ "/cypress/",
+ "/apps/",
+ "/packages/(?:.+?)/.next/",
+ "/templates/(?:.+?)/.next/",
+ "/packages/(?:.+?)/.netlify/",
],
- cacheDirectory: '.jest-cache',
- coverageDirectory: '.jest-coverage',
+ cacheDirectory: ".jest-cache",
+ coverageDirectory: ".jest-coverage",
coveragePathIgnorePatterns: [
- '/packages/(?:.+?)/dist/',
- '/packages/(?:.+?)/cjs/',
- '/packages/(?:.+?)/esm/',
- '/apps/',
+ "/packages/(?:.+?)/dist/",
+ "/packages/(?:.+?)/cjs/",
+ "/packages/(?:.+?)/esm/",
+ "/apps/",
],
- coverageReporters: ['html', 'text'],
+ coverageReporters: ["html", "text"],
coverageThreshold: {
global: {
branches: 100,
@@ -33,25 +33,25 @@ module.exports = {
},
},
moduleNameMapper: {
- '\\.css$': 'identity-obj-proxy',
+ "\\.css$": "identity-obj-proxy",
// monkey-patch introduced for @testing-library/user-event to improve asynchronous test readability
// taken from this github issue: https://github.com/testing-library/user-event/issues/938#issuecomment-1111976312
- '^@testing-library/user-event$': '/tools/test/act-user-event.ts',
- '^@testing-library/real-user-event$': require.resolve('@testing-library/user-event'),
+ "^@testing-library/user-event$": "/tools/test/act-user-event.ts",
+ "^@testing-library/real-user-event$": require.resolve("@testing-library/user-event"),
// monkey-patch to help with @testing-library/reat-hooks being deprecated
// the render hook method is being exported from @testing-library/react in later versions
- '^@testing-library/react$': '/tools/test/react-testing-library.ts',
- '^@testing-library/real-react$': require.resolve('@testing-library/react'),
+ "^@testing-library/react$": "/tools/test/react-testing-library.ts",
+ "^@testing-library/real-react$": require.resolve("@testing-library/react"),
// helper method to handle the changes in the react-dom api for react 18
- '^testing-tools/react-dom-create-root$': '/tools/test/react-dom-create-root.ts',
+ "^testing-tools/react-dom-create-root$": "/tools/test/react-dom-create-root.ts",
// jest can't find lerna for the codemod tests, so we need to tell it where to look
- '^lerna$': require.resolve('lerna'),
+ "^lerna$": require.resolve("lerna"),
},
- transformIgnorePatterns: ['node_modules/'],
+ transformIgnorePatterns: ["node_modules/"],
transform: {
- '^.+\\.(js|jsx|ts|tsx)?$': '@swc/jest',
+ "^.+\\.(js|jsx|ts|tsx)?$": "@swc/jest",
},
- extensionsToTreatAsEsm: ['.ts', '.tsx'],
- setupFilesAfterEnv: ['/.jest/setupFilesAfterEnv.js'],
- snapshotSerializers: ['@emotion/jest/serializer'],
+ extensionsToTreatAsEsm: [".ts", ".tsx"],
+ setupFilesAfterEnv: ["/.jest/setupFilesAfterEnv.js"],
+ snapshotSerializers: ["@emotion/jest/serializer"],
};
diff --git a/package.json b/package.json
index cf3ba30b3d..4ef0dc4ca8 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,7 @@
"author": "Twilio Inc.",
"license": "MIT",
"workspaces": {
- "packages": [
- "apps/**/*",
- "packages/**/*",
- "templates/**/*",
- "!packages/paste-core/core-bundle/**/*"
- ]
+ "packages": ["apps/**/*", "packages/**/*", "templates/**/*", "!packages/paste-core/core-bundle/**/*"]
},
"types": "./types/index.d.ts",
"engines": {
@@ -43,7 +38,7 @@
"build:theme-designer": "yarn nx run @twilio-paste/theme-designer:build",
"build:nextjs-template": "yarn nx run @twilio-paste/nextjs-template:build",
"build:contrast-checking": "yarn nx run @twilio-paste/token-contrast-checker:build",
- "pre-push": "concurrently \"yarn:lint\" \"yarn:test\" \"yarn:prettier\" \"yarn:type-check\"",
+ "pre-push": "concurrently \"yarn:lint\" \"yarn:test\" \"yarn:format\" \"yarn:type-check\"",
"prerelease": "yarn build && yarn lint && yarn test",
"release": "yarn changeset publish",
"release:next": "yarn lerna publish -m 'chore(release): pre release' --conventional-commits --canary --preid beta --dist-tag next",
@@ -63,8 +58,6 @@
"start:test:storybook": "start-server-and-test 'NODE_ENV=test yarn start:storybook' http://localhost:9001 'yarn test:storybook'",
"serve:website": "yarn workspace @twilio-paste/website start",
"package-size-action-build": "yarn build",
- "prettier": "prettier --list-different '{.storybook,packages,templates}/**/*.{ts,tsx}'",
- "prettier-clean": "prettier --write '{.storybook,packages,templates}/**/*.{ts,tsx}'",
"lint": "yarn pre-test && yarn lint:repo && yarn lint:core && yarn lint:website && yarn lint:remix && yarn lint:contrast-checker && yarn lint:nextjs-template && yarn lint:vscode-intellisense",
"lint:core": "eslint -c .eslintrc.core.js --ext .tsx,.ts ./packages/{paste-color-contrast-utils,paste-core,paste-customization,paste-design-tokens,paste-icons,paste-libraries,paste-style-props,paste-theme,paste-types,paste-utils}/**/src",
"lint:website": "eslint -c ./packages/paste-website/.eslintrc --ext .tsx,.ts ./packages/paste-website",
@@ -73,6 +66,9 @@
"lint:nextjs-template": "eslint -c ./templates/paste-nextjs-template/.eslintrc.json --ext .tsx,.ts ./templates/paste-nextjs-template",
"lint:vscode-intellisense": "eslint -c ./apps/vs-code-intellisense/.eslintrc.json --ext .tsx,.ts ./apps/vs-code-intellisense",
"lint:repo": "eslint -c .eslintrc.repo.js --ext .tsx,.ts .",
+ "format": "biome format ./ && prettier --list-different ./packages/",
+ "format:write": "biome format ./ --write",
+ "format:ci": "biome ci ./ --linter-enabled=false && prettier --list-different ./packages/",
"type-check": "yarn prebuild && yarn nx run-many --target=tsc",
"tsc": "echo 'Did you mean to run yarn type-check?'",
"chromatic": "chromatic",
@@ -94,6 +90,7 @@
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.4",
"@babel/types": "^7.21.4",
+ "@biomejs/biome": "1.2.2",
"@changesets/changelog-github": "^0.2.8",
"@changesets/cli": "^2.13.1",
"@commitlint/cli": "16.2.1",
@@ -224,9 +221,5 @@
}
},
"packageManager": "yarn@3.6.3",
- "browserslist": [
- "last 2 versions",
- "not dead",
- "not IE 11"
- ]
+ "browserslist": ["last 2 versions", "not dead", "not IE 11"]
}
diff --git a/packages/paste-codemods/tools/__tests__/tools.spec.ts b/packages/paste-codemods/tools/__tests__/tools.spec.ts
index 9d5e69ac79..03fdfc98d7 100644
--- a/packages/paste-codemods/tools/__tests__/tools.spec.ts
+++ b/packages/paste-codemods/tools/__tests__/tools.spec.ts
@@ -1,51 +1,51 @@
-import type {PackageShape} from '../../../../tools/utils/getRepoPackages';
-import {generatePackageExportsMap} from '../generatePackageExportsMap';
+import type { PackageShape } from "../../../../tools/utils/getRepoPackages";
+import { generatePackageExportsMap } from "../generatePackageExportsMap";
// This is a simplified mock of paste packages
const mockGetPastePackages = async (): Promise => [
{
- name: '@twilio-paste/stack',
- version: '0.1.49',
+ name: "@twilio-paste/stack",
+ version: "0.1.49",
private: false,
- location: '/Users/sisber/twilio/dsys/paste/packages/paste-core/layout/stack',
+ location: "/Users/sisber/twilio/dsys/paste/packages/paste-core/layout/stack",
},
{
- name: '@twilio-paste/box',
- version: '2.11.6',
+ name: "@twilio-paste/box",
+ version: "2.11.6",
private: false,
- location: '/Users/sisber/twilio/dsys/paste/packages/paste-core/primitives/box',
+ location: "/Users/sisber/twilio/dsys/paste/packages/paste-core/primitives/box",
},
{
- name: '@twilio-paste/combobox-primitive',
- version: '0.1.9',
+ name: "@twilio-paste/combobox-primitive",
+ version: "0.1.9",
private: false,
- location: '/Users/sisber/twilio/dsys/paste/packages/paste-core/primitives/combobox',
+ location: "/Users/sisber/twilio/dsys/paste/packages/paste-core/primitives/combobox",
},
{
- name: '@twilio-paste/disclosure-primitive',
- version: '0.2.6',
+ name: "@twilio-paste/disclosure-primitive",
+ version: "0.2.6",
private: false,
- location: '/Users/sisber/twilio/dsys/paste/packages/paste-core/primitives/disclosure',
+ location: "/Users/sisber/twilio/dsys/paste/packages/paste-core/primitives/disclosure",
},
];
-describe('generatePackageExportsMap', () => {
- it('Creates mapping file successfully from mock', async () => {
+describe("generatePackageExportsMap", () => {
+ it("Creates mapping file successfully from mock", async () => {
const mockMapping = await generatePackageExportsMap(mockGetPastePackages);
expect(mockMapping).toEqual({
- BOX_PROPS_TO_BLOCK: '@twilio-paste/core/box',
- Box: '@twilio-paste/core/box',
- ComboboxPrimitive: '@twilio-paste/core/combobox-primitive',
- DisclosurePrimitive: '@twilio-paste/core/disclosure-primitive',
- DisclosurePrimitiveContent: '@twilio-paste/core/disclosure-primitive',
- Stack: '@twilio-paste/core/stack',
- StyledBox: '@twilio-paste/core/box',
- getCustomElementStyles: '@twilio-paste/core/box',
- safelySpreadBoxProps: '@twilio-paste/core/box',
- useComboboxPrimitive: '@twilio-paste/core/combobox-primitive',
- useDisclosurePrimitiveState: '@twilio-paste/core/disclosure-primitive',
- useMultiSelectPrimitive: '@twilio-paste/core/combobox-primitive',
+ BOX_PROPS_TO_BLOCK: "@twilio-paste/core/box",
+ Box: "@twilio-paste/core/box",
+ ComboboxPrimitive: "@twilio-paste/core/combobox-primitive",
+ DisclosurePrimitive: "@twilio-paste/core/disclosure-primitive",
+ DisclosurePrimitiveContent: "@twilio-paste/core/disclosure-primitive",
+ Stack: "@twilio-paste/core/stack",
+ StyledBox: "@twilio-paste/core/box",
+ getCustomElementStyles: "@twilio-paste/core/box",
+ safelySpreadBoxProps: "@twilio-paste/core/box",
+ useComboboxPrimitive: "@twilio-paste/core/combobox-primitive",
+ useDisclosurePrimitiveState: "@twilio-paste/core/disclosure-primitive",
+ useMultiSelectPrimitive: "@twilio-paste/core/combobox-primitive",
});
});
diff --git a/packages/paste-codemods/tools/create-package-mappings.ts b/packages/paste-codemods/tools/create-package-mappings.ts
index b71f1669b2..181bd62829 100644
--- a/packages/paste-codemods/tools/create-package-mappings.ts
+++ b/packages/paste-codemods/tools/create-package-mappings.ts
@@ -1,15 +1,15 @@
-import path from 'path';
+import path from "path";
-import {writeToFile} from '../../../tools/utils/writeToFile';
-import {generatePackageExportsMap} from './generatePackageExportsMap';
+import { writeToFile } from "../../../tools/utils/writeToFile";
+import { generatePackageExportsMap } from "./generatePackageExportsMap";
(async () => {
const mapping = await generatePackageExportsMap();
// Write to disk
- writeToFile(path.join(__dirname, '.cache/mappings.json'), mapping, {
- successMessage: 'Wrote core packages export mapping to .cache/mappings.json file!',
- errorMessage: 'Could not generate mappings!',
+ writeToFile(path.join(__dirname, ".cache/mappings.json"), mapping, {
+ successMessage: "Wrote core packages export mapping to .cache/mappings.json file!",
+ errorMessage: "Could not generate mappings!",
formatJson: true,
});
})();
diff --git a/packages/paste-codemods/tools/generatePackageExportsMap.ts b/packages/paste-codemods/tools/generatePackageExportsMap.ts
index 199bf52541..a8aaed0817 100644
--- a/packages/paste-codemods/tools/generatePackageExportsMap.ts
+++ b/packages/paste-codemods/tools/generatePackageExportsMap.ts
@@ -1,4 +1,4 @@
-import {getRepoPackages} from '../../../tools/utils/getRepoPackages';
+import { getRepoPackages } from "../../../tools/utils/getRepoPackages";
export async function generatePackageExportsMap(getPackages = getRepoPackages): Promise> {
// Object to store all the generated mappings for our codemod
@@ -11,13 +11,13 @@ export async function generatePackageExportsMap(getPackages = getRepoPackages):
const filteredPastePackages = allPastePackages?.filter((pkg) => {
if (pkg.private) return false;
// Only include Paste core packages (except core-bundle!)
- if (!pkg.location.includes('/paste-core/') || pkg.location.includes('/paste-core/core-bundle')) return false;
+ if (!pkg.location.includes("/paste-core/") || pkg.location.includes("/paste-core/core-bundle")) return false;
return true;
});
- filteredPastePackages?.forEach(({name}) => {
+ filteredPastePackages?.forEach(({ name }) => {
// convert package name to core name
- const corePackageName = `@twilio-paste/core/${name.split('/')[1]}`;
+ const corePackageName = `@twilio-paste/core/${name.split("/")[1]}`;
// Get the package's exported values to be mapped
let packageExports = {};
diff --git a/packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx b/packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx
index 1630383cd3..0beb0ce3fc 100644
--- a/packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx
+++ b/packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx
@@ -1,3 +1,3 @@
-const {defineTest} = require('jscodeshift/dist/testUtils');
+const { defineTest } = require("jscodeshift/dist/testUtils");
-defineTest(__dirname, 'barreled-to-unbarreled', null, 'barreled-to-unbarreled', {parser: 'ts'});
+defineTest(__dirname, "barreled-to-unbarreled", null, "barreled-to-unbarreled", { parser: "ts" });
diff --git a/packages/paste-codemods/transforms/barreled-to-unbarreled.js b/packages/paste-codemods/transforms/barreled-to-unbarreled.js
index 4f3fab0521..961bc6b195 100644
--- a/packages/paste-codemods/transforms/barreled-to-unbarreled.js
+++ b/packages/paste-codemods/transforms/barreled-to-unbarreled.js
@@ -1,8 +1,8 @@
-const ComponentLookup = require('../tools/.cache/mappings.json');
+const ComponentLookup = require("../tools/.cache/mappings.json");
module.exports = function barreledToUnbarreled(fileInfo, api, options) {
const j = api.jscodeshift;
- const printOptions = options.printOptions || {quote: 'single', tabWidth: 2, trailingComma: true};
+ const printOptions = options.printOptions || { quote: "single", tabWidth: 2, trailingComma: true };
const root = j(fileInfo.source);
const importLookups = {};
@@ -10,7 +10,7 @@ module.exports = function barreledToUnbarreled(fileInfo, api, options) {
const importSource = path.value.source.value;
// If it isn't exactly from the package (i.e.: core/esm or core/dist etc) then skip it.
- if (importSource !== '@twilio-paste/core') {
+ if (importSource !== "@twilio-paste/core") {
return;
}
diff --git a/packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts b/packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts
index 1b6e317896..32a5b37c84 100644
--- a/packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts
+++ b/packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts
@@ -1,209 +1,209 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore type declaration warning for these token fixtures
+import { tokens } from "../__fixtures__/tokens";
+import * as RawJSON from "../__fixtures__/tokens.raw.json";
+import * as RawExtraJSON from "../__fixtures__/tokensWithExtraPairings.raw.json";
import {
+ convertRawTokenJSONToArray,
getContrastRatingForTokenPairing,
+ getTokensWithDataVisualizationContrastRequirements,
getTokensWithTextContrastRequirements,
getTokensWithUIControlContrastRequirements,
- getTokensWithDataVisualizationContrastRequirements,
- convertRawTokenJSONToArray,
-} from '../src/utils';
-import * as RawJSON from '../__fixtures__/tokens.raw.json';
-import * as RawExtraJSON from '../__fixtures__/tokensWithExtraPairings.raw.json';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore type declaration warning for these token fixtures
-import {tokens} from '../__fixtures__/tokens';
+} from "../src/utils";
-describe('convertRawTokenJSONToArray', () => {
- test('it should convert raw JSON to an array of tokens', () => {
+describe("convertRawTokenJSONToArray", () => {
+ test("it should convert raw JSON to an array of tokens", () => {
expect(
convertRawTokenJSONToArray({
- 'color-text-weak': {
- type: 'color',
- category: 'text-color',
- value: '#aeb2c1',
- comment: 'Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.',
- originalValue: '{!palette-gray-40}',
- text_contrast_pairing: ['color-background-body'],
- name: 'color-text-weak',
+ "color-text-weak": {
+ type: "color",
+ category: "text-color",
+ value: "#aeb2c1",
+ comment: "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
+ originalValue: "{!palette-gray-40}",
+ text_contrast_pairing: ["color-background-body"],
+ name: "color-text-weak",
},
- 'color-text-link-destructive-light': {
- type: 'color',
- category: 'text-color',
- value: '#f6b1b1',
- comment: 'Light shade of destructive link text to be used in interactions',
- originalValue: '{!palette-red-30}',
- name: 'color-text-link-destructive-light',
+ "color-text-link-destructive-light": {
+ type: "color",
+ category: "text-color",
+ value: "#f6b1b1",
+ comment: "Light shade of destructive link text to be used in interactions",
+ originalValue: "{!palette-red-30}",
+ name: "color-text-link-destructive-light",
},
- })
+ }),
).toEqual([
{
- type: 'color',
- category: 'text-color',
- value: '#f6b1b1',
- comment: 'Light shade of destructive link text to be used in interactions',
- originalValue: '{!palette-red-30}',
- name: 'color-text-link-destructive-light',
+ type: "color",
+ category: "text-color",
+ value: "#f6b1b1",
+ comment: "Light shade of destructive link text to be used in interactions",
+ originalValue: "{!palette-red-30}",
+ name: "color-text-link-destructive-light",
},
{
- type: 'color',
- category: 'text-color',
- value: '#aeb2c1',
- comment: 'Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.',
- originalValue: '{!palette-gray-40}',
- text_contrast_pairing: ['color-background-body'],
- name: 'color-text-weak',
+ type: "color",
+ category: "text-color",
+ value: "#aeb2c1",
+ comment: "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.",
+ originalValue: "{!palette-gray-40}",
+ text_contrast_pairing: ["color-background-body"],
+ name: "color-text-weak",
},
]);
});
});
-describe('getTokensWithTextContrastRequirements', () => {
- test('it should only return tokens with text contrast requirements', () => {
+describe("getTokensWithTextContrastRequirements", () => {
+ test("it should only return tokens with text contrast requirements", () => {
expect(getTokensWithTextContrastRequirements(RawJSON.props)).toEqual([
{
- category: 'text-color',
- comment: 'Body text color',
- name: 'color-text',
- originalValue: '{!palette-gray-100}',
- text_contrast_pairing: ['color-text-inverse-weaker', 'color-text-inverse'],
- type: 'color',
- value: '#121c2d',
+ category: "text-color",
+ comment: "Body text color",
+ name: "color-text",
+ originalValue: "{!palette-gray-100}",
+ text_contrast_pairing: ["color-text-inverse-weaker", "color-text-inverse"],
+ type: "color",
+ value: "#121c2d",
},
{
- category: 'text-color',
- comment: 'Weak body text for visual hierarchy.',
- name: 'color-text-weak',
- originalValue: '{!palette-gray-60}',
- text_contrast_pairing: ['color-text-link-destructive-light'],
- type: 'color',
- value: '#606b85',
+ category: "text-color",
+ comment: "Weak body text for visual hierarchy.",
+ name: "color-text-weak",
+ originalValue: "{!palette-gray-60}",
+ text_contrast_pairing: ["color-text-link-destructive-light"],
+ type: "color",
+ value: "#606b85",
},
]);
});
});
-describe('getTokensWithUIControlContrastRequirements', () => {
- test('it should only return tokens with text contrast requirements', () => {
+describe("getTokensWithUIControlContrastRequirements", () => {
+ test("it should only return tokens with text contrast requirements", () => {
expect(getTokensWithUIControlContrastRequirements(RawJSON.props)).toEqual([
{
- category: 'text-color',
- comment: 'Twilio brand red, accessible on large text only.',
- name: 'color-text-brand-highlight',
- originalValue: '{!amaranth}',
- type: 'color',
- uicontrol_contrast_pairing: ['color-text-link-light'],
- value: '#F22F46',
+ category: "text-color",
+ comment: "Twilio brand red, accessible on large text only.",
+ name: "color-text-brand-highlight",
+ originalValue: "{!amaranth}",
+ type: "color",
+ uicontrol_contrast_pairing: ["color-text-link-light"],
+ value: "#F22F46",
},
]);
});
});
-describe('getTokensWithDataVisualizationContrastRequirements', () => {
- test('it should only return tokens with data visualization contrast requirements', () => {
+describe("getTokensWithDataVisualizationContrastRequirements", () => {
+ test("it should only return tokens with data visualization contrast requirements", () => {
expect(getTokensWithDataVisualizationContrastRequirements(RawExtraJSON.props)).toEqual([
{
- category: 'color',
- comment: 'Color used for data visualizations. Must be used in a sequence.',
- data_visualization_contrast_pairing: ['color-data-visualization-8', 'color-data-visualization-10'],
- name: 'color-data-visualization-9',
- originalValue: '{!palette-red-80}',
- type: 'color',
- uicontrol_contrast_pairing: ['color-background-body'],
- value: '#750c0c',
+ category: "color",
+ comment: "Color used for data visualizations. Must be used in a sequence.",
+ data_visualization_contrast_pairing: ["color-data-visualization-8", "color-data-visualization-10"],
+ name: "color-data-visualization-9",
+ originalValue: "{!palette-red-80}",
+ type: "color",
+ uicontrol_contrast_pairing: ["color-background-body"],
+ value: "#750c0c",
},
]);
});
});
-describe('getContrastRatingForTokenPairing', () => {
- test('it should get the contrast ratio rating for only text color contrast requirements', () => {
+describe("getContrastRatingForTokenPairing", () => {
+ test("it should get the contrast ratio rating for only text color contrast requirements", () => {
const filteredTextContrastTokens = getTokensWithTextContrastRequirements(RawJSON.props);
- expect(getContrastRatingForTokenPairing(filteredTextContrastTokens, tokens, 'text_contrast_pairing')).toEqual([
+ expect(getContrastRatingForTokenPairing(filteredTextContrastTokens, tokens, "text_contrast_pairing")).toEqual([
{
aa: false,
aaLarge: true,
aaa: false,
aaaLarge: false,
- background: 'color-text-inverse-weaker',
- backgroundValue: '#606b85',
+ background: "color-text-inverse-weaker",
+ backgroundValue: "#606b85",
contrast: 3.2032894523289137,
- foreground: 'color-text',
- foregroundValue: '#121c2d',
+ foreground: "color-text",
+ foregroundValue: "#121c2d",
},
{
aa: true,
aaLarge: true,
aaa: true,
aaaLarge: true,
- background: 'color-text-inverse',
- backgroundValue: '#ffffff',
+ background: "color-text-inverse",
+ backgroundValue: "#ffffff",
contrast: 17.077148214998438,
- foreground: 'color-text',
- foregroundValue: '#121c2d',
+ foreground: "color-text",
+ foregroundValue: "#121c2d",
},
{
aa: false,
aaLarge: true,
aaa: false,
aaaLarge: false,
- background: 'color-text-link-destructive-light',
- backgroundValue: '#f6b1b1',
+ background: "color-text-link-destructive-light",
+ backgroundValue: "#f6b1b1",
contrast: 3.006321755625877,
- foreground: 'color-text-weak',
- foregroundValue: '#606b85',
+ foreground: "color-text-weak",
+ foregroundValue: "#606b85",
},
]);
});
- test('it should filter out undefined values from the results when there is a pairing with a token not present in the theme', () => {
+ test("it should filter out undefined values from the results when there is a pairing with a token not present in the theme", () => {
const filteredTextContrastTokens = getTokensWithTextContrastRequirements(RawExtraJSON.props);
- expect(getContrastRatingForTokenPairing(filteredTextContrastTokens, tokens, 'text_contrast_pairing')).toEqual([
+ expect(getContrastRatingForTokenPairing(filteredTextContrastTokens, tokens, "text_contrast_pairing")).toEqual([
{
aa: false,
aaLarge: true,
aaa: false,
aaaLarge: false,
- background: 'color-text-inverse-weaker',
- backgroundValue: '#606b85',
+ background: "color-text-inverse-weaker",
+ backgroundValue: "#606b85",
contrast: 3.2032894523289137,
- foreground: 'color-text',
- foregroundValue: '#121c2d',
+ foreground: "color-text",
+ foregroundValue: "#121c2d",
},
{
aa: true,
aaLarge: true,
aaa: true,
aaaLarge: true,
- background: 'color-text-inverse',
- backgroundValue: '#ffffff',
+ background: "color-text-inverse",
+ backgroundValue: "#ffffff",
contrast: 17.077148214998438,
- foreground: 'color-text',
- foregroundValue: '#121c2d',
+ foreground: "color-text",
+ foregroundValue: "#121c2d",
},
{
aa: false,
aaLarge: true,
aaa: false,
aaaLarge: false,
- background: 'color-text-link-destructive-light',
- backgroundValue: '#f6b1b1',
+ background: "color-text-link-destructive-light",
+ backgroundValue: "#f6b1b1",
contrast: 3.006321755625877,
- foreground: 'color-text-weak',
- foregroundValue: '#606b85',
+ foreground: "color-text-weak",
+ foregroundValue: "#606b85",
},
]);
});
- test('it should get the contrast ratio rating for only ui control color contrast requirements', () => {
+ test("it should get the contrast ratio rating for only ui control color contrast requirements", () => {
const filteredUIControlContrastTokens = getTokensWithUIControlContrastRequirements(RawJSON.props);
expect(
- getContrastRatingForTokenPairing(filteredUIControlContrastTokens, tokens, 'uicontrol_contrast_pairing')
+ getContrastRatingForTokenPairing(filteredUIControlContrastTokens, tokens, "uicontrol_contrast_pairing"),
).toEqual([
{
aa: false,
aaLarge: false,
aaa: false,
aaaLarge: false,
- background: 'color-text-link-light',
- backgroundValue: '#99cdff',
+ background: "color-text-link-light",
+ backgroundValue: "#99cdff",
contrast: 2.3775737969258506,
- foreground: 'color-text-brand-highlight',
- foregroundValue: '#F22F46',
+ foreground: "color-text-brand-highlight",
+ foregroundValue: "#F22F46",
},
]);
});
diff --git a/packages/paste-color-contrast-utils/__tests__/themeContrast.spec.ts b/packages/paste-color-contrast-utils/__tests__/themeContrast.spec.ts
index 2e9bfbb078..b60e9a82d9 100644
--- a/packages/paste-color-contrast-utils/__tests__/themeContrast.spec.ts
+++ b/packages/paste-color-contrast-utils/__tests__/themeContrast.spec.ts
@@ -2,72 +2,72 @@ import {
backgroundColors,
borderColors,
borderWidths,
- radii,
+ boxShadows,
dataVisualization,
- fonts,
fontSizes,
fontWeights,
+ fonts,
lineHeights,
- boxShadows,
+ radii,
sizings,
spacings,
textColors,
zIndices,
-} from '@twilio-paste/design-tokens';
+} from "@twilio-paste/design-tokens";
import {
backgroundColors as darkBackgroundColors,
borderColors as darkBorderColors,
borderWidths as darkBorderWidths,
- radii as darkRadii,
+ boxShadows as darkBoxShadows,
dataVisualization as darkDataVisualization,
- fonts as darkFonts,
fontSizes as darkFontSizes,
fontWeights as darkFontWeights,
+ fonts as darkFonts,
lineHeights as darkLineHeights,
- boxShadows as darkBoxShadows,
+ radii as darkRadii,
sizings as darkSizings,
spacings as darkSpacings,
textColors as darkTextColors,
zIndices as darkZIndices,
-} from '@twilio-paste/design-tokens/dist/themes/dark/tokens.common';
-import {
- backgroundColors as twilioBackgroundColors,
- borderColors as twilioBorderColors,
- borderWidths as twilioBorderWidths,
- radii as twilioRadii,
- dataVisualization as twilioDataVisualization,
- fonts as twilioFonts,
- fontSizes as twilioFontSizes,
- fontWeights as twilioFontWeights,
- lineHeights as twilioLineHeights,
- boxShadows as twilioBoxShadows,
- sizings as twilioSizings,
- spacings as twilioSpacings,
- textColors as twilioTextColors,
- zIndices as twilioZIndices,
-} from '@twilio-paste/design-tokens/dist/themes/twilio/tokens.common';
+} from "@twilio-paste/design-tokens/dist/themes/dark/tokens.common";
import {
backgroundColors as twilioDarkBackgroundColors,
borderColors as twilioDarkBorderColors,
borderWidths as twilioDarkBorderWidths,
- radii as twilioDarkRadii,
+ boxShadows as twilioDarkBoxShadows,
dataVisualization as twilioDarkDataVisualization,
- fonts as twilioDarkFonts,
fontSizes as twilioDarkFontSizes,
fontWeights as twilioDarkFontWeights,
+ fonts as twilioDarkFonts,
lineHeights as twilioDarkLineHeights,
- boxShadows as twilioDarkBoxShadows,
+ radii as twilioDarkRadii,
sizings as twilioDarkSizings,
spacings as twilioDarkSpacings,
textColors as twilioDarkTextColors,
zIndices as twilioDarkZIndices,
-} from '@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.common';
+} from "@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.common";
+import {
+ backgroundColors as twilioBackgroundColors,
+ borderColors as twilioBorderColors,
+ borderWidths as twilioBorderWidths,
+ boxShadows as twilioBoxShadows,
+ dataVisualization as twilioDataVisualization,
+ fontSizes as twilioFontSizes,
+ fontWeights as twilioFontWeights,
+ fonts as twilioFonts,
+ lineHeights as twilioLineHeights,
+ radii as twilioRadii,
+ sizings as twilioSizings,
+ spacings as twilioSpacings,
+ textColors as twilioTextColors,
+ zIndices as twilioZIndices,
+} from "@twilio-paste/design-tokens/dist/themes/twilio/tokens.common";
import {
+ getContrastRatingsOfTokensWithDataVisualizationContrastRequirements,
getContrastRatingsOfTokensWithTextContrastRequirements,
getContrastRatingsOfTokensWithUIControlContrastRequirements,
- getContrastRatingsOfTokensWithDataVisualizationContrastRequirements,
-} from '../src/utils';
+} from "../src/utils";
const defaultThemeTextColorContrastRatings = getContrastRatingsOfTokensWithTextContrastRequirements({
backgroundColors,
@@ -267,73 +267,73 @@ const twilioDarkThemeDataVisualizationColorContrastRatings =
zIndices: twilioDarkZIndices,
});
-describe('Default Theme', () => {
- describe('Text color contrast ratio for token pairs', () => {
- test.each(defaultThemeTextColorContrastRatings)('ratio check for %p', (rating) => {
+describe("Default Theme", () => {
+ describe("Text color contrast ratio for token pairs", () => {
+ test.each(defaultThemeTextColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(4.5);
});
});
- describe('UI Control color contrast ratio for token pairs', () => {
- test.each(defaultThemeUiControlColorContrastRatings)('ratio check for %p', (rating) => {
+ describe("UI Control color contrast ratio for token pairs", () => {
+ test.each(defaultThemeUiControlColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(3);
});
});
- describe('Data visualization color contrast ratio for token pairs', () => {
- test.each(defaultThemeDataVisualizationColorContrastRatings)('ratio check for %p', (rating) => {
+ describe("Data visualization color contrast ratio for token pairs", () => {
+ test.each(defaultThemeDataVisualizationColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(2.25);
});
});
});
-describe('Dark Theme', () => {
- describe('Text color contrast ratio for token pairs', () => {
- test.each(darkThemeTextColorContrastRatings)('ratio check for %p', (rating) => {
+describe("Dark Theme", () => {
+ describe("Text color contrast ratio for token pairs", () => {
+ test.each(darkThemeTextColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(4.5);
});
});
- describe('UI Control color contrast ratio for token pairs', () => {
- test.each(darkThemeUiControlColorContrastRatings)('ratio check for %p', (rating) => {
+ describe("UI Control color contrast ratio for token pairs", () => {
+ test.each(darkThemeUiControlColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(3);
});
});
- describe('Data visualization color contrast ratio for token pairs', () => {
- test.each(darkThemeDataVisualizationColorContrastRatings)('ratio check for %p', (rating) => {
+ describe("Data visualization color contrast ratio for token pairs", () => {
+ test.each(darkThemeDataVisualizationColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(2);
});
});
});
-describe('Twilio Theme', () => {
- describe('Text color contrast ratio for token pairs', () => {
- test.each(twilioThemeTextColorContrastRatings)('ratio check for %p', (rating) => {
+describe("Twilio Theme", () => {
+ describe("Text color contrast ratio for token pairs", () => {
+ test.each(twilioThemeTextColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(4.5);
});
});
- describe('UI Control color contrast ratio for token pairs', () => {
- test.each(twilioThemeUiControlColorContrastRatings)('ratio check for %p', (rating) => {
+ describe("UI Control color contrast ratio for token pairs", () => {
+ test.each(twilioThemeUiControlColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(3);
});
});
- describe('Data visualization color contrast ratio for token pairs', () => {
- test.each(twilioThemeDataVisualizationColorContrastRatings)('ratio check for %p', (rating) => {
+ describe("Data visualization color contrast ratio for token pairs", () => {
+ test.each(twilioThemeDataVisualizationColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(2);
});
});
});
-describe('Twilio Dark Theme', () => {
- describe('Text color contrast ratio for token pairs', () => {
- test.each(twilioDarkThemeTextColorContrastRatings)('ratio check for %p', (rating) => {
+describe("Twilio Dark Theme", () => {
+ describe("Text color contrast ratio for token pairs", () => {
+ test.each(twilioDarkThemeTextColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(4.5);
});
});
- describe('UI Control color contrast ratio for token pairs', () => {
- test.each(twilioDarkThemeUiControlColorContrastRatings)('ratio check for %p', (rating) => {
+ describe("UI Control color contrast ratio for token pairs", () => {
+ test.each(twilioDarkThemeUiControlColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(3);
});
});
- describe('Data visualization color contrast ratio for token pairs', () => {
- test.each(twilioDarkThemeDataVisualizationColorContrastRatings)('ratio check for %p', (rating) => {
+ describe("Data visualization color contrast ratio for token pairs", () => {
+ test.each(twilioDarkThemeDataVisualizationColorContrastRatings)("ratio check for %p", (rating) => {
expect(rating.contrast).toBeGreaterThanOrEqual(2);
});
});
diff --git a/packages/paste-color-contrast-utils/build.js b/packages/paste-color-contrast-utils/build.js
index 709e55862a..9ed632b018 100644
--- a/packages/paste-color-contrast-utils/build.js
+++ b/packages/paste-color-contrast-utils/build.js
@@ -1,3 +1,3 @@
-const {build} = require('../../tools/build/esbuild');
+const { build } = require("../../tools/build/esbuild");
-build(require('./package.json'));
+build(require("./package.json"));
diff --git a/packages/paste-color-contrast-utils/src/index.ts b/packages/paste-color-contrast-utils/src/index.ts
index 04bca77e0d..178cd64f81 100644
--- a/packages/paste-color-contrast-utils/src/index.ts
+++ b/packages/paste-color-contrast-utils/src/index.ts
@@ -1 +1 @@
-export * from './utils';
+export * from "./utils";
diff --git a/packages/paste-color-contrast-utils/src/utils.ts b/packages/paste-color-contrast-utils/src/utils.ts
index 5c9c1e4aa4..6ab5361409 100644
--- a/packages/paste-color-contrast-utils/src/utils.ts
+++ b/packages/paste-color-contrast-utils/src/utils.ts
@@ -1,9 +1,9 @@
-import ColorCombos from 'color-combos';
-import type {ColorCombo} from 'color-combos';
-import type {GenericTokensShape, AllGenericTokens} from '@twilio-paste/design-tokens/types/GenericTokensShape';
-import type {DesignToken, DesignTokensJSON, TokenPairContrastRating} from '@twilio-paste/design-tokens/types';
-import DefaultRawTokenJSON from '@twilio-paste/design-tokens/dist/tokens.raw.json';
-import camelCase from 'lodash/camelCase';
+import DefaultRawTokenJSON from "@twilio-paste/design-tokens/dist/tokens.raw.json";
+import type { DesignToken, DesignTokensJSON, TokenPairContrastRating } from "@twilio-paste/design-tokens/types";
+import type { AllGenericTokens, GenericTokensShape } from "@twilio-paste/design-tokens/types/GenericTokensShape";
+import ColorCombos from "color-combos";
+import type { ColorCombo } from "color-combos";
+import camelCase from "lodash/camelCase";
/**
* Filter out any ratings that are not at least aa for text color contrast requirements
@@ -38,7 +38,7 @@ export const getNumberOfUIControlFailures = (ratings: TokenPairContrastRating[])
export const flattenCategorizedTokens = (tokens: Partial): AllGenericTokens => {
let flatTheme = {};
Object.values(tokens).forEach((value) => {
- flatTheme = {...flatTheme, ...value};
+ flatTheme = { ...flatTheme, ...value };
});
return flatTheme;
};
@@ -70,7 +70,7 @@ export const convertRawTokenJSONToArray = (rawTokens: DesignTokensJSON): DesignT
export const getTokensWithTextContrastRequirements = (rawTokens: DesignTokensJSON): DesignToken[] =>
convertRawTokenJSONToArray(rawTokens)
// filter by type and contrast pairing type
- .filter((token) => token.type === 'color' && token.text_contrast_pairing != null);
+ .filter((token) => token.type === "color" && token.text_contrast_pairing != null);
/**
* get all color tokens that have ui control contrast requirements
@@ -81,7 +81,7 @@ export const getTokensWithTextContrastRequirements = (rawTokens: DesignTokensJSO
export const getTokensWithUIControlContrastRequirements = (rawTokens: DesignTokensJSON): DesignToken[] =>
convertRawTokenJSONToArray(rawTokens)
// filter by type and contrast pairing type
- .filter((token) => token.type === 'color' && token.uicontrol_contrast_pairing != null);
+ .filter((token) => token.type === "color" && token.uicontrol_contrast_pairing != null);
/**
* get all color tokens that have ui control contrast requirements
@@ -92,7 +92,7 @@ export const getTokensWithUIControlContrastRequirements = (rawTokens: DesignToke
export const getTokensWithDataVisualizationContrastRequirements = (rawTokens: DesignTokensJSON): DesignToken[] =>
convertRawTokenJSONToArray(rawTokens)
// filter by type and contrast pairing type
- .filter((token) => token.type === 'color' && token.data_visualization_contrast_pairing != null);
+ .filter((token) => token.type === "color" && token.data_visualization_contrast_pairing != null);
/**
* build an array of contrast results for each token pairing
@@ -105,7 +105,7 @@ export const getTokensWithDataVisualizationContrastRequirements = (rawTokens: De
export const getContrastRatingForTokenPairing = (
filteredTokens: DesignToken[],
tokens: AllGenericTokens,
- pairingKey: 'text_contrast_pairing' | 'uicontrol_contrast_pairing' | 'data_visualization_contrast_pairing'
+ pairingKey: "text_contrast_pairing" | "uicontrol_contrast_pairing" | "data_visualization_contrast_pairing",
): TokenPairContrastRating[] => {
return filteredTokens.reduce((tokenRatings: TokenPairContrastRating[], token: DesignToken) => {
/** array of tokens that are paired with this token for the type of contrast checking we're doing */
@@ -124,7 +124,7 @@ export const getContrastRatingForTokenPairing = (
/** value of the token we're comparing to based on finding it by it's name in the full token list */
const tokenToCompareValue = tokens[tokenToCompareName];
/** accessibility rating as per ColorCombos */
- let comboRating = {aa: false, aaLarge: false, aaa: false, aaaLarge: false};
+ let comboRating = { aa: false, aaLarge: false, aaa: false, aaaLarge: false };
/** color contrast ratio of the two colors */
let comboContrast = 0;
/** color combinations of the two colors */
@@ -174,13 +174,13 @@ export const getContrastRatingForTokenPairing = (
* @return {*} {TokenPairContrastRating[]}
*/
export const getContrastRatingsOfTokensWithTextContrastRequirements = (
- tokens: Partial
+ tokens: Partial,
): TokenPairContrastRating[] => {
// always use the Default raw JSON to get the pairings as other themes won't inherit them automatically
const defaultThemeRawJSON = DefaultRawTokenJSON.props;
const tokenWithTextContrastRequirements = getTokensWithTextContrastRequirements(defaultThemeRawJSON);
const flattenedTokens = flattenCategorizedTokens(tokens);
- return getContrastRatingForTokenPairing(tokenWithTextContrastRequirements, flattenedTokens, 'text_contrast_pairing');
+ return getContrastRatingForTokenPairing(tokenWithTextContrastRequirements, flattenedTokens, "text_contrast_pairing");
};
/**
@@ -194,7 +194,7 @@ export const getContrastRatingsOfTokensWithTextContrastRequirements = (
* @return {*} {TokenPairContrastRating[]}
*/
export const getContrastRatingsOfTokensWithUIControlContrastRequirements = (
- tokens: Partial
+ tokens: Partial,
): TokenPairContrastRating[] => {
// always use the Default raw JSON to get the pairings as other themes won't inherit them automatically
const defaultThemeRawJSON = DefaultRawTokenJSON.props;
@@ -203,7 +203,7 @@ export const getContrastRatingsOfTokensWithUIControlContrastRequirements = (
return getContrastRatingForTokenPairing(
tokenWithUIControlContrastRequirements,
flattenedTokens,
- 'uicontrol_contrast_pairing'
+ "uicontrol_contrast_pairing",
);
};
@@ -218,7 +218,7 @@ export const getContrastRatingsOfTokensWithUIControlContrastRequirements = (
* @return {*} {TokenPairContrastRating[]}
*/
export const getContrastRatingsOfTokensWithDataVisualizationContrastRequirements = (
- tokens: Partial
+ tokens: Partial,
): TokenPairContrastRating[] => {
// always use the Default raw JSON to get the pairings as other themes won't inherit them automatically
const defaultThemeRawJSON = DefaultRawTokenJSON.props;
@@ -228,6 +228,6 @@ export const getContrastRatingsOfTokensWithDataVisualizationContrastRequirements
return getContrastRatingForTokenPairing(
tokenWithDataVisualizationContrastRequirements,
flattenedTokens,
- 'data_visualization_contrast_pairing'
+ "data_visualization_contrast_pairing",
);
};
diff --git a/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx b/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx
index 82080758c0..1a713117f3 100644
--- a/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx
+++ b/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx
@@ -1,72 +1,72 @@
-import * as React from 'react';
-import {render, screen, act} from '@testing-library/react';
+import { act, render, screen } from "@testing-library/react";
+import * as React from "react";
-import {AccountSwitcherMenu} from '../stories/AccountSwitcher.stories';
-import {CustomElementName, DefaultElementName} from '../stories/AccountSwitcher.customization.stories';
+import { CustomElementName, DefaultElementName } from "../stories/AccountSwitcher.customization.stories";
+import { AccountSwitcherMenu } from "../stories/AccountSwitcher.stories";
-describe('AccountSwitcher', () => {
- describe('element naming', () => {
- it('should set all default element names', async () => {
+describe("AccountSwitcher", () => {
+ describe("element naming", () => {
+ it("should set all default element names", async () => {
await act(async () => {
render();
});
- expect(screen.getByRole('button', {name: 'Switch accounts'}).dataset.pasteElement).toEqual(
- 'ACCOUNT_SWITCHER_BADGE_BUTTON'
+ expect(screen.getByRole("button", { name: "Switch accounts" }).dataset.pasteElement).toEqual(
+ "ACCOUNT_SWITCHER_BADGE_BUTTON",
);
- expect(screen.getByRole('menu').dataset.pasteElement).toEqual('ACCOUNT_SWITCHER');
- expect(screen.getByRole('menuitem', {name: 'Account settings'}).dataset.pasteElement).toEqual(
- 'ACCOUNT_SWITCHER_ITEM'
+ expect(screen.getByRole("menu").dataset.pasteElement).toEqual("ACCOUNT_SWITCHER");
+ expect(screen.getByRole("menuitem", { name: "Account settings" }).dataset.pasteElement).toEqual(
+ "ACCOUNT_SWITCHER_ITEM",
);
- expect(screen.getByRole('menuitemradio', {name: 'Owl Telehealth'}).dataset.pasteElement).toEqual(
- 'ACCOUNT_SWITCHER_ITEM_RADIO'
+ expect(screen.getByRole("menuitemradio", { name: "Owl Telehealth" }).dataset.pasteElement).toEqual(
+ "ACCOUNT_SWITCHER_ITEM_RADIO",
);
- expect(screen.getAllByRole('separator')[0].dataset.pasteElement).toEqual('ACCOUNT_SWITCHER_SEPARATOR');
+ expect(screen.getAllByRole("separator")[0].dataset.pasteElement).toEqual("ACCOUNT_SWITCHER_SEPARATOR");
});
});
- describe('element name overrides', () => {
- it('should set all custom element names', async () => {
+ describe("element name overrides", () => {
+ it("should set all custom element names", async () => {
await act(async () => {
render();
});
- expect(screen.getByRole('button', {name: 'Switch accounts'}).dataset.pasteElement).toEqual('FOO_BUTTON');
- expect(screen.getByRole('menu').dataset.pasteElement).toEqual('BAR');
- expect(screen.getByRole('menuitem', {name: 'Account settings'}).dataset.pasteElement).toEqual('BAZ');
- expect(screen.getByRole('menuitemradio', {name: 'Owl Telehealth'}).dataset.pasteElement).toEqual('BAZ_RADIO');
- expect(screen.getAllByRole('separator')[0].dataset.pasteElement).toEqual('LINE');
+ expect(screen.getByRole("button", { name: "Switch accounts" }).dataset.pasteElement).toEqual("FOO_BUTTON");
+ expect(screen.getByRole("menu").dataset.pasteElement).toEqual("BAR");
+ expect(screen.getByRole("menuitem", { name: "Account settings" }).dataset.pasteElement).toEqual("BAZ");
+ expect(screen.getByRole("menuitemradio", { name: "Owl Telehealth" }).dataset.pasteElement).toEqual("BAZ_RADIO");
+ expect(screen.getAllByRole("separator")[0].dataset.pasteElement).toEqual("LINE");
});
});
- describe('customization of styles', () => {
- it('should set all custom styles', async () => {
+ describe("customization of styles", () => {
+ it("should set all custom styles", async () => {
await act(async () => {
render();
});
- expect(screen.getByRole('button', {name: 'Switch accounts'})).toHaveStyleRule(
- 'background-color',
- 'rgb(214, 31, 31)'
+ expect(screen.getByRole("button", { name: "Switch accounts" })).toHaveStyleRule(
+ "background-color",
+ "rgb(214, 31, 31)",
);
- expect(screen.getByRole('menu')).toHaveStyleRule('border-color', 'rgb(117, 12, 12)');
- expect(screen.getByRole('menuitem', {name: 'Account settings'})).toHaveStyleRule(
- 'background-color',
- 'rgb(0, 20, 137)'
+ expect(screen.getByRole("menu")).toHaveStyleRule("border-color", "rgb(117, 12, 12)");
+ expect(screen.getByRole("menuitem", { name: "Account settings" })).toHaveStyleRule(
+ "background-color",
+ "rgb(0, 20, 137)",
);
- expect(screen.getByRole('menuitemradio', {name: 'Owl Telehealth'})).toHaveStyleRule('font-style', 'italic');
+ expect(screen.getByRole("menuitemradio", { name: "Owl Telehealth" })).toHaveStyleRule("font-style", "italic");
});
});
- describe('customization of styles with custom name', () => {
- it('should set all custom styles', async () => {
+ describe("customization of styles with custom name", () => {
+ it("should set all custom styles", async () => {
await act(async () => {
render();
});
- expect(screen.getByRole('button', {name: 'Switch accounts'})).toHaveStyleRule(
- 'background-color',
- 'rgb(214, 31, 31)'
+ expect(screen.getByRole("button", { name: "Switch accounts" })).toHaveStyleRule(
+ "background-color",
+ "rgb(214, 31, 31)",
);
- expect(screen.getByRole('menu')).toHaveStyleRule('border-color', 'rgb(117, 12, 12)');
- expect(screen.getByRole('menuitem', {name: 'Account settings'})).toHaveStyleRule(
- 'background-color',
- 'rgb(0, 20, 137)'
+ expect(screen.getByRole("menu")).toHaveStyleRule("border-color", "rgb(117, 12, 12)");
+ expect(screen.getByRole("menuitem", { name: "Account settings" })).toHaveStyleRule(
+ "background-color",
+ "rgb(0, 20, 137)",
);
- expect(screen.getByRole('menuitemradio', {name: 'Owl Telehealth'})).toHaveStyleRule('font-style', 'italic');
+ expect(screen.getByRole("menuitemradio", { name: "Owl Telehealth" })).toHaveStyleRule("font-style", "italic");
});
});
});
diff --git a/packages/paste-core/components/account-switcher/build.js b/packages/paste-core/components/account-switcher/build.js
index a4edeab49b..27dd98f98e 100644
--- a/packages/paste-core/components/account-switcher/build.js
+++ b/packages/paste-core/components/account-switcher/build.js
@@ -1,3 +1,3 @@
-const {build} = require('../../../../tools/build/esbuild');
+const { build } = require("../../../../tools/build/esbuild");
-build(require('./package.json'));
+build(require("./package.json"));
diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcher.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcher.tsx
index 528f55f126..3fc494113f 100644
--- a/packages/paste-core/components/account-switcher/src/AccountSwitcher.tsx
+++ b/packages/paste-core/components/account-switcher/src/AccountSwitcher.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {Menu} from '@twilio-paste/menu';
-import type {MenuProps} from '@twilio-paste/menu';
+import { Menu } from "@twilio-paste/menu";
+import type { MenuProps } from "@twilio-paste/menu";
+import * as React from "react";
export interface AccountSwitcherProps extends MenuProps {
children: NonNullable;
}
const AccountSwitcher = React.forwardRef(
- ({children, element = 'ACCOUNT_SWITCHER', ...props}, ref) => {
+ ({ children, element = "ACCOUNT_SWITCHER", ...props }, ref) => {
return (
);
- }
+ },
);
-AccountSwitcher.displayName = 'AccountSwitcher';
-export {AccountSwitcher};
+AccountSwitcher.displayName = "AccountSwitcher";
+export { AccountSwitcher };
diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcherBadge.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcherBadge.tsx
index 74146894cb..0e9b4260cb 100644
--- a/packages/paste-core/components/account-switcher/src/AccountSwitcherBadge.tsx
+++ b/packages/paste-core/components/account-switcher/src/AccountSwitcherBadge.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {MenuBadge} from '@twilio-paste/menu';
-import type {MenuBadgeProps} from '@twilio-paste/menu';
+import { MenuBadge } from "@twilio-paste/menu";
+import type { MenuBadgeProps } from "@twilio-paste/menu";
+import * as React from "react";
-export interface AccountSwitcherBadgeProps extends Omit {
+export interface AccountSwitcherBadgeProps extends Omit {
children: NonNullable;
}
const AccountSwitcherBadge = React.forwardRef(
- ({children, element = 'ACCOUNT_SWITCHER_BADGE', ...props}, ref) => {
+ ({ children, element = "ACCOUNT_SWITCHER_BADGE", ...props }, ref) => {
return (
{children}
);
- }
+ },
);
-AccountSwitcherBadge.displayName = 'AccountSwitcherBadge';
-export {AccountSwitcherBadge};
+AccountSwitcherBadge.displayName = "AccountSwitcherBadge";
+export { AccountSwitcherBadge };
diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcherGroup.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcherGroup.tsx
index 0968e35f84..82b3fa9709 100644
--- a/packages/paste-core/components/account-switcher/src/AccountSwitcherGroup.tsx
+++ b/packages/paste-core/components/account-switcher/src/AccountSwitcherGroup.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import {MenuGroup} from '@twilio-paste/menu';
-import type {MenuGroupProps} from '@twilio-paste/menu';
+import { MenuGroup } from "@twilio-paste/menu";
+import type { MenuGroupProps } from "@twilio-paste/menu";
+import * as React from "react";
export type AccountSwitcherGroupProps = MenuGroupProps;
const AccountSwitcherGroup = React.forwardRef(
- ({children, element = 'ACCOUNT_SWITCHER_GROUP', label, ...props}, ref) => {
+ ({ children, element = "ACCOUNT_SWITCHER_GROUP", label, ...props }, ref) => {
return (
{children}
);
- }
+ },
);
-AccountSwitcherGroup.displayName = 'AccountSwitcherGroup';
-export {AccountSwitcherGroup};
+AccountSwitcherGroup.displayName = "AccountSwitcherGroup";
+export { AccountSwitcherGroup };
diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcherItem.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcherItem.tsx
index 74ef0e7c00..85646cf2f7 100644
--- a/packages/paste-core/components/account-switcher/src/AccountSwitcherItem.tsx
+++ b/packages/paste-core/components/account-switcher/src/AccountSwitcherItem.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {MenuItem} from '@twilio-paste/menu';
-import type {MenuItemProps} from '@twilio-paste/menu';
+import { MenuItem } from "@twilio-paste/menu";
+import type { MenuItemProps } from "@twilio-paste/menu";
+import * as React from "react";
export interface AccountSwitcherItemProps extends MenuItemProps {
children: NonNullable;
}
const AccountSwitcherItem = React.forwardRef(
- ({children, element = 'ACCOUNT_SWITCHER_ITEM', ...props}, ref) => {
+ ({ children, element = "ACCOUNT_SWITCHER_ITEM", ...props }, ref) => {
return (
);
- }
+ },
);
-AccountSwitcherItem.displayName = 'AccountSwitcherItem';
-export {AccountSwitcherItem};
+AccountSwitcherItem.displayName = "AccountSwitcherItem";
+export { AccountSwitcherItem };
diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcherItemRadio.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcherItemRadio.tsx
index a749098725..7285134c40 100644
--- a/packages/paste-core/components/account-switcher/src/AccountSwitcherItemRadio.tsx
+++ b/packages/paste-core/components/account-switcher/src/AccountSwitcherItemRadio.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {MenuItemRadio} from '@twilio-paste/menu';
-import type {MenuItemRadioProps} from '@twilio-paste/menu';
+import { MenuItemRadio } from "@twilio-paste/menu";
+import type { MenuItemRadioProps } from "@twilio-paste/menu";
+import * as React from "react";
export interface AccountSwitcherItemRadioProps extends MenuItemRadioProps {
children: NonNullable;
}
const AccountSwitcherItemRadio = React.forwardRef(
- ({children, element = 'ACCOUNT_SWITCHER_ITEM_RADIO', ...props}, ref) => {
+ ({ children, element = "ACCOUNT_SWITCHER_ITEM_RADIO", ...props }, ref) => {
return (
{children}
);
- }
+ },
);
-AccountSwitcherItemRadio.displayName = 'AccountSwitcherItemRadio';
-export {AccountSwitcherItemRadio};
+AccountSwitcherItemRadio.displayName = "AccountSwitcherItemRadio";
+export { AccountSwitcherItemRadio };
diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcherSeparator.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcherSeparator.tsx
index 8259fa9cc1..f8fcdac4b5 100644
--- a/packages/paste-core/components/account-switcher/src/AccountSwitcherSeparator.tsx
+++ b/packages/paste-core/components/account-switcher/src/AccountSwitcherSeparator.tsx
@@ -1,19 +1,19 @@
-import * as React from 'react';
-import {MenuSeparator} from '@twilio-paste/menu';
-import type {MenuSeparatorProps} from '@twilio-paste/menu';
+import { MenuSeparator } from "@twilio-paste/menu";
+import type { MenuSeparatorProps } from "@twilio-paste/menu";
+import * as React from "react";
export type AccountSwitcherSeparatorProps = MenuSeparatorProps;
const AccountSwitcherSeparator = React.forwardRef(
- ({children, element = 'ACCOUNT_SWITCHER_SEPARATOR', ...props}, ref) => {
+ ({ children, element = "ACCOUNT_SWITCHER_SEPARATOR", ...props }, ref) => {
return (
{children}
);
- }
+ },
);
-AccountSwitcherSeparator.displayName = 'AccountSwitcherSeparator';
+AccountSwitcherSeparator.displayName = "AccountSwitcherSeparator";
-export {AccountSwitcherSeparator};
+export { AccountSwitcherSeparator };
diff --git a/packages/paste-core/components/account-switcher/src/index.tsx b/packages/paste-core/components/account-switcher/src/index.tsx
index 8ce48464b9..77094eda46 100644
--- a/packages/paste-core/components/account-switcher/src/index.tsx
+++ b/packages/paste-core/components/account-switcher/src/index.tsx
@@ -1,7 +1,7 @@
-export * from './AccountSwitcher';
-export * from './AccountSwitcherGroup';
-export * from './AccountSwitcherSeparator';
-export * from './AccountSwitcherItem';
-export * from './AccountSwitcherItemRadio';
-export * from './AccountSwitcherBadge';
-export * from './useAccountSwitcher';
+export * from "./AccountSwitcher";
+export * from "./AccountSwitcherGroup";
+export * from "./AccountSwitcherSeparator";
+export * from "./AccountSwitcherItem";
+export * from "./AccountSwitcherItemRadio";
+export * from "./AccountSwitcherBadge";
+export * from "./useAccountSwitcher";
diff --git a/packages/paste-core/components/account-switcher/src/useAccountSwitcher.ts b/packages/paste-core/components/account-switcher/src/useAccountSwitcher.ts
index dcdbd7c1bf..c9150eb6cc 100644
--- a/packages/paste-core/components/account-switcher/src/useAccountSwitcher.ts
+++ b/packages/paste-core/components/account-switcher/src/useAccountSwitcher.ts
@@ -1 +1 @@
-export {useMenuState as useAccountSwitcherState} from '@twilio-paste/menu';
+export { useMenuState as useAccountSwitcherState } from "@twilio-paste/menu";
diff --git a/packages/paste-core/components/account-switcher/stories/AccountSwitcher.customization.stories.tsx b/packages/paste-core/components/account-switcher/stories/AccountSwitcher.customization.stories.tsx
index f5c1975d04..aaf4279491 100644
--- a/packages/paste-core/components/account-switcher/stories/AccountSwitcher.customization.stories.tsx
+++ b/packages/paste-core/components/account-switcher/stories/AccountSwitcher.customization.stories.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import type {StoryFn} from '@storybook/react';
-import {CustomizationProvider} from '@twilio-paste/customization';
+import type { StoryFn } from "@storybook/react";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import * as React from "react";
import {
AccountSwitcher,
@@ -10,26 +10,26 @@ import {
AccountSwitcherItemRadio,
AccountSwitcherSeparator,
useAccountSwitcherState,
-} from '../src';
+} from "../src";
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/AccountSwitcher/Customization',
+ title: "Components/AccountSwitcher/Customization",
};
export const DefaultElementName: StoryFn = () => {
- const accountSwitcher = useAccountSwitcherState({visible: true});
- const [selectedAccount, setSelectedAccount] = React.useState('Owl Telehealth');
+ const accountSwitcher = useAccountSwitcherState({ visible: true });
+ const [selectedAccount, setSelectedAccount] = React.useState("Owl Telehealth");
return (
@@ -40,8 +40,8 @@ export const DefaultElementName: StoryFn = () => {
setSelectedAccount('Owl Telehealth')}
+ checked={selectedAccount === "Owl Telehealth"}
+ onChange={() => setSelectedAccount("Owl Telehealth")}
{...accountSwitcher}
>
Owl Telehealth
@@ -49,8 +49,8 @@ export const DefaultElementName: StoryFn = () => {
setSelectedAccount('Owl Health Demo')}
+ checked={selectedAccount === "Owl Health Demo"}
+ onChange={() => setSelectedAccount("Owl Health Demo")}
{...accountSwitcher}
>
Owl Health Demo
@@ -58,8 +58,8 @@ export const DefaultElementName: StoryFn = () => {
setSelectedAccount('Owl Subway')}
+ checked={selectedAccount === "Owl Subway"}
+ onChange={() => setSelectedAccount("Owl Subway")}
{...accountSwitcher}
>
Owl Subway
@@ -86,18 +86,18 @@ export const DefaultElementName: StoryFn = () => {
};
export const CustomElementName: StoryFn = () => {
- const accountSwitcher = useAccountSwitcherState({visible: true});
- const [selectedAccount, setSelectedAccount] = React.useState('Owl Telehealth');
+ const accountSwitcher = useAccountSwitcherState({ visible: true });
+ const [selectedAccount, setSelectedAccount] = React.useState("Owl Telehealth");
return (
@@ -109,8 +109,8 @@ export const CustomElementName: StoryFn = () => {
element="BAZ_RADIO"
name="recent_accounts"
value="Owl Telehealth"
- checked={selectedAccount === 'Owl Telehealth'}
- onChange={() => setSelectedAccount('Owl Telehealth')}
+ checked={selectedAccount === "Owl Telehealth"}
+ onChange={() => setSelectedAccount("Owl Telehealth")}
{...accountSwitcher}
>
Owl Telehealth
@@ -119,8 +119,8 @@ export const CustomElementName: StoryFn = () => {
element="BAZ_RADIO"
name="recent_accounts"
value="Owl Health Demo"
- checked={selectedAccount === 'Owl Health Demo'}
- onChange={() => setSelectedAccount('Owl Health Demo')}
+ checked={selectedAccount === "Owl Health Demo"}
+ onChange={() => setSelectedAccount("Owl Health Demo")}
{...accountSwitcher}
>
Owl Health Demo
@@ -129,8 +129,8 @@ export const CustomElementName: StoryFn = () => {
element="BAZ_RADIO"
name="recent_accounts"
value="Owl Subway"
- checked={selectedAccount === 'Owl Subway'}
- onChange={() => setSelectedAccount('Owl Subway')}
+ checked={selectedAccount === "Owl Subway"}
+ onChange={() => setSelectedAccount("Owl Subway")}
{...accountSwitcher}
>
Owl Subway
diff --git a/packages/paste-core/components/account-switcher/stories/AccountSwitcher.stories.tsx b/packages/paste-core/components/account-switcher/stories/AccountSwitcher.stories.tsx
index 104d033bb6..4c220d97a7 100644
--- a/packages/paste-core/components/account-switcher/stories/AccountSwitcher.stories.tsx
+++ b/packages/paste-core/components/account-switcher/stories/AccountSwitcher.stories.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import type {StoryFn} from '@storybook/react';
+import type { StoryFn } from "@storybook/react";
+import * as React from "react";
import {
AccountSwitcher,
@@ -9,16 +9,16 @@ import {
AccountSwitcherItemRadio,
AccountSwitcherSeparator,
useAccountSwitcherState,
-} from '../src';
+} from "../src";
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/AccountSwitcher',
+ title: "Components/AccountSwitcher",
};
export const AccountSwitcherMenu: StoryFn = () => {
- const accountSwitcher = useAccountSwitcherState({visible: true});
- const [selectedAccount, setSelectedAccount] = React.useState('Owl Telehealth');
+ const accountSwitcher = useAccountSwitcherState({ visible: true });
+ const [selectedAccount, setSelectedAccount] = React.useState("Owl Telehealth");
return (
<>
@@ -29,8 +29,8 @@ export const AccountSwitcherMenu: StoryFn = () => {
setSelectedAccount('Owl Telehealth')}
+ checked={selectedAccount === "Owl Telehealth"}
+ onChange={() => setSelectedAccount("Owl Telehealth")}
{...accountSwitcher}
>
Owl Telehealth
@@ -38,8 +38,8 @@ export const AccountSwitcherMenu: StoryFn = () => {
setSelectedAccount('Owl Health Demo')}
+ checked={selectedAccount === "Owl Health Demo"}
+ onChange={() => setSelectedAccount("Owl Health Demo")}
{...accountSwitcher}
>
Owl Health Demo
@@ -47,8 +47,8 @@ export const AccountSwitcherMenu: StoryFn = () => {
setSelectedAccount('Owl Subway')}
+ checked={selectedAccount === "Owl Subway"}
+ onChange={() => setSelectedAccount("Owl Subway")}
{...accountSwitcher}
>
Owl Subway
diff --git a/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx b/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx
index ffa8a10741..ea368ae21a 100644
--- a/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx
+++ b/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {render, screen} from '@testing-library/react';
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
-import {CustomizedAlertDialog, CustomizedDestructiveAlertDialog} from '../stories/index.stories';
+import { CustomizedAlertDialog, CustomizedDestructiveAlertDialog } from "../stories/index.stories";
-jest.mock('@twilio-paste/modal-dialog-primitive', () => {
- const actual = jest.requireActual('@twilio-paste/modal-dialog-primitive');
- const {forwardRef: mockForwardRef} = jest.requireActual('react');
+jest.mock("@twilio-paste/modal-dialog-primitive", () => {
+ const actual = jest.requireActual("@twilio-paste/modal-dialog-primitive");
+ const { forwardRef: mockForwardRef } = jest.requireActual("react");
const MockModalDialogPrimitiveOverlay = mockForwardRef(
(
{
children,
- 'data-paste-element': dataPasteElement,
+ "data-paste-element": dataPasteElement,
style,
className,
- }: {children: any; 'data-paste-element': string; style: any; className: string},
- ref: any
+ }: { children: any; "data-paste-element": string; style: any; className: string },
+ ref: any,
) => (
{
>
{children}
- )
+ ),
);
return {
...actual,
@@ -33,62 +33,62 @@ jest.mock('@twilio-paste/modal-dialog-primitive', () => {
};
});
-describe('Alert Dialog `element` prop', () => {
- it('should set the default element prop on Alert Dialog', () => {
- const {container} = render(, {
- wrapper: ({children}) => {children}
,
+describe("Alert Dialog `element` prop", () => {
+ it("should set the default element prop on Alert Dialog", () => {
+ const { container } = render(, {
+ wrapper: ({ children }) => {children}
,
});
- expect(screen.getByTestId('alert_dialog').getAttribute('data-paste-element')).toEqual('ALERT_DIALOG');
+ expect(screen.getByTestId("alert_dialog").getAttribute("data-paste-element")).toEqual("ALERT_DIALOG");
expect(container.querySelector('[data-paste-element="ALERT_DIALOG_HEADER_WRAPPER"]')).toBeInTheDocument();
- expect(screen.getByText('Alert Dialog').getAttribute('data-paste-element')).toEqual('ALERT_DIALOG_HEADER');
+ expect(screen.getByText("Alert Dialog").getAttribute("data-paste-element")).toEqual("ALERT_DIALOG_HEADER");
expect(
screen
- .getByText('Are you sure you want to submit this application? No information can be changed after submitting.')
- .getAttribute('data-paste-element')
- ).toEqual('ALERT_DIALOG_BODY');
+ .getByText("Are you sure you want to submit this application? No information can be changed after submitting.")
+ .getAttribute("data-paste-element"),
+ ).toEqual("ALERT_DIALOG_BODY");
expect(container.querySelector('[data-paste-element="ALERT_DIALOG_FOOTER"]')).toBeInTheDocument();
});
- it('should set the custom element prop on Alert Dialog', () => {
- const {container} = render();
- expect(screen.getByTestId('destructive_alert_dialog').getAttribute('data-paste-element')).toEqual('FOO');
+ it("should set the custom element prop on Alert Dialog", () => {
+ const { container } = render();
+ expect(screen.getByTestId("destructive_alert_dialog").getAttribute("data-paste-element")).toEqual("FOO");
expect(container.querySelector('[data-paste-element="FOO_HEADER_WRAPPER"]')).toBeInTheDocument();
- expect(screen.getByText('Alert Dialog').getAttribute('data-paste-element')).toEqual('FOO_HEADER');
+ expect(screen.getByText("Alert Dialog").getAttribute("data-paste-element")).toEqual("FOO_HEADER");
expect(
screen
- .getByText('Are you sure you want to delete this data? This action cannot be undone.')
- .getAttribute('data-paste-element')
- ).toEqual('FOO_BODY');
+ .getByText("Are you sure you want to delete this data? This action cannot be undone.")
+ .getAttribute("data-paste-element"),
+ ).toEqual("FOO_BODY");
expect(container.querySelector('[data-paste-element="FOO_FOOTER"]')).toBeInTheDocument();
});
});
-describe('Alert Dialog customization', () => {
- it('should apply styles to Alert Dialog', () => {
- const {container} = render();
- expect(screen.getByTestId('alert_dialog')).toHaveStyleRule('background-color', 'rgb(255, 251, 234)');
+describe("Alert Dialog customization", () => {
+ it("should apply styles to Alert Dialog", () => {
+ const { container } = render();
+ expect(screen.getByTestId("alert_dialog")).toHaveStyleRule("background-color", "rgb(255, 251, 234)");
expect(container.querySelector('[data-paste-element="ALERT_DIALOG_HEADER_WRAPPER"]')).toHaveStyleRule(
- 'border',
- 'inherit'
+ "border",
+ "inherit",
);
- expect(screen.getByText('Alert Dialog')).toHaveStyleRule('background-color', 'rgb(235, 244, 255)');
+ expect(screen.getByText("Alert Dialog")).toHaveStyleRule("background-color", "rgb(235, 244, 255)");
expect(
screen.getByText(
- 'Are you sure you want to submit this application? No information can be changed after submitting.'
- )
- ).toHaveStyleRule('background-color', 'rgb(237, 253, 243)');
+ "Are you sure you want to submit this application? No information can be changed after submitting.",
+ ),
+ ).toHaveStyleRule("background-color", "rgb(237, 253, 243)");
expect(container.querySelector('[data-paste-element="ALERT_DIALOG_FOOTER"]')).toHaveStyleRule(
- 'padding-top',
- '1rem'
+ "padding-top",
+ "1rem",
);
});
- it('should apply styles to Alert Dialog with custom element prop', () => {
- const {container} = render();
- expect(screen.getByTestId('destructive_alert_dialog')).toHaveStyleRule('background-color', 'rgb(214, 31, 31)');
- expect(container.querySelector('[data-paste-element="FOO_HEADER_WRAPPER"]')).toHaveStyleRule('border', 'inherit');
- expect(screen.getByText('Alert Dialog')).toHaveStyleRule('background-color', 'rgb(235, 244, 255)');
+ it("should apply styles to Alert Dialog with custom element prop", () => {
+ const { container } = render();
+ expect(screen.getByTestId("destructive_alert_dialog")).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+ expect(container.querySelector('[data-paste-element="FOO_HEADER_WRAPPER"]')).toHaveStyleRule("border", "inherit");
+ expect(screen.getByText("Alert Dialog")).toHaveStyleRule("background-color", "rgb(235, 244, 255)");
expect(
- screen.getByText('Are you sure you want to delete this data? This action cannot be undone.')
- ).toHaveStyleRule('background-color', 'rgb(237, 253, 243)');
- expect(container.querySelector('[data-paste-element="FOO_FOOTER"]')).toHaveStyleRule('padding-top', '1rem');
+ screen.getByText("Are you sure you want to delete this data? This action cannot be undone."),
+ ).toHaveStyleRule("background-color", "rgb(237, 253, 243)");
+ expect(container.querySelector('[data-paste-element="FOO_FOOTER"]')).toHaveStyleRule("padding-top", "1rem");
});
});
diff --git a/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx b/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx
index 4da7f1a06d..2c707229b7 100644
--- a/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx
+++ b/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx
@@ -1,70 +1,70 @@
-import * as React from 'react';
-import {render, screen} from '@testing-library/react';
-import type {RenderOptions} from '@testing-library/react';
-import {Theme} from '@twilio-paste/theme';
+import { render, screen } from "@testing-library/react";
+import type { RenderOptions } from "@testing-library/react";
+import { Theme } from "@twilio-paste/theme";
+import * as React from "react";
import {
AlertDialogWithTwoActions,
DestructiveAlertDialog,
DisabledButtonDestructiveAlertDialog,
-} from '../stories/index.stories';
+} from "../stories/index.stories";
-const ThemeWrapper: RenderOptions['wrapper'] = ({children}) => (
+const ThemeWrapper: RenderOptions["wrapper"] = ({ children }) => (
{children}
);
-describe('Alert Dialog', () => {
- it('Should render an alert dialog box', () => {
+describe("Alert Dialog", () => {
+ it("Should render an alert dialog box", () => {
render();
- expect(screen.getByText('Submit application')).toBeDefined();
+ expect(screen.getByText("Submit application")).toBeDefined();
});
- it('Should have two, labeled buttons when a secondary label and action is given', () => {
+ it("Should have two, labeled buttons when a secondary label and action is given", () => {
render();
- const buttons = screen.getAllByRole('button');
+ const buttons = screen.getAllByRole("button");
expect(buttons).toHaveLength(2);
- expect(buttons[0]).toHaveTextContent('Cancel');
- expect(buttons[1]).toHaveTextContent('Submit');
+ expect(buttons[0]).toHaveTextContent("Cancel");
+ expect(buttons[1]).toHaveTextContent("Submit");
});
- it('Should have a destructive button style when the destructive prop is included', () => {
- render(, {wrapper: ThemeWrapper});
- const button = screen.getByRole('button', {name: 'Delete'});
- expect(button).toHaveStyleRule('background-color', 'rgb(214, 31, 31)');
+ it("Should have a destructive button style when the destructive prop is included", () => {
+ render(, { wrapper: ThemeWrapper });
+ const button = screen.getByRole("button", { name: "Delete" });
+ expect(button).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
});
- it('Should have a disabled destructive button style when the onConfirmDisabled prop is included', () => {
- render(, {wrapper: ThemeWrapper});
- const button = screen.getByRole('button', {name: 'Delete'});
- expect(button).toHaveStyleRule('background-color', 'rgb(225, 227, 234)');
+ it("Should have a disabled destructive button style when the onConfirmDisabled prop is included", () => {
+ render(, { wrapper: ThemeWrapper });
+ const button = screen.getByRole("button", { name: "Delete" });
+ expect(button).toHaveStyleRule("background-color", "rgb(225, 227, 234)");
});
- it('Should have a heading the same as the heading prop', () => {
+ it("Should have a heading the same as the heading prop", () => {
render();
- expect(screen.getByRole('heading')).toHaveTextContent('Submit application');
+ expect(screen.getByRole("heading")).toHaveTextContent("Submit application");
});
- it('Should have the correct aria attributes', () => {
+ it("Should have the correct aria attributes", () => {
render();
- expect(screen.getByRole('alertdialog')).toBeTruthy();
- expect(screen.getByRole('alertdialog').getAttribute('aria-modal')).toEqual('true');
- expect(screen.getByRole('alertdialog').getAttribute('aria-labelledby')).toEqual(
- screen.getByRole('heading').getAttribute('id')
+ expect(screen.getByRole("alertdialog")).toBeTruthy();
+ expect(screen.getByRole("alertdialog").getAttribute("aria-modal")).toEqual("true");
+ expect(screen.getByRole("alertdialog").getAttribute("aria-labelledby")).toEqual(
+ screen.getByRole("heading").getAttribute("id"),
);
- expect(screen.getByRole('alertdialog').getAttribute('aria-describedby')).toEqual(
+ expect(screen.getByRole("alertdialog").getAttribute("aria-describedby")).toEqual(
screen
- .getByText('Are you sure you want to submit this application? No information can be changed after submitting.')
- .getAttribute('id')
+ .getByText("Are you sure you want to submit this application? No information can be changed after submitting.")
+ .getAttribute("id"),
);
});
- it('Should have correct attributes when button is disabled', () => {
- render(, {wrapper: ThemeWrapper});
- expect(screen.getByRole('button', {name: 'Delete'})).toHaveAttribute('disabled');
+ it("Should have correct attributes when button is disabled", () => {
+ render(, { wrapper: ThemeWrapper });
+ expect(screen.getByRole("button", { name: "Delete" })).toHaveAttribute("disabled");
});
- it('Should have the initial focus land on the first focusable item', () => {
+ it("Should have the initial focus land on the first focusable item", () => {
render();
- expect(document.activeElement).toEqual(screen.getAllByRole('button')[0]);
+ expect(document.activeElement).toEqual(screen.getAllByRole("button")[0]);
});
});
diff --git a/packages/paste-core/components/alert-dialog/build.js b/packages/paste-core/components/alert-dialog/build.js
index a4edeab49b..27dd98f98e 100644
--- a/packages/paste-core/components/alert-dialog/build.js
+++ b/packages/paste-core/components/alert-dialog/build.js
@@ -1,3 +1,3 @@
-const {build} = require('../../../../tools/build/esbuild');
+const { build } = require("../../../../tools/build/esbuild");
-build(require('./package.json'));
+build(require("./package.json"));
diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogBody.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogBody.tsx
index d53df6d231..0153acd064 100644
--- a/packages/paste-core/components/alert-dialog/src/AlertDialogBody.tsx
+++ b/packages/paste-core/components/alert-dialog/src/AlertDialogBody.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import type {BoxProps} from '@twilio-paste/box';
-import type {HTMLPasteProps} from '@twilio-paste/types';
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import * as React from "react";
-export interface AlertDialogBodyProps extends HTMLPasteProps<'div'>, Pick {
+export interface AlertDialogBodyProps extends HTMLPasteProps<"div">, Pick {
bodyID: string;
children: NonNullable;
}
export const AlertDialogBody = React.forwardRef(
- ({bodyID, children, element = 'ALERT_DIALOG_BODY', ...props}, ref) => {
+ ({ bodyID, children, element = "ALERT_DIALOG_BODY", ...props }, ref) => {
return (
);
- }
+ },
);
-AlertDialogBody.displayName = 'AlertDialogBody';
+AlertDialogBody.displayName = "AlertDialogBody";
diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogContent.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogContent.tsx
index e39c9cb355..8c907ea3f4 100644
--- a/packages/paste-core/components/alert-dialog/src/AlertDialogContent.tsx
+++ b/packages/paste-core/components/alert-dialog/src/AlertDialogContent.tsx
@@ -1,15 +1,15 @@
-import {css, styled} from '@twilio-paste/styling-library';
-import {ModalDialogContent} from '@twilio-paste/modal';
-import type {ModalDialogContentProps} from '@twilio-paste/modal';
+import { ModalDialogContent } from "@twilio-paste/modal";
+import type { ModalDialogContentProps } from "@twilio-paste/modal";
+import { css, styled } from "@twilio-paste/styling-library";
export type AlertDialogContentProps = ModalDialogContentProps;
const AlertDialogContent = styled(ModalDialogContent)(() =>
css({
- maxWidth: 'size40',
- })
+ maxWidth: "size40",
+ }),
);
-AlertDialogContent.displayName = 'AlertDialogContent';
+AlertDialogContent.displayName = "AlertDialogContent";
-export {AlertDialogContent};
+export { AlertDialogContent };
diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx
index a30b7df8e5..253ba95bf6 100644
--- a/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx
+++ b/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import type {BoxProps} from '@twilio-paste/box';
-import {Button} from '@twilio-paste/button';
-import {Stack} from '@twilio-paste/stack';
-import type {HTMLPasteProps} from '@twilio-paste/types';
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { Stack } from "@twilio-paste/stack";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import * as React from "react";
-export interface AlertDialogFooterProps extends HTMLPasteProps<'div'>, Pick {
+export interface AlertDialogFooterProps extends HTMLPasteProps<"div">, Pick {
destructive?: boolean;
onConfirm: () => void;
onConfirmLabel: string;
@@ -18,7 +18,7 @@ export const AlertDialogFooter = React.forwardRef {
- const primaryVariant = destructive ? 'destructive' : 'primary';
+ const primaryVariant = destructive ? "destructive" : "primary";
return (
);
- }
+ },
);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
+AlertDialogFooter.displayName = "AlertDialogFooter";
diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogHeader.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogHeader.tsx
index cc5d0030c2..9db23dd7cf 100644
--- a/packages/paste-core/components/alert-dialog/src/AlertDialogHeader.tsx
+++ b/packages/paste-core/components/alert-dialog/src/AlertDialogHeader.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import type {BoxProps} from '@twilio-paste/box';
-import {Heading} from '@twilio-paste/heading';
-import type {HTMLPasteProps} from '@twilio-paste/types';
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
+import { Heading } from "@twilio-paste/heading";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import * as React from "react";
-export interface AlertDialogHeaderProps extends HTMLPasteProps<'header'>, Pick {
+export interface AlertDialogHeaderProps extends HTMLPasteProps<"header">, Pick {
children: string;
headingID: string;
}
export const AlertDialogHeader = React.forwardRef(
- ({children, element = 'ALERT_DIALOG_HEADER', headingID, ...props}, ref) => {
+ ({ children, element = "ALERT_DIALOG_HEADER", headingID, ...props }, ref) => {
return (
);
- }
+ },
);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
+AlertDialogHeader.displayName = "AlertDialogHeader";
diff --git a/packages/paste-core/components/alert-dialog/src/index.tsx b/packages/paste-core/components/alert-dialog/src/index.tsx
index 814c41e914..9fab0f3ce8 100644
--- a/packages/paste-core/components/alert-dialog/src/index.tsx
+++ b/packages/paste-core/components/alert-dialog/src/index.tsx
@@ -1,21 +1,21 @@
-import * as React from 'react';
-import {useUID} from '@twilio-paste/uid-library';
-import {useTransition} from '@twilio-paste/animation-library';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import type {BoxProps} from '@twilio-paste/box';
-import {ModalDialogOverlay} from '@twilio-paste/modal';
-import type {HTMLPasteProps} from '@twilio-paste/types';
+import { useTransition } from "@twilio-paste/animation-library";
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
+import { ModalDialogOverlay } from "@twilio-paste/modal";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
-import {AlertDialogHeader} from './AlertDialogHeader';
-import {AlertDialogBody} from './AlertDialogBody';
-import {AlertDialogContent} from './AlertDialogContent';
-import {AlertDialogFooter} from './AlertDialogFooter';
+import { AlertDialogBody } from "./AlertDialogBody";
+import { AlertDialogContent } from "./AlertDialogContent";
+import { AlertDialogFooter } from "./AlertDialogFooter";
+import { AlertDialogHeader } from "./AlertDialogHeader";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const getAnimationStates = (): any => ({
- from: {opacity: 0, transform: `scale(0.675)`},
- enter: {opacity: 1, transform: `scale(1)`},
- leave: {opacity: 0, transform: `scale(0.675)`},
+ from: { opacity: 0, transform: `scale(0.675)` },
+ enter: { opacity: 1, transform: `scale(1)` },
+ leave: { opacity: 0, transform: `scale(0.675)` },
// https://www.react-spring.dev/docs/advanced/config
config: {
mass: 0.5,
@@ -24,7 +24,7 @@ const getAnimationStates = (): any => ({
},
});
-export interface AlertDialogProps extends HTMLPasteProps<'div'>, Pick {
+export interface AlertDialogProps extends HTMLPasteProps<"div">, Pick {
children: NonNullable;
destructive?: boolean;
heading: string;
@@ -41,7 +41,7 @@ export const AlertDialog = React.forwardRef(
{
children,
destructive,
- element = 'ALERT_DIALOG',
+ element = "ALERT_DIALOG",
heading,
isOpen,
onConfirm,
@@ -51,7 +51,7 @@ export const AlertDialog = React.forwardRef(
onConfirmDisabled,
...props
},
- ref
+ ref,
) => {
const transitions = useTransition(isOpen, getAnimationStates());
const headingID = useUID();
@@ -62,7 +62,7 @@ export const AlertDialog = React.forwardRef(
{transitions(
(styles, item) =>
item && (
-
+
(
/>
- )
+ ),
)}
);
- }
+ },
);
-AlertDialog.displayName = 'AlertDialog';
+AlertDialog.displayName = "AlertDialog";
diff --git a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx
index d3faa24443..1ebee777a8 100644
--- a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx
+++ b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx
@@ -1,32 +1,32 @@
-import * as React from 'react';
-import type {Story} from '@storybook/react';
-import {useUID} from '@twilio-paste/uid-library';
-import {Button} from '@twilio-paste/button';
-import {Heading} from '@twilio-paste/heading';
-import {Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading} from '@twilio-paste/modal';
-import {Paragraph} from '@twilio-paste/paragraph';
-import {CustomizationProvider} from '@twilio-paste/customization';
-import {useTheme} from '@twilio-paste/theme';
-import {Box} from '@twilio-paste/box';
-import {Input} from '@twilio-paste/input';
-import {Label} from '@twilio-paste/label';
-import {HelpText} from '@twilio-paste/help-text';
+import type { Story } from "@storybook/react";
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import { Heading } from "@twilio-paste/heading";
+import { HelpText } from "@twilio-paste/help-text";
+import { Input } from "@twilio-paste/input";
+import { Label } from "@twilio-paste/label";
+import { Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading } from "@twilio-paste/modal";
+import { Paragraph } from "@twilio-paste/paragraph";
+import { useTheme } from "@twilio-paste/theme";
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
-import {AlertDialog} from '../src';
-import {AlertDialogHeader} from '../src/AlertDialogHeader';
-import {AlertDialogBody} from '../src/AlertDialogBody';
-import {AlertDialogContent} from '../src/AlertDialogContent';
-import {AlertDialogFooter} from '../src/AlertDialogFooter';
+import { AlertDialog } from "../src";
+import { AlertDialogBody } from "../src/AlertDialogBody";
+import { AlertDialogContent } from "../src/AlertDialogContent";
+import { AlertDialogFooter } from "../src/AlertDialogFooter";
+import { AlertDialogHeader } from "../src/AlertDialogHeader";
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/Alert Dialog',
+ title: "Components/Alert Dialog",
component: AlertDialog,
excludeStories: [
- 'AlertDialogWithTwoActions',
- 'DestructiveAlertDialog',
- 'OpenAlertDialogFromButton',
- 'OpenAlertDialogFromModal',
+ "AlertDialogWithTwoActions",
+ "DestructiveAlertDialog",
+ "OpenAlertDialogFromButton",
+ "OpenAlertDialogFromModal",
],
};
@@ -49,9 +49,9 @@ export const AlertDialogWithTwoActionsStory = (): React.ReactNode => {
return ;
};
-AlertDialogWithTwoActionsStory.storyName = 'Alert Dialog With Two Actions';
+AlertDialogWithTwoActionsStory.storyName = "Alert Dialog With Two Actions";
AlertDialogWithTwoActionsStory.parameters = {
- chromatic: {disableSnapshot: true},
+ chromatic: { disableSnapshot: true },
a11y: {
// no need to a11y check customization
disable: true,
@@ -78,22 +78,22 @@ export const DestructiveAlertDialogStory = (): React.ReactNode => {
return ;
};
-DestructiveAlertDialogStory.storyName = 'Destructive Alert Dialog';
+DestructiveAlertDialogStory.storyName = "Destructive Alert Dialog";
DestructiveAlertDialogStory.parameters = {
- chromatic: {disableSnapshot: true},
+ chromatic: { disableSnapshot: true },
a11y: {
// no need to a11y check customization
disable: true,
},
};
-export const DisabledButtonDestructiveAlertDialog = ({dialogIsOpen = false}): JSX.Element => {
+export const DisabledButtonDestructiveAlertDialog = ({ dialogIsOpen = false }): JSX.Element => {
const [isOpen, setIsOpen] = React.useState(dialogIsOpen);
- const [inputString, setInputString] = React.useState('');
+ const [inputString, setInputString] = React.useState("");
const [inputHasError, setInputHasError] = React.useState(false);
const [isDisabled, setIsDisabled] = React.useState(true);
const handleOpen = (): void => {
- if (inputString !== '') setIsDisabled(false);
+ if (inputString !== "") setIsDisabled(false);
setIsOpen(true);
};
const handleDismiss = (): void => {
@@ -102,9 +102,9 @@ export const DisabledButtonDestructiveAlertDialog = ({dialogIsOpen = false}): JS
setInputHasError(false);
};
const handleConfirm = (): void => {
- if (inputString === 'Toyota TCB Automobile (Gevelsberg)') {
+ if (inputString === "Toyota TCB Automobile (Gevelsberg)") {
setIsOpen(false);
- setInputString('');
+ setInputString("");
setInputHasError(false);
setIsDisabled(true);
} else {
@@ -113,7 +113,7 @@ export const DisabledButtonDestructiveAlertDialog = ({dialogIsOpen = false}): JS
};
const handleChange = (e): void => {
setInputString(e.target.value);
- if (e.target.value !== '') setIsDisabled(false);
+ if (e.target.value !== "") setIsDisabled(false);
else setIsDisabled(true);
};
return (
@@ -146,7 +146,7 @@ export const DisabledButtonDestructiveAlertDialog = ({dialogIsOpen = false}): JS
hasError={inputHasError}
value={inputString}
/>
-
+
To confirm this deletion, please input the name of this regulatory bundle.
@@ -183,9 +183,9 @@ export const OpenAlertDialogFromButtonStory = (): React.ReactNode => {
return ;
};
-OpenAlertDialogFromButtonStory.storyName = 'Open Alert Dialog From Button';
+OpenAlertDialogFromButtonStory.storyName = "Open Alert Dialog From Button";
OpenAlertDialogFromButtonStory.parameters = {
- chromatic: {disableSnapshot: true},
+ chromatic: { disableSnapshot: true },
a11y: {
// no need to a11y check customization
disable: true,
@@ -247,9 +247,9 @@ export const OpenAlertDialogFromModalStory = (): React.ReactNode => {
return ;
};
-OpenAlertDialogFromModalStory.storyName = 'Open Alert Dialog From Modal';
+OpenAlertDialogFromModalStory.storyName = "Open Alert Dialog From Modal";
OpenAlertDialogFromModalStory.parameters = {
- chromatic: {disableSnapshot: true},
+ chromatic: { disableSnapshot: true },
a11y: {
// no need to a11y check customization
disable: true,
@@ -270,7 +270,7 @@ export const AlertDialogVRT = (): React.ReactNode => {
);
};
-AlertDialogVRT.storyName = 'Alert Dialog for VRT';
+AlertDialogVRT.storyName = "Alert Dialog for VRT";
export const DestructiveAlertDialogVRT = (): React.ReactNode => {
const alertDialogHeadingID = useUID();
@@ -292,7 +292,7 @@ export const DestructiveAlertDialogVRT = (): React.ReactNode => {
);
};
-DestructiveAlertDialogVRT.storyName = 'Destructive Alert Dialog for VRT';
+DestructiveAlertDialogVRT.storyName = "Destructive Alert Dialog for VRT";
export const CustomizedAlertDialog: Story = () => {
const theme = useTheme();
@@ -301,11 +301,11 @@ export const CustomizedAlertDialog: Story = () => {
disableAnimations={true}
theme={theme}
elements={{
- ALERT_DIALOG: {backgroundColor: 'colorBackgroundSubaccount'},
- ALERT_DIALOG_HEADER_WRAPPER: {border: 'inherit'},
- ALERT_DIALOG_HEADER: {fontFamily: 'fontFamilyCode', backgroundColor: 'colorBackgroundNeutralWeakest'},
- ALERT_DIALOG_BODY: {backgroundColor: 'colorBackgroundSuccessWeakest'},
- ALERT_DIALOG_FOOTER: {paddingTop: 'space50', backgroundColor: 'colorBackgroundWarningWeakest'},
+ ALERT_DIALOG: { backgroundColor: "colorBackgroundSubaccount" },
+ ALERT_DIALOG_HEADER_WRAPPER: { border: "inherit" },
+ ALERT_DIALOG_HEADER: { fontFamily: "fontFamilyCode", backgroundColor: "colorBackgroundNeutralWeakest" },
+ ALERT_DIALOG_BODY: { backgroundColor: "colorBackgroundSuccessWeakest" },
+ ALERT_DIALOG_FOOTER: { paddingTop: "space50", backgroundColor: "colorBackgroundWarningWeakest" },
}}
>
{
disableAnimations={true}
theme={currentTheme}
elements={{
- FOO: {backgroundColor: 'colorBackgroundError'},
- FOO_HEADER_WRAPPER: {border: 'inherit'},
- FOO_HEADER: {fontFamily: 'fontFamilyCode', backgroundColor: 'colorBackgroundNeutralWeakest'},
- FOO_BODY: {backgroundColor: 'colorBackgroundSuccessWeakest'},
- FOO_FOOTER: {paddingTop: 'space50', backgroundColor: 'colorBackgroundWarningWeakest'},
+ FOO: { backgroundColor: "colorBackgroundError" },
+ FOO_HEADER_WRAPPER: { border: "inherit" },
+ FOO_HEADER: { fontFamily: "fontFamilyCode", backgroundColor: "colorBackgroundNeutralWeakest" },
+ FOO_BODY: { backgroundColor: "colorBackgroundSuccessWeakest" },
+ FOO_FOOTER: { paddingTop: "space50", backgroundColor: "colorBackgroundWarningWeakest" },
}}
>
{
- describe('Dismiss button', () => {
- it('Should add a dismiss button when onDismiss is passed as a function to call', () => {
+describe("Alert", () => {
+ describe("Dismiss button", () => {
+ it("Should add a dismiss button when onDismiss is passed as a function to call", () => {
const eventHandlerMock: jest.Mock = jest.fn();
- const {getByRole} = render(
+ const { getByRole } = render(
This is an alert
-
+ ,
);
- expect(getByRole('button')).toBeInTheDocument();
+ expect(getByRole("button")).toBeInTheDocument();
});
- it('Should call the onDismiss event handler when close button clicked', () => {
+ it("Should call the onDismiss event handler when close button clicked", () => {
const eventHandlerMock: jest.Mock = jest.fn();
- const {getByRole} = render(
+ const { getByRole } = render(
This is an alert
-
+ ,
);
- const button = getByRole('button');
+ const button = getByRole("button");
userEvent.click(button);
expect(eventHandlerMock).toHaveBeenCalledTimes(1);
});
});
- describe('Aria roles', () => {
- it('Should add the role of status to the neutral alert', () => {
- const {getByRole} = render(This is an alert);
- expect(getByRole('status')).toBeInTheDocument();
+ describe("Aria roles", () => {
+ it("Should add the role of status to the neutral alert", () => {
+ const { getByRole } = render(This is an alert);
+ expect(getByRole("status")).toBeInTheDocument();
});
- it('Should add the role of alert to the error alert', () => {
- const {getByRole} = render(This is an alert);
- expect(getByRole('alert')).toBeInTheDocument();
+ it("Should add the role of alert to the error alert", () => {
+ const { getByRole } = render(This is an alert);
+ expect(getByRole("alert")).toBeInTheDocument();
});
- it('Should add the role of alert to the warning alert', () => {
- const {getByRole} = render(This is an alert);
- expect(getByRole('alert')).toBeInTheDocument();
+ it("Should add the role of alert to the warning alert", () => {
+ const { getByRole } = render(This is an alert);
+ expect(getByRole("alert")).toBeInTheDocument();
});
- it('Should add the provided role to the alert', () => {
- const {getByRole} = render(
+ it("Should add the provided role to the alert", () => {
+ const { getByRole } = render(
This is an alert
-
+ ,
);
- expect(getByRole('tab')).toBeInTheDocument();
+ expect(getByRole("tab")).toBeInTheDocument();
});
});
- describe('Customization', () => {
- it('should set default data-paste-element attribute on Alert and customizable Alert children', (): void => {
+ describe("Customization", () => {
+ it("should set default data-paste-element attribute on Alert and customizable Alert children", (): void => {
render(
This is my test alert
-
+ ,
);
- const alert = screen.getByTestId('alert-customization');
- expect(alert).toHaveAttribute('data-paste-element', 'ALERT');
+ const alert = screen.getByTestId("alert-customization");
+ expect(alert).toHaveAttribute("data-paste-element", "ALERT");
expect(alert.querySelector('[data-paste-element="ALERT_ICON"]')).toBeInTheDocument();
expect(alert.querySelector('[data-paste-element="ALERT_DISMISS_BUTTON"]')).toBeInTheDocument();
expect(alert.querySelector('[data-paste-element="ALERT_DISMISS_ICON"]')).toBeInTheDocument();
});
- it('should add custom styles to Alert and Alert children', (): void => {
+ it("should add custom styles to Alert and Alert children", (): void => {
render(
This is my test alert
-
+ ,
);
- const alert = screen.getByTestId('alert-customization');
+ const alert = screen.getByTestId("alert-customization");
- expect(alert).toHaveStyleRule('background-color', 'rgb(244, 244, 246)');
- expect(alert.querySelector('[data-paste-element="ALERT_ICON"]')).toHaveStyleRule('color', 'rgb(0, 20, 137)');
+ expect(alert).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
+ expect(alert.querySelector('[data-paste-element="ALERT_ICON"]')).toHaveStyleRule("color", "rgb(0, 20, 137)");
expect(alert.querySelector('[data-paste-element="ALERT_DISMISS_BUTTON"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(18, 28, 45)'
+ "background-color",
+ "rgb(18, 28, 45)",
);
expect(alert.querySelector('[data-paste-element="ALERT_DISMISS_ICON"]')).toHaveStyleRule(
- 'color',
- 'rgb(255, 255, 255)'
+ "color",
+ "rgb(255, 255, 255)",
);
});
- it('should set custom element name and properly apply styles to Alert and customizable children', (): void => {
+ it("should set custom element name and properly apply styles to Alert and customizable children", (): void => {
render(
This is my test alert
-
+ ,
);
- const alert = screen.getByTestId('alert-customization');
- expect(alert).toHaveAttribute('data-paste-element', 'MYALERT');
+ const alert = screen.getByTestId("alert-customization");
+ expect(alert).toHaveAttribute("data-paste-element", "MYALERT");
expect(alert.querySelector('[data-paste-element="MYALERT_ICON"]')).toBeInTheDocument();
expect(alert.querySelector('[data-paste-element="MYALERT_DISMISS_BUTTON"]')).toBeInTheDocument();
expect(alert.querySelector('[data-paste-element="MYALERT_DISMISS_ICON"]')).toBeInTheDocument();
- expect(alert).toHaveStyleRule('background-color', 'rgb(244, 244, 246)');
- expect(alert.querySelector('[data-paste-element="MYALERT_ICON"]')).toHaveStyleRule('color', 'rgb(0, 20, 137)');
+ expect(alert).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
+ expect(alert.querySelector('[data-paste-element="MYALERT_ICON"]')).toHaveStyleRule("color", "rgb(0, 20, 137)");
expect(alert.querySelector('[data-paste-element="MYALERT_DISMISS_BUTTON"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(18, 28, 45)'
+ "background-color",
+ "rgb(18, 28, 45)",
);
expect(alert.querySelector('[data-paste-element="MYALERT_DISMISS_ICON"]')).toHaveStyleRule(
- 'color',
- 'rgb(255, 255, 255)'
+ "color",
+ "rgb(255, 255, 255)",
);
});
});
- describe('i18n', () => {
- it('should have default dismiss button text', () => {
+ describe("i18n", () => {
+ it("should have default dismiss button text", () => {
render(
This is an alert
-
+ ,
);
- const dismissButton = screen.getByRole('button', {name: 'Dismiss alert'});
+ const dismissButton = screen.getByRole("button", { name: "Dismiss alert" });
expect(dismissButton).toBeDefined();
});
- it('should use i18nDismissLabel for dismiss button text', () => {
+ it("should use i18nDismissLabel for dismiss button text", () => {
render(
C'est une alerte neutre.
-
+ ,
);
- const dismissButton = screen.getByRole('button', {name: "Fermez l'alerte"});
+ const dismissButton = screen.getByRole("button", { name: "Fermez l'alerte" });
expect(dismissButton).toBeDefined();
});
- it('should have default error variant icon text', () => {
+ it("should have default error variant icon text", () => {
render(
This is an alert
-
+ ,
);
- const alert = screen.getByTestId('alert-i18n');
+ const alert = screen.getByTestId("alert-i18n");
const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
- expect(icon?.textContent).toEqual('(error)');
+ expect(icon?.textContent).toEqual("(error)");
});
- it('should have default neutral variant icon text', () => {
+ it("should have default neutral variant icon text", () => {
render(
This is an alert
-
+ ,
);
- const alert = screen.getByTestId('alert-i18n');
+ const alert = screen.getByTestId("alert-i18n");
const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
- expect(icon?.textContent).toEqual('(information)');
+ expect(icon?.textContent).toEqual("(information)");
});
- it('should have default warning variant icon text', () => {
+ it("should have default warning variant icon text", () => {
render(
This is an alert
-
+ ,
);
- const alert = screen.getByTestId('alert-i18n');
+ const alert = screen.getByTestId("alert-i18n");
const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
- expect(icon?.textContent).toEqual('(warning)');
+ expect(icon?.textContent).toEqual("(warning)");
});
- it('should use the i18nErrorLabel for error variant icon text', () => {
+ it("should use the i18nErrorLabel for error variant icon text", () => {
render(
C'est une alerte.
-
+ ,
);
- const alert = screen.getByTestId('alert-i18n');
+ const alert = screen.getByTestId("alert-i18n");
const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
- expect(icon?.textContent).toEqual('(erreur)');
+ expect(icon?.textContent).toEqual("(erreur)");
});
- it('should use the i18nNeutralLabel for neutral variant icon text', () => {
+ it("should use the i18nNeutralLabel for neutral variant icon text", () => {
render(
C'est une alerte.
-
+ ,
);
- const alert = screen.getByTestId('alert-i18n');
+ const alert = screen.getByTestId("alert-i18n");
const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
- expect(icon?.textContent).toEqual('(information)');
+ expect(icon?.textContent).toEqual("(information)");
});
- it('should use the i18nWarningLabel for warning variant icon text', () => {
+ it("should use the i18nWarningLabel for warning variant icon text", () => {
render(
C'est une alerte.
-
+ ,
);
- const alert = screen.getByTestId('alert-i18n');
+ const alert = screen.getByTestId("alert-i18n");
const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
- expect(icon?.textContent).toEqual('(avertissement)');
+ expect(icon?.textContent).toEqual("(avertissement)");
});
});
});
diff --git a/packages/paste-core/components/alert/build.js b/packages/paste-core/components/alert/build.js
index a4edeab49b..27dd98f98e 100644
--- a/packages/paste-core/components/alert/build.js
+++ b/packages/paste-core/components/alert/build.js
@@ -1,3 +1,3 @@
-const {build} = require('../../../../tools/build/esbuild');
+const { build } = require("../../../../tools/build/esbuild");
-build(require('./package.json'));
+build(require("./package.json"));
diff --git a/packages/paste-core/components/alert/src/index.tsx b/packages/paste-core/components/alert/src/index.tsx
index fbd691b5cf..01b35f3a73 100644
--- a/packages/paste-core/components/alert/src/index.tsx
+++ b/packages/paste-core/components/alert/src/index.tsx
@@ -1,36 +1,36 @@
-import * as React from 'react';
-import type {BoxProps} from '@twilio-paste/box';
-import type {HTMLPasteProps, ValueOf} from '@twilio-paste/types';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';
-import {Button} from '@twilio-paste/button';
-import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only';
-import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon';
-import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon';
-import {NeutralIcon} from '@twilio-paste/icons/esm/NeutralIcon';
-import {WarningIcon} from '@twilio-paste/icons/esm/WarningIcon';
+import type { BoxProps } from "@twilio-paste/box";
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { CloseIcon } from "@twilio-paste/icons/esm/CloseIcon";
+import { ErrorIcon } from "@twilio-paste/icons/esm/ErrorIcon";
+import { NeutralIcon } from "@twilio-paste/icons/esm/NeutralIcon";
+import { WarningIcon } from "@twilio-paste/icons/esm/WarningIcon";
+import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object";
+import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
+import type { HTMLPasteProps, ValueOf } from "@twilio-paste/types";
+import * as React from "react";
-type AlertVariantKeys = 'ERROR' | 'NEUTRAL' | 'WARNING';
+type AlertVariantKeys = "ERROR" | "NEUTRAL" | "WARNING";
export const AlertRoles = {
- ERROR: 'alert',
- NEUTRAL: 'status',
- WARNING: 'alert',
+ ERROR: "alert",
+ NEUTRAL: "status",
+ WARNING: "alert",
} as const;
export const AlertVariants = {
- ERROR: 'error',
- NEUTRAL: 'neutral',
- WARNING: 'warning',
+ ERROR: "error",
+ NEUTRAL: "neutral",
+ WARNING: "warning",
} as const;
export const AlertBackgroundColors = {
- ERROR: 'colorBackgroundErrorWeakest',
- NEUTRAL: 'colorBackgroundNeutralWeakest',
- WARNING: 'colorBackgroundWarningWeakest',
+ ERROR: "colorBackgroundErrorWeakest",
+ NEUTRAL: "colorBackgroundNeutralWeakest",
+ WARNING: "colorBackgroundWarningWeakest",
} as const;
export const AlertTextColors = {
- ERROR: 'colorTextError',
- NEUTRAL: 'colorTextNeutral',
- WARNING: 'colorTextWarningStrong',
+ ERROR: "colorTextError",
+ NEUTRAL: "colorTextNeutral",
+ WARNING: "colorTextWarningStrong",
} as const;
// eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -42,7 +42,7 @@ export type AlertRoles = ValueOf;
// eslint-disable-next-line @typescript-eslint/no-redeclare
export type AlertTextColors = ValueOf;
-export interface AlertProps extends HTMLPasteProps<'div'>, Pick {
+export interface AlertProps extends HTMLPasteProps<"div">, Pick {
children: NonNullable;
onDismiss?: () => void;
role?: string;
@@ -96,14 +96,14 @@ const Alert = React.forwardRef(
onDismiss,
variant,
role,
- element = 'ALERT',
- i18nDismissLabel = 'Dismiss alert',
- i18nErrorLabel = '(error)',
- i18nNeutralLabel = '(information)',
- i18nWarningLabel = '(warning)',
+ element = "ALERT",
+ i18nDismissLabel = "Dismiss alert",
+ i18nErrorLabel = "(error)",
+ i18nNeutralLabel = "(information)",
+ i18nWarningLabel = "(warning)",
...props
},
- ref
+ ref,
) => {
const i18nLabelVariantMap = {
error: i18nErrorLabel,
@@ -131,7 +131,7 @@ const Alert = React.forwardRef(
{children}
- {onDismiss && typeof onDismiss === 'function' && (
+ {onDismiss && typeof onDismiss === "function" && (
,
+ ),
).toThrow();
spy.mockRestore();
});
it('Throws an error when an "a" tag is passed but a href is not', () => {
// hide console errors from terminal when throwing expected errors
- const spy = jest.spyOn(console, 'error');
+ const spy = jest.spyOn(console, "error");
spy.mockImplementation(() => {});
expect(() =>
render(
- )
+ ,
+ ),
).toThrow();
spy.mockRestore();
});
- it('Throws an error when the user should use an Anchor component instead', () => {
+ it("Throws an error when the user should use an Anchor component instead", () => {
// hide console errors from terminal when throwing expected errors
- const spy = jest.spyOn(console, 'error');
+ const spy = jest.spyOn(console, "error");
spy.mockImplementation(() => {});
expect(() =>
render(
- )
+ ,
+ ),
).toThrow();
expect(() =>
render(
- )
+ ,
+ ),
).toThrow();
spy.mockRestore();
});
it('Throws an error when an "a" tag is passed but not using correct variant', () => {
// hide console errors from terminal when throwing expected errors
- const spy = jest.spyOn(console, 'error');
+ const spy = jest.spyOn(console, "error");
spy.mockImplementation(() => {});
expect(() =>
render(
- )
+ ,
+ ),
).toThrow();
expect(() =>
render(
- )
+ ,
+ ),
).toThrow();
spy.mockRestore();
});
it('Throws an error when an "a" tag is passed with disabled or loading state', () => {
// hide console errors from terminal when throwing expected errors
- const spy = jest.spyOn(console, 'error');
+ const spy = jest.spyOn(console, "error");
spy.mockImplementation(() => {});
expect(() =>
render(
- )
+ ,
+ ),
).toThrow();
expect(() =>
render(
- )
+ ,
+ ),
).toThrow();
spy.mockRestore();
});
- it('Throws an error when size=reset is not applied to variant=reset', () => {
+ it("Throws an error when size=reset is not applied to variant=reset", () => {
// hide console errors from terminal when throwing expected errors
- const spy = jest.spyOn(console, 'error');
+ const spy = jest.spyOn(console, "error");
spy.mockImplementation(() => {});
expect(() =>
render(
- )
+ ,
+ ),
).toThrow();
spy.mockRestore();
});
- it('Throws an error when using fullWidth with an icon sizing', () => {
+ it("Throws an error when using fullWidth with an icon sizing", () => {
// hide console errors from terminal when throwing expected errors
- const spy = jest.spyOn(console, 'error');
+ const spy = jest.spyOn(console, "error");
spy.mockImplementation(() => {});
expect(() =>
render(
- )
+ ,
+ ),
).toThrow();
spy.mockRestore();
});
- it('Throws an error when using fullWidth with an icon_small sizing', () => {
+ it("Throws an error when using fullWidth with an icon_small sizing", () => {
// hide console errors from terminal when throwing expected errors
- const spy = jest.spyOn(console, 'error');
+ const spy = jest.spyOn(console, "error");
spy.mockImplementation(() => {});
expect(() =>
render(
- )
+ ,
+ ),
).toThrow();
spy.mockRestore();
});
- it('Throws an error when not passing children', () => {
+ it("Throws an error when not passing children", () => {
// hide console errors from terminal when throwing expected errors
- const spy = jest.spyOn(console, 'error');
+ const spy = jest.spyOn(console, "error");
spy.mockImplementation(() => {});
// @ts-expect-error expect button to throw
expect(() => render()).toThrow();
spy.mockRestore();
});
- it('Throws an error when passing an invalid tabIndex', () => {
+ it("Throws an error when passing an invalid tabIndex", () => {
// hide console errors from terminal when throwing expected errors
- const spy = jest.spyOn(console, 'error');
+ const spy = jest.spyOn(console, "error");
spy.mockImplementation(() => {});
// @ts-expect-error invalid tabindex
expect(() => render()).toThrow();
@@ -164,9 +164,9 @@ describe('Button', () => {
spy.mockRestore();
});
- it('Throws an error when passing pressed with invalid variant', () => {
+ it("Throws an error when passing pressed with invalid variant", () => {
// hide console errors from terminal when throwing expected errors
- const spy = jest.spyOn(console, 'error');
+ const spy = jest.spyOn(console, "error");
spy.mockImplementation(() => {});
// @ts-expect-error invalid tabindex
expect(() => render()).toThrow();
@@ -175,116 +175,116 @@ describe('Button', () => {
});
});
- describe('Button aria attributes', () => {
- it('Has an aria-expanded attribute', () => {
- const {getByRole} = render(
+ describe("Button aria attributes", () => {
+ it("Has an aria-expanded attribute", () => {
+ const { getByRole } = render(
+ ,
);
- expect(getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+ expect(getByRole("button")).toHaveAttribute("aria-expanded", "true");
});
- it('Has an aria-haspopup attribute', () => {
- const {getByRole} = render(
+ it("Has an aria-haspopup attribute", () => {
+ const { getByRole } = render(
+ ,
);
- expect(getByRole('button')).toHaveAttribute('aria-haspopup', 'true');
+ expect(getByRole("button")).toHaveAttribute("aria-haspopup", "true");
});
- it('Has an aria-controls attribute', () => {
- const {getByRole} = render(
+ it("Has an aria-controls attribute", () => {
+ const { getByRole } = render(
+ ,
);
- expect(getByRole('button')).toHaveAttribute('aria-controls', 'some-id');
+ expect(getByRole("button")).toHaveAttribute("aria-controls", "some-id");
});
- it('Has an aria-busy attribute when loading', () => {
- const {getByRole} = render(
+ it("Has an aria-busy attribute when loading", () => {
+ const { getByRole } = render(
-
+ ,
);
- const button = getByRole('button');
+ const button = getByRole("button");
- expect(button).toHaveAttribute('aria-busy', 'true');
+ expect(button).toHaveAttribute("aria-busy", "true");
expect(button).toBeDisabled();
});
- it('Has disabled set on HTML when disabled', () => {
- const {getByRole} = render(
+ it("Has disabled set on HTML when disabled", () => {
+ const { getByRole } = render(
+ ,
);
- expect(getByRole('button')).toBeDisabled();
+ expect(getByRole("button")).toBeDisabled();
});
});
- describe('Button data attributes', () => {
- it('Has an data-foo attribute', () => {
- const {getByRole} = render(
+ describe("Button data attributes", () => {
+ it("Has an data-foo attribute", () => {
+ const { getByRole } = render(
+ ,
);
- expect(getByRole('button')).toHaveAttribute('data-foo', 'test');
+ expect(getByRole("button")).toHaveAttribute("data-foo", "test");
});
});
- describe('Button render as', () => {
- it('Renders a button as a link', () => {
- const {getByRole} = render(
+ describe("Button render as", () => {
+ it("Renders a button as a link", () => {
+ const { getByRole } = render(
+ ,
);
- expect(getByRole('link')).toBeInTheDocument();
+ expect(getByRole("link")).toBeInTheDocument();
});
});
- describe('Button margin styles', () => {
- it('Renders a button with margin: space0', () => {
- const {getByTestId} = render(
+ describe("Button margin styles", () => {
+ it("Renders a button with margin: space0", () => {
+ const { getByTestId } = render(
+ ,
);
- expect(getByTestId('button-margin')).toHaveStyleRule('margin', 'space0');
+ expect(getByTestId("button-margin")).toHaveStyleRule("margin", "space0");
});
});
- describe('Button inner padding', () => {
- it('should not set padding for buttons with only one child', () => {
- const {getByText} = render();
- expect(getByText('Hello')).not.toHaveStyleRule('padding', 'undefined');
+ describe("Button inner padding", () => {
+ it("should not set padding for buttons with only one child", () => {
+ const { getByText } = render();
+ expect(getByText("Hello")).not.toHaveStyleRule("padding", "undefined");
});
- it('should set padding between rendered children', () => {
- const {getByText} = render(
+ it("should set padding between rendered children", () => {
+ const { getByText } = render(
+ ,
);
- expect(getByText('Hello')).toHaveStyleRule('column-gap', 'space20');
+ expect(getByText("Hello")).toHaveStyleRule("column-gap", "space20");
});
});
- describe('button event handlers', () => {
- it('Should call the appropriate event handlers', () => {
+ describe("button event handlers", () => {
+ it("Should call the appropriate event handlers", () => {
const onClickMock: jest.Mock = jest.fn();
const onMouseDownMock: jest.Mock = jest.fn();
const onMouseUpMock: jest.Mock = jest.fn();
@@ -293,7 +293,7 @@ describe('Button', () => {
const onFocusMock: jest.Mock = jest.fn();
const onBlurMock: jest.Mock = jest.fn();
- const {getByRole} = render(
+ const { getByRole } = render(
+ ,
);
- const button = getByRole('button');
+ const button = getByRole("button");
userEvent.click(button);
expect(onMouseDownMock).toHaveBeenCalledTimes(1);
@@ -329,210 +329,210 @@ describe('Button', () => {
});
});
- describe('button default styles', () => {
- it('should have the correct styles for the primary variant', () => {
- const {getByTestId, getByText} = render(
+ describe("button default styles", () => {
+ it("should have the correct styles for the primary variant", () => {
+ const { getByTestId, getByText } = render(
+ ,
);
- const button = getByTestId('primary-styles');
+ const button = getByTestId("primary-styles");
- expect(button).not.toHaveStyleRule('text-align', 'left');
- expect(button).toHaveStyleRule('color', 'colorTextInverse');
- expect(button).toHaveStyleRule('background-color', 'colorBackgroundPrimary');
- expect(button).toHaveStyleRule('box-shadow', 'shadowBorderPrimary');
+ expect(button).not.toHaveStyleRule("text-align", "left");
+ expect(button).toHaveStyleRule("color", "colorTextInverse");
+ expect(button).toHaveStyleRule("background-color", "colorBackgroundPrimary");
+ expect(button).toHaveStyleRule("box-shadow", "shadowBorderPrimary");
- expect(getByText('Primary')).toHaveStyleRule('justify-content', 'center');
+ expect(getByText("Primary")).toHaveStyleRule("justify-content", "center");
});
- it('should have the correct styles for the primary_icon variant', () => {
- const {getByTestId} = render(
+ it("should have the correct styles for the primary_icon variant", () => {
+ const { getByTestId } = render(
+ ,
);
- const button = getByTestId('primary-icon-styles');
+ const button = getByTestId("primary-icon-styles");
- expect(button).not.toHaveStyleRule('text-align', 'left');
- expect(button).toHaveStyleRule('color', 'colorTextPrimary');
+ expect(button).not.toHaveStyleRule("text-align", "left");
+ expect(button).toHaveStyleRule("color", "colorTextPrimary");
});
- it('should have the correct styles for the secondary variant', () => {
- const {getByTestId, getByText} = render(
+ it("should have the correct styles for the secondary variant", () => {
+ const { getByTestId, getByText } = render(
+ ,
);
- const button = getByTestId('secondary-styles');
+ const button = getByTestId("secondary-styles");
- expect(button).not.toHaveStyleRule('text-align', 'left');
- expect(button).toHaveStyleRule('color', 'colorText');
- expect(button).toHaveStyleRule('background-color', 'colorBackgroundBody');
- expect(button).toHaveStyleRule('box-shadow', 'shadowBorderWeak');
+ expect(button).not.toHaveStyleRule("text-align", "left");
+ expect(button).toHaveStyleRule("color", "colorText");
+ expect(button).toHaveStyleRule("background-color", "colorBackgroundBody");
+ expect(button).toHaveStyleRule("box-shadow", "shadowBorderWeak");
- expect(getByText('Secondary')).toHaveStyleRule('justify-content', 'center');
+ expect(getByText("Secondary")).toHaveStyleRule("justify-content", "center");
});
- it('should have the correct styles for the secondary_icon variant', () => {
- const {getByTestId} = render(
+ it("should have the correct styles for the secondary_icon variant", () => {
+ const { getByTestId } = render(
+ ,
);
- const button = getByTestId('secondary-icon-styles');
+ const button = getByTestId("secondary-icon-styles");
- expect(button).not.toHaveStyleRule('text-align', 'left');
- expect(button).toHaveStyleRule('color', 'colorTextIcon');
+ expect(button).not.toHaveStyleRule("text-align", "left");
+ expect(button).toHaveStyleRule("color", "colorTextIcon");
});
- it('should have the correct styles for the destructive variant', () => {
- const {getByTestId, getByText} = render(
+ it("should have the correct styles for the destructive variant", () => {
+ const { getByTestId, getByText } = render(
+ ,
);
- const button = getByTestId('destructive-styles');
+ const button = getByTestId("destructive-styles");
- expect(button).not.toHaveStyleRule('text-align', 'left');
- expect(button).toHaveStyleRule('color', 'colorTextInverse');
- expect(button).toHaveStyleRule('background-color', 'colorBackgroundDestructive');
- expect(button).toHaveStyleRule('box-shadow', 'shadowBorderDestructive');
+ expect(button).not.toHaveStyleRule("text-align", "left");
+ expect(button).toHaveStyleRule("color", "colorTextInverse");
+ expect(button).toHaveStyleRule("background-color", "colorBackgroundDestructive");
+ expect(button).toHaveStyleRule("box-shadow", "shadowBorderDestructive");
- expect(getByText('Destructive')).toHaveStyleRule('justify-content', 'center');
+ expect(getByText("Destructive")).toHaveStyleRule("justify-content", "center");
});
- it('should have the correct styles for the destructive_icon variant', () => {
- const {getByTestId} = render(
+ it("should have the correct styles for the destructive_icon variant", () => {
+ const { getByTestId } = render(
+ ,
);
- const button = getByTestId('destructive-icon-styles');
+ const button = getByTestId("destructive-icon-styles");
- expect(button).not.toHaveStyleRule('text-align', 'left');
- expect(button).toHaveStyleRule('color', 'colorTextDestructive');
+ expect(button).not.toHaveStyleRule("text-align", "left");
+ expect(button).toHaveStyleRule("color", "colorTextDestructive");
});
- it('should have the correct styles for the destructive_secondary variant', () => {
- const {getByTestId, getByText} = render(
+ it("should have the correct styles for the destructive_secondary variant", () => {
+ const { getByTestId, getByText } = render(
+ ,
);
- const button = getByTestId('destructive_secondary-styles');
- expect(button).not.toHaveStyleRule('text-align', 'left');
- expect(button).toHaveStyleRule('color', 'colorTextDestructive');
- expect(button).toHaveStyleRule('background-color', 'colorBackgroundBody');
- expect(button).toHaveStyleRule('box-shadow', 'shadowBorderWeak');
+ const button = getByTestId("destructive_secondary-styles");
+ expect(button).not.toHaveStyleRule("text-align", "left");
+ expect(button).toHaveStyleRule("color", "colorTextDestructive");
+ expect(button).toHaveStyleRule("background-color", "colorBackgroundBody");
+ expect(button).toHaveStyleRule("box-shadow", "shadowBorderWeak");
- expect(getByText('Destructive secondary')).toHaveStyleRule('justify-content', 'center');
+ expect(getByText("Destructive secondary")).toHaveStyleRule("justify-content", "center");
});
- it('should have the correct styles for the destructive_link variant', () => {
- const {getByTestId, getByText} = render(
+ it("should have the correct styles for the destructive_link variant", () => {
+ const { getByTestId, getByText } = render(
+ ,
);
- const button = getByTestId('destructive_link-styles');
+ const button = getByTestId("destructive_link-styles");
- expect(button).toHaveStyleRule('text-align', 'left');
- expect(button).toHaveStyleRule('color', 'colorTextLinkDestructive');
- expect(button).toHaveStyleRule('transition', 'none');
- expect(getByText('Destructive link')).not.toHaveStyleRule('justify-content', 'center');
+ expect(button).toHaveStyleRule("text-align", "left");
+ expect(button).toHaveStyleRule("color", "colorTextLinkDestructive");
+ expect(button).toHaveStyleRule("transition", "none");
+ expect(getByText("Destructive link")).not.toHaveStyleRule("justify-content", "center");
});
- it('should have the correct styles for the link variant', () => {
- const {getByTestId, getByText} = render(
+ it("should have the correct styles for the link variant", () => {
+ const { getByTestId, getByText } = render(
+ ,
);
- const button = getByTestId('link-styles');
+ const button = getByTestId("link-styles");
- expect(button).toHaveStyleRule('text-align', 'left');
- expect(button).toHaveStyleRule('color', 'colorTextPrimary');
- expect(button).toHaveStyleRule('transition', 'none');
+ expect(button).toHaveStyleRule("text-align", "left");
+ expect(button).toHaveStyleRule("color", "colorTextPrimary");
+ expect(button).toHaveStyleRule("transition", "none");
- expect(getByText('Link')).not.toHaveStyleRule('justify-content', 'center');
+ expect(getByText("Link")).not.toHaveStyleRule("justify-content", "center");
});
- it('should have the correct styles for the reset variant', () => {
- const {getByText, getByTestId} = render(
+ it("should have the correct styles for the reset variant", () => {
+ const { getByText, getByTestId } = render(
+ ,
);
- expect(getByText('Reset')).not.toHaveStyleRule('justify-content', 'center');
- expect(getByTestId('reset-styles')).not.toHaveStyleRule('text-align', 'left');
+ expect(getByText("Reset")).not.toHaveStyleRule("justify-content", "center");
+ expect(getByTestId("reset-styles")).not.toHaveStyleRule("text-align", "left");
});
- it('should have the correct styles for a link button in loading state', () => {
- const {getByText, getByTestId} = render(
+ it("should have the correct styles for a link button in loading state", () => {
+ const { getByText, getByTestId } = render(
-
+ ,
);
- const buttonContent = getByText('Loading link');
- const themeWrapper = getByTestId('wrapping-div').firstChild as ChildNode;
+ const buttonContent = getByText("Loading link");
+ const themeWrapper = getByTestId("wrapping-div").firstChild as ChildNode;
const loadingIconWrapper = themeWrapper.lastChild as ChildNode;
- expect(getByTestId('loading-link-styles')).toHaveStyleRule('text-align', 'left');
+ expect(getByTestId("loading-link-styles")).toHaveStyleRule("text-align", "left");
- expect(buttonContent).toHaveStyleRule('opacity', '0');
+ expect(buttonContent).toHaveStyleRule("opacity", "0");
- expect(loadingIconWrapper).toHaveStyleRule('position', 'absolute');
- expect(loadingIconWrapper).toHaveStyleRule('top', '0');
- expect(loadingIconWrapper).toHaveStyleRule('right', '0');
- expect(loadingIconWrapper).toHaveStyleRule('bottom', '0');
- expect(loadingIconWrapper).toHaveStyleRule('left', '0');
- expect(loadingIconWrapper).toHaveStyleRule('display', 'flex');
- expect(loadingIconWrapper).toHaveStyleRule('align-items', 'center');
- expect(loadingIconWrapper).toHaveStyleRule('justify-content', 'center');
+ expect(loadingIconWrapper).toHaveStyleRule("position", "absolute");
+ expect(loadingIconWrapper).toHaveStyleRule("top", "0");
+ expect(loadingIconWrapper).toHaveStyleRule("right", "0");
+ expect(loadingIconWrapper).toHaveStyleRule("bottom", "0");
+ expect(loadingIconWrapper).toHaveStyleRule("left", "0");
+ expect(loadingIconWrapper).toHaveStyleRule("display", "flex");
+ expect(loadingIconWrapper).toHaveStyleRule("align-items", "center");
+ expect(loadingIconWrapper).toHaveStyleRule("justify-content", "center");
});
- it('should have the correct styles for the link variant in disabled state', () => {
- const {getByTestId} = render(
+ it("should have the correct styles for the link variant in disabled state", () => {
+ const { getByTestId } = render(
+ ,
);
- const buttonComponent = getByTestId('disabled-link-styles');
+ const buttonComponent = getByTestId("disabled-link-styles");
- expect(buttonComponent).toHaveStyleRule('text-align', 'left');
- expect(buttonComponent).toHaveStyleRule('color', 'colorTextWeaker');
+ expect(buttonComponent).toHaveStyleRule("text-align", "left");
+ expect(buttonComponent).toHaveStyleRule("color", "colorTextWeaker");
- expect(buttonComponent).toHaveStyleRule('cursor', 'not-allowed');
+ expect(buttonComponent).toHaveStyleRule("cursor", "not-allowed");
});
});
- describe('i18n', () => {
- it('should have showExternal icon text', () => {
+ describe("i18n", () => {
+ it("should have showExternal icon text", () => {
render(
+ ,
);
- const externalAnchor = screen.getByRole('link');
+ const externalAnchor = screen.getByRole("link");
const showExternalIcon = externalAnchor.querySelector('[data-paste-element="ICON"]');
- expect(showExternalIcon?.textContent).toEqual('(link takes you to an external page)');
+ expect(showExternalIcon?.textContent).toEqual("(link takes you to an external page)");
});
- it('should have showExternal icon text when i18nShowExternalLinkLabel prop is used', () => {
+ it("should have showExternal icon text when i18nShowExternalLinkLabel prop is used", () => {
render(
+ ,
);
- const externalAnchor = screen.getByRole('link');
+ const externalAnchor = screen.getByRole("link");
const showExternalIcon = externalAnchor.querySelector('[data-paste-element="ICON"]');
- expect(showExternalIcon?.textContent).toEqual('(este enlace redirige a una página externa)');
+ expect(showExternalIcon?.textContent).toEqual("(este enlace redirige a una página externa)");
});
});
- describe('toggle button', () => {
- it('Does not have aria-pressed attribute when pressed undefined', () => {
- const {getByRole} = render(
+ describe("toggle button", () => {
+ it("Does not have aria-pressed attribute when pressed undefined", () => {
+ const { getByRole } = render(
-
+ ,
);
- const button = getByRole('button');
+ const button = getByRole("button");
- expect(button).not.toHaveAttribute('aria-pressed', 'false');
+ expect(button).not.toHaveAttribute("aria-pressed", "false");
});
- it('Has an aria-pressed attribute when pressed is false', () => {
- const {getByRole} = render(
+ it("Has an aria-pressed attribute when pressed is false", () => {
+ const { getByRole } = render(
-
+ ,
);
- const button = getByRole('button');
+ const button = getByRole("button");
- expect(button).toHaveAttribute('aria-pressed', 'false');
+ expect(button).toHaveAttribute("aria-pressed", "false");
});
- it('Has an aria-pressed attribute when pressed is true', () => {
- const {getByRole} = render(
+ it("Has an aria-pressed attribute when pressed is true", () => {
+ const { getByRole } = render(
-
+ ,
);
- const button = getByRole('button');
+ const button = getByRole("button");
- expect(button).toHaveAttribute('aria-pressed', 'true');
+ expect(button).toHaveAttribute("aria-pressed", "true");
});
});
});
diff --git a/packages/paste-core/components/button/__tests__/customization.test.tsx b/packages/paste-core/components/button/__tests__/customization.test.tsx
index aed07e3f3c..b98f42225c 100644
--- a/packages/paste-core/components/button/__tests__/customization.test.tsx
+++ b/packages/paste-core/components/button/__tests__/customization.test.tsx
@@ -1,75 +1,75 @@
-import * as React from 'react';
-import {render} from '@testing-library/react';
-import {CustomizationProvider} from '@twilio-paste/customization';
-import type {PasteCustomCSS} from '@twilio-paste/customization';
+import { render } from "@testing-library/react";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import type { PasteCustomCSS } from "@twilio-paste/customization";
+import * as React from "react";
-import {AnyButton} from '../stories/customization.stories';
+import { AnyButton } from "../stories/customization.stories";
const customButtonStyles = {
- backgroundColor: 'colorBackgroundBusy',
- borderRadius: 'borderRadius0',
- borderWidth: 'borderWidth40',
- borderColor: 'colorBorderError',
- fontWeight: 'fontWeightLight',
+ backgroundColor: "colorBackgroundBusy",
+ borderRadius: "borderRadius0",
+ borderWidth: "borderWidth40",
+ borderColor: "colorBorderError",
+ fontWeight: "fontWeightLight",
variants: {
- destructive: {backgroundColor: 'colorBackgroundDestructiveStrongest', color: 'colorTextWeaker'},
- link: {padding: 'space40', borderRadius: 'borderRadiusCircle'},
+ destructive: { backgroundColor: "colorBackgroundDestructiveStrongest", color: "colorTextWeaker" },
+ link: { padding: "space40", borderRadius: "borderRadiusCircle" },
destructive_link: {
- padding: 'space40',
- borderRadius: 'borderRadiusCircle',
- backgroundColor: 'colorBackgroundDestructiveWeak',
- color: 'colorTextWarningStrong',
- fontWeight: 'fontWeightBold',
+ padding: "space40",
+ borderRadius: "borderRadiusCircle",
+ backgroundColor: "colorBackgroundDestructiveWeak",
+ color: "colorTextWarningStrong",
+ fontWeight: "fontWeightBold",
},
},
} as PasteCustomCSS;
-describe('Button customization', () => {
- it('should set element data attribute on Button', () => {
- const {getByTestId} = render();
- const button = getByTestId('button_for_customization');
- expect(button.getAttribute('data-paste-element')).toEqual('BUTTON');
+describe("Button customization", () => {
+ it("should set element data attribute on Button", () => {
+ const { getByTestId } = render();
+ const button = getByTestId("button_for_customization");
+ expect(button.getAttribute("data-paste-element")).toEqual("BUTTON");
});
- it('should set custom element data attribute on Button', () => {
- const {getByTestId} = render();
- const button = getByTestId('button_for_customization');
- expect(button.getAttribute('data-paste-element')).toEqual('foo');
+ it("should set custom element data attribute on Button", () => {
+ const { getByTestId } = render();
+ const button = getByTestId("button_for_customization");
+ expect(button.getAttribute("data-paste-element")).toEqual("foo");
});
- it('should add custom styles to Button', () => {
- const {getByTestId} = render(
-
+ it("should add custom styles to Button", () => {
+ const { getByTestId } = render(
+
-
+ ,
);
- const button = getByTestId('button_for_customization');
- expect(button).toHaveStyleRule('background-color', 'rgb(244, 124, 34)');
- expect(button).toHaveStyleRule('border-color', 'rgb(214, 31, 31)');
- expect(button).toHaveStyleRule('font-weight', '400');
+ const button = getByTestId("button_for_customization");
+ expect(button).toHaveStyleRule("background-color", "rgb(244, 124, 34)");
+ expect(button).toHaveStyleRule("border-color", "rgb(214, 31, 31)");
+ expect(button).toHaveStyleRule("font-weight", "400");
});
- it('should add custom styles to Button variants', () => {
- const {getByTestId} = render(
-
+ it("should add custom styles to Button variants", () => {
+ const { getByTestId } = render(
+
-
+ ,
);
- const button = getByTestId('button_for_customization');
- expect(button).toHaveStyleRule('background-color', 'rgb(246, 177, 177)');
- expect(button).toHaveStyleRule('padding', '0.75rem');
- expect(button).toHaveStyleRule('font-weight', '700');
+ const button = getByTestId("button_for_customization");
+ expect(button).toHaveStyleRule("background-color", "rgb(246, 177, 177)");
+ expect(button).toHaveStyleRule("padding", "0.75rem");
+ expect(button).toHaveStyleRule("font-weight", "700");
});
- it('should add custom styles to Button with custom element prop', () => {
- const {getByTestId} = render(
-
+ it("should add custom styles to Button with custom element prop", () => {
+ const { getByTestId } = render(
+
-
+ ,
);
- const button = getByTestId('button_for_customization');
- expect(button).toHaveStyleRule('border-color', 'rgb(214, 31, 31)');
- expect(button).toHaveStyleRule('border-width', '8px');
- expect(button).toHaveStyleRule('border-radius', '0');
+ const button = getByTestId("button_for_customization");
+ expect(button).toHaveStyleRule("border-color", "rgb(214, 31, 31)");
+ expect(button).toHaveStyleRule("border-width", "8px");
+ expect(button).toHaveStyleRule("border-radius", "0");
});
});
diff --git a/packages/paste-core/components/button/build.js b/packages/paste-core/components/button/build.js
index a4edeab49b..27dd98f98e 100644
--- a/packages/paste-core/components/button/build.js
+++ b/packages/paste-core/components/button/build.js
@@ -1,3 +1,3 @@
-const {build} = require('../../../../tools/build/esbuild');
+const { build } = require("../../../../tools/build/esbuild");
-build(require('./package.json'));
+build(require("./package.json"));
diff --git a/packages/paste-core/components/button/src/Button.tsx b/packages/paste-core/components/button/src/Button.tsx
index 7654df968a..bb92720f8f 100644
--- a/packages/paste-core/components/button/src/Button.tsx
+++ b/packages/paste-core/components/button/src/Button.tsx
@@ -1,31 +1,31 @@
-import * as React from 'react';
-import {Box} from '@twilio-paste/box';
-import {Spinner} from '@twilio-paste/spinner';
-import {secureExternalLink} from '@twilio-paste/anchor';
-import {useSpring, animated} from '@twilio-paste/animation-library';
-import {ArrowForwardIcon} from '@twilio-paste/icons/esm/ArrowForwardIcon';
-import {LinkExternalIcon} from '@twilio-paste/icons/esm/LinkExternalIcon';
+import { secureExternalLink } from "@twilio-paste/anchor";
+import { animated, useSpring } from "@twilio-paste/animation-library";
+import { Box } from "@twilio-paste/box";
+import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon";
+import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon";
+import { Spinner } from "@twilio-paste/spinner";
+import * as React from "react";
+import { DestructiveButton } from "./DestructiveButton";
+import { DestructiveIconButton } from "./DestructiveIconButton";
+import { DestructiveLinkButton } from "./DestructiveLinkButton";
+import { DestructiveSecondaryButton } from "./DestructiveSecondaryButton";
+import { InverseButton } from "./InverseButton";
+import { InverseLinkButton } from "./InverseLinkButton";
+import { LinkButton } from "./LinkButton";
+import { PrimaryButton } from "./PrimaryButton";
+import { PrimaryIconButton } from "./PrimaryIconButton";
+import { ResetButton } from "./ResetButton";
+import { SecondaryButton } from "./SecondaryButton";
+import { SecondaryIconButton } from "./SecondaryIconButton";
import type {
+ ButtonContentsProps,
ButtonProps,
ButtonSizes,
- ButtonContentsProps,
- DirectButtonProps,
- ButtonVariants,
ButtonStates,
-} from './types';
-import {PrimaryButton} from './PrimaryButton';
-import {PrimaryIconButton} from './PrimaryIconButton';
-import {SecondaryButton} from './SecondaryButton';
-import {SecondaryIconButton} from './SecondaryIconButton';
-import {DestructiveButton} from './DestructiveButton';
-import {DestructiveIconButton} from './DestructiveIconButton';
-import {DestructiveLinkButton} from './DestructiveLinkButton';
-import {DestructiveSecondaryButton} from './DestructiveSecondaryButton';
-import {LinkButton} from './LinkButton';
-import {InverseButton} from './InverseButton';
-import {InverseLinkButton} from './InverseLinkButton';
-import {ResetButton} from './ResetButton';
+ ButtonVariants,
+ DirectButtonProps,
+} from "./types";
const AnimatedBox = animated(Box);
@@ -36,21 +36,21 @@ const AnimatedBox = animated(Box);
* - 'default' otherwise
*/
const getButtonSize = (variant: ButtonVariants, children: React.ReactNode, size?: ButtonSizes): ButtonSizes => {
- let smartSize: ButtonSizes = 'default';
+ let smartSize: ButtonSizes = "default";
if (size != null) {
smartSize = size;
- } else if (variant === 'link' || variant === 'destructive_link' || variant === 'reset') {
- smartSize = 'reset';
+ } else if (variant === "link" || variant === "destructive_link" || variant === "reset") {
+ smartSize = "reset";
} else if (React.Children.count(children) === 1) {
React.Children.forEach(children, (child) => {
if (
React.isValidElement(child) &&
// @ts-expect-error we know displayName will exist in React
- typeof child.type.displayName === 'string' &&
+ typeof child.type.displayName === "string" &&
// @ts-expect-error we know displayName will exist in React
- child.type.displayName.includes('Icon')
+ child.type.displayName.includes("Icon")
) {
- smartSize = 'icon';
+ smartSize = "icon";
}
});
}
@@ -59,12 +59,12 @@ const getButtonSize = (variant: ButtonVariants, children: React.ReactNode, size?
const getButtonState = (disabled?: boolean, loading?: boolean): ButtonStates => {
if (disabled) {
- return 'disabled';
+ return "disabled";
}
if (loading) {
- return 'loading';
+ return "loading";
}
- return 'default';
+ return "default";
};
const handlePropValidation = ({
@@ -79,21 +79,21 @@ const handlePropValidation = ({
loading,
pressed,
}: ButtonProps): void => {
- const hasHref = href != null && href !== '';
+ const hasHref = href != null && href !== "";
const hasTabIndex = tabIndex != null;
// Link validation
- if (as !== 'a' && hasHref) {
+ if (as !== "a" && hasHref) {
throw new Error(`[Paste: Button] You cannot pass href into a button without the 'a' tag. Use 'as="a"'.`);
}
- if (as === 'a') {
+ if (as === "a") {
if (!hasHref) {
throw new Error(`[Paste: Button] Missing href prop for link button.`);
}
- if (variant === 'link' || variant === 'inverse_link') {
+ if (variant === "link" || variant === "inverse_link") {
throw new Error(`[Paste: Button] Using Button component as an Anchor. Use the Paste Anchor component instead.`);
}
- if (variant !== 'primary' && variant !== 'secondary' && variant !== 'reset' && variant !== 'inverse') {
+ if (variant !== "primary" && variant !== "secondary" && variant !== "reset" && variant !== "inverse") {
throw new Error(`[Paste: Button]
- {chats.map(({id}) => (
+ {chats.map(({ id }) => (
{id}
diff --git a/packages/paste-core/components/chat-log/stories/customization.stories.tsx b/packages/paste-core/components/chat-log/stories/customization.stories.tsx
index be3cddad0d..9c239fd453 100644
--- a/packages/paste-core/components/chat-log/stories/customization.stories.tsx
+++ b/packages/paste-core/components/chat-log/stories/customization.stories.tsx
@@ -1,28 +1,28 @@
-import * as React from 'react';
-import {CustomizationProvider} from '@twilio-paste/customization';
-import {Avatar} from '@twilio-paste/avatar';
-import {DownloadIcon} from '@twilio-paste/icons/esm/DownloadIcon';
-import {useTheme} from '@twilio-paste/theme';
-import type {StoryFn} from '@storybook/react';
+import type { StoryFn } from "@storybook/react";
+import { Avatar } from "@twilio-paste/avatar";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon";
+import { useTheme } from "@twilio-paste/theme";
+import * as React from "react";
import {
- ChatMessage,
- ChatBubble,
- ChatMessageMeta,
- ChatMessageMetaItem,
ChatAttachment,
- ComposerAttachmentCard,
- ChatAttachmentLink,
ChatAttachmentDescription,
+ ChatAttachmentLink,
ChatBookend,
ChatBookendItem,
+ ChatBubble,
ChatEvent,
ChatLog,
-} from '../src';
+ ChatMessage,
+ ChatMessageMeta,
+ ChatMessageMetaItem,
+ ComposerAttachmentCard,
+} from "../src";
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/ChatLog/Customization',
+ title: "Components/ChatLog/Customization",
parameters: {
a11y: {
// no need to a11y check customization
@@ -31,7 +31,7 @@ export default {
},
};
-export const CustomizedMessages: StoryFn = (_args, {parameters: {isTestEnvironment}}) => {
+export const CustomizedMessages: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
const currentTheme = useTheme();
return (
@@ -90,7 +90,7 @@ export const CustomizedMessages: StoryFn = (_args, {parameters: {isTestEnvironme
);
};
-export const CustomizedChatAttachments: StoryFn = (_args, {parameters: {isTestEnvironment}}) => {
+export const CustomizedChatAttachments: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
const currentTheme = useTheme();
return (
@@ -174,7 +174,7 @@ export const CustomizedChatAttachments: StoryFn = (_args, {parameters: {isTestEn
);
};
-export const CustomizedChatBookend: StoryFn = (_args, {parameters: {isTestEnvironment}}) => {
+export const CustomizedChatBookend: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
const currentTheme = useTheme();
return (
@@ -198,7 +198,7 @@ export const CustomizedChatBookend: StoryFn = (_args, {parameters: {isTestEnviro
);
};
-export const CustomizedChatEvent: StoryFn = (_args, {parameters: {isTestEnvironment}}) => {
+export const CustomizedChatEvent: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
const currentTheme = useTheme();
return (
diff --git a/packages/paste-core/components/chat-log/stories/index.stories.tsx b/packages/paste-core/components/chat-log/stories/index.stories.tsx
index e58215557e..0c775c6313 100644
--- a/packages/paste-core/components/chat-log/stories/index.stories.tsx
+++ b/packages/paste-core/components/chat-log/stories/index.stories.tsx
@@ -1,31 +1,31 @@
-import * as React from 'react';
-import {Avatar} from '@twilio-paste/avatar';
-import {Box} from '@twilio-paste/box';
-import {HelpText} from '@twilio-paste/help-text';
-import {Stack} from '@twilio-paste/stack';
-import {Button} from '@twilio-paste/button';
-import {ArrowDownIcon} from '@twilio-paste/icons/esm/ArrowDownIcon';
-import {DownloadIcon} from '@twilio-paste/icons/esm/DownloadIcon';
-import {useUID} from '@twilio-paste/uid-library';
-import type {StoryFn} from '@storybook/react';
+import type { StoryFn } from "@storybook/react";
+import { Avatar } from "@twilio-paste/avatar";
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { HelpText } from "@twilio-paste/help-text";
+import { ArrowDownIcon } from "@twilio-paste/icons/esm/ArrowDownIcon";
+import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon";
+import { Stack } from "@twilio-paste/stack";
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
import {
- ChatMessage,
- ChatBubble,
- ChatMessageMeta,
- ChatMessageMetaItem,
ChatAttachment,
- ChatAttachmentLink,
ChatAttachmentDescription,
- ChatLog,
+ ChatAttachmentLink,
ChatBookend,
ChatBookendItem,
+ ChatBubble,
ChatEvent,
-} from '../src';
+ ChatLog,
+ ChatMessage,
+ ChatMessageMeta,
+ ChatMessageMetaItem,
+} from "../src";
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/ChatLog',
+ title: "Components/ChatLog",
};
export const NewMessagesButton: StoryFn = () => (
@@ -99,7 +99,7 @@ export const ScrollingChatLog: StoryFn = () => {
Quisque ullamcorper ipsum vitae lorem euismod sodales. Donec a nisi eget eros laoreet pellentesque. Donec
sed bibendum justo, at ornare mi. Sed eget tempor metus, sed sagittis lacus. Donec commodo nisi in ligula
- accumsan euismod. Nam ornare lobortis orci, eget rhoncus ligula euismod ut.{' '}
+ accumsan euismod. Nam ornare lobortis orci, eget rhoncus ligula euismod ut.{" "}
Donec sit amet orci hendrerit, varius diam in, porttitor felis.
@@ -188,7 +188,7 @@ export const ExampleChatLog: StoryFn = () => (
Quisque ullamcorper ipsum vitae lorem euismod sodales. Donec a nisi eget eros laoreet pellentesque. Donec sed
bibendum justo, at ornare mi. Sed eget tempor metus, sed sagittis lacus. Donec commodo nisi in ligula accumsan
- euismod. Nam ornare lobortis orci, eget rhoncus ligula euismod ut.{' '}
+ euismod. Nam ornare lobortis orci, eget rhoncus ligula euismod ut.{" "}
}>
diff --git a/packages/paste-core/components/checkbox/__tests__/checkbox.test.tsx b/packages/paste-core/components/checkbox/__tests__/checkbox.test.tsx
index 8eb26c3119..c9ed31a29c 100644
--- a/packages/paste-core/components/checkbox/__tests__/checkbox.test.tsx
+++ b/packages/paste-core/components/checkbox/__tests__/checkbox.test.tsx
@@ -1,232 +1,232 @@
-import * as React from 'react';
-import {render, fireEvent, screen} from '@testing-library/react';
-import {CustomizationProvider} from '@twilio-paste/customization';
-import type {PasteCustomCSS} from '@twilio-paste/customization';
-
-import {Checkbox, CheckboxGroup} from '../src';
-
-const getCustomizationStyles = (element = 'CHECKBOX'): {[key: string]: PasteCustomCSS} => ({
- [`${element}_GROUP`]: {padding: 'space60'},
- [`${element}_GROUP_SET`]: {marginLeft: 'space60'},
- [`${element}_GROUP_FIELD`]: {marginBottom: 'space60'},
- [`${element}_GROUP_ERROR_TEXT_WRAPPER`]: {marginBottom: 'space60'},
- [`${element}`]: {padding: 'space30'},
- [`${element}_CONTROL`]: {borderRadius: 'borderRadius20'},
- [`${element}_ICON`]: {color: 'colorTextIconNeutral'},
- [`${element}_LABEL_TEXT`]: {color: 'colorTextNeutral'},
- [`${element}_HELP_TEXT_WRAPPER`]: {marginBottom: 'space60'},
+import { fireEvent, render, screen } from "@testing-library/react";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import type { PasteCustomCSS } from "@twilio-paste/customization";
+import * as React from "react";
+
+import { Checkbox, CheckboxGroup } from "../src";
+
+const getCustomizationStyles = (element = "CHECKBOX"): { [key: string]: PasteCustomCSS } => ({
+ [`${element}_GROUP`]: { padding: "space60" },
+ [`${element}_GROUP_SET`]: { marginLeft: "space60" },
+ [`${element}_GROUP_FIELD`]: { marginBottom: "space60" },
+ [`${element}_GROUP_ERROR_TEXT_WRAPPER`]: { marginBottom: "space60" },
+ [`${element}`]: { padding: "space30" },
+ [`${element}_CONTROL`]: { borderRadius: "borderRadius20" },
+ [`${element}_ICON`]: { color: "colorTextIconNeutral" },
+ [`${element}_LABEL_TEXT`]: { color: "colorTextNeutral" },
+ [`${element}_HELP_TEXT_WRAPPER`]: { marginBottom: "space60" },
});
const NOOP = (): void => {};
const defaultProps = {
- id: 'foo',
- name: 'foo',
+ id: "foo",
+ name: "foo",
};
const defaultGroupProps = {
- legend: 'This is a group legend',
- name: 'bar',
- value: 'bar',
+ legend: "This is a group legend",
+ name: "bar",
+ value: "bar",
onChange: NOOP,
};
-describe('Checkbox', () => {
- it('should render', () => {
- const {container} = render(foo);
- const checkbox = screen.getByRole('checkbox');
+describe("Checkbox", () => {
+ it("should render", () => {
+ const { container } = render(foo);
+ const checkbox = screen.getByRole("checkbox");
expect(checkbox).not.toBeNull();
expect(checkbox.id).toBeDefined();
const checkIcon = container.querySelector('[data-paste-element="CHECKBOX_ICON"]');
- expect(checkIcon).toHaveStyleRule('display', 'none');
+ expect(checkIcon).toHaveStyleRule("display", "none");
});
- it('should render as invalid', () => {
- const {getByRole} = render(
+ it("should render as invalid", () => {
+ const { getByRole } = render(
foo
-
+ ,
);
- expect(getByRole('checkbox').getAttribute('aria-invalid')).toBeTruthy();
+ expect(getByRole("checkbox").getAttribute("aria-invalid")).toBeTruthy();
});
- it('should use the id prop when passed', () => {
+ it("should use the id prop when passed", () => {
render(
foo
-
+ ,
);
- const checkbox = screen.getByRole('checkbox');
- expect(checkbox.id).toBe('my-id');
+ const checkbox = screen.getByRole("checkbox");
+ expect(checkbox.id).toBe("my-id");
});
- it('should render as checked when defaultChecked', () => {
- const {getByLabelText, container} = render(
+ it("should render as checked when defaultChecked", () => {
+ const { getByLabelText, container } = render(
foo
-
+ ,
);
- expect((getByLabelText('foo') as HTMLInputElement).checked).toBeTruthy();
+ expect((getByLabelText("foo") as HTMLInputElement).checked).toBeTruthy();
const checkIcon = container.querySelector('[data-paste-element="CHECKBOX_ICON"]');
- expect(checkIcon).toHaveStyleRule('display', 'block');
+ expect(checkIcon).toHaveStyleRule("display", "block");
});
- it('should render as checked when controlled', () => {
- const {getByLabelText, container} = render(
+ it("should render as checked when controlled", () => {
+ const { getByLabelText, container } = render(
foo
-
+ ,
);
- expect((getByLabelText('foo') as HTMLInputElement).checked).toBeTruthy();
+ expect((getByLabelText("foo") as HTMLInputElement).checked).toBeTruthy();
const checkIcon = container.querySelector('[data-paste-element="CHECKBOX_ICON"');
- expect(checkIcon).toHaveStyleRule('display', 'block');
+ expect(checkIcon).toHaveStyleRule("display", "block");
});
- it('should render a required dot', () => {
+ it("should render a required dot", () => {
render(
foo
-
+ ,
);
- const label = screen.getByText('foo');
+ const label = screen.getByText("foo");
const requiredDot = label.querySelector('[data-paste-element="REQUIRED_DOT"]');
expect(requiredDot).toBeDefined();
});
- it('should render as indeterminate', () => {
- const {getByLabelText} = render(
+ it("should render as indeterminate", () => {
+ const { getByLabelText } = render(
foo
-
+ ,
);
- expect(getByLabelText('foo').getAttribute('aria-checked')).toBe('mixed');
+ expect(getByLabelText("foo").getAttribute("aria-checked")).toBe("mixed");
});
- it('should render as disabled', () => {
- const {getByLabelText} = render(
+ it("should render as disabled", () => {
+ const { getByLabelText } = render(
foo
-
+ ,
);
- expect((getByLabelText('foo') as HTMLInputElement).disabled).toBeTruthy();
+ expect((getByLabelText("foo") as HTMLInputElement).disabled).toBeTruthy();
});
- it('should render an id', () => {
- const {getByLabelText} = render(foo);
- expect(getByLabelText('foo').id).toBe('foo');
+ it("should render an id", () => {
+ const { getByLabelText } = render(foo);
+ expect(getByLabelText("foo").id).toBe("foo");
});
- it('should render a name', () => {
- const {getByLabelText} = render(foo);
- expect((getByLabelText('foo') as HTMLInputElement).name).toBe('foo');
+ it("should render a name", () => {
+ const { getByLabelText } = render(foo);
+ expect((getByLabelText("foo") as HTMLInputElement).name).toBe("foo");
});
- it('should render aria attributes', () => {
- const {getByLabelText} = render(
+ it("should render aria attributes", () => {
+ const { getByLabelText } = render(
foo
-
+ ,
);
- expect(getByLabelText('foo').getAttribute('aria-label')).toBe('foo');
- expect(getByLabelText('foo').getAttribute('aria-labelledby')).toBe('bar');
- expect(getByLabelText('foo').getAttribute('aria-busy')).toBe('true');
+ expect(getByLabelText("foo").getAttribute("aria-label")).toBe("foo");
+ expect(getByLabelText("foo").getAttribute("aria-labelledby")).toBe("bar");
+ expect(getByLabelText("foo").getAttribute("aria-busy")).toBe("true");
});
- it('renders a helpText message when helpText prop is present', () => {
- const helpText = 'I am a helpText message';
- const {getByText} = render(
+ it("renders a helpText message when helpText prop is present", () => {
+ const helpText = "I am a helpText message";
+ const { getByText } = render(
foo
-
+ ,
);
expect(getByText(helpText)).toBeDefined();
});
});
-describe('Checkbox Group', () => {
- it('should render', () => {
- const {container} = render(
+describe("Checkbox Group", () => {
+ it("should render", () => {
+ const { container } = render(
foo
-
+ ,
);
- expect(container.querySelector('fieldset')).not.toBeNull();
+ expect(container.querySelector("fieldset")).not.toBeNull();
});
- it('should render a legend', () => {
- const {getByText} = render(
+ it("should render a legend", () => {
+ const { getByText } = render(
foo
-
+ ,
);
- expect(getByText('This is a group legend')).not.toBeNull();
+ expect(getByText("This is a group legend")).not.toBeNull();
});
- it('should have a required a required dot in the legend', () => {
+ it("should have a required a required dot in the legend", () => {
render(
foo
-
+ ,
);
- const fieldset = screen.getByRole('group');
+ const fieldset = screen.getByRole("group");
const requiredDot = fieldset.querySelector('[data-paste-element="LEGEND_REQUIRED_DOT"]');
expect(requiredDot).toBeDefined();
});
- it('should render a name', () => {
- const {getByRole} = render(
+ it("should render a name", () => {
+ const { getByRole } = render(
foo
-
+ ,
);
- expect((getByRole('checkbox') as HTMLInputElement).name).toBe(defaultProps.name);
+ expect((getByRole("checkbox") as HTMLInputElement).name).toBe(defaultProps.name);
});
- it('should render a disabled checkbox in the checkbox group', () => {
- const {getByRole} = render(
+ it("should render a disabled checkbox in the checkbox group", () => {
+ const { getByRole } = render(
foo
-
+ ,
);
- expect((getByRole('checkbox') as HTMLInputElement).disabled).toBeTruthy();
+ expect((getByRole("checkbox") as HTMLInputElement).disabled).toBeTruthy();
});
- it('renders a helpText message when helpText prop is present', () => {
- const helpText = 'I am a helpText message';
- const {getByText} = render(
+ it("renders a helpText message when helpText prop is present", () => {
+ const helpText = "I am a helpText message";
+ const { getByText } = render(
foo
-
+ ,
);
expect(getByText(helpText)).toBeDefined();
});
- it('renders an errorText message when errorText prop is present', () => {
- const errorText = 'I am an errorText message';
- const {getByText} = render(
+ it("renders an errorText message when errorText prop is present", () => {
+ const errorText = "I am an errorText message";
+ const { getByText } = render(
foo
-
+ ,
);
expect(getByText(errorText)).toBeDefined();
});
});
-describe('Checkbox event handlers', () => {
- it('Should call the appropriate event handlers', () => {
+describe("Checkbox event handlers", () => {
+ it("Should call the appropriate event handlers", () => {
const onChangeMock: jest.Mock = jest.fn();
const onFocusMock: jest.Mock = jest.fn();
const onBlurMock: jest.Mock = jest.fn();
- const {getByTestId} = render(
+ const { getByTestId } = render(
{
onBlur={onBlurMock}
>
foo
-
+ ,
);
- fireEvent.click(getByTestId('checkbox-button'));
+ fireEvent.click(getByTestId("checkbox-button"));
expect(onChangeMock).toHaveBeenCalledTimes(1);
- fireEvent.focus(getByTestId('checkbox-button'));
+ fireEvent.focus(getByTestId("checkbox-button"));
expect(onFocusMock).toHaveBeenCalledTimes(1);
- fireEvent.blur(getByTestId('checkbox-button'));
+ fireEvent.blur(getByTestId("checkbox-button"));
expect(onBlurMock).toHaveBeenCalledTimes(1);
});
- it('Should not call onChange handler when uncontrolled', () => {
+ it("Should not call onChange handler when uncontrolled", () => {
const onChangeMock: jest.Mock = jest.fn();
- const {getByTestId} = render(
+ const { getByTestId } = render(
foo
-
+ ,
);
- fireEvent.click(getByTestId('checkbox-button'));
+ fireEvent.click(getByTestId("checkbox-button"));
expect(onChangeMock).toHaveBeenCalledTimes(0);
});
- it('Should check the checkbox when controlled', () => {
+ it("Should check the checkbox when controlled", () => {
const MockCheckBox = (): JSX.Element => {
const [checked, setChecked] = React.useState(false);
return (
@@ -279,13 +279,13 @@ describe('Checkbox event handlers', () => {
);
};
- const {getByTestId} = render();
+ const { getByTestId } = render();
- fireEvent.click(getByTestId('checkbox-button'));
- expect((getByTestId('checkbox-button') as HTMLInputElement).checked).toBe(true);
+ fireEvent.click(getByTestId("checkbox-button"));
+ expect((getByTestId("checkbox-button") as HTMLInputElement).checked).toBe(true);
});
- it('Should check the checkbox when uncontrolled', () => {
+ it("Should check the checkbox when uncontrolled", () => {
const MockCheckBox = (): JSX.Element => {
return (
@@ -294,24 +294,24 @@ describe('Checkbox event handlers', () => {
);
};
- const {getByTestId} = render();
+ const { getByTestId } = render();
- fireEvent.click(getByTestId('checkbox-button'));
- expect((getByTestId('checkbox-button') as HTMLInputElement).checked).toBe(true);
+ fireEvent.click(getByTestId("checkbox-button"));
+ expect((getByTestId("checkbox-button") as HTMLInputElement).checked).toBe(true);
});
});
-describe('Customization', () => {
- it('Should set an element data attribute for Checkbox', (): void => {
- const {container} = render(
+describe("Customization", () => {
+ it("Should set an element data attribute for Checkbox", (): void => {
+ const { container } = render(
foo
-
+ ,
);
- expect(screen.getByTestId('checkbox-group')).toHaveAttribute('data-paste-element', 'CHECKBOX_GROUP');
+ expect(screen.getByTestId("checkbox-group")).toHaveAttribute("data-paste-element", "CHECKBOX_GROUP");
expect(container.querySelector('[data-paste-element="CHECKBOX_GROUP_SET"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="CHECKBOX_GROUP_FIELD"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="CHECKBOX_GROUP_ERROR_TEXT_WRAPPER"]')).toBeInTheDocument();
@@ -321,16 +321,16 @@ describe('Customization', () => {
expect(container.querySelector('[data-paste-element="CHECKBOX_LABEL_TEXT"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="CHECKBOX_HELP_TEXT_WRAPPER"]')).toBeInTheDocument();
});
- it('Should set a custom element data attribute on Checkbox', (): void => {
- const {container} = render(
+ it("Should set a custom element data attribute on Checkbox", (): void => {
+ const { container } = render(
foo
-
+ ,
);
- expect(screen.getByTestId('checkbox-group')).toHaveAttribute('data-paste-element', 'MY_CHECKBOX_GROUP');
+ expect(screen.getByTestId("checkbox-group")).toHaveAttribute("data-paste-element", "MY_CHECKBOX_GROUP");
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_GROUP_SET"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_GROUP_FIELD"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_GROUP_ERROR_TEXT_WRAPPER"]')).toBeInTheDocument();
@@ -341,45 +341,45 @@ describe('Customization', () => {
expect(container.querySelector('[data-paste-element="SPECIAL_CHECKBOX_HELP_TEXT_WRAPPER"]')).toBeInTheDocument();
});
- it('should add custom styling to default Checkbox', (): void => {
- const {container} = render(
+ it("should add custom styling to default Checkbox", (): void => {
+ const { container } = render(
foo
-
+ ,
);
- expect(screen.getByTestId('checkbox-group')).toHaveStyleRule('padding', '1.25rem');
+ expect(screen.getByTestId("checkbox-group")).toHaveStyleRule("padding", "1.25rem");
expect(container.querySelector('[data-paste-element="CHECKBOX_GROUP_SET"]')).toHaveStyleRule(
- 'margin-left',
- '1.25rem'
+ "margin-left",
+ "1.25rem",
);
expect(container.querySelector('[data-paste-element="CHECKBOX_GROUP_FIELD"]')).toHaveStyleRule(
- 'margin-bottom',
- '1.25rem'
+ "margin-bottom",
+ "1.25rem",
);
expect(container.querySelector('[data-paste-element="CHECKBOX_GROUP_ERROR_TEXT_WRAPPER"]')).toHaveStyleRule(
- 'margin-bottom',
- '1.25rem'
+ "margin-bottom",
+ "1.25rem",
);
- expect(container.querySelector('[data-paste-element="CHECKBOX"]')).toHaveStyleRule('padding', '0.5rem');
- expect(container.querySelector('[data-paste-element="CHECKBOX_CONTROL"]')).toHaveStyleRule('border-radius', '4px');
- expect(container.querySelector('[data-paste-element="CHECKBOX_ICON"]')).toHaveStyleRule('color', 'rgb(0, 20, 137)');
+ expect(container.querySelector('[data-paste-element="CHECKBOX"]')).toHaveStyleRule("padding", "0.5rem");
+ expect(container.querySelector('[data-paste-element="CHECKBOX_CONTROL"]')).toHaveStyleRule("border-radius", "4px");
+ expect(container.querySelector('[data-paste-element="CHECKBOX_ICON"]')).toHaveStyleRule("color", "rgb(0, 20, 137)");
expect(container.querySelector('[data-paste-element="CHECKBOX_LABEL_TEXT"]')).toHaveStyleRule(
- 'color',
- 'rgb(0, 20, 137)'
+ "color",
+ "rgb(0, 20, 137)",
);
expect(container.querySelector('[data-paste-element="CHECKBOX_HELP_TEXT_WRAPPER"]')).toHaveStyleRule(
- 'margin-bottom',
- '1.25rem'
+ "margin-bottom",
+ "1.25rem",
);
});
- it('should add custom styling to a custom named Checkbox', (): void => {
- const {container} = render(
-
+ it("should add custom styling to a custom named Checkbox", (): void => {
+ const { container } = render(
+
{
foo
-
+ ,
);
- expect(screen.getByTestId('checkbox-group')).toHaveStyleRule('padding', '1.25rem');
+ expect(screen.getByTestId("checkbox-group")).toHaveStyleRule("padding", "1.25rem");
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_GROUP_SET"]')).toHaveStyleRule(
- 'margin-left',
- '1.25rem'
+ "margin-left",
+ "1.25rem",
);
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_GROUP_FIELD"]')).toHaveStyleRule(
- 'margin-bottom',
- '1.25rem'
+ "margin-bottom",
+ "1.25rem",
);
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_GROUP_ERROR_TEXT_WRAPPER"]')).toHaveStyleRule(
- 'margin-bottom',
- '1.25rem'
+ "margin-bottom",
+ "1.25rem",
);
- expect(container.querySelector('[data-paste-element="MY_CHECKBOX"]')).toHaveStyleRule('padding', '0.5rem');
+ expect(container.querySelector('[data-paste-element="MY_CHECKBOX"]')).toHaveStyleRule("padding", "0.5rem");
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_CONTROL"]')).toHaveStyleRule(
- 'border-radius',
- '4px'
+ "border-radius",
+ "4px",
);
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_ICON"]')).toHaveStyleRule(
- 'color',
- 'rgb(0, 20, 137)'
+ "color",
+ "rgb(0, 20, 137)",
);
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_LABEL_TEXT"]')).toHaveStyleRule(
- 'color',
- 'rgb(0, 20, 137)'
+ "color",
+ "rgb(0, 20, 137)",
);
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_HELP_TEXT_WRAPPER"]')).toHaveStyleRule(
- 'margin-bottom',
- '1.25rem'
+ "margin-bottom",
+ "1.25rem",
);
});
});
-describe('i18n', () => {
- it('Should have default text for the required dot in the legend', () => {
+describe("i18n", () => {
+ it("Should have default text for the required dot in the legend", () => {
render(
foo
-
+ ,
);
- const fieldset = screen.getByRole('group');
+ const fieldset = screen.getByRole("group");
const requiredDot = fieldset.querySelector('[data-paste-element="LEGEND_REQUIRED_DOT"]');
- expect(requiredDot?.textContent).toEqual('(required)');
+ expect(requiredDot?.textContent).toEqual("(required)");
});
- it('Should use the i18nRequiredLabel prop for the required dot in the legend', () => {
+ it("Should use the i18nRequiredLabel prop for the required dot in the legend", () => {
render(
foo
-
+ ,
);
- const fieldset = screen.getByRole('group');
+ const fieldset = screen.getByRole("group");
const requiredDot = fieldset.querySelector('[data-paste-element="LEGEND_REQUIRED_DOT"]');
- expect(requiredDot?.textContent).toEqual('(requis)');
+ expect(requiredDot?.textContent).toEqual("(requis)");
});
});
diff --git a/packages/paste-core/components/checkbox/__tests__/checkboxdisclaimer.test.tsx b/packages/paste-core/components/checkbox/__tests__/checkboxdisclaimer.test.tsx
index 756aaea705..d5e3287e53 100644
--- a/packages/paste-core/components/checkbox/__tests__/checkboxdisclaimer.test.tsx
+++ b/packages/paste-core/components/checkbox/__tests__/checkboxdisclaimer.test.tsx
@@ -1,115 +1,115 @@
-import * as React from 'react';
-import {render} from '@testing-library/react';
-import {CustomizationProvider} from '@twilio-paste/customization';
+import { render } from "@testing-library/react";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import * as React from "react";
-import {CheckboxDisclaimer} from '../src';
+import { CheckboxDisclaimer } from "../src";
const defaultProps = {
- id: 'foo',
- name: 'foo',
- value: 'foo',
+ id: "foo",
+ name: "foo",
+ value: "foo",
};
-describe('Checkbox Disclaimer', () => {
- it('should render', () => {
- const {getByRole} = render(foo);
- expect(getByRole('checkbox')).not.toBeNull();
+describe("Checkbox Disclaimer", () => {
+ it("should render", () => {
+ const { getByRole } = render(foo);
+ expect(getByRole("checkbox")).not.toBeNull();
});
- it('should render a required dot', () => {
- const {getByText} = render(
+ it("should render a required dot", () => {
+ const { getByText } = render(
foo
-
+ ,
);
- const label = getByText('foo');
+ const label = getByText("foo");
const requiredDot = label.querySelector('[data-paste-element="REQUIRED_DOT"]');
expect(requiredDot).toBeDefined();
});
- it('renders a errorText message when errorText prop is present', () => {
- const errorText = 'This is the error text.';
- const {getByText} = render(
+ it("renders a errorText message when errorText prop is present", () => {
+ const errorText = "This is the error text.";
+ const { getByText } = render(
foo
-
+ ,
);
expect(getByText(errorText)).toBeDefined();
});
});
-describe('Customization', () => {
- it('Should set a default element data attribute Checkbox Disclaimer', () => {
- const {container} = render(
+describe("Customization", () => {
+ it("Should set a default element data attribute Checkbox Disclaimer", () => {
+ const { container } = render(
foo
-
+ ,
);
expect(container.querySelector('[data-paste-element="CHECKBOX_DISCLAIMER"]')).toBeInTheDocument();
expect(
- container.querySelector('[data-paste-element="CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]')
+ container.querySelector('[data-paste-element="CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]'),
).toBeInTheDocument();
});
- it('Should set a custom element data attribute for a custom named Checkbox Disclaimer', () => {
- const {container} = render(
+ it("Should set a custom element data attribute for a custom named Checkbox Disclaimer", () => {
+ const { container } = render(
foo
-
+ ,
);
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_DISCLAIMER"]')).toBeInTheDocument();
expect(
- container.querySelector('[data-paste-element="MY_CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]')
+ container.querySelector('[data-paste-element="MY_CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]'),
).toBeInTheDocument();
});
- it('Should add custom styling to a default Checkbox Disclaimer', () => {
- const {container} = render(
+ it("Should add custom styling to a default Checkbox Disclaimer", () => {
+ const { container } = render(
foo
-
+ ,
);
expect(container.querySelector('[data-paste-element="CHECKBOX_DISCLAIMER"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(254, 236, 236)'
+ "background-color",
+ "rgb(254, 236, 236)",
);
expect(container.querySelector('[data-paste-element="CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]')).toHaveStyleRule(
- 'margin-top',
- '1.25rem'
+ "margin-top",
+ "1.25rem",
);
});
- it('Should add custom styling to a custom named Checkbox Disclaimer', () => {
- const {container} = render(
+ it("Should add custom styling to a custom named Checkbox Disclaimer", () => {
+ const { container } = render(
foo
-
+ ,
);
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_DISCLAIMER"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(254, 236, 236)'
+ "background-color",
+ "rgb(254, 236, 236)",
);
expect(container.querySelector('[data-paste-element="MY_CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]')).toHaveStyleRule(
- 'margin-top',
- '1.25rem'
+ "margin-top",
+ "1.25rem",
);
});
});
diff --git a/packages/paste-core/components/checkbox/build.js b/packages/paste-core/components/checkbox/build.js
index a4edeab49b..27dd98f98e 100644
--- a/packages/paste-core/components/checkbox/build.js
+++ b/packages/paste-core/components/checkbox/build.js
@@ -1,3 +1,3 @@
-const {build} = require('../../../../tools/build/esbuild');
+const { build } = require("../../../../tools/build/esbuild");
-build(require('./package.json'));
+build(require("./package.json"));
diff --git a/packages/paste-core/components/checkbox/src/Checkbox.tsx b/packages/paste-core/components/checkbox/src/Checkbox.tsx
index d509eaffc2..9cc48b0883 100644
--- a/packages/paste-core/components/checkbox/src/Checkbox.tsx
+++ b/packages/paste-core/components/checkbox/src/Checkbox.tsx
@@ -1,41 +1,41 @@
-import * as React from 'react';
-import {useUID} from '@twilio-paste/uid-library';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import type {BoxProps} from '@twilio-paste/box';
-import {CheckboxCheckIcon} from '@twilio-paste/icons/esm/CheckboxCheckIcon';
-import {MinusIcon} from '@twilio-paste/icons/esm/MinusIcon';
import {
BaseRadioCheckboxControl,
+ BaseRadioCheckboxHelpText,
BaseRadioCheckboxLabel,
BaseRadioCheckboxLabelText,
- BaseRadioCheckboxHelpText,
-} from '@twilio-paste/base-radio-checkbox';
-import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';
-import {RequiredDot} from '@twilio-paste/label';
-import type {HTMLPasteProps} from '@twilio-paste/types';
-
-import {CheckboxContext} from './CheckboxContext';
+} from "@twilio-paste/base-radio-checkbox";
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
+import { CheckboxCheckIcon } from "@twilio-paste/icons/esm/CheckboxCheckIcon";
+import { MinusIcon } from "@twilio-paste/icons/esm/MinusIcon";
+import { RequiredDot } from "@twilio-paste/label";
+import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
+
+import { CheckboxContext } from "./CheckboxContext";
const selectAllStyleProps = {
- paddingTop: 'space20',
- paddingRight: 'space30',
- paddingBottom: 'space20',
- paddingLeft: 'space30',
- borderRadius: 'borderRadius10',
- backgroundColor: 'colorBackground',
+ paddingTop: "space20",
+ paddingRight: "space30",
+ paddingBottom: "space20",
+ paddingLeft: "space30",
+ borderRadius: "borderRadius10",
+ backgroundColor: "colorBackground",
};
const selectAllActiveStyleProps = {
...selectAllStyleProps,
- backgroundColor: 'colorBackground',
+ backgroundColor: "colorBackground",
};
const selectAllChildStyleProps = {
- paddingLeft: 'space30',
- paddingRight: 'space30',
+ paddingLeft: "space30",
+ paddingRight: "space30",
};
-export interface CheckboxProps extends HTMLPasteProps<'input'>, Pick {
+export interface CheckboxProps extends HTMLPasteProps<"input">, Pick {
children: NonNullable;
hasError?: boolean;
helpText?: string | React.ReactNode;
@@ -49,16 +49,16 @@ export interface CheckboxProps extends HTMLPasteProps<'input'>, Pick;
const HiddenCheckbox = React.forwardRef((props, ref) => (
((
/>
));
-HiddenCheckbox.displayName = 'HiddenCheckbox';
+HiddenCheckbox.displayName = "HiddenCheckbox";
const CheckboxIcon: React.FC<{
indeterminate: boolean | undefined;
checked: boolean | undefined;
- element: BoxProps['element'];
-}> = ({checked, element, indeterminate}) => {
+ element: BoxProps["element"];
+}> = ({ checked, element, indeterminate }) => {
if (indeterminate) {
return ;
}
return (
(
(
{
checked,
defaultChecked,
- element = 'CHECKBOX',
+ element = "CHECKBOX",
children,
helpText,
id,
@@ -117,11 +117,11 @@ const Checkbox = React.forwardRef(
onChange,
...props
},
- ref
+ ref,
) => {
if (checked != null && defaultChecked != null) {
throw new Error(
- `[Paste Checkbox] Do not provide both 'defaultChecked' and 'checked' to Checkbox at the same time. Please consider if you want this component to be controlled or uncontrolled.`
+ `[Paste Checkbox] Do not provide both 'defaultChecked' and 'checked' to Checkbox at the same time. Please consider if you want this component to be controlled or uncontrolled.`,
);
}
@@ -150,7 +150,7 @@ const Checkbox = React.forwardRef(
checkboxGroupContext.onChange(event);
}
},
- [onChange, checkboxGroupContext.onChange]
+ [onChange, checkboxGroupContext.onChange],
);
// Prioritizing direct props values over whatever CheckboxGroupContext passes down
@@ -177,7 +177,7 @@ const Checkbox = React.forwardRef(
name={name}
onChange={handleChange}
aria-describedby={helpTextId}
- aria-checked={indeterminate ? 'mixed' : checked}
+ aria-checked={indeterminate ? "mixed" : checked}
aria-invalid={hasError}
id={checkboxId}
required={required}
@@ -196,7 +196,7 @@ const Checkbox = React.forwardRef(
{required && (
@@ -215,8 +215,8 @@ const Checkbox = React.forwardRef(
)}
);
- }
+ },
);
-Checkbox.displayName = 'Checkbox';
+Checkbox.displayName = "Checkbox";
-export {Checkbox, HiddenCheckbox, CheckboxIcon};
+export { Checkbox, HiddenCheckbox, CheckboxIcon };
diff --git a/packages/paste-core/components/checkbox/src/CheckboxContext.tsx b/packages/paste-core/components/checkbox/src/CheckboxContext.tsx
index 04ec068dbc..1e7c227018 100644
--- a/packages/paste-core/components/checkbox/src/CheckboxContext.tsx
+++ b/packages/paste-core/components/checkbox/src/CheckboxContext.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
interface CheckboxContextValue {
disabled: boolean;
@@ -15,4 +15,4 @@ const CheckboxContext = React.createContext({
onChange: () => {},
});
-export {CheckboxContext};
+export { CheckboxContext };
diff --git a/packages/paste-core/components/checkbox/src/CheckboxDisclaimer.tsx b/packages/paste-core/components/checkbox/src/CheckboxDisclaimer.tsx
index f02197dabe..8ebcd615b8 100644
--- a/packages/paste-core/components/checkbox/src/CheckboxDisclaimer.tsx
+++ b/packages/paste-core/components/checkbox/src/CheckboxDisclaimer.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import {Box} from '@twilio-paste/box';
-import {HelpText} from '@twilio-paste/help-text';
+import { Box } from "@twilio-paste/box";
+import { HelpText } from "@twilio-paste/help-text";
+import * as React from "react";
-import {Checkbox} from './Checkbox';
-import type {CheckboxProps} from './Checkbox';
+import { Checkbox } from "./Checkbox";
+import type { CheckboxProps } from "./Checkbox";
export interface CheckboxDisclaimerProps
- extends Omit {
+ extends Omit {
children: NonNullable;
errorText?: string | React.ReactNode;
}
const CheckboxDisclaimer = React.forwardRef(
- ({children, element = 'CHECKBOX_DISCLAIMER', errorText, ...props}, ref) => {
+ ({ children, element = "CHECKBOX_DISCLAIMER", errorText, ...props }, ref) => {
return (
<>
@@ -27,9 +27,9 @@ const CheckboxDisclaimer = React.forwardRef
);
- }
+ },
);
-CheckboxDisclaimer.displayName = 'CheckboxDisclaimer';
+CheckboxDisclaimer.displayName = "CheckboxDisclaimer";
-export {CheckboxDisclaimer};
+export { CheckboxDisclaimer };
diff --git a/packages/paste-core/components/checkbox/src/CheckboxGroup.tsx b/packages/paste-core/components/checkbox/src/CheckboxGroup.tsx
index 1115a62e7b..9de149382f 100644
--- a/packages/paste-core/components/checkbox/src/CheckboxGroup.tsx
+++ b/packages/paste-core/components/checkbox/src/CheckboxGroup.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {InlineControlGroup} from '@twilio-paste/inline-control-group';
-import type {InlineControlGroupProps} from '@twilio-paste/inline-control-group';
+import { InlineControlGroup } from "@twilio-paste/inline-control-group";
+import type { InlineControlGroupProps } from "@twilio-paste/inline-control-group";
+import * as React from "react";
-import type {CheckboxProps} from './Checkbox';
-import {CheckboxContext} from './CheckboxContext';
+import type { CheckboxProps } from "./Checkbox";
+import { CheckboxContext } from "./CheckboxContext";
export interface CheckboxGroupProps extends InlineControlGroupProps {
isSelectAll?: boolean;
@@ -16,17 +16,17 @@ const CheckboxGroup = React.forwardRef(
(
{
children,
- element = 'CHECKBOX_GROUP',
+ element = "CHECKBOX_GROUP",
disabled = false,
errorText,
isSelectAll = false,
name,
onChange,
- orientation = 'vertical',
- i18nRequiredLabel = '(required)',
+ orientation = "vertical",
+ i18nRequiredLabel = "(required)",
...props
},
- ref
+ ref,
) => {
const onChangeHandler = React.useCallback(
(event: React.ChangeEvent): void => {
@@ -34,7 +34,7 @@ const CheckboxGroup = React.forwardRef(
onChange(event.target.checked);
}
},
- [onChange]
+ [onChange],
);
const contextValue = React.useMemo(() => {
@@ -62,16 +62,16 @@ const CheckboxGroup = React.forwardRef(
return React.isValidElement(child)
? React.cloneElement(child as React.ReactElement, {
isSelectAll: isSelectAll && index === 0,
- isSelectAllChild: isSelectAll && orientation === 'vertical' && index !== 0,
+ isSelectAllChild: isSelectAll && orientation === "vertical" && index !== 0,
})
: child;
})}
);
- }
+ },
);
-CheckboxGroup.displayName = 'CheckboxGroup';
+CheckboxGroup.displayName = "CheckboxGroup";
-export {CheckboxGroup};
+export { CheckboxGroup };
diff --git a/packages/paste-core/components/checkbox/src/index.tsx b/packages/paste-core/components/checkbox/src/index.tsx
index ed33472e25..009b59ba48 100644
--- a/packages/paste-core/components/checkbox/src/index.tsx
+++ b/packages/paste-core/components/checkbox/src/index.tsx
@@ -1,3 +1,3 @@
-export * from './Checkbox';
-export * from './CheckboxGroup';
-export * from './CheckboxDisclaimer';
+export * from "./Checkbox";
+export * from "./CheckboxGroup";
+export * from "./CheckboxDisclaimer";
diff --git a/packages/paste-core/components/checkbox/stories/checkbox.stories.tsx b/packages/paste-core/components/checkbox/stories/checkbox.stories.tsx
index 2f5301588f..07739f0df0 100644
--- a/packages/paste-core/components/checkbox/stories/checkbox.stories.tsx
+++ b/packages/paste-core/components/checkbox/stories/checkbox.stories.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import {useUID} from '@twilio-paste/uid-library';
-import {Anchor} from '@twilio-paste/anchor';
-import {Stack} from '@twilio-paste/stack';
-import {Text} from '@twilio-paste/text';
+import { Anchor } from "@twilio-paste/anchor";
+import { Stack } from "@twilio-paste/stack";
+import { Text } from "@twilio-paste/text";
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
-import {Checkbox, CheckboxGroup, CheckboxDisclaimer} from '../src';
+import { Checkbox, CheckboxDisclaimer, CheckboxGroup } from "../src";
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/Checkbox',
+ title: "Components/Checkbox",
component: Checkbox,
- subcomponents: {CheckboxGroup, CheckboxDisclaimer},
+ subcomponents: { CheckboxGroup, CheckboxDisclaimer },
};
export const DefaultCheckbox = (): React.ReactNode => {
@@ -20,7 +20,7 @@ export const DefaultCheckbox = (): React.ReactNode => {
);
};
-DefaultCheckbox.storyName = 'Checkbox';
+DefaultCheckbox.storyName = "Checkbox";
export const CheckboxChecked = (): React.ReactNode => {
const [checked, setChecked] = React.useState(true);
@@ -39,7 +39,7 @@ export const CheckboxChecked = (): React.ReactNode => {
);
};
-CheckboxChecked.storyName = 'Checkbox - Checked';
+CheckboxChecked.storyName = "Checkbox - Checked";
export const CheckboxWithNoID = (): React.ReactNode => {
const [checked, setChecked] = React.useState(true);
@@ -57,7 +57,7 @@ export const CheckboxWithNoID = (): React.ReactNode => {
);
};
-CheckboxWithNoID.storyName = 'Checkbox - With no ID';
+CheckboxWithNoID.storyName = "Checkbox - With no ID";
export const CheckboxDefaultChecked = (): React.ReactNode => {
return (
@@ -66,7 +66,7 @@ export const CheckboxDefaultChecked = (): React.ReactNode => {
);
};
-CheckboxDefaultChecked.storyName = 'Checkbox - defaultChecked';
+CheckboxDefaultChecked.storyName = "Checkbox - defaultChecked";
export const CheckboxRequired = (): React.ReactNode => {
return (
@@ -76,7 +76,7 @@ export const CheckboxRequired = (): React.ReactNode => {
);
};
-CheckboxRequired.storyName = 'Checkbox - Required';
+CheckboxRequired.storyName = "Checkbox - Required";
export const CheckboxDisabled = (): React.ReactNode => {
return (
@@ -86,7 +86,7 @@ export const CheckboxDisabled = (): React.ReactNode => {
);
};
-CheckboxDisabled.storyName = 'Checkbox - Disabled';
+CheckboxDisabled.storyName = "Checkbox - Disabled";
export const CheckboxDisabledChecked = (): React.ReactNode => {
const [checked, setChecked] = React.useState(true);
@@ -106,7 +106,7 @@ export const CheckboxDisabledChecked = (): React.ReactNode => {
);
};
-CheckboxDisabledChecked.storyName = 'Checkbox - Disabled & Checked';
+CheckboxDisabledChecked.storyName = "Checkbox - Disabled & Checked";
export const CheckboxError = (): React.ReactNode => {
return (
@@ -116,7 +116,7 @@ export const CheckboxError = (): React.ReactNode => {
);
};
-CheckboxError.storyName = 'Checkbox - Error';
+CheckboxError.storyName = "Checkbox - Error";
export const CheckboxErrorChecked = (): React.ReactNode => {
const [checked, setChecked] = React.useState(true);
@@ -136,7 +136,7 @@ export const CheckboxErrorChecked = (): React.ReactNode => {
);
};
-CheckboxErrorChecked.storyName = 'Checkbox - Error & Checked';
+CheckboxErrorChecked.storyName = "Checkbox - Error & Checked";
export const CheckboxErrorDisabled = (): React.ReactNode => {
return (
@@ -146,7 +146,7 @@ export const CheckboxErrorDisabled = (): React.ReactNode => {
);
};
-CheckboxErrorDisabled.storyName = 'Checkbox - Error & Disabled';
+CheckboxErrorDisabled.storyName = "Checkbox - Error & Disabled";
export const CheckboxErrorDisabledChecked = (): React.ReactNode => {
return (
@@ -156,7 +156,7 @@ export const CheckboxErrorDisabledChecked = (): React.ReactNode => {
);
};
-CheckboxErrorDisabledChecked.storyName = 'Checkbox - Error & Disabled & Checked';
+CheckboxErrorDisabledChecked.storyName = "Checkbox - Error & Disabled & Checked";
export const CheckboxHelpTextString = (): React.ReactNode => {
return (
@@ -166,7 +166,7 @@ export const CheckboxHelpTextString = (): React.ReactNode => {
);
};
-CheckboxHelpTextString.storyName = 'Checkbox - Help text string';
+CheckboxHelpTextString.storyName = "Checkbox - Help text string";
export const CheckboxHelpTextChildren = (): React.ReactNode => {
return (
@@ -185,7 +185,7 @@ export const CheckboxHelpTextChildren = (): React.ReactNode => {
);
};
-CheckboxHelpTextChildren.storyName = 'Checkbox - Help text children';
+CheckboxHelpTextChildren.storyName = "Checkbox - Help text children";
export const CheckboxSelectAll = (): React.ReactNode => {
const [checked, setChecked] = React.useState(true);
@@ -205,7 +205,7 @@ export const CheckboxSelectAll = (): React.ReactNode => {
);
};
-CheckboxSelectAll.storyName = 'Checkbox - Select all';
+CheckboxSelectAll.storyName = "Checkbox - Select all";
export const CheckboxControlled = (): React.ReactNode => {
const [checked1, setChecked1] = React.useState(true);
@@ -250,7 +250,7 @@ export const CheckboxControlled = (): React.ReactNode => {
);
};
-CheckboxControlled.storyName = 'Checkbox - Controlled';
+CheckboxControlled.storyName = "Checkbox - Controlled";
export const DefaultCheckboxGroup = (): React.ReactNode => {
const [checked1, setChecked1] = React.useState(true);
@@ -310,7 +310,7 @@ export const DefaultCheckboxGroup = (): React.ReactNode => {
);
};
-DefaultCheckboxGroup.storyName = 'CheckboxGroup';
+DefaultCheckboxGroup.storyName = "CheckboxGroup";
export const CheckboxGroupError = (): React.ReactNode => {
return (
@@ -328,7 +328,7 @@ export const CheckboxGroupError = (): React.ReactNode => {
);
};
-CheckboxGroupError.storyName = 'Checkbox Group - Error';
+CheckboxGroupError.storyName = "Checkbox Group - Error";
export const CheckboxGroupDisabled = (): React.ReactNode => {
return (
@@ -346,7 +346,7 @@ export const CheckboxGroupDisabled = (): React.ReactNode => {
);
};
-CheckboxGroupDisabled.storyName = 'Checkbox Group - Disabled';
+CheckboxGroupDisabled.storyName = "Checkbox Group - Disabled";
export const CheckboxGroupOverrideDisabled = (): React.ReactNode => {
return (
@@ -364,7 +364,7 @@ export const CheckboxGroupOverrideDisabled = (): React.ReactNode => {
);
};
-CheckboxGroupOverrideDisabled.storyName = 'Checkbox Group - Override Disabled';
+CheckboxGroupOverrideDisabled.storyName = "Checkbox Group - Override Disabled";
export const CheckboxGroupHorizontal = (): React.ReactNode => {
return (
@@ -388,7 +388,7 @@ export const CheckboxGroupHorizontal = (): React.ReactNode => {
);
};
-CheckboxGroupHorizontal.storyName = 'Checkbox Group - Horizontal';
+CheckboxGroupHorizontal.storyName = "Checkbox Group - Horizontal";
export const CheckboxGroupHorizontalDisabled = (): React.ReactNode => {
return (
@@ -406,7 +406,7 @@ export const CheckboxGroupHorizontalDisabled = (): React.ReactNode => {
);
};
-CheckboxGroupHorizontalDisabled.storyName = 'Checkbox Group - Horizontal disabled';
+CheckboxGroupHorizontalDisabled.storyName = "Checkbox Group - Horizontal disabled";
export const CheckboxGroupHorizontalError = (): React.ReactNode => {
return (
@@ -436,7 +436,7 @@ export const CheckboxGroupHorizontalError = (): React.ReactNode => {
);
};
-CheckboxGroupHorizontalError.storyName = 'Checkbox Group - Horizontal error';
+CheckboxGroupHorizontalError.storyName = "Checkbox Group - Horizontal error";
export const CheckboxIndeterminateGroup = (): React.ReactNode => {
const [checkedItems, setCheckedItems] = React.useState([true, false]);
@@ -475,7 +475,7 @@ export const CheckboxIndeterminateGroup = (): React.ReactNode => {
);
};
-CheckboxIndeterminateGroup.storyName = 'Checkbox - Indeterminate group';
+CheckboxIndeterminateGroup.storyName = "Checkbox - Indeterminate group";
export const CheckboxIndeterminateGroupDisabled = (): React.ReactNode => {
const [checkedItems, setCheckedItems] = React.useState([true, false]);
@@ -554,7 +554,7 @@ export const CheckboxIndeterminateGroupDisabled = (): React.ReactNode => {
);
};
-CheckboxIndeterminateGroupDisabled.storyName = 'Checkbox - Indeterminate group disabled';
+CheckboxIndeterminateGroupDisabled.storyName = "Checkbox - Indeterminate group disabled";
export const CheckboxIndeterminateHorizontalGroup = (): React.ReactNode => {
const [checkedItems, setCheckedItems] = React.useState([true, false]);
@@ -593,7 +593,7 @@ export const CheckboxIndeterminateHorizontalGroup = (): React.ReactNode => {
);
};
-CheckboxIndeterminateHorizontalGroup.storyName = 'Checkbox - Indeterminate horizontal group';
+CheckboxIndeterminateHorizontalGroup.storyName = "Checkbox - Indeterminate horizontal group";
export const DefaultCheckboxDisclaimer = (): React.ReactNode => {
return (
@@ -608,7 +608,7 @@ export const DefaultCheckboxDisclaimer = (): React.ReactNode => {
);
};
-DefaultCheckboxDisclaimer.storyName = 'Checkbox Disclaimer';
+DefaultCheckboxDisclaimer.storyName = "Checkbox Disclaimer";
export const CheckboxDisclaimerRequired = (): React.ReactNode => {
return (
@@ -623,7 +623,7 @@ export const CheckboxDisclaimerRequired = (): React.ReactNode => {
);
};
-CheckboxDisclaimerRequired.storyName = 'Checkbox Disclaimer - Required';
+CheckboxDisclaimerRequired.storyName = "Checkbox Disclaimer - Required";
export const CheckboxDisclaimerError = (): React.ReactNode => {
return (
@@ -638,7 +638,7 @@ export const CheckboxDisclaimerError = (): React.ReactNode => {
);
};
-CheckboxDisclaimerError.storyName = 'Checkbox Disclaimer - Error';
+CheckboxDisclaimerError.storyName = "Checkbox Disclaimer - Error";
export const CheckboxDisclaimerDisabled = (): React.ReactNode => {
return (
@@ -651,4 +651,4 @@ export const CheckboxDisclaimerDisabled = (): React.ReactNode => {
);
};
-CheckboxDisclaimerDisabled.storyName = 'Checkbox Disclaimer - Disabled';
+CheckboxDisclaimerDisabled.storyName = "Checkbox Disclaimer - Disabled";
diff --git a/packages/paste-core/components/checkbox/stories/customization.stories.tsx b/packages/paste-core/components/checkbox/stories/customization.stories.tsx
index 934d4ccba3..26ffcd54fa 100644
--- a/packages/paste-core/components/checkbox/stories/customization.stories.tsx
+++ b/packages/paste-core/components/checkbox/stories/customization.stories.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
-import type {StoryFn} from '@storybook/react';
-import {useUID} from '@twilio-paste/uid-library';
-import {Anchor} from '@twilio-paste/anchor';
-import {Text} from '@twilio-paste/text';
-import {Paragraph} from '@twilio-paste/paragraph';
-import {useTheme} from '@twilio-paste/theme';
-import {CustomizationProvider} from '@twilio-paste/customization';
+import type { StoryFn } from "@storybook/react";
+import { Anchor } from "@twilio-paste/anchor";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import { Paragraph } from "@twilio-paste/paragraph";
+import { Text } from "@twilio-paste/text";
+import { useTheme } from "@twilio-paste/theme";
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
-import {Checkbox, CheckboxGroup, CheckboxDisclaimer} from '../src';
+import { Checkbox, CheckboxDisclaimer, CheckboxGroup } from "../src";
-export const CustomizedCheckboxGroup: StoryFn = (_args, {parameters: {isTestEnvironment}}) => {
+export const CustomizedCheckboxGroup: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
const [checked1, setChecked1] = React.useState(true);
const [checked2, setChecked2] = React.useState(false);
const [checked3, setChecked3] = React.useState(false);
@@ -23,19 +23,19 @@ export const CustomizedCheckboxGroup: StoryFn = (_args, {parameters: {isTestEnvi
disableAnimations={isTestEnvironment}
theme={theme}
elements={{
- CHECKBOX_GROUP: {padding: 'space30'},
- CHECKBOX_GROUP_SET: {marginLeft: 'space60'},
- CHECKBOX_GROUP_ITEM: {marginBottom: 'space60'},
- CHECKBOX_GROUP_ERROR_TEXT_WRAPPER: {marginBottom: 'space60'},
- CHECKBOX: {padding: 'space30'}, // the whole box
- CHECKBOX_CONTROL: {borderRadius: 'borderRadius20'},
- CHECKBOX_LABEL_TEXT: {color: 'colorTextNeutral'},
- MY_CHECKBOX_GROUP: {padding: 'space30'},
- MY_CHECKBOX_GROUP_SET: {marginLeft: 'space60'},
- MY_CHECKBOX_GROUP_ITEM: {marginBottom: 'space60'},
- MY_CHECKBOX: {padding: 'space30'}, // the whole box
- MY_CHECKBOX_CONTROL: {borderRadius: 'borderRadius20'},
- MY_CHECKBOX_LABEL_TEXT: {color: 'colorTextNeutral'},
+ CHECKBOX_GROUP: { padding: "space30" },
+ CHECKBOX_GROUP_SET: { marginLeft: "space60" },
+ CHECKBOX_GROUP_ITEM: { marginBottom: "space60" },
+ CHECKBOX_GROUP_ERROR_TEXT_WRAPPER: { marginBottom: "space60" },
+ CHECKBOX: { padding: "space30" }, // the whole box
+ CHECKBOX_CONTROL: { borderRadius: "borderRadius20" },
+ CHECKBOX_LABEL_TEXT: { color: "colorTextNeutral" },
+ MY_CHECKBOX_GROUP: { padding: "space30" },
+ MY_CHECKBOX_GROUP_SET: { marginLeft: "space60" },
+ MY_CHECKBOX_GROUP_ITEM: { marginBottom: "space60" },
+ MY_CHECKBOX: { padding: "space30" }, // the whole box
+ MY_CHECKBOX_CONTROL: { borderRadius: "borderRadius20" },
+ MY_CHECKBOX_LABEL_TEXT: { color: "colorTextNeutral" },
}}
>
Using default element name:
@@ -146,17 +146,17 @@ export const CustomizedCheckboxGroup: StoryFn = (_args, {parameters: {isTestEnvi
);
};
-export const CustomizedCheckboxDisclaimer: StoryFn = (_args, {parameters: {isTestEnvironment}}) => {
+export const CustomizedCheckboxDisclaimer: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
const theme = useTheme();
return (
Using default element name:
@@ -190,7 +190,7 @@ export const CustomizedCheckboxDisclaimer: StoryFn = (_args, {parameters: {isTes
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/Checkbox/Customization',
+ title: "Components/Checkbox/Customization",
component: CustomizedCheckboxGroup,
parameters: {
a11y: {
diff --git a/packages/paste-core/components/code-block/__tests__/customization.spec.tsx b/packages/paste-core/components/code-block/__tests__/customization.spec.tsx
index 34036a90e2..49cf357aa9 100644
--- a/packages/paste-core/components/code-block/__tests__/customization.spec.tsx
+++ b/packages/paste-core/components/code-block/__tests__/customization.spec.tsx
@@ -1,54 +1,61 @@
-import * as React from 'react';
-import {CustomizationProvider} from '@twilio-paste/customization';
-import {render, screen} from '@testing-library/react';
-
-import {CodeBlock, CodeBlockWrapper, CodeBlockHeader, CodeBlockTabList, CodeBlockTab, CodeBlockTabPanel} from '../src';
+import { render, screen } from "@testing-library/react";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import * as React from "react";
+
+import {
+ CodeBlock,
+ CodeBlockHeader,
+ CodeBlockTab,
+ CodeBlockTabList,
+ CodeBlockTabPanel,
+ CodeBlockWrapper,
+} from "../src";
const jsCode = `(num) => num + 1`;
-const CustomizationWrapper: React.FC = ({children}) => (
+const CustomizationWrapper: React.FC = ({ children }) => (
{children}
);
-const CustomizationMyWrapper: React.FC = ({children}) => (
+const CustomizationMyWrapper: React.FC = ({ children }) => (
{children}
);
-describe('Customization', () => {
- describe('CodeBlock', () => {
- it('should set a default element data attribute', () => {
+describe("Customization", () => {
+ describe("CodeBlock", () => {
+ it("should set a default element data attribute", () => {
render(
My code block
@@ -61,31 +68,31 @@ describe('Customization', () => {
,
{
wrapper: CustomizationWrapper,
- }
+ },
);
- const codeBlock = screen.getByTestId('code-block');
- const content = codeBlock.querySelector('pre')?.parentElement;
- const heading = screen.getByRole('heading', {name: 'My code block'});
+ const codeBlock = screen.getByTestId("code-block");
+ const content = codeBlock.querySelector("pre")?.parentElement;
+ const heading = screen.getByRole("heading", { name: "My code block" });
const wrapper = heading.parentElement;
- const tabList = screen.getByRole('tablist');
- const tab = screen.getByRole('tab', {name: 'JavaScript'});
+ const tabList = screen.getByRole("tablist");
+ const tab = screen.getByRole("tab", { name: "JavaScript" });
const tabPanel = codeBlock.parentElement;
- const copyButton = screen.getByRole('button', {name: 'Copy code block'});
- const externalLink = screen.getByRole('link', {name: 'Open code block in new page'});
-
- expect(wrapper?.getAttribute('data-paste-element')).toBe('CODE_BLOCK_WRAPPER');
- expect(content?.getAttribute('data-paste-element')).toBe('CODE_BLOCK_CONTENT');
- expect(tabList.getAttribute('data-paste-element')).toBe('CODE_BLOCK_TAB_LIST');
- expect(tab.getAttribute('data-paste-element')).toBe('CODE_BLOCK_TAB');
- expect(tabPanel?.getAttribute('data-paste-element')).toBe('CODE_BLOCK_TAB_PANEL');
- expect(codeBlock.getAttribute('data-paste-element')).toBe('CODE_BLOCK');
- expect(heading.getAttribute('data-paste-element')).toBe('CODE_BLOCK_HEADER');
- expect(copyButton.getAttribute('data-paste-element')).toBe('CODE_BLOCK_COPY_BUTTON');
- expect(externalLink.getAttribute('data-paste-element')).toBe('CODE_BLOCK_EXTERNAL_LINK');
+ const copyButton = screen.getByRole("button", { name: "Copy code block" });
+ const externalLink = screen.getByRole("link", { name: "Open code block in new page" });
+
+ expect(wrapper?.getAttribute("data-paste-element")).toBe("CODE_BLOCK_WRAPPER");
+ expect(content?.getAttribute("data-paste-element")).toBe("CODE_BLOCK_CONTENT");
+ expect(tabList.getAttribute("data-paste-element")).toBe("CODE_BLOCK_TAB_LIST");
+ expect(tab.getAttribute("data-paste-element")).toBe("CODE_BLOCK_TAB");
+ expect(tabPanel?.getAttribute("data-paste-element")).toBe("CODE_BLOCK_TAB_PANEL");
+ expect(codeBlock.getAttribute("data-paste-element")).toBe("CODE_BLOCK");
+ expect(heading.getAttribute("data-paste-element")).toBe("CODE_BLOCK_HEADER");
+ expect(copyButton.getAttribute("data-paste-element")).toBe("CODE_BLOCK_COPY_BUTTON");
+ expect(externalLink.getAttribute("data-paste-element")).toBe("CODE_BLOCK_EXTERNAL_LINK");
});
- it('should set a custom element data attribute', () => {
+ it("should set a custom element data attribute", () => {
render(
My code block
@@ -104,31 +111,31 @@ describe('Customization', () => {
,
{
wrapper: CustomizationMyWrapper,
- }
+ },
);
- const codeBlock = screen.getByTestId('code-block');
- const content = codeBlock.querySelector('pre')?.parentElement;
- const heading = screen.getByRole('heading', {name: 'My code block'});
+ const codeBlock = screen.getByTestId("code-block");
+ const content = codeBlock.querySelector("pre")?.parentElement;
+ const heading = screen.getByRole("heading", { name: "My code block" });
const wrapper = heading.parentElement;
- const tabList = screen.getByRole('tablist');
- const tab = screen.getByRole('tab', {name: 'JavaScript'});
+ const tabList = screen.getByRole("tablist");
+ const tab = screen.getByRole("tab", { name: "JavaScript" });
const tabPanel = codeBlock.parentElement;
- const copyButton = screen.getByRole('button', {name: 'Copy code block'});
- const externalLink = screen.getByRole('link', {name: 'Open code block in new page'});
-
- expect(wrapper?.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_WRAPPER');
- expect(content?.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_CONTENT');
- expect(tabList.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_TAB_LIST');
- expect(tab.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_TAB');
- expect(tabPanel?.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_TAB_PANEL');
- expect(codeBlock.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK');
- expect(heading.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_HEADER');
- expect(copyButton.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_COPY_BUTTON');
- expect(externalLink.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_EXTERNAL_LINK');
+ const copyButton = screen.getByRole("button", { name: "Copy code block" });
+ const externalLink = screen.getByRole("link", { name: "Open code block in new page" });
+
+ expect(wrapper?.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_WRAPPER");
+ expect(content?.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_CONTENT");
+ expect(tabList.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_TAB_LIST");
+ expect(tab.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_TAB");
+ expect(tabPanel?.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_TAB_PANEL");
+ expect(codeBlock.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK");
+ expect(heading.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_HEADER");
+ expect(copyButton.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_COPY_BUTTON");
+ expect(externalLink.getAttribute("data-paste-element")).toBe("MY_CODE_BLOCK_EXTERNAL_LINK");
});
- it('should add custom styles to the component', () => {
+ it("should add custom styles to the component", () => {
render(
My code block
@@ -141,31 +148,31 @@ describe('Customization', () => {
,
{
wrapper: CustomizationWrapper,
- }
+ },
);
- const codeBlock = screen.getByTestId('code-block');
- const content = codeBlock.querySelector('pre')?.parentElement;
- const heading = screen.getByRole('heading', {name: 'My code block'});
+ const codeBlock = screen.getByTestId("code-block");
+ const content = codeBlock.querySelector("pre")?.parentElement;
+ const heading = screen.getByRole("heading", { name: "My code block" });
const wrapper = heading.parentElement;
- const tabList = screen.getByRole('tablist');
- const tab = screen.getByRole('tab', {name: 'JavaScript'});
+ const tabList = screen.getByRole("tablist");
+ const tab = screen.getByRole("tab", { name: "JavaScript" });
const tabPanel = codeBlock.parentElement;
- const copyButton = screen.getByRole('button', {name: 'Copy code block'});
- const externalLink = screen.getByRole('link', {name: 'Open code block in new page'});
-
- expect(codeBlock).toHaveStyleRule('width', '31.5rem');
- expect(content).toHaveStyleRule('width', '31.5rem');
- expect(wrapper).toHaveStyleRule('width', '31.5rem');
- expect(heading).toHaveStyleRule('border-top-right-radius', '8px');
- expect(tabList).toHaveStyleRule('column-gap', '0');
- expect(tab).toHaveStyleRule('border-radius', '0');
- expect(tabPanel).toHaveStyleRule('border-bottom-right-radius', '8px');
- expect(copyButton).toHaveStyleRule('background-color', 'rgb(254, 236, 236)');
- expect(externalLink).toHaveStyleRule('background-color', 'rgb(254, 236, 236)');
+ const copyButton = screen.getByRole("button", { name: "Copy code block" });
+ const externalLink = screen.getByRole("link", { name: "Open code block in new page" });
+
+ expect(codeBlock).toHaveStyleRule("width", "31.5rem");
+ expect(content).toHaveStyleRule("width", "31.5rem");
+ expect(wrapper).toHaveStyleRule("width", "31.5rem");
+ expect(heading).toHaveStyleRule("border-top-right-radius", "8px");
+ expect(tabList).toHaveStyleRule("column-gap", "0");
+ expect(tab).toHaveStyleRule("border-radius", "0");
+ expect(tabPanel).toHaveStyleRule("border-bottom-right-radius", "8px");
+ expect(copyButton).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
+ expect(externalLink).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
});
- it('should set custom styles with custom element names', () => {
+ it("should set custom styles with custom element names", () => {
render(
My code block
@@ -184,28 +191,28 @@ describe('Customization', () => {
,
{
wrapper: CustomizationMyWrapper,
- }
+ },
);
- const codeBlock = screen.getByTestId('code-block');
- const content = codeBlock.querySelector('pre')?.parentElement;
- const heading = screen.getByRole('heading', {name: 'My code block'});
+ const codeBlock = screen.getByTestId("code-block");
+ const content = codeBlock.querySelector("pre")?.parentElement;
+ const heading = screen.getByRole("heading", { name: "My code block" });
const wrapper = heading.parentElement;
- const tabList = screen.getByRole('tablist');
- const tab = screen.getByRole('tab', {name: 'JavaScript'});
+ const tabList = screen.getByRole("tablist");
+ const tab = screen.getByRole("tab", { name: "JavaScript" });
const tabPanel = codeBlock.parentElement;
- const copyButton = screen.getByRole('button', {name: 'Copy code block'});
- const externalLink = screen.getByRole('link', {name: 'Open code block in new page'});
-
- expect(codeBlock).toHaveStyleRule('width', '31.5rem');
- expect(content).toHaveStyleRule('width', '31.5rem');
- expect(wrapper).toHaveStyleRule('width', '31.5rem');
- expect(heading).toHaveStyleRule('border-top-right-radius', '8px');
- expect(tabList).toHaveStyleRule('column-gap', '0');
- expect(tab).toHaveStyleRule('border-radius', '0');
- expect(tabPanel).toHaveStyleRule('border-bottom-right-radius', '8px');
- expect(copyButton).toHaveStyleRule('background-color', 'rgb(254, 236, 236)');
- expect(externalLink).toHaveStyleRule('background-color', 'rgb(254, 236, 236)');
+ const copyButton = screen.getByRole("button", { name: "Copy code block" });
+ const externalLink = screen.getByRole("link", { name: "Open code block in new page" });
+
+ expect(codeBlock).toHaveStyleRule("width", "31.5rem");
+ expect(content).toHaveStyleRule("width", "31.5rem");
+ expect(wrapper).toHaveStyleRule("width", "31.5rem");
+ expect(heading).toHaveStyleRule("border-top-right-radius", "8px");
+ expect(tabList).toHaveStyleRule("column-gap", "0");
+ expect(tab).toHaveStyleRule("border-radius", "0");
+ expect(tabPanel).toHaveStyleRule("border-bottom-right-radius", "8px");
+ expect(copyButton).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
+ expect(externalLink).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
});
});
});
diff --git a/packages/paste-core/components/code-block/__tests__/index.spec.tsx b/packages/paste-core/components/code-block/__tests__/index.spec.tsx
index 54c85c0c25..92f95c7256 100644
--- a/packages/paste-core/components/code-block/__tests__/index.spec.tsx
+++ b/packages/paste-core/components/code-block/__tests__/index.spec.tsx
@@ -1,10 +1,17 @@
-import * as React from 'react';
-import {render, screen} from '@testing-library/react';
-import {Theme} from '@twilio-paste/theme';
-
-import {CopyButton, getCopyButtonText} from '../src/CopyButton';
-import {ExternalLinkButton} from '../src/ExternalLinkButton';
-import {CodeBlock, CodeBlockWrapper, CodeBlockHeader, CodeBlockTabList, CodeBlockTab, CodeBlockTabPanel} from '../src';
+import { render, screen } from "@testing-library/react";
+import { Theme } from "@twilio-paste/theme";
+import * as React from "react";
+
+import {
+ CodeBlock,
+ CodeBlockHeader,
+ CodeBlockTab,
+ CodeBlockTabList,
+ CodeBlockTabPanel,
+ CodeBlockWrapper,
+} from "../src";
+import { CopyButton, getCopyButtonText } from "../src/CopyButton";
+import { ExternalLinkButton } from "../src/ExternalLinkButton";
const jsCode = `(num) => num + 1`;
@@ -27,37 +34,37 @@ lab = TkLabel.new(root) {
}
`;
-describe('CodeBlock', () => {
- it('should render', () => {
+describe("CodeBlock", () => {
+ it("should render", () => {
render(
-
+ ,
);
- const copyButton = screen.getByRole('button', {name: 'Copy code block'});
+ const copyButton = screen.getByRole("button", { name: "Copy code block" });
expect(copyButton).toBeDefined();
- const rubyText = screen.getByText('#!/usr/bin/ruby');
+ const rubyText = screen.getByText("#!/usr/bin/ruby");
expect(rubyText).toBeDefined();
});
- it('should render a code block with a link', () => {
+ it("should render a code block with a link", () => {
render(
-
+ ,
);
- const copyButton = screen.getByRole('button', {name: 'Copy code block'});
+ const copyButton = screen.getByRole("button", { name: "Copy code block" });
expect(copyButton).toBeDefined();
- const link = screen.getByRole('link', {name: 'Open code block in new page'});
+ const link = screen.getByRole("link", { name: "Open code block in new page" });
expect(link).toBeDefined();
});
- describe('i18n', () => {
- it('should use i18n labels for copy button and external link', () => {
+ describe("i18n", () => {
+ it("should use i18n labels for copy button and external link", () => {
render(
{
i18nCopyLabelBefore="before"
i18nLinkLabel="external link"
/>
-
+ ,
);
- const copyButton = screen.getByRole('button', {name: 'before'});
+ const copyButton = screen.getByRole("button", { name: "before" });
expect(copyButton).toBeDefined();
- const link = screen.getByRole('link', {name: 'external link'});
+ const link = screen.getByRole("link", { name: "external link" });
expect(link).toBeDefined();
});
});
});
-describe('CodeBlockHeader', () => {
- it('should render a heading', () => {
+describe("CodeBlockHeader", () => {
+ it("should render a heading", () => {
render(
<>
My code block
Another code block
-
+ ,
);
- const headerLevel3 = screen.getByRole('heading', {name: 'My code block'});
+ const headerLevel3 = screen.getByRole("heading", { name: "My code block" });
expect(headerLevel3).toBeDefined();
- expect(headerLevel3.tagName).toBe('H3');
+ expect(headerLevel3.tagName).toBe("H3");
- const headerLevel2 = screen.getByRole('heading', {name: 'Another code block'});
+ const headerLevel2 = screen.getByRole("heading", { name: "Another code block" });
expect(headerLevel2).toBeDefined();
- expect(headerLevel2.tagName).toBe('H2');
+ expect(headerLevel2.tagName).toBe("H2");
});
});
-describe('CodeBlockTabs', () => {
- it('should render an accessible tab set', () => {
+describe("CodeBlockTabs", () => {
+ it("should render an accessible tab set", () => {
render(
@@ -115,70 +122,70 @@ describe('CodeBlockTabs', () => {
-
+ ,
);
- const tablist = screen.getByRole('tablist');
+ const tablist = screen.getByRole("tablist");
expect(tablist).toBeDefined();
- const javascriptTab = screen.getByRole('tab', {name: 'JavaScript'});
+ const javascriptTab = screen.getByRole("tab", { name: "JavaScript" });
expect(javascriptTab).toBeDefined();
- expect(javascriptTab.getAttribute('aria-selected')).toBe('true');
+ expect(javascriptTab.getAttribute("aria-selected")).toBe("true");
- const javascriptTabPanel = screen.getByTestId('js-block').parentElement;
+ const javascriptTabPanel = screen.getByTestId("js-block").parentElement;
expect(javascriptTabPanel).toBeDefined();
- expect(javascriptTab.getAttribute('aria-controls')).toBe(javascriptTabPanel?.id);
- expect(javascriptTabPanel?.getAttribute('aria-labelledby')).toBe(javascriptTab.id);
+ expect(javascriptTab.getAttribute("aria-controls")).toBe(javascriptTabPanel?.id);
+ expect(javascriptTabPanel?.getAttribute("aria-labelledby")).toBe(javascriptTab.id);
- const rubyTab = screen.getByRole('tab', {name: 'Ruby'});
+ const rubyTab = screen.getByRole("tab", { name: "Ruby" });
expect(rubyTab).toBeDefined();
- expect(rubyTab.getAttribute('aria-selected')).toBe('false');
+ expect(rubyTab.getAttribute("aria-selected")).toBe("false");
- const rubyTabPanel = screen.getByTestId('ruby-block').parentElement;
+ const rubyTabPanel = screen.getByTestId("ruby-block").parentElement;
expect(rubyTabPanel).toBeDefined();
- expect(rubyTab.getAttribute('aria-controls')).toBe(rubyTabPanel?.id);
- expect(rubyTabPanel?.getAttribute('aria-labelledby')).toBe(rubyTab.id);
+ expect(rubyTab.getAttribute("aria-controls")).toBe(rubyTabPanel?.id);
+ expect(rubyTabPanel?.getAttribute("aria-labelledby")).toBe(rubyTab.id);
});
});
-describe('CopyButton', () => {
- it('should render', () => {
+describe("CopyButton", () => {
+ it("should render", () => {
render(
-
+ ,
);
- const button = screen.getByRole('button');
- const tooltip = screen.getByRole('tooltip', {hidden: true});
+ const button = screen.getByRole("button");
+ const tooltip = screen.getByRole("tooltip", { hidden: true });
expect(button).toBeDefined();
expect(tooltip).not.toBeVisible();
});
- describe('getCopyButtonText', () => {
- it('returns the correct string depending on the copied arg', () => {
- const getText = getCopyButtonText('before', 'after');
+ describe("getCopyButtonText", () => {
+ it("returns the correct string depending on the copied arg", () => {
+ const getText = getCopyButtonText("before", "after");
- expect(getText(false)).toBe('before');
- expect(getText(true)).toBe('after');
+ expect(getText(false)).toBe("before");
+ expect(getText(true)).toBe("after");
});
});
});
-describe('ExternalLinkButton', () => {
- it('should render', () => {
+describe("ExternalLinkButton", () => {
+ it("should render", () => {
render(
-
+ ,
);
- const link = screen.getByRole('link');
- const tooltip = screen.getByRole('tooltip', {hidden: true});
+ const link = screen.getByRole("link");
+ const tooltip = screen.getByRole("tooltip", { hidden: true });
expect(link).toBeDefined();
- expect(link.getAttribute('href')).toBe('https://www.google.com');
+ expect(link.getAttribute("href")).toBe("https://www.google.com");
expect(tooltip).not.toBeVisible();
});
});
diff --git a/packages/paste-core/components/code-block/build.js b/packages/paste-core/components/code-block/build.js
index a4edeab49b..27dd98f98e 100644
--- a/packages/paste-core/components/code-block/build.js
+++ b/packages/paste-core/components/code-block/build.js
@@ -1,3 +1,3 @@
-const {build} = require('../../../../tools/build/esbuild');
+const { build } = require("../../../../tools/build/esbuild");
-build(require('./package.json'));
+build(require("./package.json"));
diff --git a/packages/paste-core/components/code-block/src/CodeBlock.tsx b/packages/paste-core/components/code-block/src/CodeBlock.tsx
index cdad3ec45e..217a315e89 100644
--- a/packages/paste-core/components/code-block/src/CodeBlock.tsx
+++ b/packages/paste-core/components/code-block/src/CodeBlock.tsx
@@ -1,21 +1,21 @@
-import * as React from 'react';
-import {SyntaxHighlighter} from '@twilio-paste/syntax-highlighter-library';
-import type {SnippetLanguages} from '@twilio-paste/syntax-highlighter-library';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import type {BoxProps, BoxStyleProps} from '@twilio-paste/box';
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
+import { SyntaxHighlighter } from "@twilio-paste/syntax-highlighter-library";
+import type { SnippetLanguages } from "@twilio-paste/syntax-highlighter-library";
+import * as React from "react";
-import {getPasteSyntaxTheme} from './CodeBlockTheme';
-import {CopyButton} from './CopyButton';
-import {ExternalLinkButton} from './ExternalLinkButton';
+import { getPasteSyntaxTheme } from "./CodeBlockTheme";
+import { CopyButton } from "./CopyButton";
+import { ExternalLinkButton } from "./ExternalLinkButton";
-type CodeBlockVariants = 'multi-line' | 'single-line';
+type CodeBlockVariants = "multi-line" | "single-line";
-export interface CodeBlockProps extends Partial> {
+export interface CodeBlockProps extends Partial> {
children?: never;
language: SnippetLanguages;
code: string;
variant?: CodeBlockVariants;
- element?: BoxProps['element'];
+ element?: BoxProps["element"];
showLineNumbers?: boolean;
wrapLines?: boolean;
maxLines?: number;
@@ -27,29 +27,29 @@ export interface CodeBlockProps extends Partial
}
const CodeBlockVariantStyles: Record = {
- 'single-line': {
- gridTemplateColumns: '1fr auto',
+ "single-line": {
+ gridTemplateColumns: "1fr auto",
gridTemplateAreas: '"code-block button-group"',
- columnGap: 'space40',
- borderRadius: 'borderRadius20',
- paddingY: 'space60',
+ columnGap: "space40",
+ borderRadius: "borderRadius20",
+ paddingY: "space60",
},
- 'multi-line': {
- gridTemplateRows: 'auto 1fr',
+ "multi-line": {
+ gridTemplateRows: "auto 1fr",
gridTemplateAreas: '"button-group" "code-block"',
- rowGap: 'space20',
- paddingTop: 'space50',
- paddingBottom: 'space90',
+ rowGap: "space20",
+ paddingTop: "space50",
+ paddingBottom: "space90",
},
};
export const CodeBlock = React.forwardRef(
(
{
- element = 'CODE_BLOCK',
+ element = "CODE_BLOCK",
language,
code,
- variant = 'multi-line',
+ variant = "multi-line",
showLineNumbers,
wrapLines,
maxLines,
@@ -60,7 +60,7 @@ export const CodeBlock = React.forwardRef(
copyTextFormatter,
...props
},
- ref
+ ref,
) => {
return (
(
flexDirection="row"
alignItems="center"
columnGap="space40"
- justifyContent={variant === 'multi-line' ? 'flex-end' : undefined}
+ justifyContent={variant === "multi-line" ? "flex-end" : undefined}
gridArea="button-group"
>
@@ -117,7 +117,7 @@ export const CodeBlock = React.forwardRef(
);
- }
+ },
);
-CodeBlock.displayName = 'CodeBlock';
+CodeBlock.displayName = "CodeBlock";
diff --git a/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx b/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx
index 75a0618b5f..2f026f41fc 100644
--- a/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx
+++ b/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import type {BoxProps} from '@twilio-paste/box';
-import type {asTags} from '@twilio-paste/heading';
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
+import type { asTags } from "@twilio-paste/heading";
+import * as React from "react";
-export interface CodeBlockHeaderProps extends Partial> {
+export interface CodeBlockHeaderProps extends Partial> {
children: string;
- element?: BoxProps['element'];
+ element?: BoxProps["element"];
as?: asTags;
}
export const CodeBlockHeader = React.forwardRef(
- ({children, element = 'CODE_BLOCK_HEADER', as = 'h3', ...props}, ref) => (
+ ({ children, element = "CODE_BLOCK_HEADER", as = "h3", ...props }, ref) => (
{children}
- )
+ ),
);
-CodeBlockHeader.displayName = 'CodeBlockHeader';
+CodeBlockHeader.displayName = "CodeBlockHeader";
diff --git a/packages/paste-core/components/code-block/src/CodeBlockTab.tsx b/packages/paste-core/components/code-block/src/CodeBlockTab.tsx
index 59c2c67dc4..a554d30074 100644
--- a/packages/paste-core/components/code-block/src/CodeBlockTab.tsx
+++ b/packages/paste-core/components/code-block/src/CodeBlockTab.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import type {BoxProps} from '@twilio-paste/box';
-import {Tab} from '@twilio-paste/tabs';
-import type {TabProps} from '@twilio-paste/tabs';
+import type { BoxProps } from "@twilio-paste/box";
+import { Tab } from "@twilio-paste/tabs";
+import type { TabProps } from "@twilio-paste/tabs";
+import * as React from "react";
export interface CodeBlockTabProps extends TabProps {
- element?: BoxProps['element'];
+ element?: BoxProps["element"];
}
export const CodeBlockTab = React.forwardRef(
- ({children, element = 'CODE_BLOCK_TAB', ...props}, ref) => {
+ ({ children, element = "CODE_BLOCK_TAB", ...props }, ref) => {
return (
{children}
);
- }
+ },
);
-CodeBlockTab.displayName = 'CodeBlockTab';
+CodeBlockTab.displayName = "CodeBlockTab";
diff --git a/packages/paste-core/components/code-block/src/CodeBlockTabList.tsx b/packages/paste-core/components/code-block/src/CodeBlockTabList.tsx
index 3db757dfe5..94da84e5d0 100644
--- a/packages/paste-core/components/code-block/src/CodeBlockTabList.tsx
+++ b/packages/paste-core/components/code-block/src/CodeBlockTabList.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
-import {Box} from '@twilio-paste/box';
-import type {BoxProps} from '@twilio-paste/box';
-import {TabList} from '@twilio-paste/tabs';
-import type {TabListProps} from '@twilio-paste/tabs';
+import { Box } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
+import { TabList } from "@twilio-paste/tabs";
+import type { TabListProps } from "@twilio-paste/tabs";
+import * as React from "react";
-export interface CodeBlockTabListProps extends Omit {
- element?: BoxProps['element'];
+export interface CodeBlockTabListProps extends Omit {
+ element?: BoxProps["element"];
}
export const CodeBlockTabList = React.forwardRef(
- ({children, element = 'CODE_BLOCK_TAB_LIST', ...props}, ref) => {
+ ({ children, element = "CODE_BLOCK_TAB_LIST", ...props }, ref) => {
return (
@@ -17,7 +17,7 @@ export const CodeBlockTabList = React.forwardRef
);
- }
+ },
);
-CodeBlockTabList.displayName = 'CodeBlockTabList';
+CodeBlockTabList.displayName = "CodeBlockTabList";
diff --git a/packages/paste-core/components/code-block/src/CodeBlockTabPanel.tsx b/packages/paste-core/components/code-block/src/CodeBlockTabPanel.tsx
index 870fbe423a..11c539b258 100644
--- a/packages/paste-core/components/code-block/src/CodeBlockTabPanel.tsx
+++ b/packages/paste-core/components/code-block/src/CodeBlockTabPanel.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import type {BoxProps} from '@twilio-paste/box';
-import {TabPanel} from '@twilio-paste/tabs';
+import type { BoxProps } from "@twilio-paste/box";
+import { TabPanel } from "@twilio-paste/tabs";
+import * as React from "react";
-export interface CodeBlockTabPanelProps extends Partial> {
+export interface CodeBlockTabPanelProps extends Partial> {
children?: React.ReactNode;
- element?: BoxProps['element'];
+ element?: BoxProps["element"];
}
export const CodeBlockTabPanel = React.forwardRef(
- ({children, element = 'CODE_BLOCK_TAB_PANEL', ...props}, ref) => {
+ ({ children, element = "CODE_BLOCK_TAB_PANEL", ...props }, ref) => {
return (
{children}
);
- }
+ },
);
-CodeBlockTabPanel.displayName = 'CodeBlockTabPanel';
+CodeBlockTabPanel.displayName = "CodeBlockTabPanel";
diff --git a/packages/paste-core/components/code-block/src/CodeBlockTheme.ts b/packages/paste-core/components/code-block/src/CodeBlockTheme.ts
index 9923349655..aecd289c61 100644
--- a/packages/paste-core/components/code-block/src/CodeBlockTheme.ts
+++ b/packages/paste-core/components/code-block/src/CodeBlockTheme.ts
@@ -1,207 +1,207 @@
-import {css} from '@twilio-paste/styling-library';
-import type {CSSObject} from '@twilio-paste/styling-library';
-import {useTheme} from '@twilio-paste/theme';
+import { css } from "@twilio-paste/styling-library";
+import type { CSSObject } from "@twilio-paste/styling-library";
+import { useTheme } from "@twilio-paste/theme";
export const getPasteSyntaxTheme = (maxLines?: number): CSSObject => {
const theme = useTheme();
return css({
'code[class*="language-"]': {
- color: '#d6deeb',
- fontFamily: 'fontFamilyCode',
- textAlign: 'left',
- whiteSpace: 'pre',
- wordSpacing: 'normal',
- wordBreak: 'normal',
- wordWrap: 'normal',
- lineHeight: '1.5',
- fontSize: '1em',
- MozTabSize: '4',
- OTabSize: '4',
- tabSize: '4',
- WebkitHyphens: 'none',
- MozHyphens: 'none',
- msHyphens: 'none',
- hyphens: 'none',
+ color: "#d6deeb",
+ fontFamily: "fontFamilyCode",
+ textAlign: "left",
+ whiteSpace: "pre",
+ wordSpacing: "normal",
+ wordBreak: "normal",
+ wordWrap: "normal",
+ lineHeight: "1.5",
+ fontSize: "1em",
+ MozTabSize: "4",
+ OTabSize: "4",
+ tabSize: "4",
+ WebkitHyphens: "none",
+ MozHyphens: "none",
+ msHyphens: "none",
+ hyphens: "none",
},
'pre[class*="language-"]': {
- color: 'white',
- fontFamily: 'fontFamilyCode',
- textAlign: 'left',
- whiteSpace: 'pre',
- wordSpacing: 'normal',
- wordBreak: 'normal',
- wordWrap: 'normal',
- lineHeight: '1.5',
- fontSize: '1em',
- MozTabSize: '4',
- OTabSize: '4',
- tabSize: '4',
- WebkitHyphens: 'none',
- MozHyphens: 'none',
- msHyphens: 'none',
- hyphens: 'none',
- margin: '0',
- overflow: 'auto',
- background: 'inherit',
- display: '-webkit-box',
+ color: "white",
+ fontFamily: "fontFamilyCode",
+ textAlign: "left",
+ whiteSpace: "pre",
+ wordSpacing: "normal",
+ wordBreak: "normal",
+ wordWrap: "normal",
+ lineHeight: "1.5",
+ fontSize: "1em",
+ MozTabSize: "4",
+ OTabSize: "4",
+ tabSize: "4",
+ WebkitHyphens: "none",
+ MozHyphens: "none",
+ msHyphens: "none",
+ hyphens: "none",
+ margin: "0",
+ overflow: "auto",
+ background: "inherit",
+ display: "-webkit-box",
WebkitLineClamp: `${maxLines}`,
- WebkitBoxOrient: 'vertical',
- width: '100%',
+ WebkitBoxOrient: "vertical",
+ width: "100%",
},
'pre[class*="language-"]::-moz-selection': {
- textShadow: 'none',
- background: 'inherit',
+ textShadow: "none",
+ background: "inherit",
},
'pre[class*="language-"] ::-moz-selection': {
- textShadow: 'none',
- background: 'inherit',
+ textShadow: "none",
+ background: "inherit",
},
'code[class*="language-"]::-moz-selection': {
- textShadow: 'none',
- background: 'inherit',
+ textShadow: "none",
+ background: "inherit",
},
'code[class*="language-"] ::-moz-selection': {
- textShadow: 'none',
- background: 'inherit',
+ textShadow: "none",
+ background: "inherit",
},
'pre[class*="language-"]::selection': {
- textShadow: 'none',
- background: 'inherit',
+ textShadow: "none",
+ background: "inherit",
},
'pre[class*="language-"] ::selection': {
- textShadow: 'none',
- background: 'inherit',
+ textShadow: "none",
+ background: "inherit",
},
'code[class*="language-"]::selection': {
- textShadow: 'none',
- background: 'inherit',
+ textShadow: "none",
+ background: "inherit",
},
'code[class*="language-"] ::selection': {
- textShadow: 'none',
- background: 'inherit',
+ textShadow: "none",
+ background: "inherit",
},
':not(pre) > code[class*="language-"]': {
- color: 'white',
- background: '#011627',
- padding: '0.1em',
- borderRadius: '0.3em',
- whiteSpace: 'normal',
+ color: "white",
+ background: "#011627",
+ padding: "0.1em",
+ borderRadius: "0.3em",
+ whiteSpace: "normal",
},
comment: {
- color: 'rgb(136, 145, 170)',
- fontStyle: 'italic',
+ color: "rgb(136, 145, 170)",
+ fontStyle: "italic",
},
linenumber: {
- color: 'colorTextInverseWeak',
- fontStyle: 'none',
+ color: "colorTextInverseWeak",
+ fontStyle: "none",
},
prolog: {
- color: 'rgb(99, 119, 119)',
- fontStyle: 'italic',
+ color: "rgb(99, 119, 119)",
+ fontStyle: "italic",
},
cdata: {
- color: 'rgb(99, 119, 119)',
- fontStyle: 'italic',
+ color: "rgb(99, 119, 119)",
+ fontStyle: "italic",
},
punctuation: {
- color: 'rgb(199, 146, 234)',
+ color: "rgb(199, 146, 234)",
},
- '.namespace': {
- color: 'rgb(178, 204, 214)',
+ ".namespace": {
+ color: "rgb(178, 204, 214)",
},
deleted: {
- color: 'rgba(239, 83, 80, 0.56)',
- fontStyle: 'italic',
+ color: "rgba(239, 83, 80, 0.56)",
+ fontStyle: "italic",
},
symbol: {
- color: 'rgb(128, 203, 196)',
+ color: "rgb(128, 203, 196)",
},
property: {
- color: 'rgb(128, 203, 196)',
+ color: "rgb(128, 203, 196)",
},
tag: {
- color: 'rgb(127, 219, 202)',
+ color: "rgb(127, 219, 202)",
},
operator: {
- color: 'rgb(127, 219, 202)',
+ color: "rgb(127, 219, 202)",
},
keyword: {
- color: 'rgb(127, 219, 202)',
+ color: "rgb(127, 219, 202)",
},
boolean: {
- color: 'rgb(255, 88, 116)',
+ color: "rgb(255, 88, 116)",
},
number: {
- color: 'rgb(247, 140, 108)',
+ color: "rgb(247, 140, 108)",
},
constant: {
- color: 'rgb(130, 170, 255)',
+ color: "rgb(130, 170, 255)",
},
function: {
- color: 'rgb(130, 170, 255)',
+ color: "rgb(130, 170, 255)",
},
builtin: {
- color: 'rgb(130, 170, 255)',
+ color: "rgb(130, 170, 255)",
},
char: {
- color: 'rgb(130, 170, 255)',
+ color: "rgb(130, 170, 255)",
},
selector: {
- color: 'rgb(199, 146, 234)',
- fontStyle: 'italic',
+ color: "rgb(199, 146, 234)",
+ fontStyle: "italic",
},
doctype: {
- color: 'rgb(199, 146, 234)',
- fontStyle: 'italic',
+ color: "rgb(199, 146, 234)",
+ fontStyle: "italic",
},
- 'attr-name': {
- color: 'rgb(173, 219, 103)',
- fontStyle: 'italic',
+ "attr-name": {
+ color: "rgb(173, 219, 103)",
+ fontStyle: "italic",
},
inserted: {
- color: 'rgb(173, 219, 103)',
- fontStyle: 'italic',
+ color: "rgb(173, 219, 103)",
+ fontStyle: "italic",
},
string: {
- color: 'rgb(173, 219, 103)',
+ color: "rgb(173, 219, 103)",
},
url: {
- color: 'rgb(173, 219, 103)',
+ color: "rgb(173, 219, 103)",
},
entity: {
- color: 'rgb(173, 219, 103)',
+ color: "rgb(173, 219, 103)",
},
- '.language-css .token.string': {
- color: 'rgb(173, 219, 103)',
+ ".language-css .token.string": {
+ color: "rgb(173, 219, 103)",
},
- '.style .token.string': {
- color: 'rgb(173, 219, 103)',
+ ".style .token.string": {
+ color: "rgb(173, 219, 103)",
},
- 'class-name': {
- color: 'rgb(255, 203, 139)',
+ "class-name": {
+ color: "rgb(255, 203, 139)",
},
atrule: {
- color: 'rgb(255, 203, 139)',
+ color: "rgb(255, 203, 139)",
},
- 'attr-value': {
- color: 'rgb(255, 203, 139)',
+ "attr-value": {
+ color: "rgb(255, 203, 139)",
},
regex: {
- color: 'rgb(214, 222, 235)',
+ color: "rgb(214, 222, 235)",
},
important: {
- color: 'rgb(214, 222, 235)',
- fontWeight: 'bold',
+ color: "rgb(214, 222, 235)",
+ fontWeight: "bold",
},
variable: {
- color: 'rgb(214, 222, 235)',
+ color: "rgb(214, 222, 235)",
},
bold: {
- fontWeight: 'bold',
+ fontWeight: "bold",
},
italic: {
- fontStyle: 'italic',
+ fontStyle: "italic",
},
})(theme);
};
diff --git a/packages/paste-core/components/code-block/src/CodeBlockWrapper.tsx b/packages/paste-core/components/code-block/src/CodeBlockWrapper.tsx
index df6ba1694a..11e8d9862a 100644
--- a/packages/paste-core/components/code-block/src/CodeBlockWrapper.tsx
+++ b/packages/paste-core/components/code-block/src/CodeBlockWrapper.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {Box} from '@twilio-paste/box';
-import type {BoxProps} from '@twilio-paste/box';
-import {Tabs} from '@twilio-paste/tabs';
-import type {TabStateReturn} from '@twilio-paste/tabs';
+import { Box } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
+import { Tabs } from "@twilio-paste/tabs";
+import type { TabStateReturn } from "@twilio-paste/tabs";
+import * as React from "react";
export interface CodeBlockTabStateReturn extends TabStateReturn {
[key: string]: any;
@@ -10,12 +10,12 @@ export interface CodeBlockTabStateReturn extends TabStateReturn {
export interface CodeBlockWrapperProps {
children?: React.ReactNode;
- element?: BoxProps['element'];
+ element?: BoxProps["element"];
state?: CodeBlockTabStateReturn;
}
export const CodeBlockWrapper = React.forwardRef(
- ({children, state, element = 'CODE_BLOCK_WRAPPER'}, ref) => {
+ ({ children, state, element = "CODE_BLOCK_WRAPPER" }, ref) => {
return (
);
- }
+ },
);
-CodeBlockWrapper.displayName = 'CodeBlockWrapper';
+CodeBlockWrapper.displayName = "CodeBlockWrapper";
diff --git a/packages/paste-core/components/code-block/src/CopyButton.tsx b/packages/paste-core/components/code-block/src/CopyButton.tsx
index d77756f621..6a3b49220b 100644
--- a/packages/paste-core/components/code-block/src/CopyButton.tsx
+++ b/packages/paste-core/components/code-block/src/CopyButton.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import {Button} from '@twilio-paste/button';
-import {Box} from '@twilio-paste/box';
-import {useClipboard} from '@twilio-paste/clipboard-copy-library';
-import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only';
-import {CopyIcon} from '@twilio-paste/icons/esm/CopyIcon';
-import {Tooltip, useTooltipState} from '@twilio-paste/tooltip';
-import type {BoxProps} from '@twilio-paste/box';
+import { Box } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { useClipboard } from "@twilio-paste/clipboard-copy-library";
+import { CopyIcon } from "@twilio-paste/icons/esm/CopyIcon";
+import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
+import { Tooltip, useTooltipState } from "@twilio-paste/tooltip";
+import * as React from "react";
interface CopyButtonProps {
text: string;
i18nCopyLabelBefore?: string;
i18nCopyLabelAfter?: string;
- element?: BoxProps['element'];
+ element?: BoxProps["element"];
copyTextFormatter?: (code: string) => string;
}
@@ -23,9 +23,9 @@ export const getCopyButtonText = (labelBefore: string, labelAfter: string) => {
export const CopyButton: React.FC> = ({
text,
- i18nCopyLabelBefore = 'Copy code block',
- i18nCopyLabelAfter = 'Copied!',
- element = 'COPY_BUTTON',
+ i18nCopyLabelBefore = "Copy code block",
+ i18nCopyLabelAfter = "Copied!",
+ element = "COPY_BUTTON",
copyTextFormatter,
}) => {
const tooltipState = useTooltipState();
@@ -37,7 +37,7 @@ export const CopyButton: React.FC> = ({
return getCopyButtonText(i18nCopyLabelBefore, i18nCopyLabelAfter);
}, [i18nCopyLabelBefore, i18nCopyLabelAfter]);
- const clipboard = useClipboard({copiedTimeout: 1500});
+ const clipboard = useClipboard({ copiedTimeout: 1500 });
const handleCopy = React.useCallback(() => {
const formattedText = copyTextFormatter ? copyTextFormatter(text) : text;
clipboard.copy(formattedText);
@@ -75,4 +75,4 @@ export const CopyButton: React.FC> = ({
);
};
-CopyButton.displayName = 'CopyButton';
+CopyButton.displayName = "CopyButton";
diff --git a/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx b/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx
index 7df531bc1e..c9176f4b52 100644
--- a/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx
+++ b/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {Button} from '@twilio-paste/button';
-import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only';
-import {LinkExternalIcon} from '@twilio-paste/icons/esm/LinkExternalIcon';
-import {Tooltip, useTooltipState} from '@twilio-paste/tooltip';
-import type {BoxProps} from '@twilio-paste/box';
+import type { BoxProps } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon";
+import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
+import { Tooltip, useTooltipState } from "@twilio-paste/tooltip";
+import * as React from "react";
interface ExternalLinkButtonProps {
href: string;
i18nLinkLabel?: string;
- element?: BoxProps['element'];
+ element?: BoxProps["element"];
}
export const ExternalLinkButton: React.FC> = ({
- i18nLinkLabel = 'Open code block in new page',
+ i18nLinkLabel = "Open code block in new page",
href,
- element = 'EXTERNAL_LINK',
+ element = "EXTERNAL_LINK",
}) => {
const tooltipState = useTooltipState();
const tooltipText = i18nLinkLabel;
@@ -46,4 +46,4 @@ export const ExternalLinkButton: React.FCmessages->create(
)
);`;
-export const CustomizedCodeBlock: StoryFn = (_args, {parameters: {isTestEnvironment}}) => {
+export const CustomizedCodeBlock: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
const currentTheme = useTheme();
return (
@@ -68,22 +75,22 @@ export const CustomizedCodeBlock: StoryFn = (_args, {parameters: {isTestEnvironm
theme={currentTheme}
elements={{
CODE_BLOCK_WRAPPER: {
- width: 'size50',
+ width: "size50",
},
CODE_BLOCK_HEADER: {
- backgroundColor: 'colorBackgroundErrorWeakest',
- color: 'colorTextErrorStronger',
- borderTopLeftRadius: 'borderRadius30',
- borderTopRightRadius: 'borderRadius30',
- fontSize: 'fontSize20',
+ backgroundColor: "colorBackgroundErrorWeakest",
+ color: "colorTextErrorStronger",
+ borderTopLeftRadius: "borderRadius30",
+ borderTopRightRadius: "borderRadius30",
+ fontSize: "fontSize20",
},
CODE_BLOCK_COPY_BUTTON: {
- backgroundColor: 'colorBackgroundErrorWeakest',
- color: 'colorTextErrorStronger',
+ backgroundColor: "colorBackgroundErrorWeakest",
+ color: "colorTextErrorStronger",
},
CODE_BLOCK_EXTERNAL_LINK: {
- backgroundColor: 'colorBackgroundErrorWeakest',
- color: 'colorTextErrorStronger',
+ backgroundColor: "colorBackgroundErrorWeakest",
+ color: "colorTextErrorStronger",
},
}}
>
@@ -95,7 +102,7 @@ export const CustomizedCodeBlock: StoryFn = (_args, {parameters: {isTestEnvironm
);
};
-export const CustomizedCodeBlockGroup: StoryFn = (_args, {parameters: {isTestEnvironment}}) => {
+export const CustomizedCodeBlockGroup: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
const currentTheme = useTheme();
return (
@@ -104,37 +111,37 @@ export const CustomizedCodeBlockGroup: StoryFn = (_args, {parameters: {isTestEnv
theme={currentTheme}
elements={{
CODE_BLOCK_WRAPPER: {
- width: 'size50',
+ width: "size50",
},
CODE_BLOCK_HEADER: {
- backgroundColor: 'colorBackgroundErrorWeakest',
- color: 'colorTextErrorStronger',
- borderTopLeftRadius: 'borderRadius30',
- borderTopRightRadius: 'borderRadius30',
- fontSize: 'fontSize20',
+ backgroundColor: "colorBackgroundErrorWeakest",
+ color: "colorTextErrorStronger",
+ borderTopLeftRadius: "borderRadius30",
+ borderTopRightRadius: "borderRadius30",
+ fontSize: "fontSize20",
},
CODE_BLOCK_TAB_LIST: {
- backgroundColor: 'colorBackgroundErrorWeakest',
- columnGap: 'space0',
+ backgroundColor: "colorBackgroundErrorWeakest",
+ columnGap: "space0",
},
CODE_BLOCK_TAB: {
- borderRadius: 'borderRadius0',
+ borderRadius: "borderRadius0",
},
CODE_BLOCK_TAB_PANEL: {
- borderStyle: 'solid',
- borderWidth: 'borderWidth20',
- borderColor: 'colorBorderDestructiveWeak',
- borderBottomLeftRadius: 'borderRadius30',
- borderBottomRightRadius: 'borderRadius30',
- overflow: 'hidden',
+ borderStyle: "solid",
+ borderWidth: "borderWidth20",
+ borderColor: "colorBorderDestructiveWeak",
+ borderBottomLeftRadius: "borderRadius30",
+ borderBottomRightRadius: "borderRadius30",
+ overflow: "hidden",
},
CODE_BLOCK_COPY_BUTTON: {
- backgroundColor: 'colorBackgroundErrorWeakest',
- color: 'colorTextErrorStronger',
+ backgroundColor: "colorBackgroundErrorWeakest",
+ color: "colorTextErrorStronger",
},
CODE_BLOCK_EXTERNAL_LINK: {
- backgroundColor: 'colorBackgroundErrorWeakest',
- color: 'colorTextErrorStronger',
+ backgroundColor: "colorBackgroundErrorWeakest",
+ color: "colorTextErrorStronger",
},
}}
>
diff --git a/packages/paste-core/components/code-block/stories/index.stories.tsx b/packages/paste-core/components/code-block/stories/index.stories.tsx
index c501794987..9b8109754c 100644
--- a/packages/paste-core/components/code-block/stories/index.stories.tsx
+++ b/packages/paste-core/components/code-block/stories/index.stories.tsx
@@ -1,12 +1,19 @@
-import * as React from 'react';
-import type {StoryFn} from '@storybook/react';
-import {Box} from '@twilio-paste/box';
-
-import {CodeBlock, CodeBlockWrapper, CodeBlockHeader, CodeBlockTabList, CodeBlockTab, CodeBlockTabPanel} from '../src';
+import type { StoryFn } from "@storybook/react";
+import { Box } from "@twilio-paste/box";
+import * as React from "react";
+
+import {
+ CodeBlock,
+ CodeBlockHeader,
+ CodeBlockTab,
+ CodeBlockTabList,
+ CodeBlockTabPanel,
+ CodeBlockWrapper,
+} from "../src";
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/Code Block',
+ title: "Components/Code Block",
component: CodeBlock,
};
@@ -150,7 +157,7 @@ export const CustomCopyFormatter: StoryFn = () => (
language="shell"
code={`$ curl -G https://api.twilio.com/2010-04-01/Accounts -u '[YOUR ACCOUNT SID]:[YOUR AUTH TOKEN]'`}
copyTextFormatter={(code) => {
- return code.replace('[YOUR ACCOUNT SID]', 'XXXXXXX').replace('[YOUR AUTH TOKEN]', '1234567890');
+ return code.replace("[YOUR ACCOUNT SID]", "XXXXXXX").replace("[YOUR AUTH TOKEN]", "1234567890");
}}
/>
);
diff --git a/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx b/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx
index 7f53351301..b6fe89bb44 100644
--- a/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx
+++ b/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx
@@ -1,29 +1,29 @@
-import * as React from 'react';
-import filter from 'lodash/filter';
-import uniq from 'lodash/uniq';
-import {render, screen, fireEvent, waitFor} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import type {RenderOptions} from '@testing-library/react';
-import {Theme} from '@twilio-paste/theme';
-import {Button} from '@twilio-paste/button';
-import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon';
-import {Box} from '@twilio-paste/box';
-import type {useVirtual as _useVirtual} from 'react-virtual';
-
-import {useCombobox, Combobox} from '../src';
-import type {ComboboxProps} from '../src/types';
-import {getIndexedItems, getGroupedItems} from '../src/helpers';
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { RenderOptions } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { CloseIcon } from "@twilio-paste/icons/esm/CloseIcon";
+import { Theme } from "@twilio-paste/theme";
+import filter from "lodash/filter";
+import uniq from "lodash/uniq";
+import * as React from "react";
+import type { useVirtual as _useVirtual } from "react-virtual";
+
+import { Combobox, useCombobox } from "../src";
+import { getGroupedItems, getIndexedItems } from "../src/helpers";
+import type { ComboboxProps } from "../src/types";
type UseVirtual = typeof _useVirtual;
const mockScrollToIndex = jest.fn();
-jest.mock('react-virtual', () => {
- const {useVirtual} = jest.requireActual('react-virtual');
+jest.mock("react-virtual", () => {
+ const { useVirtual } = jest.requireActual("react-virtual");
return {
useVirtual: (config: Parameters) => {
- const {scrollToIndex, ...returnValue} = useVirtual(config);
+ const { scrollToIndex, ...returnValue } = useVirtual(config);
return {
...returnValue,
scrollToIndex: mockScrollToIndex,
@@ -32,46 +32,46 @@ jest.mock('react-virtual', () => {
};
});
-const items = ['Alert', 'Anchor', 'Button', 'Card', 'Heading', 'List', 'Modal', 'Paragraph'];
+const items = ["Alert", "Anchor", "Button", "Card", "Heading", "List", "Modal", "Paragraph"];
const objectItems = [
- {code: 'AD', label: 'Andorra', phone: '376'},
- {code: 'AE', label: 'United Arab Emirates', phone: '971'},
- {code: 'AF', label: 'Afghanistan', phone: '93'},
- {code: 'AG', label: 'Antigua and Barbuda', phone: '1-268'},
- {code: 'AI', label: 'Anguilla', phone: '1-264'},
- {code: 'AL', label: 'Albania', phone: '355'},
- {code: 'AM', label: 'Armenia', phone: '374'},
- {code: 'AO', label: 'Angola', phone: '244'},
- {code: 'AQ', label: 'Antarctica', phone: '672'},
- {code: 'AR', label: 'Argentina', phone: '54'},
- {code: 'AS', label: 'American Samoa', phone: '1-684'},
- {code: 'AT', label: 'Austria', phone: '43'},
+ { code: "AD", label: "Andorra", phone: "376" },
+ { code: "AE", label: "United Arab Emirates", phone: "971" },
+ { code: "AF", label: "Afghanistan", phone: "93" },
+ { code: "AG", label: "Antigua and Barbuda", phone: "1-268" },
+ { code: "AI", label: "Anguilla", phone: "1-264" },
+ { code: "AL", label: "Albania", phone: "355" },
+ { code: "AM", label: "Armenia", phone: "374" },
+ { code: "AO", label: "Angola", phone: "244" },
+ { code: "AQ", label: "Antarctica", phone: "672" },
+ { code: "AR", label: "Argentina", phone: "54" },
+ { code: "AS", label: "American Samoa", phone: "1-684" },
+ { code: "AT", label: "Austria", phone: "43" },
];
const groupedItems = [
- {group: 'Components', label: 'Alert'},
- {group: 'Components', label: 'Anchor'},
- {group: 'Components', label: 'Button'},
- {group: 'Components', label: 'Card'},
- {group: 'Components', label: 'Heading'},
- {group: 'Components', label: 'List'},
- {group: 'Components', label: 'Modal'},
- {group: 'Components', label: 'Paragraph'},
- {group: 'Primitives', label: 'Box'},
- {group: 'Primitives', label: 'Text'},
- {group: 'Primitives', label: 'Non-modal dialog'},
- {group: 'Layout', label: 'Grid'},
- {label: 'Design Tokens'},
+ { group: "Components", label: "Alert" },
+ { group: "Components", label: "Anchor" },
+ { group: "Components", label: "Button" },
+ { group: "Components", label: "Card" },
+ { group: "Components", label: "Heading" },
+ { group: "Components", label: "List" },
+ { group: "Components", label: "Modal" },
+ { group: "Components", label: "Paragraph" },
+ { group: "Primitives", label: "Box" },
+ { group: "Primitives", label: "Text" },
+ { group: "Primitives", label: "Non-modal dialog" },
+ { group: "Layout", label: "Grid" },
+ { label: "Design Tokens" },
];
const smallGroupedItems = [
- {group: 'Components', label: 'Alert'},
- {group: 'Primitives', label: 'Box'},
- {label: 'Design Tokens'},
+ { group: "Components", label: "Alert" },
+ { group: "Primitives", label: "Box" },
+ { label: "Design Tokens" },
];
-const ThemeWrapper: RenderOptions['wrapper'] = ({children}) => (
+const ThemeWrapper: RenderOptions["wrapper"] = ({ children }) => (
{children}
);
@@ -81,7 +81,7 @@ function getFilteredItems(inputValue: string): any[] {
}
const ComboboxMock = (): JSX.Element => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
return (
@@ -102,8 +102,8 @@ const ComboboxMock = (): JSX.Element => {
};
const GroupedMockCombobox: React.FC<
- React.PropsWithChildren<{groupLabelTemplate?: ComboboxProps['groupLabelTemplate']}>
-> = ({groupLabelTemplate}) => {
+ React.PropsWithChildren<{ groupLabelTemplate?: ComboboxProps["groupLabelTemplate"] }>
+> = ({ groupLabelTemplate }) => {
return (
{item.label}
}
- itemToString={(item) => (item && typeof item !== 'string' ? item.label : null)}
+ itemToString={(item) => (item && typeof item !== "string" ? item.label : null)}
/>
);
};
@@ -124,13 +124,13 @@ function getFilteredObjectItems(inputValue: string): any[] {
}
const ControlledCombobox = (): JSX.Element => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredObjectItems(inputValue), [inputValue]);
const [selectedItem, setSelectedItem] = React.useState({});
- const {reset, ...state} = useCombobox({
+ const { reset, ...state } = useCombobox({
items: filteredItems,
- itemToString: (item) => (item ? item.label : ''),
+ itemToString: (item) => (item ? item.label : ""),
onSelectedItemChange: (changes) => {
setSelectedItem(changes.selectedItem);
},
@@ -176,214 +176,214 @@ const ControlledCombobox = (): JSX.Element => {
);
};
-describe('Combobox', () => {
+describe("Combobox", () => {
beforeEach(() => {
jest.clearAllMocks();
});
- describe('Unit tests', () => {
- it('should return an indexed array of items', () => {
+ describe("Unit tests", () => {
+ it("should return an indexed array of items", () => {
expect(getIndexedItems(smallGroupedItems)).toStrictEqual([
- {group: 'Components', index: 0, label: 'Alert'},
- {group: 'Primitives', index: 1, label: 'Box'},
- {index: 2, label: 'Design Tokens'},
+ { group: "Components", index: 0, label: "Alert" },
+ { group: "Primitives", index: 1, label: "Box" },
+ { index: 2, label: "Design Tokens" },
]);
});
- it('should return grouped object of items with original array index', () => {
- expect(getGroupedItems(getIndexedItems(smallGroupedItems), 'group')).toStrictEqual({
- Components: [{group: 'Components', index: 0, label: 'Alert'}],
- Primitives: [{group: 'Primitives', index: 1, label: 'Box'}],
- undefined: [{index: 2, label: 'Design Tokens'}],
+ it("should return grouped object of items with original array index", () => {
+ expect(getGroupedItems(getIndexedItems(smallGroupedItems), "group")).toStrictEqual({
+ Components: [{ group: "Components", index: 0, label: "Alert" }],
+ Primitives: [{ group: "Primitives", index: 1, label: "Box" }],
+ undefined: [{ index: 2, label: "Design Tokens" }],
});
});
});
- describe('Render', () => {
- it('should render a combobox with aria attributes', () => {
- render(, {wrapper: ThemeWrapper});
- const renderedCombobox = screen.getByRole('combobox');
- expect(renderedCombobox.getAttribute('aria-haspopup')).toEqual('listbox');
- expect(renderedCombobox.getAttribute('aria-owns')).toEqual(screen.getByRole('listbox').id);
- expect(renderedCombobox.getAttribute('aria-expanded')).toEqual('true');
+ describe("Render", () => {
+ it("should render a combobox with aria attributes", () => {
+ render(, { wrapper: ThemeWrapper });
+ const renderedCombobox = screen.getByRole("combobox");
+ expect(renderedCombobox.getAttribute("aria-haspopup")).toEqual("listbox");
+ expect(renderedCombobox.getAttribute("aria-owns")).toEqual(screen.getByRole("listbox").id);
+ expect(renderedCombobox.getAttribute("aria-expanded")).toEqual("true");
});
- it('should render a textbox with aria attributes', () => {
- render(, {wrapper: ThemeWrapper});
- const renderedCombobox = screen.getByRole('textbox');
- expect(renderedCombobox.getAttribute('aria-controls')).toEqual(screen.getByRole('listbox').id);
- expect(renderedCombobox.getAttribute('aria-labelledby')).toEqual(document.querySelector('label')!.id);
- expect(renderedCombobox.getAttribute('aria-describedby')).not.toEqual('');
+ it("should render a textbox with aria attributes", () => {
+ render(, { wrapper: ThemeWrapper });
+ const renderedCombobox = screen.getByRole("textbox");
+ expect(renderedCombobox.getAttribute("aria-controls")).toEqual(screen.getByRole("listbox").id);
+ expect(renderedCombobox.getAttribute("aria-labelledby")).toEqual(document.querySelector("label")!.id);
+ expect(renderedCombobox.getAttribute("aria-describedby")).not.toEqual("");
});
- it('should render a list with aria attributes', () => {
- render(, {wrapper: ThemeWrapper});
- const renderedCombobox = screen.getByRole('listbox');
- expect(renderedCombobox.getAttribute('aria-labelledby')).toEqual(document.querySelector('label')!.id);
+ it("should render a list with aria attributes", () => {
+ render(, { wrapper: ThemeWrapper });
+ const renderedCombobox = screen.getByRole("listbox");
+ expect(renderedCombobox.getAttribute("aria-labelledby")).toEqual(document.querySelector("label")!.id);
});
- it('should render a list with unique option ids', () => {
- render(, {wrapper: ThemeWrapper});
- const renderedOptions = screen.getAllByRole('option');
+ it("should render a list with unique option ids", () => {
+ render(, { wrapper: ThemeWrapper });
+ const renderedOptions = screen.getAllByRole("option");
const optionIDs = renderedOptions.map((option) => option.id);
const uniqueIDs = uniq(optionIDs);
expect(uniqueIDs.length).toEqual(optionIDs.length);
- expect(renderedOptions[3].getAttribute('aria-disabled')).toEqual('true');
+ expect(renderedOptions[3].getAttribute("aria-disabled")).toEqual("true");
});
- it('should render a label for that matches the input id', () => {
- render(, {wrapper: ThemeWrapper});
- const renderedLabel = document.querySelector('label');
- const renderedTextbox = screen.getByRole('textbox');
- expect(renderedLabel!.getAttribute('for')).toEqual(renderedTextbox.getAttribute('id'));
+ it("should render a label for that matches the input id", () => {
+ render(, { wrapper: ThemeWrapper });
+ const renderedLabel = document.querySelector("label");
+ const renderedTextbox = screen.getByRole("textbox");
+ expect(renderedLabel!.getAttribute("for")).toEqual(renderedTextbox.getAttribute("id"));
});
- it('should render a required combobox', () => {
- render(, {wrapper: ThemeWrapper});
- const renderedTextbox = screen.getByRole('textbox');
- expect(renderedTextbox.getAttribute('required')).toEqual('');
+ it("should render a required combobox", () => {
+ render(, { wrapper: ThemeWrapper });
+ const renderedTextbox = screen.getByRole("textbox");
+ expect(renderedTextbox.getAttribute("required")).toEqual("");
});
- it('should set correct aria-activedescendant when highlighted index changes', async () => {
- render(, {wrapper: ThemeWrapper});
+ it("should set correct aria-activedescendant when highlighted index changes", async () => {
+ render(, { wrapper: ThemeWrapper });
const targetIndex = 1;
const target = items[targetIndex];
userEvent.hover(screen.getByText(target));
- expect(screen.getByRole('textbox').getAttribute('aria-activedescendant')).toMatch(
- /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g
+ expect(screen.getByRole("textbox").getAttribute("aria-activedescendant")).toMatch(
+ /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g,
);
});
});
- describe('Groups', () => {
- it('should render a group of options', () => {
- render(, {wrapper: ThemeWrapper});
- const renderedGroups = screen.getAllByRole('group');
+ describe("Groups", () => {
+ it("should render a group of options", () => {
+ render(, { wrapper: ThemeWrapper });
+ const renderedGroups = screen.getAllByRole("group");
// check groups, group label and number of options per group
- expect(renderedGroups[0].getAttribute('aria-label')).toEqual('Components');
+ expect(renderedGroups[0].getAttribute("aria-label")).toEqual("Components");
expect(renderedGroups[0].querySelectorAll('[role="option"]').length).toEqual(8);
- expect(renderedGroups[1].getAttribute('aria-label')).toEqual('Primitives');
+ expect(renderedGroups[1].getAttribute("aria-label")).toEqual("Primitives");
expect(renderedGroups[1].querySelectorAll('[role="option"]').length).toEqual(3);
- expect(renderedGroups[2].getAttribute('aria-label')).toEqual('Layout');
+ expect(renderedGroups[2].getAttribute("aria-label")).toEqual("Layout");
expect(renderedGroups[2].querySelectorAll('[role="option"]').length).toEqual(1);
});
- it('should render any items not identified as part of the group as ungrouped options', () => {
- render(, {wrapper: ThemeWrapper});
- const renderedListbox = screen.getByRole('listbox');
- const renderedGroups = screen.getAllByRole('group');
+ it("should render any items not identified as part of the group as ungrouped options", () => {
+ render(, { wrapper: ThemeWrapper });
+ const renderedListbox = screen.getByRole("listbox");
+ const renderedGroups = screen.getAllByRole("group");
// check we have 3 groups
expect(renderedGroups.length).toEqual(3);
// check any options that are not nested in groups
expect(
- renderedListbox.querySelectorAll('[role="listbox"] > [role="presentation"] > [role="option"]').length
+ renderedListbox.querySelectorAll('[role="listbox"] > [role="presentation"] > [role="option"]').length,
).toEqual(1);
});
- it('should render a listbox with groups of options that contains no duplicate ids', () => {
- render(, {wrapper: ThemeWrapper});
- const renderedOptions = screen.getAllByRole('option');
+ it("should render a listbox with groups of options that contains no duplicate ids", () => {
+ render(, { wrapper: ThemeWrapper });
+ const renderedOptions = screen.getAllByRole("option");
const optionIDs = renderedOptions.map((option) => option.id);
const uniqueIDs = uniq(optionIDs);
expect(uniqueIDs.length).toEqual(optionIDs.length);
});
- it('should render a custom group label', () => {
+ it("should render a custom group label", () => {
render( hi {groupName}} />, {
wrapper: ThemeWrapper,
});
- const renderedGroups = screen.getAllByRole('group');
+ const renderedGroups = screen.getAllByRole("group");
expect(renderedGroups[0].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual(
- 'hi Components'
+ "hi Components",
);
expect(renderedGroups[1].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual(
- 'hi Primitives'
+ "hi Primitives",
);
expect(renderedGroups[2].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual(
- 'hi Layout'
+ "hi Layout",
);
});
- it('should select item using keyboard', () => {
- render(, {wrapper: ThemeWrapper});
+ it("should select item using keyboard", () => {
+ render(, { wrapper: ThemeWrapper });
// open the combobox
- fireEvent.click(screen.getByRole('textbox'));
+ fireEvent.click(screen.getByRole("textbox"));
// select the third item using ArrowDown keyDown
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'});
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'});
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'});
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'Enter', code: 'Enter'});
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowDown", code: "ArrowDown" });
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowDown", code: "ArrowDown" });
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowDown", code: "ArrowDown" });
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter", code: "Enter" });
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore Property 'value' does not exist on type 'HTMLElement' (I get it, but this is right)
- expect(screen.getByRole('textbox').value).toEqual('Button');
+ expect(screen.getByRole("textbox").value).toEqual("Button");
// select the first item using ArrowUp keyDown
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowUp', code: 'ArrowUp'});
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowUp', code: 'ArrowUp'});
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'Enter', code: 'Enter'});
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowUp", code: "ArrowUp" });
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowUp", code: "ArrowUp" });
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter", code: "Enter" });
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore Property 'value' does not exist on type 'HTMLElement' (I get it, but this is right)
- expect(screen.getByRole('textbox').value).toEqual('Alert');
+ expect(screen.getByRole("textbox").value).toEqual("Alert");
});
it('should not run react virtual\'s "scroll to" function when "groupItemsBy" is defined as a string', () => {
// bc grouped comboboxes are not yet virtualized
- render(, {wrapper: ThemeWrapper});
+ render(, { wrapper: ThemeWrapper });
const targetIndex = 1;
const target = groupedItems[targetIndex];
userEvent.hover(screen.getByText(target.label));
- expect(screen.getByRole('textbox').getAttribute('aria-activedescendant')).toMatch(
- /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g
+ expect(screen.getByRole("textbox").getAttribute("aria-activedescendant")).toMatch(
+ /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g,
);
expect(mockScrollToIndex).not.toHaveBeenCalled();
});
});
- describe('Controlled Combobox', () => {
- it('should be able to clear a Combobox', () => {
- render(, {wrapper: ThemeWrapper});
+ describe("Controlled Combobox", () => {
+ it("should be able to clear a Combobox", () => {
+ render(, { wrapper: ThemeWrapper });
// open the combobox
- fireEvent.click(screen.getByRole('textbox'));
+ fireEvent.click(screen.getByRole("textbox"));
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore Property 'value' does not exist on type 'HTMLElement' (I get it, but this is right)
- expect(screen.getByRole('textbox').value).toEqual('');
+ expect(screen.getByRole("textbox").value).toEqual("");
// select the first item
- fireEvent.click(screen.getAllByRole('option')[0]);
+ fireEvent.click(screen.getAllByRole("option")[0]);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore Property 'value' does not exist on type 'HTMLElement' (I get it, but this is right)
- expect(screen.getByRole('textbox').value).toEqual('Andorra');
- expect(screen.getByTestId('input-value-span').textContent).toEqual('"Andorra"');
- expect(screen.getByTestId('selected-item-span').textContent).toEqual(
- '{"code":"AD","label":"Andorra","phone":"376"}'
+ expect(screen.getByRole("textbox").value).toEqual("Andorra");
+ expect(screen.getByTestId("input-value-span").textContent).toEqual('"Andorra"');
+ expect(screen.getByTestId("selected-item-span").textContent).toEqual(
+ '{"code":"AD","label":"Andorra","phone":"376"}',
);
// click the clear button
- fireEvent.click(screen.getByText('Clear'));
+ fireEvent.click(screen.getByText("Clear"));
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore Property 'value' does not exist on type 'HTMLElement' (I get it, but this is right)
- expect(screen.getByRole('textbox').value).toEqual('');
- expect(screen.getByTestId('input-value-span').textContent).toEqual('""');
- expect(screen.getByTestId('selected-item-span').textContent).toEqual('null');
+ expect(screen.getByRole("textbox").value).toEqual("");
+ expect(screen.getByTestId("input-value-span").textContent).toEqual('""');
+ expect(screen.getByTestId("selected-item-span").textContent).toEqual("null");
});
- it('should set correct aria-activedescendant when highlighted index changes', async () => {
- render(, {wrapper: ThemeWrapper});
+ it("should set correct aria-activedescendant when highlighted index changes", async () => {
+ render(, { wrapper: ThemeWrapper });
- userEvent.click(screen.getByRole('textbox'));
+ userEvent.click(screen.getByRole("textbox"));
const targetIndex = 1;
const target = objectItems[targetIndex];
- userEvent.hover(screen.getByText(target.label, {exact: false})); // text broken up by characters
+ userEvent.hover(screen.getByText(target.label, { exact: false })); // text broken up by characters
- expect(screen.getByRole('textbox').getAttribute('aria-activedescendant')).toMatch(
- /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g
+ expect(screen.getByRole("textbox").getAttribute("aria-activedescendant")).toMatch(
+ /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g,
);
});
});
diff --git a/packages/paste-core/components/combobox/__tests__/GrowingInput.spec.tsx b/packages/paste-core/components/combobox/__tests__/GrowingInput.spec.tsx
index b16d5dbeb8..c616a12ba7 100644
--- a/packages/paste-core/components/combobox/__tests__/GrowingInput.spec.tsx
+++ b/packages/paste-core/components/combobox/__tests__/GrowingInput.spec.tsx
@@ -1,22 +1,22 @@
-import * as React from 'react';
-import {render, screen, fireEvent} from '@testing-library/react';
-import type {RenderOptions} from '@testing-library/react';
-import {Theme} from '@twilio-paste/theme';
+import { fireEvent, render, screen } from "@testing-library/react";
+import type { RenderOptions } from "@testing-library/react";
+import { Theme } from "@twilio-paste/theme";
+import * as React from "react";
-import {GrowingInput} from '../src/multiselect/GrowingInput';
+import { GrowingInput } from "../src/multiselect/GrowingInput";
-const TEST_ID = 'growing-input-test-id-123';
+const TEST_ID = "growing-input-test-id-123";
-describe('GrowingInput component', () => {
- it('should set the correct width and have an id', () => {
+describe("GrowingInput component", () => {
+ it("should set the correct width and have an id", () => {
render(
-
+ ,
);
- const input = screen.getByRole('textbox');
+ const input = screen.getByRole("textbox");
- expect(input).toHaveStyleRule('width', '100%');
- expect(input.getAttribute('id')).toEqual(TEST_ID);
+ expect(input).toHaveStyleRule("width", "100%");
+ expect(input.getAttribute("id")).toEqual(TEST_ID);
});
});
diff --git a/packages/paste-core/components/combobox/__tests__/MultiselectCombobox.spec.tsx b/packages/paste-core/components/combobox/__tests__/MultiselectCombobox.spec.tsx
index 1311a97bc5..1162bdf9ac 100644
--- a/packages/paste-core/components/combobox/__tests__/MultiselectCombobox.spec.tsx
+++ b/packages/paste-core/components/combobox/__tests__/MultiselectCombobox.spec.tsx
@@ -1,25 +1,25 @@
-import * as React from 'react';
-import {render, act, screen, fireEvent} from '@testing-library/react';
-import type {RenderOptions} from '@testing-library/react';
-import {Theme} from '@twilio-paste/theme';
-import {Form} from '@twilio-paste/form';
-import {Button} from '@twilio-paste/button';
-import filter from 'lodash/filter';
-import uniq from 'lodash/uniq';
-
-import {MultiselectCombobox, useMultiselectCombobox} from '../src';
-import type {MultiselectComboboxProps} from '../src';
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import type { RenderOptions } from "@testing-library/react";
+import { Button } from "@twilio-paste/button";
+import { Form } from "@twilio-paste/form";
+import { Theme } from "@twilio-paste/theme";
+import filter from "lodash/filter";
+import uniq from "lodash/uniq";
+import * as React from "react";
+
+import { MultiselectCombobox, useMultiselectCombobox } from "../src";
+import type { MultiselectComboboxProps } from "../src";
const items = [
- 'Alert',
- 'Anchor',
- 'Button',
- 'Card',
- 'Heading',
- 'A component with a really really really really really really really really long name',
- 'List',
- 'Modal',
- 'Paragraph',
+ "Alert",
+ "Anchor",
+ "Button",
+ "Card",
+ "Heading",
+ "A component with a really really really really really really really really long name",
+ "List",
+ "Modal",
+ "Paragraph",
];
function getFilteredItems(inputValue: string): string[] {
@@ -30,12 +30,12 @@ function getFilteredItems(inputValue: string): string[] {
});
}
-const ThemeWrapper: RenderOptions['wrapper'] = ({children}) => (
+const ThemeWrapper: RenderOptions["wrapper"] = ({ children }) => (
{children}
);
const MultiselectComboboxMock: React.FC> = (props) => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
return (
> = (pr
items={filteredItems}
disabledItems={[items[3]]}
initialIsOpen
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={() => {
@@ -63,19 +63,19 @@ interface GroupedItem {
label: string;
}
const groupedItems = [
- {group: 'Components', label: 'Alert'},
- {group: 'Components', label: 'Anchor'},
- {group: 'Components', label: 'Button'},
- {group: 'Components', label: 'Card'},
- {group: 'Components', label: 'Heading'},
- {group: 'Components', label: 'List'},
- {group: 'Components', label: 'Modal'},
- {group: 'Components', label: 'Paragraph'},
- {group: 'Primitives', label: 'Box'},
- {group: 'Primitives', label: 'Text'},
- {group: 'Primitives', label: 'Non-modal dialog'},
- {group: 'Layout', label: 'Grid'},
- {label: 'Design Tokens'},
+ { group: "Components", label: "Alert" },
+ { group: "Components", label: "Anchor" },
+ { group: "Components", label: "Button" },
+ { group: "Components", label: "Card" },
+ { group: "Components", label: "Heading" },
+ { group: "Components", label: "List" },
+ { group: "Components", label: "Modal" },
+ { group: "Components", label: "Paragraph" },
+ { group: "Primitives", label: "Box" },
+ { group: "Primitives", label: "Text" },
+ { group: "Primitives", label: "Non-modal dialog" },
+ { group: "Layout", label: "Grid" },
+ { label: "Design Tokens" },
];
function getFilteredGroupedItems(inputValue: string): GroupedItem[] {
@@ -87,7 +87,7 @@ const onSubmitMock = jest.fn();
const onKeyDownMock = jest.fn();
const GroupedMultiselectComboboxMock: React.FC> = (props) => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredGroupedItems(inputValue), [inputValue]);
return (
@@ -96,8 +96,8 @@ const GroupedMultiselectComboboxMock: React.FC
selectedItemsLabelText="Selected Paste components"
groupItemsBy="group"
items={filteredItems}
- itemToString={(item: GroupedItem) => (item ? item.label : '')}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ itemToString={(item: GroupedItem) => (item ? item.label : "")}
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
labelText="Choose a component:"
@@ -111,7 +111,7 @@ const GroupedMultiselectComboboxMock: React.FC
};
const StateHookMock: React.FC> = (props) => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredGroupedItems(inputValue), [inputValue]);
const state = useMultiselectCombobox({
@@ -129,8 +129,8 @@ const StateHookMock: React.FC> = (props) => {
groupItemsBy="group"
items={filteredItems}
inputValue={inputValue}
- itemToString={(item: GroupedItem) => (item ? item.label : '')}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ itemToString={(item: GroupedItem) => (item ? item.label : "")}
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={props.onSelectedItemsChange}
@@ -144,88 +144,88 @@ const StateHookMock: React.FC> = (props) => {
);
};
-describe('MultiselectCombobox', () => {
+describe("MultiselectCombobox", () => {
beforeEach(() => {
jest.clearAllMocks();
});
- describe('Render', () => {
- it('should render a combobox with aria attributes', () => {
+ describe("Render", () => {
+ it("should render a combobox with aria attributes", () => {
render(, {
wrapper: ThemeWrapper,
});
// PillGroup aria attributes
- const [pillGroupListbox, dropdownListbox] = screen.getAllByRole('listbox');
- expect(pillGroupListbox.getAttribute('aria-label')).toBeDefined();
- expect(pillGroupListbox.getAttribute('aria-describedby')).toBeDefined();
+ const [pillGroupListbox, dropdownListbox] = screen.getAllByRole("listbox");
+ expect(pillGroupListbox.getAttribute("aria-label")).toBeDefined();
+ expect(pillGroupListbox.getAttribute("aria-describedby")).toBeDefined();
// Combobox aria attributes
- const renderedCombobox = screen.getByRole('combobox');
- expect(renderedCombobox.getAttribute('aria-haspopup')).toEqual('listbox');
- expect(renderedCombobox.getAttribute('aria-owns')).toEqual(dropdownListbox.id);
- expect(renderedCombobox.getAttribute('aria-expanded')).toEqual('false');
+ const renderedCombobox = screen.getByRole("combobox");
+ expect(renderedCombobox.getAttribute("aria-haspopup")).toEqual("listbox");
+ expect(renderedCombobox.getAttribute("aria-owns")).toEqual(dropdownListbox.id);
+ expect(renderedCombobox.getAttribute("aria-expanded")).toEqual("false");
fireEvent.click(renderedCombobox);
- expect(renderedCombobox.getAttribute('aria-expanded')).toEqual('true');
+ expect(renderedCombobox.getAttribute("aria-expanded")).toEqual("true");
// Textbox aria attributes
- const renderedTextbox = screen.getByRole('textbox');
- expect(renderedTextbox.getAttribute('aria-controls')).toEqual(dropdownListbox.id);
- expect(renderedTextbox.getAttribute('aria-describedby')).not.toEqual('');
- expect(renderedTextbox.getAttribute('aria-labelledby')).toEqual(document.querySelector('label')!.id);
- expect(renderedTextbox.getAttribute('required')).toEqual(null);
+ const renderedTextbox = screen.getByRole("textbox");
+ expect(renderedTextbox.getAttribute("aria-controls")).toEqual(dropdownListbox.id);
+ expect(renderedTextbox.getAttribute("aria-describedby")).not.toEqual("");
+ expect(renderedTextbox.getAttribute("aria-labelledby")).toEqual(document.querySelector("label")!.id);
+ expect(renderedTextbox.getAttribute("required")).toEqual(null);
// unique option ids
- const renderedOptions = screen.getAllByRole('option');
- expect(renderedOptions[3].getAttribute('aria-disabled')).toEqual('true');
+ const renderedOptions = screen.getAllByRole("option");
+ expect(renderedOptions[3].getAttribute("aria-disabled")).toEqual("true");
const optionIDs = renderedOptions.map((option) => option.id);
const uniqueIDs = uniq(optionIDs);
expect(uniqueIDs.length).toEqual(optionIDs.length);
// Label matches the input id
- const renderedLabel = document.querySelector('label');
- expect(renderedLabel!.getAttribute('for')).toEqual(renderedTextbox.getAttribute('id'));
+ const renderedLabel = document.querySelector("label");
+ expect(renderedLabel!.getAttribute("for")).toEqual(renderedTextbox.getAttribute("id"));
});
- it('should clear the input on selection', async () => {
+ it("should clear the input on selection", async () => {
render(, {
wrapper: ThemeWrapper,
});
// Open the combobox
- const renderedCombobox = screen.getByRole('combobox');
+ const renderedCombobox = screen.getByRole("combobox");
fireEvent.click(renderedCombobox);
// Focus the textbox
- const renderedTextbox = screen.getByRole('textbox');
+ const renderedTextbox = screen.getByRole("textbox");
renderedTextbox.focus();
// Value should be ''
- expect(renderedTextbox.getAttribute('value')).toEqual('');
+ expect(renderedTextbox.getAttribute("value")).toEqual("");
// Change the value to 'Al'
- fireEvent.change(renderedTextbox, {target: {value: 'Al'}});
- expect(renderedTextbox.getAttribute('value')).toEqual('Al');
+ fireEvent.change(renderedTextbox, { target: { value: "Al" } });
+ expect(renderedTextbox.getAttribute("value")).toEqual("Al");
// Selecting an option clears the value in the input box
- const renderedOptions = screen.getAllByRole('option');
+ const renderedOptions = screen.getAllByRole("option");
fireEvent.click(renderedOptions[0]);
- expect(renderedTextbox.getAttribute('value')).toEqual('');
+ expect(renderedTextbox.getAttribute("value")).toEqual("");
});
- it('should handle required correctly', async () => {
+ it("should handle required correctly", async () => {
render(, {
wrapper: ThemeWrapper,
});
// Open the combobox
- const renderedCombobox = screen.getByRole('combobox');
+ const renderedCombobox = screen.getByRole("combobox");
fireEvent.click(renderedCombobox);
// Focus the textbox
- const renderedTextbox = screen.getByRole('textbox');
+ const renderedTextbox = screen.getByRole("textbox");
renderedTextbox.focus();
expect(onKeyDownMock).toHaveBeenCalledTimes(0);
- fireEvent.keyDown(renderedTextbox, {key: 'Enter', code: 'Enter'});
+ fireEvent.keyDown(renderedTextbox, { key: "Enter", code: "Enter" });
expect(onKeyDownMock).toHaveBeenCalledTimes(1);
// No form submit
@@ -233,23 +233,23 @@ describe('MultiselectCombobox', () => {
});
});
- describe('Groups', () => {
- it('should render a group of options', () => {
- render(, {wrapper: ThemeWrapper});
- const renderedGroups = screen.getAllByRole('group');
+ describe("Groups", () => {
+ it("should render a group of options", () => {
+ render(, { wrapper: ThemeWrapper });
+ const renderedGroups = screen.getAllByRole("group");
// check groups, group label and number of options per group
- expect(renderedGroups[0].getAttribute('aria-label')).toEqual('Components');
+ expect(renderedGroups[0].getAttribute("aria-label")).toEqual("Components");
expect(renderedGroups[0].querySelectorAll('[role="option"]').length).toEqual(8);
- expect(renderedGroups[1].getAttribute('aria-label')).toEqual('Primitives');
+ expect(renderedGroups[1].getAttribute("aria-label")).toEqual("Primitives");
expect(renderedGroups[1].querySelectorAll('[role="option"]').length).toEqual(3);
- expect(renderedGroups[2].getAttribute('aria-label')).toEqual('Layout');
+ expect(renderedGroups[2].getAttribute("aria-label")).toEqual("Layout");
expect(renderedGroups[2].querySelectorAll('[role="option"]').length).toEqual(1);
});
- it('should render any items not identified as part of the group as ungrouped options', () => {
- const {getAllByRole} = render(, {wrapper: ThemeWrapper});
- const [pillGroupListbox, dropdownListbox] = getAllByRole('listbox');
- const renderedGroups = getAllByRole('group');
+ it("should render any items not identified as part of the group as ungrouped options", () => {
+ const { getAllByRole } = render(, { wrapper: ThemeWrapper });
+ const [pillGroupListbox, dropdownListbox] = getAllByRole("listbox");
+ const renderedGroups = getAllByRole("group");
// Check there's a listbox for the pill group
expect(pillGroupListbox).toBeDefined();
@@ -258,82 +258,82 @@ describe('MultiselectCombobox', () => {
expect(renderedGroups.length).toEqual(3);
// check any options that are not nested in groups
expect(
- dropdownListbox.querySelectorAll('[role="listbox"] > [role="presentation"] > [role="option"]').length
+ dropdownListbox.querySelectorAll('[role="listbox"] > [role="presentation"] > [role="option"]').length,
).toEqual(1);
});
- it('should render a listbox with groups of options that contains no duplicate ids', () => {
- render(, {wrapper: ThemeWrapper});
- const renderedOptions = screen.getAllByRole('option');
+ it("should render a listbox with groups of options that contains no duplicate ids", () => {
+ render(, { wrapper: ThemeWrapper });
+ const renderedOptions = screen.getAllByRole("option");
const optionIDs = renderedOptions.map((option) => option.id);
const uniqueIDs = uniq(optionIDs);
expect(uniqueIDs.length).toEqual(optionIDs.length);
});
- it('should render a custom group label', () => {
+ it("should render a custom group label", () => {
render( hi {groupName}} />, {
wrapper: ThemeWrapper,
});
- const renderedGroups = screen.getAllByRole('group');
+ const renderedGroups = screen.getAllByRole("group");
expect(renderedGroups[0].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual(
- 'hi Components'
+ "hi Components",
);
expect(renderedGroups[1].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual(
- 'hi Primitives'
+ "hi Primitives",
);
expect(renderedGroups[2].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual(
- 'hi Layout'
+ "hi Layout",
);
});
- it('should select item using keyboard', () => {
+ it("should select item using keyboard", () => {
const mockSelectedItemsChangeFn = jest.fn((selectedItems) => selectedItems);
render(, {
wrapper: ThemeWrapper,
});
// open the combobox
- fireEvent.click(screen.getByRole('textbox'));
+ fireEvent.click(screen.getByRole("textbox"));
// select the third item using ArrowDown keyDown
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'});
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'});
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'});
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'Enter', code: 'Enter'});
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowDown", code: "ArrowDown" });
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowDown", code: "ArrowDown" });
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowDown", code: "ArrowDown" });
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter", code: "Enter" });
expect(mockSelectedItemsChangeFn).toHaveBeenCalledTimes(1);
- expect(mockSelectedItemsChangeFn.mock.results[0].value).toEqual([{group: 'Components', label: 'Button'}]);
+ expect(mockSelectedItemsChangeFn.mock.results[0].value).toEqual([{ group: "Components", label: "Button" }]);
// select the first item using ArrowUp keyDown
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowUp', code: 'ArrowUp'});
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowUp', code: 'ArrowUp'});
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'Enter', code: 'Enter'});
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowUp", code: "ArrowUp" });
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowUp", code: "ArrowUp" });
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter", code: "Enter" });
expect(mockSelectedItemsChangeFn).toHaveBeenCalledTimes(2);
expect(mockSelectedItemsChangeFn.mock.results[1].value).toEqual([
- {group: 'Components', label: 'Button'},
- {group: 'Components', label: 'Alert'},
+ { group: "Components", label: "Button" },
+ { group: "Components", label: "Alert" },
]);
- fireEvent.keyDown(screen.getByRole('textbox'), {key: 'Enter', code: 'Enter'});
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter", code: "Enter" });
expect(mockSelectedItemsChangeFn).toHaveBeenCalledTimes(3);
- expect(mockSelectedItemsChangeFn.mock.results[2].value).toEqual([{group: 'Components', label: 'Button'}]);
+ expect(mockSelectedItemsChangeFn.mock.results[2].value).toEqual([{ group: "Components", label: "Button" }]);
});
});
- describe('Inversion of control', () => {
- it('allows clearing selected items from an external button click', () => {
+ describe("Inversion of control", () => {
+ it("allows clearing selected items from an external button click", () => {
const mockSelectedItemsChangeFn = jest.fn((selectedItems) => selectedItems);
render(, {
wrapper: ThemeWrapper,
});
- const pillGroup = screen.getAllByRole('listbox')[0];
+ const pillGroup = screen.getAllByRole("listbox")[0];
expect(pillGroup?.childNodes.length).toBe(2);
act(() => {
- screen.getByRole('button', {name: 'Clear'}).click();
+ screen.getByRole("button", { name: "Clear" }).click();
});
expect(pillGroup?.childNodes.length).toBe(0);
expect(mockSelectedItemsChangeFn).toHaveBeenCalledTimes(1);
- expect(mockSelectedItemsChangeFn.mock.results[0].value).toEqual({activeIndex: -1, selectedItems: [], type: 10});
+ expect(mockSelectedItemsChangeFn.mock.results[0].value).toEqual({ activeIndex: -1, selectedItems: [], type: 10 });
});
});
});
diff --git a/packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx b/packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx
index 53d37c8d13..cff9b36291 100644
--- a/packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx
+++ b/packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx
@@ -1,30 +1,30 @@
-import * as React from 'react';
-import {render, screen} from '@testing-library/react';
-import type {RenderOptions} from '@testing-library/react';
-import {CustomizationProvider} from '@twilio-paste/customization';
-import type {PasteCustomCSS} from '@twilio-paste/customization';
-import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon';
-import {Text} from '@twilio-paste/text';
+import { render, screen } from "@testing-library/react";
+import type { RenderOptions } from "@testing-library/react";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import type { PasteCustomCSS } from "@twilio-paste/customization";
+import { InformationIcon } from "@twilio-paste/icons/esm/InformationIcon";
+import { Text } from "@twilio-paste/text";
+import * as React from "react";
-import {Combobox} from '../src';
+import { Combobox } from "../src";
-const getStyles = (element = 'COMBOBOX'): {[key: string]: PasteCustomCSS} => ({
- [`${element}_WRAPPER`]: {backgroundColor: 'colorBackgroundStrong', fontFamily: 'fontFamilyCode'},
- [`${element}`]: {backgroundColor: 'colorBackgroundPrimaryWeakest'},
- [`${element}_ELEMENT`]: {cursor: 'pointer'},
- [`${element}_CHEVRON_WRAPPER`]: {backgroundColor: 'colorBackgroundBrandHighlightWeakest'},
- [`${element}_LISTBOX`]: {backgroundColor: 'colorBackgroundPrimaryWeaker'},
- [`${element}_LIST`]: {backgroundColor: 'colorBackgroundPrimaryWeak'},
- [`${element}_GROUPNAME`]: {fontFamily: 'fontFamilyText', cursor: 'help'},
- [`${element}_GROUPNAME_TEXT`]: {fontWeight: 'fontWeightLight'},
- [`${element}_LIST_ITEM`]: {backgroundColor: 'colorBackgroundPrimaryStrong'},
- [`${element}_LIST_ITEM_TEXT`]: {color: 'colorTextWeakest', fontWeight: 'fontWeightBold'},
- [`${element}_PREFIX`]: {backgroundColor: 'colorBackgroundRequired', borderRadius: 'borderRadius20'},
- [`${element}_SUFFIX`]: {backgroundColor: 'colorBackgroundSubaccount', borderRadius: 'borderRadiusCircle'},
+const getStyles = (element = "COMBOBOX"): { [key: string]: PasteCustomCSS } => ({
+ [`${element}_WRAPPER`]: { backgroundColor: "colorBackgroundStrong", fontFamily: "fontFamilyCode" },
+ [`${element}`]: { backgroundColor: "colorBackgroundPrimaryWeakest" },
+ [`${element}_ELEMENT`]: { cursor: "pointer" },
+ [`${element}_CHEVRON_WRAPPER`]: { backgroundColor: "colorBackgroundBrandHighlightWeakest" },
+ [`${element}_LISTBOX`]: { backgroundColor: "colorBackgroundPrimaryWeaker" },
+ [`${element}_LIST`]: { backgroundColor: "colorBackgroundPrimaryWeak" },
+ [`${element}_GROUPNAME`]: { fontFamily: "fontFamilyText", cursor: "help" },
+ [`${element}_GROUPNAME_TEXT`]: { fontWeight: "fontWeightLight" },
+ [`${element}_LIST_ITEM`]: { backgroundColor: "colorBackgroundPrimaryStrong" },
+ [`${element}_LIST_ITEM_TEXT`]: { color: "colorTextWeakest", fontWeight: "fontWeightBold" },
+ [`${element}_PREFIX`]: { backgroundColor: "colorBackgroundRequired", borderRadius: "borderRadius20" },
+ [`${element}_SUFFIX`]: { backgroundColor: "colorBackgroundSubaccount", borderRadius: "borderRadiusCircle" },
});
-const initCustomizationWrapper = (elementName?: string | undefined): RenderOptions['wrapper'] =>
- function Wrapper({children}) {
+const initCustomizationWrapper = (elementName?: string | undefined): RenderOptions["wrapper"] =>
+ function Wrapper({ children }) {
return (
{children}
@@ -32,12 +32,12 @@ const initCustomizationWrapper = (elementName?: string | undefined): RenderOptio
);
};
-const ComboboxToTest = ({element = 'COMBOBOX'}): React.ReactElement => (
+const ComboboxToTest = ({ element = "COMBOBOX" }): React.ReactElement => (
(
initialIsOpen
element={element}
optionTemplate={(item) => {item.number}
}
- itemToString={(item) => (item ? item.letter : '')}
+ itemToString={(item) => (item ? item.letter : "")}
insertBefore={Z}
insertAfter={}
/>
);
-describe('Combobox data-paste-element attributes', () => {
- it('should set the correct attributes on all Combobox components', () => {
- const {container} = render(, {wrapper: initCustomizationWrapper()});
+describe("Combobox data-paste-element attributes", () => {
+ it("should set the correct attributes on all Combobox components", () => {
+ const { container } = render(, { wrapper: initCustomizationWrapper() });
expect(container.querySelector('[data-paste-element="COMBOBOX"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="COMBOBOX_WRAPPER"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="COMBOBOX_ELEMENT"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="COMBOBOX_CHEVRON_WRAPPER"]')).toBeInTheDocument();
- expect(screen.getByRole('listbox').getAttribute('data-paste-element')).toEqual('COMBOBOX_LISTBOX');
- expect(screen.getAllByRole('group')[0].getAttribute('data-paste-element')).toEqual('COMBOBOX_LIST');
- expect(screen.getAllByRole('presentation')).toHaveLength(2);
- expect(screen.getAllByRole('presentation')[0].getAttribute('data-paste-element')).toEqual('COMBOBOX_GROUPNAME');
- expect(screen.getAllByRole('option')).toHaveLength(3);
- expect(screen.getAllByRole('option')[0].getAttribute('data-paste-element')).toEqual('COMBOBOX_LIST_ITEM');
- expect(screen.getByRole('listbox').querySelectorAll('[data-paste-element="COMBOBOX_LIST_ITEM_TEXT"]')).toHaveLength(
- 3
+ expect(screen.getByRole("listbox").getAttribute("data-paste-element")).toEqual("COMBOBOX_LISTBOX");
+ expect(screen.getAllByRole("group")[0].getAttribute("data-paste-element")).toEqual("COMBOBOX_LIST");
+ expect(screen.getAllByRole("presentation")).toHaveLength(2);
+ expect(screen.getAllByRole("presentation")[0].getAttribute("data-paste-element")).toEqual("COMBOBOX_GROUPNAME");
+ expect(screen.getAllByRole("option")).toHaveLength(3);
+ expect(screen.getAllByRole("option")[0].getAttribute("data-paste-element")).toEqual("COMBOBOX_LIST_ITEM");
+ expect(screen.getByRole("listbox").querySelectorAll('[data-paste-element="COMBOBOX_LIST_ITEM_TEXT"]')).toHaveLength(
+ 3,
);
expect(container.querySelector('[data-paste-element="COMBOBOX_PREFIX"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="COMBOBOX_SUFFIX"]')).toBeInTheDocument();
});
- it('should set the correct attributes on all Combobox components with custom element prop', () => {
- const {container} = render(, {wrapper: initCustomizationWrapper()});
+ it("should set the correct attributes on all Combobox components with custom element prop", () => {
+ const { container } = render(, { wrapper: initCustomizationWrapper() });
expect(container.querySelector('[data-paste-element="FOO"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="FOO_WRAPPER"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="FOO_ELEMENT"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="FOO_CHEVRON_WRAPPER"]')).toBeInTheDocument();
- expect(screen.getByRole('listbox').getAttribute('data-paste-element')).toEqual('FOO_LISTBOX');
- expect(screen.getAllByRole('group')[0].getAttribute('data-paste-element')).toEqual('FOO_LIST');
- expect(screen.getAllByRole('presentation')).toHaveLength(2);
- expect(screen.getAllByRole('presentation')[0].getAttribute('data-paste-element')).toEqual('FOO_GROUPNAME');
- expect(screen.getAllByRole('option')).toHaveLength(3);
- expect(screen.getAllByRole('option')[0].getAttribute('data-paste-element')).toEqual('FOO_LIST_ITEM');
- expect(screen.getByRole('listbox').querySelectorAll('[data-paste-element="FOO_LIST_ITEM_TEXT"]')).toHaveLength(3);
+ expect(screen.getByRole("listbox").getAttribute("data-paste-element")).toEqual("FOO_LISTBOX");
+ expect(screen.getAllByRole("group")[0].getAttribute("data-paste-element")).toEqual("FOO_LIST");
+ expect(screen.getAllByRole("presentation")).toHaveLength(2);
+ expect(screen.getAllByRole("presentation")[0].getAttribute("data-paste-element")).toEqual("FOO_GROUPNAME");
+ expect(screen.getAllByRole("option")).toHaveLength(3);
+ expect(screen.getAllByRole("option")[0].getAttribute("data-paste-element")).toEqual("FOO_LIST_ITEM");
+ expect(screen.getByRole("listbox").querySelectorAll('[data-paste-element="FOO_LIST_ITEM_TEXT"]')).toHaveLength(3);
expect(container.querySelector('[data-paste-element="FOO_PREFIX"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="FOO_SUFFIX"]')).toBeInTheDocument();
});
});
-describe('Combobox customization', () => {
- it('should add styles to Combobox', () => {
- const {container} = render(, {wrapper: initCustomizationWrapper('COMBOBOX')});
+describe("Combobox customization", () => {
+ it("should add styles to Combobox", () => {
+ const { container } = render(, { wrapper: initCustomizationWrapper("COMBOBOX") });
expect(container.querySelector('[data-paste-element="COMBOBOX"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(235, 244, 255)'
+ "background-color",
+ "rgb(235, 244, 255)",
);
expect(container.querySelector('[data-paste-element="COMBOBOX_WRAPPER"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(225, 227, 234)'
+ "background-color",
+ "rgb(225, 227, 234)",
);
- expect(container.querySelector('[data-paste-element="COMBOBOX_ELEMENT"]')).toHaveStyleRule('cursor', 'pointer');
+ expect(container.querySelector('[data-paste-element="COMBOBOX_ELEMENT"]')).toHaveStyleRule("cursor", "pointer");
expect(container.querySelector('[data-paste-element="COMBOBOX_CHEVRON_WRAPPER"]')).toHaveStyleRule(
- 'background-color',
- 'rgba(242, 47, 70, 0.1)'
+ "background-color",
+ "rgba(242, 47, 70, 0.1)",
);
- const listbox = screen.getByRole('listbox');
+ const listbox = screen.getByRole("listbox");
- expect(listbox).toHaveStyleRule('background-color', 'rgb(204, 228, 255)');
+ expect(listbox).toHaveStyleRule("background-color", "rgb(204, 228, 255)");
expect(listbox.querySelector('[data-paste-element="COMBOBOX_LIST"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(153, 205, 255)'
+ "background-color",
+ "rgb(153, 205, 255)",
);
- expect(listbox.querySelector('[data-paste-element="COMBOBOX_GROUPNAME"]')).toHaveStyleRule('cursor', 'help');
+ expect(listbox.querySelector('[data-paste-element="COMBOBOX_GROUPNAME"]')).toHaveStyleRule("cursor", "help");
expect(listbox.querySelector('[data-paste-element="COMBOBOX_LIST_ITEM"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(0, 20, 137)'
+ "background-color",
+ "rgb(0, 20, 137)",
);
expect(listbox.querySelector('[data-paste-element="COMBOBOX_LIST_ITEM_TEXT"]')).toHaveStyleRule(
- 'font-weight',
- '700'
+ "font-weight",
+ "700",
);
expect(container.querySelector('[data-paste-element="COMBOBOX_PREFIX"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(235, 86, 86)'
+ "background-color",
+ "rgb(235, 86, 86)",
);
expect(container.querySelector('[data-paste-element="COMBOBOX_SUFFIX"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(255, 241, 179)'
+ "background-color",
+ "rgb(255, 241, 179)",
);
});
- it('should add styles to Combobox with custom element attribute', () => {
- const {container} = render(, {wrapper: initCustomizationWrapper('FOO')});
+ it("should add styles to Combobox with custom element attribute", () => {
+ const { container } = render(, { wrapper: initCustomizationWrapper("FOO") });
expect(container.querySelector('[data-paste-element="FOO"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(235, 244, 255)'
+ "background-color",
+ "rgb(235, 244, 255)",
);
expect(container.querySelector('[data-paste-element="FOO_WRAPPER"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(225, 227, 234)'
+ "background-color",
+ "rgb(225, 227, 234)",
);
- expect(container.querySelector('[data-paste-element="FOO_ELEMENT"]')).toHaveStyleRule('cursor', 'pointer');
+ expect(container.querySelector('[data-paste-element="FOO_ELEMENT"]')).toHaveStyleRule("cursor", "pointer");
expect(container.querySelector('[data-paste-element="FOO_CHEVRON_WRAPPER"]')).toHaveStyleRule(
- 'background-color',
- 'rgba(242, 47, 70, 0.1)'
+ "background-color",
+ "rgba(242, 47, 70, 0.1)",
);
- expect(screen.getByRole('listbox')).toHaveStyleRule('background-color', 'rgb(204, 228, 255)');
- expect(screen.getByRole('listbox').querySelector('[data-paste-element="FOO_LIST"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(153, 205, 255)'
+ expect(screen.getByRole("listbox")).toHaveStyleRule("background-color", "rgb(204, 228, 255)");
+ expect(screen.getByRole("listbox").querySelector('[data-paste-element="FOO_LIST"]')).toHaveStyleRule(
+ "background-color",
+ "rgb(153, 205, 255)",
);
- expect(screen.getByRole('listbox').querySelector('[data-paste-element="FOO_GROUPNAME"]')).toHaveStyleRule(
- 'cursor',
- 'help'
+ expect(screen.getByRole("listbox").querySelector('[data-paste-element="FOO_GROUPNAME"]')).toHaveStyleRule(
+ "cursor",
+ "help",
);
- expect(screen.getByRole('listbox').querySelector('[data-paste-element="FOO_LIST_ITEM"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(0, 20, 137)'
+ expect(screen.getByRole("listbox").querySelector('[data-paste-element="FOO_LIST_ITEM"]')).toHaveStyleRule(
+ "background-color",
+ "rgb(0, 20, 137)",
);
- expect(screen.getByRole('listbox').querySelector('[data-paste-element="FOO_LIST_ITEM_TEXT"]')).toHaveStyleRule(
- 'font-weight',
- '700'
+ expect(screen.getByRole("listbox").querySelector('[data-paste-element="FOO_LIST_ITEM_TEXT"]')).toHaveStyleRule(
+ "font-weight",
+ "700",
);
expect(container.querySelector('[data-paste-element="FOO_PREFIX"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(235, 86, 86)'
+ "background-color",
+ "rgb(235, 86, 86)",
);
expect(container.querySelector('[data-paste-element="FOO_SUFFIX"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(255, 241, 179)'
+ "background-color",
+ "rgb(255, 241, 179)",
);
});
});
diff --git a/packages/paste-core/components/combobox/__tests__/multiselect-combobox-customization.spec.tsx b/packages/paste-core/components/combobox/__tests__/multiselect-combobox-customization.spec.tsx
index fedc8bbafc..62915494d4 100644
--- a/packages/paste-core/components/combobox/__tests__/multiselect-combobox-customization.spec.tsx
+++ b/packages/paste-core/components/combobox/__tests__/multiselect-combobox-customization.spec.tsx
@@ -1,32 +1,32 @@
-import * as React from 'react';
-import {render, screen} from '@testing-library/react';
-import type {RenderOptions} from '@testing-library/react';
-import {CustomizationProvider} from '@twilio-paste/customization';
-import type {PasteCustomCSS} from '@twilio-paste/customization';
-import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon';
-import {Text} from '@twilio-paste/text';
-
-import {MultiselectCombobox} from '../src';
-
-const getStyles = (element = 'MULTISELECT_COMBOBOX'): {[key: string]: PasteCustomCSS} => ({
- [`${element}_WRAPPER`]: {backgroundColor: 'colorBackgroundStrong', fontFamily: 'fontFamilyCode'},
- [`${element}`]: {backgroundColor: 'colorBackgroundPrimaryWeakest'},
- [`${element}_PILL_GROUP`]: {backgroundColor: 'colorBackgroundWarning'},
- [`${element}_PILL`]: {backgroundColor: 'colorBackgroundWarningWeakest'},
- [`${element}_ELEMENT`]: {cursor: 'pointer'},
- [`${element}_CHEVRON_WRAPPER`]: {backgroundColor: 'colorBackgroundBrandHighlightWeakest'},
- [`${element}_LISTBOX`]: {backgroundColor: 'colorBackgroundPrimaryWeaker'},
- [`${element}_LIST`]: {backgroundColor: 'colorBackgroundPrimaryWeak'},
- [`${element}_GROUPNAME`]: {fontFamily: 'fontFamilyText', cursor: 'help'},
- [`${element}_GROUPNAME_TEXT`]: {fontWeight: 'fontWeightLight'},
- [`${element}_LIST_ITEM`]: {backgroundColor: 'colorBackgroundPrimaryStrong'},
- [`${element}_LIST_ITEM_TEXT`]: {color: 'colorTextWeakest', fontWeight: 'fontWeightBold'},
- [`${element}_PREFIX`]: {backgroundColor: 'colorBackgroundRequired', borderRadius: 'borderRadius20'},
- [`${element}_SUFFIX`]: {backgroundColor: 'colorBackgroundSubaccount', borderRadius: 'borderRadiusCircle'},
+import { render, screen } from "@testing-library/react";
+import type { RenderOptions } from "@testing-library/react";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import type { PasteCustomCSS } from "@twilio-paste/customization";
+import { InformationIcon } from "@twilio-paste/icons/esm/InformationIcon";
+import { Text } from "@twilio-paste/text";
+import * as React from "react";
+
+import { MultiselectCombobox } from "../src";
+
+const getStyles = (element = "MULTISELECT_COMBOBOX"): { [key: string]: PasteCustomCSS } => ({
+ [`${element}_WRAPPER`]: { backgroundColor: "colorBackgroundStrong", fontFamily: "fontFamilyCode" },
+ [`${element}`]: { backgroundColor: "colorBackgroundPrimaryWeakest" },
+ [`${element}_PILL_GROUP`]: { backgroundColor: "colorBackgroundWarning" },
+ [`${element}_PILL`]: { backgroundColor: "colorBackgroundWarningWeakest" },
+ [`${element}_ELEMENT`]: { cursor: "pointer" },
+ [`${element}_CHEVRON_WRAPPER`]: { backgroundColor: "colorBackgroundBrandHighlightWeakest" },
+ [`${element}_LISTBOX`]: { backgroundColor: "colorBackgroundPrimaryWeaker" },
+ [`${element}_LIST`]: { backgroundColor: "colorBackgroundPrimaryWeak" },
+ [`${element}_GROUPNAME`]: { fontFamily: "fontFamilyText", cursor: "help" },
+ [`${element}_GROUPNAME_TEXT`]: { fontWeight: "fontWeightLight" },
+ [`${element}_LIST_ITEM`]: { backgroundColor: "colorBackgroundPrimaryStrong" },
+ [`${element}_LIST_ITEM_TEXT`]: { color: "colorTextWeakest", fontWeight: "fontWeightBold" },
+ [`${element}_PREFIX`]: { backgroundColor: "colorBackgroundRequired", borderRadius: "borderRadius20" },
+ [`${element}_SUFFIX`]: { backgroundColor: "colorBackgroundSubaccount", borderRadius: "borderRadiusCircle" },
});
-const initCustomizationWrapper = (elementName?: string | undefined): RenderOptions['wrapper'] =>
- function Wrapper({children}) {
+const initCustomizationWrapper = (elementName?: string | undefined): RenderOptions["wrapper"] =>
+ function Wrapper({ children }) {
return (
{children}
@@ -35,12 +35,12 @@ const initCustomizationWrapper = (elementName?: string | undefined): RenderOptio
};
const items = [
- {letter: 'a', number: 1},
- {letter: 'a', number: 2},
- {letter: 'b', number: 3},
+ { letter: "a", number: 1 },
+ { letter: "a", number: 2 },
+ { letter: "b", number: 3 },
];
-const MultiselectComboboxToTest = ({element = 'MULTISELECT_COMBOBOX'}): React.ReactElement => (
+const MultiselectComboboxToTest = ({ element = "MULTISELECT_COMBOBOX" }): React.ReactElement => (
{item.number}
}
- itemToString={(item) => (item ? item.letter : '')}
+ itemToString={(item) => (item ? item.letter : "")}
insertBefore={Z}
insertAfter={}
/>
);
-describe('MultiselectCombobox data-paste-element attributes', () => {
- it('should set the correct attributes on all MultiselectCombobox components', () => {
- const {container, getByRole} = render(, {wrapper: initCustomizationWrapper()});
- expect(getByRole('textbox').dataset.pasteElement).toEqual('MULTISELECT_COMBOBOX_ELEMENT');
+describe("MultiselectCombobox data-paste-element attributes", () => {
+ it("should set the correct attributes on all MultiselectCombobox components", () => {
+ const { container, getByRole } = render(, { wrapper: initCustomizationWrapper() });
+ expect(getByRole("textbox").dataset.pasteElement).toEqual("MULTISELECT_COMBOBOX_ELEMENT");
expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_WRAPPER"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_ELEMENT"]')).toBeInTheDocument();
@@ -67,53 +67,53 @@ describe('MultiselectCombobox data-paste-element attributes', () => {
expect(container.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_PILL"]`).length).toEqual(2);
expect(
- container.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_PILL"]`)[0].getAttribute('role')
- ).toEqual('option');
+ container.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_PILL"]`)[0].getAttribute("role"),
+ ).toEqual("option");
- const dropdownlistbox = screen.getByRole('listbox', {name: 'Choose a letter:'});
+ const dropdownlistbox = screen.getByRole("listbox", { name: "Choose a letter:" });
expect(dropdownlistbox.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM"]`).length).toEqual(3);
expect(
- dropdownlistbox.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM"]`)[0].getAttribute('role')
- ).toEqual('option');
+ dropdownlistbox.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM"]`)[0].getAttribute("role"),
+ ).toEqual("option");
- const [pillgroupListbox, comboboxListbox] = screen.getAllByRole('listbox');
- expect(pillgroupListbox.getAttribute('data-paste-element')).toEqual('MULTISELECT_COMBOBOX_PILL_GROUP');
- expect(comboboxListbox.getAttribute('data-paste-element')).toEqual('MULTISELECT_COMBOBOX_LISTBOX');
- expect(screen.getAllByRole('group')[0].getAttribute('data-paste-element')).toEqual('MULTISELECT_COMBOBOX_LIST');
- expect(screen.getAllByRole('presentation')).toHaveLength(2);
- expect(screen.getAllByRole('presentation')[0].getAttribute('data-paste-element')).toEqual(
- 'MULTISELECT_COMBOBOX_GROUPNAME'
+ const [pillgroupListbox, comboboxListbox] = screen.getAllByRole("listbox");
+ expect(pillgroupListbox.getAttribute("data-paste-element")).toEqual("MULTISELECT_COMBOBOX_PILL_GROUP");
+ expect(comboboxListbox.getAttribute("data-paste-element")).toEqual("MULTISELECT_COMBOBOX_LISTBOX");
+ expect(screen.getAllByRole("group")[0].getAttribute("data-paste-element")).toEqual("MULTISELECT_COMBOBOX_LIST");
+ expect(screen.getAllByRole("presentation")).toHaveLength(2);
+ expect(screen.getAllByRole("presentation")[0].getAttribute("data-paste-element")).toEqual(
+ "MULTISELECT_COMBOBOX_GROUPNAME",
);
expect(dropdownlistbox.querySelectorAll('[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM_TEXT"]')).toHaveLength(
- 3
+ 3,
);
expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_PREFIX"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_SUFFIX"]')).toBeInTheDocument();
});
- it('should set the correct attributes on all MultiselectCombobox components with custom element prop', () => {
- const {container} = render(, {wrapper: initCustomizationWrapper()});
+ it("should set the correct attributes on all MultiselectCombobox components with custom element prop", () => {
+ const { container } = render(, { wrapper: initCustomizationWrapper() });
expect(container.querySelector('[data-paste-element="FOO"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="FOO_WRAPPER"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="FOO_ELEMENT"]')).toBeInTheDocument();
expect(container.querySelector('[data-paste-element="FOO_CHEVRON_WRAPPER"]')).toBeInTheDocument();
expect(container.querySelectorAll(`[data-paste-element="FOO_PILL"]`).length).toEqual(2);
- expect(container.querySelectorAll(`[data-paste-element="FOO_PILL"]`)[0].getAttribute('role')).toEqual('option');
+ expect(container.querySelectorAll(`[data-paste-element="FOO_PILL"]`)[0].getAttribute("role")).toEqual("option");
- const [pillgroupListbox, comboboxListbox] = screen.getAllByRole('listbox');
+ const [pillgroupListbox, comboboxListbox] = screen.getAllByRole("listbox");
expect(comboboxListbox.querySelectorAll(`[data-paste-element="FOO_LIST_ITEM"]`).length).toEqual(3);
- expect(comboboxListbox.querySelectorAll(`[data-paste-element="FOO_LIST_ITEM"]`)[0].getAttribute('role')).toEqual(
- 'option'
+ expect(comboboxListbox.querySelectorAll(`[data-paste-element="FOO_LIST_ITEM"]`)[0].getAttribute("role")).toEqual(
+ "option",
);
- expect(pillgroupListbox.getAttribute('data-paste-element')).toEqual('FOO_PILL_GROUP');
- expect(comboboxListbox.getAttribute('data-paste-element')).toEqual('FOO_LISTBOX');
- expect(screen.getAllByRole('group')[0].getAttribute('data-paste-element')).toEqual('FOO_LIST');
- expect(screen.getAllByRole('presentation')).toHaveLength(2);
- expect(screen.getAllByRole('presentation')[0].getAttribute('data-paste-element')).toEqual('FOO_GROUPNAME');
+ expect(pillgroupListbox.getAttribute("data-paste-element")).toEqual("FOO_PILL_GROUP");
+ expect(comboboxListbox.getAttribute("data-paste-element")).toEqual("FOO_LISTBOX");
+ expect(screen.getAllByRole("group")[0].getAttribute("data-paste-element")).toEqual("FOO_LIST");
+ expect(screen.getAllByRole("presentation")).toHaveLength(2);
+ expect(screen.getAllByRole("presentation")[0].getAttribute("data-paste-element")).toEqual("FOO_GROUPNAME");
expect(comboboxListbox.querySelectorAll('[data-paste-element="FOO_LIST_ITEM_TEXT"]')).toHaveLength(3);
expect(container.querySelector('[data-paste-element="FOO_PREFIX"]')).toBeInTheDocument();
@@ -121,96 +121,98 @@ describe('MultiselectCombobox data-paste-element attributes', () => {
});
});
-describe('MultiselectCombobox customization', () => {
- it('should add styles to MultiselectCombobox', () => {
- const {container} = render(, {
- wrapper: initCustomizationWrapper('MULTISELECT_COMBOBOX'),
+describe("MultiselectCombobox customization", () => {
+ it("should add styles to MultiselectCombobox", () => {
+ const { container } = render(, {
+ wrapper: initCustomizationWrapper("MULTISELECT_COMBOBOX"),
});
expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(235, 244, 255)'
+ "background-color",
+ "rgb(235, 244, 255)",
);
expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_WRAPPER"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(225, 227, 234)'
+ "background-color",
+ "rgb(225, 227, 234)",
);
expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_ELEMENT"]')).toHaveStyleRule(
- 'cursor',
- 'pointer'
+ "cursor",
+ "pointer",
);
expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_CHEVRON_WRAPPER"]')).toHaveStyleRule(
- 'background-color',
- 'rgba(242, 47, 70, 0.1)'
+ "background-color",
+ "rgba(242, 47, 70, 0.1)",
);
- const dropdownlistbox = screen.getByRole('listbox', {name: 'Choose a letter:'});
+ const dropdownlistbox = screen.getByRole("listbox", { name: "Choose a letter:" });
- expect(dropdownlistbox).toHaveStyleRule('background-color', 'rgb(204, 228, 255)');
+ expect(dropdownlistbox).toHaveStyleRule("background-color", "rgb(204, 228, 255)");
expect(dropdownlistbox.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_LIST"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(153, 205, 255)'
+ "background-color",
+ "rgb(153, 205, 255)",
);
expect(dropdownlistbox.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_GROUPNAME"]')).toHaveStyleRule(
- 'cursor',
- 'help'
+ "cursor",
+ "help",
);
expect(dropdownlistbox.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(0, 20, 137)'
+ "background-color",
+ "rgb(0, 20, 137)",
);
expect(dropdownlistbox.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM_TEXT"]')).toHaveStyleRule(
- 'font-weight',
- '700'
+ "font-weight",
+ "700",
);
expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_PREFIX"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(235, 86, 86)'
+ "background-color",
+ "rgb(235, 86, 86)",
);
expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_SUFFIX"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(255, 241, 179)'
+ "background-color",
+ "rgb(255, 241, 179)",
);
});
- it('should add styles to MultiselectCombobox with custom element attribute', () => {
- const {container} = render(, {wrapper: initCustomizationWrapper('FOO')});
+ it("should add styles to MultiselectCombobox with custom element attribute", () => {
+ const { container } = render(, {
+ wrapper: initCustomizationWrapper("FOO"),
+ });
expect(container.querySelector('[data-paste-element="FOO"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(235, 244, 255)'
+ "background-color",
+ "rgb(235, 244, 255)",
);
expect(container.querySelector('[data-paste-element="FOO_WRAPPER"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(225, 227, 234)'
+ "background-color",
+ "rgb(225, 227, 234)",
);
- expect(container.querySelector('[data-paste-element="FOO_ELEMENT"]')).toHaveStyleRule('cursor', 'pointer');
+ expect(container.querySelector('[data-paste-element="FOO_ELEMENT"]')).toHaveStyleRule("cursor", "pointer");
expect(container.querySelector('[data-paste-element="FOO_CHEVRON_WRAPPER"]')).toHaveStyleRule(
- 'background-color',
- 'rgba(242, 47, 70, 0.1)'
+ "background-color",
+ "rgba(242, 47, 70, 0.1)",
);
- const dropdownlistbox = screen.getByRole('listbox', {name: 'Choose a letter:'});
+ const dropdownlistbox = screen.getByRole("listbox", { name: "Choose a letter:" });
- expect(dropdownlistbox).toHaveStyleRule('background-color', 'rgb(204, 228, 255)');
+ expect(dropdownlistbox).toHaveStyleRule("background-color", "rgb(204, 228, 255)");
expect(dropdownlistbox.querySelector('[data-paste-element="FOO_LIST"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(153, 205, 255)'
+ "background-color",
+ "rgb(153, 205, 255)",
);
- expect(dropdownlistbox.querySelector('[data-paste-element="FOO_GROUPNAME"]')).toHaveStyleRule('cursor', 'help');
+ expect(dropdownlistbox.querySelector('[data-paste-element="FOO_GROUPNAME"]')).toHaveStyleRule("cursor", "help");
expect(dropdownlistbox.querySelector('[data-paste-element="FOO_LIST_ITEM"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(0, 20, 137)'
+ "background-color",
+ "rgb(0, 20, 137)",
);
expect(dropdownlistbox.querySelector('[data-paste-element="FOO_LIST_ITEM_TEXT"]')).toHaveStyleRule(
- 'font-weight',
- '700'
+ "font-weight",
+ "700",
);
expect(container.querySelector('[data-paste-element="FOO_PREFIX"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(235, 86, 86)'
+ "background-color",
+ "rgb(235, 86, 86)",
);
expect(container.querySelector('[data-paste-element="FOO_SUFFIX"]')).toHaveStyleRule(
- 'background-color',
- 'rgb(255, 241, 179)'
+ "background-color",
+ "rgb(255, 241, 179)",
);
});
});
diff --git a/packages/paste-core/components/combobox/__tests__/virtualization.spec.tsx b/packages/paste-core/components/combobox/__tests__/virtualization.spec.tsx
index f853d1a0a1..76a6ac42f0 100644
--- a/packages/paste-core/components/combobox/__tests__/virtualization.spec.tsx
+++ b/packages/paste-core/components/combobox/__tests__/virtualization.spec.tsx
@@ -1,28 +1,28 @@
-import * as React from 'react';
-import {render, screen} from '@testing-library/react';
-import type {RenderOptions} from '@testing-library/react';
-import {matchers} from '@emotion/jest';
-import {CustomizationProvider} from '@twilio-paste/customization';
-import type {useVirtual as UseVirtual, VirtualItem} from 'react-virtual/types';
+import { matchers } from "@emotion/jest";
+import { render, screen } from "@testing-library/react";
+import type { RenderOptions } from "@testing-library/react";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import * as React from "react";
+import type { VirtualItem, useVirtual as UseVirtual } from "react-virtual/types";
-import {Combobox} from '../src';
+import { Combobox } from "../src";
const mockMeasureRef = jest.fn();
-jest.mock('react-virtual', () => {
+jest.mock("react-virtual", () => {
/*
* mocking this to verify that the measure refs are being invoked --> they are being used
* need to test this because it is essential that the virtualization ref is attached to the correct element for the virtual listbox to render correctly
*/
- const {useVirtual} = jest.requireActual('react-virtual');
+ const { useVirtual } = jest.requireActual("react-virtual");
return {
useVirtual: (config: Parameters) => {
- const {virtualItems, ...returnValue} = useVirtual(config);
+ const { virtualItems, ...returnValue } = useVirtual(config);
return {
...returnValue,
- virtualItems: virtualItems.map(({measureRef, ...virtualItem}: VirtualItem) => ({
+ virtualItems: virtualItems.map(({ measureRef, ...virtualItem }: VirtualItem) => ({
...virtualItem,
measureRef: mockMeasureRef.mockImplementation((element) => measureRef(element)),
})),
@@ -33,56 +33,56 @@ jest.mock('react-virtual', () => {
expect.extend(matchers);
-const CustomizationWrapper: RenderOptions['wrapper'] = ({children}) => (
+const CustomizationWrapper: RenderOptions["wrapper"] = ({ children }) => (
{children}
);
-describe('Combobox - Virtualization', () => {
- describe('Without option template', () => {
- const items = ['a', 'b', 'c', 'd', 'e'];
- it('should apply the correct height to the virtualized list box', () => {
+describe("Combobox - Virtualization", () => {
+ describe("Without option template", () => {
+ const items = ["a", "b", "c", "d", "e"];
+ it("should apply the correct height to the virtualized list box", () => {
render(, {
wrapper: CustomizationWrapper,
});
- const resizedLiElement = screen.getAllByRole('presentation', {hidden: true})[1];
+ const resizedLiElement = screen.getAllByRole("presentation", { hidden: true })[1];
- expect(resizedLiElement.getAttribute('style')).toEqual('margin: 0px; height: 200px;');
+ expect(resizedLiElement.getAttribute("style")).toEqual("margin: 0px; height: 200px;");
});
- it('should apply the correct styles to the virtualized list box', () => {
+ it("should apply the correct styles to the virtualized list box", () => {
render(, {
wrapper: CustomizationWrapper,
});
- const optionElements = screen.getAllByRole('option', {hidden: true});
+ const optionElements = screen.getAllByRole("option", { hidden: true });
expect(optionElements.length).toEqual(5);
const [first, second, third, fourth, fifth] = optionElements;
- expect(first).toHaveStyleRule('transform', 'translateY(0px)');
- expect(first).toHaveAttribute('aria-setsize', '5');
- expect(first).toHaveAttribute('aria-posinset', '1');
+ expect(first).toHaveStyleRule("transform", "translateY(0px)");
+ expect(first).toHaveAttribute("aria-setsize", "5");
+ expect(first).toHaveAttribute("aria-posinset", "1");
- expect(second).toHaveStyleRule('transform', 'translateY(50px)');
- expect(second).toHaveAttribute('aria-setsize', '5');
- expect(second).toHaveAttribute('aria-posinset', '2');
+ expect(second).toHaveStyleRule("transform", "translateY(50px)");
+ expect(second).toHaveAttribute("aria-setsize", "5");
+ expect(second).toHaveAttribute("aria-posinset", "2");
- expect(third).toHaveStyleRule('transform', 'translateY(100px)');
- expect(third).toHaveAttribute('aria-setsize', '5');
- expect(third).toHaveAttribute('aria-posinset', '3');
+ expect(third).toHaveStyleRule("transform", "translateY(100px)");
+ expect(third).toHaveAttribute("aria-setsize", "5");
+ expect(third).toHaveAttribute("aria-posinset", "3");
- expect(fourth).toHaveStyleRule('transform', 'translateY(150px)');
- expect(fourth).toHaveAttribute('aria-setsize', '5');
- expect(fourth).toHaveAttribute('aria-posinset', '4');
+ expect(fourth).toHaveStyleRule("transform", "translateY(150px)");
+ expect(fourth).toHaveAttribute("aria-setsize", "5");
+ expect(fourth).toHaveAttribute("aria-posinset", "4");
- expect(fifth).toHaveStyleRule('transform', 'translateY(200px)');
- expect(fifth).toHaveAttribute('aria-setsize', '5');
- expect(fifth).toHaveAttribute('aria-posinset', '5');
+ expect(fifth).toHaveStyleRule("transform", "translateY(200px)");
+ expect(fifth).toHaveAttribute("aria-setsize", "5");
+ expect(fifth).toHaveAttribute("aria-posinset", "5");
});
- it('should call the measure ref from virtualize when component is mounted', () => {
+ it("should call the measure ref from virtualize when component is mounted", () => {
render(, {
wrapper: CustomizationWrapper,
});
@@ -91,104 +91,104 @@ describe('Combobox - Virtualization', () => {
});
});
- describe('With option template', () => {
+ describe("With option template", () => {
const items = [
{
- label: 'a',
- value: 'a-english',
+ label: "a",
+ value: "a-english",
},
{
- label: 'b',
- value: 'b-english',
+ label: "b",
+ value: "b-english",
},
{
- label: 'c',
- value: 'c-english',
+ label: "c",
+ value: "c-english",
},
{
- label: 'd',
- value: 'd-english',
+ label: "d",
+ value: "d-english",
},
{
- label: 'e',
- value: 'e-english',
+ label: "e",
+ value: "e-english",
},
];
- it('should apply the correct height to the virtualized list box', () => {
+ it("should apply the correct height to the virtualized list box", () => {
render(
label}
- itemToString={({label}) => label}
+ optionTemplate={({ label }) => label}
+ itemToString={({ label }) => label}
labelText="Choose a letter:"
initialIsOpen
/>,
{
wrapper: CustomizationWrapper,
- }
+ },
);
- const resizedLiElement = screen.getAllByRole('presentation', {hidden: true})[1];
+ const resizedLiElement = screen.getAllByRole("presentation", { hidden: true })[1];
- expect(resizedLiElement.getAttribute('style')).toEqual('margin: 0px; height: 200px;');
+ expect(resizedLiElement.getAttribute("style")).toEqual("margin: 0px; height: 200px;");
});
- it('should apply the correct styles to the virtualized list box', () => {
+ it("should apply the correct styles to the virtualized list box", () => {
render(
label}
- itemToString={({label}) => label}
+ optionTemplate={({ label }) => label}
+ itemToString={({ label }) => label}
labelText="Choose a letter:"
initialIsOpen
/>,
{
wrapper: CustomizationWrapper,
- }
+ },
);
- const optionElements = screen.getAllByRole('option', {hidden: true});
+ const optionElements = screen.getAllByRole("option", { hidden: true });
expect(optionElements.length).toEqual(5);
const [first, second, third, fourth, fifth] = optionElements;
- expect(first).toHaveStyleRule('transform', 'translateY(0px)');
- expect(first).toHaveAttribute('aria-setsize', '5');
- expect(first).toHaveAttribute('aria-posinset', '1');
+ expect(first).toHaveStyleRule("transform", "translateY(0px)");
+ expect(first).toHaveAttribute("aria-setsize", "5");
+ expect(first).toHaveAttribute("aria-posinset", "1");
- expect(second).toHaveStyleRule('transform', 'translateY(50px)');
- expect(second).toHaveAttribute('aria-setsize', '5');
- expect(second).toHaveAttribute('aria-posinset', '2');
+ expect(second).toHaveStyleRule("transform", "translateY(50px)");
+ expect(second).toHaveAttribute("aria-setsize", "5");
+ expect(second).toHaveAttribute("aria-posinset", "2");
- expect(third).toHaveStyleRule('transform', 'translateY(100px)');
- expect(third).toHaveAttribute('aria-setsize', '5');
- expect(third).toHaveAttribute('aria-posinset', '3');
+ expect(third).toHaveStyleRule("transform", "translateY(100px)");
+ expect(third).toHaveAttribute("aria-setsize", "5");
+ expect(third).toHaveAttribute("aria-posinset", "3");
- expect(fourth).toHaveStyleRule('transform', 'translateY(150px)');
- expect(fourth).toHaveAttribute('aria-setsize', '5');
- expect(fourth).toHaveAttribute('aria-posinset', '4');
+ expect(fourth).toHaveStyleRule("transform", "translateY(150px)");
+ expect(fourth).toHaveAttribute("aria-setsize", "5");
+ expect(fourth).toHaveAttribute("aria-posinset", "4");
- expect(fifth).toHaveStyleRule('transform', 'translateY(200px)');
- expect(fifth).toHaveAttribute('aria-setsize', '5');
- expect(fifth).toHaveAttribute('aria-posinset', '5');
+ expect(fifth).toHaveStyleRule("transform", "translateY(200px)");
+ expect(fifth).toHaveAttribute("aria-setsize", "5");
+ expect(fifth).toHaveAttribute("aria-posinset", "5");
});
- it('should call the measure ref from virtualize when component is mounted', () => {
+ it("should call the measure ref from virtualize when component is mounted", () => {
render(
label}
- itemToString={({label}) => label}
+ optionTemplate={({ label }) => label}
+ itemToString={({ label }) => label}
labelText="Choose a letter:"
initialIsOpen
/>,
{
wrapper: CustomizationWrapper,
- }
+ },
);
expect(mockMeasureRef).toHaveBeenCalled();
diff --git a/packages/paste-core/components/combobox/build.js b/packages/paste-core/components/combobox/build.js
index a4edeab49b..27dd98f98e 100644
--- a/packages/paste-core/components/combobox/build.js
+++ b/packages/paste-core/components/combobox/build.js
@@ -1,3 +1,3 @@
-const {build} = require('../../../../tools/build/esbuild');
+const { build } = require("../../../../tools/build/esbuild");
-build(require('./package.json'));
+build(require("./package.json"));
diff --git a/packages/paste-core/components/combobox/src/ComboboxItems.tsx b/packages/paste-core/components/combobox/src/ComboboxItems.tsx
index 895e668ea5..c43bfc38bd 100644
--- a/packages/paste-core/components/combobox/src/ComboboxItems.tsx
+++ b/packages/paste-core/components/combobox/src/ComboboxItems.tsx
@@ -1,21 +1,21 @@
-import * as React from 'react';
-import type {VirtualItem} from 'react-virtual';
-import find from 'lodash/find';
-import {Box} from '@twilio-paste/box';
+import { Box } from "@twilio-paste/box";
+import find from "lodash/find";
+import * as React from "react";
+import type { VirtualItem } from "react-virtual";
-import {ComboboxListboxOption} from './styles/ComboboxListboxOption';
-import {ComboboxListboxGroup} from './styles/ComboboxListboxGroup';
-import {getIndexedItems, getGroupedItems} from './helpers';
-import type {ComboboxItemsProps} from './types';
+import { getGroupedItems, getIndexedItems } from "./helpers";
+import { ComboboxListboxGroup } from "./styles/ComboboxListboxGroup";
+import { ComboboxListboxOption } from "./styles/ComboboxListboxOption";
+import type { ComboboxItemsProps } from "./types";
const ComboboxItems: React.FC<
- React.PropsWithChildren & {ref: React.Ref}
+ React.PropsWithChildren & { ref: React.Ref }
> = React.memo(
React.forwardRef(
(
{
items,
- element = 'COMBOBOX',
+ element = "COMBOBOX",
getItemProps,
highlightedIndex,
selectedItems,
@@ -27,14 +27,14 @@ const ComboboxItems: React.FC<
virtualItems,
emptyState: EmptyState,
},
- ref
+ ref,
) => {
/*
* Use option template if provided
* otherwise, return the items array.
*/
const templatizedItems = React.useMemo(() => {
- return optionTemplate != null && typeof optionTemplate === 'function'
+ return optionTemplate != null && typeof optionTemplate === "function"
? items.map((item) => optionTemplate(item))
: items;
}, [JSON.stringify(items), optionTemplate]);
@@ -60,13 +60,13 @@ const ComboboxItems: React.FC<
return (
-
- {virtualItems.map(({measureRef, index: virtualItemIndex, start}: VirtualItem) => {
+
+ {virtualItems.map(({ measureRef, index: virtualItemIndex, start }: VirtualItem) => {
const item = templatizedItems[virtualItemIndex];
const disabled = disabledItems != null && disabledItems.includes(items[virtualItemIndex]);
return (
{groupedItemKeys.map((groupedItemKey) => {
- const isUncategorized = groupedItemKey === 'undefined';
+ const isUncategorized = groupedItemKey === "undefined";
// Wrapped in '$' characters in case of clash with a provided group named "Uncategorized"
- const groupKey = isUncategorized ? '$$$Uncategorized$$$' : groupedItemKey;
+ const groupKey = isUncategorized ? "$$$Uncategorized$$$" : groupedItemKey;
return (
- {groupedItems[groupedItemKey].map(({index, ...item}: Record) => {
+ {groupedItems[groupedItemKey].map(({ index, ...item }: Record) => {
const disabled = disabledItems != null && find(disabledItems, item);
return (
{optionTemplate ? optionTemplate(item) : item}
@@ -149,10 +149,10 @@ const ComboboxItems: React.FC<
})}
);
- }
- )
+ },
+ ),
);
-ComboboxItems.displayName = 'ComboboxItems';
+ComboboxItems.displayName = "ComboboxItems";
-export {ComboboxItems};
+export { ComboboxItems };
diff --git a/packages/paste-core/components/combobox/src/ListboxPositioner.tsx b/packages/paste-core/components/combobox/src/ListboxPositioner.tsx
index dc1ac5055d..2600af38ea 100644
--- a/packages/paste-core/components/combobox/src/ListboxPositioner.tsx
+++ b/packages/paste-core/components/combobox/src/ListboxPositioner.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import {Box, type BoxStyleProps} from '@twilio-paste/box';
-import {useRect} from '@radix-ui/react-use-rect';
-import {useWindowSize} from '@twilio-paste/utils';
+import { useRect } from "@radix-ui/react-use-rect";
+import { Box, type BoxStyleProps } from "@twilio-paste/box";
+import { useWindowSize } from "@twilio-paste/utils";
+import * as React from "react";
interface ListBoxPositionerProps {
children: React.ReactNode;
@@ -9,8 +9,8 @@ interface ListBoxPositionerProps {
dropdownBoxRef: React.RefObject;
}
-export const ListBoxPositioner: React.FC = ({inputBoxRef, dropdownBoxRef, ...props}) => {
- const {height: windowHeight} = useWindowSize();
+export const ListBoxPositioner: React.FC = ({ inputBoxRef, dropdownBoxRef, ...props }) => {
+ const { height: windowHeight } = useWindowSize();
const inputBoxDimensions = useRect(inputBoxRef.current);
const dropdownBoxDimensions = useRect(dropdownBoxRef.current);
const dropdownBoxHeight = dropdownBoxDimensions?.height;
@@ -36,7 +36,7 @@ export const ListBoxPositioner: React.FC = ({inputBoxRef
if (windowHeight) {
if (dropdownBoxHeight >= windowHeight) {
return {
- position: 'fixed',
+ position: "fixed",
top: 0,
left: inputBoxDimensions?.left,
right: inputBoxDimensions?.right,
@@ -48,7 +48,7 @@ export const ListBoxPositioner: React.FC = ({inputBoxRef
inputBoxDimensions?.top - dropdownBoxHeight > 0
) {
return {
- position: 'fixed',
+ position: "fixed",
// 6px to account for border things, should be fine on all themes
top: inputBoxDimensions?.top - dropdownBoxHeight - 6,
left: inputBoxDimensions?.left,
@@ -59,7 +59,7 @@ export const ListBoxPositioner: React.FC = ({inputBoxRef
}
return {
- position: 'fixed',
+ position: "fixed",
top: inputBoxDimensions?.bottom,
left: inputBoxDimensions?.left,
right: inputBoxDimensions?.right,
@@ -69,4 +69,4 @@ export const ListBoxPositioner: React.FC = ({inputBoxRef
return ;
};
-ListBoxPositioner.displayName = 'ListBoxPositioner';
+ListBoxPositioner.displayName = "ListBoxPositioner";
diff --git a/packages/paste-core/components/combobox/src/helpers.tsx b/packages/paste-core/components/combobox/src/helpers.tsx
index 15acaade3b..4bb15179b8 100644
--- a/packages/paste-core/components/combobox/src/helpers.tsx
+++ b/packages/paste-core/components/combobox/src/helpers.tsx
@@ -1,9 +1,9 @@
-import type {HelpTextVariants} from '@twilio-paste/help-text';
-import type {InputVariants} from '@twilio-paste/input';
-import groupBy from 'lodash/groupBy';
-import type {BoxStyleProps} from '@twilio-paste/box';
+import type { BoxStyleProps } from "@twilio-paste/box";
+import type { HelpTextVariants } from "@twilio-paste/help-text";
+import type { InputVariants } from "@twilio-paste/input";
+import groupBy from "lodash/groupBy";
-import type {Item} from './types';
+import type { Item } from "./types";
type IndexedItem = Item & {
index: number;
@@ -16,38 +16,38 @@ type IndexedItem = Item & {
*/
export const getIndexedItems = (items: Item[]): IndexedItem[] => {
return items.map((item, index) => {
- if (typeof item === 'string') {
- return {label: item, index};
+ if (typeof item === "string") {
+ return { label: item, index };
}
- return {...item, index};
+ return { ...item, index };
});
};
// Creates a grouped object of items with the original flat array index
export const getGroupedItems = (items: IndexedItem[], groupItemsBy: string): any => {
- return groupBy(items, (item: Item) => (typeof item === 'string' ? 'Uncategorized' : item[groupItemsBy]));
+ return groupBy(items, (item: Item) => (typeof item === "string" ? "Uncategorized" : item[groupItemsBy]));
};
export const getHelpTextVariant = (variant: InputVariants, hasError: boolean | undefined): HelpTextVariants => {
- if (hasError && variant === 'inverse') {
- return 'error_inverse';
+ if (hasError && variant === "inverse") {
+ return "error_inverse";
}
if (hasError) {
- return 'error';
+ return "error";
}
- if (variant === 'inverse') {
- return 'inverse';
+ if (variant === "inverse") {
+ return "inverse";
}
- return 'default';
+ return "default";
};
export const visuallyHiddenStyles: BoxStyleProps = {
- clip: 'rect(0 0 0 0)',
- height: '1px',
- margin: 'spaceNegative10',
- overflow: 'hidden',
- padding: 'space0',
- position: 'absolute',
- whiteSpace: 'nowrap',
- width: '1px',
+ clip: "rect(0 0 0 0)",
+ height: "1px",
+ margin: "spaceNegative10",
+ overflow: "hidden",
+ padding: "space0",
+ position: "absolute",
+ whiteSpace: "nowrap",
+ width: "1px",
};
diff --git a/packages/paste-core/components/combobox/src/index.tsx b/packages/paste-core/components/combobox/src/index.tsx
index 56a01ec7c1..94a458f14d 100644
--- a/packages/paste-core/components/combobox/src/index.tsx
+++ b/packages/paste-core/components/combobox/src/index.tsx
@@ -1,15 +1,15 @@
export {
useComboboxPrimitive as useCombobox,
useMultiSelectPrimitive as useMultiselectCombobox,
-} from '@twilio-paste/combobox-primitive';
+} from "@twilio-paste/combobox-primitive";
export type {
UseComboboxPrimitiveState as UseComboboxState,
UseComboboxPrimitiveStateChange as UseComboboxStateChange,
-} from '@twilio-paste/combobox-primitive';
-export * from './singleselect/Combobox';
-export * from './multiselect/MultiselectCombobox';
-export * from './styles/ComboboxInputWrapper';
-export * from './styles/ComboboxListbox';
-export * from './styles/ComboboxListboxOption';
-export * from './styles/ComboboxListboxGroup';
-export type {MultiselectComboboxProps, ComboboxProps} from './types';
+} from "@twilio-paste/combobox-primitive";
+export * from "./singleselect/Combobox";
+export * from "./multiselect/MultiselectCombobox";
+export * from "./styles/ComboboxInputWrapper";
+export * from "./styles/ComboboxListbox";
+export * from "./styles/ComboboxListboxOption";
+export * from "./styles/ComboboxListboxGroup";
+export type { MultiselectComboboxProps, ComboboxProps } from "./types";
diff --git a/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx b/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx
index 528857b928..e13338fbf6 100644
--- a/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx
+++ b/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx
@@ -1,22 +1,22 @@
-import * as React from 'react';
-import type {BoxProps} from '@twilio-paste/box';
-import {Box} from '@twilio-paste/box';
-import {InputElement} from '@twilio-paste/input';
+import type { BoxProps } from "@twilio-paste/box";
+import { Box } from "@twilio-paste/box";
+import { InputElement } from "@twilio-paste/input";
+import * as React from "react";
interface GrowingInputProps {
initialValue?: string;
- element?: BoxProps['element'];
+ element?: BoxProps["element"];
onChange?: (event: React.ChangeEvent) => void;
id: string;
- value?: HTMLInputElement['value'];
+ value?: HTMLInputElement["value"];
}
export const GrowingInput = React.forwardRef(
- ({element = 'GROWING_INPUT', onChange, initialValue = '', value, ...props}, ref) => {
+ ({ element = "GROWING_INPUT", onChange, initialValue = "", value, ...props }, ref) => {
const [text, setText] = React.useState(value || initialValue);
React.useEffect(() => {
- setText(value || '');
+ setText(value || "");
}, [value]);
/*
@@ -43,13 +43,13 @@ export const GrowingInput = React.forwardRef
{
event.preventDefault();
// Used to set the width of the growing input
- setText(event.currentTarget.value.replace(/ +/g, ' '));
+ setText(event.currentTarget.value.replace(/ +/g, " "));
if (onChange != null) {
onChange(event);
@@ -71,6 +71,6 @@ export const GrowingInput = React.forwardRef
);
- }
+ },
);
-GrowingInput.displayName = 'GrowingInput';
+GrowingInput.displayName = "GrowingInput";
diff --git a/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx b/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx
index 1e5c1d1b18..cdb512eedf 100644
--- a/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx
+++ b/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx
@@ -1,30 +1,30 @@
-import * as React from 'react';
-import {useVirtual} from 'react-virtual';
-import includes from 'lodash/includes';
-import {useWindowSize} from '@twilio-paste/utils';
-import {useUID} from '@twilio-paste/uid-library';
-import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon';
-import {Box} from '@twilio-paste/box';
-import {Label} from '@twilio-paste/label';
-import {HelpText} from '@twilio-paste/help-text';
-import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only';
-import {FormPillGroup, FormPill, useFormPillState} from '@twilio-paste/form-pill-group';
-import {useComboboxPrimitive} from '@twilio-paste/combobox-primitive';
-import {InputBox, InputChevronWrapper, getInputChevronIconColor} from '@twilio-paste/input-box';
-import {Portal} from '@twilio-paste/reakit-library';
+import { Box } from "@twilio-paste/box";
+import { useComboboxPrimitive } from "@twilio-paste/combobox-primitive";
+import { FormPill, FormPillGroup, useFormPillState } from "@twilio-paste/form-pill-group";
+import { HelpText } from "@twilio-paste/help-text";
+import { ChevronDownIcon } from "@twilio-paste/icons/esm/ChevronDownIcon";
+import { InputBox, InputChevronWrapper, getInputChevronIconColor } from "@twilio-paste/input-box";
+import { Label } from "@twilio-paste/label";
+import { Portal } from "@twilio-paste/reakit-library";
+import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
+import { useUID } from "@twilio-paste/uid-library";
+import { useWindowSize } from "@twilio-paste/utils";
+import includes from "lodash/includes";
+import * as React from "react";
+import { useVirtual } from "react-virtual";
-import {GrowingInput} from './GrowingInput';
-import {extractPropsFromState} from './extractPropsFromState';
-import {ListBoxPositioner} from '../ListboxPositioner';
-import {ComboboxItems} from '../ComboboxItems';
-import {ComboboxListbox} from '../styles/ComboboxListbox';
-import type {MultiselectComboboxProps} from '../types';
-import {getHelpTextVariant} from '../helpers';
+import { ComboboxItems } from "../ComboboxItems";
+import { ListBoxPositioner } from "../ListboxPositioner";
+import { getHelpTextVariant } from "../helpers";
+import { ComboboxListbox } from "../styles/ComboboxListbox";
+import type { MultiselectComboboxProps } from "../types";
+import { GrowingInput } from "./GrowingInput";
+import { extractPropsFromState } from "./extractPropsFromState";
export const MultiselectCombobox = React.forwardRef(
(
{
- element = 'MULTISELECT_COMBOBOX',
+ element = "MULTISELECT_COMBOBOX",
disabled,
hasError,
helpText,
@@ -35,11 +35,11 @@ export const MultiselectCombobox = React.forwardRef | null): string => (item ? item.toString() : ''),
+ itemToString = (item: string | Record | null): string => (item ? item.toString() : ""),
labelText,
optionTemplate,
required,
- variant = 'default',
+ variant = "default",
initialIsOpen,
onHighlightedIndexChange,
onInputValueChange,
@@ -48,18 +48,18 @@ export const MultiselectCombobox = React.forwardRef {
const a11yLabelId = useUID();
const helpTextId = useUID();
const pillState = useFormPillState();
const parentRef = React.useRef(null);
- const {width} = useWindowSize();
+ const { width } = useWindowSize();
// gets the dimensions of the inputBox to position the listbox
const inputBoxRef = React.useRef(null);
@@ -71,7 +71,7 @@ export const MultiselectCombobox = React.forwardRef) => {
- if (event.code === 'Enter' && required && selectedItems.length === 0) {
+ if (event.code === "Enter" && required && selectedItems.length === 0) {
// Don't submit the form
event.preventDefault();
}
onKeyDown?.(event);
},
- [required, selectedItems, onKeyDown]
+ [required, selectedItems, onKeyDown],
);
// Fix the a11y issue where `aria-expanded` isn't being set until the dropdown opens the very first time
const comboboxProps = getComboboxProps({
disabled,
- role: 'combobox',
+ role: "combobox",
});
- const ariaExpanded = comboboxProps['aria-expanded'] || 'false';
+ const ariaExpanded = comboboxProps["aria-expanded"] || "false";
return (
@@ -289,7 +289,7 @@ export const MultiselectCombobox = React.forwardRef
-
+
{i18nKeyboardControls}
);
- }
+ },
);
-MultiselectCombobox.displayName = 'MultiselectCombobox';
+MultiselectCombobox.displayName = "MultiselectCombobox";
diff --git a/packages/paste-core/components/combobox/src/multiselect/extractPropsFromState.tsx b/packages/paste-core/components/combobox/src/multiselect/extractPropsFromState.tsx
index 90ed16cc8c..4669ad82ea 100644
--- a/packages/paste-core/components/combobox/src/multiselect/extractPropsFromState.tsx
+++ b/packages/paste-core/components/combobox/src/multiselect/extractPropsFromState.tsx
@@ -1,13 +1,13 @@
-import {useMultiSelectPrimitive} from '@twilio-paste/combobox-primitive';
-import type {UseMultiSelectPrimitiveReturnValue} from '@twilio-paste/combobox-primitive';
-import isEmpty from 'lodash/isEmpty';
+import { useMultiSelectPrimitive } from "@twilio-paste/combobox-primitive";
+import type { UseMultiSelectPrimitiveReturnValue } from "@twilio-paste/combobox-primitive";
+import isEmpty from "lodash/isEmpty";
-import type {Item, MultiselectComboboxProps} from '../types';
+import type { Item, MultiselectComboboxProps } from "../types";
interface DefaultStateProps {
- initialSelectedItems: MultiselectComboboxProps['initialSelectedItems'];
- onSelectedItemsChange: MultiselectComboboxProps['onSelectedItemsChange'];
- state: MultiselectComboboxProps['state'];
+ initialSelectedItems: MultiselectComboboxProps["initialSelectedItems"];
+ onSelectedItemsChange: MultiselectComboboxProps["onSelectedItemsChange"];
+ state: MultiselectComboboxProps["state"];
}
export const extractPropsFromState = ({
diff --git a/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx b/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx
index a8ed6bb817..a79a355c7d 100644
--- a/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx
+++ b/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx
@@ -1,36 +1,36 @@
-import * as React from 'react';
-import {useVirtual} from 'react-virtual';
-import {useUID} from '@twilio-paste/uid-library';
-import {useWindowSize} from '@twilio-paste/utils';
-import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon';
-import {Box} from '@twilio-paste/box';
-import {InputBox, InputChevronWrapper, getInputChevronIconColor} from '@twilio-paste/input-box';
-import {Label} from '@twilio-paste/label';
-import {HelpText} from '@twilio-paste/help-text';
-import type {HelpTextVariants} from '@twilio-paste/help-text';
-import type {InputVariants} from '@twilio-paste/input';
-import {Portal} from '@twilio-paste/reakit-library';
+import { Box } from "@twilio-paste/box";
+import { HelpText } from "@twilio-paste/help-text";
+import type { HelpTextVariants } from "@twilio-paste/help-text";
+import { ChevronDownIcon } from "@twilio-paste/icons/esm/ChevronDownIcon";
+import type { InputVariants } from "@twilio-paste/input";
+import { InputBox, InputChevronWrapper, getInputChevronIconColor } from "@twilio-paste/input-box";
+import { Label } from "@twilio-paste/label";
+import { Portal } from "@twilio-paste/reakit-library";
+import { useUID } from "@twilio-paste/uid-library";
+import { useWindowSize } from "@twilio-paste/utils";
+import * as React from "react";
+import { useVirtual } from "react-virtual";
-import {ComboboxInputSelect} from '../styles/ComboboxInputSelect';
-import {ComboboxInputWrapper} from '../styles/ComboboxInputWrapper';
-import {ComboboxListbox} from '../styles/ComboboxListbox';
-import {ComboboxItems} from '../ComboboxItems';
-import type {ComboboxProps} from '../types';
-import {extractPropsFromState} from './extractPropsFromState';
-import {ListBoxPositioner} from '../ListboxPositioner';
-import {visuallyHiddenStyles} from '../helpers';
+import { ComboboxItems } from "../ComboboxItems";
+import { ListBoxPositioner } from "../ListboxPositioner";
+import { visuallyHiddenStyles } from "../helpers";
+import { ComboboxInputSelect } from "../styles/ComboboxInputSelect";
+import { ComboboxInputWrapper } from "../styles/ComboboxInputWrapper";
+import { ComboboxListbox } from "../styles/ComboboxListbox";
+import type { ComboboxProps } from "../types";
+import { extractPropsFromState } from "./extractPropsFromState";
const getHelpTextVariant = (variant: InputVariants, hasError: boolean | undefined): HelpTextVariants => {
- if (hasError && variant === 'inverse') {
- return 'error_inverse';
+ if (hasError && variant === "inverse") {
+ return "error_inverse";
}
if (hasError) {
- return 'error';
+ return "error";
}
- if (variant === 'inverse') {
- return 'inverse';
+ if (variant === "inverse") {
+ return "inverse";
}
- return 'default';
+ return "default";
};
const Combobox = React.forwardRef(
@@ -38,7 +38,7 @@ const Combobox = React.forwardRef(
{
autocomplete,
disabled,
- element = 'COMBOBOX',
+ element = "COMBOBOX",
hasError,
hideVisibleLabel,
helpText,
@@ -60,18 +60,18 @@ const Combobox = React.forwardRef(
selectedItem,
groupItemsBy,
groupLabelTemplate,
- variant = 'default',
+ variant = "default",
emptyState,
getA11yStatusMessage,
getA11ySelectionMessage,
state,
...props
},
- ref
+ ref,
) => {
const parentRef = React.useRef(null);
const helpTextId = useUID();
- const {width} = useWindowSize();
+ const { width } = useWindowSize();
// gets the dimensions of the inputBox to position the listbox
const inputBoxRef = React.useRef(null);
@@ -114,7 +114,7 @@ const Combobox = React.forwardRef(
isOpen === undefined
) {
throw new Error(
- '[Combobox]: One of getComboboxProps, getInputProps, getItemProps, getLabelProps, getMenuProps, getToggleButtonProps, highlightedIndex or isOpen is missing from the state object. Please make sure this is provided.'
+ "[Combobox]: One of getComboboxProps, getInputProps, getItemProps, getLabelProps, getMenuProps, getToggleButtonProps, highlightedIndex or isOpen is missing from the state object. Please make sure this is provided.",
);
}
@@ -140,12 +140,12 @@ const Combobox = React.forwardRef(
rowVirtualizer.scrollToIndex(items.indexOf(internalSelectedItem));
}
},
- [items, internalSelectedItem]
+ [items, internalSelectedItem],
);
return (
-
+
@@ -159,12 +159,12 @@ const Combobox = React.forwardRef(
variant={variant}
ref={inputBoxRef}
>
-
+
event.preventDefault()} : undefined)}
+ {...getInputProps({ disabled, required, ref, ...props })}
+ {...(!autocomplete ? { onChange: (event: React.ChangeEvent) => event.preventDefault() } : undefined)}
autocomplete={autocomplete}
aria-describedby={helpText != null ? helpTextId : null}
element={`${element}_ELEMENT`}
@@ -182,7 +182,7 @@ const Combobox = React.forwardRef(
-
+
(
)}
);
- }
+ },
);
-Combobox.displayName = 'Combobox';
+Combobox.displayName = "Combobox";
-export {Combobox};
+export { Combobox };
diff --git a/packages/paste-core/components/combobox/src/singleselect/extractPropsFromState.tsx b/packages/paste-core/components/combobox/src/singleselect/extractPropsFromState.tsx
index 669a47f6c0..3d72166856 100644
--- a/packages/paste-core/components/combobox/src/singleselect/extractPropsFromState.tsx
+++ b/packages/paste-core/components/combobox/src/singleselect/extractPropsFromState.tsx
@@ -1,29 +1,29 @@
-import * as React from 'react';
-import {useComboboxPrimitive} from '@twilio-paste/combobox-primitive';
+import { useComboboxPrimitive } from "@twilio-paste/combobox-primitive";
import type {
+ UseComboboxPrimitiveReturnValue,
UseComboboxPrimitiveState,
UseComboboxPrimitiveStateChange,
UseComboboxPrimitiveStateChangeOptions,
- UseComboboxPrimitiveReturnValue,
-} from '@twilio-paste/combobox-primitive';
-import isEmpty from 'lodash/isEmpty';
+} from "@twilio-paste/combobox-primitive";
+import isEmpty from "lodash/isEmpty";
+import * as React from "react";
-import type {ComboboxProps} from '../types';
+import type { ComboboxProps } from "../types";
type DefaultStateProps = {
- onInputValueChange: ComboboxProps['onInputValueChange'];
- onIsOpenChange: ComboboxProps['onIsOpenChange'];
- onSelectedItemChange: ComboboxProps['onSelectedItemChange'];
- onHighlightedIndexChange: ComboboxProps['onHighlightedIndexChange'];
- itemToString: ComboboxProps['itemToString'];
- initialIsOpen: ComboboxProps['initialIsOpen'];
- inputValue: ComboboxProps['inputValue'];
- selectedItem: ComboboxProps['selectedItem'];
- initialSelectedItem: ComboboxProps['initialSelectedItem'];
- items: ComboboxProps['items'];
- disabledItems: ComboboxProps['disabledItems'];
- getA11yStatusMessage: ComboboxProps['getA11yStatusMessage'];
- getA11ySelectionMessage: ComboboxProps['getA11ySelectionMessage'];
+ onInputValueChange: ComboboxProps["onInputValueChange"];
+ onIsOpenChange: ComboboxProps["onIsOpenChange"];
+ onSelectedItemChange: ComboboxProps["onSelectedItemChange"];
+ onHighlightedIndexChange: ComboboxProps["onHighlightedIndexChange"];
+ itemToString: ComboboxProps["itemToString"];
+ initialIsOpen: ComboboxProps["initialIsOpen"];
+ inputValue: ComboboxProps["inputValue"];
+ selectedItem: ComboboxProps["selectedItem"];
+ initialSelectedItem: ComboboxProps["initialSelectedItem"];
+ items: ComboboxProps["items"];
+ disabledItems: ComboboxProps["disabledItems"];
+ getA11yStatusMessage: ComboboxProps["getA11yStatusMessage"];
+ getA11ySelectionMessage: ComboboxProps["getA11ySelectionMessage"];
};
const getDefaultState = ({
@@ -43,7 +43,7 @@ const getDefaultState = ({
}: DefaultStateProps): Partial> => {
const stateReducer = (
state: UseComboboxPrimitiveState,
- actionAndChanges: UseComboboxPrimitiveStateChangeOptions
+ actionAndChanges: UseComboboxPrimitiveStateChangeOptions,
): Partial> => {
// If the item to be selected is disabled, return the current state without changes
if (disabledItems?.includes(actionAndChanges.changes.selectedItem)) {
@@ -63,25 +63,25 @@ const getDefaultState = ({
onHighlightedIndexChange(changes);
}
},
- [onHighlightedIndexChange]
+ [onHighlightedIndexChange],
),
onInputValueChange,
onIsOpenChange,
onSelectedItemChange,
- ...(itemToString != null && {itemToString}),
- ...(initialIsOpen != null && {initialIsOpen}),
+ ...(itemToString != null && { itemToString }),
+ ...(initialIsOpen != null && { initialIsOpen }),
// We remap inputValue to defaultInputValue because we want downshift to manage the state of controlled inputs
- ...(inputValue != null && {defaultInputValue: inputValue}),
- ...(selectedItem != null && {selectedItem}),
- ...(getA11yStatusMessage != null && {getA11yStatusMessage}),
- ...(getA11ySelectionMessage != null && {getA11ySelectionMessage}),
+ ...(inputValue != null && { defaultInputValue: inputValue }),
+ ...(selectedItem != null && { selectedItem }),
+ ...(getA11yStatusMessage != null && { getA11yStatusMessage }),
+ ...(getA11ySelectionMessage != null && { getA11ySelectionMessage }),
});
};
export const extractPropsFromState = ({
state,
...props
-}: DefaultStateProps & {state?: Partial>}): Partial<
+}: DefaultStateProps & { state?: Partial> }): Partial<
UseComboboxPrimitiveReturnValue
> => {
if (state != null && !isEmpty(state)) {
diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxInputSelect.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxInputSelect.tsx
index f0a5edab68..a23e80d408 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxInputSelect.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxInputSelect.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {InputElement} from '@twilio-paste/input';
+import { InputElement } from "@twilio-paste/input";
+import * as React from "react";
-import type {ComboboxProps} from '../types';
+import type { ComboboxProps } from "../types";
-const ComboboxInputSelect = React.forwardRef(({...props}, ref) => {
+const ComboboxInputSelect = React.forwardRef(({ ...props }, ref) => {
return (
(({
);
});
-ComboboxInputSelect.displayName = 'ComboboxInputSelect';
+ComboboxInputSelect.displayName = "ComboboxInputSelect";
-export {ComboboxInputSelect};
+export { ComboboxInputSelect };
diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxInputWrapper.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxInputWrapper.tsx
index 1f4093aaa9..f1de93614a 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxInputWrapper.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxInputWrapper.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import * as React from "react";
export interface ComboboxInputWrapperProps {
children: NonNullable;
}
const ComboboxInputWrapper = React.forwardRef(
- ({children, ...props}, ref) => {
+ ({ children, ...props }, ref) => {
return (
{children}
);
- }
+ },
);
-ComboboxInputWrapper.displayName = 'ComboboxInputWrapper';
+ComboboxInputWrapper.displayName = "ComboboxInputWrapper";
-export {ComboboxInputWrapper};
+export { ComboboxInputWrapper };
diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx
index 42ad1b88bf..f550e8644c 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import type {BoxProps} from '@twilio-paste/box';
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps } from "@twilio-paste/box";
+import * as React from "react";
-export interface ComboboxListboxProps extends Pick {
+export interface ComboboxListboxProps extends Pick {
children: NonNullable;
hidden: boolean;
}
const ComboboxListbox = React.forwardRef(
- ({children, element = 'COMBOBOX_LISTBOX', hidden, ...props}, ref) => {
+ ({ children, element = "COMBOBOX_LISTBOX", hidden, ...props }, ref) => {
// Unmount children when hidden
if (hidden) {
return ;
@@ -45,9 +45,9 @@ const ComboboxListbox = React.forwardRef
{children}
);
- }
+ },
);
-ComboboxListbox.displayName = 'ComboboxListbox';
+ComboboxListbox.displayName = "ComboboxListbox";
-export {ComboboxListbox};
+export { ComboboxListbox };
diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListboxGroup.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListboxGroup.tsx
index 0346bb8fa5..2d9d69fc09 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxListboxGroup.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxListboxGroup.tsx
@@ -1,22 +1,22 @@
-import * as React from 'react';
-import {Box} from '@twilio-paste/box';
-import {Text} from '@twilio-paste/text';
+import { Box } from "@twilio-paste/box";
+import { Text } from "@twilio-paste/text";
+import * as React from "react";
-import type {ComboboxProps} from '../types';
+import type { ComboboxProps } from "../types";
-export interface ComboboxListboxGroupProps extends Pick {
+export interface ComboboxListboxGroupProps extends Pick {
children: NonNullable;
groupName?: string | undefined;
}
const ComboboxListboxGroup = React.forwardRef(
- ({children, element = 'COMBOBOX', groupName, groupLabelTemplate}, ref) => {
+ ({ children, element = "COMBOBOX", groupName, groupLabelTemplate }, ref) => {
return (
{groupName ? (
@@ -56,9 +56,9 @@ const ComboboxListboxGroup = React.forwardRef
);
- }
+ },
);
-ComboboxListboxGroup.displayName = 'ComboboxListboxGroup';
+ComboboxListboxGroup.displayName = "ComboboxListboxGroup";
-export {ComboboxListboxGroup};
+export { ComboboxListboxGroup };
diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
index cab1c0ec67..ae7c2bbb0e 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
@@ -1,36 +1,36 @@
-import * as React from 'react';
-import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import {SelectedIcon} from '@twilio-paste/icons/esm/SelectedIcon';
-import type {BoxProps, BoxStyleProps} from '@twilio-paste/box';
-import {Text} from '@twilio-paste/text';
-import type {PositionOptions} from '@twilio-paste/style-props';
-import type {VirtualItem} from 'react-virtual';
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
+import { SelectedIcon } from "@twilio-paste/icons/esm/SelectedIcon";
+import type { PositionOptions } from "@twilio-paste/style-props";
+import { Text } from "@twilio-paste/text";
+import * as React from "react";
+import type { VirtualItem } from "react-virtual";
-export interface ComboboxListboxOptionProps extends Pick {
+export interface ComboboxListboxOptionProps extends Pick {
children: NonNullable;
highlighted?: boolean;
selected?: boolean;
disabled?: boolean;
- variant: 'default' | 'groupOption';
- startHeight?: VirtualItem['start'];
+ variant: "default" | "groupOption";
+ startHeight?: VirtualItem["start"];
}
-const VariantStyles: {[key in ComboboxListboxOptionProps['variant']]: BoxStyleProps} = {
+const VariantStyles: { [key in ComboboxListboxOptionProps["variant"]]: BoxStyleProps } = {
groupOption: {
- paddingLeft: 'space90',
- paddingRight: 'space50',
+ paddingLeft: "space90",
+ paddingRight: "space50",
},
default: {
- paddingLeft: 'space50',
- paddingRight: 'space50',
+ paddingLeft: "space50",
+ paddingRight: "space50",
},
};
const getVirtualStyles = (startHeight: number): Record => ({
- position: 'absolute' as PositionOptions,
+ position: "absolute" as PositionOptions,
top: 0,
left: 0,
- width: '100%',
+ width: "100%",
transform: `translateY(${startHeight}px)`,
});
@@ -38,15 +38,15 @@ const ComboboxListboxOption = React.forwardRef {
const virtualItemStyles = startHeight != null ? getVirtualStyles(startHeight) : {};
@@ -63,20 +63,20 @@ const ComboboxListboxOption = React.forwardRef
);
- }
+ },
);
-ComboboxListboxOption.displayName = 'ComboboxListboxOption';
+ComboboxListboxOption.displayName = "ComboboxListboxOption";
-export {ComboboxListboxOption};
+export { ComboboxListboxOption };
diff --git a/packages/paste-core/components/combobox/src/types.ts b/packages/paste-core/components/combobox/src/types.ts
index f8786d96eb..b5b25366e2 100644
--- a/packages/paste-core/components/combobox/src/types.ts
+++ b/packages/paste-core/components/combobox/src/types.ts
@@ -1,26 +1,26 @@
-import type React from 'react';
-import type {BoxProps, BoxStyleProps} from '@twilio-paste/box';
+import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
import type {
UseComboboxPrimitiveProps,
- UseComboboxPrimitiveState,
UseComboboxPrimitiveReturnValue,
+ UseComboboxPrimitiveState,
UseMultiSelectPrimitiveReturnValue,
UseMultiSelectPrimitiveStateChange,
-} from '@twilio-paste/combobox-primitive';
-import type {InputVariants, InputProps} from '@twilio-paste/input';
-import type {VirtualItem} from 'react-virtual';
+} from "@twilio-paste/combobox-primitive";
+import type { InputProps, InputVariants } from "@twilio-paste/input";
+import type React from "react";
+import type { VirtualItem } from "react-virtual";
export type {
UseComboboxPrimitiveGetItemPropsOptions,
UseComboboxPrimitiveGetMenuPropsOptions,
GetComboboxPrimitivePropsCommonOptions,
-} from '@twilio-paste/combobox-primitive';
+} from "@twilio-paste/combobox-primitive";
export type Item = string | Record;
export type OptionTemplateFn = (item: ProvidedItem) => React.ReactNode;
-type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';
+type ScrollAlignment = "start" | "center" | "end" | "auto";
interface ScrollToOptions {
align: ScrollAlignment;
@@ -42,8 +42,8 @@ export type HighlightedIndexChanges = {
};
export interface ComboboxProps
- extends Omit,
- Pick {
+ extends Omit,
+ Pick {
autocomplete?: boolean;
helpText?: string | React.ReactNode;
labelText: string | NonNullable;
@@ -56,18 +56,18 @@ export interface ComboboxProps
hideVisibleLabel?: boolean;
// Downshift useCombobox Hook Props. Thes are mainly covered in https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#advanced-props docs
- initialIsOpen?: UseComboboxPrimitiveProps['initialIsOpen'];
- initialSelectedItem?: UseComboboxPrimitiveProps['initialSelectedItem'];
- items: UseComboboxPrimitiveProps['items'];
- itemToString?: UseComboboxPrimitiveProps['itemToString'];
- onHighlightedIndexChange?: UseComboboxPrimitiveProps['onHighlightedIndexChange'];
- onInputValueChange?: UseComboboxPrimitiveProps['onInputValueChange'];
- onIsOpenChange?: UseComboboxPrimitiveProps['onIsOpenChange'];
- onSelectedItemChange?: UseComboboxPrimitiveProps['onSelectedItemChange'];
- selectedItem?: UseComboboxPrimitiveProps['selectedItem'];
- inputValue?: UseComboboxPrimitiveProps['inputValue'];
- getA11yStatusMessage?: UseComboboxPrimitiveProps['getA11yStatusMessage'];
- getA11ySelectionMessage?: UseComboboxPrimitiveProps['getA11ySelectionMessage'];
+ initialIsOpen?: UseComboboxPrimitiveProps["initialIsOpen"];
+ initialSelectedItem?: UseComboboxPrimitiveProps["initialSelectedItem"];
+ items: UseComboboxPrimitiveProps["items"];
+ itemToString?: UseComboboxPrimitiveProps["itemToString"];
+ onHighlightedIndexChange?: UseComboboxPrimitiveProps["onHighlightedIndexChange"];
+ onInputValueChange?: UseComboboxPrimitiveProps["onInputValueChange"];
+ onIsOpenChange?: UseComboboxPrimitiveProps["onIsOpenChange"];
+ onSelectedItemChange?: UseComboboxPrimitiveProps["onSelectedItemChange"];
+ selectedItem?: UseComboboxPrimitiveProps["selectedItem"];
+ inputValue?: UseComboboxPrimitiveProps["inputValue"];
+ getA11yStatusMessage?: UseComboboxPrimitiveProps["getA11yStatusMessage"];
+ getA11ySelectionMessage?: UseComboboxPrimitiveProps["getA11ySelectionMessage"];
// Downshift useCombobox Hook return props for when you are using the hook outside of the component
state?: Partial>;
@@ -88,34 +88,34 @@ export interface ComboboxProps
export interface MultiselectComboboxProps
extends Omit<
ComboboxProps,
- | 'autocomplete'
- | 'initialSelectedItem'
- | 'selectedItem'
- | 'onSelectedItemChange'
- | 'getA11yStatusMessage'
- | 'getA11ySelectionMessage'
- | 'state'
+ | "autocomplete"
+ | "initialSelectedItem"
+ | "selectedItem"
+ | "onSelectedItemChange"
+ | "getA11yStatusMessage"
+ | "getA11ySelectionMessage"
+ | "state"
// until such time as we have a usecase for hidden multi-select comboboxes
- | 'hideVisibleLabel'
+ | "hideVisibleLabel"
> {
initialSelectedItems?: any[];
onSelectedItemsChange?: (newSelectedItems: UseMultiSelectPrimitiveStateChange- ) => void;
selectedItemsLabelText: string;
i18nKeyboardControls?: string;
- maxHeight?: BoxStyleProps['maxHeight'];
+ maxHeight?: BoxStyleProps["maxHeight"];
state?: UseMultiSelectPrimitiveReturnValue
- ;
}
export interface ComboboxItemsProps
extends Pick<
ComboboxProps,
- 'groupItemsBy' | 'optionTemplate' | 'groupLabelTemplate' | 'element' | 'emptyState' | 'state'
+ "groupItemsBy" | "optionTemplate" | "groupLabelTemplate" | "element" | "emptyState" | "state"
> {
items: Item[];
selectedItems?: Item[];
disabledItems?: Item[];
getItemProps: any;
- highlightedIndex: UseComboboxPrimitiveState
- ['highlightedIndex'];
- totalSize: RowVirtualizer['totalSize'];
- virtualItems: RowVirtualizer['virtualItems'];
+ highlightedIndex: UseComboboxPrimitiveState
- ["highlightedIndex"];
+ totalSize: RowVirtualizer["totalSize"];
+ virtualItems: RowVirtualizer["virtualItems"];
}
diff --git a/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx b/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx
index 7ffd1e5e83..15a3020549 100644
--- a/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx
+++ b/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
-import type {StoryFn} from '@storybook/react';
-import {Stack} from '@twilio-paste/stack';
-import {CustomizationProvider} from '@twilio-paste/customization';
-import {Card} from '@twilio-paste/card';
-import {Text} from '@twilio-paste/text';
-import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon';
-import {useTheme} from '@twilio-paste/theme';
+import type { StoryFn } from "@storybook/react";
+import { Card } from "@twilio-paste/card";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import { InformationIcon } from "@twilio-paste/icons/esm/InformationIcon";
+import { Stack } from "@twilio-paste/stack";
+import { Text } from "@twilio-paste/text";
+import { useTheme } from "@twilio-paste/theme";
+import * as React from "react";
-import {Combobox} from '../src';
+import { Combobox } from "../src";
-const items = ['a', 'b', 'c'];
+const items = ["a", "b", "c"];
interface GroupedItem {
letter: string;
@@ -17,16 +17,16 @@ interface GroupedItem {
}
const groupedItems = [
- {letter: 'a', number: 1},
- {letter: 'a', number: 2},
- {letter: 'b', number: 3},
- {letter: 'b', number: 4},
- {letter: 'b', number: 5},
- {letter: 'c', number: 6},
- {letter: 'd', number: 7},
+ { letter: "a", number: 1 },
+ { letter: "a", number: 2 },
+ { letter: "b", number: 3 },
+ { letter: "b", number: 4 },
+ { letter: "b", number: 5 },
+ { letter: "c", number: 6 },
+ { letter: "d", number: 7 },
];
-const ShowCustomization: React.FC> = ({
+const ShowCustomization: React.FC> = ({
isTestEnvironment,
children,
}): React.ReactElement => {
@@ -39,19 +39,19 @@ const ShowCustomization: React.FC
{children}
@@ -62,37 +62,37 @@ const ShowCustomization: React.FC
- {React.cloneElement(children as React.ReactElement, {element: 'FOO'})}
+ {React.cloneElement(children as React.ReactElement, { element: "FOO" })}
);
};
-export const CustomizedCombobox: StoryFn = (_args, {parameters: {isTestEnvironment}}) => (
+export const CustomizedCombobox: StoryFn = (_args, { parameters: { isTestEnvironment } }) => (
);
-CustomizedCombobox.storyName = 'Combobox - Default';
+CustomizedCombobox.storyName = "Combobox - Default";
-export const CustomizedComboboxGroups: StoryFn = (_args, {parameters: {isTestEnvironment}}) => (
+export const CustomizedComboboxGroups: StoryFn = (_args, { parameters: { isTestEnvironment } }) => (
{item.number}
}
- itemToString={(item: GroupedItem) => (item ? item.letter : '')}
+ itemToString={(item: GroupedItem) => (item ? item.letter : "")}
/>
);
-CustomizedComboboxGroups.storyName = 'Combobox - With groups';
+CustomizedComboboxGroups.storyName = "Combobox - With groups";
-export const CustomizedComboboxBeforeAndAfter: StoryFn = (_args, {parameters: {isTestEnvironment}}) => (
+export const CustomizedComboboxBeforeAndAfter: StoryFn = (_args, { parameters: { isTestEnvironment } }) => (
{item.number}
}
- itemToString={(item: GroupedItem) => (item ? item.letter : '')}
+ itemToString={(item: GroupedItem) => (item ? item.letter : "")}
insertBefore={Z}
insertAfter={}
/>
);
-CustomizedComboboxBeforeAndAfter.storyName = 'Combobox - With prefix and suffix';
+CustomizedComboboxBeforeAndAfter.storyName = "Combobox - With prefix and suffix";
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/Combobox/Customization - Combobox',
+ title: "Components/Combobox/Customization - Combobox",
component: CustomizedCombobox,
parameters: {
a11y: {
diff --git a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
index e6fa77ff80..5ec77fac05 100644
--- a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
+++ b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
@@ -1,36 +1,36 @@
-import * as React from 'react';
-import _ from 'lodash';
-import type {StoryFn, Meta, StoryContext} from '@storybook/react';
-import {useUID} from '@twilio-paste/uid-library';
-import {Anchor} from '@twilio-paste/anchor';
-import {Button} from '@twilio-paste/button';
-import {Box} from '@twilio-paste/box';
-import {Label} from '@twilio-paste/label';
-import {Text} from '@twilio-paste/text';
-import {Select, Option} from '@twilio-paste/select';
-import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';
-import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon';
-import {AttachIcon} from '@twilio-paste/icons/esm/AttachIcon';
-import {SearchIcon} from '@twilio-paste/icons/esm/SearchIcon';
-import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon';
-import {Modal, ModalBody, ModalHeader, ModalHeading} from '@twilio-paste/modal';
-
-import {Combobox, useCombobox} from '../src';
+import type { Meta, StoryContext, StoryFn } from "@storybook/react";
+import { Anchor } from "@twilio-paste/anchor";
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon";
+import { CloseIcon } from "@twilio-paste/icons/esm/CloseIcon";
+import { InformationIcon } from "@twilio-paste/icons/esm/InformationIcon";
+import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon";
+import { Label } from "@twilio-paste/label";
+import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object";
+import { Modal, ModalBody, ModalHeader, ModalHeading } from "@twilio-paste/modal";
+import { Option, Select } from "@twilio-paste/select";
+import { Text } from "@twilio-paste/text";
+import { useUID } from "@twilio-paste/uid-library";
+import _ from "lodash";
+import * as React from "react";
+
+import { Combobox, useCombobox } from "../src";
const items = [
- 'Alert',
- 'Anchor',
- 'Button',
- 'Card',
- 'Heading',
- 'A component with a really really really really really really really really long name',
- 'List',
- 'Modal',
- 'Paragraph',
+ "Alert",
+ "Anchor",
+ "Button",
+ "Card",
+ "Heading",
+ "A component with a really really really really really really really really long name",
+ "List",
+ "Modal",
+ "Paragraph",
];
function createLargeArray>(
- template: (index?: number | undefined) => TemplateResult
+ template: (index?: number | undefined) => TemplateResult,
): TemplateResult[] {
// eslint-disable-next-line unicorn/prefer-spread
return Array.from(new Array(1000), (_empty, index) => template(index));
@@ -42,14 +42,14 @@ interface IconItems {
iconLeft?: undefined;
}
const iconItems = [
- {label: 'Alert', iconRight: true},
- {label: 'Anchor'},
- {label: 'Button', iconLeft: true},
- {label: 'Card', iconRight: true},
- {label: 'Heading'},
- {label: 'List', iconRight: true},
- {label: 'Modal', iconLeft: true},
- {label: 'Paragraph', iconRight: true},
+ { label: "Alert", iconRight: true },
+ { label: "Anchor" },
+ { label: "Button", iconLeft: true },
+ { label: "Card", iconRight: true },
+ { label: "Heading" },
+ { label: "List", iconRight: true },
+ { label: "Modal", iconLeft: true },
+ { label: "Paragraph", iconRight: true },
];
interface ObjectItem {
@@ -58,33 +58,33 @@ interface ObjectItem {
phone: string;
}
const objectItems = [
- {code: 'AD', label: 'Andorra', phone: '376'},
- {code: 'AE', label: 'United Arab Emirates', phone: '971'},
- {code: 'AF', label: 'Afghanistan', phone: '93'},
- {code: 'AG', label: 'Antigua and Barbuda', phone: '1-268'},
- {code: 'AI', label: 'Anguilla', phone: '1-264'},
- {code: 'AL', label: 'Albania', phone: '355'},
- {code: 'AM', label: 'Armenia', phone: '374'},
- {code: 'AO', label: 'Angola', phone: '244'},
- {code: 'AQ', label: 'Antarctica', phone: '672'},
- {code: 'AR', label: 'Argentina', phone: '54'},
- {code: 'AS', label: 'American Samoa', phone: '1-684'},
- {code: 'AT', label: 'Austria', phone: '44'},
- {code: 'BS', label: 'Bahamas', phone: '43'},
- {code: 'BH', label: 'Bahrain', phone: '48'},
- {code: 'BD', label: 'Bangladesh', phone: '50'},
- {code: 'BB', label: 'Barbados', phone: '52'},
- {code: 'BY', label: 'Belarus', phone: '112'},
- {code: 'BE', label: 'Belgium', phone: '56'},
- {code: 'BZ', label: 'Belize', phone: '84'},
- {code: 'BJ', label: 'Benin', phone: '204'},
- {code: 'BM', label: 'Bermuda', phone: '60'},
- {code: 'BT', label: 'Bhutan', phone: '64'},
- {code: 'BO', label: 'Bolivia', phone: '68'},
- {code: 'BW', label: 'Botswana', phone: '72'},
- {code: 'BR', label: 'Brazil', phone: '76'},
- {code: 'KH', label: 'Cambodia', phone: '116'},
- {code: 'CA', label: 'Canada', phone: '124'},
+ { code: "AD", label: "Andorra", phone: "376" },
+ { code: "AE", label: "United Arab Emirates", phone: "971" },
+ { code: "AF", label: "Afghanistan", phone: "93" },
+ { code: "AG", label: "Antigua and Barbuda", phone: "1-268" },
+ { code: "AI", label: "Anguilla", phone: "1-264" },
+ { code: "AL", label: "Albania", phone: "355" },
+ { code: "AM", label: "Armenia", phone: "374" },
+ { code: "AO", label: "Angola", phone: "244" },
+ { code: "AQ", label: "Antarctica", phone: "672" },
+ { code: "AR", label: "Argentina", phone: "54" },
+ { code: "AS", label: "American Samoa", phone: "1-684" },
+ { code: "AT", label: "Austria", phone: "44" },
+ { code: "BS", label: "Bahamas", phone: "43" },
+ { code: "BH", label: "Bahrain", phone: "48" },
+ { code: "BD", label: "Bangladesh", phone: "50" },
+ { code: "BB", label: "Barbados", phone: "52" },
+ { code: "BY", label: "Belarus", phone: "112" },
+ { code: "BE", label: "Belgium", phone: "56" },
+ { code: "BZ", label: "Belize", phone: "84" },
+ { code: "BJ", label: "Benin", phone: "204" },
+ { code: "BM", label: "Bermuda", phone: "60" },
+ { code: "BT", label: "Bhutan", phone: "64" },
+ { code: "BO", label: "Bolivia", phone: "68" },
+ { code: "BW", label: "Botswana", phone: "72" },
+ { code: "BR", label: "Brazil", phone: "76" },
+ { code: "KH", label: "Cambodia", phone: "116" },
+ { code: "CA", label: "Canada", phone: "124" },
];
interface GroupedItem {
@@ -92,24 +92,24 @@ interface GroupedItem {
label: string;
}
const groupedItems = [
- {group: 'Components', label: 'Alert'},
- {group: 'Components', label: 'Anchor'},
- {group: 'Components', label: 'Button'},
- {group: 'Components', label: 'Card'},
- {group: 'Components', label: 'Heading'},
- {group: 'Components', label: 'List'},
- {group: 'Components', label: 'Modal'},
- {group: 'Components', label: 'Paragraph'},
- {group: 'Primitives', label: 'Box'},
- {group: 'Primitives', label: 'Text'},
- {group: 'Primitives', label: 'Non-modal dialog'},
- {group: 'Layout', label: 'Grid'},
- {label: 'Design Tokens'},
+ { group: "Components", label: "Alert" },
+ { group: "Components", label: "Anchor" },
+ { group: "Components", label: "Button" },
+ { group: "Components", label: "Card" },
+ { group: "Components", label: "Heading" },
+ { group: "Components", label: "List" },
+ { group: "Components", label: "Modal" },
+ { group: "Components", label: "Paragraph" },
+ { group: "Primitives", label: "Box" },
+ { group: "Primitives", label: "Text" },
+ { group: "Primitives", label: "Non-modal dialog" },
+ { group: "Layout", label: "Grid" },
+ { label: "Design Tokens" },
];
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/Combobox/Combobox',
+ title: "Components/Combobox/Combobox",
component: Combobox,
// wraps each story in a div that has a fixed height. This makes it so chromatic takes a large enough screenshot to see the listbox.
decorators: [
@@ -143,12 +143,12 @@ export const DefaultCombobox: StoryFn = () => {
) : null}
)}
- itemToString={(item: IconItems) => (item ? String(item.label) : '')}
+ itemToString={(item: IconItems) => (item ? String(item.label) : "")}
/>
);
};
-DefaultCombobox.storyName = 'Combobox';
+DefaultCombobox.storyName = "Combobox";
export const BottomOfScreen: StoryFn = () => {
return (
@@ -174,17 +174,17 @@ export const BottomOfScreen: StoryFn = () => {
) : null}
)}
- itemToString={(item: IconItems) => (item ? String(item.label) : '')}
+ itemToString={(item: IconItems) => (item ? String(item.label) : "")}
/>
);
};
-BottomOfScreen.storyName = 'Bottom of screen';
+BottomOfScreen.storyName = "Bottom of screen";
BottomOfScreen.parameters = {
- chromatic: {disableSnapshot: true},
+ chromatic: { disableSnapshot: true },
};
-const ItemToString = ({name}: {name: string}): string => name;
+const ItemToString = ({ name }: { name: string }): string => name;
export const VirtualizedCombobox: StoryFn = () => {
const itemsForVirtualCombobox = React.useMemo(() => createLargeArray((index) => (index as number).toString()), []);
@@ -201,16 +201,16 @@ export const VirtualizedCombobox: StoryFn = () => {
);
};
-VirtualizedCombobox.storyName = 'Combobox - Virtualized without option template';
+VirtualizedCombobox.storyName = "Combobox - Virtualized without option template";
export const VirtualizedCombobox1: StoryFn = () => {
const itemsForVirtualCombobox = React.useMemo(
() =>
createLargeArray((index) => ({
name: `Item ${index as number}`,
- subtext: 'Virtualized combobox from Twilio Paste',
+ subtext: "Virtualized combobox from Twilio Paste",
})),
- []
+ [],
);
return (
@@ -219,7 +219,7 @@ export const VirtualizedCombobox1: StoryFn = () => {
initialIsOpen
itemToString={ItemToString}
items={itemsForVirtualCombobox}
- optionTemplate={({name, subtext}: {name: string; subtext: string}): string => `${name} - ${subtext}`}
+ optionTemplate={({ name, subtext }: { name: string; subtext: string }): string => `${name} - ${subtext}`}
labelText="Select a virtualized item"
helpText="This large list is virtualized"
/>
@@ -227,16 +227,16 @@ export const VirtualizedCombobox1: StoryFn = () => {
);
};
-VirtualizedCombobox1.storyName = 'Combobox - Virtualized with string option template';
+VirtualizedCombobox1.storyName = "Combobox - Virtualized with string option template";
export const VirtualizedCombobox2: StoryFn = () => {
const itemsForVirtualCombobox = React.useMemo(
() =>
createLargeArray((index) => ({
name: `Item ${index as number}`,
- subtext: 'Virtualized combobox from Twilio Paste',
+ subtext: "Virtualized combobox from Twilio Paste",
})),
- []
+ [],
);
return (
@@ -244,7 +244,7 @@ export const VirtualizedCombobox2: StoryFn = () => {
initialIsOpen
items={itemsForVirtualCombobox}
itemToString={ItemToString}
- optionTemplate={({name, subtext}) => (
+ optionTemplate={({ name, subtext }) => (
{name}
@@ -259,7 +259,7 @@ export const VirtualizedCombobox2: StoryFn = () => {
);
};
-VirtualizedCombobox2.storyName = 'Combobox - Virtualized with React child option template';
+VirtualizedCombobox2.storyName = "Combobox - Virtualized with React child option template";
export const ComboboxInverse: StoryFn = () => {
return (
@@ -284,14 +284,14 @@ export const ComboboxInverse: StoryFn = () => {
) : null}
)}
- itemToString={(item: IconItems) => (item ? String(item.label) : '')}
+ itemToString={(item: IconItems) => (item ? String(item.label) : "")}
variant="inverse"
/>
);
};
-ComboboxInverse.storyName = 'Combobox - Inverse';
+ComboboxInverse.storyName = "Combobox - Inverse";
export const ComboboxAutocomplete: StoryFn = () => {
const [inputItems, setInputItems] = React.useState(items);
@@ -299,7 +299,7 @@ export const ComboboxAutocomplete: StoryFn = () => {
{
+ onInputValueChange={({ inputValue }) => {
if (inputValue !== undefined) {
setInputItems(items.filter((item) => item.toLowerCase().startsWith(inputValue.toLowerCase())));
}
@@ -310,19 +310,19 @@ export const ComboboxAutocomplete: StoryFn = () => {
);
};
-ComboboxAutocomplete.storyName = 'Combobox - Autocomplete';
+ComboboxAutocomplete.storyName = "Combobox - Autocomplete";
export const ComboboxHiddenLabel: StoryFn = () => {
return ;
};
-ComboboxHiddenLabel.storyName = 'Combobox - Non-visble label';
+ComboboxHiddenLabel.storyName = "Combobox - Non-visble label";
export const ComboboxRequired: StoryFn = () => {
return ;
};
-ComboboxRequired.storyName = 'Combobox - Required';
+ComboboxRequired.storyName = "Combobox - Required";
export const ComboboxRequiredInverse: StoryFn = () => {
return (
@@ -338,13 +338,13 @@ export const ComboboxRequiredInverse: StoryFn = () => {
);
};
-ComboboxRequiredInverse.storyName = 'Combobox - Required inverse';
+ComboboxRequiredInverse.storyName = "Combobox - Required inverse";
export const ComboboxError: StoryFn = () => {
return ;
};
-ComboboxError.storyName = 'Combobox - Error';
+ComboboxError.storyName = "Combobox - Error";
export const ComboboxErrorInverse: StoryFn = () => {
return (
@@ -360,7 +360,7 @@ export const ComboboxErrorInverse: StoryFn = () => {
);
};
-ComboboxErrorInverse.storyName = 'Combobox - Error inverse';
+ComboboxErrorInverse.storyName = "Combobox - Error inverse";
export const ComboboxDisabled: StoryFn = () => {
return (
@@ -374,7 +374,7 @@ export const ComboboxDisabled: StoryFn = () => {
);
};
-ComboboxDisabled.storyName = 'Combobox - Disabled';
+ComboboxDisabled.storyName = "Combobox - Disabled";
export const ComboboxDisabledItems: StoryFn = () => {
return (
@@ -388,7 +388,7 @@ export const ComboboxDisabledItems: StoryFn = () => {
);
};
-ComboboxDisabledItems.storyName = 'Combobox - Disabled Items';
+ComboboxDisabledItems.storyName = "Combobox - Disabled Items";
export const ComboboxDisabledInverse: StoryFn = () => {
return (
@@ -405,7 +405,7 @@ export const ComboboxDisabledInverse: StoryFn = () => {
);
};
-ComboboxDisabledInverse.storyName = 'Combobox - Disabled inverse';
+ComboboxDisabledInverse.storyName = "Combobox - Disabled inverse";
export const ComboboxInsertBeforeAndAfter: StoryFn = () => {
return (
@@ -427,7 +427,7 @@ export const ComboboxInsertBeforeAndAfter: StoryFn = () => {
);
};
-ComboboxInsertBeforeAndAfter.storyName = 'Combobox - Insert before and after';
+ComboboxInsertBeforeAndAfter.storyName = "Combobox - Insert before and after";
export const ComboboxDisabledInsertBeforeAndAfter: StoryFn = () => {
return (
@@ -450,7 +450,7 @@ export const ComboboxDisabledInsertBeforeAndAfter: StoryFn = () => {
);
};
-ComboboxDisabledInsertBeforeAndAfter.storyName = 'Combobox - Disabled insert before and after';
+ComboboxDisabledInsertBeforeAndAfter.storyName = "Combobox - Disabled insert before and after";
export const ComboboxInsertBeforeAndAfterInverse: StoryFn = () => {
return (
@@ -475,7 +475,7 @@ export const ComboboxInsertBeforeAndAfterInverse: StoryFn = () => {
);
};
-ComboboxInsertBeforeAndAfterInverse.storyName = 'Combobox - Insert before and after inverse';
+ComboboxInsertBeforeAndAfterInverse.storyName = "Combobox - Insert before and after inverse";
export const ComboboxDisabledInsertBeforeAndAfterInverse: StoryFn = () => {
return (
@@ -501,7 +501,7 @@ export const ComboboxDisabledInsertBeforeAndAfterInverse: StoryFn = () => {
);
};
-ComboboxDisabledInsertBeforeAndAfterInverse.storyName = 'Combobox - Disabled insert before and after inverse';
+ComboboxDisabledInsertBeforeAndAfterInverse.storyName = "Combobox - Disabled insert before and after inverse";
export const ComboboxObject: StoryFn = () => {
const [inputItems, setInputItems] = React.useState(objectItems);
@@ -516,20 +516,20 @@ export const ComboboxObject: StoryFn = () => {
{item.code} | {item.label} | {item.phone}
)}
- onInputValueChange={({inputValue}) => {
+ onInputValueChange={({ inputValue }) => {
if (inputValue !== undefined) {
setInputItems(
- _.filter(objectItems, (item: ObjectItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase()))
+ _.filter(objectItems, (item: ObjectItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase())),
);
}
}}
- itemToString={(item: ObjectItem) => (item ? item.label : '')}
+ itemToString={(item: ObjectItem) => (item ? item.label : "")}
disabledItems={objectItems.slice(2, 5)}
/>
);
};
-ComboboxObject.storyName = 'Combobox - Object';
+ComboboxObject.storyName = "Combobox - Object";
export const ComboboxOverflowLongValue: StoryFn = () => {
const [inputItems, setInputItems] = React.useState(items);
@@ -540,7 +540,7 @@ export const ComboboxOverflowLongValue: StoryFn = () => {
helpText="This is the help text"
labelText="Choose a component:"
initialSelectedItem={inputItems[5]}
- onInputValueChange={({inputValue}) => {
+ onInputValueChange={({ inputValue }) => {
if (inputValue !== undefined) {
setInputItems(items.filter((item) => item.toLowerCase().startsWith(inputValue.toLowerCase())));
}
@@ -551,11 +551,11 @@ export const ComboboxOverflowLongValue: StoryFn = () => {
);
};
-ComboboxOverflowLongValue.storyName = 'Combobox - overflow long value';
+ComboboxOverflowLongValue.storyName = "Combobox - overflow long value";
export const ComboboxControlled: StoryFn = () => {
- const [value, setValue] = React.useState('United Arab Emirates');
- const [selectedItem, setSelectedItem] = React.useState({code: 'AE', label: 'United Arab Emirates', phone: '971'});
+ const [value, setValue] = React.useState("United Arab Emirates");
+ const [selectedItem, setSelectedItem] = React.useState({ code: "AE", label: "United Arab Emirates", phone: "971" });
const [inputItems, setInputItems] = React.useState(objectItems);
return (
<>
@@ -573,20 +573,22 @@ export const ComboboxControlled: StoryFn = () => {
optionTemplate={(item: ObjectItem) => {
return (
- {item.code} | {item.label} | {item.phone}{' '}
- {item && selectedItem && item.label === selectedItem.label ? '✅' : null}
+ {item.code} | {item.label} | {item.phone}{" "}
+ {item && selectedItem && item.label === selectedItem.label ? "✅" : null}
);
}}
- onInputValueChange={({inputValue}) => {
+ onInputValueChange={({ inputValue }) => {
if (inputValue !== undefined) {
setInputItems(
- _.filter(objectItems, (item: ObjectItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase()))
+ _.filter(objectItems, (item: ObjectItem) =>
+ item.label.toLowerCase().startsWith(inputValue.toLowerCase()),
+ ),
);
setValue(inputValue);
}
}}
- itemToString={(item: ObjectItem) => (item ? item.label : '')}
+ itemToString={(item: ObjectItem) => (item ? item.label : "")}
selectedItem={selectedItem}
onSelectedItemChange={(changes) => {
setSelectedItem(changes.selectedItem);
@@ -597,29 +599,29 @@ export const ComboboxControlled: StoryFn = () => {
);
};
-ComboboxControlled.storyName = 'Combobox - Controlled';
+ComboboxControlled.storyName = "Combobox - Controlled";
export const ComboboxControlledUsingState: StoryFn = () => {
- const [value, setValue] = React.useState('United Arab Emirates');
+ const [value, setValue] = React.useState("United Arab Emirates");
const [selectedItem, setSelectedItem] = React.useState
({
- code: 'AE',
- label: 'United Arab Emirates',
- phone: '971',
+ code: "AE",
+ label: "United Arab Emirates",
+ phone: "971",
} as ObjectItem);
const [inputItems, setInputItems] = React.useState(objectItems as ObjectItem[]);
- const {reset, ...state} = useCombobox({
+ const { reset, ...state } = useCombobox({
initialInputValue: value,
items: inputItems,
- itemToString: (item) => (item ? item.label : ''),
+ itemToString: (item) => (item ? item.label : ""),
onSelectedItemChange: (changes) => {
if (changes.selectedItem != null) {
setSelectedItem(changes.selectedItem);
}
},
- onInputValueChange: ({inputValue}) => {
+ onInputValueChange: ({ inputValue }) => {
if (inputValue !== undefined) {
setInputItems(
- _.filter(objectItems, (item: ObjectItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase()))
+ _.filter(objectItems, (item: ObjectItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase())),
);
setValue(inputValue);
}
@@ -634,16 +636,16 @@ export const ComboboxControlledUsingState: StoryFn = () => {
Selected item state: {JSON.stringify(selectedItem)}
(item ? item.label : '')}
+ itemToString={(item) => (item ? item.label : "")}
labelText="Choose a country:"
helpText="This is the help text"
optionTemplate={(item: ObjectItem) => (
- {item.code} | {item.label} | {item.phone}{' '}
- {item && selectedItem && item.label === selectedItem.label ? '✅' : null}
+ {item.code} | {item.label} | {item.phone}{" "}
+ {item && selectedItem && item.label === selectedItem.label ? "✅" : null}
)}
insertAfter={
@@ -651,12 +653,12 @@ export const ComboboxControlledUsingState: StoryFn = () => {
variant="link"
size="reset"
onClick={() => {
- setValue('');
+ setValue("");
setSelectedItem({} as ObjectItem);
reset();
}}
>
- {value !== '' ? (
+ {value !== "" ? (
) : (
@@ -668,7 +670,7 @@ export const ComboboxControlledUsingState: StoryFn = () => {
);
};
-ComboboxControlledUsingState.storyName = 'Combobox - Controlled using state';
+ComboboxControlledUsingState.storyName = "Combobox - Controlled using state";
export const ComboboxOpen: StoryFn = () => {
return (
@@ -677,12 +679,12 @@ export const ComboboxOpen: StoryFn = () => {
labelText="Choose a country:"
initialIsOpen
optionTemplate={(item: ObjectItem) => {item.label}
}
- itemToString={(item: ObjectItem) => (item ? item.label : '')}
+ itemToString={(item: ObjectItem) => (item ? item.label : "")}
/>
);
};
-ComboboxOpen.storyName = 'Combobox - Open';
+ComboboxOpen.storyName = "Combobox - Open";
export const ComboboxOptionGroups: StoryFn = () => {
return (
@@ -692,12 +694,12 @@ export const ComboboxOptionGroups: StoryFn = () => {
labelText="Choose a component:"
helpText="This is group"
optionTemplate={(item: GroupedItem) => {item.label}
}
- itemToString={(item: GroupedItem) => (item ? item.label : '')}
+ itemToString={(item: GroupedItem) => (item ? item.label : "")}
/>
);
};
-ComboboxOptionGroups.storyName = 'Combobox - Option groups';
+ComboboxOptionGroups.storyName = "Combobox - Option groups";
export const ComboboxOptionGroupsOpen: StoryFn = () => {
return (
@@ -709,7 +711,7 @@ export const ComboboxOptionGroupsOpen: StoryFn = () => {
initialIsOpen
optionTemplate={(item: GroupedItem) => {item.label}
}
groupLabelTemplate={(groupName: string) => {
- if (groupName === 'Components') {
+ if (groupName === "Components") {
return (
@@ -721,12 +723,12 @@ export const ComboboxOptionGroupsOpen: StoryFn = () => {
}
return groupName;
}}
- itemToString={(item: GroupedItem) => (item ? item.label : '')}
+ itemToString={(item: GroupedItem) => (item ? item.label : "")}
/>
);
};
-ComboboxOptionGroupsOpen.storyName = 'Combobox - Option groups open';
+ComboboxOptionGroupsOpen.storyName = "Combobox - Option groups open";
export const ComboboxOptionGroupsAutocomplete: StoryFn = () => {
const [inputItems, setInputItems] = React.useState(groupedItems);
@@ -738,22 +740,24 @@ export const ComboboxOptionGroupsAutocomplete: StoryFn = () => {
labelText="Choose a component:"
helpText="This is the help text"
optionTemplate={(item: GroupedItem) => {item.label}
}
- onInputValueChange={({inputValue}) => {
+ onInputValueChange={({ inputValue }) => {
if (inputValue !== undefined) {
setInputItems(
- _.filter(groupedItems, (item: GroupedItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase()))
+ _.filter(groupedItems, (item: GroupedItem) =>
+ item.label.toLowerCase().startsWith(inputValue.toLowerCase()),
+ ),
);
}
}}
- itemToString={(item: GroupedItem) => (item ? item.label : '')}
+ itemToString={(item: GroupedItem) => (item ? item.label : "")}
/>
);
};
-ComboboxOptionGroupsAutocomplete.storyName = 'Combobox - Option groups autocomplete';
+ComboboxOptionGroupsAutocomplete.storyName = "Combobox - Option groups autocomplete";
export const ComboboxListboxZIndex: StoryFn = () => {
- const [selectValue, setSelectValue] = React.useState('');
+ const [selectValue, setSelectValue] = React.useState("");
const selectID = useUID();
return (
<>
@@ -778,7 +782,7 @@ export const ComboboxListboxZIndex: StoryFn = () => {
) : null}
)}
- itemToString={(item: IconItems) => (item ? String(item.label) : '')}
+ itemToString={(item: IconItems) => (item ? String(item.label) : "")}
initialIsOpen
/>
@@ -795,7 +799,7 @@ export const ComboboxListboxZIndex: StoryFn = () => {
);
};
-ComboboxListboxZIndex.storyName = 'Combobox - Listbox zIndex';
+ComboboxListboxZIndex.storyName = "Combobox - Listbox zIndex";
const SampleEmptyState: React.FC = () => (
<>
@@ -814,7 +818,7 @@ export const ComboboxEmptyState: StoryFn = () => {
autocomplete
items={inputItems}
inputValue="test123"
- onInputValueChange={({inputValue}) => {
+ onInputValueChange={({ inputValue }) => {
if (inputValue !== undefined) {
setInputItems(items.filter((item) => item.toLowerCase().startsWith(inputValue.toLowerCase())));
}
@@ -827,7 +831,7 @@ export const ComboboxEmptyState: StoryFn = () => {
);
};
-ComboboxEmptyState.storyName = 'Combobox - EmptyState';
+ComboboxEmptyState.storyName = "Combobox - EmptyState";
export const ComboboxInModal: StoryFn = () => {
const [modalIsOpen, setModalIsOpen] = React.useState(true);
@@ -868,7 +872,7 @@ export const ComboboxInModal: StoryFn = () => {
) : null}
)}
- itemToString={(item: IconItems) => (item ? String(item.label) : '')}
+ itemToString={(item: IconItems) => (item ? String(item.label) : "")}
/>
diff --git a/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx b/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx
index 342405c511..7941947990 100644
--- a/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx
+++ b/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
-import type {StoryFn} from '@storybook/react';
-import {Box} from '@twilio-paste/box';
-import {Label} from '@twilio-paste/label';
-import {useUID} from '@twilio-paste/uid-library';
+import type { StoryFn } from "@storybook/react";
+import { Box } from "@twilio-paste/box";
+import { Label } from "@twilio-paste/label";
+import { useUID } from "@twilio-paste/uid-library";
+import * as React from "react";
-import {GrowingInput} from '../src/multiselect/GrowingInput';
+import { GrowingInput } from "../src/multiselect/GrowingInput";
export const GrowingInputDemo: StoryFn = () => {
const id = useUID();
@@ -21,14 +21,14 @@ export const GrowingInputDemo: StoryFn = () => {
);
};
-GrowingInputDemo.storyName = 'GrowingInput';
+GrowingInputDemo.storyName = "GrowingInput";
GrowingInputDemo.parameters = {
// Nothing to VRT. Story for developer experience
- chromatic: {disableSnapshot: true},
+ chromatic: { disableSnapshot: true },
};
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/Combobox',
+ title: "Components/Combobox",
component: GrowingInputDemo,
};
diff --git a/packages/paste-core/components/combobox/stories/MultiselectCombobox-customization.stories.tsx b/packages/paste-core/components/combobox/stories/MultiselectCombobox-customization.stories.tsx
index 8592b7fcb3..b112e2496e 100644
--- a/packages/paste-core/components/combobox/stories/MultiselectCombobox-customization.stories.tsx
+++ b/packages/paste-core/components/combobox/stories/MultiselectCombobox-customization.stories.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
-import type {StoryFn} from '@storybook/react';
-import {Stack} from '@twilio-paste/stack';
-import {CustomizationProvider} from '@twilio-paste/customization';
-import {Card} from '@twilio-paste/card';
-import {Text} from '@twilio-paste/text';
-import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon';
-import {useTheme} from '@twilio-paste/theme';
+import type { StoryFn } from "@storybook/react";
+import { Card } from "@twilio-paste/card";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import { InformationIcon } from "@twilio-paste/icons/esm/InformationIcon";
+import { Stack } from "@twilio-paste/stack";
+import { Text } from "@twilio-paste/text";
+import { useTheme } from "@twilio-paste/theme";
+import * as React from "react";
-import {MultiselectCombobox} from '../src';
+import { MultiselectCombobox } from "../src";
-const items = ['a', 'b', 'c'];
+const items = ["a", "b", "c"];
const initialSelectedItems = [items[0], items[1]];
interface GroupedItem {
@@ -18,17 +18,17 @@ interface GroupedItem {
}
const groupedItems = [
- {letter: 'a', number: 1},
- {letter: 'a', number: 2},
- {letter: 'b', number: 3},
- {letter: 'b', number: 4},
- {letter: 'b', number: 5},
- {letter: 'c', number: 6},
- {letter: 'd', number: 7},
+ { letter: "a", number: 1 },
+ { letter: "a", number: 2 },
+ { letter: "b", number: 3 },
+ { letter: "b", number: 4 },
+ { letter: "b", number: 5 },
+ { letter: "c", number: 6 },
+ { letter: "d", number: 7 },
];
const initialSelectedGroupedItems = [groupedItems[0], groupedItems[1], groupedItems[2]];
-const ShowCustomization: React.FC> = ({
+const ShowCustomization: React.FC> = ({
isTestEnvironment,
children,
}): React.ReactElement => {
@@ -42,25 +42,25 @@ const ShowCustomization: React.FC
@@ -72,31 +72,31 @@ const ShowCustomization: React.FC
- {React.cloneElement(children as React.ReactElement, {element: 'FOO'})}
+ {React.cloneElement(children as React.ReactElement, { element: "FOO" })}
);
};
-export const CustomizedCombobox: StoryFn = (_args, {parameters: {isTestEnvironment}}) => (
+export const CustomizedCombobox: StoryFn = (_args, { parameters: { isTestEnvironment } }) => (
);
-CustomizedCombobox.storyName = 'MultiselectCombobox - Default';
+CustomizedCombobox.storyName = "MultiselectCombobox - Default";
-export const CustomizedComboboxGroups: StoryFn = (_args, {parameters: {isTestEnvironment}}) => (
+export const CustomizedComboboxGroups: StoryFn = (_args, { parameters: { isTestEnvironment } }) => (
{item.number}
}
- itemToString={(item: GroupedItem) => (item ? `${item.number}` : '')}
+ itemToString={(item: GroupedItem) => (item ? `${item.number}` : "")}
initialSelectedItems={initialSelectedGroupedItems}
/>
);
-CustomizedComboboxGroups.storyName = 'MultiselectCombobox - With groups';
+CustomizedComboboxGroups.storyName = "MultiselectCombobox - With groups";
-export const CustomizedComboboxBeforeAndAfter: StoryFn = (_args, {parameters: {isTestEnvironment}}) => (
+export const CustomizedComboboxBeforeAndAfter: StoryFn = (_args, { parameters: { isTestEnvironment } }) => (
{item.number}
}
- itemToString={(item: GroupedItem) => (item ? `${item.number}` : '')}
+ itemToString={(item: GroupedItem) => (item ? `${item.number}` : "")}
insertBefore={Z}
insertAfter={}
initialSelectedItems={initialSelectedGroupedItems}
/>
);
-CustomizedComboboxBeforeAndAfter.storyName = 'MultiselectCombobox - With prefix and suffix';
+CustomizedComboboxBeforeAndAfter.storyName = "MultiselectCombobox - With prefix and suffix";
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/Combobox/Customization - MultiselectCombobox',
+ title: "Components/Combobox/Customization - MultiselectCombobox",
component: CustomizedCombobox,
parameters: {
a11y: {
diff --git a/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx b/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx
index d3a791c20d..1c9eff5afc 100644
--- a/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx
+++ b/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx
@@ -1,36 +1,36 @@
-import * as React from 'react';
-import type {Meta, StoryFn, StoryContext} from '@storybook/react';
-import {Box} from '@twilio-paste/box';
-import {Text} from '@twilio-paste/text';
-import {Anchor} from '@twilio-paste/anchor';
-import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';
-import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon';
-import {AttachIcon} from '@twilio-paste/icons/esm/AttachIcon';
-import filter from 'lodash/filter';
-import {Form} from '@twilio-paste/form';
-import {Modal, ModalBody, ModalHeader, ModalHeading} from '@twilio-paste/modal';
-import {Button} from '@twilio-paste/button';
-import {useUID} from '@twilio-paste/uid-library';
-
-import {MultiselectCombobox, useMultiselectCombobox} from '../src';
+import type { Meta, StoryContext, StoryFn } from "@storybook/react";
+import { Anchor } from "@twilio-paste/anchor";
+import { Box } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { Form } from "@twilio-paste/form";
+import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon";
+import { InformationIcon } from "@twilio-paste/icons/esm/InformationIcon";
+import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object";
+import { Modal, ModalBody, ModalHeader, ModalHeading } from "@twilio-paste/modal";
+import { Text } from "@twilio-paste/text";
+import { useUID } from "@twilio-paste/uid-library";
+import filter from "lodash/filter";
+import * as React from "react";
+
+import { MultiselectCombobox, useMultiselectCombobox } from "../src";
function createLargeArray>(
- template: (index?: number | undefined) => TemplateResult
+ template: (index?: number | undefined) => TemplateResult,
): TemplateResult[] {
// eslint-disable-next-line unicorn/prefer-spread
return Array.from(new Array(1000), (_empty, index) => template(index));
}
const items = [
- 'Alert',
- 'Anchor',
- 'Button',
- 'Card',
- 'Heading',
- 'A component with a really really really really really really really really long name',
- 'List',
- 'Modal',
- 'Paragraph',
+ "Alert",
+ "Anchor",
+ "Button",
+ "Card",
+ "Heading",
+ "A component with a really really really really really really really really long name",
+ "List",
+ "Modal",
+ "Paragraph",
];
function getFilteredItems(inputValue: string): string[] {
@@ -45,7 +45,7 @@ function getFilteredItems(inputValue: string): string[] {
* Basic
*/
export const MultiselectComboboxBasic = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
return (
@@ -54,7 +54,7 @@ export const MultiselectComboboxBasic = (): React.ReactNode => {
selectedItemsLabelText="Selected Paste components"
helpText="Paste components are the building blocks of your product UI."
items={filteredItems}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -64,10 +64,10 @@ export const MultiselectComboboxBasic = (): React.ReactNode => {
/>
);
};
-MultiselectComboboxBasic.storyName = 'Basic';
+MultiselectComboboxBasic.storyName = "Basic";
export const BottomOfScreen = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
return (
@@ -78,7 +78,7 @@ export const BottomOfScreen = (): React.ReactNode => {
selectedItemsLabelText="Selected Paste components"
helpText="Paste components are the building blocks of your product UI."
items={filteredItems}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -89,16 +89,16 @@ export const BottomOfScreen = (): React.ReactNode => {
);
};
-BottomOfScreen.storyName = 'Bottom of screen';
+BottomOfScreen.storyName = "Bottom of screen";
BottomOfScreen.parameters = {
- chromatic: {disableSnapshot: true},
+ chromatic: { disableSnapshot: true },
};
/*
* Basic - Inverse
*/
export const MultiselectComboboxInverse = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
return (
@@ -109,7 +109,7 @@ export const MultiselectComboboxInverse = (): React.ReactNode => {
selectedItemsLabelText="Selected Paste components"
helpText="Paste components are the building blocks of your product UI."
items={filteredItems}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -120,13 +120,13 @@ export const MultiselectComboboxInverse = (): React.ReactNode => {
);
};
-MultiselectComboboxInverse.storyName = 'variant Inverse';
+MultiselectComboboxInverse.storyName = "variant Inverse";
/*
* Basic - Disabled
*/
export const MultiselectComboboxDisabled = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
return (
@@ -137,7 +137,7 @@ export const MultiselectComboboxDisabled = (): React.ReactNode => {
selectedItemsLabelText="Selected Paste components"
helpText="Paste components are the building blocks of your product UI."
items={filteredItems}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -147,13 +147,13 @@ export const MultiselectComboboxDisabled = (): React.ReactNode => {
/>
);
};
-MultiselectComboboxDisabled.storyName = 'Basic - Disabled';
+MultiselectComboboxDisabled.storyName = "Basic - Disabled";
/*
* Basic - Disabled, Inverse, Required
*/
export const MultiselectComboboxDisabledInverseRequired = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
return (
@@ -166,7 +166,7 @@ export const MultiselectComboboxDisabledInverseRequired = (): React.ReactNode =>
selectedItemsLabelText="Selected Paste components"
helpText="Paste components are the building blocks of your product UI."
items={filteredItems}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -177,13 +177,13 @@ export const MultiselectComboboxDisabledInverseRequired = (): React.ReactNode =>
);
};
-MultiselectComboboxDisabledInverseRequired.storyName = 'Basic - Disabled, Inverse, Required';
+MultiselectComboboxDisabledInverseRequired.storyName = "Basic - Disabled, Inverse, Required";
/*
* Basic - Error
*/
export const MultiselectComboboxError = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
return (
@@ -193,9 +193,9 @@ export const MultiselectComboboxError = (): React.ReactNode => {
selectedItemsLabelText="Selected Paste components"
helpText="Paste components are the building blocks of your product UI."
items={filteredItems}
- initialSelectedItems={['Alert', 'Anchor']}
+ initialSelectedItems={["Alert", "Anchor"]}
initialIsOpen
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -205,13 +205,13 @@ export const MultiselectComboboxError = (): React.ReactNode => {
/>
);
};
-MultiselectComboboxError.storyName = 'Basic - Error';
+MultiselectComboboxError.storyName = "Basic - Error";
/*
* Basic - Required
*/
export const MultiselectComboboxRequired = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
return (
@@ -219,7 +219,7 @@ export const MultiselectComboboxRequired = (): React.ReactNode => {
onSubmit={(event) => {
event.preventDefault();
// eslint-disable-next-line no-console
- console.log('The form was submit');
+ console.log("The form was submit");
}}
>
{
selectedItemsLabelText="Selected Paste components"
helpText="Paste components are the building blocks of your product UI."
items={filteredItems}
- initialSelectedItems={['Alert', 'Anchor']}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ initialSelectedItems={["Alert", "Anchor"]}
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -240,13 +240,13 @@ export const MultiselectComboboxRequired = (): React.ReactNode => {
);
};
-MultiselectComboboxRequired.storyName = 'Basic - Required';
+MultiselectComboboxRequired.storyName = "Basic - Required";
/*
* initialSelectedItems
*/
export const MultiselectComboboxInitialSelectedItems = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
return (
@@ -255,8 +255,8 @@ export const MultiselectComboboxInitialSelectedItems = (): React.ReactNode => {
selectedItemsLabelText="Selected Paste components"
helpText="Paste components are the building blocks of your product UI."
items={filteredItems}
- initialSelectedItems={['Alert', 'Anchor']}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ initialSelectedItems={["Alert", "Anchor"]}
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -266,7 +266,7 @@ export const MultiselectComboboxInitialSelectedItems = (): React.ReactNode => {
/>
);
};
-MultiselectComboboxInitialSelectedItems.storyName = 'with initialSelectedItems';
+MultiselectComboboxInitialSelectedItems.storyName = "with initialSelectedItems";
/*
* insertBefore and insertAfter
@@ -293,7 +293,7 @@ function getFilteredBooks(inputValue: string): Book[] {
}
export const MultiselectComboboxBeforeAfter = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredBooks(inputValue), [inputValue]);
return (
@@ -302,7 +302,7 @@ export const MultiselectComboboxBeforeAfter = (): React.ReactNode => {
selectedItemsLabelText="Selected books:"
helpText="Reading books can be good for your mental health."
items={filteredItems}
- itemToString={(item: Book) => (item ? `${item.title} - ${item.author}` : '')}
+ itemToString={(item: Book) => (item ? `${item.title} - ${item.author}` : "")}
initialSelectedItems={filteredItems.slice(20, 50)}
insertBefore={
@@ -314,7 +314,7 @@ export const MultiselectComboboxBeforeAfter = (): React.ReactNode => {
}
- optionTemplate={({title, author}: Book) => (
+ optionTemplate={({ title, author }: Book) => (
{title}
@@ -322,7 +322,7 @@ export const MultiselectComboboxBeforeAfter = (): React.ReactNode => {
)}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -332,13 +332,13 @@ export const MultiselectComboboxBeforeAfter = (): React.ReactNode => {
/>
);
};
-MultiselectComboboxBeforeAfter.storyName = 'with insertBefore and insertAfter';
+MultiselectComboboxBeforeAfter.storyName = "with insertBefore and insertAfter";
/*
* maxHeight
*/
export const MultiselectComboboxMaxHeight = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredBooks(inputValue), [inputValue]);
return (
@@ -347,7 +347,7 @@ export const MultiselectComboboxMaxHeight = (): React.ReactNode => {
selectedItemsLabelText="Selected books:"
helpText="Reading books can be good for your mental health."
items={filteredItems}
- itemToString={(item: Book) => (item ? `${item.title} - ${item.author}` : '')}
+ itemToString={(item: Book) => (item ? `${item.title} - ${item.author}` : "")}
initialSelectedItems={filteredItems.slice(20, 80)}
maxHeight="100px"
insertBefore={
@@ -360,7 +360,7 @@ export const MultiselectComboboxMaxHeight = (): React.ReactNode => {
}
- optionTemplate={({title, author}: Book) => (
+ optionTemplate={({ title, author }: Book) => (
{title}
@@ -368,7 +368,7 @@ export const MultiselectComboboxMaxHeight = (): React.ReactNode => {
)}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -378,13 +378,13 @@ export const MultiselectComboboxMaxHeight = (): React.ReactNode => {
/>
);
};
-MultiselectComboboxMaxHeight.storyName = 'with maxHeight';
+MultiselectComboboxMaxHeight.storyName = "with maxHeight";
/*
* optionTemplate
*/
export const MultiselectComboboxOptionTemplate = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredBooks(inputValue), [inputValue]);
return (
@@ -393,8 +393,8 @@ export const MultiselectComboboxOptionTemplate = (): React.ReactNode => {
selectedItemsLabelText="Selected books:"
helpText="Reading books can be good for your mental health."
items={filteredItems}
- itemToString={(item: Book) => (item ? `${item.title} - ${item.author}` : '')}
- optionTemplate={({title, author}: Book) => (
+ itemToString={(item: Book) => (item ? `${item.title} - ${item.author}` : "")}
+ optionTemplate={({ title, author }: Book) => (
{title}
@@ -402,7 +402,7 @@ export const MultiselectComboboxOptionTemplate = (): React.ReactNode => {
)}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -412,13 +412,13 @@ export const MultiselectComboboxOptionTemplate = (): React.ReactNode => {
/>
);
};
-MultiselectComboboxOptionTemplate.storyName = 'with optionTemplate';
+MultiselectComboboxOptionTemplate.storyName = "with optionTemplate";
/*
* optionTemplate - disabled options
*/
export const MultiselectComboboxOptionTemplatedisabled = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredBooks(inputValue), [inputValue]);
return (
@@ -427,8 +427,8 @@ export const MultiselectComboboxOptionTemplatedisabled = (): React.ReactNode =>
selectedItemsLabelText="Selected books:"
helpText="Reading books can be good for your mental health."
items={filteredItems}
- itemToString={(item: Book) => (item ? `${item.title} - ${item.author}` : '')}
- optionTemplate={({title, author}: Book) => (
+ itemToString={(item: Book) => (item ? `${item.title} - ${item.author}` : "")}
+ optionTemplate={({ title, author }: Book) => (
{title}
@@ -438,7 +438,7 @@ export const MultiselectComboboxOptionTemplatedisabled = (): React.ReactNode =>
)}
disabledItems={filteredItems.slice(2, 8)}
initialIsOpen
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -448,7 +448,7 @@ export const MultiselectComboboxOptionTemplatedisabled = (): React.ReactNode =>
/>
);
};
-MultiselectComboboxOptionTemplatedisabled.storyName = 'with optionTemplate - disabled options';
+MultiselectComboboxOptionTemplatedisabled.storyName = "with optionTemplate - disabled options";
/*
* groupedItemsBy
@@ -458,19 +458,19 @@ interface GroupedItem {
label: string;
}
const groupedItems = [
- {group: 'Components', label: 'Alert'},
- {group: 'Components', label: 'Anchor'},
- {group: 'Components', label: 'Button'},
- {group: 'Components', label: 'Card'},
- {group: 'Components', label: 'Heading'},
- {group: 'Components', label: 'List'},
- {group: 'Components', label: 'Modal'},
- {group: 'Components', label: 'Paragraph'},
- {group: 'Primitives', label: 'Box'},
- {group: 'Primitives', label: 'Text'},
- {group: 'Primitives', label: 'Non-modal dialog'},
- {group: 'Layout', label: 'Grid'},
- {label: 'Design Tokens'},
+ { group: "Components", label: "Alert" },
+ { group: "Components", label: "Anchor" },
+ { group: "Components", label: "Button" },
+ { group: "Components", label: "Card" },
+ { group: "Components", label: "Heading" },
+ { group: "Components", label: "List" },
+ { group: "Components", label: "Modal" },
+ { group: "Components", label: "Paragraph" },
+ { group: "Primitives", label: "Box" },
+ { group: "Primitives", label: "Text" },
+ { group: "Primitives", label: "Non-modal dialog" },
+ { group: "Layout", label: "Grid" },
+ { label: "Design Tokens" },
];
function getFilteredGroupedItems(inputValue: string): GroupedItem[] {
@@ -479,15 +479,15 @@ function getFilteredGroupedItems(inputValue: string): GroupedItem[] {
}
export const MultiselectComboboxOptionGroups = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredGroupedItems(inputValue), [inputValue]);
return (
(item ? item.label : '')}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ itemToString={(item: GroupedItem) => (item ? item.label : "")}
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -500,7 +500,7 @@ export const MultiselectComboboxOptionGroups = (): React.ReactNode => {
initialIsOpen
optionTemplate={(item: GroupedItem) => {item.label}
}
groupLabelTemplate={(groupName: string) => {
- if (groupName === 'Components') {
+ if (groupName === "Components") {
return (
@@ -516,7 +516,7 @@ export const MultiselectComboboxOptionGroups = (): React.ReactNode => {
);
};
-MultiselectComboboxOptionGroups.storyName = 'with groups';
+MultiselectComboboxOptionGroups.storyName = "with groups";
const SampleEmptyState: React.FC = () => (
<>
@@ -528,7 +528,7 @@ const SampleEmptyState: React.FC = () => (
);
export const MultiselectComboboxEmptyState = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('test123');
+ const [inputValue, setInputValue] = React.useState("test123");
const filteredItems = React.useMemo(() => getFilteredGroupedItems(inputValue), [inputValue]);
return (
@@ -537,8 +537,8 @@ export const MultiselectComboboxEmptyState = (): React.ReactNode => {
items={filteredItems}
emptyState={SampleEmptyState}
inputValue={inputValue}
- itemToString={(item: GroupedItem) => (item ? item.label : '')}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ itemToString={(item: GroupedItem) => (item ? item.label : "")}
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -553,7 +553,7 @@ export const MultiselectComboboxEmptyState = (): React.ReactNode => {
return {item.label}
;
}}
groupLabelTemplate={(groupName: string) => {
- if (groupName === 'Components') {
+ if (groupName === "Components") {
return (
@@ -569,10 +569,10 @@ export const MultiselectComboboxEmptyState = (): React.ReactNode => {
);
};
-MultiselectComboboxEmptyState.storyName = 'with empty state';
+MultiselectComboboxEmptyState.storyName = "with empty state";
export const MultiselectComboboxStateHook = (): React.ReactNode => {
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredGroupedItems(inputValue), [inputValue]);
const onSelectedItemsChange = React.useCallback((selectedItems) => {
@@ -596,8 +596,8 @@ export const MultiselectComboboxStateHook = (): React.ReactNode => {
items={filteredItems}
emptyState={SampleEmptyState}
inputValue={inputValue}
- itemToString={(item: GroupedItem) => (item ? item.label : '')}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ itemToString={(item: GroupedItem) => (item ? item.label : "")}
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={onSelectedItemsChange}
@@ -609,7 +609,7 @@ export const MultiselectComboboxStateHook = (): React.ReactNode => {
return {item.label}
;
}}
groupLabelTemplate={(groupName: string) => {
- if (groupName === 'Components') {
+ if (groupName === "Components") {
return (
@@ -626,13 +626,13 @@ export const MultiselectComboboxStateHook = (): React.ReactNode => {
);
};
-MultiselectComboboxStateHook.storyName = 'with state hook';
+MultiselectComboboxStateHook.storyName = "with state hook";
export const MultiselectComboboxInModal: StoryFn = () => {
const [modalIsOpen, setModalIsOpen] = React.useState(true);
const handleOpen = (): void => setModalIsOpen(true);
const handleClose = (): void => setModalIsOpen(false);
- const [inputValue, setInputValue] = React.useState('');
+ const [inputValue, setInputValue] = React.useState("");
const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
const modalHeadingId = useUID();
@@ -653,7 +653,7 @@ export const MultiselectComboboxInModal: StoryFn = () => {
selectedItemsLabelText="Selected Paste components"
helpText="Paste components are the building blocks of your product UI."
items={filteredItems}
- onInputValueChange={({inputValue: newInputValue = ''}) => {
+ onInputValueChange={({ inputValue: newInputValue = "" }) => {
setInputValue(newInputValue);
}}
onSelectedItemsChange={(selectedItems) => {
@@ -677,7 +677,7 @@ MultiselectComboboxInModal.parameters = {
// eslint-disable-next-line import/no-default-export
export default {
- title: 'Components/Combobox/MultiselectCombobox',
+ title: "Components/Combobox/MultiselectCombobox",
// wraps each story in a div that has a fixed height. This makes it so chromatic takes a large enough screenshot to see the listbox.
decorators: [
(Story: StoryFn, context: StoryContext): React.ReactNode => (
diff --git a/packages/paste-core/components/data-grid/__tests__/cell-management.spec.ts b/packages/paste-core/components/data-grid/__tests__/cell-management.spec.ts
index 864f22c0dc..ed2e54680e 100644
--- a/packages/paste-core/components/data-grid/__tests__/cell-management.spec.ts
+++ b/packages/paste-core/components/data-grid/__tests__/cell-management.spec.ts
@@ -1,15 +1,15 @@
import {
- isCell,
+ delayedSetFocusable,
getClosestCellFrom,
+ isCell,
updateTabIndexForActionable,
- delayedSetFocusable,
-} from '../src/utils/cell-management';
+} from "../src/utils/cell-management";
-describe('cell-management utils', () => {
- it('update tabIndex for actionable correctly', () => {
- const td = document.createElement('td');
- const input = document.createElement('input');
- const select = document.createElement('select');
+describe("cell-management utils", () => {
+ it("update tabIndex for actionable correctly", () => {
+ const td = document.createElement("td");
+ const input = document.createElement("input");
+ const select = document.createElement("select");
td.append(input);
td.append(select);
@@ -29,8 +29,8 @@ describe('cell-management utils', () => {
expect(select.tabIndex).toBe(-1);
});
- it('delayedSetFocus fires after a delay', () => {
- const input = document.createElement('input');
+ it("delayedSetFocus fires after a delay", () => {
+ const input = document.createElement("input");
input.tabIndex = -1;
expect(input.tabIndex).toBe(-1);
@@ -44,11 +44,11 @@ describe('cell-management utils', () => {
expect(input.tabIndex).toBe(0);
});
- it('isCell correctly detects DataGrid cells', () => {
- const td = document.createElement('td');
- const th = document.createElement('th');
- const div = document.createElement('div');
- const input = document.createElement('input');
+ it("isCell correctly detects DataGrid cells", () => {
+ const td = document.createElement("td");
+ const th = document.createElement("th");
+ const div = document.createElement("div");
+ const input = document.createElement("input");
expect(isCell(td)).toBe(true);
expect(isCell(th)).toBe(true);
@@ -56,14 +56,14 @@ describe('cell-management utils', () => {
expect(isCell(input)).toBe(false);
});
- it('getClosestCellFrom fetches the closest parent DataGrid cell from an element correctly', () => {
- const gridId = 'data-grid';
- const grid = document.createElement('div');
+ it("getClosestCellFrom fetches the closest parent DataGrid cell from an element correctly", () => {
+ const gridId = "data-grid";
+ const grid = document.createElement("div");
grid.id = gridId;
- const td = document.createElement('td');
- const input = document.createElement('input');
- const select = document.createElement('select');
- const randomInput = document.createElement('input');
+ const td = document.createElement("td");
+ const input = document.createElement("input");
+ const select = document.createElement("select");
+ const randomInput = document.createElement("input");
td.append(input);
td.append(select);
diff --git a/packages/paste-core/components/data-grid/__tests__/customization.spec.tsx b/packages/paste-core/components/data-grid/__tests__/customization.spec.tsx
index f82ad618a4..cddd0a6a4b 100644
--- a/packages/paste-core/components/data-grid/__tests__/customization.spec.tsx
+++ b/packages/paste-core/components/data-grid/__tests__/customization.spec.tsx
@@ -1,83 +1,83 @@
-import * as React from 'react';
-import {CustomizationProvider} from '@twilio-paste/customization';
-import {render} from '@testing-library/react';
+import { render } from "@testing-library/react";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import * as React from "react";
-import {PlainDataGrid} from '../stories/components/PlainDataGrid';
-import {customElementStyles} from '../stories/components/CustomizableDataGrid';
+import { customElementStyles } from "../stories/components/CustomizableDataGrid";
+import { PlainDataGrid } from "../stories/components/PlainDataGrid";
-describe('Data Grid Customization', () => {
- it('can be customized generically', () => {
- const {getByTestId} = render(
+describe("Data Grid Customization", () => {
+ it("can be customized generically", () => {
+ const { getByTestId } = render(
-
+ ,
);
- const datagrid = getByTestId('data-grid');
- const datagridHead = getByTestId('data-grid-head');
- const datagridHeader = getByTestId('data-grid-header');
- const datagridBody = getByTestId('data-grid-body');
- const datagridFoot = getByTestId('data-grid-foot');
- const datagridRow = getByTestId('data-grid-row');
- const datagridCell = getByTestId('data-grid-cell');
+ const datagrid = getByTestId("data-grid");
+ const datagridHead = getByTestId("data-grid-head");
+ const datagridHeader = getByTestId("data-grid-header");
+ const datagridBody = getByTestId("data-grid-body");
+ const datagridFoot = getByTestId("data-grid-foot");
+ const datagridRow = getByTestId("data-grid-row");
+ const datagridCell = getByTestId("data-grid-cell");
// data-element atttributes
- expect(datagrid.getAttribute('data-paste-element')).toBe('DATA_GRID');
- expect(datagridHead.getAttribute('data-paste-element')).toBe('DATA_GRID_HEAD');
- expect(datagridHeader.getAttribute('data-paste-element')).toBe('DATA_GRID_HEADER');
- expect(datagridBody.getAttribute('data-paste-element')).toBe('DATA_GRID_BODY');
- expect(datagridFoot.getAttribute('data-paste-element')).toBe('DATA_GRID_FOOT');
- expect(datagridRow.getAttribute('data-paste-element')).toBe('DATA_GRID_ROW');
- expect(datagridCell.getAttribute('data-paste-element')).toBe('DATA_GRID_CELL');
+ expect(datagrid.getAttribute("data-paste-element")).toBe("DATA_GRID");
+ expect(datagridHead.getAttribute("data-paste-element")).toBe("DATA_GRID_HEAD");
+ expect(datagridHeader.getAttribute("data-paste-element")).toBe("DATA_GRID_HEADER");
+ expect(datagridBody.getAttribute("data-paste-element")).toBe("DATA_GRID_BODY");
+ expect(datagridFoot.getAttribute("data-paste-element")).toBe("DATA_GRID_FOOT");
+ expect(datagridRow.getAttribute("data-paste-element")).toBe("DATA_GRID_ROW");
+ expect(datagridCell.getAttribute("data-paste-element")).toBe("DATA_GRID_CELL");
// Style overrides
- expect(datagridRow).toHaveStyleRule('border-color', 'rgb(96, 107, 133)');
- expect(datagrid).toHaveStyleRule('border-color', 'rgb(96, 107, 133)');
- expect(datagrid).toHaveStyleRule('font-size', '0.75rem');
- expect(datagridHead).toHaveStyleRule('font-weight', '600');
- expect(datagridHead).toHaveStyleRule('background-color', 'rgb(225, 227, 234)');
- expect(datagridHead).toHaveStyleRule('border-color', 'rgb(96, 107, 133)');
- expect(datagridFoot).toHaveStyleRule('font-weight', '600');
- expect(datagridFoot).toHaveStyleRule('background-color', 'rgb(225, 227, 234)');
- expect(datagridFoot).toHaveStyleRule('border-color', 'rgb(96, 107, 133)');
- expect(datagridHeader).toHaveStyleRule('padding', '0.125rem');
- expect(datagridCell).toHaveStyleRule('padding', '0.125rem');
+ expect(datagridRow).toHaveStyleRule("border-color", "rgb(96, 107, 133)");
+ expect(datagrid).toHaveStyleRule("border-color", "rgb(96, 107, 133)");
+ expect(datagrid).toHaveStyleRule("font-size", "0.75rem");
+ expect(datagridHead).toHaveStyleRule("font-weight", "600");
+ expect(datagridHead).toHaveStyleRule("background-color", "rgb(225, 227, 234)");
+ expect(datagridHead).toHaveStyleRule("border-color", "rgb(96, 107, 133)");
+ expect(datagridFoot).toHaveStyleRule("font-weight", "600");
+ expect(datagridFoot).toHaveStyleRule("background-color", "rgb(225, 227, 234)");
+ expect(datagridFoot).toHaveStyleRule("border-color", "rgb(96, 107, 133)");
+ expect(datagridHeader).toHaveStyleRule("padding", "0.125rem");
+ expect(datagridCell).toHaveStyleRule("padding", "0.125rem");
});
- it('can be customized uniquely', () => {
- const {getByTestId} = render(
-
+ it("can be customized uniquely", () => {
+ const { getByTestId } = render(
+
-
+ ,
);
- const datagrid = getByTestId('data-grid');
- const datagridHead = getByTestId('data-grid-head');
- const datagridHeader = getByTestId('data-grid-header');
- const datagridBody = getByTestId('data-grid-body');
- const datagridFoot = getByTestId('data-grid-foot');
- const datagridRow = getByTestId('data-grid-row');
- const datagridCell = getByTestId('data-grid-cell');
+ const datagrid = getByTestId("data-grid");
+ const datagridHead = getByTestId("data-grid-head");
+ const datagridHeader = getByTestId("data-grid-header");
+ const datagridBody = getByTestId("data-grid-body");
+ const datagridFoot = getByTestId("data-grid-foot");
+ const datagridRow = getByTestId("data-grid-row");
+ const datagridCell = getByTestId("data-grid-cell");
// data-element atttributes
- expect(datagrid.getAttribute('data-paste-element')).toBe('FOO');
- expect(datagridHead.getAttribute('data-paste-element')).toBe('FOO_HEAD');
- expect(datagridHeader.getAttribute('data-paste-element')).toBe('FOO_HEADER');
- expect(datagridBody.getAttribute('data-paste-element')).toBe('FOO_BODY');
- expect(datagridFoot.getAttribute('data-paste-element')).toBe('FOO_FOOT');
- expect(datagridRow.getAttribute('data-paste-element')).toBe('FOO_ROW');
- expect(datagridCell.getAttribute('data-paste-element')).toBe('FOO_CELL');
+ expect(datagrid.getAttribute("data-paste-element")).toBe("FOO");
+ expect(datagridHead.getAttribute("data-paste-element")).toBe("FOO_HEAD");
+ expect(datagridHeader.getAttribute("data-paste-element")).toBe("FOO_HEADER");
+ expect(datagridBody.getAttribute("data-paste-element")).toBe("FOO_BODY");
+ expect(datagridFoot.getAttribute("data-paste-element")).toBe("FOO_FOOT");
+ expect(datagridRow.getAttribute("data-paste-element")).toBe("FOO_ROW");
+ expect(datagridCell.getAttribute("data-paste-element")).toBe("FOO_CELL");
// Style overrides
- expect(datagridRow).toHaveStyleRule('border-color', 'rgb(96, 107, 133)');
- expect(datagrid).toHaveStyleRule('border-color', 'rgb(96, 107, 133)');
- expect(datagrid).toHaveStyleRule('font-size', '0.75rem');
- expect(datagridHead).toHaveStyleRule('font-weight', '600');
- expect(datagridHead).toHaveStyleRule('background-color', 'rgb(225, 227, 234)');
- expect(datagridHead).toHaveStyleRule('border-color', 'rgb(96, 107, 133)');
- expect(datagridFoot).toHaveStyleRule('font-weight', '600');
- expect(datagridFoot).toHaveStyleRule('background-color', 'rgb(225, 227, 234)');
- expect(datagridFoot).toHaveStyleRule('border-color', 'rgb(96, 107, 133)');
- expect(datagridHeader).toHaveStyleRule('padding', '0.125rem');
- expect(datagridCell).toHaveStyleRule('padding', '0.125rem');
+ expect(datagridRow).toHaveStyleRule("border-color", "rgb(96, 107, 133)");
+ expect(datagrid).toHaveStyleRule("border-color", "rgb(96, 107, 133)");
+ expect(datagrid).toHaveStyleRule("font-size", "0.75rem");
+ expect(datagridHead).toHaveStyleRule("font-weight", "600");
+ expect(datagridHead).toHaveStyleRule("background-color", "rgb(225, 227, 234)");
+ expect(datagridHead).toHaveStyleRule("border-color", "rgb(96, 107, 133)");
+ expect(datagridFoot).toHaveStyleRule("font-weight", "600");
+ expect(datagridFoot).toHaveStyleRule("background-color", "rgb(225, 227, 234)");
+ expect(datagridFoot).toHaveStyleRule("border-color", "rgb(96, 107, 133)");
+ expect(datagridHeader).toHaveStyleRule("padding", "0.125rem");
+ expect(datagridCell).toHaveStyleRule("padding", "0.125rem");
});
});
diff --git a/packages/paste-core/components/data-grid/__tests__/index.spec.tsx b/packages/paste-core/components/data-grid/__tests__/index.spec.tsx
index 97d48c9cc9..32fc830296 100644
--- a/packages/paste-core/components/data-grid/__tests__/index.spec.tsx
+++ b/packages/paste-core/components/data-grid/__tests__/index.spec.tsx
@@ -1,127 +1,127 @@
-import * as React from 'react';
-import {Button} from '@twilio-paste/button';
-import {act, render, screen} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Button } from "@twilio-paste/button";
+import * as React from "react";
-import {DataGridCell, DataGridHeaderSort, DataGridHeader} from '../src';
+import { DataGridCell, DataGridHeader, DataGridHeaderSort } from "../src";
import {
ColumnSpanDataGrid,
ComposableCellsDataGrid,
- SortableColumnsDataGrid,
PaginatedDataGrid,
PlainDataGrid,
-} from '../stories/index.stories';
+ SortableColumnsDataGrid,
+} from "../stories/index.stories";
const checkTagName = (el: Element, name: string): void => expect(el.tagName).toBe(name.toUpperCase());
-describe('Data Grid', () => {
- describe('Semantics', () => {
+describe("Data Grid", () => {
+ describe("Semantics", () => {
// eslint-disable-next-line jest/expect-expect
- it('uses table elements in the DOM', () => {
- const {getByTestId} = render();
- const dataGrid = getByTestId('data-grid');
- checkTagName(dataGrid, 'table');
+ it("uses table elements in the DOM", () => {
+ const { getByTestId } = render();
+ const dataGrid = getByTestId("data-grid");
+ checkTagName(dataGrid, "table");
const thead = dataGrid.children[0];
const theadTr = thead.children[0];
const theadTrTh = theadTr.children[0];
- checkTagName(thead, 'thead');
- checkTagName(theadTr, 'tr');
- checkTagName(theadTrTh, 'th');
+ checkTagName(thead, "thead");
+ checkTagName(theadTr, "tr");
+ checkTagName(theadTrTh, "th");
const tbody = dataGrid.children[1];
const tbodyTr = tbody.children[0];
const tbodyTrTd = tbodyTr.children[0];
- checkTagName(tbody, 'tbody');
- checkTagName(tbodyTr, 'tr');
- checkTagName(tbodyTrTd, 'td');
+ checkTagName(tbody, "tbody");
+ checkTagName(tbodyTr, "tr");
+ checkTagName(tbodyTrTd, "td");
});
- it('has the correct aria label and role', () => {
- const {getByTestId} = render();
- const dataGrid = getByTestId('data-grid');
- expect(dataGrid.getAttribute('aria-label')).toBeDefined();
- expect(dataGrid.getAttribute('role')).toBe('grid');
+ it("has the correct aria label and role", () => {
+ const { getByTestId } = render();
+ const dataGrid = getByTestId("data-grid");
+ expect(dataGrid.getAttribute("aria-label")).toBeDefined();
+ expect(dataGrid.getAttribute("role")).toBe("grid");
});
});
- describe('Column Span', () => {
- it('applies colSpan attribute as expected', () => {
- const {getByTestId} = render();
- const th = getByTestId('data-grid-header');
- expect(th).toHaveAttribute('colspan', '5');
+ describe("Column Span", () => {
+ it("applies colSpan attribute as expected", () => {
+ const { getByTestId } = render();
+ const th = getByTestId("data-grid-header");
+ expect(th).toHaveAttribute("colspan", "5");
});
});
- describe('Composable Cells functionality', () => {
- it('has proper keyboard navigation behavior', () => {
- const {getByTestId} = render();
- const headerCell = getByTestId('header-1');
- const firstRowFirstInputCell = getByTestId('input-0-0');
+ describe("Composable Cells functionality", () => {
+ it("has proper keyboard navigation behavior", () => {
+ const { getByTestId } = render();
+ const headerCell = getByTestId("header-1");
+ const firstRowFirstInputCell = getByTestId("input-0-0");
const firstInputCell = firstRowFirstInputCell?.parentElement?.parentElement;
if (firstInputCell == null) {
- throw new Error('cannot find firstInputCell');
+ throw new Error("cannot find firstInputCell");
}
act(() => {
headerCell.focus();
});
- userEvent.keyboard('{arrowright}');
- expect(document.activeElement?.innerHTML).toBe('Last Name');
+ userEvent.keyboard("{arrowright}");
+ expect(document.activeElement?.innerHTML).toBe("Last Name");
- userEvent.keyboard('{arrowleft}');
+ userEvent.keyboard("{arrowleft}");
expect(headerCell).toHaveFocus();
- userEvent.keyboard('{arrowdown}');
- expect(headerCell.getAttribute('tabindex')).toBe('-1');
+ userEvent.keyboard("{arrowdown}");
+ expect(headerCell.getAttribute("tabindex")).toBe("-1");
expect(firstInputCell).toHaveFocus();
- expect(firstInputCell.getAttribute('tabindex')).toBe('0');
+ expect(firstInputCell.getAttribute("tabindex")).toBe("0");
- userEvent.keyboard('{arrowup}');
- expect(firstInputCell.getAttribute('tabindex')).toBe('-1');
- expect(headerCell.getAttribute('tabindex')).toBe('0');
+ userEvent.keyboard("{arrowup}");
+ expect(firstInputCell.getAttribute("tabindex")).toBe("-1");
+ expect(headerCell.getAttribute("tabindex")).toBe("0");
expect(headerCell).toHaveFocus();
});
- it('toggles actionable mode with [enter] and [escape] keys', () => {
- const {getByTestId} = render();
- const wrapper = getByTestId('data-grid');
- const headerCell = getByTestId('header-1');
- const firstRowFirstInputCell = getByTestId('input-0-0');
+ it("toggles actionable mode with [enter] and [escape] keys", () => {
+ const { getByTestId } = render();
+ const wrapper = getByTestId("data-grid");
+ const headerCell = getByTestId("header-1");
+ const firstRowFirstInputCell = getByTestId("input-0-0");
const firstInputCell = firstRowFirstInputCell?.parentElement?.parentElement;
if (firstInputCell == null) {
- throw new Error('cannot find firstInputCell');
+ throw new Error("cannot find firstInputCell");
}
act(() => {
headerCell.focus();
});
- expect(wrapper.getAttribute('data-actionable')).toBe('false');
- userEvent.keyboard('{enter}');
- expect(wrapper.getAttribute('data-actionable')).toBe('true');
- userEvent.keyboard('{esc}');
- expect(wrapper.getAttribute('data-actionable')).toBe('false');
+ expect(wrapper.getAttribute("data-actionable")).toBe("false");
+ userEvent.keyboard("{enter}");
+ expect(wrapper.getAttribute("data-actionable")).toBe("true");
+ userEvent.keyboard("{esc}");
+ expect(wrapper.getAttribute("data-actionable")).toBe("false");
// TEST: should enable Actionable mode when clicking into the DataGrid
- expect(wrapper.getAttribute('data-actionable')).toBe('false');
+ expect(wrapper.getAttribute("data-actionable")).toBe("false");
userEvent.click(headerCell);
- expect(wrapper.getAttribute('data-actionable')).toBe('true');
+ expect(wrapper.getAttribute("data-actionable")).toBe("true");
});
- it('should correctly tab through focusable elements in actionable mode', () => {
- const {getByTestId} = render();
- const headerCell = getByTestId('header-1');
- const firstRowFirstInputCell = getByTestId('input-0-0');
- const firstRowSecondInputCell = getByTestId('input-0-1');
- const secondRowFirstInputCell = getByTestId('input-1-0');
+ it("should correctly tab through focusable elements in actionable mode", () => {
+ const { getByTestId } = render();
+ const headerCell = getByTestId("header-1");
+ const firstRowFirstInputCell = getByTestId("input-0-0");
+ const firstRowSecondInputCell = getByTestId("input-0-1");
+ const secondRowFirstInputCell = getByTestId("input-1-0");
const firstInputCell = firstRowFirstInputCell?.parentElement?.parentElement;
if (firstInputCell == null) {
- throw new Error('cannot find firstInputCell');
+ throw new Error("cannot find firstInputCell");
}
act(() => {
@@ -129,9 +129,9 @@ describe('Data Grid', () => {
});
// Down to input cell
- userEvent.keyboard('{arrowdown}');
+ userEvent.keyboard("{arrowdown}");
// Swap to actionable
- userEvent.keyboard('{enter}');
+ userEvent.keyboard("{enter}");
expect(firstRowFirstInputCell).toHaveFocus();
userEvent.tab();
@@ -148,16 +148,16 @@ describe('Data Grid', () => {
act(() => {
headerCell.focus();
});
- userEvent.keyboard('{enter}');
- userEvent.keyboard('{arrowdown}');
+ userEvent.keyboard("{enter}");
+ userEvent.keyboard("{arrowdown}");
expect(firstInputCell).toHaveFocus();
- userEvent.keyboard('{enter}');
+ userEvent.keyboard("{enter}");
userEvent.tab();
expect(firstRowSecondInputCell).toHaveFocus();
});
- it('has one tab stop in navigational mode and remembers the last focus', async () => {
- const {getByTestId} = render(
+ it("has one tab stop in navigational mode and remembers the last focus", async () => {
+ const { getByTestId } = render(
+