Skip to content

Commit

Permalink
fix: mapping grid item to schema props
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikemai2awesome
mikemai2awesome committed Jan 16, 2019
1 parent 95e5546 commit 70a2215
Show file tree
Hide file tree
Showing 8 changed files with 184 additions and 203 deletions.
31 changes: 5 additions & 26 deletions docs-site/src/pages/pattern-lab/_patterns/02-components/grid/00-grid.twig
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% set placeholder %}
{% set item_content %}
{% include "@bolt-components-placeholder/placeholder.twig" with {
text: "Grid item",
text: "Item",
} only %}
{% endset %}

Expand All @@ -9,40 +9,19 @@
row_gutter: "medium",
items: [
{
row_start: "1",
column_start: "1",
column_span: "4",
content: placeholder,
content: item_content,
},
{
row_start: "1",
column_start: "5",
column_span: "4",
content: placeholder,
content: item_content,
},
{
row_start: "1",
column_start: "9",
column_span: "4",
content: placeholder,
},
{
row_start: "2",
column_start: "1",
column_span: "4",
content: placeholder,
},
{
row_start: "2",
column_start: "5",
column_span: "4",
content: placeholder,
},
{
row_start: "2",
column_start: "9",
column_span: "4",
content: placeholder,
content: item_content,
},
]
} only %}
Expand Down
108 changes: 63 additions & 45 deletions ...site/src/pages/pattern-lab/_patterns/02-components/grid/20-grid-item-size-variations.twig
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,105 @@
{% set span_3_columns %}
{% include "@bolt-components-placeholder/placeholder.twig" with {
text: "Span 3 columns",
} only %}
{% endset %}
{% set span_6_columns %}
{% include "@bolt-components-placeholder/placeholder.twig" with {
text: "Span 6 columns",
} only %}
{% endset %}
{% set span_9_columns %}
{% include "@bolt-components-placeholder/placeholder.twig" with {
text: "Span 9 columns",
} only %}
{% endset %}
{% set span_12_columns %}
{% include "@bolt-components-placeholder/placeholder.twig" with {
text: "Span 12 columns",
} only %}
{% endset %}

<h3>Each item can span from 1 to 12 columns</h3>
<div class="u-bolt-margin-bottom-medium">
<div class="u-bolt-margin-bottom-large">
{% include "@bolt-components-grid/grid.twig" with {
row_gutter: "small",
items: [
{
row_start: "1",
column_start: "1",
column_span: "3",
content: "Span 3 columns",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-small",
]
}
content: span_3_columns,
},
{
row_start: "2",
column_start: "1",
column_span: "6",
content: "Span 6 columns",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-small",
]
}
content: span_6_columns,
},
{
row_start: "3",
column_start: "1",
column_span: "9",
content: "Span 9 columns",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-small",
]
}
content: span_9_columns,
},
{
row_start: "4",
column_start: "1",
column_span: "12",
content: "Span 12 columns",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-small",
]
}
content: span_12_columns,
},
]
} only %}
</div>


{% set item_1 %}
{% include "@bolt-components-placeholder/placeholder.twig" with {
text: "Item 1",
} only %}
{% endset %}
{% set item_2 %}
{% include "@bolt-components-placeholder/placeholder.twig" with {
text: "Item 2",
} only %}
{% endset %}
{% set item_3 %}
{% include "@bolt-components-placeholder/placeholder.twig" with {
text: "Item 3",
} only %}
{% endset %}

<h3>Use any combination that adds up to 12 columns to form a row</h3>
<p>In this example, the <strong>item 1</strong> is starting at column 1 and spanning 3 columns wide, the <strong>item 2</strong> is starting at column 4 and spanning 9 columns.</p>
<div class="u-bolt-margin-bottom-medium">
{% include "@bolt-components-grid/grid.twig" with {
items: [
{
row_start: "1",
column_start: "1",
column_span: "3",
content: "Span 3 columns",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-small",
]
}
content: item_1,
},
{
row_start: "1",
column_start: "4",
column_span: "9",
content: "Span 9 columns",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-small",
]
}
content: item_2,
},
]
} only %}
</div>
<p>In this example, the <strong>item 1</strong> is starting at column 1 and spanning 6 columns wide, the <strong>item 2</strong> is starting at column 7 and spanning 6 columns.</p>
<div class="u-bolt-margin-bottom-medium">
{% include "@bolt-components-grid/grid.twig" with {
items: [
{
column_start: "1",
column_span: "6",
content: item_1,
},
{
column_start: "7",
column_span: "6",
content: item_2,
},
]
} only %}
Expand Down
64 changes: 32 additions & 32 deletions ...ite/src/pages/pattern-lab/_patterns/02-components/grid/25-grid-item-align-variations.twig
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,55 @@
<h3>Align start</h3>
<h3>Horizontal item alignment</h3>
<p>The alignment must be set manually by using column-start and column-span, that way it allows a lot more flexibility with exactly how you want to position an item horizontally.</p>

{% set item_start %}
{% include "@bolt-components-placeholder/placeholder.twig" with {
text: "Column start at 1 and span 6",
} only %}
{% endset %}
{% set item_center %}
{% include "@bolt-components-placeholder/placeholder.twig" with {
text: "Column start at 3 and span 8",
} only %}
{% endset %}
{% set item_end %}
{% include "@bolt-components-placeholder/placeholder.twig" with {
text: "Column start at 8 and span 5",
} only %}
{% endset %}

<h3>Standard alignments</h3>
<p>To align an item to the start, set column-start to 1.</p>
<div class="u-bolt-margin-bottom-medium">
{% include "@bolt-components-grid/grid.twig" with {
items: [
{
column_start: 1,
column_span: 6,
content: "Align to start of grid",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-small",
]
}
column_start: "1",
column_span: "6",
content: item_start,
},
]
} only %}
</div>

<h3>Align center</h3>
<p>To align an item to the center, set column-start by using this formula: <strong>(12 - column-span) / 2 + 1</strong>.</p>
<div class="u-bolt-margin-bottom-medium">
{% include "@bolt-components-grid/grid.twig" with {
items: [
{
column_start: 4,
column_span: 6,
content: "Align to center of grid",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-small",
]
}
column_start: "3",
column_span: "8",
content: item_center,
},
]
} only %}
</div>

<h3>Align end</h3>
<p>To align an item to the end, set column-start by using this formula: <strong>(12 - column-span) + 1</strong>.</p>
<div class="u-bolt-margin-bottom-medium">
{% include "@bolt-components-grid/grid.twig" with {
items: [
{
column_start: 7,
column_span: 6,
content: "Align to end of grid",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-small",
]
}
column_start: "8",
column_span: "5",
content: item_end,
},
]
} only %}
Expand Down
43 changes: 33 additions & 10 deletions packages/components/bolt-grid/grid.schema.yml
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
$schema: 'http://json-schema.org/draft-04/schema#'
title: Bolt Grid
description: Flexible component to build out CSS Grid-based layouts
description: 12 column grid.
type: object
properties:
attributes:
type: object
description: A Drupal-style attributes object with extra attributes to append to this component.
gutter:
type: string
description: Specifies the gutter size between the columns of the grid.
description: Spacing between the columns of the grid.
default: medium
enum:
- none
Expand All @@ -17,21 +17,44 @@ properties:
- large
row_gutter:
type: string
description: Specifies the row gutter size between the rows of the grid.
default: none
description: Spacing between the rows of the grid.
default: medium
enum:
- none
- small
- medium
- large
items:
type: array
description: Array of content items to display inside the grid itself.
description: Array of grid items to render inside the grid.
properties:
attributes:
type: object
description: A Drupal-style attributes object with extra attributes to append to this component.
content:
type: [string, object, array]
description: Content to render inside each item.
item:
type: object
ref: '@bolt-components-grid/grid-item.schema.yml'
description: Layout-specific config options for item.
description: Content to render inside each grid item.
valign:
type: string
description: Vertical alignment of the grid item itself.
default: start
enum:
- start
- center
- end
column_start:
type: string
description: The vertical starting point of the grid item. This accepts any number from `1` to `12`, and their perspective responsive variations for advanced usage, for example, `6@small` means the column start is set at 6 for any browser width larger and equal to the small breakpoint.
default: auto
column_span:
type: string
description: The number of columns the grid item should span across. This accepts any number from `1` to `12`, and their perspective responsive variations for advanced usage, for example, `6@small` means the column span is set at 6 for any browser width larger and equal to the small breakpoint.
default: auto
row_start:
type: string
description: The horizontal starting point of the grid item.
default: auto
row_span:
type: string
description: The number of rows the grid item should span across.
default: auto
32 changes: 32 additions & 0 deletions packages/components/bolt-grid/src/_grid-item.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{% set item_attributes = create_attribute(attributes|default({})) %}

{% set item_row_start = item.row_start %}
{% set item_row_span = item.row_span %}
{% set item_column_start = item.column_start %}
{% set item_column_span = item.column_span %}
{% set item_valign = item.valign %}

{# Set up checks to validate that the component's prop values are allowed, based on the component's schema #}
{% set item_row_start_options = schema.properties.item_row_start.enum %}
{% set row_span_options = schema.properties.item_row_span.enum %}
{% set column_start_options = schema.properties.item_column_start.enum %}
{% set column_span_options = schema.properties.item_column_span.enum %}
{% set valign_options = schema.properties.item_valign.enum %}

{# Check that the component's current prop values are valid. if not, default to the schema default #}
{% set item_row_start = item_row_start in item_row_start_options ? item_row_start : schema.properties.item_row_start.default %}
{% set item_row_span = item_row_span in item_row_span_options ? item_row_span : schema.properties.item_row_span.default %}
{% set item_column_start = item_column_start in item_column_start_options ? item_column_start : schema.properties.item_column_start.default %}
{% set item_column_span = item_column_span in item_column_span_options ? item_column_span : schema.properties.item_column_span.default %}
{% set item_valign = item_valign in item_valign_options ? item_valign : schema.properties.item_valign.default %}

<bolt-grid-item
{% if row_start %}row-start="{{ row_start }}"{% endif %}
{% if row_span %}row-span="{{ row_span }}"{% endif %}
{% if column_start %}column-start="{{ column_start }}"{% endif %}
{% if column_span %}column-span="{{ column_span }}"{% endif %}
{% if valign %}valign="{{ valign }}"{% endif %}
{{ item_attributes }}
>
{{ content }}
</bolt-grid-item>
Loading

0 comments on commit 70a2215

Please sign in to comment.