Skip to content

Commit 0e74c3f

Browse files
simuraisimurai
authored
Add links to PVC (#2346)
* Add links to PVC And break some bundles (e.g. navigation) apart * Ignore some of the new pages * Revert "Ignore some of the new pages" This reverts commit 854802e.
1 parent ecbcbb1 commit 0e74c3f

29 files changed

+849
-746
lines changed

‎docs/content/components/alerts.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: Alerts
33
path: components/alerts
44
status: Stable
55
source: 'https://github.com/primer/css/tree/main/src/alerts'
6+
rails: 'https://primer.style/view-components/components/alpha/banner'
67
bundle: alerts
78
---
89

‎docs/content/components/avatar-stack.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
---
2+
title: AvatarStack
3+
path: components/avatar-stack
4+
status: Stable
5+
source: 'https://github.com/primer/css/tree/main/src/avatars'
6+
rails: 'https://primer.style/view-components/components/beta/avatarstack'
7+
bundle: avatars
8+
---
9+
10+
Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.
11+
12+
```html live
13+
<div class="AvatarStack AvatarStack--three-plus">
14+
<div
15+
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
16+
aria-label="octocat, octocat, and octocat"
17+
>
18+
<img
19+
class="avatar"
20+
height="20"
21+
alt="@octocat"
22+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
23+
width="20"
24+
/>
25+
<img
26+
class="avatar"
27+
height="20"
28+
alt="@octocat"
29+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
30+
width="20"
31+
/>
32+
<img
33+
class="avatar"
34+
height="20"
35+
alt="@octocat"
36+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
37+
width="20"
38+
/>
39+
</div>
40+
</div>
41+
```
42+
43+
Based on the number of avatars in the stack, add these modifier classes:
44+
45+
- `AvatarStack--two` for 2 avatars.
46+
- `AvatarStack--three-plus` for 3 or more avatars.
47+
48+
If you have more than three avatars, add a div with the classes `avatar avatar-more` as the third avatar in the stack, as such:
49+
50+
```html live
51+
<div class="AvatarStack AvatarStack--three-plus">
52+
<div
53+
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
54+
aria-label="octocat, octocat, octocat, octocat, and octocat"
55+
>
56+
<img
57+
class="avatar"
58+
height="20"
59+
alt="@octocat"
60+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
61+
width="20"
62+
/>
63+
<img
64+
class="avatar"
65+
height="20"
66+
alt="@octocat"
67+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
68+
width="20"
69+
/>
70+
<div class="avatar avatar-more"></div>
71+
<img
72+
class="avatar"
73+
height="20"
74+
alt="@octocat"
75+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
76+
width="20"
77+
/>
78+
<img
79+
class="avatar"
80+
height="20"
81+
alt="@octocat"
82+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
83+
width="20"
84+
/>
85+
<img
86+
class="avatar"
87+
height="20"
88+
alt="@octocat"
89+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
90+
width="20"
91+
/>
92+
</div>
93+
</div>
94+
```
95+
96+
You can also link individual avatars. To do this shift the `avatar` class over to the anchor:
97+
98+
```html live
99+
<div class="AvatarStack AvatarStack--two">
100+
<div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="octocat and octocat">
101+
<a href="#" class="avatar">
102+
<img
103+
height="20"
104+
alt="@octocat"
105+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
106+
width="20"
107+
/>
108+
</a>
109+
<a href="#" class="avatar">
110+
<img
111+
height="20"
112+
alt="@octocat"
113+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
114+
width="20"
115+
/>
116+
</a>
117+
</div>
118+
</div>
119+
```
120+
121+
Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.
122+
123+
```html live
124+
<div class="AvatarStack AvatarStack--three-plus AvatarStack--right">
125+
<div
126+
class="AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1"
127+
aria-label="octocat, octocat, and octocat"
128+
>
129+
<img
130+
class="avatar"
131+
height="20"
132+
alt="@octocat"
133+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
134+
width="20"
135+
/>
136+
<img
137+
class="avatar"
138+
height="20"
139+
alt="@octocat"
140+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
141+
width="20"
142+
/>
143+
<img
144+
class="avatar"
145+
height="20"
146+
alt="@octocat"
147+
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
148+
width="20"
149+
/>
150+
</div>
151+
</div>
152+
```

‎docs/content/components/avatars.md‎

Lines changed: 1 addition & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: Avatars
33
path: components/avatars
44
status: Stable
55
source: 'https://github.com/primer/css/tree/main/src/avatars'
6+
rails: 'https://primer.style/view-components/components/beta/avatar'
67
bundle: avatars
78
---
89

@@ -52,152 +53,6 @@ When you need a larger parent avatar, and a smaller child one, overlaid slightly
5253
</div>
5354
```
5455

55-
### Avatar stack
56-
57-
Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.
58-
59-
```html live
60-
<div class="AvatarStack AvatarStack--three-plus">
61-
<div
62-
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
63-
aria-label="octocat, octocat, and octocat"
64-
>
65-
<img
66-
class="avatar"
67-
height="20"
68-
alt="@octocat"
69-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
70-
width="20"
71-
/>
72-
<img
73-
class="avatar"
74-
height="20"
75-
alt="@octocat"
76-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
77-
width="20"
78-
/>
79-
<img
80-
class="avatar"
81-
height="20"
82-
alt="@octocat"
83-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
84-
width="20"
85-
/>
86-
</div>
87-
</div>
88-
```
89-
90-
Based on the number of avatars in the stack, add these modifier classes:
91-
92-
- `AvatarStack--two` for 2 avatars.
93-
- `AvatarStack--three-plus` for 3 or more avatars.
94-
95-
If you have more than three avatars, add a div with the classes `avatar avatar-more` as the third avatar in the stack, as such:
96-
97-
```html live
98-
<div class="AvatarStack AvatarStack--three-plus">
99-
<div
100-
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
101-
aria-label="octocat, octocat, octocat, octocat, and octocat"
102-
>
103-
<img
104-
class="avatar"
105-
height="20"
106-
alt="@octocat"
107-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
108-
width="20"
109-
/>
110-
<img
111-
class="avatar"
112-
height="20"
113-
alt="@octocat"
114-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
115-
width="20"
116-
/>
117-
<div class="avatar avatar-more"></div>
118-
<img
119-
class="avatar"
120-
height="20"
121-
alt="@octocat"
122-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
123-
width="20"
124-
/>
125-
<img
126-
class="avatar"
127-
height="20"
128-
alt="@octocat"
129-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
130-
width="20"
131-
/>
132-
<img
133-
class="avatar"
134-
height="20"
135-
alt="@octocat"
136-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
137-
width="20"
138-
/>
139-
</div>
140-
</div>
141-
```
142-
143-
You can also link individual avatars. To do this shift the `avatar` class over to the anchor:
144-
145-
```html live
146-
<div class="AvatarStack AvatarStack--two">
147-
<div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="octocat and octocat">
148-
<a href="#" class="avatar">
149-
<img
150-
height="20"
151-
alt="@octocat"
152-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
153-
width="20"
154-
/>
155-
</a>
156-
<a href="#" class="avatar">
157-
<img
158-
height="20"
159-
alt="@octocat"
160-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
161-
width="20"
162-
/>
163-
</a>
164-
</div>
165-
</div>
166-
```
167-
168-
Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.
169-
170-
```html live
171-
<div class="AvatarStack AvatarStack--three-plus AvatarStack--right">
172-
<div
173-
class="AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1"
174-
aria-label="octocat, octocat, and octocat"
175-
>
176-
<img
177-
class="avatar"
178-
height="20"
179-
alt="@octocat"
180-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
181-
width="20"
182-
/>
183-
<img
184-
class="avatar"
185-
height="20"
186-
alt="@octocat"
187-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
188-
width="20"
189-
/>
190-
<img
191-
class="avatar"
192-
height="20"
193-
alt="@octocat"
194-
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
195-
width="20"
196-
/>
197-
</div>
198-
</div>
199-
```
200-
20156
## Circle badge
20257

20358
`.CircleBadge` allows for the display of badge-like icons or logos. They are used mostly with Octicons or partner integration icons.

‎docs/content/components/blankslate.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: Blankslate
33
path: components/blankslate
44
status: Stable
55
source: 'https://github.com/primer/css/tree/main/src/blankslate'
6+
rails: 'https://primer.style/view-components/components/beta/blankslate'
67
bundle: blankslate
78
---
89

‎docs/content/components/box-overlay.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ path: components/box-overlay
44
status: Alpha
55
status_issue: 'https://github.com/github/design-systems/issues/374'
66
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/box-overlay.scss'
7+
rails: 'https://primer.style/view-components/components/alpha/dialog'
78
symbols: [Box--overlay, Box-header, Box-overlay--narrow, Box-overlay--wide]
89
keywords: [box, overlay]
910
---

‎docs/content/components/box.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ path: components/box
44
status_issue: 'https://github.com/github/design-systems/issues/198'
55
status: Stable
66
source: 'https://github.com/primer/css/tree/main/src/box'
7+
rails: 'https://primer.style/view-components/components/beta/borderbox'
78
bundle: box
89
---
910

‎docs/content/components/breadcrumb.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: Breadcrumbs
33
path: components/breadcrumb
44
status: Stable
55
source: 'https://github.com/primer/css/tree/main/src/breadcrumb'
6+
rails: 'https://primer.style/view-components/components/beta/breadcrumbs'
67
bundle: breadcrumb
78
---
89

0 commit comments

Comments
 (0)