-
Notifications
You must be signed in to change notification settings - Fork 116
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
37 changed files
with
14,775 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@twilio-paste/side-panel": major | ||
| "@twilio-paste/core": minor | ||
| --- | ||
|
|
||
| [Side Panel] add new Side Panel component. Side panel is a container that pushes the main page content when open. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@twilio-paste/codemods": minor | ||
| --- | ||
|
|
||
| [codemods] add new package: Side Panel |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@twilio-paste/side-panel": patch | ||
| "@twilio-paste/core": patch | ||
| --- | ||
|
|
||
| [Side Panel] Fix positioning of close button when no header actions are being used by adding justifyContent="space-between" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| ## New Icon Request | ||
| You're in helper duty and there is a new icon request on GitHub: | ||
| * Read the request and review the needed icon(s). | ||
| * Make sure the requested icon is suitable to be part of Paste library: | ||
| * If the requester is external to Twilio, determine whether the icon is generic enough to be used by other teams at Twilio. If it's not generic, you can point them to the [SVG-to-React library](https://paste.twilio.design/core/libraries), which allows them to create a React component with their SVG. | ||
| * It doesn’t already exist or is too similar to an existing one | ||
| * If it exists, you can suggest using the current one or ask to explain why a different one is needed. | ||
| * If it's too similar, you can propose other options using [Streamline](https://www.streamlinehq.com/icons/legacy-streamline-regular) and share it in the Github discussion. | ||
| * It conveys the concept in a clear way | ||
| * If it doesn't convey the concept, you can propose other options using Streamline and share it in the Github discussion. | ||
| * It is a general concept that can easily be used by other teams | ||
| * If it's not clear to you, directly ask the requester if the icon will be used by other teams. | ||
| * If the icon is... | ||
| * **Not suitable**, ask the requester to add it to their local libraries (confirm with Paste Design team if necessary) | ||
| * **Suitable**, ask the requester to file a dependency using this [Airtable link](https://airtable.com/appwvsQKyJHfnG5Sa/shrvMvL3BG6Zm0f9l) | ||
| * Once the dependency is submitted, mark the GitHub ticket as 'Fix/change in progress'. | ||
|
|
||
| **Keep in mind that icons are batched together in the last sprint of each release. [Check release dates](https://paste.twilio.design/roadmap)** | ||
|
|
||
| * Create a Jira ticket with the next release date 'Figma: Icons for YYYY.MM.DD release' for the design ticket. | ||
| * Include the list of icons names to be included in the release along with their links to the GitHub discussion. | ||
| * Clone the Jira ticket and name it 'Add icons for 2024.05.14 release' for the engineering ticket. | ||
|
|
||
| ## Update Icon Requests | ||
| You're in helper duty and there are open/unanswered icon request discussions: | ||
| * Check if the requested icons have been released and are ready to use: | ||
| * You can check the [CHANGELOG in the repository](https://github.com/twilio-labs/paste/blob/main/packages/paste-icons/CHANGELOG.md) | ||
| * You can check the [last icon package deploy on NPM](https://www.npmjs.com/package/@twilio-paste/icons?activeTab=versions) | ||
| * Update the requester with the status only if the icons are released and ready to use, and provide the link to the PR and Figma. | ||
|
|
||
| ## Design New Icon Request | ||
| You’re assigned an icon design ticket: | ||
| * Review the list of icons in the ticket and their discussions. | ||
| * Follow the Paste Docs instructions to [add a new icon to Figma](https://paste.twilio.design/introduction/contributing/icons#setting-up-an-icon-in-figma). | ||
| * When ready, send your branch for review to #plz-design-systems. | ||
| * When approved, Follow the Paste Docs instructions to [export each icon individually](https://paste.twilio.design/introduction/contributing/icons#exporting-the-icon). | ||
| * Attach the SVGs to the engineer's Jira ticket. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
107 changes: 107 additions & 0 deletions
107
packages/paste-core/components/side-panel/__tests__/index.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import { act, render, screen } from "@testing-library/react"; | ||
| import userEvent from "@testing-library/user-event"; | ||
| import { Button } from "@twilio-paste/button"; | ||
| import { Theme } from "@twilio-paste/theme"; | ||
| import * as React from "react"; | ||
|
|
||
| import { | ||
| SidePanel, | ||
| SidePanelBody, | ||
| SidePanelContainer, | ||
| SidePanelHeader, | ||
| SidePanelHeaderActions, | ||
| SidePanelPushContentWrapper, | ||
| } from "../src"; | ||
|
|
||
| const MockSidePanel = ({ element = "SIDE_PANEL" }: { element?: string }): JSX.Element => { | ||
| const [isOpen, setIsOpen] = React.useState(true); | ||
| return ( | ||
| <Theme.Provider theme="twilio" data-testid="wrapper"> | ||
| <SidePanelContainer | ||
| sidePanelId="side-panel-id" | ||
| element={`${element}_CONTAINER`} | ||
| setIsOpen={setIsOpen} | ||
| isOpen={isOpen} | ||
| > | ||
| <SidePanel label="my side panel" element={element}> | ||
| <SidePanelHeader element={`${element}_HEADER`}> | ||
| Heading | ||
| <SidePanelHeaderActions element={`${element}_HEADER_ACTIONS`}> | ||
| <Button data-testid="action-button" variant="secondary_icon"> | ||
| ... | ||
| </Button> | ||
| </SidePanelHeaderActions> | ||
| </SidePanelHeader> | ||
| <SidePanelBody element={`${element}_BODY`}>Body</SidePanelBody> | ||
| </SidePanel> | ||
| <SidePanelPushContentWrapper element={`${element}_PUSH_CONTENT_WRAPPER`}> | ||
| Page content | ||
| </SidePanelPushContentWrapper> | ||
| </SidePanelContainer> | ||
| </Theme.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| describe("SidePanel", () => { | ||
| beforeEach(() => { | ||
| render(<MockSidePanel />); | ||
| }); | ||
| it("should render", () => { | ||
| expect(screen.getByRole("dialog")).toBeDefined(); | ||
| }); | ||
| it("should be removed from the DOM when isOpen=false", async () => { | ||
| const closeButton = screen | ||
| .getByRole("dialog") | ||
| .querySelector('[data-paste-element="SIDE_PANEL_HEADER_CLOSE_BUTTON"]'); | ||
| if (closeButton) await userEvent.click(closeButton); | ||
| // r-t-l act() necessary for testing with react 17 | ||
| await act(async () => { | ||
| await new Promise((resolve) => setTimeout(resolve, 1000)); | ||
| }); | ||
| expect(screen.queryByRole("dialog")).toBeNull(); // queryByRole returns null if no element is found whereas getByRole throws an error | ||
| }); | ||
| it("should have an id", () => { | ||
| expect(screen.getByRole("dialog").getAttribute("id")).toEqual("side-panel-id"); | ||
| }); | ||
| it("should have an aria label", () => { | ||
| expect(screen.getByLabelText("my side panel")).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| describe("Customization", () => { | ||
| it("should set default element values", () => { | ||
| render(<MockSidePanel />); | ||
| const sidePanelWrapper = screen.getByTestId("wrapper"); | ||
| const sidePanel = screen.getByRole("dialog"); | ||
| expect(sidePanelWrapper.querySelector('[data-paste-element="SIDE_PANEL_CONTAINER"]')).toBeInTheDocument(); | ||
| expect( | ||
| sidePanelWrapper.querySelector('[data-paste-element="SIDE_PANEL_PUSH_CONTENT_WRAPPER"]'), | ||
| ).toBeInTheDocument(); | ||
| expect(sidePanel.getAttribute("data-paste-element")).toEqual("SIDE_PANEL"); | ||
| expect(sidePanel.querySelector('[data-paste-element="ANIMATED_SIDE_PANEL_WRAPPER"]')).toBeInTheDocument(); | ||
| expect(sidePanel.querySelector('[data-paste-element="INNER_SIDE_PANEL"]')).toBeInTheDocument(); | ||
| expect(screen.getByText("Heading").getAttribute("data-paste-element")).toBe("SIDE_PANEL_HEADER"); | ||
| expect(screen.getByText("...").parentElement?.parentElement?.getAttribute("data-paste-element")).toBe( | ||
| "SIDE_PANEL_HEADER_ACTIONS", | ||
| ); | ||
| expect(screen.getByText("Body").getAttribute("data-paste-element")).toBe("SIDE_PANEL_BODY"); | ||
| expect(screen.getByText("Page content").getAttribute("data-paste-element")).toBe("SIDE_PANEL_PUSH_CONTENT_WRAPPER"); | ||
| }); | ||
|
|
||
| it("should set custom element values", () => { | ||
| render(<MockSidePanel element="FTP" />); | ||
| const sidePanelWrapper = screen.getByTestId("wrapper"); | ||
| const sidePanel = screen.getByRole("dialog"); | ||
| expect(sidePanelWrapper.querySelector('[data-paste-element="FTP_CONTAINER"]')).toBeInTheDocument(); | ||
| expect(sidePanelWrapper.querySelector('[data-paste-element="FTP_PUSH_CONTENT_WRAPPER"]')).toBeInTheDocument(); | ||
| expect(sidePanel.getAttribute("data-paste-element")).toEqual("FTP"); | ||
| expect(sidePanel.querySelector('[data-paste-element="ANIMATED_FTP_WRAPPER"]')).toBeInTheDocument(); | ||
| expect(sidePanel.querySelector('[data-paste-element="INNER_FTP"]')).toBeInTheDocument(); | ||
| expect(screen.getByText("Heading").getAttribute("data-paste-element")).toBe("FTP_HEADER"); | ||
| expect(screen.getByText("...").parentElement?.parentElement?.getAttribute("data-paste-element")).toBe( | ||
| "FTP_HEADER_ACTIONS", | ||
| ); | ||
| expect(screen.getByText("Body").getAttribute("data-paste-element")).toBe("FTP_BODY"); | ||
| expect(screen.getByText("Page content").getAttribute("data-paste-element")).toBe("FTP_PUSH_CONTENT_WRAPPER"); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| const { build } = require("../../../../tools/build/esbuild"); | ||
|
|
||
| build(require("./package.json")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| { | ||
| "name": "@twilio-paste/side-panel", | ||
| "version": "0.0.0", | ||
| "category": "layout", | ||
| "status": "production", | ||
| "description": "Side Panel is a container that pushes the main page content when open.", | ||
| "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", | ||
| "build:typedocs": "tsx ../../../../tools/build/generate-type-docs", | ||
| "clean": "rm -rf ./dist", | ||
| "tsc": "tsc" | ||
| }, | ||
| "peerDependencies": { | ||
| "@twilio-paste/anchor": "^12.1.0", | ||
| "@twilio-paste/animation-library": "^2.0.0", | ||
| "@twilio-paste/badge": "^8.2.0", | ||
| "@twilio-paste/box": "^10.2.0", | ||
| "@twilio-paste/button": "^14.1.0", | ||
| "@twilio-paste/color-contrast-utils": "^5.0.0", | ||
| "@twilio-paste/customization": "^8.1.1", | ||
| "@twilio-paste/design-tokens": "^10.3.0", | ||
| "@twilio-paste/icons": "^12.4.0", | ||
| "@twilio-paste/spinner": "^14.1.2", | ||
| "@twilio-paste/stack": "^8.1.0", | ||
| "@twilio-paste/style-props": "^9.1.1", | ||
| "@twilio-paste/styling-library": "^3.0.0", | ||
| "@twilio-paste/theme": "^11.0.1", | ||
| "@twilio-paste/types": "^6.0.0", | ||
| "@twilio-paste/uid-library": "^2.0.0", | ||
| "@twilio-paste/utils": "^5.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", | ||
| "react": "^16.8.6 || ^17.0.2 || ^18.0.0", | ||
| "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@twilio-paste/anchor": "^12.1.0", | ||
| "@twilio-paste/animation-library": "^2.0.0", | ||
| "@twilio-paste/badge": "^8.2.0", | ||
| "@twilio-paste/box": "^10.2.0", | ||
| "@twilio-paste/button": "^14.1.0", | ||
| "@twilio-paste/color-contrast-utils": "^5.0.0", | ||
| "@twilio-paste/customization": "^8.1.1", | ||
| "@twilio-paste/design-tokens": "^10.3.0", | ||
| "@twilio-paste/icons": "^12.4.0", | ||
| "@twilio-paste/spinner": "^14.1.2", | ||
| "@twilio-paste/stack": "^8.1.0", | ||
| "@twilio-paste/style-props": "^9.1.1", | ||
| "@twilio-paste/styling-library": "^3.0.0", | ||
| "@twilio-paste/theme": "^11.0.1", | ||
| "@twilio-paste/types": "^6.0.0", | ||
| "@twilio-paste/uid-library": "^2.0.0", | ||
| "@twilio-paste/utils": "^5.0.0", | ||
| "@types/react": "^18.0.27", | ||
| "@types/react-dom": "^18.0.10", | ||
| "react": "^18.0.0", | ||
| "react-dom": "^18.0.0", | ||
| "tsx": "^4.0.0", | ||
| "typescript": "^4.9.4" | ||
| } | ||
| } |
Oops, something went wrong.