Skip to content

Commit 20fc9d2

Browse files
castastrophecastastrophe
authored
Merge pull request #317 from patternfly/issue-314-content-set-bug
Fixes #314: using group.children instead of the query selector
2 parents 5f07640 + e6457bb commit 20fc9d2

File tree

6 files changed

+94
-32
lines changed

6 files changed

+94
-32
lines changed

‎elements/pfe-content-set/demo/index.html‎

Lines changed: 85 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,42 +15,82 @@
1515
'../../../themes/cp-theme/cp-theme.umd.js',
1616
'../pfe-content-set.umd.js',
1717
'../../pfe-tabs/pfe-tabs.umd.js',
18-
'../../pfe-accordion/pfe-accordion.umd.js'
18+
'../../pfe-accordion/pfe-accordion.umd.js',
19+
'../../pfe-cta/pfe-cta.umd.js'
1920
]);
2021
</script>
2122
<noscript>
2223
<link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">
2324
</noscript>
25+
<style>
26+
h1, h2 {
27+
margin-bottom: .3em;
28+
}
29+
h2 {
30+
color: var(--pfe-theme--color--ui-accent, #c00);
31+
font-size: 1.2em;
32+
text-transform: uppercase;
33+
}
34+
h2 a {
35+
color: inherit;
36+
cursor: pointer;
37+
}
38+
h3 {
39+
font-size: 1.4em;
40+
color: var(--pfe-theme--color--ui-complement, #464646);
41+
}
42+
p {
43+
margin-top: 0 !important;
44+
}
45+
hr {
46+
margin: 40px 10px;
47+
border-color: transparent;
48+
border-bottom-color: #ccc;
49+
}
50+
</style>
2451

2552
<link href="../../pfelement/pfelement.min.css" rel="stylesheet">
2653
</head>
2754
<body unresolved>
2855
<h1>&lt;pfe-content-set&gt;</h1>
29-
<h2><em>On mobile ( &lt;768px ), all examples should render as an Accordion.</em></h2>
30-
<hr/>
31-
32-
<h2>On desktop, example below should render as accordion (default style):</h2>
33-
<h3>Container max: 500px</h3>
34-
<div style="max-width: 500px">
56+
<p>This component will render your content in either an <a href="#accordions">accordion</a> or a <a href="#tabs">tabset</a> depending on the available space.</p>
57+
<p>Note: <em>On mobile ( &lt;768px ), all examples should render as an Accordion.</em></p>
58+
<br>
59+
<h2><a name="accordions">Accordions</a></h2>
60+
<p>On desktop at sizes below 768px, this component should render as an accordion.</p>
61+
<h3>Accordion: default</h3>
62+
<p><strong>Container max:</strong> 500px</p>
63+
<div style="max-width: 500px; border: 1px dashed #ccc;">
3564
<pfe-content-set>
3665
<pfe-content-set-group>
3766
<h2 pfe-heading>Heading 1</h2>
3867
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
68+
<pfe-cta priority="primary">
69+
<a href="#">Primary</a>
70+
</pfe-cta>
3971
</pfe-content-set-group>
4072
<pfe-content-set-group>
4173
<h2 pfe-heading>Heading 2</h2>
42-
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu et jen, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
74+
<article>
75+
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu et jen, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
76+
<pfe-cta priority="primary">
77+
<a href="#">Primary</a>
78+
</pfe-cta>
79+
</article>
4380
</pfe-content-set-group>
4481
<pfe-content-set-group>
4582
<h2 pfe-heading>Heading 3</h2>
4683
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
84+
<pfe-cta priority="primary">
85+
<a href="#">Primary</a>
86+
</pfe-cta>
4787
</pfe-content-set-group>
4888
</pfe-content-set>
4989
</div>
5090
<hr>
51-
<h2>On desktop, example below should render as accordion (primary style):</h2>
52-
<h3>Container max: 500px</h3>
53-
<div style="max-width: 500px">
91+
<h3>Accordion: Primary variant</h3>
92+
<p><strong>Container max:</strong> 600px</p>
93+
<div style="max-width: 600px; border: 1px dashed #ccc;">
5494
<pfe-content-set pfe-variant="primary">
5595
<pfe-content-set-group>
5696
<h2 pfe-heading>Heading 1</h2>
@@ -69,9 +109,9 @@ <h2 pfe-heading>Heading 3</h2>
69109
</pfe-content-set>
70110
</div>
71111
<hr>
72-
<h2>On desktop, example below should render as accordion (secondary style):</h2>
73-
<h3>Container max: 500px</h3>
74-
<div style="max-width: 500px">
112+
<h3>Accordion: Secondary variant</h3>
113+
<p><strong>Container max:</strong> 700px</p>
114+
<div style="max-width: 700px; border: 1px dashed #ccc;">
75115
<pfe-content-set pfe-variant="secondary">
76116
<pfe-content-set-group>
77117
<h2 pfe-heading>Heading 1</h2>
@@ -91,18 +131,29 @@ <h2 pfe-heading>Heading 3</h2>
91131
</pfe-content-set>
92132
</div>
93133
<hr>
94-
<h2>On desktop, example below should render as tabs (default style):</h2>
95-
<div>
134+
<h2><a name="tabs">Tabs</a></h2>
135+
<p>On desktop, example below should render as tabs (default style).</p>
136+
<h3>Tabs: default</h3>
137+
<p><strong>Container max:</strong> 800px</p>
138+
<div style="max-width: 800px; border: 1px dashed #ccc;">
96139
<pfe-content-set >
97140
<pfe-content-set-group>
98141
<h2 pfe-heading>Heading 1 Foo</h2>
99-
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
100-
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
142+
<article>
143+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
144+
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
145+
<pfe-cta priority="secondary">
146+
<a href="#">Primary</a>
147+
</pfe-cta>
148+
</article>
101149
</pfe-content-set-group>
102150
<pfe-content-set-group>
103151
<h2 pfe-heading>Heading 2</h2>
104152
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
105153
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
154+
<pfe-cta priority="secondary">
155+
<a href="#">Primary</a>
156+
</pfe-cta>
106157
</pfe-content-set-group>
107158
<pfe-content-set-group>
108159
<h2 pfe-heading>Heading 3</h2>
@@ -112,8 +163,9 @@ <h2 pfe-heading>Heading 3</h2>
112163
</pfe-content-set>
113164
</div>
114165
<hr>
115-
<h2>On desktop, example below should render as tabs (primary style):</h2>
116-
<div>
166+
<h3>Tabs: Primary variant</h3>
167+
<p><strong>Container max:</strong> 900px</p>
168+
<div style="max-width: 900px; border: 1px dashed #ccc;">
117169
<pfe-content-set pfe-variant="primary">
118170
<pfe-content-set-group>
119171
<h2 pfe-heading>Heading 1 Bar</h2>
@@ -133,8 +185,8 @@ <h2 pfe-heading>Heading 3</h2>
133185
</pfe-content-set>
134186
</div>
135187
<hr>
136-
<h2>On desktop, example below should render as tabs (secondary style):</h2>
137-
<div>
188+
<h3>Tabs: Secondary variant</h3>
189+
<div style="border: 1px dashed #ccc;">
138190
<pfe-content-set pfe-variant="secondary">
139191
<pfe-content-set-group>
140192
<h2 pfe-heading>Heading 1</h2>
@@ -153,9 +205,11 @@ <h2 pfe-heading>Heading 3</h2>
153205
</pfe-content-set-group>
154206
</pfe-content-set>
155207
</div>
156-
<hr>
157-
<h2>On desktop, example below should render as vertical tabs (default style):</h2>
158-
<div>
208+
<hr>
209+
<p>On desktop, example below should render as vertical tabs (default style).</p>
210+
<h3>Vertical tabs: Default</h3>
211+
<p><strong>Container max:</strong> 800px</p>
212+
<div style="max-width: 800px; border: 1px dashed #ccc;">
159213
<pfe-content-set vertical >
160214
<pfe-content-set-group>
161215
<h2 pfe-heading>Heading 1</h2>
@@ -174,9 +228,10 @@ <h2 pfe-heading>Heading 3</h2>
174228
</pfe-content-set-group>
175229
</pfe-content-set>
176230
</div>
177-
<hr>
178-
<h2>On desktop, example below should render as vertical tabs (primary style):</h2>
179-
<div>
231+
<hr>
232+
<h3>Vertical tabs: Primary variant</h3>
233+
<p><strong>Container max:</strong> 900px</p>
234+
<div style="max-width: 900px; border: 1px dashed #ccc;">
180235
<pfe-content-set vertical pfe-variant="primary">
181236
<pfe-content-set-group>
182237
<h2 pfe-heading>Heading 1</h2>
@@ -196,8 +251,8 @@ <h2 pfe-heading>Heading 3</h2>
196251
</pfe-content-set>
197252
</div>
198253
<hr>
199-
<h2>On desktop, example below should render as vertical tabs (secondary style):</h2>
200-
<div>
254+
<h3>Vertical tabs: Secondary variant</h3>
255+
<div style="border: 1px dashed #ccc;">
201256
<pfe-content-set vertical pfe-variant="secondary">
202257
<pfe-content-set-group>
203258
<h2 pfe-heading>Heading 1</h2>

‎elements/pfe-content-set/pfe-content-set.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎elements/pfe-content-set/pfe-content-set.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)