{% macro tnaGrid(params) %} {%- set htmlElement = params.htmlElement if params.htmlElement else 'div' -%} {%- set containerClasses = [params.classes] if params.classes else [] -%} {%- if params.maxWidth -%} {%- set containerClasses = containerClasses + ['tna-container--max'] -%} {%- endif -%} {%- if params.noPadding -%} {%- set containerClasses = containerClasses + ['tna-container--no-padding'] -%} {%- endif -%} {%- if params.noPaddingAll -%} {%- set containerClasses = containerClasses + ['tna-container--no-padding-all'] -%} {%- endif -%} <{{ htmlElement }} class="tna-container {{ ' '.join(containerClasses) }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}> {%- for item in params.columns %} {%- set columnHtmlElement = item.htmlElement if item.htmlElement else 'div' -%} {%- set columnClasses = [item.classes] if item.classes else [] -%} {%- if item.width -%} {%- set columnClasses = columnClasses + ['tna-column--full' if item.width == 'full' else 'tna-column--width-' + item.width] -%} {%- endif -%} {%- if item.widthMedium -%} {%- set columnClasses = columnClasses + ['tna-column--full-medium' if item.widthMedium == 'full' else 'tna-column--width-' + item.widthMedium + '-medium'] -%} {%- endif -%} {%- if item.widthSmall -%} {%- set columnClasses = columnClasses + ['tna-column--full-small' if item.widthSmall == 'full' else 'tna-column--width-' + item.widthSmall + '-small'] -%} {%- endif -%} {%- if item.widthTiny -%} {%- set columnClasses = columnClasses + ['tna-column--full-tiny' if item.widthTiny == 'full' else 'tna-column--width-' + item.widthTiny + '-tiny'] -%} {%- endif -%} {%- if item.flex -%} {%- set columnClasses = columnClasses + ['tna-column--flex-' + item.flex] -%} {%- endif -%} {%- if item.flexMedium -%} {%- set columnClasses = columnClasses + ['tna-column--flex-' + item.flexMedium + '-medium'] -%} {%- endif -%} {%- if item.flexSmall -%} {%- set columnClasses = columnClasses + ['tna-column--flex-' + item.flexSmall + '-small'] -%} {%- endif -%} {%- if item.flexTiny -%} {%- set columnClasses = columnClasses + ['tna-column--flex-' + item.flexTiny + '-tiny'] -%} {%- endif -%} {%- if item.marginLeft -%} {%- set columnClasses = columnClasses + ['tna-column--margin-left-' + item.marginLeft] -%} {%- endif -%} {%- if item.marginLeftMedium -%} {%- set columnClasses = columnClasses + ['tna-column--margin-left-' + item.marginLeftMedium + '-medium'] -%} {%- endif -%} {%- if item.marginLeftSmall -%} {%- set columnClasses = columnClasses + ['tna-column--margin-left-' + item.marginLeftSmall + '-small'] -%} {%- endif -%} {%- if item.marginLeftTiny -%} {%- set columnClasses = columnClasses + ['tna-column--margin-left-' + item.marginLeftTiny + '-tiny'] -%} {%- endif -%} {%- if item.marginRight -%} {%- set columnClasses = columnClasses + ['tna-column--margin-right-' + item.marginRight] -%} {%- endif -%} {%- if item.marginRightMedium -%} {%- set columnClasses = columnClasses + ['tna-column--margin-right-' + item.marginRightMedium + '-medium'] -%} {%- endif -%} {%- if item.marginRightSmall -%} {%- set columnClasses = columnClasses + ['tna-column--margin-right-' + item.marginRightSmall + '-small'] -%} {%- endif -%} {%- if item.marginRightTiny -%} {%- set columnClasses = columnClasses + ['tna-column--margin-right-' + item.marginRightTiny + '-tiny'] -%} {%- endif -%} {%- if item.order -%} {%- set columnClasses = columnClasses + ['tna-column--order-' + item.order] -%} {%- endif -%} {%- if item.orderMedium -%} {%- set columnClasses = columnClasses + ['tna-column--order-' + item.orderMedium + '-medium'] -%} {%- endif -%} {%- if item.orderSmall -%} {%- set columnClasses = columnClasses + ['tna-column--order-' + item.orderSmall + '-small'] -%} {%- endif -%} {%- if item.orderTiny -%} {%- set columnClasses = columnClasses + ['tna-column--order-' + item.orderTiny + '-tiny'] -%} {%- endif -%} {%- if item.noPadding -%} {%- set columnClasses = columnClasses + ['tna-column--no-padding'] -%} {%- endif %} <{{ columnHtmlElement }} class="tna-column {{ ' '.join(columnClasses) }}" {%- if item.attributes %}{% for attribute, value in item.attributes.items() %} {{attribute}}="{{value}}"{% endfor %}{% endif %}> {{ item.html | safe }} {%- endfor %} {% endmacro %}