create Footnote component

.changeset/curly-pets-wink.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/codemods": minor
+"@twilio-paste/core": minor
+---
+
+[Codemods] add Footnote component

.changeset/quick-feet-rest.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": patch
+"@twilio-paste/core": patch
+---
+
+[Tokens] add shadow-border-bottom

.changeset/slimy-windows-leave.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/footnote": major
+"@twilio-paste/core": major
+---
+
+[Footnote] add new component to reference related information such as a citation.

.codesandbox/ci.json

@@ -49,6 +49,7 @@
     "/packages/paste-core/components/file-picker",
     "/packages/paste-core/components/file-uploader",
     "/packages/paste-core/layout/flex",
+    "/packages/paste-core/components/footnote",
     "/packages/paste-core/components/form",
     "/packages/paste-core/components/form-pill-group",
     "/packages/paste-core/layout/grid",

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

@@ -132,6 +132,7 @@
   "FileUploaderItemTitle": "@twilio-paste/core/file-uploader",
   "FileUploaderItemsList": "@twilio-paste/core/file-uploader",
   "FileUploaderLabel": "@twilio-paste/core/file-uploader",
+  "Footnote": "@twilio-paste/core/footnote",
   "Form": "@twilio-paste/core/form",
   "FormActions": "@twilio-paste/core/form",
   "FormControl": "@twilio-paste/core/form",

packages/paste-core/components/footnote/__tests__/footnote.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen } from "@testing-library/react";
+import { CustomizationProvider } from "@twilio-paste/customization";
+import * as React from "react";
+
+import { Footnote } from "../src";
+
+describe("Default Footnote", () => {
+  render(<Footnote data-testid="footnote">12</Footnote>);
+
+  it("should be rendered", () => {
+    expect(screen.getByTestId("footnote")).toBeInTheDocument();
+  });
+});
+
+describe("Footnote with Tooltip", () => {
+  it("should render a footnote with tooltip text", () => {
+    const { container } = render(
+      <CustomizationProvider baseTheme="default" theme={TestTheme}>
+        <Footnote tooltipText="This is a footnote" data-testid="footnote">
+          12
+        </Footnote>
+      </CustomizationProvider>,
+    );
+
+    expect(screen.getByTestId("footnote")).toBeInTheDocument();
+    expect(container.querySelector('[data-paste-element="FOOTNOTE"]')).toBeInTheDocument();
+    expect(screen.getByTestId("footnote").textContent).toEqual("12");
+    expect(container.querySelector('[data-paste-element="FOOTNOTE_TOOLTIP_BUTTON"]')).toBeInTheDocument();
+  });
+
+  it("should not render a tooltip if tooltipText is not provided", () => {
+    const { container } = render(<Footnote data-testid="footnote">12</Footnote>);
+
+    expect(container.querySelector('[data-paste-element="FOOTNOTE_TOOLTIP"]')).not.toBeInTheDocument();
+  });
+});
+
+describe("Footnote HTML attributes", () => {
+  it("should set element data attribute for footnote", (): void => {
+    const { container } = render(<Footnote data-testid="footnote">This is a footnote.</Footnote>);
+
+    expect(container.querySelector('[data-paste-element="FOOTNOTE"]')).toBeInTheDocument();
+    expect(screen.getByTestId("footnote").getAttribute("data-paste-element")).toEqual("FOOTNOTE");
+  });
+
+  it("should set custom element data attribute for footnote", (): void => {
+    const { container } = render(
+      <Footnote element="foo" data-testid="footnote">
+        This is a footnote.
+      </Footnote>,
+    );
+
+    expect(container.querySelector('[data-paste-element="foo"]')).toBeInTheDocument();
+    expect(screen.getByTestId("footnote").getAttribute("data-paste-element")).toEqual("foo");
+  });
+});
+
+describe("Customization", () => {
+  it("should customize footnote default and tooltip variant", (): void => {
+    render(
+      <CustomizationProvider
+        baseTheme="default"
+        theme={TestTheme}
+        elements={{
+          FOOTNOTE: {
+            color: "colorTextSuccess",
+            fontWeight: "fontWeightBold",
+          },
+        }}
+      >
+        <Footnote data-testid="footnote">This is a footnote.</Footnote>
+      </CustomizationProvider>,
+    );
+    expect(screen.getByTestId("footnote")).toHaveStyleRule("font-weight", "700");
+    expect(screen.getByTestId("footnote")).toHaveStyleRule("color", "rgb(14, 124, 58)");
+  });
+});

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

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

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

@@ -0,0 +1,81 @@
+{
+  "name": "@twilio-paste/footnote",
+  "version": "1.0.0",
+  "category": "data display",
+  "status": "production",
+  "description": "A Footnote is an inline number that is used within main text to reference related information such as a citation.",
+  "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": "^13.0.0",
+    "@twilio-paste/animation-library": "^3.0.0",
+    "@twilio-paste/box": "^11.0.0",
+    "@twilio-paste/button": "^15.0.2",
+    "@twilio-paste/color-contrast-utils": "^5.0.0",
+    "@twilio-paste/customization": "^9.0.0",
+    "@twilio-paste/design-tokens": "^10.0.0",
+    "@twilio-paste/icons": "^13.0.0",
+    "@twilio-paste/keyboard-key": "^2.0.0",
+    "@twilio-paste/reakit-library": "^3.0.0",
+    "@twilio-paste/spinner": "^15.0.0",
+    "@twilio-paste/stack": "^9.0.0",
+    "@twilio-paste/style-props": "^10.0.0",
+    "@twilio-paste/styling-library": "^4.0.0",
+    "@twilio-paste/text": "^11.0.0",
+    "@twilio-paste/theme": "^12.0.0",
+    "@twilio-paste/tooltip": "^13.0.1",
+    "@twilio-paste/tooltip-primitive": "^3.0.0",
+    "@twilio-paste/types": "^7.0.0",
+    "@twilio-paste/uid-library": "^3.0.0",
+    "@types/react": "^17.0.2 || ^18.0.27 || ^19.0.0",
+    "@types/react-dom": "^17.0.2 || ^18.0.10 || ^19.0.0",
+    "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@twilio-paste/anchor": "^13.0.0",
+    "@twilio-paste/animation-library": "^3.0.1",
+    "@twilio-paste/box": "^11.0.1",
+    "@twilio-paste/button": "^15.0.2",
+    "@twilio-paste/color-contrast-utils": "^5.0.0",
+    "@twilio-paste/customization": "^9.0.1",
+    "@twilio-paste/design-tokens": "^10.2.0",
+    "@twilio-paste/icons": "^13.0.1",
+    "@twilio-paste/keyboard-key": "^2.0.0",
+    "@twilio-paste/reakit-library": "^3.0.0",
+    "@twilio-paste/spinner": "^15.0.0",
+    "@twilio-paste/stack": "^9.0.0",
+    "@twilio-paste/style-props": "^10.0.1",
+    "@twilio-paste/styling-library": "^4.0.1",
+    "@twilio-paste/text": "^11.0.0",
+    "@twilio-paste/theme": "^12.0.1",
+    "@twilio-paste/tooltip": "^13.0.1",
+    "@twilio-paste/tooltip-primitive": "^3.0.0",
+    "@twilio-paste/types": "^7.0.1",
+    "@twilio-paste/uid-library": "^3.0.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsx": "^4.0.0",
+    "typescript": "^4.9.4"
+  }
+}

packages/paste-core/components/footnote/src/Footnote.tsx

@@ -0,0 +1,78 @@
+import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
+import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
+import { Button } from "@twilio-paste/button";
+import { Tooltip } from "@twilio-paste/tooltip";
+import type { HTMLPasteProps } from "@twilio-paste/types";
+import * as React from "react";
+
+export interface FootnoteProps extends HTMLPasteProps<"sup"> {
+  /**
+   * Overrides the default element name to apply unique styles with the Customization Provider
+   *
+   * @default 'FOOTNOTE'
+   * @type {BoxProps['element']}
+   * @memberof FootnoteProps
+   */
+  element?: BoxProps["element"];
+  /**
+   * The text to display in the tooltip.
+   */
+  tooltipText?: string;
+  /**
+   * The content of the footnote, which must be a string.
+   */
+  children: string;
+}
+
+const footnoteStyles: BoxStyleProps = {
+  display: "inline-block",
+  backgroundColor: "colorBackground",
+  paddingY: "space20",
+  paddingX: "space30",
+  borderRadius: "borderRadiusCircle",
+  height: "sizeIcon40",
+  flexShrink: 0,
+  color: "colorTextWeak",
+  fontSize: "fontSize20",
+  lineHeight: "lineHeight10",
+  fontWeight: "fontWeightMedium",
+  fontVariantNumeric: "normal",
+};
+
+const Footnote = React.forwardRef<HTMLDivElement, FootnoteProps>(
+  ({ children, element = "FOOTNOTE", tooltipText, ...props }, ref) => {
+    if (tooltipText) {
+      return (
+        <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} as="sup">
+          <Tooltip element={`${element}_TOOLTIP`} text={tooltipText}>
+            <Button
+              element={`${element}_TOOLTIP_BUTTON`}
+              variant="reset"
+              {...footnoteStyles}
+              size="reset"
+              boxShadow="shadowBorderBottom"
+              _hover={{
+                boxShadow: "shadowBorderWeaker",
+              }}
+              _focus={{
+                boxShadow: "shadowFocus",
+              }}
+            >
+              {children}
+            </Button>
+          </Tooltip>
+        </Box>
+      );
+    }
+
+    return (
+      <Box {...safelySpreadBoxProps(props)} ref={ref} element={element} as="sup" {...footnoteStyles}>
+        {children}
+      </Box>
+    );
+  },
+);
+
+Footnote.displayName = "Footnote";
+
+export { Footnote };

packages/paste-core/components/footnote/src/index.tsx

@@ -0,0 +1,2 @@
+export { Footnote } from "./Footnote";
+export type { FootnoteProps } from "./Footnote";

packages/paste-core/components/footnote/stories/index.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { Footnote } from "../src";
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: "Components/Footnote",
+  component: Footnote,
+};
+
+export const Default = (): React.ReactNode => {
+  return (
+    <>
+      <Footnote>12</Footnote>
+    </>
+  );
+};
+
+export const FootnoteWithTooltip = (): React.ReactNode => {
+  return (
+    <>
+      <Footnote tooltipText="This is a footnote">12</Footnote>
+    </>
+  );
+};

packages/paste-core/components/footnote/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}