@pantheon-systems/pds-toolkit-react 1.0.0-dev.6 → 1.0.0-dev.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -1
- package/_dist/cjs/index.js +45 -7
- package/_dist/cjs/index.js.map +1 -1
- package/_dist/css/pds-components.css +67 -38
- package/_dist/css/pds-core.css +4 -2
- package/_dist/css/pds-layouts.css +1 -0
- package/_dist/esm/index.js +45 -7
- package/_dist/esm/index.js.map +1 -1
- package/package.json +41 -25
package/README.md
CHANGED
|
@@ -1,7 +1,33 @@
|
|
|
1
1
|
# pds-toolkit-react
|
|
2
2
|
|
|
3
|
-
React Toolkit for the Pantheon Design System
|
|
3
|
+
## React Toolkit for the Pantheon Design System
|
|
4
4
|
|
|
5
5
|
This toolkit provides assets for use within a React project and a Storybook instance to preview the components.
|
|
6
6
|
|
|
7
7
|
[Published Storybook](https://live-pds-toolkit-react.appa.pantheon.site/)
|
|
8
|
+
|
|
9
|
+
## Toolkit philosophy and scope
|
|
10
|
+
|
|
11
|
+
The intent of this toolkit is to provide a React-based implementation of the Pantheon Design System (PDS) with a focus on semantics, accessibility, visual design, and user-interface design.
|
|
12
|
+
|
|
13
|
+
This toolkit should not contain processes or mechanisms used for data manipulation, business logic, or similar. Therefore, processes such as form handling, routing, and language translation should be handled within the application that is consuming the toolkit.
|
|
14
|
+
|
|
15
|
+
Each component will contain a documentation page within Storybook that provides usage notes, implementation instructions, and expected data structure for that particular component.
|
|
16
|
+
|
|
17
|
+
### Content within components
|
|
18
|
+
|
|
19
|
+
Content should not live within components with a few exceptions — the Social Links component and the links in the legal section of the SiteFooter component. To maintain consistency between all of our digital properties, these links will originate from the design system.
|
|
20
|
+
|
|
21
|
+
## Implementation instructions
|
|
22
|
+
|
|
23
|
+
The toolkit consists of a global stylesheet and React components. Both are required for the toolkit to function as intended.
|
|
24
|
+
|
|
25
|
+
The global stylesheet — `pds-core.css` — provides the base styles for the toolkit including foundations, utilities, and color variables. This stylesheet should be applied at the root of the application.
|
|
26
|
+
|
|
27
|
+
The React components are imported and used within the application as needed. Component-specific styles are imported and applied automatically when the component is used.
|
|
28
|
+
|
|
29
|
+
Components should be imported using named imports. For example:
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
import { Container, SidebarLayout } from '@pantheon-systems/pds-toolkit-react';
|
|
33
|
+
```
|