Skip to content

Latest commit

 

History

History
 
 

web-twig

README.md

Spirit Web Twig Bundle

This is a Symfony bundle with Twig implementation of Spirit Design System components, extended with JSX-like syntax.

Requirements

  • PHP 7.4 || 8.1
  • Symfony 4.4+ || 5.4+ || ^6.1
  • Twig >=1.44.6 || >=2.12.5 || 3+

Changelog

See CHANGELOG

How to install

Step 1

Download using composer

Install package

composer require lmc/spirit-web-twig-bundle

Step 2

Add SpiritWebTwigBundle into bundles (under all bundles). If you use Symfony flex, it will be configured automatically.

bundles.php

    return [
        ...,
        Lmc\SpiritWebTwigBundle\SpiritWebTwigBundle::class => ['all' => true],
    ];

Step 3 (optional)

If you want to change the default settings, create a config

config/packages/spirit_web_twig.yml

# all parameters are optional
spirit_web_twig:
  # define one or more paths to expand or overload components (uses glob patterns)
  paths:
    - '%kernel.project_dir%/templates/components'
  paths_alias: 'jobs-ui' # default is 'spirit'
  html_syntax_lexer: false # default is true
  spirit_css_class_prefix: 'jobs' # default is null
  icons: # optional settings for svg assets
    paths:
      - '%kernel.project_dir%/assets/icons' # define paths for svg icons set
    alias: 'jobs-icons' # default is 'icons-assets'

Usage

Now you can use Twig components with JSX-like syntax in your Symfony project. You only need to remember that, unlike in HTML, component tags must always start with a capital letter:

<ComponentName attr="value">Some other content</ComponentName>
...
<ComponentName attr="value" />

You can pass attributes like this:

<ComponentName
  :any="'any' ~ 'prop'" // this return as "any" prop with value "anyprop"
  other="{{'this' ~ 'works' ~ 'too'}}"
  anotherProp="or this still work"
  not-this="{{'this' ~ 'does'}}{{ 'not work' }}" // this returns syntax as plain text but prop with dash work
  ifCondition="{{ variable == 'success' ? 'true' : 'false' }}"  // condition can only be written via the ternary operator
  jsXCondition={ variable == 'success' ? 'true' : 'false' }  // condition can only be written via the ternary operator
  numberValue={11}  // if value is number 11
  isOpen  // if value is not defined, it is set to true
  isBoolean={false}  // if value is false
>
Submit
</ComponentName>

or pure original implementation

{% embed "@spirit/componentName.twig" with { props: {
    attr: 'value'
}} %}
    {% block content %}
        Some other content
    {% endblock %}
{% endembed %}

Spirit Components

if you want to extend these components, an example guide is here. if you want to contribute, read the guide here.

Deprecations

This package uses the deprecation warnings for props, functions and components that will be removed or replaced in the next major release. Check your Symfony console or log to see if you are using any of the deprecated functionality.

Deprecations in Symfony's console