@nypl/design-system-react-components 0.25.7 → 0.25.10

package/src/components/VideoPlayer/VideoPlayer.test.tsx

@@ -63,6 +63,46 @@ describe("VideoPlayer", () => {
     });
   });
 
+  describe("using embedCode prop", () => {
+    const embedCode = `<iframe src="https://player.vimeo.com/video/421404144?h=5467db7edd" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
+    const embedCodeWithTitle = `<iframe title="Pre-Existing iFrame Title" src="https://player.vimeo.com/video/421404144?h=5467db7edd" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
+
+    it("Renders custom embed code", () => {
+      render(<VideoPlayer embedCode={embedCode} />);
+      expect(screen.getByTitle("Video player")).toBeInTheDocument();
+      expect(screen.getByTitle("Video player")).toHaveAttribute(
+        "src",
+        `https://player.vimeo.com/video/421404144?h=5467db7edd`
+      );
+    });
+
+    it("Renders custom embed code with custom iframe title", () => {
+      render(
+        <VideoPlayer embedCode={embedCode} iframeTitle="Custom iFrame Title" />
+      );
+      expect(screen.getByTitle("Custom iFrame Title")).toBeInTheDocument();
+    });
+
+    it("Renders custom embed code with pre-existing title", () => {
+      render(<VideoPlayer embedCode={embedCodeWithTitle} />);
+      expect(
+        screen.getByTitle("Pre-Existing iFrame Title")
+      ).toBeInTheDocument();
+    });
+
+    it("Renders custom embed code with pre-existing title and ignores `iframeTitle` prop", () => {
+      render(
+        <VideoPlayer
+          embedCode={embedCodeWithTitle}
+          iframeTitle="Custom iFrame Title"
+        />
+      );
+      expect(
+        screen.getByTitle("Pre-Existing iFrame Title")
+      ).toBeInTheDocument();
+    });
+  });
+
   describe("text elements", () => {
     beforeEach(() => {
       utils = render(
@@ -121,7 +161,7 @@ describe("VideoPlayer", () => {
   });
 
   describe("prop validation", () => {
-    it("Throws error if videoId not formatted properly", () => {
+    it("Throws error if the videoId prop not is formatted properly", () => {
       render(
         <VideoPlayer
           videoType={VideoPlayerTypes.Vimeo}
@@ -135,6 +175,56 @@ describe("VideoPlayer", () => {
         )
       ).toBeInTheDocument();
     });
+
+    it("Throws appropriate error if VideoPlayer props are not configured properly", () => {
+      const warn = jest.spyOn(console, "warn");
+
+      render(<VideoPlayer />);
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer requires either the `embedCode` prop or both the `videoType` and `videoId` props."
+      );
+
+      render(<VideoPlayer videoId="http://vimeo.com/474719268" />);
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer also requires the `videoType` prop. You have only set the `videoId` prop."
+      );
+
+      render(<VideoPlayer videoType={VideoPlayerTypes.Vimeo} />);
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer also requires the `videoId` prop. You have only set the `videoType` prop."
+      );
+
+      render(
+        <VideoPlayer
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          videoType={VideoPlayerTypes.Vimeo}
+          videoId="http://vimeo.com/474719268"
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+      );
+
+      render(
+        <VideoPlayer
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          videoType={VideoPlayerTypes.Vimeo}
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+      );
+
+      render(
+        <VideoPlayer
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          videoId="http://vimeo.com/474719268"
+        />
+      );
+      expect(warn).toHaveBeenCalledWith(
+        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+      );
+    });
   });
 
   it("renders the UI snapshot correctly", () => {
@@ -159,6 +249,17 @@ describe("VideoPlayer", () => {
         />
       )
       .toJSON();
+    const videoPlayerUsingEmbedCode = renderer
+      .create(
+        <VideoPlayer
+          descriptionText="VideoPlayer description"
+          embedCode="<iframe src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>"
+          headingText="VideoPlayer Heading"
+          id="video-player-with-text"
+          helperText="VideoPlayer helper test."
+        />
+      )
+      .toJSON();
     const videoPlayerError = renderer
       .create(
         <VideoPlayer
@@ -171,6 +272,7 @@ describe("VideoPlayer", () => {
 
     expect(videoPlayerWithoutText).toMatchSnapshot();
     expect(videoPlayerWithText).toMatchSnapshot();
+    expect(videoPlayerUsingEmbedCode).toMatchSnapshot();
     expect(videoPlayerError).toMatchSnapshot();
   });
 });

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -1,31 +1,43 @@
-import * as React from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
+
 import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
 import generateUUID from "../../helpers/generateUUID";
 import { getVariant } from "../../utils/utils";
-import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
 
 export interface VideoPlayerProps {
-  /** Optional aspect ratio prop to control the sizing of the video player; if omitted, the video player defaults to `sixteen-by-nine` */
+  /** Optional aspect ratio prop to control the sizing of the video player; if
+   * omitted, the video player defaults to `sixteen-by-nine` */
   aspectRatio?: VideoPlayerAspectRatios;
   /** Optional className you can add in addition to `video-player` */
   className?: string;
   /** Optional string to set the text for a video description */
   descriptionText?: string;
+  /** Optional string to set a code snippet provided by YouTube or Vimeo; the
+   * `videoPlayer` component will accept the `embedCode` prop or the `videoId`
+   * and `videoType` props */
+  embedCode?: string;
   /** Optional string to set the text for a `Heading` component */
   headingText?: string;
   /** Optional string to set the text for a `HelperErrorText` component */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Optional title to be added to the `<iframe>` element for improved accessibility; this title should describe in a few words the content of the video; if omitted, a generic title will be added */
+  /** Optional title to be added to the `<iframe>` element for improved
+   * accessibility; this title should describe in a few words the content of
+   * the video; if omitted, a generic title will be added; if a `title`
+   * attribute is already present in the `embedCode` prop, this prop will be
+   * ignored */
   iframeTitle?: string;
   /** Offers the ability to hide the helper/invalid text. */
   showHelperInvalidText?: boolean;
-  /** Required YouTube or Vimeo video ID. This value can be pulled from a video's YouTube or Vimeo URL. */
-  videoId: string;
+  /** Required YouTube or Vimeo video ID. This value can be pulled from a
+   * video's YouTube or Vimeo URL. */
+  videoId?: string;
   /** Required. Used to specify which video service is being used. */
-  videoType: VideoPlayerTypes;
+  videoType?: VideoPlayerTypes;
 }
 
 export default function VideoPlayer(
@@ -35,6 +47,7 @@ export default function VideoPlayer(
     aspectRatio,
     className,
     descriptionText,
+    embedCode,
     headingText,
     helperText,
     id = generateUUID(),
@@ -54,29 +67,64 @@ export default function VideoPlayer(
       ? `https://player.vimeo.com/video/${videoId}?autoplay=0&loop=0`
       : `https://www.youtube.com/embed/${videoId}?disablekb=1&autoplay=0&fs=1&modestbranding=0`;
 
+  const iFrameTitleEmbedCode = iframeTitle ? `${iframeTitle}` : `Video player`;
+
+  const embedCodeFinal =
+    embedCode && embedCode.includes("<iframe") && !embedCode.includes("title=")
+      ? embedCode.replace(
+          `<iframe `,
+          `<iframe title="${iFrameTitleEmbedCode}" `
+        )
+      : embedCode;
+
   const errorMessage =
     "<strong>Error:</strong> This video player has not been configured properly. Please contact the site administrator.";
 
   let isInvalid = false;
-  if (!videoType && !videoId) {
-    console.warn("VideoPlayer requires the `videoType` and `videoId` props");
+  if (!embedCodeFinal && !videoType && !videoId) {
+    console.warn(
+      "VideoPlayer requires either the `embedCode` prop or both the `videoType` and `videoId` props."
+    );
     isInvalid = true;
-  } else if (!videoType) {
-    console.warn("VideoPlayer requires the `videoType` prop");
+  } else if (!embedCodeFinal && !videoType) {
+    console.warn(
+      "VideoPlayer also requires the `videoType` prop. You have only set the `videoId` prop."
+    );
     isInvalid = true;
-  } else if (!videoId) {
-    console.warn("VideoPlayer requires the `videoId` prop");
+  } else if (!embedCodeFinal && !videoId) {
+    console.warn(
+      "VideoPlayer also requires the `videoId` prop. You have only set the `videoType` prop."
+    );
+    isInvalid = true;
+  } else if (embedCodeFinal && (videoType || videoId)) {
+    console.warn(
+      "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+    );
+    isInvalid = true;
+  }
+
+  if (
+    videoId &&
+    (videoId.includes("://") ||
+      videoId.includes("http") ||
+      videoId.includes(".") ||
+      videoId.includes("youtube") ||
+      videoId.includes("vimeo"))
+  ) {
+    console.warn("The VideoPlayer `videoId` prop is not configured properly.");
     isInvalid = true;
   }
 
   if (
-    videoId.includes("://") ||
-    videoId.includes("http") ||
-    videoId.includes(".") ||
-    videoId.includes("youtube") ||
-    videoId.includes("vimeo")
+    embedCodeFinal &&
+    ((!embedCodeFinal.includes("vimeo.com") &&
+      !embedCodeFinal.includes("youtube.com")) ||
+      !embedCodeFinal.includes("<iframe") ||
+      !embedCodeFinal.includes("</iframe"))
   ) {
-    console.warn("VideoPlayer `videoId` prop is not configured properly");
+    console.warn(
+      "The VideoPlayer `embedCode` prop is not configured properly."
+    );
     isInvalid = true;
   }
 
@@ -85,7 +133,9 @@ export default function VideoPlayer(
     : getVariant(aspectRatio, VideoPlayerAspectRatios);
   const styles = useMultiStyleConfig("VideoPlayer", { variant });
 
-  const embedCode = (
+  const embedElement = embedCodeFinal ? (
+    <span dangerouslySetInnerHTML={{ __html: embedCodeFinal }} />
+  ) : (
     <Box
       as="iframe"
       src={videoSrc}
@@ -113,7 +163,7 @@ export default function VideoPlayer(
           helperText={helperText && showHelperInvalidText ? helperText : null}
           id={`${id}-componentWrapper`}
         >
-          <Box __css={styles.inside}>{embedCode}</Box>
+          <Box __css={styles.inside}>{embedElement}</Box>
         </ComponentWrapper>
       )}
     </Box>

package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap

@@ -64,17 +64,71 @@ exports[`VideoPlayer renders the UI snapshot correctly 2`] = `
         aria-atomic={true}
         aria-live="off"
         className=" css-0"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "VideoPlayer helper test.",
+          }
+        }
         data-isinvalid={false}
         id="video-player-with-text-componentWrapper-helperText"
-      >
-        VideoPlayer helper test.
-      </div>
+      />
     </div>
   </div>
 </div>
 `;
 
 exports[`VideoPlayer renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+  data-testid="video-player-component"
+  id="video-player-with-text"
+>
+  <div
+    className="css-0"
+  >
+    <h2
+      className="chakra-heading css-0"
+      id="video-player-with-text-componentWrapper-heading"
+    >
+      VideoPlayer Heading
+    </h2>
+    <p
+      className="chakra-text css-0"
+    >
+      VideoPlayer description
+    </p>
+    <div
+      className="css-0"
+    >
+      <span
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<iframe title=\\"Video player\\" src='https://player.vimeo.com/video/421404144?h=5467db7edd' width='640' height='360' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        aria-atomic={true}
+        aria-live="off"
+        className=" css-0"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "VideoPlayer helper test.",
+          }
+        }
+        data-isinvalid={false}
+        id="video-player-with-text-componentWrapper-helperText"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VideoPlayer renders the UI snapshot correctly 4`] = `
 <div
   className="css-0"
   data-testid="video-player-component"

package/src/docs/Chakra.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Chakra UI" />
 
@@ -141,9 +141,7 @@ function Tabs(props) {
 
 #### Patterns
 
-The NYPL DS uses the [CSS BEM](http://getbem.com/introduction/) pattern to
-structure and write CSS, but it is slowly being phased out. We are moving away
-from this and re-writing SCSS classes into Javascript objects that work with
+We are writing CSS style object rules into Javascript objects that work with
 Chakra's theme. Instead of creating a variant for a component with a class name,
 now different props or internal logic are used to get the appropriate variant.
 Internally, the right variant will be mapped to a Chakra theme variant that will
@@ -172,10 +170,6 @@ to test them ourselves.
 
 ## Styling
 
-As mentioned in the [Components composed with Chakra](#components-composed-with-chakra)
-section, we are moving away from using the BEM structure to using Javascript
-objects to extend Chakra's theme.
-
 The NYPL DS' theme file can be found at `src/theme/index.ts`. This creates a new
 theme that extends Chakra's theme and is set in the `DSProvider` component. Note
 that the example below is the general structure of the `theme` object but the DS
@@ -183,6 +177,9 @@ that the example below is the general structure of the `theme` object but the DS
 only work and add new object values in the `components` obejct key for new
 components and their theme or variants.
 
+_Note_: There are some SCSS files used to style third party plugins and to
+generate SCSS mixins.
+
 ```ts
 const theme = extendTheme({
   styles: { ... },

package/src/docs/Intro.stories.mdx

@@ -1,9 +1,9 @@
-import { Meta } from "@storybook/addon-docs/blocks";
+import { Meta } from "@storybook/addon-docs";
+
 import Hero from "../components/Hero/Hero.tsx";
 import { HeroTypes } from "../components/Hero/HeroTypes.tsx";
 import Heading from "../components/Heading/Heading.tsx";
 import Image from "../components/Image/Image.tsx";
-import getCSSVariable from "../helpers/getCSSVariable";
 import DSProvider from "../theme/provider";
 
 <Meta title="Introduction" />

package/src/index.ts

@@ -7,9 +7,11 @@ export {
   ButtonGroup,
   Center,
   Circle,
+  Flex,
   Grid,
   GridItem,
   HStack,
+  Spacer,
   Square,
   Stack,
   VStack,
@@ -26,16 +28,18 @@ export {
   CardHeading,
 } from "./components/Card/Card";
 export { CardLayouts } from "./components/Card/CardTypes";
-export { default as CardEdition } from "./components/CardEdition/CardEdition";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
 export { CheckboxGroupLayoutTypes } from "./components/CheckboxGroup/CheckboxGroupLayoutTypes";
-export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export {
+  default as DatePicker,
+  FullDateType,
+} from "./components/DatePicker/DatePicker";
 export { DatePickerTypes } from "./components/DatePicker/DatePickerTypes";
 export { default as DSProvider } from "./theme/provider";
 export { default as Fieldset } from "./components/Fieldset/Fieldset";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
-export { FormSpacing } from "./components/Form/FormTypes";
+export { FormGaps } from "./components/Form/FormTypes";
 export { GridGaps } from "./components/Grid/GridTypes";
 export { default as Heading } from "./components/Heading/Heading";
 export {
@@ -54,7 +58,6 @@ export {
   IconRotationTypes,
   IconSizes,
   IconTypes,
-  LogoNames,
 } from "./components/Icons/IconTypes";
 export { default as Image } from "./components/Image/Image";
 export {
@@ -62,18 +65,22 @@ export {
   ImageSizes,
   ImageTypes,
 } from "./components/Image/ImageTypes";
-export { default as Input } from "./components/Input/Input";
-export { InputTypes } from "./components/Input/InputTypes";
 export { default as Label } from "./components/Label/Label";
 export { default as Link } from "./components/Link/Link";
 export { LinkTypes } from "./components/Link/LinkTypes";
 export { default as List } from "./components/List/List";
 export { ListTypes } from "./components/List/ListTypes";
+export { default as Logo } from "./components/Logo/Logo";
+export { LogoColors, LogoNames, LogoSizes } from "./components/Logo/LogoTypes";
 export { default as Modal } from "./components/Modal/Modal";
 export { default as Notification } from "./components/Notification/Notification";
 export { NotificationTypes } from "./components/Notification/NotificationTypes";
 export { default as Pagination } from "./components/Pagination/Pagination";
 export { default as ProgressIndicator } from "./components/ProgressIndicator/ProgressIndicator";
+export {
+  ProgressIndicatorSizes,
+  ProgressIndicatorTypes,
+} from "./components/ProgressIndicator/ProgressIndicatorTypes";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
 export { RadioGroupLayoutTypes } from "./components/RadioGroup/RadioGroupLayoutTypes";
@@ -88,6 +95,8 @@ export {
 export { default as Slider } from "./components/Slider/Slider";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
 export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
+export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
+export { StructuredContentImagePosition } from "./components/StructuredContent/StructuredContentTypes";
 export {
   Tabs,
   TabList,
@@ -98,6 +107,7 @@ export {
 export {
   TemplateAppContainer,
   Template,
+  TemplateAboveHeader,
   TemplateHeader,
   TemplateBreakout,
   TemplateContent,
@@ -113,9 +123,12 @@ export {
   TextInputRefType,
 } from "./components/TextInput/TextInput";
 export { TextInputTypes } from "./components/TextInput/TextInputTypes";
+export { default as Toggle } from "./components/Toggle/Toggle";
+export { ToggleSizes } from "./components/Toggle/ToggleSizes";
 export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
 export {
   VideoPlayerAspectRatios,
   VideoPlayerTypes,
 } from "./components/VideoPlayer/VideoPlayerTypes";
+export { default as Table } from "./components/Table/Table";

package/src/styles/base/_03-base.scss

@@ -5,7 +5,7 @@
   font-family: var(--nypl-fonts-body);
 
   // Sets up the base font-size, 1rem, for the system
-  font-size: 16px;
+  font-size: var(--nypl-fontSizes-text-default);
   font-weight: 300;
   line-height: 1.5;
 

package/src/styles/base/_place-holder.scss

@@ -6,13 +6,6 @@
     margin-bottom: var(--nypl-space-xl);
   }
 
-  &--full {
-    margin-bottom: var(--nypl-space-xxl);
-    @include breakpoint($nypl-breakpoint-large) {
-      margin-bottom: var(--nypl-space-xxxl);
-    }
-  }
-
   padding: var(--nypl-space-s);
 
   align-items: center;
@@ -25,6 +18,13 @@
   padding: 4rem 1rem;
   width: 100%;
 
+  &--full {
+    margin-bottom: var(--nypl-space-xxl);
+    @include breakpoint($nypl-breakpoint-large) {
+      margin-bottom: var(--nypl-space-xxxl);
+    }
+  }
+
   &--short {
     padding: 1rem 1rem;
   }

package/src/styles.scss

@@ -20,11 +20,7 @@
 @import "./styles/space/_space-inset";
 @import "./styles/space/_space-stack";
 
-// Legacy/deprecated components:
-@import "./components/CardEdition/_CardEdition.scss";
-@import "./components/Input/_Input.scss";
-
 // Components.
-@import "./components/Autosuggest/_Autosuggest.scss"; // Depends on _Input.scss
+@import "./components/Autosuggest/_Autosuggest.scss";
 @import "./components/DatePicker/_DatePicker.scss";
 @import "./components/Modal/_Modal.scss";

package/src/theme/components/breadcrumb.ts

@@ -12,7 +12,7 @@ const booksAndMore = {
   bg: "section.books-and-more.secondary",
 };
 const locations = {
-  bg: "section.locations.secondary",
+  bg: "section.locations.primary",
 };
 const research = {
   bg: "section.research.secondary",
@@ -25,8 +25,8 @@ const Breadcrumb = {
   baseStyle: {
     bg: "ui.black",
     color: "ui.white",
-    fontSize: "-1",
-    fontWeight: "regular",
+    fontSize: "breadcrumbs.default",
+    fontWeight: "breadcrumbs.default",
     paddingBottom: "xs",
     paddingTop: "xs",
     ol: {
@@ -43,7 +43,7 @@ const Breadcrumb = {
       },
     },
     "li:last-child": {
-      fontWeight: { base: "regular", md: "bold" },
+      fontWeight: { base: "breadcrumbs.default", md: "breadcrumbs.lastChild" },
       ".chakra-breadcrumb__link": {
         _hover: {
           cursor: "default",
@@ -67,7 +67,7 @@ const Breadcrumb = {
         marginInlineStart: "xxs",
       },
     },
-    "li:nth-last-child(2)": {
+    "li:nth-last-of-type(2)": {
       display: "inline-block",
       span: {
         display: { base: "none", md: "inline" },

package/src/theme/components/button.ts

@@ -10,7 +10,7 @@ const baseStyle = {
   px: "s",
   textDecoration: "none",
   wordWrap: "normal",
-  fontWeight: "regular",
+  fontWeight: "button.default",
   svg: {
     fill: "currentColor",
     marginTop: "xxs",
@@ -34,14 +34,14 @@ const primary = {
   bg: "ui.link.primary",
   minWidth: "none",
   height: "none",
-  fontSize: "-1",
+  fontSize: "button.default",
 };
 const secondary = {
   bg: "ui.white",
   border: "1px solid",
   borderColor: "ui.gray.light-cool",
   color: "inherit",
-  fontSize: "-1",
+  fontSize: "button.default",
   _hover: {
     bg: "ui.gray.xx-light-cool",
   },
@@ -68,7 +68,7 @@ const pill = {
   py: "xs",
   paddingInlineStart: "m",
   paddingInlineEnd: "m",
-  fontSize: "-1",
+  fontSize: "button.default",
   _hover: {
     bg: "ui.gray.xx-light-cool",
   },
@@ -86,7 +86,7 @@ const iconOnly = {
 };
 const callout = {
   bg: "brand.primary",
-  fontSize: "-1",
+  fontSize: "button.default",
   _hover: {
     bg: "brand.secondary",
   },
@@ -94,12 +94,6 @@ const callout = {
     bg: "brand.secondary",
   },
 };
-const searchBar = {
-  ...primary,
-  borderLeftRadius: "none",
-  borderRightRadius: { base: "none", md: "sm" },
-  lineHeight: "1.75",
-};
 const noBrand = {
   ...primary,
   bg: "ui.black",
@@ -119,7 +113,6 @@ const Button = {
     pill,
     iconOnly,
     callout,
-    searchBar,
     noBrand,
   },
   // Default values