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

feat(file): add download link per translation - INNO-1581 #105

Merged
merged 3 commits into from
Jun 28, 2019
Merged

feat(file): add download link per translation - INNO-1581 #105

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
23af3e8
feat(file): add download link per translation - INNO-1581
yhuard Jun 28, 2019
9b11d48
remove icon_path
yhuard Jun 28, 2019
1944a63
fix tests
yhuard Jun 28, 2019
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
18 changes: 9 additions & 9 deletions src/ec/packages/ec-component-file/__snapshots__/file.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ exports[`EC - File With translation renders correctly 1`] = `
<a
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
download=""
href="/example"
href="/example#bg"
hreflang="bg"
>
<span
Expand Down Expand Up @@ -152,7 +152,7 @@ exports[`EC - File With translation renders correctly 1`] = `
<a
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
download=""
href="/example"
href="/example#es"
hreflang="es"
>
<span
Expand Down Expand Up @@ -193,7 +193,7 @@ exports[`EC - File With translation renders correctly 1`] = `
<a
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
download=""
href="/example"
href="/example#fr"
hreflang="fr"
>
<span
Expand Down Expand Up @@ -336,7 +336,7 @@ exports[`EC - File With translation renders correctly with extra attributes 1`]
<a
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
download=""
href="/example"
href="/example#bg"
hreflang="bg"
>
<span
Expand Down Expand Up @@ -377,7 +377,7 @@ exports[`EC - File With translation renders correctly with extra attributes 1`]
<a
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
download=""
href="/example"
href="/example#es"
hreflang="es"
>
<span
Expand Down Expand Up @@ -418,7 +418,7 @@ exports[`EC - File With translation renders correctly with extra attributes 1`]
<a
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
download=""
href="/example"
href="/example#fr"
hreflang="fr"
>
<span
Expand Down Expand Up @@ -559,7 +559,7 @@ exports[`EC - File With translation renders correctly with extra class names 1`]
<a
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
download=""
href="/example"
href="/example#bg"
hreflang="bg"
>
<span
Expand Down Expand Up @@ -600,7 +600,7 @@ exports[`EC - File With translation renders correctly with extra class names 1`]
<a
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
download=""
href="/example"
href="/example#es"
hreflang="es"
>
<span
Expand Down Expand Up @@ -641,7 +641,7 @@ exports[`EC - File With translation renders correctly with extra class names 1`]
<a
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
download=""
href="/example"
href="/example#fr"
hreflang="fr"
>
<span
Expand Down
41 changes: 29 additions & 12 deletions src/ec/packages/ec-component-file/demo/data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@
import specDataWithTranslation from '@ecl/ec-specs-file/demo/data--with-translation';
import specDataWithoutTranslation from '@ecl/ec-specs-file/demo/data--without-translation';

const iconPath = '/static/icons.svg';

function formatIcon(i) {
const [type, name] = i.shape.split('--');
const icon = {
path: '/static/icons.svg',
path: iconPath,
type,
name,
size: i.size,
Expand All @@ -15,15 +17,6 @@ function formatIcon(i) {
return icon;
}

function formatButton(b) {
const button = {
label: b.label,
icon: formatIcon(b.icon),
};

return button;
}

function formatLink(l) {
const link = {
link: {
Expand All @@ -41,19 +34,43 @@ function formatLink(l) {
}

export const dataWithTranslation = {
icon_path: iconPath,
title: specDataWithTranslation.title,
language: specDataWithTranslation.language,
meta: specDataWithTranslation.meta,
icon: formatIcon(specDataWithTranslation.icon),
download: formatLink(specDataWithTranslation.download),
translation: {
toggle: formatButton(specDataWithTranslation.translation.toggle),
toggle: specDataWithTranslation.translation.toggle,
description: specDataWithTranslation.translation.description,
items: specDataWithTranslation.translation.items,
items: [
{
...specDataWithTranslation.translation.items[0],
download: formatLink({
label: 'Download',
href: '/example#bg',
}),
},
{
...specDataWithTranslation.translation.items[1],
download: formatLink({
label: 'Download',
href: '/example#es',
}),
},
{
...specDataWithTranslation.translation.items[2],
download: formatLink({
label: 'Download',
href: '/example#fr',
}),
},
],
},
};

export const dataWithoutTranslation = {
icon_path: iconPath,
title: specDataWithoutTranslation.title,
language: specDataWithoutTranslation.language,
meta: specDataWithoutTranslation.meta,
Expand Down
3 changes: 3 additions & 0 deletions src/ec/packages/ec-component-file/docs/file.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ npm install --save @ecl-twig/ec-component-file
## Parameters

- "icon" (object) (default: {}): object of type Icon; file type
- "icon_path" (string) (default: ''): path to the icon file
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have an issue here.
Icon path is already part of the icon component. So having it in two different places is confusing.
In some components we have this kind of extra parameters, but in most of them it is part of the Icon structure.
This has to be harmonized.

I'm not in favor of adding duplicate parameter.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly agree. To me, icon_path should be some kind of environment variable, set once and for all. It should not be repeated every time we want to use an icon.

Now, if we don't want to introduce the new variable here, we still have to extract the path from somewhere... Let me refactor it a bit

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be better now

- "title" (string) (default: '')
- "language" (string) (default: '')
- "meta" (string) (default: '')
Expand All @@ -19,6 +20,7 @@ npm install --save @ecl-twig/ec-component-file
- "title" (string) (default: '')
- "meta" (string) (default: '')
- "lang" (string) (default: '')
- "download" (object) (default to the parent download property) object of type Link
- "description (string) (default:'')
- "extra_classes" (optional) (string) (default: '')
- "extra_attributes" (optional) (array) (default: [])
Expand All @@ -33,6 +35,7 @@ npm install --save @ecl-twig/ec-component-file
title: 'State of the Union 2018 brochure',
language: 'English',
meta: '(16.2 MB - PDF)',
icon_path: 'path/to/icons.svg',
icon: {
type: 'general',
name: 'copy',
Expand Down
24 changes: 23 additions & 1 deletion src/ec/packages/ec-component-file/file.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
{#
Parameters:
- "icon" (object) (default: {}): object of type Icon; file type
- "icon_path" (string) (default: ''): path to the icon file
- "title" (string) (default: '')
- "language" (string) (default: '')
- "meta" (string) (default: '')
Expand All @@ -12,6 +13,7 @@
- "title" (string) (default: '')
- "meta" (string) (default: '')
- "lang" (string) (default: '')
- "download" (object) (default to the parent download property) object of type Link
- "description (string) (default:'')
- "extra_classes" (optional) (string) (default: '')
- "extra_attributes" (optional) (array) (default: [])
Expand All @@ -22,6 +24,7 @@
{# Internal properties #}

{% set _icon = icon|default({}) %}
{% set _icon_path = icon_path|default(_icon.path|default('')) %}
{% set _title = title|default('') %}
{% set _language = language|default('') %}
{% set _meta = meta|default('') %}
Expand Down Expand Up @@ -63,6 +66,12 @@
type: 'standalone',
icon_position: 'after',
}),
icon: {
path: _icon_path,
type: 'ui',
name: 'download',
size: 'fluid'
},
extra_classes: 'ecl-file__download',
extra_attributes: [{ name: 'download' }]
}) only %}
Expand All @@ -73,6 +82,13 @@
{% include '../ec-component-button/button.html.twig' with _translation.toggle|merge({
variant: 'ghost',
type: 'button',
icon: {
path: _icon_path,
type: 'ui',
name: 'corner-arrow',
size: 'fluid',
transform: 'rotate-180'
},
extra_classes: 'ecl-file__translation-toggle',
extra_attributes: [{ name: 'data-ecl-file-translation-toggle' }]
}) only %}
Expand All @@ -90,10 +106,16 @@
<div class="ecl-file__translation-meta">{{ _item.meta }}</div>
</div>
{% include '../ec-component-link/link.html.twig' with _download|merge({
link: _download.link|default({})|merge({
link: _item.download.link|default(_download.link|default({}))|merge({
type: 'standalone',
icon_position: 'after'
}),
icon: {
path: _icon_path,
type: 'ui',
name: 'download',
size: 'fluid'
},
extra_classes: 'ecl-file__translation-download',
extra_attributes: [
{ name: 'download' },
Expand Down
5 changes: 2 additions & 3 deletions src/ec/packages/ec-component-file/file.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,10 @@ import fileDocs from './docs/file.md';
import file from './file.html.twig';

// Add icon path
dataWithTranslation.icon_path = defaultSprite;
dataWithTranslation.icon.path = defaultSprite;
dataWithTranslation.download.icon.path = defaultSprite;
dataWithTranslation.translation.toggle.icon.path = defaultSprite;
dataWithoutTranslation.icon_path = defaultSprite;
dataWithoutTranslation.icon.path = defaultSprite;
dataWithoutTranslation.download.icon.path = defaultSprite;

storiesOf('Components/File', module)
.addDecorator(withKnobs)
Expand Down