Skip to content

Commit d6c1635

Browse files
kylebuch8mwcz
kylebuch8
authored and
mwcz
committed
updating readme files of priority components (#129)
* updating readme files of priority components Fixes #21 * fixing slots formatting * more readme updates * fix prettier editor integration link * fixing issues with readmes * element README updates, add syntax coloring and base class descriptions
1 parent 6e92b6a commit d6c1635

File tree

7 files changed

+280
-45
lines changed

7 files changed

+280
-45
lines changed

‎elements/rh-card/README.md‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,27 @@
11
# WIP 🐣: RHElements Card Element
22

3+
## Usage
4+
5+
```html
6+
<rh-card>
7+
<h2 slot="header">RH Card</h2>
8+
This is the rh-card body.
9+
<div slot="footer">Text in footer</div>
10+
</rh-card>
11+
```
12+
13+
## Slots
14+
15+
### header
16+
If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6) to
17+
be used here.
18+
19+
### Default slot (body)
20+
Any content that is not designated for the header or footer slot, will go to this slot.
21+
22+
### footer
23+
Use this slot for anything that you want in the footer of the card.
24+
325
## Test
426

527
npm run test
@@ -19,5 +41,5 @@ From the RHElements root directory, run:
1941
Card (and all RHElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
2042

2143
[prettier]: https://github.com/prettier/prettier/
22-
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
44+
[prettier-ed]: https://prettier.io/docs/en/editors.html
2345
[web-component-tester]: https://github.com/Polymer/web-component-tester

‎elements/rh-cta/README.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
# WIP 🐣: RHElements Cta Element
22

3+
## Usage
4+
```html
5+
<rh-cta>
6+
<a href="https://rhelements.github.io/">Learn more about RHElements</a>
7+
</rh-cta>
8+
```
9+
10+
## Slots
11+
12+
### Default slot
13+
14+
We expect an anchor tag, `<a>`, to be the first child inside rh-cta element.
15+
316
## Test
417

518
npm run test
@@ -19,5 +32,5 @@ From the RHElements root directory, run:
1932
Cta (and all RHElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
2033

2134
[prettier]: https://github.com/prettier/prettier/
22-
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
35+
[prettier-ed]: https://prettier.io/docs/en/editors.html
2336
[web-component-tester]: https://github.com/Polymer/web-component-tester

‎elements/rh-datetime/README.md‎

Lines changed: 100 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,103 @@
11
# RHElements Datetime Element
22

3-
[![Build Status](https://travis-ci.org/RHElements/rh-datetime.svg?branch=master)](https://travis-ci.org/RHElements/rh-datetime)
3+
This RHElement enables developers to get a lot of the features from the [Intl Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) just by using attributes to set the format of the date and time they'd like to display.
4+
5+
## Usage
6+
7+
### Just the date: January 2, 2006
8+
```html
9+
<rh-datetime
10+
datetime="Mon Jan 2 15:04:05 EST 2006"
11+
type="local"
12+
day="numeric"
13+
month="long"
14+
year="numeric">
15+
Mon Jan 2 15:04:05 EST 2006
16+
</rh-datetime>
17+
```
18+
19+
### With time: Monday, Jan 02, 2006, 3:04:05 PM
20+
```html
21+
<rh-datetime
22+
datetime="Mon Jan 2 15:04:05 EST 2006"
23+
type="local"
24+
weekday="long"
25+
month="short"
26+
day="2-digit"
27+
year="numeric"
28+
hour="2-digit"
29+
minute="2-digit"
30+
second="2-digit">
31+
Mon Jan 2 15:04:05 EST 2006
32+
</rh-datetime>
33+
```
34+
35+
### With an en-GB locale: Monday, 02 Jan 2006, 15:04:05
36+
You can use any locale here.
37+
```html
38+
<rh-datetime
39+
datetime="Mon Jan 2 15:04:05 EST 2006"
40+
type="local"
41+
weekday="long"
42+
month="short"
43+
day="2-digit"
44+
year="numeric"
45+
hour="2-digit"
46+
minute="2-digit"
47+
second="2-digit"
48+
locale="en-GB">
49+
Mon Jan 2 15:04:05 EST 2006
50+
</rh-datetime>
51+
```
52+
53+
### Time adverbial: 13 years ago
54+
```html
55+
<rh-datetime
56+
type="relative"
57+
datetime="Mon Jan 2 15:04:05 EST 2006">
58+
Mon Jan 2 15:04:05 EST 2006
59+
</rh-datetime>
60+
```
61+
62+
## Attributes
63+
64+
### datetime (observed)
65+
66+
The value of this should be the same timestamp that you add to the light DOM.
67+
68+
### type (observed)
69+
70+
The options for type are:
71+
- `local`: Shows a formatted time for the indicated locale if provided
72+
- `relative`: Shows a relative time (1 hour ago, 2 hours until)
73+
74+
### weekday
75+
76+
Possible values: `narrow`, `short`, `long`
77+
78+
### month
79+
80+
Possible values: `numeric`, `2-digit`, `narrow`, `short`, `long`
81+
82+
### day
83+
84+
Possible values: `numeric`, `2-digit`
85+
86+
### year
87+
88+
Possible values: `numeric`, `2-digit`
89+
90+
### hour
91+
92+
Possible values: `numeric`, `2-digit`
93+
94+
### minute
95+
96+
Possible values: `numeric`, `2-digit`
97+
98+
### second
99+
100+
Possible values: `numeric`, `2-digit`
4101

5102
## Test
6103

@@ -18,8 +115,8 @@ From the RHElements root directory, run:
18115

19116
## Code style
20117

21-
Accordion (and all RHElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
118+
Datetime (and all RHElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
22119

23120
[prettier]: https://github.com/prettier/prettier/
24-
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
121+
[prettier-ed]: https://prettier.io/docs/en/editors.html
25122
[web-component-tester]: https://github.com/Polymer/web-component-tester

‎elements/rh-icon-panel/README.md‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,33 @@
1-
# WIP 🐣: RHElements Search Element
1+
# WIP 🐣: RHElements Icon Panel Element
2+
3+
## Usage
4+
5+
```html
6+
<rh-icon-panel icon="rh-icon-server">
7+
<h3 slot="header">This is rh-icon-panel</h3>
8+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
9+
<rh-cta slot="footer">
10+
<a href="https://rhelements.github.io">Learn more about RHElements</a>
11+
</rh-cta>
12+
</rh-icon-panel>
13+
```
14+
15+
## Slots
16+
17+
### header
18+
The header of the icon panel
19+
20+
### Default slot (body)
21+
Any content that is not designated for the header or footer slot, will go to this slot.
22+
23+
### footer
24+
Use this slot for anything that you want in the footer of the icon panel.
25+
26+
## Attributes
27+
28+
### icon (observed)
29+
30+
The name of the icon that you want to use. If the value of this attribute changes, the new icon will show up in the UI.
231

332
## Test
433

@@ -14,18 +43,10 @@ From the RHElements root directory, run:
1443

1544
npm start
1645

17-
## Styling
18-
19-
| Custom Property | Description | Default |
20-
| --------------------------------------- | ------------------------------- | ------------------------- |
21-
| --rhe-c-icon-panel\_\_icon--MarginRight | Gutter between icon and content | $rh-global--spacer |
22-
| --rhe-c-icon-panel\_\_icon--size | Icon size | $rh-global--icon-size--xl |
23-
| --rhe-c-icon-panel\_\_footer--MarginTop | Margin top of footer content | $rh-global--FontSize |
24-
2546
## Code style
2647

27-
Search (and all RHElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
48+
Icon Panel (and all RHElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
2849

2950
[prettier]: https://github.com/prettier/prettier/
30-
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
51+
[prettier-ed]: https://prettier.io/docs/en/editors.html
3152
[web-component-tester]: https://github.com/Polymer/web-component-tester

‎elements/rh-icon/README.md‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,53 @@
11
# WIP 🐣: RHElements Icon Element
22

3+
## Usage
4+
5+
```html
6+
<rh-icon icon="rh-icon-server"></rh-icon>
7+
```
8+
9+
## Attributes
10+
11+
### icon (observed)
12+
13+
The name of the icon that you want to use. If the value of this attribute changes, the new icon will show up in the UI.
14+
15+
### data-size
16+
17+
Controls the size of the icon. The options for size are:
18+
- `2x`
19+
- `3x`
20+
- `4x`
21+
- `small`
22+
- `medium`
23+
- `large`
24+
25+
```html
26+
<rh-icon icon="rh-icon-server" data-size="2x"></rh-icon>
27+
```
28+
29+
### data-block
30+
31+
By default, `rh-icon` is set to `display: inline-block`. The `data-block` attribute sets this element to `display: block`.
32+
33+
```html
34+
<rh-icon icon="rh-icon-server" data-block></rh-icon>
35+
```
36+
37+
### data-bg
38+
39+
Sets the border radius of the element to a circle (`border-radius: 50%`).
40+
41+
```html
42+
<rh-icon icon="rh-icon-server" data-bg></rh-icon>
43+
```
44+
45+
Another option for `data-bg` is to set the attribute equal to `transparent`. This makes the background transparent.
46+
47+
```html
48+
<rh-icon icon="rh-icon-server" data-bg="transparent"></rh-icon>
49+
```
50+
351
## Test
452

553
npm run test
@@ -19,5 +67,5 @@ From the RHElements root directory, run:
1967
Icon (and all RHElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
2068

2169
[prettier]: https://github.com/prettier/prettier/
22-
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
70+
[prettier-ed]: https://prettier.io/docs/en/editors.html
2371
[web-component-tester]: https://github.com/Polymer/web-component-tester

‎elements/rh-number/README.md‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,33 @@
11
# RHElements Number Element
22

3+
## Usage
4+
5+
```html
6+
<rh-number type="ordinal">4</rh-number>
7+
```
8+
9+
## Attributes
10+
11+
### number (observed)
12+
13+
Reflects the number that is in the light DOM.
14+
15+
### format (observed)
16+
17+
Reflects the format that is being used to display the number.
18+
19+
### type (observed)
20+
21+
The type of display you want to show.
22+
23+
The options for type are:
24+
- `ordinal`: (1st, 2nd, 3rd, 4th)
25+
- `bytes`: (2 KiB, 9.54 Mib, 93 Gib)
26+
- `abbrev`: (1k, 1m, 1b)
27+
- `percent`: (10%, 50%, 100%)
28+
- `e`: (2.000e+6)
29+
- `thousands`: (97 654 321.123)
30+
331
## Build
432

533
npm run build
@@ -15,4 +43,4 @@ From the RHElements root directory, run:
1543
Number (and all RHElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
1644

1745
[prettier]: https://github.com/prettier/prettier/
18-
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
46+
[prettier-ed]: https://prettier.io/docs/en/editors.html

0 commit comments

Comments
 (0)