@nypl/design-system-react-components 0.25.1 → 0.25.5

package/src/components/Tabs/Tabs.stories.mdx

@@ -70,12 +70,20 @@ export const animalCrossing = [
   {
     label: "Mr. Resetti",
     content:
-      "<strong>Mr. Resetti</strong>, full name Sonny Resetti, is a fictional character from the Animal Crossing series of video games by Nintendo. His first appearance was in the Nintendo 64 game Dōbutsu no Mori, released in Europe and North America on the GameCube as Animal Crossing.",
+      "<strong>Mr. Resetti</strong>, full name Sonny Resetti, is a fictional " +
+      "character from the Animal Crossing series of video games by Nintendo. " +
+      "His first appearance was in the Nintendo 64 game Dōbutsu no Mori, " +
+      "released in Europe and North America on the GameCube as Animal Crossing.",
   },
   {
     label: "Zucker",
     content:
-      "<strong>Zucker</strong> is a lazy octopus villager who first appeared in New Leaf. His Japanese name and general appearance refers to the Japanese snack takoyaki, which is a fried ball of dough commonly filled with minced octopus. His catchphrase is a reference to how he is an underwater animal. He has the same initial phrase as Bertha. He has the nature hobby.",
+      "<strong>Zucker</strong> is a lazy octopus villager who first appeared " +
+      "in New Leaf. His Japanese name and general appearance refers to the " +
+      "Japanese snack takoyaki, which is a fried ball of dough commonly " +
+      "filled with minced octopus. His catchphrase is a reference to how he " +
+      "is an underwater animal. He has the same initial phrase as Bertha. He " +
+      "has the nature hobby.",
   },
 ];
 
@@ -100,8 +108,13 @@ _Note: this is the recommended approach._
 
 We recommended passing in the data for the `Tabs` component through the `data`
 prop. This allows the consumer to pass in well-formed data and always generate
-the correct DOM. Internally in the DS `Tabs` component, we map through the data
-array and generate the appropriate components needed for the layout.
+the correct DOM.
+
+Internally in the DS `Tabs` component:
+
+- we map through the data array and generate the appropriate components needed
+  for the layout.
+- adds the carousel feature for the mobile view.
 
 Note that HTML is allowed in the `content` property in each object as part of the
 string or as straight HTML.
@@ -122,12 +135,36 @@ const animalCrossing = [
     content:
       "<p>Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is ...",
   },
+  {
+    label: "Mr. Resetti",
+    content:
+      "<strong>Mr. Resetti</strong>, full name Sonny Resetti, is a ...",
+  },
+  {
+    label: "Zucker",
+    content:
+      "<strong>Zucker</strong> is a lazy octopus villager who first ...",
+  },
 ];
 
 // ...
 <Tabs contentData={animalCrossing} />;
 ```
 
+## Responsive Mobile Carousel
+
+For both, the `contentData` prop approach and the children component approach
+(described below in this document), the mobile carousel feature is built. This
+adds "previous" and "next" arrows in the tab list for users to scroll through
+all the tabs while the panel stays static.
+
+Note that for the children component approach, we expect a `TabList` component
+to be passed or else the mobile carousel will _not_ be built. More on this in
+the [With Children Components](#with-children-components) section.
+
+To view and test this in Storybook, go to the "Canvas" tab and change the
+viewport in the Storybook toolbar at the top of the page.
+
 ## With Callback Event Function
 
 If you need to keep track of the index of current tab that was selected, pass
@@ -178,7 +215,10 @@ available components, you will probably have to iterate or map through an array
 to get the desired outcome. The DS `Tabs` component does this internally for
 you so this should be a last resort option.
 
-Make sure all five components are imported to use this approach.
+Make sure that:
+
+- all five components are imported to use this approach.
+- the structure follows the example below for the mobile carousel to render properly.
 
 ```jsx
 import {
@@ -197,11 +237,16 @@ import {
         <Tab>Tom Nook</Tab>
         <Tab>Isabelle</Tab>
         <Tab>K.K. Slider</Tab>
+        <Tab>Mr. Resetti</Tab>
+        <Tab>Zucker</Tab>
       </TabList>
       <TabPanels>
         <TabPanel>
-          Tom Nook, known in Japan as Tanukichi, is a fictional character in the
-          Animal Crossing series who operates the village store.
+          <p>
+            Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
+            character in the Animal Crossing series who operates the village
+            store.
+          </p>
         </TabPanel>
         <TabPanel>
           Isabelle, known as Shizue in Japan, is a fictional character from the
@@ -210,10 +255,27 @@ import {
           serves as the secretary to the player character.
         </TabPanel>
         <TabPanel>
-          Totakeke, more commonly known as K.K. Slider or K.K., is a fictional
-          character within the Animal Crossing franchise. One of the franchise's
-          most popular characters, he debuted in the title Animal Crossing, and
-          has appeared in every installment since.
+          <p>
+            Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a
+            fictional character within the Animal Crossing franchise. One of the
+            franchise's most popular characters, he debuted in the title Animal
+            Crossing, and has appeared in every installment since.
+          </p>
+        </TabPanel>
+        <TabPanel>
+          <strong>Mr. Resetti</strong>, full name Sonny Resetti, is a fictional
+          character from the Animal Crossing series of video games by Nintendo.
+          His first appearance was in the Nintendo 64 game Dōbutsu no Mori,
+          released in Europe and North America on the GameCube as Animal
+          Crossing.
+        </TabPanel>
+        <TabPanel>
+          <strong>Zucker</strong> is a lazy octopus villager who first appeared
+          in New Leaf. His Japanese name and general appearance refers to the
+          Japanese snack takoyaki, which is a fried ball of dough commonly
+          filled with minced octopus. His catchphrase is a reference to how he
+          is an underwater animal. He has the same initial phrase as Bertha. He
+          has the nature hobby.
         </TabPanel>
       </TabPanels>
     </Tabs>

package/src/components/Tabs/Tabs.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import {
   Box,
-  Tabs as ChakraTabs,
-  TabList,
   Tab,
+  TabList,
   TabPanels,
   TabPanel,
+  Tabs as ChakraTabs,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 
@@ -14,6 +14,8 @@ import { IconNames, IconRotationTypes, IconSizes } from "../Icons/IconTypes";
 import Icon from "../Icons/Icon";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import Button from "../Button/Button";
+import useCarouselStyles from "../../hooks/useCarouselStyles";
+import useWindowSize from "../../hooks/useWindowSize";
 
 // The general shape of the data object for each Tab.
 export interface TabsContentDataProps {
@@ -44,7 +46,7 @@ const onClickHash = (tabHash) => {
 };
 
 /**
- * This returns an object with `Tab` and `TabPanel` components to render in
+ * This returns an object with `Tab` and `TabPanel` components to rendered in
  * `TabList` and `TabPanels` components respectively.
  */
 const getElementsFromContentData = (data, useHash) => {
@@ -61,8 +63,7 @@ const getElementsFromContentData = (data, useHash) => {
         "needed, consider other navigational patterns."
     );
   }
-
-  data.map((tab, index) => {
+  data.forEach((tab, index) => {
     let tempPanel;
     // For URL hash enabled tabs, we need to add a custom `onClick` to handle the URL hash.
     const tempTab = (
@@ -89,7 +90,10 @@ const getElementsFromContentData = (data, useHash) => {
     panels.push(tempPanel);
   });
 
-  return { tabs, panels };
+  return {
+    tabs: <TabList>{tabs}</TabList>,
+    panels: <TabPanels>{panels}</TabPanels>,
+  };
 };
 
 /**
@@ -104,7 +108,7 @@ const getElementsFromChildren = (children) => {
     return {};
   }
 
-  children.map((child) => {
+  children.forEach((child) => {
     if (child.type === TabList || child.props.mdxType === "TabList") {
       tabs.push(child);
 
@@ -139,9 +143,68 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
     useHash = false,
   } = props;
   const styles = useMultiStyleConfig("Tabs", {});
+  // Just an estimate of the tab width for the mobile carousel.
+  const initTabWidth = 65;
+  // An estimate for the tab width for larger device widths.
+  const mediumTabWidth = 40;
+  const [tabWidth, setTabWidth] = React.useState(initTabWidth);
+  const windowDimensions = useWindowSize();
   const { tabs, panels } = contentData
     ? getElementsFromContentData(contentData, useHash)
     : getElementsFromChildren(children);
+  // `tabs` is an array for the children component approach but an object for
+  // the `contentData` prop approach. We need to get the right props key value
+  // to set the carousel's length.
+  const tabProps = tabs[0] ? tabs[0]?.props : (tabs as any).props;
+  const { prevSlide, nextSlide, carouselStyle, goToStart } = useCarouselStyles(
+    tabProps?.children?.length,
+    tabWidth
+  );
+  React.useEffect(() => {
+    if (windowDimensions.width > 320) {
+      setTabWidth(mediumTabWidth);
+    } else {
+      setTabWidth(initTabWidth);
+    }
+    // If we are on larger viewports, reset the carousel so all tabs display.
+    if (windowDimensions.width > 600) {
+      goToStart();
+    }
+  }, [goToStart, windowDimensions.width]);
+  const previousButton = (
+    <Button
+      buttonType={ButtonTypes.Primary}
+      attributes={{
+        "aria-label": "Previous",
+        ...styles.buttonArrows,
+        left: "0",
+      }}
+      onClick={prevSlide}
+    >
+      <Icon
+        name={IconNames.Arrow}
+        iconRotation={IconRotationTypes.Rotate90}
+        size={IconSizes.Small}
+      />
+    </Button>
+  );
+  const nextButton = (
+    <Button
+      buttonType={ButtonTypes.Primary}
+      attributes={{
+        "aria-label": "Next",
+        ...styles.buttonArrows,
+        right: "0",
+      }}
+      onClick={nextSlide}
+    >
+      <Icon
+        name={IconNames.Arrow}
+        iconRotation={IconRotationTypes.Rotate270}
+        size={IconSizes.Small}
+      />
+    </Button>
+  );
 
   if (children && contentData?.length) {
     console.warn(
@@ -152,67 +215,27 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
   return (
     <ChakraTabs
       id={id}
-      // The following lazy loads each panel whenever it is needed.
-      isLazy
       onChange={onChange}
       defaultIndex={defaultIndex}
       variant="enclosed"
+      // The following lazy loads each panel whenever it is needed.
+      isLazy
     >
-      {contentData ? (
-        <>
-          <Box
-            __css={styles.tablistWrapper}
-            sx={{
-              "&::-webkit-scrollbar": {
-                display: "none",
-              },
-            }}
-          >
-            <Button
-              buttonType={ButtonTypes.Primary}
-              attributes={{
-                "aria-label": "Previous",
-                ...styles.buttonArrows,
-              }}
-            >
-              <Icon
-                name={IconNames.Arrow}
-                iconRotation={IconRotationTypes.Rotate90}
-                size={IconSizes.Small}
-              />
-            </Button>
-            <TabList>{tabs}</TabList>
-            <Button
-              buttonType={ButtonTypes.Primary}
-              attributes={{
-                "aria-label": "Next",
-                ...styles.buttonArrows,
-              }}
-            >
-              <Icon
-                name={IconNames.Arrow}
-                iconRotation={IconRotationTypes.Rotate270}
-                size={IconSizes.Small}
-              />
-            </Button>
-          </Box>
-          <TabPanels>{panels}</TabPanels>
-        </>
-      ) : (
-        <>
-          <Box
-            __css={styles.tablistWrapper}
-            sx={{
-              "&::-webkit-scrollbar": {
-                display: "none",
-              },
-            }}
-          >
-            {tabs}
-          </Box>
-          {panels}
-        </>
-      )}
+      <Box
+        __css={styles.tablistWrapper}
+        sx={{
+          "&::-webkit-scrollbar": {
+            display: "none",
+          },
+        }}
+      >
+        {previousButton}
+        <Box __css={styles.carouselParent}>
+          <Box {...carouselStyle}>{tabs}</Box>
+        </Box>
+        {nextButton}
+      </Box>
+      {panels}
     </ChakraTabs>
   );
 }

package/src/components/Template/Template.stories.mdx

@@ -22,6 +22,7 @@ import Placeholder from "../Placeholder/Placeholder";
 import Hero from "../Hero/Hero";
 import { HeroTypes } from "../Hero/HeroTypes";
 import Image from "../Image/Image";
+import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
 import Heading from "../Heading/Heading";
@@ -35,13 +36,7 @@ import Form, { FormRow, FormField } from "../Form/Form";
 import TextInput from "../TextInput/TextInput";
 import Button from "../Button/Button";
 import Link from "../Link/Link";
-import Card, {
-  CardImage,
-  CardHeading,
-  CardContent,
-  CardActions,
-} from "../Card/Card";
-import { CardImageRatios, CardImageSizes } from "../Card/CardTypes";
+import Card, { CardHeading, CardContent, CardActions } from "../Card/Card";
 import Accordion from "../Accordion/Accordion";
 import { faqContent } from "../Accordion/Accordion.stories.mdx";
 import { NotificationTypes } from "../Notification/NotificationTypes";
@@ -452,17 +447,20 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
       </TemplateHeader>
       <TemplateContent sidebar="right">
         <TemplateContentTop>
-          <Notification notificationType={NotificationTypes.Announcement}>
-            <NotificationHeading>Announcement Notification</NotificationHeading>
-            <NotificationContent>
-              This is an "announcement" Notification with a heading. Cras mattis
-              consectetur purus sit amet fermentum. Maecenas faucibus mollis
-              interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
-              eros. Cum sociis natoque penatibus et magnis dis parturient
-              montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue
-              laoreet rutrum faucibus dolor auctor.
-            </NotificationContent>
-          </Notification>
+          <Notification
+            notificationType={NotificationTypes.Announcement}
+            notificationHeading="Announcement Notification"
+            notificationContent={
+              <>
+                This is an "announcement" Notification with a heading. Cras
+                mattis consectetur purus sit amet fermentum. Maecenas faucibus
+                mollis interdum. Morbi leo risus, porta ac consectetur ac,
+                vestibulum at eros. Cum sociis natoque penatibus et magnis dis
+                parturient montes, nascetur ridiculus mus. Vivamus sagittis
+                lacus vel augue laoreet rutrum faucibus dolor auctor.
+              </>
+            }
+          />
         </TemplateContentTop>
         <TemplateContentPrimary>
           <p>This is the main content!</p>
@@ -506,13 +504,13 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
             center
             imageSrc="https://placeimg.com/400/200/animals"
             imageAlt="Alt text"
-            imageAspectRatio={CardImageRatios.Square}
-            imageSize={CardImageSizes.Small}
+            imageAspectRatio={ImageRatios.Square}
+            imageSize={ImageSizes.Small}
           >
-            <CardHeading level={HeadingLevels.Three} id="heading1">
+            <CardHeading level={HeadingLevels.Two} id="heading1">
               Small Animal Image
             </CardHeading>
-            <CardHeading level={HeadingLevels.Five} id="heading2">
+            <CardHeading level={HeadingLevels.Three} id="heading2">
               Animal info
             </CardHeading>
             <CardContent>
@@ -527,12 +525,12 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
           id="custom-card"
           imageAlt="Alt text"
           imageSrc="https://cdn-d8.nypl.org/s3fs-public/2020-05/NYPL_MainFacadeRev2Cam2.png"
-          imageAspectRatio={CardImageRatios.SixteenByNine}
+          imageAspectRatio={ImageRatios.SixteenByNine}
           layout="horizontal"
           backgroundColor="#616161"
           foregroundColor="#FFF"
         >
-          <CardHeading id="heading1" level={2}>
+          <CardHeading id="heading1-footer" level={HeadingLevels.Two}>
             Footer
           </CardHeading>
           <CardContent>
@@ -544,25 +542,25 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
           </CardContent>
           <CardActions>
             <Link
-              href="javascript:void(0);"
               attributes={{
                 style: { color: "#FFF", textDecoration: "underline" },
               }}
+              href="#"
             >
               Facebook
             </Link>
             ,<Link
-              href="javascript:void(0);"
               attributes={{
                 style: { color: "#FFF", textDecoration: "underline" },
               }}
+              href="#"
             >
               Instagram
             </Link>,<Link
-              href="javascript:void(0);"
               attributes={{
                 style: { color: "#FFF", textDecoration: "underline" },
               }}
+              href="#"
             >
               Twitter
             </Link>

package/src/components/TextInput/TextInput.stories.mdx

@@ -38,7 +38,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.4`   |
 
 <Description of={TextInput} />
 

package/src/components/TextInput/TextInput.test.tsx

@@ -180,18 +180,21 @@ describe("Renders TextInput with auto-generated ID, hidden label and visible hel
 });
 
 describe("TextInput shows error state", () => {
+  let rerender;
   beforeEach(() => {
-    render(
+    const utils = render(
       <TextInput
         id="myTextInputError"
         labelText="Custom Input Label"
         helperText="Custom Helper Text"
         invalidText="Custom Error Text"
         placeholder="Input Placeholder"
-        isInvalid={true}
+        isInvalid
         type={TextInputTypes.text}
       />
     );
+
+    rerender = utils.rerender;
   });
 
   it("renders Input component", () => {
@@ -207,6 +210,23 @@ describe("TextInput shows error state", () => {
     expect(screen.getByText("Custom Error Text")).toBeInTheDocument();
   });
 
+  it("does not render the invalid text when 'showHelperInvalidText' is set to false", () => {
+    rerender(
+      <TextInput
+        id="myTextInputError"
+        labelText="Custom Input Label"
+        helperText="Custom Helper Text"
+        invalidText="Custom Error Text"
+        placeholder="Input Placeholder"
+        showHelperInvalidText={false}
+        type={TextInputTypes.text}
+        isInvalid
+      />
+    );
+    expect(screen.queryByText("Custom Helper Text")).not.toBeInTheDocument();
+    expect(screen.queryByText("Custom Error Text")).not.toBeInTheDocument();
+  });
+
   it("input shows error state", () => {
     expect(screen.getByLabelText(/Custom Input Label/i)).toHaveAttribute(
       "aria-invalid"

package/src/components/TextInput/TextInput.tsx

@@ -16,10 +16,14 @@ import HelperErrorText from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface InputProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Additional attributes to pass to the `<input>` or `<textarea>` element */
   attributes?: { [key: string]: any };
   /** A class name for the TextInput parent div. */
   className?: string;
+  /** The starting value of the input field. */
+  defaultValue?: string;
   /** Populates the HelperErrorText for the standard state */
   helperText?: string;
   /** ID that other components can cross reference for accessibility purposes */
@@ -35,6 +39,8 @@ export interface InputProps {
   /** Provides text for a `Label` component if `showLabel` is set to true;
    * populates an `aria-label` attribute if `showLabel` is set to false. */
   labelText: string;
+  /** Used to reference the input element in forms. */
+  name?: string;
   /** The action to perform on the `input`/`textarea`'s onChange function  */
   onChange?: (
     event:
@@ -43,12 +49,16 @@ export interface InputProps {
   ) => void;
   /** Populates the placeholder for the input/textarea elements */
   placeholder?: string;
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
   /** Offers the ability to show the label onscreen or hide it. Refer to the
    * `labelText` property for more information. */
   showLabel?: boolean;
   /** Offers the ability to show the "Required"/"Optional" label onscreen or
    * hide it. True by default. */
   showOptReqLabel?: boolean;
+  /** The amount to increase or decrease when using the number type. */
+  step?: number;
   /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
   type?: TextInputTypes;
   /** Populates the value of the input/textarea elements */
@@ -71,8 +81,10 @@ export type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
 const TextInput = React.forwardRef<TextInputRefType, InputProps>(
   (props, ref: React.Ref<TextInputRefType>) => {
     const {
+      additionalStyles = {},
       attributes = {},
       className,
+      defaultValue,
       helperText,
       id = generateUUID(),
       invalidText,
@@ -80,15 +92,19 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
       isInvalid = false,
       isRequired = false,
       labelText,
+      name,
       onChange,
       placeholder,
+      showHelperInvalidText = true,
       showLabel = true,
       showOptReqLabel = true,
+      step = 1,
       type = TextInputTypes.text,
       value,
       variantType = TextInputVariants.Default,
     } = props;
     const styles = useMultiStyleConfig("TextInput", { variant: variantType });
+    const finalStyles = { ...styles, ...additionalStyles };
     const isTextArea = type === TextInputTypes.textarea;
     const isHidden = type === TextInputTypes.hidden;
     const optReqFlag = isRequired ? "Required" : "Optional";
@@ -125,33 +141,37 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
 
     // When the type is "hidden", the input element needs fewer attributes.
     options = isHidden
-      ? { id, "aria-hidden": isHidden, onChange, ref }
+      ? { id, "aria-hidden": isHidden, name, onChange, ref }
       : {
-          id,
           "aria-required": isRequired,
+          defaultValue,
+          id,
           isDisabled,
           isRequired,
           isInvalid,
           placeholder,
+          name,
           onChange,
           ref,
+          // The `step` attribute is useful for the number type.
+          step: type === TextInputTypes.number ? step : null,
           ...attributes,
         };
     // For `input` and `textarea`, all attributes are the same but `input`
     // also needs `type` and `value` to render correctly.
     if (!isTextArea) {
       options = { type, value, ...options } as any;
-      fieldOutput = <ChakraInput {...options} __css={styles.input} />;
+      fieldOutput = <ChakraInput {...options} __css={finalStyles.input} />;
     } else {
       fieldOutput = (
-        <ChakraTextarea {...options} __css={styles.textarea}>
+        <ChakraTextarea {...options} __css={finalStyles.textarea}>
           {value}
         </ChakraTextarea>
       );
     }
 
     return (
-      <Box __css={styles} className={className}>
+      <Box __css={finalStyles} className={className}>
         {labelText && showLabel && !isHidden && (
           <Label
             htmlFor={id}
@@ -162,9 +182,9 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
           </Label>
         )}
         {fieldOutput}
-        {footnote && !isHidden && (
-          <Box __css={styles.helper} aria-disabled={isDisabled}>
-            <HelperErrorText isError={isInvalid} id={`${id}-helperText`}>
+        {footnote && showHelperInvalidText && !isHidden && (
+          <Box __css={finalStyles.helper} aria-disabled={isDisabled}>
+            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
               {footnote}
             </HelperErrorText>
           </Box>

package/src/components/TextInput/TextInputTypes.tsx

@@ -11,6 +11,7 @@ export enum TextInputTypes {
   url = "url",
 }
 
+// Only used internally in `TextInput`.
 export enum TextInputFormats {
   email = "jdoe@domain.com",
   hidden = "",
@@ -23,6 +24,7 @@ export enum TextInputFormats {
   url = "https://domain.com",
 }
 
+// Only used internally in `TextInput` and `SearchBar`.
 export enum TextInputVariants {
   Default = "default",
   SearchBar = "searchBar",