refactor: split horizontal and vertical layout examples (#4122)

Author: web-padawan

articles/components/horizontal-layout/index.adoc

@@ -24,21 +24,21 @@ See <<../vertical-layout#, Vertical Layout>> for placing components top-to-botto
 ifdef::lit[]
 [source,typescript]
 ----
-include::{root}/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/horizontal-layout/horizontal-layout-basic.ts[render,tags=snippet,indent=0,group=Lit]
 ----
 endif::[]
 
 ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayout.java[render,tags=snippet,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/horizontallayout/HorizontalLayoutBasic.java[render,tags=snippet,indent=0,group=Flow]
 ----
 endif::[]
 
 ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout.tsx[render,tags=snippet,indent=0,group=React]
+include::{root}/frontend/demo/component/horizontal-layout/react/horizontal-layout-basic.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
 --
@@ -57,21 +57,21 @@ You can position components at the top, middle, or bottom. You can also stretch
 ifdef::lit[]
 [source,typescript]
 ----
-include::{root}/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-vertical-alignment.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/horizontal-layout/horizontal-layout-vertical-alignment.ts[render,tags=snippet,indent=0,group=Lit]
 ----
 endif::[]
 
 ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutVerticalAlignment.java[render,tags=layout,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/horizontallayout/HorizontalLayoutVerticalAlignment.java[render,tags=layout,indent=0,group=Flow]
 ----
 endif::[]
 
 ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-vertical-alignment.tsx[render,tags=snippet,indent=0,group=React]
+include::{root}/frontend/demo/component/horizontal-layout/react/horizontal-layout-vertical-alignment.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
 --
@@ -102,21 +102,21 @@ It's also possible to set a different vertical alignment for individual items by
 ifdef::lit[]
 [source,typescript]
 ----
-include::{root}/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-individual-alignment.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/horizontal-layout/horizontal-layout-individual-alignment.ts[render,tags=snippet,indent=0,group=Lit]
 ----
 endif::[]
 
 ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutIndividualAlignment.java[render,tags=layout,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/horizontallayout/HorizontalLayoutIndividualAlignment.java[render,tags=layout,indent=0,group=Flow]
 ----
 endif::[]
 
 ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-individual-alignment.tsx[render,tags=snippet,indent=0,group=React]
+include::{root}/frontend/demo/component/horizontal-layout/react/horizontal-layout-individual-alignment.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
 --
@@ -132,21 +132,21 @@ Components in a Horizontal Layout can be left-aligned, centered or right-aligned
 ifdef::lit[]
 [source,typescript]
 ----
-include::{root}/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-horizontal-alignment.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/horizontal-layout/horizontal-layout-horizontal-alignment.ts[render,tags=snippet,indent=0,group=Lit]
 ----
 endif::[]
 
 ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutHorizontalAlignment.java[render,tags=layout,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/horizontallayout/HorizontalLayoutHorizontalAlignment.java[render,tags=layout,indent=0,group=Flow]
 ----
 endif::[]
 
 ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-horizontal-alignment.tsx[render,tags=snippet,indent=0,group=React]
+include::{root}/frontend/demo/component/horizontal-layout/react/horizontal-layout-horizontal-alignment.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
 --
@@ -183,21 +183,21 @@ Spacing is used to create space among components in the same layout. Spacing can
 ifdef::lit[]
 [source,html]
 ----
-include::{root}/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/horizontal-layout/horizontal-layout-spacing.ts[render,tags=snippet,indent=0,group=Lit]
 ----
 endif::[]
 
 ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutSpacing.java[render,tags=snippet,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/horizontallayout/HorizontalLayoutSpacing.java[render,tags=snippet,indent=0,group=Flow]
 ----
 endif::[]
 
 ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-spacing.tsx[render,tags=snippet,indent=0,group=React]
+include::{root}/frontend/demo/component/horizontal-layout/react/horizontal-layout-spacing.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
 --
@@ -209,7 +209,7 @@ Five different spacing theme variants are available:
 
 [source,typescript,role=render-only]
 ----
-include::{root}/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-spacing-variants.ts[render,tags=snippet,indent=0]
+include::{root}/frontend/demo/component/horizontal-layout/horizontal-layout-spacing-variants.ts[render,tags=snippet,indent=0]
 ----
 
 --
@@ -278,21 +278,21 @@ Padding is the space between the outer border and the content in a layout. Paddi
 ifdef::lit[]
 [source,html]
 ----
-include::{root}/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-padding.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/horizontal-layout/horizontal-layout-padding.ts[render,tags=snippet,indent=0,group=Lit]
 ----
 endif::[]
 
 ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutPadding.java[render,tags=snippet,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/horizontallayout/HorizontalLayoutPadding.java[render,tags=snippet,indent=0,group=Flow]
 ----
 endif::[]
 
 ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-padding.tsx[render,tags=snippet,indent=0,group=React]
+include::{root}/frontend/demo/component/horizontal-layout/react/horizontal-layout-padding.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
 --
@@ -308,21 +308,21 @@ Use margin to create space around a layout.
 ifdef::lit[]
 [source,html]
 ----
-include::{root}/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-margin.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/horizontal-layout/horizontal-layout-margin.ts[render,tags=snippet,indent=0,group=Lit]
 ----
 endif::[]
 
 ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutMargin.java[render,tags=snippet,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/horizontallayout/HorizontalLayoutMargin.java[render,tags=snippet,indent=0,group=Flow]
 ----
 endif::[]
 
 ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-margin.tsx[render,tags=snippet,indent=0,group=React]
+include::{root}/frontend/demo/component/horizontal-layout/react/horizontal-layout-margin.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
 --
@@ -338,21 +338,21 @@ By default, components in a layout either shrink or overflow when there isn't en
 ifdef::lit[]
 [source,html]
 ----
-include::{root}/frontend/demo/component/basiclayouts/basic-layouts-horizontal-layout-wrapping.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/horizontal-layout/horizontal-layout-wrapping.ts[render,tags=snippet,indent=0,group=Lit]
 ----
 endif::[]
 
 ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsHorizontalLayoutWrapping.java[render,tags=snippet,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/horizontallayout/HorizontalLayoutWrapping.java[render,tags=snippet,indent=0,group=Flow]
 ----
 endif::[]
 
 ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-horizontal-layout-wrapping.tsx[render,tags=snippet,indent=0,group=React]
+include::{root}/frontend/demo/component/horizontal-layout/react/horizontal-layout-wrapping.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
 --
@@ -368,21 +368,21 @@ Components can be made to expand and take up any excess space a layout may have.
 ifdef::lit[]
 [source,html]
 ----
-include::{root}/frontend/demo/component/basiclayouts/basic-layouts-expanding-items.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/horizontal-layout/horizontal-layout-expanding-items.ts[render,tags=snippet,indent=0,group=Lit]
 ----
 endif::[]
 
 ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/basiclayouts/BasicLayoutsExpandingItems.java[render,tags=snippet,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/horizontallayout/HorizontalLayoutExpandingItems.java[render,tags=snippet,indent=0,group=Flow]
 ----
 endif::[]
 
 ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/basiclayouts/react/basic-layouts-expanding-items.tsx[render,tags=snippet,indent=0,group=React]
+include::{root}/frontend/demo/component/horizontal-layout/react/horizontal-layout-expanding-items.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
 --