Commit 877dc821 authored by Abdullah Yassin's avatar Abdullah Yassin
Browse files

Issue #3305766: Merge the column sizes together instead of specifying the size... 

Issue #3305766: Merge the column sizes together instead of specifying the size of each column individually
parent b9537b90

src/components/templates/layout/threeColumnsLayout/threeColumnsLayout.config.yml

+12 −31
Original line number Diff line number Diff line
@@ -18,48 +18,29 @@ container: 
## Column 1 content settings.

column_1_content:

  description: string

  default: 'string'

  default: "string"

  table:

    category: fields

## Column 2 content settings.

column_2_content:

  description: string

  default: 'string'

  default: "string"

  table:

    category: fields

## Column 3 content settings.

column_3_content:

  description: string

  default: 'string'

  default: "string"

  table:

    category: fields

## Column 1 size

column_1:

  description: Bootstrap column class

## Columns size settings.

columns_size:

  description: "Bootstrap grid classes"

  table:

    category: settings

  default: 'col-4'

    category: "settings"

  default: "col-6"

  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'
 
    "33% - 33% - 33%": "33_33_33"

    "50% - 25% - 25%": "50_25_25"

    "25% - 50% - 25%": "25_50_25"

    "25% - 25% - 50%": "25_25_50"

src/components/templates/layout/threeColumnsLayout/threeColumnsLayout.story.js

+57 −60
Original line number Diff line number Diff line 
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';

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 { getColumnsSizeClasses } from "../../../../helpers";

import "./threeColumnsLayout.css";



export default {

  title: config.title,
@@ -15,90 +16,86 @@ export default { 
      page: DocsPage,

      source: { code: twigCode },

      description: config.description,

      iframeHeight: config.height

      iframeHeight: config.height,

    },

  },

  argTypes: {

    row: {

      control: { type: 'boolean' },

      control: { type: "boolean" },

      description: config.row.description,

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

      table: config.row.table,

    },

    container: {

      control: { type: 'boolean' },

      control: { type: "boolean" },

      description: config.container.description,

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

      table: config.container.table,

    },

    columnOneContent: {

      content: { control: 'text' },

      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' },

      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' },

      content: { control: "text" },

      description: config.column_3_content.description,

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

      table: config.column_3_content.table,

    },

    columnOneSize: {

    columnsSize: {

      control: { type: "select" },

      options: config.column_1.options,

      description: config.column_1.description,

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

      table: config.column_1.table,

      options: config.columns_size.options,

      description: config.columns_size.description,

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

      table: config.columns_size.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({

  const sizeClasses = getColumnsSizeClasses(args.columnsSize);



  return threeColumnsLayout({

    attributes: new DrupalAttribute(),

    col_attributes: new DrupalAttribute(),

      row: args.row && 'row',

      container: args.container && 'container',

    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},

      col1: {

        attributes: new DrupalAttribute(),

        size: `varbase-col ${sizeClasses[0]}`,

        content: args.columnOneContent,

      },

    })

  )

}

      col2: {

        attributes: new DrupalAttribute(),

        size: `varbase-col ${sizeClasses[1]}`,

        content: args.columnTwoContent,

      },

      col3: {

        attributes: new DrupalAttribute(),

        size: `varbase-col ${sizeClasses[2]}`,

        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',

  columnOneContent: "Column one content",

  columnTwoContent: "Column two content",

  columnThreeContent: "Column three content",

  columnsSize: "33_33_33",

};

src/components/templates/layout/threeColumnsLayout/threeColumnsLayout.css

+1 −1

File changed.

Contains only whitespace changes.