feat: create utility components for self-learning purpose (#2107)

* feat: create utility components for self-learning purpose * chore: changeset * chore: install vercel in gh workflow * chore: fix broken link * chore: upload artifacts
commercetools · Jan 23, 2025 · 319ebed · 319ebed
1 parent 1afc50a
commit 319ebed
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 19 deletions.
diff --git a/.changeset/strange-walls-pump.md b/.changeset/strange-walls-pump.md
@@ -0,0 +1,7 @@
+---
+'@commercetools-website/self-learning-smoke-test': minor
+'@commercetools-docs/gatsby-theme-docs': minor
+'@commercetools-website/docs-smoke-test': minor
+---
+
+Introduced SelfLearningContentNotification and LearningObjectivesCard to remove custom html from mdx
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -49,6 +49,9 @@ jobs:
         with:
           node-version-file: '.nvmrc'
 
+      - name: Install Vercel
+        run: npm install -g vercel
+
       # cached dependencies
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -230,7 +233,7 @@ jobs:
           CYPRESS_CI: 'true'
 
       - name: Upload e2e artifacts
-        uses: actions/upload-artifact@v3-node20
+        uses: actions/upload-artifact@v4
         if: ${{ failure() }}
         with:
           name: self-learning-e2e-failure-snapshots-${{ github.run_attempt }}

diff --git a/packages/gatsby-theme-docs/index.js b/packages/gatsby-theme-docs/index.js
@@ -41,3 +41,6 @@ export {
 export { default as LoginButton } from './src/modules/sso/components/login-button';
 export * from './src/modules/ai-assistant';
 export * from './src/utils/release-notes';
+
+export { default as LearningObjectivesCard } from './src/components/LearningObjectivesCard/LearningObjectivesCard';
+export { default as SelfLearningContentNotification } from './src/components/SelfLearningContentNotification/SelfLearningContentNotification';
diff --git a/packages/gatsby-theme-docs/src/components/LearningObjectivesCard/LearningObjectivesCard.tsx b/packages/gatsby-theme-docs/src/components/LearningObjectivesCard/LearningObjectivesCard.tsx
@@ -0,0 +1,43 @@
+import React, { type FC, type PropsWithChildren } from 'react';
+import Card from '../card';
+import { CheckThinIcon } from '@commercetools-uikit/icons';
+import styled from '@emotion/styled';
+import { designSystem } from '@commercetools-docs/ui-kit';
+
+interface LearningObjectivesCardProps {
+  title: string;
+}
+
+const List = styled.ul`
+  margin-top: ${designSystem.dimensions.spacings.s};
+`;
+
+const ListItem = styled.li`
+  list-style: none;
+  position: relative;
+  padding-left: 0;
+  font-size: ${designSystem.typography.fontSizes.extraSmall};
+  margin-bottom: ${designSystem.dimensions.spacings.xs};
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const LearningObjectivesCard: FC<
+  PropsWithChildren<LearningObjectivesCardProps>
+> = (props) => {
+  return (
+    <Card {...props}>
+      <List>
+        {React.Children.map(props.children, (child, index) => (
+          <ListItem key={index}>
+            <CheckThinIcon color="primary" size="20" /> {child}
+          </ListItem>
+        ))}
+      </List>
+    </Card>
+  );
+};
+
+export default LearningObjectivesCard;
diff --git a/...e-docs/src/components/SelfLearningContentNotification/SelfLearningContentNotification.tsx b/...e-docs/src/components/SelfLearningContentNotification/SelfLearningContentNotification.tsx
@@ -0,0 +1,38 @@
+import type { FC, PropsWithChildren } from 'react';
+import { GraduationCapIcon } from '@commercetools-uikit/icons';
+import styled from '@emotion/styled';
+import { designSystem } from '@commercetools-docs/ui-kit';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+
+  & svg {
+    margin-right: ${designSystem.dimensions.spacings.s};
+  }
+`;
+
+const Text = styled.span`
+  font-size: ${designSystem.typography.fontSizes.small};
+  font-style: italic;
+
+  & a {
+    text-decoration: underline;
+    color: ${designSystem.colors.light.link};
+
+    &:hover {
+      color: ${designSystem.colors.light.linkHover};
+    }
+  }
+`;
+
+const SelfLearningContentNotification: FC<PropsWithChildren> = (props) => {
+  return (
+    <Container>
+      <GraduationCapIcon color="info" />
+      <Text>{props.children}</Text>
+    </Container>
+  );
+};
+
+export default SelfLearningContentNotification;
diff --git a/packages/gatsby-theme-docs/src/components/cards.js b/packages/gatsby-theme-docs/src/components/cards.js
@@ -7,6 +7,7 @@ const allowedCardsElementsTypes = [
   'CourseCard',
   'LearningPathCard',
   'ImageCard',
+  'LearningObjectivesCard',
 ];
 
 const Cards = (props) => {

diff --git a/websites/docs-smoke-test/src/content/views/beta.mdx b/websites/docs-smoke-test/src/content/views/beta.mdx
@@ -5,6 +5,13 @@ showTimeToRead: true
 timeToRead: true
 ---
 
+import { SelfLearningContentNotification } from '@commercetools-docs/gatsby-theme-docs'
+
+
+<SelfLearningContentNotification>
+Learn more about how to use API extensibility options with Composable Commerce in our self-paced <a href="/../docs-smoke-test">Extensibility</a> module.
+</SelfLearningContentNotification>
+
 # First Chapter <Beta />
 
 Lorem ipsum dolor sit amet, <Beta /> consectetur adipiscing elit. Integer sodales, felis et venenatis varius, est ipsum cursus libero, vel venenatis nulla urna molestie lorem.

diff --git a/websites/self-learning-smoke-test/src/content/index.mdx b/websites/self-learning-smoke-test/src/content/index.mdx
@@ -2,22 +2,21 @@
 title: Explore how to build a documentation website for commercetools
 ---
 
-import { CourseCard, LearningPathCard, ImageCard, IfLearningPathComplete, IfLearningPathNotComplete, LoginButton } from '@commercetools-docs/gatsby-theme-docs'
-import { CheckThinIcon } from '@commercetools-uikit/icons'
+import { CourseCard, LearningPathCard, ImageCard, IfLearningPathComplete, IfLearningPathNotComplete, LoginButton, LearningObjectivesCard } from '@commercetools-docs/gatsby-theme-docs'
 
 <IfUserLoggedIn>
 <IfLearningPathComplete>
 <h2>Learn how to manage projects, products, pricing, customers, shipping methods and more with commercetools Composable Commerce.</h2>
 <br />
 <Cards>
-<Card title="You know how to:">
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Implement organizations, teams, projects and related functions to enable your e-commerce solution.</p>
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Set up, create and publish prices.</p>
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Identify use cases for customizing the data model and behavior of the APIs.</p>
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Manage discounts in the Merchant Center.</p>
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Design the product information structure and store your product content data.</p>
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Set up shipping methods for diverse contexts.</p>
-</Card>
+<LearningObjectivesCard title="You know how to:">
+{['Implement organizations, teams, projects and related functions to enable your e-commerce solution.',
+'Set up, create and publish prices.',
+'Identify use cases for customizing the data model and behavior of the APIs.',
+'Manage discounts in the Merchant Center.',
+'Design the product information structure and store your product content data.',
+'Set up shipping methods for diverse contexts.']}
+</LearningObjectivesCard>
   <ImageCard>
 
 ![learning path](/content/files/logged-in-learning-path-complete.svg)
@@ -38,14 +37,14 @@ Congratulations on completing all the courses in this learning path! Remember, y
 <h2>Hey <FirstName />! Hope you had a nice break and are excited to get back into the Composable Commerce Administrator learning path!</h2>
 <br/>
 <Cards>
-<Card title="Learning objectives">
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Implement organizations, teams, projects and related functions to enable your e-commerce solution.</p>
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Set up, create and publish prices.</p>
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Identify use cases for customizing the data model and behavior of the APIs.</p>
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Manage discounts in the Merchant Center.</p>
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Design the product information structure and store your product content data.</p>
-<p style="margin-top: 0.3rem; font-size:12px;"><CheckThinIcon color="primary" size="medium"/> Set up shipping methods for diverse contexts.</p>
-</Card>
+<LearningObjectivesCard title="Learning objectives">
+{['Implement organizations, teams, projects and related functions to enable your e-commerce solution.',
+'Set up, create and publish prices.',
+'Identify use cases for customizing the data model and behavior of the APIs.',
+'Manage discounts in the Merchant Center.',
+'Design the product information structure and store your product content data.',
+'Set up shipping methods for diverse contexts.']}
+</LearningObjectivesCard>
   <ImageCard>
 
 ![learning path](/content/files/logged-in-learning-path.svg)