diff --git a/README.md b/README.md index 5f7701669c..fba7978a73 100644 --- a/README.md +++ b/README.md @@ -94,9 +94,15 @@ Using a theme, all of your default configuration lives in an npm package. - [Deploy to Azure Storage Static Websites](#deploy-to-azure-storage-static-websites) - [Writing Enhanced Markdown](#writing-enhanced-markdown) - [Metadata with Front matter](#metadata-with-front-matter) + - [](#) + - [description: This is the guides overview page of Adobe Analytics](#description-this-is-the-guides-overview-page-of-adobe-analytics) + - [](#-1) + - [](#-2) - [hideBreadcrumbNav: false](#hidebreadcrumbnav-false) - [OpenAPI](#openapi) + - [openAPISpec: https://raw.githubusercontent.com/AdobeDocs/analytics-2.0-apis/master/docs/swagger.json](#openapispec-httpsrawgithubusercontentcomadobedocsanalytics-20-apismasterdocsswaggerjson) - [JSDoc](#jsdoc) + - [jsDoc: true](#jsdoc-true) - [MDX](#mdx) - [Modular Content System](#modular-content-system) - [JSX Blocks](#jsx-blocks) @@ -125,10 +131,11 @@ Using a theme, all of your default configuration lives in an npm package. - [MiniResourceCard](#miniresourcecard) - [Carousel](#carousel) - [VideoCarousel](#videocarousel) - - [ImageTextBlock](#imageTextBlock) + - [ImageTextBlock](#imagetextblock) - [TeaserBlock](#teaserblock) - [Accordion](#accordion) - [Accordion item](#accordion-item) + - [ListBlock](#listblock) - [Edition](#edition) - [Embedding markdown documents and filtering content](#embedding-markdown-documents-and-filtering-content) - [Embedding local markdown files](#embedding-local-markdown-files) @@ -2092,7 +2099,7 @@ Use `repeat` to define how many code sections are part of the carousel. VideoCarousel is used to show the information along with videos and buttons. -![Carousel](docs/images/videoCarousel.png) +![Carousel](docs/images/video-carousel.png) Use `slots` to identify the markdown content: @@ -2265,6 +2272,47 @@ AccordionItem default expand ``` +### ListBlock + +The `ListBlock` component showcases a two-column layout with alternating left and right content. + +![listblock](docs/images/list-block.png) + +``` + + +500 free Document Transactions per month + +Volume and multi-product discounts + +Access to all 15+ PDF Services including PDF Extract, PDF Accessibility Auto-Tag API, and Document Generation + +Access to all 15+ PDF Services including PDF Extract, PDF Accessibility Auto-Tag API, and Document Generation + +Easy to sign up and create credentials in minutes + +Technical Support included (different tiers available) + +No credit card or commitment required + +Scalable for high volume needs. + +``` +Use `slots` to identify the markdown content: + +- `text1`(required) is placed in left side. +- `text2`(required) is placed in right side. + +Use `repeat`(required) to define how many code sections are part. + +Use `iconColor` to define the marker color. The preset is black. + +Use `icon` used to indicate individual items or elements within the list. By default it is in `checkmark`. Values are `checkmark,disc, number`. + +Use `variant` to specify full width or half width values are `fullWidth,halfWidth`. + +Text1 will align the text on the leftside list i.e (1,3,5,...) +Text2 will align the text on right side i.e (2,4,6...) ### Edition diff --git a/docs/images/list-block.png b/docs/images/list-block.png new file mode 100644 index 0000000000..e3e4fecebd Binary files /dev/null and b/docs/images/list-block.png differ diff --git a/docs/images/videoCarousel.PNG b/docs/images/video-carousel.PNG similarity index 100% rename from docs/images/videoCarousel.PNG rename to docs/images/video-carousel.PNG diff --git a/example/src/pages/imageTextBlock/index.md b/example/src/pages/imageTextBlock/index.md index b0418afc37..87135da816 100644 --- a/example/src/pages/imageTextBlock/index.md +++ b/example/src/pages/imageTextBlock/index.md @@ -1,3 +1,7 @@ +## Text block with the image + +This is an example for image on the text block + ![Adobe Service](6_Image_Sales.jpg) diff --git a/example/src/pages/index.md b/example/src/pages/index.md index 0fc7277833..4b8a4e99dc 100644 --- a/example/src/pages/index.md +++ b/example/src/pages/index.md @@ -31,6 +31,7 @@ import blackbg from "./teaser/black_power.jpg" import TextBlockComp from "./textblock/textblock.md" import MiniResource from "./miniresource_block/index.md" import TextBlockImage from "./imageTextBlock/index.md" +import ListComp from "./listblock/index.md" @@ -167,6 +168,8 @@ Accordion item is to expand and collapse the content by clicking the icon. By de + + ## Inline Alerts {#Categories} These are the five types of inline alerts you can use. diff --git a/example/src/pages/listblock/index.md b/example/src/pages/listblock/index.md new file mode 100644 index 0000000000..3df12cb3ae --- /dev/null +++ b/example/src/pages/listblock/index.md @@ -0,0 +1,21 @@ +## List Block + +This an exmaple of showing list + + + +500 free Document Transactions per month + +Volume and multi-product discounts + +Access to all 15+ PDF Services including PDF Extract, PDF Accessibility Auto-Tag API, and Document Generation + +Access to all 15+ PDF Services including PDF Extract, PDF Accessibility Auto-Tag API, and Document Generation + +Easy to sign up and create credentials in minutes + +Technical Support included (different tiers available) + +No credit card or commitment required + +Scalable for high volume needs. diff --git a/packages/gatsby-theme-aio/src/components/ListBlock/index.js b/packages/gatsby-theme-aio/src/components/ListBlock/index.js new file mode 100644 index 0000000000..30e44ab4d9 --- /dev/null +++ b/packages/gatsby-theme-aio/src/components/ListBlock/index.js @@ -0,0 +1,125 @@ +/* + * Copyright 2020 Adobe. All rights reserved. + * This file is licensed to you 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 REPRESENTATIONS + * 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 { css } from '@emotion/react'; +import PropTypes from "prop-types"; +import classNames from "classnames"; + +const commonCSS = ` +width: 45%; +margin: 0 !important; + +@media screen and (min-width:320px) and (max-width:767px) { + width : 90% !important; +}` + +const List = ({ icon, iconColor, listItem, content }) => { + + const bulletIcons = icon ?? "checkmark"; + + return ( +
    + {listItem?.map((data, index) => { + const shouldHideBullet = bulletIcons === "checkmark" || (content === "right" && data?.text1 === undefined) || (content === "left" && data?.text2 === undefined); + return ( +
  • p{ + margin: var(--spectrum-global-dimension-size-150) 0 !important; + } + + ${bulletIcons === "checkmark" && + `&:before { + content: "\u2713"; + position: absolute; + left:0; + top: 0; + color: ${iconColor}; + }` + } + `}> + {content === "right" ? data?.text1 : data?.text2} +
    • + ) + })}
+ ) +} + +const ListBlock = ({ + className, + icon, + variant = "halfWidth", + iconColor = "black", + repeat, + ...props +}) => { + + const propKeys = Object?.keys(props); + const listItem = propKeys.filter((key) => key.startsWith("text2")).map((data, index) => { + return { + text1: props[data], + text2: repeat === "1" || repeat === undefined ? props["text1"] : props[`text1${index}`], + }; + }); + + return ( +
+
+
+ + +
+ + + +
+
+
+ ) +} + +ListBlock.propTypes = { + className: PropTypes.string, + icon: PropTypes.string, + iconColor: PropTypes.string, + variant: PropTypes.string, +}; + +export { ListBlock } \ No newline at end of file diff --git a/packages/gatsby-theme-aio/src/components/MDXFilter/MDXBlocks.js b/packages/gatsby-theme-aio/src/components/MDXFilter/MDXBlocks.js index a7cec8e520..b616945b71 100644 --- a/packages/gatsby-theme-aio/src/components/MDXFilter/MDXBlocks.js +++ b/packages/gatsby-theme-aio/src/components/MDXFilter/MDXBlocks.js @@ -46,6 +46,7 @@ import { TeaserBlock } from "../TeaserBlock"; import { VideoCarousel } from '../VideoCarousel'; import { MiniResourceCard } from '../MiniResourceCard'; import { ImageTextBlock } from '../ImageTextBlock'; +import { ListBlock } from '../ListBlock'; export const MDXBlocks = { Hero, @@ -83,5 +84,6 @@ export const MDXBlocks = { DCSummaryBlock, VideoCarousel, MiniResourceCard, - ImageTextBlock + ImageTextBlock, + ListBlock };