feat(slider): add package

.codesandbox/ci.json

@@ -82,6 +82,7 @@
     "/packages/paste-core/components/side-modal",
     "/packages/paste-core/components/sidebar",
     "/packages/paste-core/components/skeleton-loader",
+    "/packages/paste-core/components/slider",
     "/packages/paste-core/components/spinner",
     "/packages/paste-core/layout/stack",
     "/packages/paste-core/components/status",
@@ -110,4 +111,4 @@
     "/packages/paste-nextjs-template",
     "/packages/paste-token-contrast-checker"
   ]
-}
+}

packages/paste-codemods/tools/.cache/mappings.json

@@ -248,6 +248,7 @@
   "SidebarPushContentWrapper": "@twilio-paste/core/sidebar",
   "useSidebarNavigationDisclosureState": "@twilio-paste/core/sidebar",
   "SkeletonLoader": "@twilio-paste/core/skeleton-loader",
+  "Slider": "@twilio-paste/core/slider",
   "Spinner": "@twilio-paste/core/spinner",
   "StatusBadge": "@twilio-paste/core/status",
   "StatusMenu": "@twilio-paste/core/status",

packages/paste-core/components/slider/__tests__/index.spec.tsx

@@ -0,0 +1,253 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {CustomizationProvider} from '@twilio-paste/customization';
+
+import {Alert} from '../src';
+
+const onDismissMock: jest.Mock = jest.fn();
+
+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(
+        <Alert onDismiss={eventHandlerMock} variant="neutral">
+          This is an alert
+        </Alert>
+      );
+
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('Should call the onDismiss event handler when close button clicked', () => {
+      const eventHandlerMock: jest.Mock = jest.fn();
+
+      const {getByRole} = render(
+        <Alert onDismiss={eventHandlerMock} variant="neutral">
+          This is an alert
+        </Alert>
+      );
+
+      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(<Alert variant="neutral">This is an alert</Alert>);
+      expect(getByRole('status')).toBeInTheDocument();
+    });
+
+    it('Should add the role of alert to the error alert', () => {
+      const {getByRole} = render(<Alert variant="error">This is an alert</Alert>);
+      expect(getByRole('alert')).toBeInTheDocument();
+    });
+
+    it('Should add the role of alert to the warning alert', () => {
+      const {getByRole} = render(<Alert variant="warning">This is an alert</Alert>);
+      expect(getByRole('alert')).toBeInTheDocument();
+    });
+
+    it('Should add the provided role to the alert', () => {
+      const {getByRole} = render(
+        <Alert role="tab" variant="error">
+          This is an alert
+        </Alert>
+      );
+      expect(getByRole('tab')).toBeInTheDocument();
+    });
+  });
+
+  describe('Customization', () => {
+    it('should set default data-paste-element attribute on Alert and customizable Alert children', (): void => {
+      render(
+        <CustomizationProvider baseTheme="default" theme={TestTheme}>
+          <Alert data-testid="alert-customization" variant="neutral" onDismiss={onDismissMock}>
+            This is my test alert
+          </Alert>
+        </CustomizationProvider>
+      );
+
+      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 => {
+      render(
+        <CustomizationProvider
+          baseTheme="default"
+          elements={{
+            ALERT: {
+              backgroundColor: 'colorBackground',
+            },
+            ALERT_ICON: {
+              color: 'colorTextIconNeutral',
+            },
+            ALERT_DISMISS_BUTTON: {
+              backgroundColor: 'colorBackgroundBodyInverse',
+            },
+            ALERT_DISMISS_ICON: {
+              color: 'colorTextInverse',
+            },
+          }}
+        >
+          <Alert data-testid="alert-customization" variant="neutral" onDismiss={onDismissMock}>
+            This is my test alert
+          </Alert>
+        </CustomizationProvider>
+      );
+
+      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.querySelector('[data-paste-element="ALERT_DISMISS_BUTTON"]')).toHaveStyleRule(
+        'background-color',
+        'rgb(18, 28, 45)'
+      );
+      expect(alert.querySelector('[data-paste-element="ALERT_DISMISS_ICON"]')).toHaveStyleRule(
+        'color',
+        'rgb(255, 255, 255)'
+      );
+    });
+
+    it('should set custom element name and properly apply styles to Alert and customizable children', (): void => {
+      render(
+        <CustomizationProvider
+          baseTheme="default"
+          elements={{
+            MYALERT: {
+              backgroundColor: 'colorBackground',
+            },
+            MYALERT_ICON: {
+              color: 'colorTextIconNeutral',
+            },
+            MYALERT_DISMISS_BUTTON: {
+              backgroundColor: 'colorBackgroundBodyInverse',
+            },
+            MYALERT_DISMISS_ICON: {
+              color: 'colorTextInverse',
+            },
+          }}
+        >
+          <Alert data-testid="alert-customization" element="MYALERT" variant="neutral" onDismiss={onDismissMock}>
+            This is my test alert
+          </Alert>
+        </CustomizationProvider>
+      );
+
+      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.querySelector('[data-paste-element="MYALERT_DISMISS_BUTTON"]')).toHaveStyleRule(
+        'background-color',
+        'rgb(18, 28, 45)'
+      );
+      expect(alert.querySelector('[data-paste-element="MYALERT_DISMISS_ICON"]')).toHaveStyleRule(
+        'color',
+        'rgb(255, 255, 255)'
+      );
+    });
+  });
+
+  describe('i18n', () => {
+    it('should have default dismiss button text', () => {
+      render(
+        <Alert variant="neutral" onDismiss={onDismissMock}>
+          This is an alert
+        </Alert>
+      );
+      const dismissButton = screen.getByRole('button', {name: 'Dismiss alert'});
+      expect(dismissButton).toBeDefined();
+    });
+
+    it('should use i18nDismissLabel for dismiss button text', () => {
+      render(
+        <Alert variant="neutral" i18nDismissLabel="Fermez l'alerte" onDismiss={onDismissMock}>
+          C&apos;est une alerte neutre.
+        </Alert>
+      );
+      const dismissButton = screen.getByRole('button', {name: "Fermez l'alerte"});
+      expect(dismissButton).toBeDefined();
+    });
+
+    it('should have default error variant icon text', () => {
+      render(
+        <Alert data-testid="alert-i18n" variant="error">
+          This is an alert
+        </Alert>
+      );
+      const alert = screen.getByTestId('alert-i18n');
+      const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
+      expect(icon?.textContent).toEqual('(error)');
+    });
+
+    it('should have default neutral variant icon text', () => {
+      render(
+        <Alert data-testid="alert-i18n" variant="neutral">
+          This is an alert
+        </Alert>
+      );
+      const alert = screen.getByTestId('alert-i18n');
+      const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
+      expect(icon?.textContent).toEqual('(information)');
+    });
+
+    it('should have default warning variant icon text', () => {
+      render(
+        <Alert data-testid="alert-i18n" variant="warning">
+          This is an alert
+        </Alert>
+      );
+      const alert = screen.getByTestId('alert-i18n');
+      const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
+      expect(icon?.textContent).toEqual('(warning)');
+    });
+
+    it('should use the i18nErrorLabel for error variant icon text', () => {
+      render(
+        <Alert data-testid="alert-i18n" variant="error" i18nErrorLabel="(erreur)">
+          C&apos;est une alerte.
+        </Alert>
+      );
+      const alert = screen.getByTestId('alert-i18n');
+      const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
+      expect(icon?.textContent).toEqual('(erreur)');
+    });
+
+    it('should use the i18nNeutralLabel for neutral variant icon text', () => {
+      render(
+        <Alert data-testid="alert-i18n" variant="neutral" i18nNeutralLabel="(information)">
+          C&apos;est une alerte.
+        </Alert>
+      );
+      const alert = screen.getByTestId('alert-i18n');
+      const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
+      expect(icon?.textContent).toEqual('(information)');
+    });
+
+    it('should use the i18nWarningLabel for warning variant icon text', () => {
+      render(
+        <Alert data-testid="alert-i18n" variant="warning" i18nWarningLabel="(avertissement)">
+          C&apos;est une alerte.
+        </Alert>
+      );
+      const alert = screen.getByTestId('alert-i18n');
+      const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]');
+      expect(icon?.textContent).toEqual('(avertissement)');
+    });
+  });
+});

packages/paste-core/components/slider/build.js

@@ -0,0 +1,3 @@
+const {build} = require('../../../../tools/build/esbuild');
+
+build(require('./package.json'));

packages/paste-core/components/slider/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@twilio-paste/slider",
+  "version": "0.0.0",
+  "category": "user input",
+  "status": "production",
+  "description": "A Slider is a draggable input that allows a user to select an imprecise numerical value within a range.",
+  "author": "Twilio Inc.",
+  "license": "MIT",
+  "main:dev": "src/index.tsx",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn clean && NODE_ENV=production node build.js && tsc",
+    "build:js": "NODE_ENV=development node build.js",
+    "clean": "rm -rf ./dist",
+    "tsc": "tsc"
+  },
+  "peerDependencies": {
+    "@twilio-paste/animation-library": "^1.0.0",
+    "@twilio-paste/box": "^9.0.0",
+    "@twilio-paste/color-contrast-utils": "^4.0.0",
+    "@twilio-paste/customization": "^7.0.0",
+    "@twilio-paste/design-tokens": "^9.0.0",
+    "@twilio-paste/icons": "^11.0.0",
+    "@twilio-paste/react-spectrum-library": "^0.0.0",
+    "@twilio-paste/screen-reader-only": "12.0.0",
+    "@twilio-paste/style-props": "^8.0.0",
+    "@twilio-paste/styling-library": "^2.0.0",
+    "@twilio-paste/theme": "^10.0.0",
+    "@twilio-paste/types": "^5.0.0",
+    "@twilio-paste/uid-library": "^1.0.0",
+    "@types/react": "^16.8.6 || ^17.0.2 || ^18.0.27",
+    "@types/react-dom": "^16.8.6 || ^17.0.2 || ^18.0.10",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6 || ^17.0.2 || ^18.0.0",
+    "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@twilio-paste/animation-library": "^1.0.0",
+    "@twilio-paste/box": "^9.0.0",
+    "@twilio-paste/color-contrast-utils": "^4.0.0",
+    "@twilio-paste/customization": "^7.0.0",
+    "@twilio-paste/design-tokens": "^9.0.2",
+    "@twilio-paste/icons": "^11.0.0",
+    "@twilio-paste/react-spectrum-library": "^0.0.0",
+    "@twilio-paste/screen-reader-only": "12.0.0",
+    "@twilio-paste/style-props": "^8.0.0",
+    "@twilio-paste/styling-library": "^2.0.0",
+    "@twilio-paste/theme": "^10.0.0",
+    "@twilio-paste/types": "^5.0.0",
+    "@twilio-paste/uid-library": "^1.0.0",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "prop-types": "^15.7.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}