diff --git a/globals.d.ts b/globals.d.ts new file mode 100644 index 000000000..fc52f076c --- /dev/null +++ b/globals.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: string; + export default content; +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 27168d2ff..8410dd855 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42484,7 +42484,7 @@ }, "packages/chrome": { "name": "@redhat-cloud-services/chrome", - "version": "1.0.8", + "version": "1.0.9", "license": "Apache-2.0", "dependencies": { "lodash": "^4.17.21" diff --git a/packages/components/src/LearningResourcesWidget/Bookmarks_empty-state.svg b/packages/components/src/LearningResourcesWidget/Bookmarks_empty-state.svg new file mode 100644 index 000000000..d68139274 --- /dev/null +++ b/packages/components/src/LearningResourcesWidget/Bookmarks_empty-state.svg @@ -0,0 +1,7 @@ + + + Combined Shape@1x + + + + \ No newline at end of file diff --git a/packages/components/src/LearningResourcesWidget/EmptyState.tsx b/packages/components/src/LearningResourcesWidget/EmptyState.tsx new file mode 100644 index 000000000..ab4c3c389 --- /dev/null +++ b/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 ( + + } headingLevel="h4" /> + + + Add documentation, quickstarts, learning paths, and more to your bookmarks for easy access in the future. + + + + {/* + Button to be re-enabled only after completion of All learning catalog + */} + + + ); +}; + +export default LearningResourcesEmptyState; diff --git a/packages/components/src/LearningResourcesWidget/LearningResourcesWidget.tsx b/packages/components/src/LearningResourcesWidget/LearningResourcesWidget.tsx new file mode 100644 index 000000000..7d7bfbed6 --- /dev/null +++ b/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 ( + updateDocumentTitle(title)} to={pathname}> + {title} + + ); +}; + +const LearningResourcesWidget: React.FunctionComponent = () => { + const { contentReady, documentation, learningPaths, other, quickStarts, bookmarks, toggleFavorite } = useQuickStarts(); + console.log(bookmarks); + + return ( +
+ {quickStarts.length === 0 ? ( + + ) : ( + + {quickStarts.map(({ metadata, spec }, index) => ( +
+ + + + + + {spec.type && ( + + )} + + + + some.domain.redhat + + + +
+ ))} + + )} +
+ ); +}; + +export default LearningResourcesWidget; diff --git a/packages/components/src/LearningResourcesWidget/bookmark-regular.svg b/packages/components/src/LearningResourcesWidget/bookmark-regular.svg new file mode 100644 index 000000000..474fab5e7 --- /dev/null +++ b/packages/components/src/LearningResourcesWidget/bookmark-regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/LearningResourcesWidget/index.ts b/packages/components/src/LearningResourcesWidget/index.ts new file mode 100644 index 000000000..863660273 --- /dev/null +++ b/packages/components/src/LearningResourcesWidget/index.ts @@ -0,0 +1,2 @@ +export { default } from './LearningResourcesWidget'; +export { default as LearningResourcesWidget } from './LearningResourcesWidget'; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index f85e97244..bfc625fc9 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -39,3 +39,4 @@ export * from './Ouia'; export * from './ErrorBoundary'; export * from './RBACProvider'; export * from './OpenSourceBadge'; +export * from './LearningResourcesWidget'; diff --git a/tsconfig.json b/tsconfig.json index 40bf5e0b7..aec125aef 100644 --- a/tsconfig.json +++ b/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",