From 319ebed62887df0c14467572ded8026daa1e6d56 Mon Sep 17 00:00:00 2001 From: Gabriele Antonini <106664971+gabriele-ct@users.noreply.github.com> Date: Thu, 23 Jan 2025 22:19:58 +0100 Subject: [PATCH] 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 --- .changeset/strange-walls-pump.md | 7 +++ .github/workflows/main.yml | 5 ++- packages/gatsby-theme-docs/index.js | 3 ++ .../LearningObjectivesCard.tsx | 43 +++++++++++++++++++ .../SelfLearningContentNotification.tsx | 38 ++++++++++++++++ .../gatsby-theme-docs/src/components/cards.js | 1 + .../src/content/views/beta.mdx | 7 +++ .../src/content/index.mdx | 35 ++++++++------- 8 files changed, 120 insertions(+), 19 deletions(-) create mode 100644 .changeset/strange-walls-pump.md create mode 100644 packages/gatsby-theme-docs/src/components/LearningObjectivesCard/LearningObjectivesCard.tsx create mode 100644 packages/gatsby-theme-docs/src/components/SelfLearningContentNotification/SelfLearningContentNotification.tsx diff --git a/.changeset/strange-walls-pump.md b/.changeset/strange-walls-pump.md new file mode 100644 index 0000000000..50aa740a5c --- /dev/null +++ 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 index 7d84d1de61..777f083669 100644 --- 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 index 609caaa5dd..3828b25a64 100644 --- 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 new file mode 100644 index 0000000000..e6a28c7587 --- /dev/null +++ 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 +> = (props) => { + return ( + + + {React.Children.map(props.children, (child, index) => ( + + {child} + + ))} + + + ); +}; + +export default LearningObjectivesCard; diff --git a/packages/gatsby-theme-docs/src/components/SelfLearningContentNotification/SelfLearningContentNotification.tsx b/packages/gatsby-theme-docs/src/components/SelfLearningContentNotification/SelfLearningContentNotification.tsx new file mode 100644 index 0000000000..a3ed59f223 --- /dev/null +++ b/packages/gatsby-theme-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 = (props) => { + return ( + + + {props.children} + + ); +}; + +export default SelfLearningContentNotification; diff --git a/packages/gatsby-theme-docs/src/components/cards.js b/packages/gatsby-theme-docs/src/components/cards.js index 14b1c8c379..7f28465011 100644 --- 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 index 5f21c58ea7..142551075c 100644 --- 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' + + + +Learn more about how to use API extensibility options with Composable Commerce in our self-paced Extensibility module. + + # First Chapter Lorem ipsum dolor sit amet, 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 index 964af91e09..df8d664d24 100644 --- 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'

Learn how to manage projects, products, pricing, customers, shipping methods and more with commercetools Composable Commerce.


- -

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.

- + +{['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.']} + ![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

Hey ! Hope you had a nice break and are excited to get back into the Composable Commerce Administrator learning path!


- -

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.

- + +{['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.']} + ![learning path](/content/files/logged-in-learning-path.svg)