@patternfly/react-core 4.202.32 → 4.202.35

package/src/demos/examples/Tabs/TabsAndTablesAutoWidthTabs.tsx

@@ -0,0 +1,442 @@
+/* eslint-disable no-console */
+import React from 'react';
+import {
+  Button,
+  Divider,
+  Drawer,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerPanelBody,
+  Dropdown,
+  Flex,
+  FlexItem,
+  KebabToggle,
+  Label,
+  LabelGroup,
+  OptionsMenu,
+  OptionsMenuToggle,
+  OverflowMenu,
+  OverflowMenuContent,
+  OverflowMenuControl,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  PageSection,
+  PageSectionVariants,
+  Pagination,
+  PaginationVariant,
+  Progress,
+  ProgressSize,
+  Select,
+  SelectVariant,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarToggleGroup
+} from '@patternfly/react-core';
+import {
+  TableComposable,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  IAction,
+  ActionsColumn,
+  CustomActionsToggleProps
+} from '@patternfly/react-table';
+import DashboardWrapper from '../DashboardWrapper';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+
+interface Repository {
+  name: string;
+  branches: number | null;
+  prs: number | null;
+  workspaces: number;
+  lastCommit: string;
+}
+
+export const TablesAndTabs = () => {
+  // tab properties
+  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (tabIndex: number) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  // secondary tab properties
+  const [secondaryActiveTabKey, setSecondaryActiveTabKey] = React.useState<number>(10);
+  const handleSecondaryTabClick = (tabIndex: number) => {
+    setSecondaryActiveTabKey(tabIndex);
+  };
+
+  // drawer properties
+  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
+
+  // table properties
+  // In real usage, this data would come from some external source like an API via props.
+  const repositories: Repository[] = [
+    { name: 'Node 1', branches: 10, prs: 25, workspaces: 5, lastCommit: '2 days ago' },
+    { name: 'Node 2', branches: 8, prs: 30, workspaces: 2, lastCommit: '2 days ago' },
+    { name: 'Node 3', branches: 12, prs: 48, workspaces: 13, lastCommit: '30 days ago' },
+    { name: 'Node 4', branches: 3, prs: 8, workspaces: 20, lastCommit: '8 days ago' },
+    { name: 'Node 5', branches: 33, prs: 21, workspaces: 2, lastCommit: '26 days ago' }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const setRepoSelected = (event: React.FormEvent<HTMLInputElement>, repo: Repository, isSelecting = true) => {
+    setSelectedRepoNames(prevSelected => {
+      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+      return isSelecting ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
+    });
+    event.stopPropagation();
+  };
+  const onSelectAll = (isSelecting = true) => setSelectedRepoNames(isSelecting ? repositories.map(r => r.name) : []);
+  const allRowsSelected = selectedRepoNames.length === repositories.length;
+  const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
+
+  const [rowClicked, setRowClicked] = React.useState<string>(null);
+  const isRowClicked = (repo: Repository) => rowClicked === repo.name;
+
+  const defaultActions: IAction[] = [
+    {
+      title: 'Some action',
+      onClick: event => {
+        event.stopPropagation();
+        console.log('clicked on Some action');
+      }
+    },
+    {
+      title: <a href="https://www.patternfly.org">Link action</a>,
+      onClick: event => {
+        event.stopPropagation();
+        console.log('clicked on Link action');
+      }
+    },
+    {
+      isSeparator: true
+    },
+    {
+      title: 'Third action',
+      onClick: event => {
+        event.stopPropagation();
+        console.log('clicked on Third action');
+      }
+    }
+  ];
+
+  const customActionsToggle = (props: CustomActionsToggleProps) => (
+    <KebabToggle
+      isDisabled={props.isDisabled}
+      onToggle={(value, event) => {
+        props.onToggle(value);
+        event.stopPropagation();
+      }}
+    />
+  );
+
+  const toolbar = (
+    <Toolbar id="page-layout-table-column-management-action-toolbar-top" usePageInsets>
+      <ToolbarContent>
+        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+          <ToolbarItem>
+            <Select
+              onToggle={() => {}}
+              variant={SelectVariant.single}
+              aria-label="Select Input"
+              placeholderText="Name"
+            />
+          </ToolbarItem>
+        </ToolbarToggleGroup>
+        <ToolbarItem>
+          <OptionsMenu
+            id="page-layout-table-column-management-action-toolbar-top-options-menu-toggle"
+            isPlain
+            menuItems={[]}
+            toggle={
+              <OptionsMenuToggle
+                toggleTemplate={<SortAmountDownIcon aria-hidden="true" />}
+                aria-label="Sort"
+                hideCaret
+              />
+            }
+          />
+        </ToolbarItem>
+        <OverflowMenu breakpoint="md">
+          <OverflowMenuContent className="pf-u-display-none pf-u-display-block-on-lg">
+            <OverflowMenuGroup groupType="button" isPersistent>
+              <OverflowMenuItem isPersistent>
+                <Button variant="primary">Generate</Button>
+              </OverflowMenuItem>
+              <OverflowMenuItem isPersistent>
+                <Button variant="secondary">Deploy</Button>
+              </OverflowMenuItem>
+            </OverflowMenuGroup>
+          </OverflowMenuContent>
+          <OverflowMenuControl hasAdditionalOptions>
+            <Dropdown
+              onSelect={() => {}}
+              toggle={<KebabToggle onToggle={() => {}} />}
+              isOpen={false}
+              isPlain
+              dropdownItems={[]}
+            />
+          </OverflowMenuControl>
+        </OverflowMenu>
+        <ToolbarItem variant="pagination">
+          <Pagination
+            itemCount={36}
+            widgetId="pagination-options-menu-bottom"
+            page={1}
+            variant={PaginationVariant.top}
+            isCompact
+          />
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const tableComposable = (
+    <TableComposable aria-label="`Composable` table">
+      <Thead noWrap>
+        <Tr>
+          <Th
+            select={{
+              onSelect: (_event, isSelecting) => onSelectAll(isSelecting),
+              isSelected: allRowsSelected
+            }}
+          />
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.branches}</Th>
+          <Th>{columnNames.prs}</Th>
+          <Th>{columnNames.workspaces}</Th>
+          <Th>{columnNames.lastCommit}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {repositories.map((repo, rowIndex) => (
+          <Tr
+            key={repo.name}
+            onRowClick={event => {
+              if ((event.target as HTMLInputElement).type !== 'checkbox') {
+                setRowClicked(rowClicked === repo.name ? null : repo.name);
+                setIsExpanded(!isRowClicked(repo));
+              }
+            }}
+            isHoverable
+            isRowSelected={repo.name === rowClicked}
+          >
+            <Td
+              key={`${rowIndex}_0`}
+              select={{
+                rowIndex,
+                onSelect: (event, isSelected) => setRepoSelected(event, repo, isSelected),
+                isSelected: isRepoSelected(repo)
+              }}
+            />
+            <Td dataLabel={columnNames.name}>
+              {repo.name}
+              <div>
+                <a href="#">siemur/test-space</a>
+              </div>
+            </Td>
+            <Td dataLabel={columnNames.branches}>
+              <Flex>
+                <FlexItem>{repo.branches}</FlexItem>
+                <FlexItem>
+                  <CodeBranchIcon key="icon" />
+                </FlexItem>
+              </Flex>
+            </Td>
+            <Td dataLabel={columnNames.prs}>
+              <Flex>
+                <FlexItem>{repo.prs}</FlexItem>
+                <FlexItem>
+                  <CodeIcon key="icon" />
+                </FlexItem>
+              </Flex>
+            </Td>
+            <Td dataLabel={columnNames.workspaces}>
+              <Flex>
+                <FlexItem>{repo.workspaces}</FlexItem>
+                <FlexItem>
+                  <CubeIcon key="icon" />
+                </FlexItem>
+              </Flex>
+            </Td>
+            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
+            <Td key={`${rowIndex}_5`}>
+              <ActionsColumn items={defaultActions} actionsToggle={customActionsToggle} />
+            </Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </TableComposable>
+  );
+
+  const panelContent = (
+    <DrawerPanelContent widths={{ default: 'width_33', xl: 'width_33' }}>
+      <DrawerHead>
+        <DrawerActions>
+          <DrawerCloseButton
+            onClick={() => {
+              setRowClicked(null);
+              setIsExpanded(false);
+            }}
+          />
+        </DrawerActions>
+        <Flex spaceItems={{ default: 'spaceItemsSm' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <Title headingLevel="h2" size="lg">
+              {rowClicked}
+            </Title>
+          </FlexItem>
+          <FlexItem>
+            <a href="#">siemur/test-space</a>
+          </FlexItem>
+        </Flex>
+      </DrawerHead>
+      <DrawerPanelBody hasNoPadding>
+        <Tabs
+          activeKey={secondaryActiveTabKey}
+          onSelect={(_event, tabIndex) => handleSecondaryTabClick(Number(tabIndex))}
+          hasBorderBottom={false}
+          inset={{ default: 'insetMd', md: 'insetSm' }}
+          id="tabs-tables-secondary-tabs"
+        >
+          <Tab eventKey={10} title={<TabTitleText>Overview</TabTitleText>} tabContentId={`tabContent${10}`} />
+          <Tab eventKey={11} title={<TabTitleText>Activity</TabTitleText>} tabContentId={`tabContent${11}`} />
+          <Tab eventKey={12} title={<TabTitleText>Status</TabTitleText>} tabContentId={`tabContent${12}`} />
+        </Tabs>
+      </DrawerPanelBody>
+      <DrawerPanelBody>
+        <TabContent
+          key={10}
+          eventKey={10}
+          id={`tabContent${10}`}
+          activeKey={secondaryActiveTabKey}
+          hidden={10 !== secondaryActiveTabKey}
+        >
+          <TabContentBody>
+            <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>
+              <FlexItem>
+                <p>
+                  The content of the drawer really is up to you. It could have form fields, definition lists, text
+                  lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in
+                  here, and can also make the drawer scrollable.
+                </p>
+              </FlexItem>
+              <FlexItem>
+                <Progress value={33} title="Capacity" size={ProgressSize.sm} />
+              </FlexItem>
+              <FlexItem>
+                <Progress value={66} title="Modules" size={ProgressSize.sm} />
+              </FlexItem>
+              <Flex direction={{ default: 'column' }}>
+                <FlexItem>
+                  <Title headingLevel="h3">Tags</Title>
+                </FlexItem>
+                <FlexItem>
+                  <LabelGroup>
+                    {[1, 2, 3, 4, 5].map(labelNumber => (
+                      <Label variant="outline" key={`label-${labelNumber}`}>{`Tag ${labelNumber}`}</Label>
+                    ))}
+                  </LabelGroup>
+                </FlexItem>
+              </Flex>
+            </Flex>
+          </TabContentBody>
+        </TabContent>
+        <TabContent
+          key={11}
+          eventKey={11}
+          id={`tabContent${11}`}
+          activeKey={secondaryActiveTabKey}
+          hidden={11 !== secondaryActiveTabKey}
+        >
+          <TabContentBody>Activity panel</TabContentBody>
+        </TabContent>
+        <TabContent
+          key={12}
+          eventKey={12}
+          id={`tabContent${12}`}
+          activeKey={secondaryActiveTabKey}
+          hidden={12 !== secondaryActiveTabKey}
+        >
+          <TabContentBody>Status panel</TabContentBody>
+        </TabContent>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const tabContent = (
+    <Drawer isExpanded={isExpanded} isInline>
+      <DrawerContent panelContent={panelContent}>
+        <DrawerContentBody>
+          {toolbar}
+          <Divider />
+          {tableComposable}
+          <Pagination
+            id="page-layout-table-column-management-action-toolbar-bottom"
+            itemCount={36}
+            widgetId="pagination-options-menu-bottom"
+            page={1}
+            variant={PaginationVariant.bottom}
+          />
+        </DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  return (
+    <DashboardWrapper hasNoBreadcrumb>
+      <React.Fragment>
+        <PageSection variant={PageSectionVariants.light}>
+          <Title headingLevel="h1" size="2xl">
+            Nodes
+          </Title>
+        </PageSection>
+        <PageSection type="tabs" variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+          <Tabs
+            activeKey={activeTabKey}
+            onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
+            usePageInsets
+            id="tabs-table-tabs-list"
+          >
+            <Tab eventKey={0} title={<TabTitleText>Nodes</TabTitleText>} tabContentId={`tabContent${0}`} />
+            <Tab eventKey={1} title={<TabTitleText>Node connectors</TabTitleText>} tabContentId={`tabContent${1}`} />
+          </Tabs>
+        </PageSection>
+        <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+          <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
+            <TabContentBody>{tabContent}</TabContentBody>
+          </TabContent>
+          <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
+            <TabContentBody>Node connectors panel</TabContentBody>
+          </TabContent>
+        </PageSection>
+      </React.Fragment>
+    </DashboardWrapper>
+  );
+};

package/src/helpers/Popper/Popper.tsx

@@ -14,17 +14,6 @@ const getOppositePlacement = (placement: Placement): any =>
     (matched: string) => hash[matched as 'left' | 'right' | 'bottom' | 'top'] as BasePlacement
   );
 
-export interface ToggleMenuBaseProps {
-  /** The container to append the menu to. Defaults to 'inline'
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'parent' | 'inline';
-}
-
 export const getOpacityTransition = (animationDuration: number) =>
   `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;
 

package/src/components/AboutModal/__tests__/Generated/AboutModal.test.tsx

@@ -1,27 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModal } from '../../AboutModal';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModal should match snapshot (auto-generated)', () => {
-  const view = render(
-    <AboutModal
-      children={<div>ReactNode</div>}
-      className={"''"}
-      isOpen={false}
-      onClose={(): any => undefined}
-      productName={"''"}
-      trademark={"''"}
-      brandImageSrc={'string'}
-      brandImageAlt={'string'}
-      backgroundImageSrc={"''"}
-      noAboutModalBoxContentContainer={false}
-      appendTo={null}
-    />
-  );
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/Generated/AboutModalBox.test.tsx

@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalBox } from '../../AboutModalBox';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModalBox should match snapshot (auto-generated)', () => {
-  const view = render(<AboutModalBox children={<div>ReactNode</div>} className={"''"} />);
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/Generated/AboutModalBoxBrand.test.tsx

@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalBoxBrand } from '../../AboutModalBoxBrand';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModalBoxBrand should match snapshot (auto-generated)', () => {
-  const view = render(<AboutModalBoxBrand className={"''"} src={"''"} alt={'string'} />);
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/Generated/AboutModalBoxCloseButton.test.tsx

@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalBoxCloseButton } from '../../AboutModalBoxCloseButton';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModalBoxCloseButton should match snapshot (auto-generated)', () => {
-  const view = render(<AboutModalBoxCloseButton className={"''"} onClose={() => undefined as any} />);
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/Generated/AboutModalBoxContent.test.tsx

@@ -1,21 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalBoxContent } from '../../AboutModalBoxContent';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModalBoxContent should match snapshot (auto-generated)', () => {
-  const view = render(
-    <AboutModalBoxContent
-      children={<div>ReactNode</div>}
-      className={"''"}
-      id={'string'}
-      trademark={'string'}
-      noAboutModalBoxContentContainer={false}
-    />
-  );
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/Generated/AboutModalBoxHeader.test.tsx

@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalBoxHeader } from '../../AboutModalBoxHeader';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModalBoxHeader should match snapshot (auto-generated)', () => {
-  const view = render(<AboutModalBoxHeader className={"''"} productName={"''"} id={'string'} />);
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/Generated/AboutModalBoxHero.test.tsx

@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalBoxHero } from '../../AboutModalBoxHero';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModalBoxHero should match snapshot (auto-generated)', () => {
-  const view = render(<AboutModalBoxHero className={'string'} backgroundImageSrc={'string'} />);
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/Generated/AboutModalContainer.test.tsx

@@ -1,27 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalContainer } from '../../AboutModalContainer';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModalContainer should match snapshot (auto-generated)', () => {
-  const view = render(
-    <AboutModalContainer
-      children={<div>ReactNode</div>}
-      className={"''"}
-      isOpen={false}
-      onClose={() => undefined}
-      productName={"''"}
-      trademark={'string'}
-      brandImageSrc={'string'}
-      brandImageAlt={'string'}
-      backgroundImageSrc={'string'}
-      aria-labelledby={'string'}
-      aria-describedby={'string'}
-    />
-  );
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/Generated/__snapshots__/AboutModal.test.tsx.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AboutModal should match snapshot (auto-generated) 1`] = `<div />`;

package/src/components/AboutModal/__tests__/Generated/__snapshots__/AboutModalBox.test.tsx.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AboutModalBox should match snapshot (auto-generated) 1`] = `
-<div>
-  <div
-    aria-modal="true"
-    class="pf-c-about-modal-box ''"
-    role="dialog"
-  >
-    <div>
-      ReactNode
-    </div>
-  </div>
-</div>
-`;

package/src/components/AboutModal/__tests__/Generated/__snapshots__/AboutModalBoxBrand.test.tsx.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AboutModalBoxBrand should match snapshot (auto-generated) 1`] = `
-<div>
-  <div
-    class="pf-c-about-modal-box__brand ''"
-  >
-    <img
-      alt="string"
-      class="pf-c-about-modal-box__brand-image"
-      src="''"
-    />
-  </div>
-</div>
-`;

package/src/components/AboutModal/__tests__/Generated/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AboutModalBoxCloseButton should match snapshot (auto-generated) 1`] = `
-<div>
-  <div
-    class="pf-c-about-modal-box__close ''"
-  >
-    <button
-      aria-disabled="false"
-      aria-label="Close Dialog"
-      class="pf-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-1"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 352 512"
-        width="1em"
-      >
-        <path
-          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-        />
-      </svg>
-    </button>
-  </div>
-</div>
-`;