add QuickStart and storybook content

Signed-off-by: nikolar <reyna.nikolayev@autodesk.com>

plugins/home/src/homePageComponents/QuickStart/Content.test.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Content } from './Content';
+import React from 'react';
+import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
+import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
+
+const docsEntities = [
+  {
+    apiVersion: '1',
+    kind: 'Location',
+    metadata: {
+      name: 'getting-started-with-idp',
+      title: 'Getting Started Docs',
+    },
+    spec: {
+      type: 'documentation',
+    },
+  },
+];
+
+describe('<FeaturedDocsCard />', () => {
+  const Wrapper = ({ children }: { children?: React.ReactNode }) => (
+    <TestApiProvider
+      apis={[[catalogApiRef, catalogApiMock({ entities: docsEntities })]]}
+    >
+      {children}
+    </TestApiProvider>
+  );
+
+  it('should show expected featured doc and title', async () => {
+    const { getByTestId, getByText } = await renderInTestApp(
+      <Wrapper>
+        <Content
+          filter={{
+            'spec.type': 'documentation',
+            'metadata.name': 'getting-started-with-idp',
+          }}
+          emptyState={undefined}
+        />
+      </Wrapper>,
+      {
+        mountedRoutes: {
+          '/home': entityRouteRef,
+        },
+      },
+    );
+    const docsCardContent = getByTestId('docs-card-content');
+    const docsEntity = getByText('getting-started-with-idp');
+    expect(docsCardContent).toContainElement(docsEntity);
+  });
+});

plugins/home/src/homePageComponents/QuickStart/Content.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Link } from '@backstage/core-components';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import { ContentModal } from './ContentModal';
+import { useStyles } from './styles';
+
+/**
+ * Props customizing the <QuickStartCard/> component.
+ *
+ * @public
+ */
+export type QuickStartCardProps = {
+  /** The modal link title */
+  modalTitle?: string | React.JSX.Element;
+  /** The link to docs title */
+  docsLinkTitle?: string;
+  /** The link to docs */
+  docsLink?: string;
+  /** The video to play on the card */
+  video?: React.JSX.Element;
+  /** A quickstart image to display on the card */
+  image: React.JSX.Element;
+  /** The card description*/
+  cardDescription?: string;
+  /** A component used to download a quickStart image*/
+  downloadImage?: React.JSX.Element;
+};
+
+/**
+ * A component to display Quick Start info on the homepage.
+ *
+ * @public
+ */
+export const Content = (props: QuickStartCardProps): JSX.Element => {
+  const styles = useStyles();
+  return (
+    <>
+      <ContentModal
+        modalContent={props.image}
+        linkContent={props.modalTitle || 'Onboarding'}
+      />
+      <Typography variant="body1" paragraph>
+        {props.cardDescription || "Get started with Backstage's Catalog"}
+      </Typography>
+      <ContentModal modalContent={props.image} linkContent={props.image} />
+      <Grid
+        container
+        alignItems="center"
+        className={styles.contentActionContainer}
+      >
+        {props.downloadImage && <Grid item>{props.downloadImage}</Grid>}
+        <Grid item>
+          <Link
+            to={props.docsLink || 'https://backstage.io/docs/getting-started/'}
+            data-cy="quick-start-link-to-docs"
+            underline="none"
+            variant="h6"
+            className={styles.link}
+          >
+            {props.docsLinkTitle || 'Learn more'}
+          </Link>
+        </Grid>
+      </Grid>
+      {props.video && props.video}
+    </>
+  );
+};

plugins/home/src/homePageComponents/QuickStart/ContentModal.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import { Link } from '@backstage/core-components';
+import Modal from '@material-ui/core/Modal';
+import Box from '@material-ui/core/Box';
+
+import { useStyles } from './styles';
+
+export type Props = {
+  modalContent: React.JSX.Element;
+  linkContent: string | React.JSX.Element;
+};
+
+export const ContentModal = (props: Props) => {
+  const { modalContent, linkContent } = props;
+  const styles = useStyles();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className={styles.linkText}>
+      <Link
+        to="#"
+        component="button"
+        variant="h6"
+        underline="none"
+        onClick={() => setOpen(true)}
+      >
+        {linkContent}
+      </Link>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby="content-modal"
+        data-cy="content-modal"
+      >
+        <Box className={styles.contentModal} data-cy="content-modal-open">
+          {modalContent}
+        </Box>
+      </Modal>
+    </div>
+  );
+};

plugins/home/src/homePageComponents/QuickStart/QuickStart.stories.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { QuickStartCard } from '../../plugin';
+import React, { ComponentType, PropsWithChildren } from 'react';
+import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils';
+import Grid from '@material-ui/core/Grid';
+import ContentImage from './static/backstageSystemModel.png';
+
+export default {
+  title: 'Plugins/Home/Components/QuickStartCard',
+  decorators: [
+    (Story: ComponentType<PropsWithChildren<{}>>) =>
+      wrapInTestApp(
+        <TestApiProvider apis={[]}>
+          <Story />
+        </TestApiProvider>,
+      ),
+  ],
+};
+
+export const Default = () => {
+  return (
+    <Grid item xs={12} md={6}>
+      <QuickStartCard
+        image={
+          <img
+            src={ContentImage}
+            alt="quick start"
+            width="100%"
+            height="100%"
+          />
+        }
+      />
+    </Grid>
+  );
+};
+
+export const Customized = () => {
+  return (
+    <Grid item xs={12} md={6}>
+      <QuickStartCard
+        title="Onboarding to the Catalog"
+        modalTitle="Onboarding Quick Start"
+        docsLinkTitle="Learn more with getting started docs"
+        docsLink="https://backstage.io/docs/getting-started"
+        image={
+          <img
+            src={ContentImage}
+            alt="quick start"
+            width="100%"
+            height="100%"
+          />
+        }
+        cardDescription="Backstage system model will help you create new entities"
+      />
+    </Grid>
+  );
+};

plugins/home/src/homePageComponents/QuickStart/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { Content } from './Content';
+export type { QuickStartCardProps } from './Content';
+export type { QuickStartCardClassKey } from './styles';

plugins/home/src/homePageComponents/QuickStart/styles.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { makeStyles, Theme } from '@material-ui/core/styles';
+
+/** @public */
+export type QuickStartCardClassKey = 'link' | 'contentActionContainer';
+
+export const useStyles = makeStyles(
+  (theme: Theme) => ({
+    link: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      textDecoration: 'none',
+      color: `${theme.palette.link}!important`,
+      '&:hover': {
+        background: 'transparent!important',
+      },
+    },
+    linkText: {
+      marginBottom: theme.spacing(1.5),
+    },
+    contentActionContainer: {
+      marginTop: theme.spacing(1.5),
+      marginBottom: theme.spacing(1.5),
+    },
+    cardTitleIcon: {
+      verticalAlign: 'bottom',
+      marginLeft: '-4px',
+    },
+    videoContainer: {
+      borderRadius: '10px',
+      width: '100%',
+      height: 'auto',
+      background: '#000000',
+    },
+    imageSize: { width: '100%', height: '100%' },
+    contentModal: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      width: '80%',
+      height: 'auto',
+    },
+  }),
+  { name: 'HomeQuickStartCard' },
+);

plugins/home/src/homePageComponents/index.ts

@@ -20,3 +20,4 @@ export type { WelcomeTitleLanguageProps } from './WelcomeTitle';
 export type { VisitedByTypeProps, VisitedByTypeKind } from './VisitedByType';
 export type { FeaturedDocsCardProps } from './FeaturedDocsCard';
 export type { StarredEntitiesProps } from './StarredEntities';
+export type { QuickStartCardProps } from './QuickStart';

plugins/home/src/plugin.ts

@@ -27,6 +27,7 @@ import {
   ToolkitContentProps,
   VisitedByTypeProps,
   FeaturedDocsCardProps,
+  QuickStartCardProps,
 } from './homePageComponents';
 import { rootRouteRef } from './routes';
 import { VisitsStorageApi, visitsApiRef } from './api';
@@ -230,3 +231,16 @@ export const FeaturedDocsCard = homePlugin.provide(
     components: () => import('./homePageComponents/FeaturedDocsCard'),
   }),
 );
+
+/**
+ * A component to display Quick Start information.
+ *
+ * @public
+ */
+export const QuickStartCard = homePlugin.provide(
+  createCardExtension<QuickStartCardProps>({
+    name: 'QuickStartCard',
+    title: 'Quick Start',
+    components: () => import('./homePageComponents/QuickStart'),
+  }),
+);