Skip to content

Commit dbd982f

Browse files
nkrantznkrantz
authored
feat(example-text): create package (#4157)
1 parent ac3a553 commit dbd982f

File tree

19 files changed

+1838
-4
lines changed

19 files changed

+1838
-4
lines changed

‎.changeset/eight-windows-rescue.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@twilio-paste/codemods": minor
3+
---
4+
5+
[Codemods] add new export ExampleText

‎.changeset/ninety-islands-trade.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/example-text": major
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[Example Text] create new component Example Text which is a stylized text wrapper that distinguishes user input examples from body text.

‎.codesandbox/ci.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"/packages/paste-core/components/display-pill-group",
4444
"/packages/paste-libraries/dropdown",
4545
"/packages/paste-core/components/editable-code-block",
46+
"/packages/paste-core/components/example-text",
4647
"/packages/paste-core/components/file-picker",
4748
"/packages/paste-core/components/file-uploader",
4849
"/packages/paste-core/layout/flex",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@
112112
"EditableCodeBlock": "@twilio-paste/core/editable-code-block",
113113
"EditableCodeBlockHeader": "@twilio-paste/core/editable-code-block",
114114
"EditableCodeBlockWrapper": "@twilio-paste/core/editable-code-block",
115+
"ExampleText": "@twilio-paste/core/example-text",
115116
"FilePicker": "@twilio-paste/core/file-picker",
116117
"FilePickerButton": "@twilio-paste/core/file-picker",
117118
"FileUploader": "@twilio-paste/core/file-uploader",

‎packages/paste-core/components/example-text/CHANGELOG.md‎

Whitespace-only changes.

‎packages/paste-core/components/example-text/__tests__/index.spec.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { render } from "@testing-library/react";
2+
import * as React from "react";
3+
4+
import { ExampleText } from "../src";
5+
6+
describe("ExampleText", () => {
7+
it("should render text in a <samp> and <kbd> tag", () => {
8+
const { getByText } = render(<ExampleText>test</ExampleText>);
9+
expect(getByText("test").tagName).toEqual("KBD");
10+
expect(getByText("test").parentElement?.tagName).toEqual("SAMP");
11+
});
12+
it("should have a default element attribute", () => {
13+
const { getByText } = render(<ExampleText>test</ExampleText>);
14+
expect(getByText("test").getAttribute("data-paste-element")).toEqual("EXAMPLE_TEXT");
15+
});
16+
it("should have a custom element attribute when set", () => {
17+
const { getByText } = render(<ExampleText element="MY_EXAMPLE_TEXT">test</ExampleText>);
18+
expect(getByText("test").getAttribute("data-paste-element")).toEqual("MY_EXAMPLE_TEXT");
19+
});
20+
});

‎packages/paste-core/components/example-text/build.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const { build } = require("../../../../tools/build/esbuild");
2+
3+
build(require("./package.json"));

‎packages/paste-core/components/example-text/package.json‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "@twilio-paste/example-text",
3+
"version": "0.0.0",
4+
"category": "typography",
5+
"status": "production",
6+
"description": "Example Text is a stylized text wrapper that distinguishes user input examples from body text.",
7+
"author": "Twilio Inc.",
8+
"license": "MIT",
9+
"main:dev": "src/index.tsx",
10+
"main": "dist/index.js",
11+
"module": "dist/index.es.js",
12+
"types": "dist/index.d.ts",
13+
"sideEffects": false,
14+
"publishConfig": {
15+
"access": "public"
16+
},
17+
"files": [
18+
"dist"
19+
],
20+
"scripts": {
21+
"build": "yarn clean && NODE_ENV=production node build.js && tsc",
22+
"build:js": "NODE_ENV=development node build.js",
23+
"build:typedocs": "tsx ../../../../tools/build/generate-type-docs",
24+
"clean": "rm -rf ./dist",
25+
"tsc": "tsc"
26+
},
27+
"peerDependencies": {
28+
"@twilio-paste/animation-library": "^2.0.0",
29+
"@twilio-paste/box": "^10.2.0",
30+
"@twilio-paste/color-contrast-utils": "^5.0.0",
31+
"@twilio-paste/customization": "^8.1.1",
32+
"@twilio-paste/design-tokens": "^10.3.0",
33+
"@twilio-paste/style-props": "^9.1.1",
34+
"@twilio-paste/styling-library": "^3.0.0",
35+
"@twilio-paste/theme": "^11.0.1",
36+
"@twilio-paste/types": "^6.0.0",
37+
"@types/react": "^16.8.6 || ^17.0.2 || ^18.0.27",
38+
"@types/react-dom": "^16.8.6 || ^17.0.2 || ^18.0.10",
39+
"react": "^16.8.6 || ^17.0.2 || ^18.0.0",
40+
"react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
41+
},
42+
"devDependencies": {
43+
"@twilio-paste/animation-library": "^2.0.0",
44+
"@twilio-paste/box": "^10.2.0",
45+
"@twilio-paste/color-contrast-utils": "^5.0.0",
46+
"@twilio-paste/customization": "^8.1.1",
47+
"@twilio-paste/design-tokens": "^10.3.0",
48+
"@twilio-paste/style-props": "^9.1.1",
49+
"@twilio-paste/styling-library": "^3.0.0",
50+
"@twilio-paste/theme": "^11.0.1",
51+
"@twilio-paste/types": "^6.0.0",
52+
"@types/react": "^18.0.27",
53+
"@types/react-dom": "^18.0.10",
54+
"react": "^18.0.0",
55+
"react-dom": "^18.0.0",
56+
"tsx": "^4.0.0",
57+
"typescript": "^4.9.4"
58+
}
59+
}

‎packages/paste-core/components/example-text/src/ExampleText.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
2+
import type { BoxProps } from "@twilio-paste/box";
3+
import type { HTMLPasteProps } from "@twilio-paste/types";
4+
import * as React from "react";
5+
6+
export interface ExampleTextProps extends HTMLPasteProps<"samp"> {
7+
children?: React.ReactNode;
8+
/**
9+
* Overrides the default element name to apply unique styles with the Customization Provider
10+
* @default 'EXAMPLE_TEXT'
11+
* @type {BoxProps['element']}
12+
* @memberof ExampleTextProps
13+
*/
14+
element?: BoxProps["element"];
15+
}
16+
17+
const ExampleText = React.forwardRef<HTMLDivElement, ExampleTextProps>(
18+
({ element = "EXAMPLE_TEXT", children, ...props }, ref) => {
19+
return (
20+
<Box as="samp" display="inline-block" element={`${element}_WRAPPER`}>
21+
<Box
22+
{...safelySpreadBoxProps(props)}
23+
as="kbd"
24+
display="inline-block"
25+
backgroundColor="colorBackground"
26+
fontFamily="fontFamilyText"
27+
fontWeight="fontWeightMedium"
28+
fontSize="fontSize30"
29+
lineHeight="lineHeight40"
30+
borderRadius="borderRadius20"
31+
paddingX="space30"
32+
element={element}
33+
ref={ref}
34+
>
35+
{children}
36+
</Box>
37+
</Box>
38+
);
39+
},
40+
);
41+
42+
ExampleText.displayName = "ExampleText";
43+
44+
export { ExampleText };

‎packages/paste-core/components/example-text/src/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { ExampleText } from "./ExampleText";
2+
export type { ExampleTextProps } from "./ExampleText";

0 commit comments

Comments
 (0)