Skip to content
This repository has been archived by the owner on May 2, 2023. It is now read-only.

fix(language-list): Renaming main template, fixing php-storybook, fixing template syntax - FRONT-823 #343

Merged
merged 6 commits into from
Feb 26, 2020
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 5 additions & 11 deletions php/php_storybook/scripts/render.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,16 @@ const extension = 'html.twig';
const rootFolder = process.cwd();
const distFolder = `${rootFolder}/php`;
const systemFolder = `${distFolder}/packages/${system}`;

const components = fs.readdirSync(systemFolder);

// Loop in each component found.
components.forEach(component => {
let componentTemplate = '';
const pkg = `${system}-component-${component}`;
/* Three known exceptions.. */
let componentTemplate = component;
// Two known exceptions..
if (component === 'checkbox' || component === 'radio') {
componentTemplate = `${component}-group`;
} else {
componentTemplate = component;
}
if (component === 'language-list') {
componentTemplate = `${component}-splash`;
}
/* This is the template we are going to render */
// This is the template we are going to render.
const template = `@ecl-twig/${pkg}/ecl-${componentTemplate}.${extension}`;
const dataFiles = fs.readdirSync(`${systemFolder}/${component}/specs`);

Expand All @@ -38,7 +32,7 @@ components.forEach(component => {

const data = require(`${systemFolder}/${component}/specs/${dataFile}`);

/* Render with twing */
// Render with twing.
let html = twing.render(template, data);

if (component === 'inpage-navigation') {
Expand Down
7 changes: 1 addition & 6 deletions php/php_storybook/scripts/render.php
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,19 @@
$root_folder = __DIR__ . '/../../../../';
$root_folder_abs = Path::canonicalize($root_folder);
$packages_folder = $root_folder_abs . DIRECTORY_SEPARATOR . 'src/' . $system . DIRECTORY_SEPARATOR . 'packages';

// The place to store HTML output of the Twig PHP renderer.
$system_path = $root_folder_abs . DIRECTORY_SEPARATOR . $output_folder . DIRECTORY_SEPARATOR . 'packages' . DIRECTORY_SEPARATOR . $system;

// This is a list of components, as generated by JavaScript.
// Thus, the list will contain only components for which we have demo data.
$components = array_slice(scandir(Path::canonicalize($system_path)), 2);

foreach ($components as $component) {
$component_group = $component_family = '';
$template = '@ecl-twig/ec-component-' . $component . '/' . $prefix . $component;

// Two known exceptions.
if ($component == 'checkbox' || $component == 'radio') {
$template = $template . '-group';
}
if ($component === 'language-list') {
$template = $template . '-splash';
}
// Deprecated components.
$deprecated_component = $helpers->deprecatedComponents($component);
// Grouping components in families and variants.
Expand Down
6 changes: 3 additions & 3 deletions src/ec/packages/ec-component-card/ecl-card.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -97,15 +97,15 @@
</h1>
</header>

{% if _card.description is not empty or _card.links is not empty %}
{% if _card.description is not empty or _card.links is not empty %}
<div class="ecl-card__body">
{% endif %}
{% if _card.description is not empty %}
<div class="ecl-card__description">{{ _card.description|raw }}</div>
{% endif %}
{% if _card.links is defined and _card.links is not empty and _card.links is iterable %}
<ul class="ecl-card__link-container">
{% for link in _card.links %}
{% for link in _card.links %}
<li class="ecl-card__link-item">
{% include '@ecl-twig/ec-component-link/ecl-link.html.twig' with {
link: link|merge({ type: 'standalone' }),
Expand All @@ -115,7 +115,7 @@
{% endfor %}
</ul>
{% endif %}
{% if _card.description is not empty or _card.links is not empty %}
{% if _card.description is not empty or _card.links is not empty %}
</div>
{% endif %}

Expand Down
4 changes: 2 additions & 2 deletions src/ec/packages/ec-component-language-list/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ npm install --save @ecl-twig/ec-component-language-list
- **"overlay"** (boolean) (default: false)
- **"icon_path"** (string) (default: ''): file containing the svg icons
- **"close_label"** (string) (default: ''): label of close button
- **"hide_overlay"** (boolean) (default: false)
- **"title"** (string) (default: ''): title of the page
- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
- **"extra_attributes"** (optional) (array) (default: []) Extra attributes
Expand All @@ -27,13 +26,14 @@ npm install --save @ecl-twig/ec-component-language-list

<!-- prettier-ignore -->
```twig
{% include '@ecl-twig/ec-component-language-list/ecl-language-list-overlay.html.twig' with {
{% include '@ecl-twig/ec-component-language-list/ecl-language-list.html.twig' with {
items: [
{ lang: 'bg', label: 'български', path: '/example' },
{ lang: 'es', label: 'español', path: '/example' },
...
],
close_label: 'Close',
overlay: false,
title: 'Select your language',
icon_path: '/path-to-the-icon-file',
extra_classes: 'my-extra-class-1 my-extra-class-2',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
{% spaceless %}

{#
Parameters:
- "items" (array) (default: [])
- "lang" (string) (default: '')
- "label" (string) (default: '')
- "path" (string) (default: '')
- "active (boolean) (default: false)
- "overlay" (boolean) (default: false): is the list an overlay?
- "icon_path" (string) (default: ''): file containing the svg icons
#}

{# Internal properties #}

{% set _items = items|default([]) %}
{% set _overlay = overlay|default(false) %}
{% set _icon_path = icon_path|default('') %}

{# Internal logic - Process properties #}

{% set _column1 = _items|slice(0, (items|length / 2)|round(0, 'ceil')) %}
{% set _column2 = _items|slice((items|length / 2)|round(0, 'ceil'), items|length) %}

{# Print the result #}

<div class="ecl-row">
<div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4 ecl-offset-lg-2">
<ul class="ecl-language-list__list">
{% for _item in _column1 %}
<li class="ecl-language-list__item{{ _item.active ? ' ecl-language-list__item--is-active' : '' }}">
{% include '@ecl-twig/ec-component-language-list/ecl-language-list-item.html.twig' with {
item: _item,
overlay: _overlay,
icon_path: _icon_path
} only %}
</li>
{% endfor %}
</ul>
</div>
<div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4">
<ul class="ecl-language-list__list">
{% for _item in _column2 %}
<li class="ecl-language-list__item{{ _item.active ? ' ecl-language-list__item--is-active' : '' }}">
{% include '@ecl-twig/ec-component-language-list/ecl-language-list-item.html.twig' with {
item: _item,
overlay: _overlay,
icon_path: _icon_path
} only %}
</li>
{% endfor %}
</ul>
</div>
</div>

{% endspaceless %}

This file was deleted.

Loading