Skip to content

Commit 124d401

Browse files
authored
Minor consistency tweaks to Readme file (#95)
* Minor consistency tweaks to Readme file * Update package.json to match readme * Change heading to be consistent
1 parent 616484c commit 124d401

File tree

2 files changed

+26
-29
lines changed

2 files changed

+26
-29
lines changed

README.md

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
# Constructor.io Product Listing Pages (PLP) UI Library
1+
# Constructor.io PLP UI Library
22

33
[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Constructor-io/constructorio-ui-plp/blob/main/LICENSE)
44

55
## Introduction
66

7-
A UI Library that provides React components to manage the fetching and rendering logic for [Search](https://constructor.io/products/search/) & [Browse](https://constructor.io/products/browse/) pages powered by Constructor.io. Typescript support is available.
7+
A UI library that provides React components to manage the fetching and rendering logic for [Search](https://constructor.io/products/search/) & [Browse](https://constructor.io/products/browse/) product listing pages powered by Constructor. Typescript support is available.
88

9-
Our [Storybook Docs](https://constructor-io.github.io/constructorio-ui-plp/?path=/docs/general-introduction--documentation) are the best place to explore the behavior and the available configuration options for this UI Library.
9+
Our [Storybook Docs](https://constructor-io.github.io/constructorio-ui-plp/?path=/docs/general-introduction--documentation) are the best place to explore the behavior and the available configuration options for this UI library.
1010

1111
## Installation
1212

@@ -32,52 +32,53 @@ function YourComponent() {
3232
}
3333
```
3434

35-
### Using the Javascript Bundle
35+
### Using the JavaScript Bundle
3636

3737
This is a framework agnostic method that can be used in any JavaScript project. The `CioPlp` function provides a simple interface to inject an entire PLP UI into the provided `selector`.
38+
3839
In addition to [PLP component props](https://constructor-io.github.io/constructorio-ui-plp/?path=/docs/plp-component--docs), this function also accepts `selector` and `includeCSS`.
3940

4041
```js
4142
import CioPlp from '@constructor-io/constructorio-ui-plp/constructorio-ui-plp-bundled';
4243

4344
CioPlp({
4445
selector: '#plp-container',
45-
includeCSS: true, // Include the default CSS styles. Defaults to true.
46+
includeCSS: true, // Include the default CSS styles - defaults to true
4647
apiKey: 'key_M57QS8SMPdLdLx4x',
4748
// ... additional arguments
4849
});
4950
```
5051

5152
## Custom Styling
5253

53-
### Library defaults
54+
### Library Defaults
5455

55-
By default, importing React components from this library does not pull any css into your project.
56+
By default, importing React components from this library does not pull any CSS into your project.
5657

57-
If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
58+
If you wish to use starter styles from this library, add an import statement similar to the example import statement below:
5859

5960
```js
6061
import '@constructor-io/constructorio-ui-plp/styles.css';
6162
```
6263

63-
- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
64+
- The starter styles can be used as a foundation to build on top of, or as a reference to be replaced completely.
6465
- To opt out of all default styling, simply do not import the `styles.css` stylesheet.
65-
- All starter styles in this library are scoped within the `.cio-plp` css selector.
66-
- These starter styles are intended to be extended by layering in your own css rules
67-
- If you import the starter styles, `CioPlp` component will take up the full width and height of its parent container
66+
- All starter styles in this library are scoped within the `.cio-plp` CSS selector.
67+
- The starter styles are intended to be extended by layering in your own CSS rules.
68+
- If the starter styles are imported, `CioPlp` component will take up the full width and height of the parent container.
6869

6970
> Please note the starter styles utilize @container queries and enable responsive styles for our PLPs based on the size of their container element. Since this feature is supported by modern browsers, polyfills have not been included in this library. However, if you want to support older browsers, you can add fallback styles or use a [polyfill](https://github.com/GoogleChromeLabs/container-query-polyfill).
7071
7172
## Troubleshooting
7273

7374
### Known Issues
7475

75-
**Older Javascript environments**
76+
**Older JavaScript environments**
7677

77-
The library provides two different builds. CommonJS (cjs) and ECMAScript Modules (mjs)
78+
The library provides two different builds: CommonJS (cjs) and ECMAScript Modules (mjs).
7879

79-
For ECMAScript Modules (mjs) build. The Javascript version is ESNext which might not be supported by your environment.
80-
If that's the case and your environment is using an older Javascript version like ES6 (ES2015), you might get this error.
80+
For ECMAScript Modules (mjs) build. The JavaScript version is ESNext which might not be supported by your environment.
81+
If that's the case and your environment is using an older JavaScript version like ES6 (ES2015), you may get this error:
8182

8283
`Module parse failed: Unexpected token (15:32)
8384
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file`
@@ -92,27 +93,23 @@ There is a known issue with ESLint where it fails to resolve the paths exposed i
9293

9394
`Unable to resolve path to module '@constructor-io/constructorio-ui-plp/styles.css'`
9495

95-
Relevant open issues:
96-
97-
[Issue 1868](https://github.com/import-js/eslint-plugin-import/issues/1868)
98-
99-
[Issue 1810](https://github.com/import-js/eslint-plugin-import/issues/1810)
96+
Relevant open issues: [Issue 1868](https://github.com/import-js/eslint-plugin-import/issues/1868), [Issue 1810](https://github.com/import-js/eslint-plugin-import/issues/1810)
10097

10198
## Local Development
10299

103-
### Development scripts
100+
### Development Scripts
104101

105102
```bash
106-
npm ci # install dependencies for local dev
107-
npm run dev # start a local dev server for Storybook
108-
npm run lint # run linter
103+
npm ci # Install dependencies for local dev
104+
npm run dev # Start a local dev server for Storybook
105+
npm run lint # Run lint
109106
```
110107

111-
### Maintain Library
108+
### Library Maintenance
112109

113110
```bash
114-
npm run compile # generate lib folder for publishing to npm
115-
npm run build-storybook # generate storybook static bundle for deploy with GH Pages
111+
npm run compile # Generate lib folder for publishing to npm
112+
npm run build-storybook # Generate Storybook static bundle for deploy with GitHub Pages
116113
```
117114

118115
## Supporting Docs

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@constructor-io/constructorio-ui-plp",
33
"version": "0.0.1",
4-
"description": "Constructor.io Product Listing Pages UI library for web applications",
4+
"description": "Constructor.io PLP UI library for web applications",
55
"author": "constructor.io",
66
"license": "MIT",
77
"homepage": "https://github.com/Constructor-io/constructorio-ui-plp#readme",

0 commit comments

Comments
 (0)