[CHUX-460] Add new prop to ec-container (#1947)

* [CHUX-460] add showMobileLayout prop

* [CHUX-460] rename prop to isResponsive and set default to true

* [CHUX-460] remove default true

* [CHUX-460] rename story to responsive layout

src/components/ec-container/__snapshots__/ec-container.spec.ts.snap

@@ -1,5 +1,27 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`EcContainer > should apply mobile layout styles when isResponsive is given 1`] = `
+<div
+  class="ec-container ec-container--is-responsive"
+  data-test="ec-container"
+>
+  <div
+    class="ec-container__navigation ec-container__navigation--is-responsive"
+    data-test="ec-container__navigation"
+  >
+    
+    
+  </div>
+  <div
+    class="ec-container__content"
+    data-test="ec-container__content"
+  >
+    
+    
+  </div>
+</div>
+`;
+
 exports[`EcContainer > should make the navigation collapsable when isCollapsable is given 1`] = `
 <div
   class="ec-container"
@@ -44,6 +66,28 @@ exports[`EcContainer > should not have a collapsable navigation by default 1`] =
 </div>
 `;
 
+exports[`EcContainer > should not use mobile layout by default 1`] = `
+<div
+  class="ec-container"
+  data-test="ec-container"
+>
+  <div
+    class="ec-container__navigation"
+    data-test="ec-container__navigation"
+  >
+    
+    
+  </div>
+  <div
+    class="ec-container__content"
+    data-test="ec-container__content"
+  >
+    
+    
+  </div>
+</div>
+`;
+
 exports[`EcContainer > should render empty if no slots were given 1`] = `
 <div
   class="ec-container"

src/components/ec-container/ec-container.spec.ts

@@ -25,6 +25,22 @@ describe('EcContainer', () => {
     expect(wrapper.findByDataTest('ec-container__navigation').classes('ec-container__navigation--is-collapsable')).toBe(true);
   });
 
+  it('should not use mobile layout by default', () => {
+    const wrapper = mountEcContainer();
+
+    expect(wrapper.element).toMatchSnapshot();
+    expect(wrapper.findByDataTest('ec-container').classes('ec-container--is-responsive')).toBe(false);
+    expect(wrapper.findByDataTest('ec-container__navigation').classes('ec-container__navigation--is-responsive')).toBe(false);
+  });
+
+  it('should apply mobile layout styles when isResponsive is given', () => {
+    const wrapper = mountEcContainer({ isResponsive: true });
+
+    expect(wrapper.element).toMatchSnapshot();
+    expect(wrapper.findByDataTest('ec-container').classes('ec-container--is-responsive')).toBe(true);
+    expect(wrapper.findByDataTest('ec-container__navigation').classes('ec-container__navigation--is-responsive')).toBe(true);
+  });
+
   it('should render empty if no slots were given', () => {
     const wrapper = mountEcContainer();
 

src/components/ec-container/ec-container.story.ts

@@ -210,3 +210,25 @@ withNavigation.args = {
   copyrightText: 'Copyright text 2019',
   isCollapsed: false,
 };
+
+export const withResponsiveLayout: StoryFn<typeof EcContainer> = args => ({
+  components: { EcContainer },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ec-container v-bind="args">
+      <template #navigation>
+        <div class="tw-bg-key-2 tw-text-gray-8 tw-min-h-48">Navigation panel</div>
+      </template>
+      <template #content>
+        <div class="tw-bg-key-6 tw-text-gray-2 tw-min-h-screen">Main content panel</div>
+      </template>
+    </ec-container>
+  `,
+});
+
+withResponsiveLayout.args = {
+  isCollapsable: false,
+  isResponsive: true,
+};

src/components/ec-container/ec-container.vue

@@ -1,11 +1,15 @@
 <template>
   <div
     class="ec-container"
+    :class="{ 'ec-container--is-responsive': isResponsive }"
     data-test="ec-container"
   >
     <div
       class="ec-container__navigation"
-      :class="{ 'ec-container__navigation--is-collapsable': isCollapsable }"
+      :class="{
+        'ec-container__navigation--is-collapsable': isCollapsable,
+        'ec-container__navigation--is-responsive': isResponsive,
+      }"
       data-test="ec-container__navigation"
     >
       <slot name="navigation" />
@@ -30,12 +34,20 @@ defineProps<ContainerProps>();
   @apply tw-flex tw-flex-row tw-items-stretch;
   @apply tw-min-h-screen;
 
+  &--is-responsive {
+    @apply tw-flex-col;
+  }
+
   &__navigation {
     flex-basis: 280px;
 
     &--is-collapsable {
       flex-basis: 80px;
     }
+
+    &--is-responsive {
+      @apply tw-basis-auto;
+    }
   }
 
   &__content {

src/components/ec-container/types.ts

@@ -1,3 +1,4 @@
 export interface ContainerProps {
   isCollapsable?: boolean,
+  isResponsive?: boolean,
 }