@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Search.tsx

@@ -0,0 +1,304 @@
+import { ChangeEvent, forwardRef, InputHTMLAttributes, KeyboardEvent, useEffect, useRef, useState } from 'react';
+import SearchIconLg from '../assets/img/search_icon_light.svg';
+import SearchIcon from '../assets/img/search.svg';
+import CloseIcon from '../assets/img/close_icon_dark.svg';
+import { twMerge } from 'tailwind-merge';
+// import { useNavigate } from 'react-router-dom';
+
+// TODO: UX Question re no results
+// NOTE: UX (Sam) noted that a results page will be required for some cases. We talked, and we will
+// return an object or set a callback that supplies an object of results as they are presented
+// in the type-ahead results list at the point the user clicks the button
+// NOTE: UX (Sam) indicated that the 'X' clears the search content, does NOT shrink it. That should
+// probably be a state var like 'initial = icon', user then clicks to expand
+
+// Searchable Data must conform to an array of this interface
+export interface SearchDataItem {
+  path: string;
+  title?: string;
+  content: string;
+}
+
+// Interface of search results - can use index to obtain path
+export interface DataSearchResults {
+  input: string;
+  pages: {
+    title?: string;
+    path?: string;
+    results: {
+      characters: string;
+      index: number;
+    }[]
+  }[]
+}
+
+export interface SearchProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+    className?: string;
+    searchableData: SearchDataItem[];
+    ariaLabel?: string;
+    iconLink?: boolean;
+    setSearchResults?: (res: DataSearchResults) => void;
+    mobileOnly?: boolean;
+}
+
+export const Search = forwardRef<HTMLInputElement, SearchProps>(
+  (
+    {
+      className,
+      ariaLabel = "Search",
+      iconLink = false,
+      searchableData,
+      setSearchResults,
+      mobileOnly = false,
+      ...props
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const resultsRef = useRef<HTMLDivElement>(null);  // TODO: necessary?
+    const [value, setValue] = useState('');
+    const [resultsList, setResultsList] = useState<DataSearchResults>();
+    const [iconOnly, setIconOnly] = useState<boolean>(iconLink);
+    // const [groupedResults, setGroupedResults] = useState();
+    // const [navigatePath, setNavigatePath] = useState<string>();
+    // const navigate = useNavigate();
+
+    // useEffect (() => {
+    //   if (navigatePath) {
+    //     navigate(navigatePath);
+    //   }
+    // }, [navigate, navigatePath]);
+
+    const handleEnter = (e: KeyboardEvent<HTMLInputElement>) => {
+      // if returning results list:
+      if (e.key === 'Enter') {
+        if (setSearchResults) {
+          // we are returning results - do that
+          handleSearchClick();
+        } else {
+          // execute first result of real-time list
+          if (resultsList && resultsList.pages[0].path) {
+            // console.log('resultsList[0]: ' + resultsList.pages[0].path);
+            window.location.href=resultsList.pages[0].path;
+          }
+        }
+      }
+    }
+
+    const selectX = () => {
+      setValue(''); // if xClears, onClick clear content
+      setResultsList(undefined);
+    }
+
+    useEffect (() => {
+      setIconOnly(iconLink);
+    }, [iconLink]);
+
+    // Search Function string input
+    // returns 15 characters following searched term (add term plus return characters string)
+    // as well as array index (from which we can retrieve the path value)
+    function searchFilter(searchText: string): DataSearchResults {
+      const lower = searchText.toLowerCase();
+      const pages: DataSearchResults["pages"] = [];
+
+      searchableData.forEach((page, pageIndex) => {
+        const pageResults: { characters: string; index: number }[] = [];
+        let start = page.content.toLowerCase().indexOf(lower);
+
+        while (start !== -1) {
+          const snippet = page.content.substring(
+            start + lower.length,
+            start + lower.length + 15
+          );
+          pageResults.push({ characters: snippet, index: pageIndex });
+          start = page.content.toLowerCase().indexOf(lower, start + 1);
+        }
+
+        // only emit a page entry if we found at least one match
+        if (pageResults.length) {
+          pages.push({
+            title: page.title,
+            path: page.path,
+            results: pageResults,
+          });
+        }
+      });
+
+      return { input: searchText, pages };
+    }
+
+    // Call searchFilter() function w/ input data if appropriate
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+      const newValue = event.target.value;
+      setValue(newValue);
+
+      if (!newValue) {
+        // clear out search results when input is empty
+        // setSearchResults?.({ input: "", pages: [] });
+        setResultsList(undefined);
+        return;
+      }
+
+      const results = searchFilter(newValue);
+      // setSearchResults?.(results);  // call-back for use in storybook (temp?)
+      setResultsList(results);      // local results
+    };
+
+
+    const handleSearchClick = () => {
+      const newValue = inputRef.current?.value ?? '';
+
+
+      if (setSearchResults) {
+        if (newValue.length > 0) {
+          const results = searchFilter(newValue);
+          setSearchResults?.(results);
+        } else {
+          setSearchResults({input: '', pages: [{results: []}]});
+        }
+      }
+    };
+
+    // mobile - w: 309 h: 48 border: 0.5
+    //    input h-32px p: 8x8
+    // tablet - w: 334 h: 50 border: 0.5
+    //    input h-34px p: 8x8
+    // desk   - w: 350 h: 56
+    //    input h: 56  p: 0
+
+    const inputClasses = `grow appearance-none h-8 md:h-[32px] lg:h-14 py-2 lg:ps-[19px] rounded-tl rounded-bl
+    rounded-br-none rounded-tr-none lg:border border-[#07192d]
+    font-['Arial'] bg-white text-[#333234] text-base lg:text-lg
+    hover:border-[#5992fa] focus:border-[#5992fa] outline-hidden `;
+
+    // TODO: Border Color for FOCUS
+    return (
+      iconOnly ?
+        // Display solo search icon button to expand search component
+        <span className='w-[52px] h-[50px] p-2 rounded-sm border border-[#6a686b]
+            inline-flex flex-col justify-center items-center bg-white'>
+          <button className="appearance-none p-0 m-0 border-0 flex items-center justify-center align-middle"
+              onClick={() => setIconOnly(false)}  >
+            <img className='' src={SearchIcon} alt='search icon' />
+          </button>
+        </span>
+        :
+
+      // Container including input + output list box
+      <span className={`h-12 md:h-[50px] lg:h-14 flex items-center relative ${iconOnly && 'hidden'}`}>
+
+        {/* container for input + icon(s), displays border up to md only */}
+        <span className={`
+            border-[#6a686b] w-[309px] md:w-[334px] lg:w-[350px]
+            inline-flex bg-white items-center
+            ${resultsList ?
+              ' border-t border-l border-r rounded-tl rounded-tr lg:border-none ' : // results, round top corners only
+              ' border lg:border-0 rounded-sm ' // no results, box only rounded
+            }
+            `}>
+          {/* padding 12px */}
+          {/* left search icon (small & medium only */}
+          <button onClick={handleSearchClick}>
+            <span className='lg:hidden rounded-tl px-2 rounded-bl '>
+              <img className='' src={SearchIcon} alt='search icon' />
+            </span>
+          </button>
+          <input
+            className={twMerge(inputClasses, className)}
+            aria-label={ariaLabel}
+            value={value}
+            onChange={handleInputChange}
+            placeholder='Search result'
+            onKeyDown={(e) => handleEnter(e)}
+            // onKeyDown={(e) => {
+            //   if (e.key === 'Enter') {
+            //     handleSearchClick();
+            //   }
+            // }}
+            // disabled={disabled}
+            // className={cn(inputVariants({variant, inputSize, className}))}
+            ref={(node) => {
+              if (typeof ref === 'function') ref(node);
+              else if (ref) ref.current = node;
+              inputRef.current = node; // Maintain local reference
+            }}
+            {...props}
+          />
+          {/* p-[17px] vs p-4 due to the 1px border on the input   */}
+          {/* right search icon (large only) */}
+          <button onClick={handleSearchClick}>
+          <span className='hidden lg:flex items-center size-14 p-[17px] bg-[#07192d]
+              rounded-tr rounded-br '>
+            <img className='' src={SearchIconLg} alt='search icon' />
+          </span>
+          </button>
+          <span className='lg:hidden items-center p-3'>{/* padding 12px? */}
+            {/* button --> onClick handler for search */}
+            <button className="appearance-none p-0 m-0 border-0 flex items-center justify-center align-middle"
+                onClick={  () => selectX() } >
+              <img className='' src={CloseIcon} alt='search icon' />
+            </button>
+          </span>
+        </span>
+            {/* <div>setSearchResults: {setSearchResults ? 'defined' : 'undefined'}</div> */}
+        { (resultsList && !setSearchResults) && (
+          <>
+          {/* Pads between input and results - allows bottom border of input to be displayed and not covered */}
+          <div
+            className={`hidden lg:absolute w-[309px] md:w-[334px] lg:w-[293px] top-full -mt-1 pt-1
+              focus:outline-hidden -z-10 ms overflow-hidden h-8
+              bg-white lg:shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]
+              border-[#6a686b] border-l border-r lg:border-none
+              `
+            }
+          ></div>
+
+          <div
+            role="listbox"
+            ref={resultsRef}
+            aria-label="Select option"
+            // onKeyDown={handleMenuKeyDown}
+            className={`absolute w-[309px] md:w-[334px] lg:w-[293px] top-[calc(100%+4px)] -mt-1 pt-1
+              focus:outline-hidden z-10 ms overflow-hidden
+              bg-white lg:shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]
+              border-[#6a686b] border-l border-b border-r lg:border-none
+              `
+
+              //  350-56 - 294
+              //  inline-flex flex-col justify-start items-start">
+
+            }
+          >
+            <hr className="mb-1 -mt-1 mx-2 border-b-0 border-[#A1A6A8] lg:border-none" />
+          {/* item.index inside map denotes array index, can use to call out path and title for that item */}
+          {resultsList.pages.map((page, index) => (
+
+            <div key={index} className="ms-4">
+              <div className="font-bold text-sm">
+                <a role='option' href={page.path} className="text-blue-700 underline">
+                  {/* */}{page.title && page.title}
+                </a>
+              </div>
+              {page.results.map((result, index) => (
+                <div className="ms-4">
+                  <span className="text-[#1c1d1f]">{resultsList.input}</span>
+                  <span className="text-[#A1A6A8] lg:text-[#4E4E4E]">{result.characters}</span>
+                </div>
+              ))}
+            </div>
+          ))}
+
+          { resultsList?.pages?.length < 1 &&
+            <div className='ms-4 mb-1 text-[#1c1d1f]' >no search results</div>
+          }
+          </div>
+        </>
+        )}
+      </span>
+    );
+  }
+);
+
+Search.displayName = 'Search';
+

package/src/lib/SearchContent.tsx

@@ -0,0 +1,51 @@
+export interface SearchDataItem {
+    path: string;
+    title?: string;
+    content: string;
+}
+
+
+export const SearchableData: SearchDataItem[] = [
+{
+    path: 'http://localhost:4200/mobile_apps/sdk-component-demo/',
+    title: 'SDK Component Demo Site',
+    content: `The SDK will act as a single source of truth for components. Developers, UX designers, and other stakeholders can view and interact with components without needing to set up the full application, improving feedback loops and collaboration.
+If you have feedback on this demo site or any of the DHA SDK components, please email us at: b04eb4d0.chenega.onmicrosoft.com@amer.teams.ms
+For installation instructions for the simple-ui package, please visit install instructions`
+},
+{
+    path: 'http://localhost:4200/mobile_apps/sdk-component-demo/buttons',
+    title: 'Button Component',
+    content: `Buttons allow users to interact and make choices within an app with a simple touch. Our Button comes with several variants: default, outlined, and text.
+The button component as built takes in various props in addition to any other html attributes a normal html button would use, for example an aria-label tag.
+A ref can also be created and assigned to the button component, and the component will point the reference to the html button.
+The className prop takes a list of alternate CSS classes the developer would like applied to the component. These are applied using the tailwind twMerge function, and will safely overwrite any conflicting classes ensuring proper styling.
+If you would like the button to display a toggled or selected status as the  Usage, Code, and Docs buttons above (changing background color when clicked), the selected and optionally the classNameSelected props can be used, explained below.
+`,
+},
+{
+    path: 'http://localhost:4200/mobile_apps/sdk-component-demo/input',
+    title: 'Input Component',
+    content: `The input component as built takes seven optional props (className, classNameLabel, required, label, labelBaseColor, labelInputcolor, mask, and textShadow), in addition to any other html attributes a normal html form input would use, for example an aria tag.
+The mask prop allows the developer to specify an input mask prop such as (###) ###-### that gaurantees formatting for input data. See usage examples in the drop-down, usage examples, as well as notes in the documentation. Note that the mask is not a placeholder, that is a separate mechanism built into html input elements.
+A reference can also be created and passed to the input component, and the component will point the reference to the input
+The input component as built takes seven optional props in addition to any other html attributes a normal html form input would use, for example an aria tag.
+A reference can also be created and passed to the input component, and the component will point the reference to the input.
+`,
+},
+{
+    path: 'http://localhost:4200/mobile_apps/sdk-component-demo/select',
+    title: 'Select Component',
+    content: `Select components or drop-downs allow a user to make a single selection from multiple choices while preserving space on the form. Our Select component comes with several variants: default, fill, and outline.
+The Select component takes two required props (options and setSelectedOption) as well as multiple optional props in addition to any other html attributes a normal html element would use, for example an aria-tag.
+`,
+},
+{
+    path: 'http://localhost:4200/mobile_apps/sdk-component-demo/toggle',
+    title: 'Toggle Component',
+    content: `A Toggle is an element that allows the user to make a choice between two mutually exclusive states. Our Toggle comes with two variants: default and outlined
+The Toggle component takes a variant prop used to indicate pre-defined styles, an optional click handler, and various other optional props described below and uses those to display a Toggle button. The variant prop currently takes one of two values, those possible values currently being 'default' and 'outlined'.
+As with the button component, Toggle takes any other additional html attributes and passes them to the parent <button> tag. This div is styled using the tailwind twMerge() utility, so custom classes can be added via the classNames prop as and applied as well.
+`,
+}
+]

package/src/lib/SectionHeader--SectionHeader.stories.tsx

@@ -0,0 +1,98 @@
+// Badge.stories.tsx
+
+// import { Meta, StoryFn} from '@storybook/react';
+import { SectionHeader } from './SectionHeader';
+import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/react';
+import { Input, InputProps } from './Input';
+import { Button } from './Button';
+import { CharacterCounter, CharacterCounterProps } from './CharacterCounter';
+import { userEvent, within } from 'storybook/test';
+import { expect } from 'storybook/test';
+import { FC, useRef, useState } from 'react';
+import frame from '../assets/img/Frame.svg';
+import check from '../assets/img/check.svg';
+import chevronRight from '../assets/img/chevron-right.svg';
+
+// Import your images
+import firstAidKit from '../assets/img/first-aid-kit.svg';
+import heartbeat from '../assets/img/heartbeat.svg';
+import pill from '../assets/img/pill.svg';
+import prescription from '../assets/img/prescription.svg';
+import stethoscope from '../assets/img/stethoscope.svg';
+// import { useState } from 'react';
+
+
+export default {
+  title: 'Components/SectionHeader',
+  component: SectionHeader,
+  args: {
+
+  },
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+} as Meta<typeof SectionHeader>;
+
+/*
+    className?: string;
+    leftIcon?: ReactNode;   // displays left icon if present
+    rightIcon?: ReactNode;  // displays right icon if present
+    underline?: boolean;    // display or not the underline
+    subHeader?: string;     // if present, displays subHeader below primary Header line
+*/
+
+// DefaultBadge story
+export const DefaultSectionHeader = {
+  args: {
+    className: 'w-[600px]',
+    children: "I'm a Header!",
+    iconRight: <img src={frame} alt='left icon' className='size-10' />,
+    iconLeft: <img src={check} alt='right icon' className='size-8' />,
+    underline: true,
+    subHeader: "Subheader Here",
+    childButton: <Button variant='transparent' className='h-10' 
+                  icon={<img src={chevronRight} alt='right chevron' />}
+                  iconPosition='right' >Click Me</Button>
+  }
+};
+
+// DefaultBadge story
+export const NoUnderline = {
+  args: {
+    className: 'w-[600px]',
+    children: "I'm a Header!",
+    iconLeft: <img src={frame} alt='left icon' className='size-10' />,
+    iconRight: <img src={check} alt='right icon' className='size-8' />,
+    subHeader: "Subheader Here",
+  }
+};
+
+// DefaultBadge story
+export const NoSubHeaderLeftIconOnly = {
+  args: {
+    className: 'w-[600px]',
+    children: "I'm a Header!",
+    iconLeft: <img src={frame} alt='left icon' className='size-10' />,
+    underline: true,
+  }
+};
+
+// DefaultBadge story
+export const NoLeftIconNoSubHeader = {
+  args: {
+    className: 'w-[600px]',
+    children: "I'm a Header!",
+    iconRight: <img src={check} alt='right icon' className='size-8' />,
+    underline: true,
+  }
+};
+
+export const NoLeftIconNoSubHeaderNoUnderline = {
+  args: {
+    className: 'w-[600px]',
+    children: "I'm a Header!",
+    iconLeft: <img src={frame} alt='left icon' className='size-10' />,
+    iconRight: <img src={check} alt='right icon' className='size-8' />,
+  }
+};

package/src/lib/SectionHeader.spec.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SectionHeader } from './SectionHeader';
+
+describe('SectionHeader Component', () => {
+  it('renders the main header text', () => {
+    render(<SectionHeader>Test Header</SectionHeader>);
+    expect(screen.getByText('Test Header')).toBeInTheDocument();
+  });
+
+  it('merges default classes with custom className', () => {
+    const customClass = 'custom-class';
+    render(<SectionHeader className={customClass}>Test Header</SectionHeader>);
+    // The outer div should include the custom class along with default classes.
+    const outerDiv = screen.getByText('Test Header').parentElement?.parentElement?.parentElement;
+    expect(outerDiv).toHaveClass('custom-class');
+  });
+
+  it('renders a section header with a button, type = section and fill = true', () => {
+    render(<SectionHeader button fill type='section'>Test Header</SectionHeader>);
+    expect(screen.getByText('Test Header')).toBeInTheDocument();;
+  });
+
+  it('renders a section header of type subsection, applies underline classes when underline prop is true', () => {
+    render(<SectionHeader type='subsection' underline>Test Header</SectionHeader>);
+    const outerDiv = screen.getByText('Test Header').parentElement?.parentElement?.parentElement;
+    expect(outerDiv).toHaveClass("border-b-2 border-[#07192D]");
+  });
+
+  it('renders a subHeader when provided', () => {
+    render(
+      <SectionHeader subHeader="Sub Header">
+        Test Header
+      </SectionHeader>
+    );
+    expect(screen.getByText('Sub Header')).toBeInTheDocument();
+    // Check for one of the classes applied to subHeader text.
+    expect(screen.getByText('Sub Header')).toHaveClass(/text-xl/);
+  });
+
+  it('renders iconLeft when provided', () => {
+    render(
+      <SectionHeader iconLeft={<span data-testid="icon-left">IconLeft</span>}>
+        Test Header
+      </SectionHeader>
+    );
+    expect(screen.getByTestId('icon-left')).toBeInTheDocument();
+    expect(screen.getByTestId('icon-left')).toHaveTextContent('IconLeft');
+  });
+
+  it('renders iconRight when provided', () => {
+    render(
+      <SectionHeader iconRight={<span data-testid="icon-right">IconRight</span>}>
+        Test Header
+      </SectionHeader>
+    );
+    expect(screen.getByTestId('icon-right')).toBeInTheDocument();
+    expect(screen.getByTestId('icon-right')).toHaveTextContent('IconRight');
+  });
+});

package/src/lib/SectionHeader.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, HTMLAttributes, ReactNode, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Button } from './Button';
+
+import chevronRight from '../assets/img/chevron-right.svg';
+import chevronRightLight from '../assets/img/chevron-right-light.svg';
+
+  export interface SectionHeaderProps extends HTMLAttributes<HTMLDivElement>  {
+    className?: string;
+    classNameChildren?: string;
+    classNameSubHeader?: string;
+    iconLeft?: ReactNode | undefined;   // displays left icon if present
+    iconRight?: ReactNode | undefined;  // displays right icon if present
+    underline?: boolean;                // display or not the underline
+    subHeader?: string;                 // if present, displays subHeader below primary Header line
+    fill?: boolean;
+    button?: boolean;
+    type?: 'page' | 'section' | 'subsection';
+    buttonOnClick?: () => void;
+    buttonContent?: string;
+    padLeft?: boolean;
+    padRight?: boolean;
+  }
+
+  export const SectionHeader = forwardRef<HTMLDivElement, SectionHeaderProps>(
+    ({ className = '', classNameChildren = '', classNameSubHeader = '', iconLeft, iconRight,
+      underline = false, subHeader = false, fill = false, type = 'page', padLeft = true,
+      padRight = true, button, buttonOnClick, buttonContent = 'Click Me',
+      children, ...props }, ref) => {
+
+      const [outerClasses, setOuterClasses] = useState<string>('');
+      const [headerClasses, setHeaderClasses] = useState<string>('');
+      const [subHeaderClasses, setSubHeaderClasses] = useState<string>('');
+      // top & bottom padding different for type === page
+      const defaultClasses = `${type === 'page' ? 'pt-4 pb-2' : 'py-2'} flex pl-6 pr-2 justify-start items-center gap-4 inline-flex w-full`;
+
+      // dark text -  text-[#07192d]
+      // light text - text-[#f0f0f0]
+
+      // build default css classes w/ twMerge
+      useEffect (() => {
+        const classUnderLine = underline ? 'border-b-2 border-[#07192D]' : '';
+        const classFill = fill ? 'bg-[#092068] text-[#f0f0f0]' : 'bg-transparent text-[#07192d]';
+        const padding = padLeft && padRight ? 'mx-4 ' : padLeft ? 'ms-4' : padRight ? 'me-4' : '';
+        setOuterClasses(twMerge(defaultClasses, classUnderLine, classFill, padding, className));
+      }, [className, underline, fill, defaultClasses, padLeft, padRight]);
+
+      // console.log('outerClasses: ', outerClasses);
+
+      useEffect (() => {
+        setHeaderClasses(twMerge(`self-stretch ${ type === 'page' ? 'text-[40px]' : type === 'section' ? ' text-[32px]' : 'text-2xl'} font-normal font-["Arial"] leading-[48px]`, classNameChildren));
+      }, [classNameChildren, type]);
+
+      useEffect (() => {
+        setSubHeaderClasses(twMerge(`${type === 'page' ? 'text-xl' : 'text-lg'} font-normal font-["Arial"] leading-[30px]`, classNameSubHeader));
+      }, [classNameSubHeader, type]);
+
+    // type?: 'page' | 'section' | 'subsection';
+    // page - icon 40x40px, text 40px, sub-header 30px
+    // section - icon 24x24px, text 32px, sub-header text-lg(18px)
+    // subsection - icon 24x24px, text 2xl(24px), sub-header text-lg(18px)
+
+    return (
+      <div className={twMerge(outerClasses, className)}>
+        {/* justify-story --> start at left side, items-center --> vertical middle of flex row */}
+        <div className="grow shrink basis-0 justify-start items-center gap-4 flex flex-row">
+
+            {iconLeft && iconLeft }
+
+            <div className="flex-col justify-start items-start inline-flex w-full">
+                <div className={headerClasses}
+                    >{children}</div>
+                {subHeader && <div className={subHeaderClasses}
+                    >{subHeader}</div>}
+            </div>
+
+            { iconRight && iconRight }
+
+            { button &&
+
+            // text color and icon correctly set based on fill value
+            <Button variant='transparent' className={`h-[48px] text-black ${fill && 'text-[#f0f0f0] active:bg-blue-700 hover:bg-[#092068]'}
+              ${ type === 'page' ? 'text-base' : 'text-sm'} }`}
+              icon={<img src={fill ? chevronRightLight : chevronRight} alt='right chevron' />}
+              iconPosition='right' onClick={buttonOnClick} >{buttonContent}</Button>
+            }
+
+        </div>
+    </div>
+    );
+  });