Commit fc0faf19 authored by Abdullah Yassin's avatar Abdullah Yassin
Browse files

Issue #3305766: Create controls for responsive columns size

parent 879a7001

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

+19 −2
Original line number Diff line number Diff line
@@ -33,8 +33,8 @@ column_3_content: 
  default: "string"

  table:

    category: fields

## Columns size settings.

columns_size:

## Desktop (lg) columns size settings.

desktop_columns_size:

  description: "Bootstrap grid classes"

  table:

    category: "settings"
@@ -44,3 +44,20 @@ columns_size: 
    "50% - 25% - 25%": "50_25_25"

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

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

## Tablet (md) columns size settings.

tablet_columns_size:

  description: "Bootstrap grid classes"

  table:

    category: "settings"

  default: "col-12"

  options:

    "33% - 33% - 33%": "33_33_33"

    "100% - 100% - 100%": "100_100_100"

## Mobile (sm) columns size settings.

mobile_columns_size:

  description: "Bootstrap grid classes"

  table:

    category: "settings"

  default: "col-12"

  options:

    "100% - 100% - 100%": "100_100_100"

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

+28 −10
Original line number Diff line number Diff line
@@ -50,18 +50,34 @@ export default { 
      defaultValue: { summary: config.column_3_content.default },

      table: config.column_3_content.table,

    },

    columnsSize: {

    desktopColumnsSize: {

      control: { type: "select" },

      options: config.columns_size.options,

      description: config.columns_size.description,

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

      table: config.columns_size.table,

      options: config.desktop_columns_size.options,

      description: config.desktop_columns_size.description,

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

      table: config.desktop_columns_size.table,

    },

    tabletColumnsSize: {

      control: { type: "select" },

      options: config.tablet_columns_size.options,

      description: config.tablet_columns_size.description,

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

      table: config.tablet_columns_size.table,

    },

    mobileColumnsSize: {

      control: { type: "select" },

      options: config.mobile_columns_size.options,

      description: config.mobile_columns_size.description,

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

      table: config.mobile_columns_size.table,

    }

  },

};



export const ThreeColumnsLayout = (args) => {

  const sizeClasses = getColumnsSizeClasses(args.columnsSize);

  const desktopColumnsClasses = getColumnsSizeClasses(args.desktopColumnsSize, "lg");

  const tabletColumnsClasses = getColumnsSizeClasses(args.tabletColumnsSize, "md");

  const mobileColumnsClasses = getColumnsSizeClasses(args.mobileColumnsSize, "sm");



  return threeColumnsLayout({

    attributes: new DrupalAttribute(),
@@ -74,17 +90,17 @@ export const ThreeColumnsLayout = (args) => { 
    columns: {

      col1: {

        attributes: new DrupalAttribute(),

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

        size: `varbase-col ${desktopColumnsClasses[0]} ${tabletColumnsClasses[0]} ${mobileColumnsClasses[0]}`,

        content: args.columnOneContent,

      },

      col2: {

        attributes: new DrupalAttribute(),

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

        size: `varbase-col ${desktopColumnsClasses[1]} ${tabletColumnsClasses[1]} ${mobileColumnsClasses[1]}`,

        content: args.columnTwoContent,

      },

      col3: {

        attributes: new DrupalAttribute(),

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

        size: `varbase-col ${desktopColumnsClasses[2]} ${tabletColumnsClasses[2]} ${mobileColumnsClasses[2]}`,

        content: args.columnThreeContent,

      },

    },
@@ -97,5 +113,7 @@ ThreeColumnsLayout.args = { 
  columnOneContent: "Column one content",

  columnTwoContent: "Column two content",

  columnThreeContent: "Column three content",

  columnsSize: "33_33_33",

  desktopColumnsSize: "33_33_33",

  tabletColumnsSize: "100_100_100",

  mobileColumnsSize: "100_100_100",

};