@noctuatech/uswds 1.0.0-rc.1 → 1.0.0
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/package.json +1 -1
- package/src/GETTING_STARTED.mdx +77 -0
package/package.json
CHANGED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# Getting Started
|
|
2
|
+
|
|
3
|
+
Getting started is easy! In just two simple steps, you'll be up and running with Noctua's US Web Design System, making it easy to build accessible, fast, and consistent websites. Let's get started!
|
|
4
|
+
|
|
5
|
+
## Install USWDS
|
|
6
|
+
|
|
7
|
+
Either install USWDS directly from NPM.
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install @noctuatech/uswds
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Or from a CDN.
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<script type="module" src="https://esm.sh/@noctuatech/uswds/define.js?bundle"></script>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Use components directly in your HTML
|
|
20
|
+
|
|
21
|
+
After installing USWDS, you can start using the components in your HTML.
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<!-- USWDS needs to be told where to find static assets such as icons -->
|
|
25
|
+
<usa-config icon-path="https://esm.sh/@noctuatech/uswds/assets/usa-icons/">
|
|
26
|
+
<form>
|
|
27
|
+
<usa-input name="name" placeholder="Bob Smith">Name</usa-input>
|
|
28
|
+
<usa-input name="email" placeholder="my@email.com">Email</usa-input>
|
|
29
|
+
|
|
30
|
+
<usa-input-mask mask="(999) 999-9999">
|
|
31
|
+
<usa-input name="phone" placeholder="(xxx) xxx-xxxx">
|
|
32
|
+
Phone
|
|
33
|
+
</usa-input>
|
|
34
|
+
</usa-input-mask>
|
|
35
|
+
|
|
36
|
+
<usa-button type="submit">Submit</usa-button>
|
|
37
|
+
</form>
|
|
38
|
+
</usa-config>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Configuration
|
|
42
|
+
|
|
43
|
+
There are two ways to confifure UWDS for your application. There is currently only one configuration option, but there will be more in the future.
|
|
44
|
+
|
|
45
|
+
1. The `usa-config` element is used to configure the USWDS components. This element will most comonly be at the root of your application.
|
|
46
|
+
But you can have multiple instances if you have different needs in different parts of your document. Configuration will be scoped to children of the `usa-config` element.
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<body>
|
|
50
|
+
<usa-config icon-path="https://esm.sh/@noctuatech/uswds/assets/usa-icons/">
|
|
51
|
+
<!-- Your application -->
|
|
52
|
+
</usa-config>
|
|
53
|
+
</body>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
2. JavaScript API. This version of USWDS is built with [Joist](https://github.com/joist-framework/joist), a dependency injection framework for JavaScript.
|
|
57
|
+
Knowing this we can provide our own configuration to USWDS components.
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
import { DOMInjector } from "@joist/di";
|
|
61
|
+
import { USAConfig } from "@noctuatech/uswds";
|
|
62
|
+
|
|
63
|
+
const app = new DOMInjector([
|
|
64
|
+
[
|
|
65
|
+
USAConfig,
|
|
66
|
+
{
|
|
67
|
+
factory() {
|
|
68
|
+
return {
|
|
69
|
+
iconPath: "https://esm.sh/@noctuatech/uswds/assets/usa-icons/",
|
|
70
|
+
};
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
],
|
|
74
|
+
]);
|
|
75
|
+
|
|
76
|
+
app.attach(document.body);
|
|
77
|
+
```
|