(WIP) add learning resources widget

globals.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

packages/components/src/LearningResourcesWidget/EmptyState.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+// import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+import { EmptyState } from '@patternfly/react-core/dist/dynamic/components/EmptyState';
+import { EmptyStateBody } from '@patternfly/react-core/dist/dynamic/components/EmptyState';
+import { EmptyStateFooter } from '@patternfly/react-core/dist/dynamic/components/EmptyState';
+import { EmptyStateHeader } from '@patternfly/react-core/dist/dynamic/components/EmptyState';
+import { EmptyStateVariant } from '@patternfly/react-core/dist/dynamic/components/EmptyState';
+import { Stack } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
+import { StackItem } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
+import BookMarkEmptyState from './Bookmarks_empty-state.svg';
+
+const LearningResourcesEmptyState: React.FunctionComponent = () => {
+  return (
+    <EmptyState variant={EmptyStateVariant.lg}>
+      <EmptyStateHeader titleText="No bookmarked learning resources" icon={<img src={BookMarkEmptyState} />} headingLevel="h4" />
+      <EmptyStateBody>
+        <Stack>
+          <StackItem>Add documentation, quickstarts, learning paths, and more to your bookmarks for easy access in the future.</StackItem>
+        </Stack>
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        {/*
+        Button to be re-enabled only after completion of All learning catalog
+        <Button variant="secondary" component="a" href="settings/learning-resources#documentation">
+          View all learning resources
+        </Button> */}
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};
+
+export default LearningResourcesEmptyState;

packages/components/src/LearningResourcesWidget/LearningResourcesWidget.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Text, TextContent, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
+import { Link } from 'react-router-dom';
+import { Gallery } from '@patternfly/react-core/dist/dynamic/layouts/Gallery';
+import { Label } from '@patternfly/react-core/dist/dynamic/components/Label';
+import LearningResourcesEmptyState from './EmptyState';
+import useQuickStarts from './quickstarts';
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export const API_BASE = '/api/quickstarts/v1';
+export const QUICKSTARTS = '/quickstarts';
+export const FAVORITES = '/favorites';
+
+export type FavoriteQuickStart = {
+  favorite: boolean;
+  quickstartName: string;
+};
+
+const LinkWrapper = ({ pathname, title }: { pathname: string; title: string }) => {
+  const { updateDocumentTitle } = useChrome();
+  return (
+    <Link onClick={() => updateDocumentTitle(title)} to={pathname}>
+      {title}
+    </Link>
+  );
+};
+
+const LearningResourcesWidget: React.FunctionComponent = () => {
+  const { contentReady, documentation, learningPaths, other, quickStarts, bookmarks, toggleFavorite } = useQuickStarts();
+  console.log(bookmarks);
+
+  return (
+    <div>
+      {quickStarts.length === 0 ? (
+        <LearningResourcesEmptyState />
+      ) : (
+        <Gallery hasGutter>
+          {quickStarts.map(({ metadata, spec }, index) => (
+            <div key={index}>
+              <TextContent>
+                <LinkWrapper title={spec.displayName} pathname={spec.link?.href || ''} />
+              </TextContent>
+              <Flex direction={{ default: 'row' }}>
+                <FlexItem style={{ marginRight: 'var(--pf-v5-global--spacer--sm)' }}>
+                  {spec.type && (
+                    <Label className="pfext-quick-start-tile-header--margin" color={spec.type.color}>
+                      {spec.type.text}
+                    </Label>
+                  )}
+                </FlexItem>
+                <FlexItem>
+                  <TextContent>
+                    <Text component={TextVariants.small}>some.domain.redhat</Text>
+                  </TextContent>
+                </FlexItem>
+              </Flex>
+            </div>
+          ))}
+        </Gallery>
+      )}
+    </div>
+  );
+};
+
+export default LearningResourcesWidget;

packages/components/src/LearningResourcesWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './LearningResourcesWidget';
+export { default as LearningResourcesWidget } from './LearningResourcesWidget';

packages/components/src/index.ts

@@ -39,3 +39,4 @@ export * from './Ouia';
 export * from './ErrorBoundary';
 export * from './RBACProvider';
 export * from './OpenSourceBadge';
+export * from './LearningResourcesWidget';

tsconfig.json

@@ -67,6 +67,7 @@
       "skipLibCheck": true,                     /* Skip type checking of declaration files. */
       "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */,
     },
+    "files": ["globals.d.ts"],
     "exclude": [
       "packages/**/*.test.ts",
       "packages/**/*.test.tsx",