Feat(web-twig): Introduce Icon component #DS-288

Add Icons and svg extension to docker and tests

packages/web-twig/CHANGELOG.md

@@ -14,6 +14,7 @@
 - Feat: Enable glob function patterns in a paths
 - Feat: Add new `Alert` variant - `informative`
 - Feat: Introduce `Modal` component
+- Feat: Introduce `Icon` component and allow icons testing
 
 ## 1.8.0 - 2022-07-18
 

packages/web-twig/docker/docker-compose.yml

@@ -7,3 +7,4 @@ services:
     command: tail -F anything
     volumes:
       - ./../:/srv/www/spirit-web-twig-bundle/:delegated
+      - ./../../icons/src/svg/:/srv/www/spirit-web-twig-bundle/static/:delegated

packages/web-twig/src/Resources/components/Icon/Icon.twig

@@ -0,0 +1,12 @@
+{# API #}
+{%- set _class = props.class | default(null) -%}
+{%- set _name = props.name -%}
+{%- set _title = props.title | default(null) -%}
+
+{# Class names #}
+{%- set _rootClassName = _spiritClassPrefix ~ 'Icon' -%}
+
+{# Miscellaneous #}
+{%- set _classNames = [ _rootClassName, _class ] -%}
+
+{{ inlineSvg('@icons-assets/' ~ _name[:1]|upper ~ _name[1:] ~ '.svg', { class: _classNames|join(' '), title: _title }) }}

packages/web-twig/src/Resources/components/Icon/README.md

@@ -0,0 +1,40 @@
+# Icon
+
+This is Twig implementation of the [Icon] component.
+
+Icon component uses inlineSVG extension, so don't forget to add icons path in the configuration
+as seen in [inlineSVG docs].
+
+Basic example usage:
+
+```html
+<Icon name="warning" />
+```
+
+Advanced example usage:
+
+```html
+<Icon name="warning" title="This is warning!" />
+```
+
+Without lexer:
+
+```twig
+{% embed "@spirit/icon.twig" with { props: {
+    name: 'warning'
+}} %}{% endembed %}
+```
+
+## API
+
+| Prop name | Type     | Default | Required | Description                        |
+| --------- | -------- | ------- | -------- | ---------------------------------- |
+| `class`   | `string` | `null`  | no       | Custom CSS class                   |
+| `name`    | `string` | —       | yes      | Name of the icon                   |
+| `title`   | `string` | `null`  | no       | Optional title to display on hover |
+
+Get list of `name` options in the [Icon package] or your source of icons.
+
+[icon]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Icon
+[inlinesvg docs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/docs/inlineSVG.md
+[icon package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons

packages/web-twig/src/Resources/twig-components/icon.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Icon/Icon.twig' %}

packages/web-twig/tests/Helper/TwigHelper.php

@@ -8,7 +8,9 @@
 use Lmc\SpiritWebTwigBundle\DependencyInjection\SpiritWebTwigExtension;
 use Lmc\SpiritWebTwigBundle\Twig\BoolpropExtension;
 use Lmc\SpiritWebTwigBundle\Twig\PropsExtension;
+use Lmc\SpiritWebTwigBundle\Twig\SvgExtension;
 use Lmc\TwigXBundle\Compiler\ComponentLexer;
+use Symfony\Component\HttpKernel\Log\Logger;
 use Twig\Environment;
 use Twig\Loader\FilesystemLoader;
 
@@ -34,6 +36,9 @@ public static function setup(
         $loader->addPath(SpiritWebTwigExtension::DEFAULT_TWIG_COMPONENTS_PATH, SpiritWebTwigExtension::DEFAULT_PATH_ALIAS);
         $loader->addPath(SpiritWebTwigExtension::DEFAULT_COMPONENTS_PATH, SpiritWebTwigExtension::DEFAULT_PATH_ALIAS);
 
+        // Reference to a filesystem in Docker, please see packages/web-twig/docker/docker-compose.yml
+        $loader->addPath(__DIR__ . '/../../static/', SpiritWebTwigExtension::DEFAULT_ICONS_ALIAS);
+
         $twig = new Environment($loader, [
             'cache' => false,
         ]);
@@ -44,6 +49,9 @@ public static function setup(
         $boolpropExtension = new BoolpropExtension();
         $twig->addExtension($boolpropExtension);
 
+        $svgExtension = new SvgExtension(new Logger);
+        $twig->addExtension($svgExtension);
+
         if ($prefix) {
             $twig->addGlobal(OverrideServiceCompilerPass::GLOBAL_PREFIX_TWIG_VARIABLE, $prefix);
         }

packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set iconDefault.twig__1.html

@@ -0,0 +1,10 @@
+<html><body>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="6fccd577f30e270369fb8c9841ad3a1c" class="Icon ">
+<path d="M2.72992 21.0001H21.2599C22.0299 21.0001 22.5099 20.1701 22.1299 19.5001L12.8599 3.50006C12.4699 2.83006 11.5099 2.83006 11.1299 3.50006L1.85992 19.5001C1.47992 20.1701 1.95992 21.0001 2.72992 21.0001ZM12.9999 18.0001H10.9999V16.0001H12.9999V18.0001ZM11.9999 14.0001C11.4499 14.0001 10.9999 13.5501 10.9999 13.0001V11.0001C10.9999 10.4501 11.4499 10.0001 11.9999 10.0001C12.5499 10.0001 12.9999 10.4501 12.9999 11.0001V13.0001C12.9999 13.5501 12.5499 14.0001 11.9999 14.0001Z" fill="#132930"></path>
+</svg>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="4aadb2a38541dea84df107350619c669" class="Icon ">
+<path d="M2.72992 21.0001H21.2599C22.0299 21.0001 22.5099 20.1701 22.1299 19.5001L12.8599 3.50006C12.4699 2.83006 11.5099 2.83006 11.1299 3.50006L1.85992 19.5001C1.47992 20.1701 1.95992 21.0001 2.72992 21.0001ZM12.9999 18.0001H10.9999V16.0001H12.9999V18.0001ZM11.9999 14.0001C11.4499 14.0001 10.9999 13.5501 10.9999 13.0001V11.0001C10.9999 10.4501 11.4499 10.0001 11.9999 10.0001C12.5499 10.0001 12.9999 10.4501 12.9999 11.0001V13.0001C12.9999 13.5501 12.5499 14.0001 11.9999 14.0001Z" fill="#132930"></path>
+<title>This is warning!</title></svg>
+
+</body></html>

packages/web-twig/tests/components-fixtures/iconDefault.twig

@@ -0,0 +1,2 @@
+<Icon name="warning" />
+<Icon name="warning" title="This is warning!" />