@digigov/react-core 2.0.0-6452adf3 → 2.0.0-66d7c5e2

package/src/Hint/index.test.tsx

@@ -7,11 +7,17 @@ it('renders the Hint with no props', () => {
   expect(render(<Hint>hello</Hint>).baseElement).toMatchSnapshot();
 });
 it('renders the Hint with fontSize=14', () => {
-  expect(render(<Hint fontSize={14}>hello</Hint>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Hint fontSize={14}>hello</Hint>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Hint with fontSize=16', () => {
-  expect(render(<Hint fontSize={16}>hello</Hint>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Hint fontSize={16}>hello</Hint>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Hint with fontSize=24', () => {
-  expect(render(<Hint fontSize={24}>hello</Hint>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Hint fontSize={24}>hello</Hint>).baseElement
+  ).toMatchSnapshot();
 });

package/src/Hint/index.tsx

@@ -9,12 +9,12 @@ export interface HintProps extends TypographyProps {
    */
   breakWords?: boolean;
   /**
- * size is optional.
- * @value 'lg' Use it when a lg text is an introductory paragraph that you can use at the top of a page to summarize the content.
- * @value 'md' The majority of your body should use the standard 'md' size.
- * @value 'sm' Use it sparingly to make your text font size smaller: 16px on larger screens and 14px on smaller screens.
- * @default 'md'
- */
+   * size is optional.
+   * @value 'lg' Use it when a lg text is an introductory paragraph that you can use at the top of a page to summarize the content.
+   * @value 'md' The majority of your body should use the standard 'md' size.
+   * @value 'sm' Use it sparingly to make your text font size smaller: 16px on larger screens and 14px on smaller screens.
+   * @default 'md'
+   */
   size?: 'lg' | 'md' | 'sm';
 }
 /**

package/src/ImageLogo/index.test.tsx

@@ -8,5 +8,7 @@ it('renders the Hint with src prop', () => {
 });
 
 it('renders the Hint with  variant and src props', () => {
-  expect(render(<ImageLogo variant="dark" src="logo.png" />).baseElement).toMatchSnapshot();
+  expect(
+    render(<ImageLogo variant="dark" src="logo.png" />).baseElement
+  ).toMatchSnapshot();
 });

package/src/ImageLogo/index.tsx

@@ -19,10 +19,7 @@ export interface ImageLogoProps extends BaseProps<'img'> {
  * This component can't have children.
  */
 export const ImageLogo = React.forwardRef<HTMLImageElement, ImageLogoProps>(
-  function ImageLogo(
-    { lang, src, variant, className, children, ...props },
-    ref
-  ) {
+  function ImageLogo({ src, variant, className, ...props }, ref) {
     return (
       <>
         <Base

package/src/ImageLogoSet/index.test.tsx

@@ -15,6 +15,7 @@ it('renders the Hint with  variants=[light] and src props', () => {
 
 it('renders the Hint with  variants=[light, dark] and src props', () => {
   expect(
-    render(<ImageLogoSet variants={['light', 'dark']} src="logo.png" />).baseElement
+    render(<ImageLogoSet variants={['light', 'dark']} src="logo.png" />)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/ImageLogoSet/index.tsx

@@ -12,21 +12,18 @@ export interface ImageLogoSet extends BaseProps<'img'> {
    * variant is optional.
    * variant is used to display images depending the theme (dark, light).
    */
-  variants?: Array<'dark' | 'light'>;
+  variants?: ('dark' | 'light')[];
 }
 /**
  * ImageLogoSet is used as image inverter depending the theme (dark, light).
  * This component can't have children.
  */
 export const ImageLogoSet = React.forwardRef<HTMLImageElement, ImageLogoSet>(
-  function ImageLogoSet(
-    { lang, src, variants = ['dark', 'light'], className, children, ...props },
-    ref
-  ) {
+  function ImageLogoSet({ src, variants = ['dark', 'light'], ...props }, ref) {
     return (
       <>
         {variants.map((variant) => {
-          const imageSrc = src?.replace(/(\.[^\.]+)$/, `--${variant}$1`);
+          const imageSrc = src?.replace(/(\.[^.]+)$/, `--${variant}$1`);
           return (
             <ImageLogo
               key={variant}

package/src/KitchenSinkAllComponents/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { Base, BaseProps } from '@digigov/react-core/Base';
 
-export interface KitchenSinkAllComponentsProps extends BaseProps<'div'> { }
+export interface KitchenSinkAllComponentsProps extends BaseProps<'div'> {}
 
 export const KitchenSinkAllComponents = React.forwardRef<
   HTMLDivElement,

package/src/KitchenSinkCard/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Card, { CardProps } from '@digigov/react-core/Card';
 
-export interface KitchenSinkCardProps extends CardProps { }
+export interface KitchenSinkCardProps extends CardProps {}
 
 export const KitchenSinkCard = React.forwardRef<
   HTMLDivElement,

package/src/KitchenSinkCategory/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { Base, BaseProps } from '@digigov/react-core/Base';
 
-export interface KitchenSinkCategoryProps extends BaseProps<'div'> { }
+export interface KitchenSinkCategoryProps extends BaseProps<'div'> {}
 
 export const KitchenSinkCategory = React.forwardRef<
   HTMLDivElement,

package/src/KitchenSinkContentInfo/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { Base, BaseProps } from '@digigov/react-core/Base';
 
-export interface KitchenSinkContentInfoProps extends BaseProps<'div'> { }
+export interface KitchenSinkContentInfoProps extends BaseProps<'div'> {}
 
 export const KitchenSinkContentInfo = React.forwardRef<
   HTMLDivElement,

package/src/KitchenSinkContentTags/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { Base, BaseProps } from '@digigov/react-core/Base';
 
-export interface KitchenSinkContentTagsProps extends BaseProps<'div'> { }
+export interface KitchenSinkContentTagsProps extends BaseProps<'div'> {}
 
 export const KitchenSinkContentTags = React.forwardRef<
   HTMLDivElement,

package/src/KitchenSinkHeading/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Heading, { HeadingProps } from '@digigov/react-core/Heading';
 
-export interface KitchenSinkHeadingProps extends HeadingProps { }
+export interface KitchenSinkHeadingProps extends HeadingProps {}
 
 export const KitchenSinkHeading = React.forwardRef<
   HTMLHeadingElement,

package/src/KitchenSinkLetterContent/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { Base, BaseProps } from '@digigov/react-core/Base';
 
-export interface KitchenSinkLetterContentProps extends BaseProps<'div'> { }
+export interface KitchenSinkLetterContentProps extends BaseProps<'div'> {}
 
 export const KitchenSinkLetterContent = React.forwardRef<
   HTMLDivElement,

package/src/LabelContainer/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import LabelContainer from '@digigov/react-core/LabelContainer';
 
 it('renders the Label with no props', () => {
-  expect(render(<LabelContainer>hello</LabelContainer>).baseElement).toMatchSnapshot();
+  expect(
+    render(<LabelContainer>hello</LabelContainer>).baseElement
+  ).toMatchSnapshot();
 });

package/src/LabelContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface LabelContainerProps extends BaseProps<'label'> { }
+export interface LabelContainerProps extends BaseProps<'label'> {}
 /**
  * Label component defines a label for several elements at forms.
  */

package/src/LabelTitle/index.test.tsx

@@ -8,23 +8,33 @@ it('renders the LabelTitle with no props', () => {
 });
 
 it('renders the Label with heading prop', () => {
-  expect(render(<LabelTitle heading>hello</LabelTitle>).baseElement).toMatchSnapshot();
+  expect(
+    render(<LabelTitle heading>hello</LabelTitle>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Label with size s prop', () => {
-  expect(render(<LabelTitle size="sm">hello</LabelTitle>).baseElement).toMatchSnapshot();
+  expect(
+    render(<LabelTitle size="sm">hello</LabelTitle>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Label with size m prop', () => {
-  expect(render(<LabelTitle size="md">hello</LabelTitle>).baseElement).toMatchSnapshot();
+  expect(
+    render(<LabelTitle size="md">hello</LabelTitle>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Label with size l prop', () => {
-  expect(render(<LabelTitle size="lg">hello</LabelTitle>).baseElement).toMatchSnapshot();
+  expect(
+    render(<LabelTitle size="lg">hello</LabelTitle>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Label with size xl prop', () => {
-  expect(render(<LabelTitle size="xl">hello</LabelTitle>).baseElement).toMatchSnapshot();
+  expect(
+    render(<LabelTitle size="xl">hello</LabelTitle>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the Label with heading and size s props', () => {

package/src/LabeledText/index.test.tsx

@@ -4,7 +4,9 @@ import { render } from '@testing-library/react';
 import LabeledText from '@digigov/react-core/LabeledText';
 
 it('renders the LabeledText with no props', () => {
-  expect(render(<LabeledText>hello</LabeledText>).baseElement).toMatchSnapshot();
+  expect(
+    render(<LabeledText>hello</LabeledText>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the LabeledText with active true', () => {

package/src/LinkBase/index.test.tsx

@@ -8,9 +8,13 @@ it('renders the Link with no props', () => {
 });
 
 it('renders the LinkBase with underline=true', () => {
-  expect(render(<LinkBase underline={true}>hello</LinkBase>).baseElement).toMatchSnapshot();
+  expect(
+    render(<LinkBase underline={true}>hello</LinkBase>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the LinkBase with underline=false', () => {
-  expect(render(<LinkBase underline={false}>hello</LinkBase>).baseElement).toMatchSnapshot();
+  expect(
+    render(<LinkBase underline={false}>hello</LinkBase>).baseElement
+  ).toMatchSnapshot();
 });

package/src/LinkBase/index.tsx

@@ -23,7 +23,10 @@ export interface LinkBaseProps extends BaseProps<'a'> {
  * This component defines a hyperlink, which is used to link from one page to another.
  */
 export const LinkBase = React.forwardRef<HTMLAnchorElement, LinkBaseProps>(
-  function LinkBase({ underline = true, defaultStyle = true, className, children, ...props }, ref) {
+  function LinkBase(
+    { underline = true, defaultStyle = true, className, children, ...props },
+    ref
+  ) {
     return (
       <Base
         as="a"
@@ -32,6 +35,7 @@ export const LinkBase = React.forwardRef<HTMLAnchorElement, LinkBaseProps>(
           'ds-link': defaultStyle,
           'ds-link--no-underline': !underline,
         })}
+        {...(props.as && { defaultStyle: defaultStyle, underline: underline })}
         {...props}
       >
         {children}

package/src/List/__snapshots__/index.test.tsx.snap

@@ -1,18 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the List with listStyle=bullet 1`] = `
-<body>
-  <div>
-    <ol
-      class="ds-list ds-list--bullet"
-    >
-      hello
-    </ol>
-  </div>
-</body>
-`;
-
-exports[`renders the List with listStyle=bullet 2`] = `
+exports[`renders the List with children and listStyle=bullet 1`] = `
 <body>
   <div>
     <ol
@@ -33,11 +21,11 @@ exports[`renders the List with listStyle=bullet 2`] = `
 </body>
 `;
 
-exports[`renders the List with listStyle=bullet and dense 1`] = `
+exports[`renders the List with children and listStyle=number 1`] = `
 <body>
   <div>
     <ol
-      class="ds-list ds-list--bullet"
+      class="ds-list ds-list--number"
     >
       <li
         class="ds-list__item"
@@ -54,11 +42,11 @@ exports[`renders the List with listStyle=bullet and dense 1`] = `
 </body>
 `;
 
-exports[`renders the List with listStyle=number 1`] = `
+exports[`renders the List with listStyle=bullet 1`] = `
 <body>
   <div>
     <ol
-      class="ds-list ds-list--number"
+      class="ds-list ds-list--bullet"
     >
       hello
     </ol>
@@ -66,11 +54,11 @@ exports[`renders the List with listStyle=number 1`] = `
 </body>
 `;
 
-exports[`renders the List with listStyle=number 2`] = `
+exports[`renders the List with listStyle=bullet and dense 1`] = `
 <body>
   <div>
     <ol
-      class="ds-list ds-list--number"
+      class="ds-list ds-list--bullet"
     >
       <li
         class="ds-list__item"
@@ -87,6 +75,18 @@ exports[`renders the List with listStyle=number 2`] = `
 </body>
 `;
 
+exports[`renders the List with listStyle=number 1`] = `
+<body>
+  <div>
+    <ol
+      class="ds-list ds-list--number"
+    >
+      hello
+    </ol>
+  </div>
+</body>
+`;
+
 exports[`renders the List with listStyle=number and dense 1`] = `
 <body>
   <div>

package/src/List/index.test.tsx

@@ -9,14 +9,18 @@ it('renders the List with no props', () => {
 });
 
 it('renders the List with listStyle=bullet', () => {
-  expect(render(<List listStyle={'bullet'}>hello</List>).baseElement).toMatchSnapshot();
+  expect(
+    render(<List listStyle={'bullet'}>hello</List>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the List with listStyle=number', () => {
-  expect(render(<List listStyle={'number'}>hello</List>).baseElement).toMatchSnapshot();
+  expect(
+    render(<List listStyle={'number'}>hello</List>).baseElement
+  ).toMatchSnapshot();
 });
 
-it('renders the List with listStyle=number', () => {
+it('renders the List with children and listStyle=number', () => {
   expect(
     render(
       <List listStyle={'number'}>
@@ -27,7 +31,7 @@ it('renders the List with listStyle=number', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the List with listStyle=bullet', () => {
+it('renders the List with children and listStyle=bullet', () => {
   expect(
     render(
       <List listStyle={'bullet'}>

package/src/ListItem/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface ListItemProps extends BaseProps<'li'> { }
+export interface ListItemProps extends BaseProps<'li'> {}
 /**
  * ListItem must be inside List compoenent.
  */

package/src/LoaderContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface LoaderContainerProps extends BaseProps<'div'> { }
+export interface LoaderContainerProps extends BaseProps<'div'> {}
 /**
  * LoaderContainer contains the svg icon that is being displayed in the page and works as a loading indicator.
  */

package/src/Main/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the Main with no props 1`] = `
 <body>
   <div>
     <main
-      class="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
+      class="ds-main ds-grid-item xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
       id="main-content"
     >
       hello

package/src/Main/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface MainProps extends GridProps { }
+export interface MainProps extends GridProps {}
 /**
  * Use this inside Container component for placing the main content of the page.
  */

package/src/MastheadBody/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import MastheadBody from '@digigov/react-core/MastheadBody';
 
 it('renders the MastheadBody with no props', () => {
-  expect(render(<MastheadBody>hello</MastheadBody>).baseElement).toMatchSnapshot();
+  expect(
+    render(<MastheadBody>hello</MastheadBody>).baseElement
+  ).toMatchSnapshot();
 });

package/src/MastheadBody/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface MastheadBodyProps extends BaseProps<'p'> { }
+export interface MastheadBodyProps extends BaseProps<'p'> {}
 /**
  * Use the MastheadBody inside Masthead an you can wrap your content inside Main component.
  */

package/src/MastheadLogo/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface MastheadLogoProps extends BaseProps<'img'> { }
+export interface MastheadLogoProps extends BaseProps<'img'> {}
 /**
  * MastheadLogo is a component for logos and images in the masthead.
  * It is used inside to Masthead.

package/src/ModalAction/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import ModalAction from '@digigov/react-core/ModalAction';
 
 it('renders the ModalAction with no props', () => {
-  expect(render(<ModalAction>hello</ModalAction>).baseElement).toMatchSnapshot();
+  expect(
+    render(<ModalAction>hello</ModalAction>).baseElement
+  ).toMatchSnapshot();
 });

package/src/ModalAction/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface ModalActionProps extends BaseProps<'div'> { }
+export interface ModalActionProps extends BaseProps<'div'> {}
 /**
  * ModelAction contains the action behavior for Modal Component.
  * We can use links, Buttons or ButtonGroup with max of two buttons

package/src/ModalContainer/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import ModalContainer from '@digigov/react-core/ModalContainer';
 
 it('renders the Modal with no props', () => {
-  expect(render(<ModalContainer>hello</ModalContainer>).baseElement).toMatchSnapshot();
+  expect(
+    render(<ModalContainer>hello</ModalContainer>).baseElement
+  ).toMatchSnapshot();
 });

package/src/ModalContent/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import ModalContent from '@digigov/react-core/ModalContent';
 
 it('renders the ModalContent with no props', () => {
-  expect(render(<ModalContent>hello</ModalContent>).baseElement).toMatchSnapshot();
+  expect(
+    render(<ModalContent>hello</ModalContent>).baseElement
+  ).toMatchSnapshot();
 });

package/src/ModalContent/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface ModalContentProps extends BaseProps<'div'> { }
+export interface ModalContentProps extends BaseProps<'div'> {}
 /**
  * ModalContent contains the text or any other element for Modal Component
  * Use ModalContent  inside Modal component as children

package/src/ModalHeading/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import ModalHeading from '@digigov/react-core/ModalHeading';
 
 it('renders the ModalHeading with no props', () => {
-  expect(render(<ModalHeading>hello</ModalHeading>).baseElement).toMatchSnapshot();
+  expect(
+    render(<ModalHeading>hello</ModalHeading>).baseElement
+  ).toMatchSnapshot();
 });

package/src/ModalHeading/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Heading, { HeadingProps } from '@digigov/react-core/Heading';
 
-export interface ModalHeadingProps extends HeadingProps { }
+export interface ModalHeadingProps extends HeadingProps {}
 /**
  * ModalHeading gives header title to Modal Component
  * Use ModalHeading inside Modal component as children

package/src/Nav/index.test.tsx

@@ -17,10 +17,14 @@ it('renders the Nav with drawer="never" prop', () => {
   expect(render(<Nav drawer="never">hello</Nav>).baseElement).toMatchSnapshot();
 });
 it('renders the Nav with drawer="mdDown" prop', () => {
-  expect(render(<Nav drawer="mdDown">hello</Nav>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Nav drawer="mdDown">hello</Nav>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Nav with drawer="always" prop', () => {
-  expect(render(<Nav drawer="always">hello</Nav>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Nav drawer="always">hello</Nav>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the Nav with drawer="always", border and open props', () => {
   expect(

package/src/NavListItemActionBase/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,101 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders the NavListItemActionBase with arrow and label props 1`] = `
+<body>
+  <div>
+    <li
+      class="ds-nav__list-item"
+    >
+      <button
+        class="ds-print-hidden ds-nav__list-item-btn ds-link"
+      >
+        hello
+        <svg
+          aria-hidden="true"
+          as="svg"
+          class="ds-svg-icon--chevron ds-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            as="path"
+            class=""
+            d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+          />
+        </svg>
+      </button>
+    </li>
+  </div>
+</body>
+`;
+
+exports[`renders the NavListItemActionBase with arrow, badgeText and label props 1`] = `
+<body>
+  <div>
+    <li
+      class="ds-nav__list-item"
+    >
+      <button
+        badgetext="hello"
+        class="ds-print-hidden ds-nav__list-item-btn ds-link"
+      >
+        hello
+      </button>
+      <span
+        class="ds-nav__list-item-badge"
+      >
+        hello
+      </span>
+    </li>
+  </div>
+</body>
+`;
+
+exports[`renders the NavListItemActionBase with href prop 1`] = `
+<body>
+  <div>
+    <li
+      class="ds-nav__list-item"
+    >
+      <a
+        class="ds-nav__list-item-link ds-link"
+        href="/#"
+      >
+        hello
+      </a>
+    </li>
+  </div>
+</body>
+`;
+
+exports[`renders the NavListItemActionBase with label prop 1`] = `
+<body>
+  <div>
+    <li
+      class="ds-nav__list-item"
+    >
+      <button
+        class="ds-print-hidden ds-nav__list-item-btn ds-link"
+      >
+        hello
+      </button>
+    </li>
+  </div>
+</body>
+`;
+
+exports[`renders the NavListItemActionBase with no props 1`] = `
+<body>
+  <div>
+    <li
+      class="ds-nav__list-item"
+    >
+      <button
+        class="ds-print-hidden ds-nav__list-item-btn ds-link"
+      >
+        hello
+      </button>
+    </li>
+  </div>
+</body>
+`;