@ndla/ui 42.1.2 → 43.0.1

package/src/Masthead/MastheadSearchModal.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, useState } from 'react';
-import { Drawer } from '@ndla/modal';
+import React, { ReactNode, useCallback, useState } from 'react';
+import { Drawer, Modal, ModalTrigger } from '@ndla/modal';
 import { IconButtonV2 as IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import styled from '@emotion/styled';
@@ -63,42 +63,34 @@ const StyledHeader = styled.div`
 const MastheadSearchModal = ({ onClose: onSearchClose, children, hideOnNarrowScreen, ndlaFilm }: Props) => {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
+
+  const closeModal = useCallback(() => {
+    onSearchClose();
+    setIsOpen(false);
+  }, [onSearchClose]);
+
   return (
-    <>
-      <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} onClick={() => setIsOpen(true)} ndlaFilm={ndlaFilm}>
-        {t('masthead.menu.search')}
-      </ToggleSearchButton>
+    <Modal open={isOpen} onOpenChange={setIsOpen}>
+      <ModalTrigger>
+        <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} onClick={() => setIsOpen(true)} ndlaFilm={ndlaFilm}>
+          {t('masthead.menu.search')}
+        </ToggleSearchButton>
+      </ModalTrigger>
       <StyledDrawer
-        controlled
         aria-label={t('searchPage.searchFieldPlaceholder')}
         position="top"
         expands
         size="small"
-        animation="slideIn"
         animationDuration={200}
-        isOpen={isOpen}
-        onClose={() => {
-          setIsOpen(false);
-          onSearchClose();
-        }}
       >
-        {(closeModal) => (
-          <>
-            <StyledHeader>
-              {children(closeModal)}
-              <IconButton
-                aria-label={t('welcomePage.closeSearch')}
-                variant="ghost"
-                colorTheme="light"
-                onClick={closeModal}
-              >
-                <Cross className="c-icon--medium" />
-              </IconButton>
-            </StyledHeader>
-          </>
-        )}
+        <StyledHeader>
+          {children(closeModal)}
+          <IconButton aria-label={t('welcomePage.closeSearch')} variant="ghost" colorTheme="light" onClick={closeModal}>
+            <Cross className="c-icon--medium" />
+          </IconButton>
+        </StyledHeader>
       </StyledDrawer>
-    </>
+    </Modal>
   );
 };
 

package/src/MyNdla/Resource/Folder.stories.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { Pencil } from '@ndla/icons/action';
 import { DeleteForever } from '@ndla/icons/editor';
+import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
+import { ButtonV2, IconButtonV2 } from '@ndla/button';
+import { HorizontalMenu } from '@ndla/icons/contentType';
 import { defaultParameters } from '../../../../../stories/defaults';
 
 import Folder from './Folder';
@@ -14,7 +17,7 @@ export default {
     ...defaultParameters,
   },
   argTypes: {
-    menuItems: {
+    menu: {
       control: false,
     },
   },
@@ -26,10 +29,29 @@ export default {
     description: '',
     link: '',
     type: 'list',
-    menuItems: [
-      { icon: <Pencil />, text: 'Rediger', onClick: () => {} },
-      { icon: <DeleteForever />, text: 'Slett', onClick: () => {}, type: 'danger' },
-    ],
+    menu: (
+      <DropdownMenu>
+        <DropdownTrigger>
+          <IconButtonV2 aria-label="Show more" title="Show more" variant="ghost" colorTheme="light">
+            <HorizontalMenu />
+          </IconButtonV2>
+        </DropdownTrigger>
+        <DropdownContent>
+          <DropdownItem>
+            <ButtonV2 variant="ghost" colorTheme="light" shape="sharp" size="small" fontWeight="normal">
+              <Pencil />
+              Rediger
+            </ButtonV2>
+          </DropdownItem>
+          <DropdownItem>
+            <ButtonV2 variant="ghost" colorTheme="danger" shape="sharp" size="small" fontWeight="normal">
+              <DeleteForever />
+              Slett
+            </ButtonV2>
+          </DropdownItem>
+        </DropdownContent>
+      </DropdownMenu>
+    ),
     isShared: true,
   },
 } as Meta<typeof Folder>;

package/src/MyNdla/Resource/Folder.tsx

@@ -7,14 +7,12 @@
  */
 
 import styled from '@emotion/styled';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { FolderOutlined, FolderShared } from '@ndla/icons/contentType';
 import { FileDocumentOutline, Share } from '@ndla/icons/common';
 import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-import { MenuItemProps } from '@ndla/button';
 import { ResourceTitleLink } from '../../Resource/resourceComponents';
-import FolderMenu from './FolderMenu';
 
 export type LayoutType = 'list' | 'listLarger' | 'block';
 
@@ -151,22 +149,11 @@ interface Props {
   description?: string;
   link: string;
   type?: LayoutType;
-  onViewTypeChange?: (type: LayoutType) => void;
-  menuItems?: MenuItemProps[];
+  menu?: ReactNode;
   isShared?: boolean;
 }
 
-const Folder = ({
-  id,
-  link,
-  title,
-  subFolders,
-  subResources,
-  type = 'list',
-  menuItems,
-  isShared,
-  onViewTypeChange,
-}: Props) => {
+const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu, isShared }: Props) => {
   const { t } = useTranslation();
   const Icon = isShared ? FolderShared : FolderOutlined;
 
@@ -196,9 +183,7 @@ const Folder = ({
           <Count layoutType={type} type={'folder'} count={subFolders} />
           <Count layoutType={type} type={'resource'} count={subResources} />
         </CountContainer>
-        {menuItems && menuItems.length > 0 && (
-          <FolderMenu menuItems={menuItems} viewType={type} onViewTypeChange={onViewTypeChange} />
-        )}
+        {menu}
       </MenuWrapper>
     </FolderWrapper>
   );

package/src/MyNdla/index.ts

@@ -1,5 +1,3 @@
 import Folder from './Resource/Folder';
 import FolderInput from './Resource/FolderInput';
-import FolderMenu from './Resource/FolderMenu';
-import SettingsMenu from './SettingsMenu';
-export { Folder, FolderInput, SettingsMenu, FolderMenu };
+export { Folder, FolderInput };

package/src/NDLAFilm/AboutNdlaFilm.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
 import { colors, spacing, mq, breakpoints } from '@ndla/core';
 import { ButtonV2 as Button } from '@ndla/button';
 import VisualElement from './VisualElement';
@@ -64,15 +64,16 @@ const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
         <div>
           <h2 id={titleId}>{aboutNDLAVideo.title}</h2>
           <p>{aboutNDLAVideo.description}</p>
-          <Modal size="full" activateButton={<Button variant="link">{t('ndlaFilm.about.more')}</Button>}>
-            {(onClose) => (
-              <>
-                <ModalHeader>
-                  <ModalCloseButton onClick={onClose} />
-                </ModalHeader>
-                <ModalBody>{moreAboutNdlaFilm}</ModalBody>
-              </>
-            )}
+          <Modal>
+            <ModalTrigger>
+              <Button variant="link">{t('ndlaFilm.about.more')}</Button>
+            </ModalTrigger>
+            <ModalContent size="full">
+              <ModalHeader>
+                <ModalCloseButton />
+              </ModalHeader>
+              <ModalBody>{moreAboutNdlaFilm}</ModalBody>
+            </ModalContent>
           </Modal>
         </div>
       </StyledAside>

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing, mq, breakpoints, colors } from '@ndla/core';
-import CategorySelect from './CategorySelect';
+import { Option, Select, SingleValue } from '@ndla/select';
 import { MovieResourceType } from './types';
 import { OneColumn } from '..';
 import { StyledHeadingH2 } from './filmStyles';
@@ -59,7 +59,6 @@ interface Props {
   onChangeResourceType: (resourceType?: string) => void;
   resourceTypeSelected?: MovieResourceType;
   resourceTypes: MovieResourceType[];
-  ariaControlId: string;
   skipToContentId?: string;
 }
 
@@ -68,10 +67,32 @@ const FilmMovieSearch = ({
   onChangeResourceType,
   resourceTypes,
   resourceTypeSelected,
-  ariaControlId,
   skipToContentId,
 }: Props) => {
   const { t } = useTranslation();
+  const selectedOption = useMemo(() => {
+    if (resourceTypeSelected) {
+      return { value: resourceTypeSelected.id, label: resourceTypeSelected.name };
+    }
+    return { value: 'fromNdla', label: t('ndlaFilm.search.categoryFromNdla') };
+  }, [resourceTypeSelected, t]);
+
+  const options: Option[] = useMemo(() => {
+    const fromNdla = { value: 'fromNdla', label: t('ndlaFilm.search.categoryFromNdla') };
+    return [fromNdla].concat(resourceTypes.map((rt) => ({ value: rt.id, label: rt.name })));
+  }, [resourceTypes, t]);
+
+  const onChange = useCallback(
+    (value: SingleValue) => {
+      if (value?.value === 'fromNdla') {
+        onChangeResourceType();
+      } else {
+        onChangeResourceType(value?.value);
+      }
+    },
+    [onChangeResourceType],
+  );
+
   return (
     <FilmMovieSearchContainer>
       <OneColumn>
@@ -91,11 +112,13 @@ const FilmMovieSearch = ({
             </StyledUl>
           </nav>
         </TopicNavigation>
-        <CategorySelect
-          onChangeResourceType={onChangeResourceType}
-          resourceTypes={resourceTypes}
-          resourceTypeSelected={resourceTypeSelected}
-          ariaControlId={ariaControlId}
+        <Select<false>
+          options={options}
+          value={selectedOption}
+          onChange={onChange}
+          colorTheme="white"
+          placeholder={t('ndlaFilm.search.chooseCategory')}
+          prefix={`${t('ndlaFilm.search.chooseCategory')} `}
         />
       </OneColumn>
     </FilmMovieSearchContainer>

package/src/Resource/BlockResource.stories.tsx

@@ -28,7 +28,7 @@ export default {
     headingLevel: {
       control: false,
     },
-    menuItems: {
+    menu: {
       control: false,
     },
   },

package/src/Resource/BlockResource.tsx

@@ -7,9 +7,8 @@
  */
 
 import styled from '@emotion/styled';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { colors, fonts, spacing } from '@ndla/core';
-import { MenuItemProps } from '@ndla/button';
 import ContentTypeBadge from '../ContentTypeBadge';
 import Image from '../Image';
 import {
@@ -23,7 +22,6 @@ import {
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
-import { SettingsMenu } from '../MyNdla';
 
 const BlockElementWrapper = styled.div`
   display: flex;
@@ -149,7 +147,7 @@ interface Props {
   tags?: string[];
   description?: string;
   headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  menuItems?: MenuItemProps[];
+  menu?: ReactNode;
   isLoading?: boolean;
   targetBlank?: boolean;
   resourceTypes?: { id: string; name: string }[];
@@ -163,7 +161,7 @@ const BlockResource = ({
   tags,
   resourceImage,
   description,
-  menuItems,
+  menu,
   isLoading,
   headingLevel: Heading = 'h2',
   targetBlank,
@@ -196,7 +194,7 @@ const BlockResource = ({
         </ContentWrapper>
         <TagsAndActionMenu>
           {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-          {menuItems && menuItems.length > 0 && <SettingsMenu menuItems={menuItems} />}
+          {menu}
         </TagsAndActionMenu>
       </BlockInfoWrapper>
     </BlockElementWrapper>

package/src/Resource/ListResource.tsx

@@ -7,9 +7,8 @@
  */
 
 import styled from '@emotion/styled';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
-import { MenuItemProps } from '@ndla/button';
 import Image from '../Image';
 import {
   CompressedTagList,
@@ -23,7 +22,6 @@ import {
 import ContentLoader from '../ContentLoader';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
-import { SettingsMenu } from '../MyNdla';
 
 const ListResourceWrapper = styled.div`
   flex: 1;
@@ -204,7 +202,7 @@ export interface ListResourceProps {
   resourceTypes: { id: string; name: string }[];
   tags?: string[];
   description?: string;
-  menuItems?: MenuItemProps[];
+  menu?: ReactNode;
   isLoading?: boolean;
   targetBlank?: boolean;
 }
@@ -218,7 +216,7 @@ const ListResource = ({
   resourceImage,
   resourceTypes,
   description,
-  menuItems,
+  menu,
   isLoading = false,
   targetBlank,
 }: ListResourceProps) => {
@@ -251,7 +249,7 @@ const ListResource = ({
       {showDescription && <Description description={description} loading={isLoading} />}
       <TagsandActionMenu>
         {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-        {menuItems && menuItems.length > 0 && <SettingsMenu menuItems={menuItems} />}
+        {menu}
       </TagsandActionMenu>
     </ListResourceWrapper>
   );

package/src/Resource/Resource.stories.tsx

@@ -8,8 +8,37 @@
 
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
-import { defaultParameters } from '../../../../stories/defaults';
+import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from '@ndla/dropdown-menu';
+import { ButtonV2, IconButtonV2 } from '@ndla/button';
+import { HorizontalMenu } from '@ndla/icons/contentType';
+import { Pencil } from '@ndla/icons/action';
+import { DeleteForever } from '@ndla/icons/editor';
 import ListResource from './ListResource';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const StoryResourceMenu = () => (
+  <DropdownMenu>
+    <DropdownTrigger>
+      <IconButtonV2 aria-label="Show more" title="Show more" variant="ghost" colorTheme="light">
+        <HorizontalMenu />
+      </IconButtonV2>
+    </DropdownTrigger>
+    <DropdownContent>
+      <DropdownItem>
+        <ButtonV2 variant="ghost" colorTheme="light" shape="sharp" size="small" fontWeight="normal">
+          <Pencil />
+          Rediger
+        </ButtonV2>
+      </DropdownItem>
+      <DropdownItem>
+        <ButtonV2 variant="ghost" colorTheme="danger" shape="sharp" size="small" fontWeight="normal">
+          <DeleteForever />
+          Slett
+        </ButtonV2>
+      </DropdownItem>
+    </DropdownContent>
+  </DropdownMenu>
+);
 
 export default {
   title: 'Components/Resources/ListResource',
@@ -28,7 +57,7 @@ export default {
     headingLevel: {
       control: false,
     },
-    menuItems: {
+    menu: {
       control: false,
     },
   },
@@ -41,6 +70,7 @@ export default {
       alt: '',
     },
     resourceTypes: [{ id: 'urn:resourcetype:learningPath', name: 'Læringssti' }],
+    menu: <StoryResourceMenu />,
     tags: ['tag', 'tag', 'tag', 'tag'],
   },
 } as Meta<typeof ListResource>;

package/src/Resource/resourceComponents.tsx

@@ -10,11 +10,11 @@ import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 import React, { CSSProperties, HTMLAttributes, ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MenuButton } from '@ndla/button';
-import SafeLink from '@ndla/safelink';
-import { useNavigate } from 'react-router-dom';
+import { IconButtonV2 } from '@ndla/button';
+import SafeLink, { SafeLinkButton } from '@ndla/safelink';
 import { HashTag } from '@ndla/icons/common';
 import { css } from '@emotion/react';
+import { DropdownMenu, DropdownContent, DropdownTrigger, DropdownItem } from '@ndla/dropdown-menu';
 import resourceTypeColor from '../utils/resourceTypeColor';
 import { resourceEmbedTypeMapping } from '../model/ContentType';
 
@@ -38,6 +38,10 @@ export const ResourceTitleLink = styled(SafeLink)`
   }
 `;
 
+const StyledTrigger = styled(IconButtonV2)`
+  margin: 0px ${spacing.xsmall};
+`;
+
 export const resourceHeadingStyle = css`
   margin: 0;
   overflow: hidden;
@@ -173,34 +177,40 @@ interface CompressedTagListProps {
 }
 
 export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProps) => {
-  const navigate = useNavigate();
   const { t } = useTranslation();
   const visibleTags = useMemo(() => tags.slice(0, 3), [tags]);
-  const remainingTags = useMemo(
-    () =>
-      tags.slice(3, tags.length).map((tag) => {
-        return {
-          icon: <HashTag />,
-          text: tag,
-          onClick: () => {
-            navigate(`${tagLinkPrefix ? tagLinkPrefix : ''}/${encodeURIComponent(tag)}`);
-          },
-        };
-      }),
-    [navigate, tagLinkPrefix, tags],
-  );
+  const remainingTags = useMemo(() => tags.slice(3, tags.length), [tags]);
 
   return (
     <>
       <TagList tagLinkPrefix={tagLinkPrefix} tags={visibleTags} />
       {remainingTags.length > 0 && (
-        <MenuButton
-          size="small"
-          menuIcon={<TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>}
-          menuItems={remainingTags}
-          align="end"
-          aria-label={t('myNdla.moreTags', { count: remainingTags.length })}
-        />
+        <DropdownMenu>
+          <DropdownTrigger>
+            <StyledTrigger
+              size="xsmall"
+              variant="ghost"
+              colorTheme="light"
+              aria-label={t('myNdla.moreTags', { count: remainingTags.length })}
+            >
+              {<TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>}
+            </StyledTrigger>
+          </DropdownTrigger>
+          <DropdownContent showArrow>
+            {remainingTags.map((tag, i) => (
+              <DropdownItem key={`tag-${i}`}>
+                <SafeLinkButton
+                  to={`${tagLinkPrefix ?? ''}/${encodeURIComponent(tag)}`}
+                  variant="ghost"
+                  colorTheme="light"
+                >
+                  <HashTag />
+                  {tag}
+                </SafeLinkButton>
+              </DropdownItem>
+            ))}
+          </DropdownContent>
+        </DropdownMenu>
       )}
     </>
   );

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { ModalBody, ModalHeader, ModalCloseButton, Modal, ModalTitle } from '@ndla/modal';
+import { ModalBody, ModalHeader, ModalCloseButton, Modal, ModalTitle, ModalTrigger, ModalContent } from '@ndla/modal';
 import Tooltip from '@ndla/tooltip';
 import { Switch } from '@ndla/switch';
 import { LearningPathQuiz } from '@ndla/icons/contentType';
@@ -185,31 +185,27 @@ const ResourcesTopicTitle = ({
             onChange={toggleAdditionalResources}
             css={invertedStyle ? invertedSwitchCSS : switchCSS}
           />
-          <Modal
-            wrapperFunctionForButton={(activateButton: ReactNode) => (
-              <TooltipWrapper>
-                <Tooltip tooltip={t('resource.dialogTooltip')}>{activateButton}</Tooltip>
-              </TooltipWrapper>
-            )}
-            activateButton={
-              <TooltipButton aria-label={t('resource.dialogTooltip')}>
-                <HelpIcon invertedStyle={invertedStyle} />
-              </TooltipButton>
-            }
-          >
-            {(onClose: () => void) => (
-              <>
-                <ModalHeader>
-                  <ModalTitle>{t('resource.dialogHeading')}</ModalTitle>
-                  <ModalCloseButton title={t('modal.closeModal')} onClick={onClose} />
-                </ModalHeader>
-                <ModalBody>
-                  <hr />
-                  <p>{t('resource.dialogText1')}</p>
-                  <p>{t('resource.dialogText2')}</p>
-                </ModalBody>
-              </>
-            )}
+          <Modal>
+            <TooltipWrapper>
+              <Tooltip tooltip={t('resource.dialogTooltip')}>
+                <ModalTrigger>
+                  <TooltipButton aria-label={t('resource.dialogTooltip')}>
+                    <HelpIcon invertedStyle={invertedStyle} />
+                  </TooltipButton>
+                </ModalTrigger>
+              </Tooltip>
+            </TooltipWrapper>
+            <ModalContent>
+              <ModalHeader>
+                <ModalTitle>{t('resource.dialogHeading')}</ModalTitle>
+                <ModalCloseButton />
+              </ModalHeader>
+              <ModalBody>
+                <hr />
+                <p>{t('resource.dialogText1')}</p>
+                <p>{t('resource.dialogText2')}</p>
+              </ModalBody>
+            </ModalContent>
           </Modal>
         </StyledRow>
       )}

package/src/Search/ToggleSearchButton.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { spacing, spacingUnit, breakpoints, mq, misc, fonts, colors } from '@ndla/core';
 import { Search } from '@ndla/icons/common';
 import { ButtonProps, ButtonV2 } from '@ndla/button';
@@ -62,17 +62,20 @@ const StyledSpan = styled.span`
   font-weight: ${fonts.weight.normal};
 `;
 
-const ToggleSearchButton = ({ children, ndlaFilm, hideOnNarrowScreen, hideOnWideScreen, ...rest }: Props) => (
-  <StyledButton
-    ndlaFilm={ndlaFilm}
-    hideOnNarrowScreen={hideOnNarrowScreen}
-    hideOnWideScreen={hideOnWideScreen}
-    type="button"
-    {...rest}
-  >
-    <StyledSpan>{children}</StyledSpan>
-    <Search />
-  </StyledButton>
+const ToggleSearchButton = forwardRef<HTMLButtonElement, Props>(
+  ({ children, ndlaFilm, hideOnNarrowScreen, hideOnWideScreen, ...rest }, ref) => (
+    <StyledButton
+      ndlaFilm={ndlaFilm}
+      hideOnNarrowScreen={hideOnNarrowScreen}
+      hideOnWideScreen={hideOnWideScreen}
+      type="button"
+      ref={ref}
+      {...rest}
+    >
+      <StyledSpan>{children}</StyledSpan>
+      <Search />
+    </StyledButton>
+  ),
 );
 
 export default ToggleSearchButton;