Revert "feat!: Rename VerticalStack to Stack"

This reverts commit 99e7a7c.

README.md

@@ -27,15 +27,15 @@ ember install ember-layout-components
 
 ```hbs
 <Layout::Wrapper>
-  <Layout::Stack @gap="large" as |Section|>
+  <Layout::VerticalStack @gap="large" as |Section|>
     <Section>
       First section goes here.
     </Section>
 
     <Section>
       Second section goes here.
     </Section>
-  </Layout::Stack>
+  </Layout::VerticalStack>
 </Layout::Wrapper>
 ```
 
@@ -45,7 +45,7 @@ For more details, see the [documentation](https://fabscale.github.io/ember-layou
 
 - `<Layout::Wrapper>`
 - `<Layout::Center>`
-- `<Layout::Stack>`
+- `<Layout::VerticalStack>`
 - `<Layout::Cluster>`
 - `<Layout::Grid>`
 

addon/components/layout/vertical-stack.hbs

@@ -0,0 +1,16 @@
+<div
+  class={{
+    layout-join-classes
+    'layout-vertical-stack'
+    (layout-class-if @gap 'xlarge' 'layout-vertical-stack--xlarge')
+    (layout-class-if @gap 'large' 'layout-vertical-stack--large')
+    (layout-class-if @gap 'small' 'layout-vertical-stack--small')
+    (layout-class-if @gap 'xsmall' 'layout-vertical-stack--xsmall')
+    (layout-class-if
+      @withSeparator true 'layout-vertical-stack--with-separator'
+    )
+  }}
+  ...attributes
+>
+  {{yield (component 'layout/vertical-stack/item')}}
+</div>

addon/components/layout/stack/item.hbs → addon/components/layout/vertical-stack/item.hbs

@@ -1,4 +1,4 @@
 <div
-  class="layout-stack-item"
+  class="layout-vertical-stack-item"
   ...attributes
 >{{yield}}</div>

addon/styles/addon.css

@@ -1,8 +1,8 @@
 :root {
   --layout-wrapper-width: 60rem;
   --layout-wrapper-spacing: 2rem;
-  --layout-stack-gap: 1rem;
-  --layout-stack-separator-color: grey;
+  --layout-vertical-stack-gap: 1rem;
+  --layout-vertical-stack-separator-color: grey;
   --layout-cluster-gap: 1rem;
   --layout-grid-gap: 2rem;
   --layout-grid-width: 20rem;
@@ -36,36 +36,36 @@
 }
 
 /* Vertical Stack */
-.layout-stack {
-  --stack-gap-size: var(--layout-stack-gap);
+.layout-vertical-stack {
+  --vertical-stack-gap-size: var(--layout-vertical-stack-gap);
   display: flex;
   flex-direction: column;
 }
 
-.layout-stack-item:not(:last-child) {
-  margin-bottom: var(--stack-gap-size);
+.layout-vertical-stack-item:not(:last-child) {
+  margin-bottom: var(--vertical-stack-gap-size);
 }
 
-.layout-stack--xsmall {
-  --stack-gap-size: calc(var(--layout-stack-gap) * 0.25);
+.layout-vertical-stack--xsmall {
+  --vertical-stack-gap-size: calc(var(--layout-vertical-stack-gap) * 0.25);
 }
 
-.layout-stack--small {
-  --stack-gap-size: calc(var(--layout-stack-gap) * 0.5);
+.layout-vertical-stack--small {
+  --vertical-stack-gap-size: calc(var(--layout-vertical-stack-gap) * 0.5);
 }
 
-.layout-stack--large {
-  --stack-gap-size: calc(var(--layout-stack-gap) * 2);
+.layout-vertical-stack--large {
+  --vertical-stack-gap-size: calc(var(--layout-vertical-stack-gap) * 2);
 }
 
-.layout-stack--xlarge {
-  --stack-gap-size: calc(var(--layout-stack-gap) * 3);
+.layout-vertical-stack--xlarge {
+  --vertical-stack-gap-size: calc(var(--layout-vertical-stack-gap) * 3);
 }
 
-.layout-stack--with-separator
-  > .layout-stack-item:not(:last-child) {
-  padding-bottom: var(--stack-gap-size);
-  border-bottom: 1px solid var(--layout-stack-separator-color);
+.layout-vertical-stack--with-separator
+  > .layout-vertical-stack-item:not(:last-child) {
+  padding-bottom: var(--vertical-stack-gap-size);
+  border-bottom: 1px solid var(--layout-vertical-stack-separator-color);
 }
 
 /* Cluster */

app/components/layout/stack.js → app/components/layout/vertical-stack.js

@@ -1 +1 @@
-export { default } from 'ember-layout-components/components/layout/stack';
+export { default } from 'ember-layout-components/components/layout/vertical-stack';

app/components/layout/stack/item.js → app/components/layout/vertical-stack/item.js

@@ -1 +1 @@
-export { default } from 'ember-layout-components/components/layout/stack/item';
+export { default } from 'ember-layout-components/components/layout/vertical-stack/item';

tests/dummy/app/components/header-bar.hbs

@@ -15,8 +15,8 @@
             </LinkTo>
           </Item>
           <Item>
-            <LinkTo @route='stack' class='main-nav-item'>
-              Stack
+            <LinkTo @route='vertical-stack' class='main-nav-item'>
+              Vertical Stack
             </LinkTo>
           </Item>
           <Item>

tests/dummy/app/controllers/stack.js → tests/dummy/app/controllers/vertical-stack.js

@@ -2,18 +2,18 @@ import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
-export default class StackController extends Controller {
-  @tracked stackGap;
-  @tracked stackWithSeparator;
+export default class VerticalStackController extends Controller {
+  @tracked verticalStackGap;
+  @tracked verticalStackWithSeparator;
 
   @action
   updateProperty(property, value) {
     this[property] = value;
   }
 
-  stackCode = `<Layout::Stack as |Item|>
+  verticalStackCode = `<Layout::VerticalStack as |Item|>
   <Item>First item</Item>
   <Item>Second item</Item>
   <Item>Third item</Item>
-</Layout::Stack>`;
+</Layout::VerticalStack>`;
 }

tests/dummy/app/router.js

@@ -8,7 +8,7 @@ export default class Router extends EmberRouter {
 
 Router.map(function () {
   this.route('cluster');
-  this.route('stack');
+  this.route('vertical-stack');
   this.route('grid');
   this.route('wrapper');
   this.route('center');

tests/dummy/app/templates/application.hbs

@@ -1,9 +1,9 @@
-<Layout::Stack @gap='large' as |Item|>
+<Layout::VerticalStack @gap='large' as |Item|>
   <Item>
     <HeaderBar />
   </Item>
 
   <Item>
     {{outlet}}
   </Item>
-</Layout::Stack>
+</Layout::VerticalStack>

tests/dummy/app/templates/center.hbs

@@ -1,6 +1,6 @@
 {{! template-lint-disable no-potential-path-strings }}
 <Layout::Wrapper>
-  <Layout::Stack @gap='xlarge' as |SectionItem|>
+  <Layout::VerticalStack @gap='xlarge' as |SectionItem|>
     <SectionItem>
       <h1>
         Center
@@ -13,7 +13,7 @@
       <p>
         The size options are quarter/half/double of the gap size.
         The separator color can be customized with
-        <CodeInline @code='--layout-stack-separator-color' />
+        <CodeInline @code='--layout-vertical-stack-separator-color' />
         (default:
         <CodeInline @code='grey' />
         ).
@@ -33,7 +33,7 @@
         Configuration options
       </h2>
 
-      <Layout::Stack as |StackItem|>
+      <Layout::VerticalStack as |StackItem|>
         <StackItem>
           <Layout::Cluster @fullWidthOnMobile={{true}} as |Item|>
             <Item>
@@ -68,7 +68,7 @@
           </div>
           {{! template-lint-enable no-inline-styles }}
         </StackItem>
-      </Layout::Stack>
+      </Layout::VerticalStack>
     </SectionItem>
-  </Layout::Stack>
+  </Layout::VerticalStack>
 </Layout::Wrapper>

tests/dummy/app/templates/cluster.hbs

@@ -1,7 +1,7 @@
 {{! template-lint-disable no-potential-path-strings }}
 
 <Layout::Wrapper>
-  <Layout::Stack @gap='xlarge' as |SectionItem|>
+  <Layout::VerticalStack @gap='xlarge' as |SectionItem|>
     <SectionItem>
       <h1>
         Cluster
@@ -54,7 +54,7 @@
         Configuration options
       </h2>
 
-      <Layout::Stack as |StackItem|>
+      <Layout::VerticalStack as |StackItem|>
         <StackItem>
           <Layout::Cluster @fullWidthOnMobile={{true}} as |Item|>
             <Item>
@@ -136,7 +136,7 @@
             </Item>
           </Layout::Cluster>
         </StackItem>
-      </Layout::Stack>
+      </Layout::VerticalStack>
     </SectionItem>
 
     <SectionItem>
@@ -154,7 +154,7 @@
         Float items to the right
       </h3>
 
-      <Layout::Stack as |StackItem|>
+      <Layout::VerticalStack as |StackItem|>
         <StackItem>
           <CodeBlock @code={{this.clusterCodeRight}} @language='handlebars' />
         </StackItem>
@@ -179,15 +179,15 @@
             </Item>
           </Layout::Cluster>
         </StackItem>
-      </Layout::Stack>
+      </Layout::VerticalStack>
     </SectionItem>
 
     <SectionItem>
       <h3>
         Float items to the left
       </h3>
 
-      <Layout::Stack as |StackItem|>
+      <Layout::VerticalStack as |StackItem|>
         <StackItem>
           <CodeBlock @code={{this.clusterCodeLeft}} @language='handlebars' />
         </StackItem>
@@ -213,15 +213,15 @@
             </Item>
           </Layout::Cluster>
         </StackItem>
-      </Layout::Stack>
+      </Layout::VerticalStack>
     </SectionItem>
 
     <SectionItem>
       <h3>
         Grow items
       </h3>
 
-      <Layout::Stack as |StackItem|>
+      <Layout::VerticalStack as |StackItem|>
         <StackItem>
           <CodeBlock @code={{this.clusterCodeGrow}} @language='handlebars' />
         </StackItem>
@@ -247,7 +247,7 @@
             </Item>
           </Layout::Cluster>
         </StackItem>
-      </Layout::Stack>
+      </Layout::VerticalStack>
     </SectionItem>
-  </Layout::Stack>
+  </Layout::VerticalStack>
 </Layout::Wrapper>

tests/dummy/app/templates/grid.hbs

@@ -1,7 +1,7 @@
 {{! template-lint-disable no-potential-path-strings }}
 
 <Layout::Wrapper>
-  <Layout::Stack @gap='xlarge' as |SectionItem|>
+  <Layout::VerticalStack @gap='xlarge' as |SectionItem|>
     <SectionItem>
       <h1>
         Grid
@@ -44,7 +44,7 @@
         Configuration options
       </h2>
 
-      <Layout::Stack as |StackItem|>
+      <Layout::VerticalStack as |StackItem|>
         <StackItem>
           <p>
             There are no configuration options for the grid.
@@ -67,7 +67,7 @@
             </Item>
           </Layout::Grid>
         </StackItem>
-      </Layout::Stack>
+      </Layout::VerticalStack>
     </SectionItem>
-  </Layout::Stack>
+  </Layout::VerticalStack>
 </Layout::Wrapper>