Issue #3305766: Add Three columns layout component

title: "Templates/Three Columns Layout"

description:

  component: "three column layout component."

## Canvas height

height: 350

## row settings

row:

  description: boolean

  default: false

  table:

    category: fields

## Column settings

container:

  description: boolean

  default: false

  table:

    category: fields

## Column 1 content settings.

column_1_content:

  description: string

  default: 'string'

  table:

    category: fields

## Column 2 content settings.

column_2_content:

  description: string

  default: 'string'

  table:

    category: fields

## Column 3 content settings.

column_3_content:

  description: string

  default: 'string'

  table:

    category: fields

## Column 1 size

column_1:

  description: Bootstrap column class

  table:

    category: settings

  default: 'col-4'

  options:

    '25%': 'col-3'

    '33%': 'col-4'

    '50%': 'col-6'

## Column 2 size

column_2:

  description: Bootstrap column class

  table:

    category: settings

  default: 'col-4'

  options:

    '25%': 'col-3'

    '33%': 'col-4'

    '50%': 'col-6'

## Column 2 size

column_3:

  description: Bootstrap column class

  table:

    category: settings

  default: 'col-4'

  options:

    '25%': 'col-3'

    '33%': 'col-4'

    '50%': 'col-6'

.varbase-col {

  background-color: rgb(247, 247, 247);

  padding: 20px;

  border: 1px solid rgb(231, 230, 230);

}

 No newline at end of file

import config from './threeColumnsLayout.config.yml';

import threeColumnsLayout from './threeColumnsLayout.twig';

import twigCode from '!!raw-loader!./threeColumnsLayout.twig';

import DrupalAttribute from 'drupal-attribute';

import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

import './threeColumnsLayout.css';

export default {

  title : config.title,

  component: threeColumnsLayout,

  options: { showPanel: true },

  parameters: {

    docs: {

      container: DocsContainer,

      page: DocsPage,

      source: {code: twigCode},

      description: config.description,

      iframeHeight: config.height

    },

  },

  argTypes: {

    row: {

      control: { type: 'boolean' },

      description: config.row.description,

      defaultValue: {summary: config.row.default},

      table: config.row.table,

    },

    container: {

      control: { type: 'boolean' },

      description: config.container.description,

      defaultValue: {summary: config.container.default},

      table: config.container.table,

    },

    columnOneContent: {

      content: { control: 'text' },

      description: config.column_1_content.description,

      defaultValue: {summary: config.column_1_content.default},

      table: config.column_1_content.table,

    },

    columnTwoContent: {

      content: { control: 'text' },

      description: config.column_2_content.description,

      defaultValue: {summary: config.column_2_content.default},

      table: config.column_2_content.table,

    },

    columnThreeContent: {

      content: { control: 'text' },

      description: config.column_3_content.description,

      defaultValue: {summary: config.column_3_content.default},

      table: config.column_3_content.table,

    },

    columnOneSize: {

      control: { type: "select" },

      options: config.column_1.options,

      description: config.column_1.description,

      defaultValue: {summary: config.column_1.default},

      table: config.column_1.table,

    },

    columnTwoSize: {

      control: { type: "select" },

      options: config.column_2.options,

      description: config.column_2.description,

      defaultValue: {summary: config.column_2.default},

      table: config.column_2.table,

    },

    columnThreeSize: {

      control: { type: "select" },

      options: config.column_3.options,

      description: config.column_3.description,

      defaultValue: {summary: config.column_3.default},

      table: config.column_3.table,

    }

  },

};

export const ThreeColumnsLayout = (args) => {

  return (

    threeColumnsLayout({

      attributes: new DrupalAttribute(),

      col_attributes: new DrupalAttribute(),

      row: args.row && 'row',

      container: args.container && 'container',

      content: args.content,

      container_classes: [],

      row_classes: [],

      columns: {

        col1: {attributes: new DrupalAttribute(), size: `varbase-col ${args.columnOneSize}`, content: args.columnOneContent},

        col2: {attributes: new DrupalAttribute(), size: `varbase-col ${args.columnTwoSize}`, content: args.columnTwoContent},

        col3: {attributes: new DrupalAttribute(), size: `varbase-col ${args.columnThreeSize}`, content: args.columnThreeContent},

      },

    })

  )

}

ThreeColumnsLayout.args = {

  row: true,

  container: true,

  columnOneContent: 'Column one content',

  columnTwoContent: 'Column two content',

  columnThreeContent: 'Column three content',

  columnOneSize: 'col-4',

  columnTwoSize: 'col-4',

  columnThreeSize: 'col-4',

};

{% set container_classes = container ? container_classes|merge([container]) : [''] %}

{% set row_classes = row ? row_classes|merge([row]) : [''] %}

{# Embed container component #}

{% embed "@atoms/container/container.twig" with {

  container: true,

  utility_classes: container_classes

} %}

  {% block children %}

    {# Embed row component #}

    {% embed "@atoms/row/row.twig" with {

      utility_classes: row_classes

    } %}

      {% block children %}

        {% for col in columns %}

          {# Embed column component #}

          {% embed "@atoms/column/column.twig" with {

            attributes: col.attributes.addClass(col.size)

          } %}

            {% block content %}

              {{col.content}}

            {% endblock %}

          {% endembed %}

        {% endfor %}

      {% endblock %}

    {% endembed %}

  {% endblock %}

{% endembed %}