@patternfly/quickstarts 0.0.0

package/src/catalog/QuickStartTileFooter.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStartStatus } from '../utils/quick-start-types';
+
+interface QuickStartTileFooterProps {
+  quickStartId: string;
+  status: string;
+  totalTasks?: number;
+}
+
+const QuickStartTileFooter: React.FC<QuickStartTileFooterProps> = ({
+  quickStartId,
+  status,
+  totalTasks,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const { activeQuickStartID, startQuickStart, restartQuickStart } = React.useContext<
+    QuickStartContextValues
+  >(QuickStartContext);
+
+  const start = React.useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      startQuickStart(quickStartId, totalTasks);
+    },
+    [quickStartId, startQuickStart, totalTasks],
+  );
+
+  const restart = React.useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      restartQuickStart(quickStartId, totalTasks);
+    },
+    [quickStartId, restartQuickStart, totalTasks],
+  );
+
+  return (
+    <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+      {status === QuickStartStatus.NOT_STARTED && (
+        <FlexItem>
+          <Button
+            onClick={start}
+            variant="link"
+            isInline
+            data-testid="qs-card-notStarted-start"
+            id={`${quickStartId}-start`}
+            aria-labelledby={`${quickStartId}-start ${quickStartId}`}
+          >
+            {getResource('Start')}
+          </Button>
+        </FlexItem>
+      )}
+      {status === QuickStartStatus.IN_PROGRESS && activeQuickStartID !== quickStartId && (
+        <FlexItem>
+          <Button
+            variant="link"
+            isInline
+            data-testid="qs-card-inProgress-resume"
+            id={`${quickStartId}-continue`}
+            aria-labelledby={`${quickStartId}-continue ${quickStartId}`}
+          >
+            {getResource('Continue')}
+          </Button>
+        </FlexItem>
+      )}
+      {status === QuickStartStatus.COMPLETE && (
+        <FlexItem>
+          <Button
+            onClick={restart}
+            variant="link"
+            isInline
+            data-testid="qs-card-complete-restart"
+            id={`${quickStartId}-restart`}
+            aria-labelledby={`${quickStartId}-restart ${quickStartId}`}
+          >
+            {getResource('Restart')}
+          </Button>
+        </FlexItem>
+      )}
+      {status === QuickStartStatus.IN_PROGRESS && (
+        <FlexItem>
+          <Button
+            onClick={restart}
+            variant="link"
+            isInline
+            data-testid="qs-card-inProgress-restart"
+            id={`${quickStartId}-restart`}
+            aria-labelledby={`${quickStartId}-restart ${quickStartId}`}
+          >
+            {getResource('Restart')}
+          </Button>
+        </FlexItem>
+      )}
+    </Flex>
+  );
+};
+
+export default QuickStartTileFooter;

package/src/catalog/QuickStartTileFooterExternal.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { QuickStartExternal } from '../utils/quick-start-types';
+
+interface QuickStartTileFooterProps {
+  link: QuickStartExternal;
+  quickStartId?: string;
+}
+
+const QuickStartTileFooterExternal: React.FC<QuickStartTileFooterProps> = ({
+  link,
+  quickStartId,
+}) => {
+  const { href, text } = link;
+
+  return (
+    <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+      <FlexItem>
+        <Button
+          component="a"
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          variant="link"
+          aria-label={`Open documentation in new window`}
+          isInline
+          icon={<ExternalLinkAltIcon />}
+          iconPosition="right"
+          id={quickStartId}
+          aria-labelledby={`${quickStartId}-external ${quickStartId}`}
+        >
+          {text || href}
+        </Button>
+      </FlexItem>
+    </Flex>
+  );
+};
+
+export default QuickStartTileFooterExternal;

package/src/catalog/QuickStartTileHeader.scss

@@ -0,0 +1,16 @@
+.pfext-quick-start-tile-header {
+  &__status {
+    margin: var(--pf-v5-global--spacer--sm) 0;
+  }
+  &--margin {
+    margin-right: var(--pf-v5-global--spacer--sm);
+    margin-bottom: var(--pf-v5-global--spacer--sm);
+  }
+  & .pf-v5-c-badge:not(:last-of-type) {
+    margin-right: var(--pf-v5-global--spacer--sm);
+  }
+
+  h3 {
+    flex: 1;
+  }
+}

package/src/catalog/QuickStartTileHeader.tsx

@@ -0,0 +1,105 @@
+import './QuickStartTileHeader.scss';
+import * as React from 'react';
+import { Button, ButtonProps, Flex, Label, Title } from '@patternfly/react-core';
+import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
+import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
+import { StatusIcon } from '@console/shared';
+import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
+import { QuickStartStatus, QuickStartType } from '../utils/quick-start-types';
+import QuickStartMarkdownView from '../QuickStartMarkdownView';
+
+export interface QuickstartAction {
+  /** Screen reader aria label. */
+  'aria-label': string;
+  /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
+  icon?: React.ComponentType<unknown>;
+  /** Callback with synthetic event parameter. */
+  onClick?: (e: React.SyntheticEvent) => void;
+  /** Additional button props to be rendered as extra props. */
+  buttonProps?: ButtonProps;
+}
+
+interface QuickStartTileHeaderProps {
+  status: string;
+  duration: number;
+  name: string;
+  type?: QuickStartType;
+  quickStartId?: string;
+  action?: QuickstartAction;
+}
+
+const statusColorMap = {
+  [QuickStartStatus.COMPLETE]: 'green',
+  [QuickStartStatus.IN_PROGRESS]: 'purple',
+  [QuickStartStatus.NOT_STARTED]: 'grey',
+};
+
+const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
+  status,
+  duration,
+  name,
+  type,
+  quickStartId,
+  action,
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+
+  const statusLocaleMap = {
+    [QuickStartStatus.COMPLETE]: getResource('Complete'),
+    [QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
+    [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
+  };
+
+  const ActionIcon = action?.icon || OutlinedBookmarkIcon;
+
+  return (
+    <div className="pfext-quick-start-tile-header">
+      <Flex flexWrap={{ default: 'nowrap' }}>
+        <Title headingLevel="h3" data-test="title" id={quickStartId}>
+          <QuickStartMarkdownView content={name} />
+        </Title>
+        {action && (
+          <Button
+            aria-label={action['aria-label']}
+            icon={<ActionIcon />}
+            variant="plain"
+            onClick={action.onClick}
+            {...action.buttonProps}
+          />
+        )}
+      </Flex>
+      <div className="pfext-quick-start-tile-header__status">
+        {type && (
+          <Label className="pfext-quick-start-tile-header--margin" color={type.color}>
+            {type.text}
+          </Label>
+        )}
+        {duration && (
+          <Label
+            variant="outline"
+            data-test="duration"
+            icon={<OutlinedClockIcon />}
+            className="pfext-quick-start-tile-header--margin"
+          >
+            {getResource('{{duration, number}} minutes', duration).replace(
+              '{{duration, number}}',
+              duration,
+            )}
+          </Label>
+        )}
+        {status !== QuickStartStatus.NOT_STARTED && (
+          <Label
+            variant="outline"
+            color={statusColorMap[status]}
+            icon={<StatusIcon status={status} />}
+            data-test="status"
+          >
+            {statusLocaleMap[status]}
+          </Label>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default QuickStartTileHeader;

package/src/catalog/Toolbar/QuickStartCatalogFilter.scss

@@ -0,0 +1,25 @@
+.pfext-quick-start-catalog-filter {
+  &__input {
+    flex-grow: 1;
+    max-width: 500px;
+  }
+
+  &__count {
+    font-weight: var(--pf-v5-global--FontWeight--bold);
+  }
+}
+
+.pf-v5-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex {
+  --pf-v5-c-toolbar--PaddingBottom: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-toolbar--PaddingTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-toolbar--RowGap: 0;
+  font-size: 14px;
+
+  .pf-v5-c-select {
+    --pf-v5-c-select__toggle--FontSize: 14px;
+  }
+
+  .pf-v5-c-check {
+    --pf-v5-c-check__label--FontSize: 14px;
+  }
+}

package/src/catalog/Toolbar/QuickStartCatalogFilter.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Toolbar, ToolbarContent, ToolbarProps } from '@patternfly/react-core';
+import {
+  QuickStartCatalogFilterCountWrapper,
+  QuickStartCatalogFilterSearchWrapper,
+  QuickStartCatalogFilterStatusWrapper,
+} from './QuickStartCatalogFilterItems';
+
+import './QuickStartCatalogFilter.scss';
+
+interface QuickStartCatalogFilterProps extends Omit<ToolbarProps, 'ref'> {
+  quickStartsCount: number;
+  onSearchInputChange: any;
+  onStatusChange: any;
+}
+
+const QuickStartCatalogFilter: React.FC<QuickStartCatalogFilterProps> = ({
+  quickStartsCount,
+  onSearchInputChange = () => {},
+  onStatusChange = () => {},
+  ...props
+}) => (
+    <Toolbar usePageInsets className="pfext-quick-start-catalog-filter__flex" {...props}>
+      <ToolbarContent>
+        <QuickStartCatalogFilterSearchWrapper onSearchInputChange={onSearchInputChange} />
+        <QuickStartCatalogFilterStatusWrapper onStatusChange={onStatusChange} />
+        <QuickStartCatalogFilterCountWrapper quickStartsCount={quickStartsCount} />
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+export default QuickStartCatalogFilter;

package/src/catalog/Toolbar/QuickStartCatalogFilterItems.tsx

@@ -0,0 +1,218 @@
+import * as React from 'react';
+import {
+  Badge,
+  MenuToggle,
+  MenuToggleElement,
+  SearchInput,
+  Select,
+  SelectList,
+  SelectOption,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import { removeQueryArgument, setQueryArgument } from '@console/internal/components/utils';
+import { history } from '../../ConsoleInternal/components/utils/router';
+import { QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY } from '../../utils/const';
+import { QuickStartContext, QuickStartContextValues } from '../../utils/quick-start-context';
+
+export const QuickStartCatalogFilterSearch = ({ searchInputText, handleTextChange, ...props }) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return (
+    <ToolbarItem className="pfext-quick-start-catalog-filter__input">
+      <SearchInput
+        placeholder={getResource('Filter by keyword...')}
+        value={searchInputText}
+        onChange={(_ev, value) => handleTextChange(value)}
+        onClear={() => handleTextChange('')}
+        {...props}
+      />
+    </ToolbarItem>
+  );
+};
+
+export const QuickStartCatalogFilterSelect = ({
+  isDropdownOpen,
+  setIsDropdownOpen,
+  onRowfilterSelect,
+  selectedFilters,
+  dropdownItems,
+  ...props
+}) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      isFullWidth
+      ref={toggleRef}
+      onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+      isExpanded={isDropdownOpen}
+    >
+      {getResource('Status')}
+      {selectedFilters.length > 0 && <Badge isRead>{selectedFilters.length}</Badge>}
+    </MenuToggle>
+  );
+
+  return (
+    <ToolbarItem>
+      <Select
+        aria-label={getResource('Select filter')}
+        isOpen={isDropdownOpen}
+        selected={selectedFilters}
+        onSelect={onRowfilterSelect}
+        onOpenChange={(isOpen) => setIsDropdownOpen(isOpen)}
+        toggle={toggle}
+        {...props}
+      >
+        <SelectList>{dropdownItems}</SelectList>
+      </Select>
+    </ToolbarItem>
+  );
+};
+
+export const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
+  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  return (
+    <ToolbarItem
+      className="pfext-quick-start-catalog-filter__count"
+      align={{ default: 'alignRight' }}
+    >
+      {getResource('{{count, number}} item', quickStartsCount).replace(
+        '{{count, number}}',
+        quickStartsCount,
+      )}
+    </ToolbarItem>
+  );
+};
+
+interface QuickStartCatalogFilterSearchWrapperProps {
+  onSearchInputChange: any;
+}
+export const QuickStartCatalogFilterSearchWrapper: React.FC<
+  QuickStartCatalogFilterSearchWrapperProps
+> = ({ onSearchInputChange = () => {} }) => {
+  const { useQueryParams, filter, setFilter } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
+  React.useEffect(() => {
+    //   use this effect to clear the search when a `clear all` action is performed higher up
+    const unlisten = history.listen(({ location }) => {
+      const searchParams = new URLSearchParams(location.search);
+      const searchQuery = searchParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
+      if (searchQuery === '') {
+        setFilter('keyword', '');
+        onSearchInputChange('');
+      }
+    });
+    return () => {
+      unlisten();
+    };
+  }, [onSearchInputChange, setFilter]);
+  const handleTextChange = (val: string) => {
+    if (val.length > 0) {
+      useQueryParams && setQueryArgument(QUICKSTART_SEARCH_FILTER_KEY, val);
+    } else {
+      useQueryParams && removeQueryArgument(QUICKSTART_SEARCH_FILTER_KEY);
+    }
+    if (filter?.keyword !== val) {
+      setFilter('keyword', val);
+    }
+    onSearchInputChange(val);
+  };
+
+  return (
+    <QuickStartCatalogFilterSearch
+      searchInputText={filter?.keyword}
+      handleTextChange={handleTextChange}
+    />
+  );
+};
+
+// compare string/number arrays
+export const equalsIgnoreOrder = (a: any[], b: any[]) => {
+  if (a.length !== b.length) {
+    return false;
+  }
+  const uniqueValues = new Set([...a, ...b]);
+  for (const v of uniqueValues) {
+    const aCount = a.filter((e) => e === v).length;
+    const bCount = b.filter((e) => e === v).length;
+    if (aCount !== bCount) {
+      return false;
+    }
+  }
+  return true;
+};
+
+interface QuickStartCatalogFilterStatusWrapperProps {
+  onStatusChange: any;
+}
+export const QuickStartCatalogFilterStatusWrapper: React.FC<
+  QuickStartCatalogFilterStatusWrapperProps
+> = ({ onStatusChange = () => {} }) => {
+  const { useQueryParams, filter, setFilter } =
+    React.useContext<QuickStartContextValues>(QuickStartContext);
+  React.useEffect(() => {
+    //   use this effect to clear the status when a `clear all` action is performed higher up
+    const unlisten = history.listen(({ location }) => {
+      const searchParams = new URLSearchParams(location.search);
+      const updatedStatusFilters = searchParams.get(QUICKSTART_STATUS_FILTER_KEY)?.split(',') || [];
+      if (updatedStatusFilters.length === 0) {
+        setFilter('status', []);
+        onStatusChange([]);
+      }
+    });
+    return () => {
+      unlisten();
+    };
+  });
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+  const onRowfilterSelect = React.useCallback(
+    (_e, selectedValue) => {
+      setIsDropdownOpen(false);
+      const selection = Object.entries(filter.status.statusTypes).find(
+        ([_key, value]) => value === selectedValue,
+      )[0];
+      const selectedFiltersList = filter.status.statusFilters.includes(selection)
+        ? filter.status.statusFilters.filter((status) => status !== selection)
+        : [...filter.status.statusFilters, selection];
+      if (!equalsIgnoreOrder(filter.status.statusFilters, selectedFiltersList)) {
+        setFilter('status', selectedFiltersList);
+      }
+      if (selectedFiltersList.length > 0) {
+        useQueryParams && setQueryArgument('status', selectedFiltersList.join(','));
+      } else {
+        useQueryParams && removeQueryArgument(QUICKSTART_STATUS_FILTER_KEY);
+      }
+      onStatusChange(selectedFiltersList);
+    },
+    [filter.status.statusFilters, onStatusChange, setFilter, useQueryParams],
+  );
+
+  const dropdownItems = Object.entries(filter.status.statusTypes).map(([key, value]) => (
+    <SelectOption
+      key={key}
+      data-key={key}
+      value={value}
+      hasCheckbox
+      isSelected={filter.status.statusFilters.includes(key)}
+    >
+      <>{value}</>
+    </SelectOption>
+  ));
+
+  return (
+    <QuickStartCatalogFilterSelect
+      isDropdownOpen={isDropdownOpen}
+      setIsDropdownOpen={setIsDropdownOpen}
+      onRowfilterSelect={onRowfilterSelect}
+      selectedFilters={filter.status.statusFilters}
+      dropdownItems={dropdownItems}
+    />
+  );
+};
+
+interface QuickStartCatalogFilterCountWrapperProps {
+  quickStartsCount: number;
+}
+export const QuickStartCatalogFilterCountWrapper: React.FC<
+  QuickStartCatalogFilterCountWrapperProps
+> = ({ quickStartsCount }) => <QuickStartCatalogFilterCount quickStartsCount={quickStartsCount} />;

package/src/catalog/__tests__/QuickStartCatalog.spec.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+import { shallow } from 'enzyme';
+import { EmptyBox } from '@console/internal/components/utils';
+import { getQuickStarts } from '../../data/test-utils';
+import { QuickStartCatalogPage } from '../../QuickStartCatalogPage';
+import QuickStartCatalog from '../QuickStartCatalog';
+
+jest.mock('@console/shared', () => {
+  const ActualShared = require.requireActual('@console/shared');
+  return {
+    ...ActualShared,
+    useQueryParams: () => new Map(),
+  };
+});
+
+describe('QuickStartCatalog', () => {
+  it('should load an emptybox if no QS exist', () => {
+    const QuickStartCatalogProps = { quickStarts: [], onClick: jest.fn() };
+    const QuickStartCatalogWrapper = shallow(<QuickStartCatalogPage {...QuickStartCatalogProps} />);
+    expect(QuickStartCatalogWrapper.find(EmptyBox).exists()).toBeTruthy();
+  });
+  it('should load a gallery if QS exist', () => {
+    const QuickStartCatalogProps = { quickStarts: getQuickStarts(), onClick: jest.fn() };
+    const QuickStartCatalogWrapper = shallow(<QuickStartCatalog {...QuickStartCatalogProps} />);
+    expect(QuickStartCatalogWrapper.find(Gallery).exists()).toBeTruthy();
+  });
+  it('should load galleryItems equal to the number of QS', () => {
+    const QuickStartCatalogProps = { quickStarts: getQuickStarts(), onClick: jest.fn() };
+    const QuickStartCatalogWrapper = shallow(<QuickStartCatalog {...QuickStartCatalogProps} />);
+    const galleryItems = QuickStartCatalogWrapper.find(GalleryItem);
+    expect(galleryItems.exists()).toBeTruthy();
+    expect(galleryItems.length).toEqual(getQuickStarts().length);
+  });
+});

package/src/catalog/__tests__/QuickStartTile.spec.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { CatalogTile } from '@patternfly/react-catalog-view-extension';
+import { shallow } from 'enzyme';
+import { getQuickStarts } from '../../data/test-utils';
+import { QuickStartStatus } from '../../utils/quick-start-types';
+import QuickStartTile from '../QuickStartTile';
+
+describe('QuickStartTile', () => {
+  const quickstarts = getQuickStarts();
+
+  it('should load proper catalog tile without featured property', () => {
+    const wrapper = shallow(
+      <QuickStartTile
+        quickStart={quickstarts[0]}
+        status={QuickStartStatus.NOT_STARTED}
+        onClick={jest.fn()}
+        isActive={false}
+      />,
+    );
+    const catalogTile = wrapper.find(CatalogTile);
+    expect(catalogTile.exists()).toBeTruthy();
+    expect(catalogTile.prop('featured')).toBe(false);
+  });
+
+  it('should load proper catalog tile with featured property', () => {
+    const wrapper = shallow(
+      <QuickStartTile
+        quickStart={quickstarts[1]}
+        status={QuickStartStatus.IN_PROGRESS}
+        onClick={jest.fn()}
+        isActive
+      />,
+    );
+    const catalogTile = wrapper.find(CatalogTile);
+    expect(catalogTile.exists()).toBeTruthy();
+    expect(catalogTile.prop('featured')).toBe(true);
+  });
+});

package/src/catalog/__tests__/QuickStartTileDescription.spec.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Popover, Text } from '@patternfly/react-core';
+import { shallow } from 'enzyme';
+import { getQuickStarts } from '../../data/test-utils';
+import QuickStartTileDescription from '../QuickStartTileDescription';
+
+jest.mock('react', () => {
+  const ActualReact = require.requireActual('react');
+  return {
+    ...ActualReact,
+    useContext: () => jest.fn(),
+  };
+});
+
+describe('QuickStartCatalog', () => {
+  beforeEach(() => {
+    spyOn(React, 'useContext').and.returnValue({
+      activeQuickStartID: '',
+      startQuickStart: () => {},
+      restartQuickStart: () => {},
+      getResource: (key) => `quickstart~${key}`,
+    });
+  });
+
+  it('should show prerequisites only if provided', () => {
+    // this quick start does not have prereqs
+    const quickStart = getQuickStarts()[0].spec;
+    const QuickStartTileDescriptionWrapper = shallow(
+      <QuickStartTileDescription description={quickStart.description} />,
+    );
+    expect(QuickStartTileDescriptionWrapper.find(Text)).toHaveLength(0);
+  });
+
+  it('shoould render prerequisites inside a popover', () => {
+    const quickStart = getQuickStarts()[2].spec;
+    const QuickStartTileDescriptionWrapper = shallow(
+      <QuickStartTileDescription
+        description={quickStart.description}
+        prerequisites={quickStart.prerequisites}
+      />,
+    );
+    expect(QuickStartTileDescriptionWrapper.find(Popover)).toHaveLength(1);
+  });
+});

package/src/catalog/index.ts

@@ -0,0 +1,9 @@
+export { default as QuickStartCatalog } from './QuickStartCatalog';
+export { default as QuickStartCatalogFilter } from './Toolbar/QuickStartCatalogFilter';
+export { default as QuickStartTile } from './QuickStartTile';
+export { default as QuickStartTileDescription } from './QuickStartTileDescription';
+export { default as QuickStartTileFooter } from './QuickStartTileFooter';
+export { default as QuickStartTileFooterExternal } from './QuickStartTileFooterExternal';
+export { default as QuickStartTileHeader, QuickstartAction } from './QuickStartTileHeader';
+export * from './Toolbar/QuickStartCatalogFilterItems';
+export * from './Catalog';