Skip to content

Commit 73d8c35

Browse files
minapokminapok
committed
[TASK] Add examples for list groups to EXT:styleguide
Resolves: #108222 Releases: main Change-Id: I1953e28422564507325f78ee628a9bb11b359ada Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/91778 Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch> Tested-by: core-ci <typo3@b13.com> Tested-by: Georg Ringer <georg.ringer@gmail.com> Reviewed-by: Georg Ringer <georg.ringer@gmail.com> Reviewed-by: Jasmina Ließmann <typo3@minapok.eu> Tested-by: Christian Kuhn <lolli@schwarzbu.ch> Tested-by: Jasmina Ließmann <typo3@minapok.eu>
1 parent 4d13b70 commit 73d8c35

File tree

3 files changed

+145
-0
lines changed

3 files changed

+145
-0
lines changed

‎typo3/sysext/styleguide/Classes/Controller/ComponentsController.php‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ final class ComponentsController
6060
'form',
6161
'infobox',
6262
'input',
63+
'listGroups',
6364
'modal',
6465
'navs',
6566
'notifications',
@@ -103,6 +104,7 @@ public function handleRequest(ServerRequestInterface $request): ResponseInterfac
103104
'flashMessages' => $this->renderFlashMessagesView($request),
104105
'form' => $this->renderFormView($request),
105106
'infobox' => $this->renderInfoboxView($request),
107+
'listGroups' => $this->renderListGroupsView($request),
106108
'input' => $this->renderInputView($request),
107109
'modal' => $this->renderModalView($request),
108110
'navs' => $this->renderNavsView($request),
@@ -348,6 +350,17 @@ private function renderInputView(ServerRequestInterface $request): ResponseInter
348350
return $view->renderResponse('Backend/Components/Input');
349351
}
350352

353+
private function renderListGroupsView(ServerRequestInterface $request): ResponseInterface
354+
{
355+
$view = $this->createModuleTemplate($request, 'listGroups');
356+
$view->assignMultiple([
357+
'actions' => $this->allowedActions,
358+
'currentAction' => 'listGroups',
359+
'routeIdentifier' => 'styleguide_components',
360+
]);
361+
return $view->renderResponse('Backend/Components/ListGroups');
362+
}
363+
351364
private function renderModalView(ServerRequestInterface $request): ResponseInterface
352365
{
353366
$view = $this->createModuleTemplate($request, 'modal');

‎typo3/sysext/styleguide/Resources/Private/Language/locallang.xlf‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,12 @@
168168
<trans-unit id="action.input.description">
169169
<source>Text input fields with support for various types, states, and sizes.</source>
170170
</trans-unit>
171+
<trans-unit id="action.listGroups">
172+
<source>List groups</source>
173+
</trans-unit>
174+
<trans-unit id="action.listGroups.description">
175+
<source>Lists for displaying a series of content.</source>
176+
</trans-unit>
171177
<trans-unit id="action.managePageTrees">
172178
<source>Manage example page trees</source>
173179
</trans-unit>
@@ -707,6 +713,23 @@
707713
<source>Small size</source>
708714
</trans-unit>
709715

716+
<!-- Component: List groups -->
717+
<trans-unit id="component.listGroups.headline">
718+
<source>List groups</source>
719+
</trans-unit>
720+
<trans-unit id="component.listGroups.introtext">
721+
<source>Lists for displaying a series of content.</source>
722+
</trans-unit>
723+
<trans-unit id="component.listGroups.section.default.headline">
724+
<source>Default</source>
725+
</trans-unit>
726+
<trans-unit id="component.listGroups.section.links.headline">
727+
<source>Links and buttons</source>
728+
</trans-unit>
729+
<trans-unit id="component.listGroups.section.state.headline">
730+
<source>State</source>
731+
</trans-unit>
732+
710733
<!-- Component: Modal -->
711734
<trans-unit id="component.modal.headline">
712735
<source>Modal</source>

‎typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/ListGroups.fluid.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<html
2+
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
3+
xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
4+
xmlns:sg="http://typo3.org/ns/TYPO3/CMS/Styleguide/ViewHelpers"
5+
data-namespace-typo3-fluid="true"
6+
>
7+
8+
<f:layout name="Module" />
9+
10+
<f:section name="Content">
11+
12+
<f:render
13+
partial="Backend/Navigation"
14+
arguments="{
15+
currentAction: currentAction,
16+
actions: actions,
17+
route: routeIdentifier
18+
}"
19+
/>
20+
21+
<div class="styleguide-content">
22+
<h1><f:translate key="component.listGroups.headline" domain="styleguide.messages" /></h1>
23+
<p>
24+
<f:sanitize.html><f:translate key="component.listGroups.introtext" domain="styleguide.messages" /></f:sanitize.html>
25+
</p>
26+
27+
<h2><f:translate key="component.listGroups.section.default.headline" domain="styleguide.messages" /></h2>
28+
<sg:example codePreview="true" codeLanguage="html">
29+
<ul class="list-group">
30+
<li class="list-group-item">
31+
List item 1
32+
</li>
33+
<li class="list-group-item">
34+
List item 2 - 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. 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.
35+
</li>
36+
<li class="list-group-item">
37+
List item 3
38+
</li>
39+
</ul>
40+
</sg:example>
41+
42+
<h2><f:translate key="component.listGroups.section.state.headline" domain="styleguide.messages" /></h2>
43+
44+
<sg:example codePreview="true" codeLanguage="html">
45+
<ul class="list-group">
46+
<li class="list-group-item">
47+
Default item
48+
</li>
49+
<li class="list-group-item active">
50+
Active item
51+
</li>
52+
<li class="list-group-item disabled">
53+
Disabled item
54+
</li>
55+
</ul>
56+
</sg:example>
57+
58+
<h2><f:translate key="component.listGroups.section.links.headline" domain="styleguide.messages" /></h2>
59+
<sg:example codePreview="true" codeLanguage="html">
60+
<div class="list-group">
61+
<a href="#" class="list-group-item list-group-item-action">
62+
Default item
63+
</a>
64+
<a href="#" class="list-group-item list-group-item-action active">
65+
Active item
66+
</a>
67+
<a href="#" class="list-group-item list-group-item-action disabled">
68+
Disabled item
69+
</a>
70+
</div>
71+
</sg:example>
72+
73+
<h2><f:translate key="section.frontend.headline" domain="styleguide.messages" /></h2>
74+
75+
<h3><f:translate key="section.colorScheme.headline" domain="styleguide.messages" /></h3>
76+
77+
<h4><f:translate key="component.listGroups.section.state.headline" domain="styleguide.messages" /></h4>
78+
<sg:colorScheme>
79+
<ul class="list-group">
80+
<li class="list-group-item">
81+
Default item
82+
</li>
83+
<li class="list-group-item active">
84+
Active item
85+
</li>
86+
<li class="list-group-item disabled">
87+
Disabled item
88+
</li>
89+
</ul>
90+
</sg:colorScheme>
91+
92+
<h4><f:translate key="component.listGroups.section.links.headline" domain="styleguide.messages" /></h4>
93+
<sg:colorScheme>
94+
<div class="list-group">
95+
<a href="#" class="list-group-item list-group-item-action">
96+
Default item
97+
</a>
98+
<a href="#" class="list-group-item list-group-item-action active">
99+
Active item
100+
</a>
101+
<a href="#" class="list-group-item list-group-item-action disabled">
102+
Disabled item
103+
</a>
104+
</div>
105+
</sg:colorScheme>
106+
</div>
107+
108+
</f:section>
109+
</html>

0 commit comments

Comments
 (0)