Feat(web-twig): Introduce GridSpan

lmc-eu · Apr 3, 2023 · d26cd3a · d26cd3a
1 parent 2840af0
commit d26cd3a
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 2 deletions.
diff --git a/packages/web-twig/src/Resources/components/Grid/GridSpan.twig b/packages/web-twig/src/Resources/components/Grid/GridSpan.twig
@@ -0,0 +1,23 @@
+{# API #}
+{%- set props = props | default([]) -%}
+{%- set _class = props.class | default(null) -%}
+{%- set _over = props.over | default(null) -%}
+{%- set _desktop = props.desktop | default(null) -%}
+{%- set _elementType = props.elementType | default('div') -%}
+{%- set _tablet = props.tablet | default(null) -%}
+
+{# Class names #}
+{%- set _overClassName = _over ? _spiritClassPrefix ~ 'Grid__span--over-' ~ _over : null -%}
+{%- set _desktopClassName = _desktop ? _spiritClassPrefix ~ 'Grid__span--desktop--over-' ~ _desktop : null -%}
+{%- set _tabletClassName = _tablet ? _spiritClassPrefix ~ 'Grid__span--tablet--over-' ~ _tablet : null -%}
+{%- set _rootClassName = _spiritClassPrefix ~ 'Grid__span' -%}
+
+{# Miscellaneous #}
+{%- set _classNames = [ _rootClassName, _overClassName, _tabletClassName, _desktopClassName, _class ] -%}
+
+<{{ _elementType }}
+    {{ mainProps(props) }}
+    {{ classProp(_classNames) }}
+>
+    {%- block content %}{% endblock -%}
+</{{ _elementType }}>
diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md
@@ -2,6 +2,8 @@
 
 This is Twig implementation of the [Grid] component.
 
+## Grid
+
 Basic example usage:
 
 ```html
@@ -47,17 +49,68 @@ Without lexer:
 {% endembed %}
 ```
 
-## API
+### API
 
 | Prop name     | Type                               | Default | Required | Description                         |
 | ------------- | ---------------------------------- | ------- | -------- | ----------------------------------- |
 | `cols`        | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use            |
-| `desktop`     | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use on desktop |
 | `tablet`      | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use on tablet  |
+| `desktop`     | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use on desktop |
 | `class`       | `string`                           | `null`  | no       | Custom CSS class                    |
 | `elementType` | `string`                           | `div`   | no       | HTML tag to render                  |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
 descriptiveness and accessibility.
 
+## GridSpan
+
+Grid Span allows to center content over multiple grid columns.
+
+For more info when and why to use it, see [Grid] component.
+
+Basic example usage:
+
+```html
+<Grid>
+  <GridSpan over="2">2</GridSpan>
+  <GridSpan over="4">4</GridSpan>
+  <GridSpan over="6">6</GridSpan>
+  <GridSpan over="8">8</GridSpan>
+  <GridSpan over="10">10</GridSpan>
+</Grid>
+```
+
+Advanced example usage:
+
+```html
+<Grid elementType="ul">
+  <GridSpan elementType="li" over="10" tablet="8" desktop="6"> 10 on mobile, 8 on tablet, 6 on desktop </GridSpan>
+</Grid>
+```
+
+Without lexer:
+
+```twig
+{% embed "@spirit/gridSpan.twig" with { props: {
+    over: 2,
+}} %}
+    {% block content %}
+        <span>over 2</span>
+    {% endblock %}
+{% endembed %}
+```
+
+### API
+
+| Prop name     | Type                           | Default | Required | Description                               |
+| ------------- | ------------------------------ | ------- | -------- | ----------------------------------------- |
+| `over`        | `2`, `4`, `6`, `8`, `10`, `12` | `null`  | no       | Number of columns to span over            |
+| `tablet`      | `2`, `4`, `6`, `8`, `10`, `12` | `null`  | no       | Number of columns to span over on tablet  |
+| `desktop`     | `2`, `4`, `6`, `8`, `10`, `12` | `null`  | no       | Number of columns to span over on desktop |
+| `class`       | `string`                       | `null`  | no       | Custom CSS class                          |
+| `elementType` | `string`                       | `div`   | no       | HTML tag to render                        |
+
+You can add `id`, `data-*` or `aria-*` attributes to further extend component's
+descriptiveness and accessibility.
+
 [grid]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Grid
diff --git a/packages/web-twig/src/Resources/twig-components/gridSpan.twig b/packages/web-twig/src/Resources/twig-components/gridSpan.twig
@@ -0,0 +1 @@
+{% extends '@spirit/Grid/GridSpan.twig' %}