feat(component): add column and section

[niloysikdar]

This Pull Request covers:

• New components Column and Section
• Stories for newly added components

Resolves #39

Signed-off-by: Niloy Sikdar [email protected]

[agentmilindu]

Seems you assume users will use Email (div table) then use Section (tr) and then Column(td), right? What if users want to have one column in first raw and two columns in second raw? The cells will get messy. How about having Email (div) then use Section (table tr) and then Column(td)?

[niloysikdar]

My pov:

Email will be the outermost component with the div -> table structure

If we are creating the Column component, then it should be something that will wrap its children vertically, which basically means, all of the children which are inside the Column should be aligned to create a column. For this purpose, I have taken tbody which can wrap our trs to form the vertical alignment.

Now Section will work like each row, which means users can have multiple sections inside a column, and all of the sections then will be placed vertically one after each other. For the Section component, I have taken tr.
Now we can include one or more components inside one Section. Components will be wrapped with td.

This is the same widget tree structure that Flutter also follows.

So our overall structure will look like this:

    <!-- Email -->
    <div>
      <table>
        <!-- Column -->
        <tbody>
          <!-- Section -->
          <tr>
            <td>This is 1</td>
          </tr>
          <!-- Section -->

          <!-- Section -->
          <tr>
            <td>This is 2</td>
            <td>This is 3</td>
          </tr>
          <!-- Section -->
        </tbody>
        <!-- Column -->
      </table>
    </div>
    <!-- Email -->

But this can have some styling issues if we don't maintain proper items count for the sections in the right way, that's why I also thought of multiple table nesting, but wasn't quite sure about that approach, that's why wanted to discuss with you about these approaches and texted you regarding the same @agentmilindu

[agentmilindu]

How about you implement like we discussed initially? Email (div) then use Section (table tr) and then
Column(td)?

[niloysikdar]

If we follow these rules, then it won't work.
If we make Column as td, then how can we include more than one element? Also, it won't get aligned in a column in this case.

<tr>
  <td>
    <Element 1/>
    <Element 2/>
    <Element 3/>
  <td />
<tr />

Now in this case, Element 1, Element 2, and Element 3 won't get aligned in a vertical way.

@agentmilindu