diff --git a/src/Command/SingleDirectoryComponent.php b/src/Command/SingleDirectoryComponent.php index 06f4dc8d5..35cc3356d 100644 --- a/src/Command/SingleDirectoryComponent.php +++ b/src/Command/SingleDirectoryComponent.php @@ -85,9 +85,9 @@ private function askQuestions(array &$vars): void { } while ($library !== NULL); $vars['component_libraries'] = \array_filter($vars['component_libraries']); - $vars['component_has_css'] = $ir->confirm('Needs CSS?'); - $vars['component_has_js'] = $ir->confirm('Needs JS?'); - if ($ir->confirm('Needs component props?')) { + $vars['component_has_css'] = $ir->confirm('Need CSS?'); + $vars['component_has_js'] = $ir->confirm('Need JS?'); + if ($ir->confirm('Need component props?')) { $vars['component_props'] = []; do { $prop = $this->askProp($vars, $ir); @@ -95,6 +95,15 @@ private function askQuestions(array &$vars): void { } while ($ir->confirm('Add another prop?')); } $vars['component_props'] = \array_filter($vars['component_props'] ?? []); + + if ($ir->confirm('Need slots?')) { + $vars['component_slots'] = []; + do { + $slot = $this->askSlot($vars, $ir); + $vars['component_slots'][] = $slot; + } while ($ir->confirm('Add another slot?')); + } + $vars['component_slots'] = \array_filter($vars['component_slots'] ?? []); } /** @@ -191,4 +200,22 @@ protected function askProp(array $vars, Interviewer $ir): array { return $prop; } + /** + * Asks for multiple questions to define a slot. + * + * @psalm-param array{component_machine_name: mixed, ...} $vars + * The answers to the CLI questions. + * + * @return array + * The slot data, if any. + */ + protected function askSlot(array $vars, Interviewer $ir): array { + $slot = []; + $slot['title'] = $ir->ask('Slot title', '', new Required()); + $default = Utils::human2machine($slot['title']); + $slot['name'] = $ir->ask('Slot machine name', $default, new RequiredMachineName()); + $slot['description'] = $ir->ask('Slot description (optional)'); + return $slot; + } + } diff --git a/templates/_sdc/component.twig b/templates/_sdc/component.twig index eaa845280..86f412e52 100644 --- a/templates/_sdc/component.twig +++ b/templates/_sdc/component.twig @@ -26,3 +26,13 @@ props: examples: [] {% endfor %} {% endif %} +{% if component_slots|length > 0 %} +slots: + {% for slot in component_slots %} + {{ slot.name }}: + title: {{ slot.title }} + {% if slot.description %} + description: {{ slot.description }} + {% endif %} + {% endfor %} +{% endif %} diff --git a/templates/_sdc/template.twig b/templates/_sdc/template.twig index 880e27a1b..ceae5709e 100644 --- a/templates/_sdc/template.twig +++ b/templates/_sdc/template.twig @@ -1,6 +1,7 @@
- {{ '{# ' }}Keep the outer div whenever possible it is a nice way to ensure the presence of "attributes" {{ '#}' }} - {{ '{% ' }}block example_block {{ '%}' }} - The contents of the example block - {{ '{% ' }}endblock {{ '%}' }} + {% if component_slots|length > 0 %} + {% for slot in component_slots %} + {{ '{% block ' }}{{ slot.name }}{{ ' %}' }}{{ '{% endblock %}' }} + {% endfor %} + {% endif %}
diff --git a/tests/functional/Generator/SingleDirectoryComponentTest.php b/tests/functional/Generator/SingleDirectoryComponentTest.php index 8507e8b5c..8e8b0495d 100644 --- a/tests/functional/Generator/SingleDirectoryComponentTest.php +++ b/tests/functional/Generator/SingleDirectoryComponentTest.php @@ -35,6 +35,11 @@ public function testGenerator(): void { 'A text for CTA button.', 'String', 'No', + 'Yes', + 'My slot', + '', + 'Some description for slot.', + 'No', ]; $this->execute(SingleDirectoryComponent::class, $input); @@ -64,13 +69,13 @@ public function testGenerator(): void { Library dependencies (optional). [Example: core/once]: ➤ - Needs CSS? [Yes]: + Need CSS? [Yes]: ➤ - Needs JS? [Yes]: + Need JS? [Yes]: ➤ - Needs component props? [Yes]: + Need component props? [Yes]: ➤ Prop title: @@ -94,6 +99,21 @@ public function testGenerator(): void { Add another prop? [Yes]: ➤ + Need slots? [Yes]: + ➤ + + Slot title: + ➤ + + Slot machine name [my_slot]: + ➤ + + Slot description (optional): + ➤ + + Add another slot? [Yes]: + ➤ + The following directories and files have been created or updated: ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– • components/bar/bar.component.yml diff --git a/tests/functional/Generator/_sdc/components/bar/bar.component.yml b/tests/functional/Generator/_sdc/components/bar/bar.component.yml index 29f82ea38..0a8351e8e 100644 --- a/tests/functional/Generator/_sdc/components/bar/bar.component.yml +++ b/tests/functional/Generator/_sdc/components/bar/bar.component.yml @@ -14,3 +14,7 @@ props: description: A text for CTA button. # @todo Add examples here. examples: [] +slots: + my_slot: + title: My slot + description: Some description for slot. diff --git a/tests/functional/Generator/_sdc/components/bar/bar.twig b/tests/functional/Generator/_sdc/components/bar/bar.twig index 9f88e85a7..2cb60fb9b 100644 --- a/tests/functional/Generator/_sdc/components/bar/bar.twig +++ b/tests/functional/Generator/_sdc/components/bar/bar.twig @@ -1,6 +1,3 @@
- {# Keep the outer div whenever possible it is a nice way to ensure the presence of "attributes" #} - {% block example_block %} - The contents of the example block - {% endblock %} + {% block my_slot %}{% endblock %}