diff --git a/src/implementations/twig/components/card/README.md b/src/implementations/twig/components/card/README.md index 9132e0c5c8c..6d0c0ff8d21 100644 --- a/src/implementations/twig/components/card/README.md +++ b/src/implementations/twig/components/card/README.md @@ -19,9 +19,19 @@ npm install --save @ecl/twig-component-card - "infos" (array) (default: []): List of infos. The format of each element in the array: - "label" (string) (default: ''): Label of info - "icon" (associative array) (default: {}): Predefined structure compatible with EC Icon - - "links" (array) (default: []): List of links (required if Card type is a 'tile'). The format of each element in the array - - "label" (string) (default: ''): Label of link - - "path" (string) (default: ''): Link url (href attribute) + - "links" (array) (default: []): Array or multi array of links (required if Card type is a 'tile') + [ + { + label: (string) (default: ''): Label of link + path: (string) (default: ''): Link url (href attribute) + }, + ... + ] + OR + [ + [ { label, path }, { label, path }, ... ], + [ { label, path }, { label, path }, ... ], + ], - "lists" (array) (default: []) Array of objects of type "description list" - "variant" (optional) (taxonomy or horizontal) - "items" (array) diff --git a/src/implementations/twig/components/card/card.html.twig b/src/implementations/twig/components/card/card.html.twig index f57e9648a39..b11e044eac1 100644 --- a/src/implementations/twig/components/card/card.html.twig +++ b/src/implementations/twig/components/card/card.html.twig @@ -18,12 +18,15 @@ }, ... ] - links: [], (array) (default: []): List of links (required if Card type is a 'tile'). Format: [ + links: [], (array) (default: []): Array or multi array of links (required if Card type is a 'tile'). Format: [ { label: (string) (default: ''): Label of link path: (string) (default: ''): Link url (href attribute) }, ... + ] OR [ + [ { label, path }, { label, path }, ... ], + [ { label, path }, { label, path }, ... ], ], lists [], (array) (default: []) Array of objects of type "description list". Format: [ { @@ -138,17 +141,33 @@ {% endif %} {% if _card.links is defined and _card.links is not empty and _card.links is iterable %} - + {% else %} + + {% endif %} {% endif %} {% if _card.infos is defined and _card.infos is not empty and _card.infos is iterable %} diff --git a/src/implementations/twig/components/content-item/package.json b/src/implementations/twig/components/content-item/package.json index 9304fe0cfd1..e146c33d39f 100644 --- a/src/implementations/twig/components/content-item/package.json +++ b/src/implementations/twig/components/content-item/package.json @@ -3,7 +3,7 @@ "author": "European Commission", "license": "EUPL-1.2", "version": "3.2.3", - "description": "ECL Card", + "description": "ECL Content Item", "publishConfig": { "access": "public" }, diff --git a/src/implementations/twig/components/navigation-list/.npmignore b/src/implementations/twig/components/navigation-list/.npmignore new file mode 100644 index 00000000000..38460544773 --- /dev/null +++ b/src/implementations/twig/components/navigation-list/.npmignore @@ -0,0 +1,2 @@ +__snapshots__ +*.js diff --git a/src/implementations/twig/components/navigation-list/README.md b/src/implementations/twig/components/navigation-list/README.md new file mode 100644 index 00000000000..854765cfb44 --- /dev/null +++ b/src/implementations/twig/components/navigation-list/README.md @@ -0,0 +1,16 @@ +# ECL Navigation List component + +npm package: `@ecl/twig-component-navigation-list` + +```shell +npm install --save @ecl/twig-component-navigation-list +``` + +### Parameters + + +```twig +{% include '@ecl/navigation-list/navigation-list.html.twig' with { + +} %} +``` diff --git a/src/implementations/twig/components/navigation-list/__snapshots__/navigation-list.test.js.snap b/src/implementations/twig/components/navigation-list/__snapshots__/navigation-list.test.js.snap new file mode 100644 index 00000000000..ff2d6d0f611 --- /dev/null +++ b/src/implementations/twig/components/navigation-list/__snapshots__/navigation-list.test.js.snap @@ -0,0 +1,930 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Navigation list Default renders correctly 1`] = ` + +
+
+ +
+
+ +
+
+ +
+
+ +`; + +exports[`Navigation list Default renders correctly with extra attributes 1`] = ` + +
+
+ +
+
+ +
+
+ +
+
+ +`; + +exports[`Navigation list Default renders correctly with extra class names 1`] = ` + +
+
+ +
+
+ +
+
+ +
+
+ +`; diff --git a/src/implementations/twig/components/navigation-list/navigation-list-item.html.twig b/src/implementations/twig/components/navigation-list/navigation-list-item.html.twig new file mode 100644 index 00000000000..45ad994ff86 --- /dev/null +++ b/src/implementations/twig/components/navigation-list/navigation-list-item.html.twig @@ -0,0 +1,83 @@ +{% spaceless %} + +{# + Parameters: + - "border" (boolean) (default: false): Is there an extra border and padding? + - "image" (associative array) (default: {}): + - "src" (string) (default: ''): Path to the image + - "size" (string) (default: 'm'): Size of the image (can be 's' or 'l') + - "title" (associative array) (default: {}): Predefined structure compatible with Link component + - "description" (string) (default: ''): Description of the navigation list + - "links": [], (array) (default: []): Array or multi array of links. Format: + [ + { + label: (string) (default: ''): Label of link + path: (string) (default: ''): Link url (href attribute) + }, + ... + ] + OR + [ + [ { label, path }, { label, path }, ... ], + [ { label, path }, { label, path }, ... ], + ], + - "extra_classes" (string) (default: '') + - "extra_attributes" (array) (default: []): format: [ + { + "name" (string) (default: ''), + "value" (optional) (string) + ... + ], +#} + +{# Internal properties #} + +{% set _border = border|default(false) %} +{% set _image = image|default({ + src: '', + size: 'l' +}) %} +{% set _title = title|default({}) %} +{% set _description = description|default('') %} +{% set _links = links|default([]) %} +{% set _css_class = 'ecl-navigation-list__item' %} +{% set _extra_attributes = '' %} + +{# Internal logic - Process properties #} + +{% set _card = { + card: { + image: _image, + title: _title, + description: _description, + links: _links, + type: "tile", + }, +} %} + +{% if not _border %} + {% set _css_class = _css_class ~ ' ecl-navigation-list__item--no-border' %} +{% endif %} + +{% if extra_classes is defined and extra_classes is not empty %} + {% set _css_class = _css_class ~ ' ' ~ extra_classes %} +{% endif %} + +{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %} + {% for attr in extra_attributes %} + {% if attr.value is defined %} + {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %} + {% else %} + {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') %} + {% endif %} + {% endfor %} +{% endif %} + +{# Print the result #} +
+ {% include '@ecl/card/card.html.twig' with _card|merge({ + extra_classes: 'ecl-navigation-list__card' + }) only %} +
+ +{% endspaceless %} diff --git a/src/implementations/twig/components/navigation-list/navigation-list.html.twig b/src/implementations/twig/components/navigation-list/navigation-list.html.twig new file mode 100644 index 00000000000..704e0da2e90 --- /dev/null +++ b/src/implementations/twig/components/navigation-list/navigation-list.html.twig @@ -0,0 +1,53 @@ +{% spaceless %} + +{# + Parameters: + - "items" (array) (default: []): array of list_illustration_item + - "column" (number) (default: 2): number of columns (2 or 3) + - "extra_classes" (string) (default: '') + - "extra_attributes" (array) (default: []): format: [ + { + "name" (string) (default: ''), + "value" (optional) (string) + ... + ], +#} + +{# Internal properties #} + +{% set _items = items|default([]) %} +{% set _column = column|default(2) %} +{% set _css_class = 'ecl-navigation-list' %} +{% set _extra_attributes = '' %} + +{# Internal logic - Process properties #} + +{% if _column and _column > 1 and _column < 4 %} + {% set _css_class = _css_class ~ ' ' ~ 'ecl-navigation-list--col-' ~ _column %} +{% endif %} + +{% if extra_classes is defined and extra_classes is not empty %} + {% set _css_class = _css_class ~ ' ' ~ extra_classes %} +{% endif %} + +{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %} + {% for attr in extra_attributes %} + {% if attr.value is defined %} + {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %} + {% else %} + {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') %} + {% endif %} + {% endfor %} +{% endif %} + +{# Print the result #} + +{% if _items is not empty and _items is iterable %} +
+ {%- for _item in _items %} + {% include '@ecl/navigation-list/navigation-list-item.html.twig' with _item only %} + {% endfor -%} +
+{% endif %} + +{% endspaceless %} diff --git a/src/implementations/twig/components/navigation-list/navigation-list.story.js b/src/implementations/twig/components/navigation-list/navigation-list.story.js new file mode 100644 index 00000000000..16dce0a1bb2 --- /dev/null +++ b/src/implementations/twig/components/navigation-list/navigation-list.story.js @@ -0,0 +1,102 @@ +import { withNotes } from '@ecl/storybook-addon-notes'; +import withCode from '@ecl/storybook-addon-code'; +import { correctSvgPath } from '@ecl/story-utils'; + +import dataDefault from '@ecl/specs-component-navigation-list/demo/data'; + +import navigationList from './navigation-list.html.twig'; +import notes from './README.md'; + +const getArgs = () => { + const args = {}; + + args.show_border = true; + args.show_image = true; + args.show_description = true; + args.column = 2; + + return args; +}; + +const getArgTypes = () => { + const argTypes = {}; + + // Optional elements + argTypes.show_border = { + name: 'border', + type: 'boolean', + description: 'Show border', + table: { + type: 'boolean', + defaultValue: { summary: true }, + category: 'Optional', + }, + }; + argTypes.show_image = { + name: 'image', + type: 'boolean', + description: 'Show image', + table: { + type: 'boolean', + defaultValue: { summary: true }, + category: 'Optional', + }, + }; + argTypes.show_description = { + name: 'description', + type: 'boolean', + description: 'Show description', + table: { + type: 'boolean', + defaultValue: { summary: true }, + category: 'Optional', + }, + }; + + // Other controls + argTypes.column = { + name: 'number of columns', + control: { type: 'range', min: 2, max: 3, step: 1 }, + description: 'The number of column for the list (between 2 and 3)', + table: { + type: { summary: 'number' }, + defaultValue: { summary: 2 }, + category: 'Layout', + }, + }; + + return argTypes; +}; + +const prepareData = (data, args) => { + correctSvgPath(data); + const clone = JSON.parse(JSON.stringify(data)); + + // Optional elements + for (let i = 0; i < clone.items.length; i += 1) { + clone.items[i].border = args.show_border; + if (!args.show_image) { + delete clone.items[i].image; + } + if (!args.show_description) { + delete clone.items[i].description; + } + } + + // Other controls + clone.column = args.column; + + return clone; +}; + +export default { + title: 'Components/Navigation/Navigation list', + decorators: [withCode, withNotes], +}; + +export const Default = (args) => navigationList(prepareData(dataDefault, args)); + +Default.storyName = 'default'; +Default.args = getArgs(); +Default.argTypes = getArgTypes(); +Default.parameters = { notes: { markdown: notes, json: dataDefault } }; diff --git a/src/implementations/twig/components/navigation-list/navigation-list.test.js b/src/implementations/twig/components/navigation-list/navigation-list.test.js new file mode 100644 index 00000000000..601d256a51b --- /dev/null +++ b/src/implementations/twig/components/navigation-list/navigation-list.test.js @@ -0,0 +1,37 @@ +import { merge, renderTwigFileAsNode } from '@ecl/test-utils'; +import dataDefault from '@ecl/specs-component-navigation-list/demo/data'; + +describe('Navigation list', () => { + const template = '@ecl/navigation-list/navigation-list.html.twig'; + const render = (params) => renderTwigFileAsNode(template, params); + + describe('Default', () => { + test('renders correctly', () => { + expect.assertions(1); + return expect(render(dataDefault)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra class names', () => { + expect.assertions(1); + + const withExtraClasses = merge(dataDefault, { + extra_classes: 'custom-class custom-class--test', + }); + + return expect(render(withExtraClasses)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra attributes', () => { + expect.assertions(1); + + const withExtraAttributes = merge(dataDefault, { + extra_attributes: [ + { name: 'data-test', value: 'data-test-value' }, + { name: 'data-test-1', value: 'data-test-value-1' }, + ], + }); + + return expect(render(withExtraAttributes)).resolves.toMatchSnapshot(); + }); + }); +}); diff --git a/src/implementations/twig/components/navigation-list/package.json b/src/implementations/twig/components/navigation-list/package.json new file mode 100644 index 00000000000..c1d8e6c9cad --- /dev/null +++ b/src/implementations/twig/components/navigation-list/package.json @@ -0,0 +1,33 @@ +{ + "name": "@ecl/twig-component-navigation-list", + "author": "European Commission", + "license": "EUPL-1.2", + "version": "3.2.3", + "description": "ECL Navigation List", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@ecl/twig-component-card": "^3.2.3", + "@ecl/twig-component-date-block": "^3.2.3", + "@ecl/twig-component-description-list": "^3.2.3" + }, + "devDependencies": { + "@ecl/specs-component-navigation-list": "^3.2.3", + "@ecl/vanilla-component-navigation-list": "^3.2.3" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ec-europa/europa-component-library.git" + }, + "bugs": { + "url": "https://github.com/ec-europa/europa-component-library/issues" + }, + "homepage": "https://github.com/ec-europa/europa-component-library", + "keywords": [ + "ecl", + "europa-component-library", + "design-system", + "twig" + ] +} diff --git a/src/implementations/vanilla/components/card/_card.scss b/src/implementations/vanilla/components/card/_card.scss index 588bb7d538a..4b954ff2739 100644 --- a/src/implementations/vanilla/components/card/_card.scss +++ b/src/implementations/vanilla/components/card/_card.scss @@ -18,6 +18,8 @@ $_body-padding-top: null !default; $_body-padding-bottom: null !default; $_meta-color: null !default; $_text-color: null !default; +$_title: null !default; +$_separator-color: null !default; $_taxonomy-container-border-top: null !default; $_list-margin: null !default; $_list-padding: null !default; @@ -85,7 +87,7 @@ $_list-padding: null !default; .ecl-card__title { color: $_text-color; - font: map.get(theme.$font-prolonged, 'm'); + font: $_title; font-weight: map.get(theme.$font-weight, 'bold'); margin-bottom: 0; margin-top: 0; @@ -145,6 +147,11 @@ $_list-padding: null !default; padding: 0; } +.ecl-card__link-container + .ecl-card__link-container { + border-top: 1px solid $_separator-color; + padding-top: map.get(theme.$spacing, 'm'); +} + .ecl-card__link-item { margin-top: map.get(theme.$spacing, 'xs'); @@ -156,7 +163,6 @@ $_list-padding: null !default; .ecl-card__link { display: block; font: map.get(theme.$font, 's'); - font-weight: map.get(theme.$font-weight, 'bold'); } .ecl-card__tag-container { diff --git a/src/implementations/vanilla/components/card/card-ec.scss b/src/implementations/vanilla/components/card/card-ec.scss index 29a21f51ee7..e9e72c6779b 100644 --- a/src/implementations/vanilla/components/card/card-ec.scss +++ b/src/implementations/vanilla/components/card/card-ec.scss @@ -11,6 +11,8 @@ $_body-padding-bottom: map.get(theme.$spacing, 'm'), $_meta-color: map.get(theme.$color, 'grey-75'), $_text-color: map.get(theme.$color, 'grey-100'), + $_title: map.get(theme.$font-prolonged, 'xl'), + $_separator-color: map.get(theme.$color, 'grey-25'), $_taxonomy-container-border-top: 0, $_list-padding: 0, $_list-margin: 0 diff --git a/src/implementations/vanilla/components/card/card-eu.scss b/src/implementations/vanilla/components/card/card-eu.scss index 880e39441ec..e87610fa105 100644 --- a/src/implementations/vanilla/components/card/card-eu.scss +++ b/src/implementations/vanilla/components/card/card-eu.scss @@ -12,6 +12,8 @@ $_body-padding-bottom: map.get(theme.$spacing, 'l'), $_meta-color: map.get(theme.$color, 'grey-80'), $_text-color: map.get(theme.$color, 'grey-140'), + $_title: map.get(theme.$font, '3xl'), + $_separator-color: map.get(theme.$color, 'blue-20'), $_taxonomy-container-border-top: 1px solid map.get(theme.$color, 'blue-20'), $_list-padding: map.get(theme.$spacing, 'l'), $_list-margin: -#{map.get(theme.$spacing, 'l')} diff --git a/src/implementations/vanilla/components/navigation-list/README.md b/src/implementations/vanilla/components/navigation-list/README.md new file mode 100644 index 00000000000..78a3dc68b71 --- /dev/null +++ b/src/implementations/vanilla/components/navigation-list/README.md @@ -0,0 +1 @@ +# Navigation List diff --git a/src/implementations/vanilla/components/navigation-list/_navigation-list.scss b/src/implementations/vanilla/components/navigation-list/_navigation-list.scss new file mode 100644 index 00000000000..510d24eacfd --- /dev/null +++ b/src/implementations/vanilla/components/navigation-list/_navigation-list.scss @@ -0,0 +1,87 @@ +/** + * Navigation list + * @define navigation-list; weak + */ + +@use 'sass:math'; +@use 'sass:map'; +@use '@ecl/theme-dev/theme'; +@use '@ecl/vanilla-layout-grid/mixins/breakpoints'; + +$_border-radius: null !default; + +// Navigation list + +.ecl-navigation-list { + margin: 0; +} + +.ecl-navigation-list--col-2, +.ecl-navigation-list--col-3 { + display: grid; + grid-auto-rows: auto; + grid-column-gap: map.get(theme.$grid, 'gutter'); + grid-row-gap: map.get(theme.$spacing, 'xl'); + width: 100%; +} + +/* stylelint-disable-next-line order/order */ +@include breakpoints.up('l') { + .ecl-navigation-list--col-2 { + grid-template-columns: repeat(2, 1fr); + } + + .ecl-navigation-list--col-3 { + grid-template-columns: repeat(3, 1fr); + } +} + +// Navigation list items + +.ecl-navigation-list__item { + margin: 0; + + .ecl-card { + background-color: transparent; + } + + .ecl-card__image { + margin: 0; + width: 100%; + } + + .ecl-card__image::before { + padding-top: math.div(9, 21) * 100%; + } + + .ecl-card__body { + padding: map.get(theme.$spacing, 'm'); + } + + .ecl-card__link-container { + margin-top: map.get(theme.$spacing, 'xs'); + } + + .ecl-card__link-container + .ecl-card__link-container { + margin-top: map.get(theme.$spacing, 'm'); + } +} + +// No border + +.ecl-navigation-list__item--no-border { + .ecl-card { + border-radius: 0; + border-width: 0; + box-shadow: none; + } + + .ecl-card__body { + padding-left: 0; + padding-right: 0; + } + + .ecl-card__body::before { + display: none; + } +} diff --git a/src/implementations/vanilla/components/navigation-list/navigation-list-ec.scss b/src/implementations/vanilla/components/navigation-list/navigation-list-ec.scss new file mode 100644 index 00000000000..f1912a5795a --- /dev/null +++ b/src/implementations/vanilla/components/navigation-list/navigation-list-ec.scss @@ -0,0 +1,5 @@ +@use 'sass:map'; +@use '@ecl/theme-dev/theme'; +@use 'navigation-list' with ( + $_border-radius: 0 +); diff --git a/src/implementations/vanilla/components/navigation-list/navigation-list-eu.scss b/src/implementations/vanilla/components/navigation-list/navigation-list-eu.scss new file mode 100644 index 00000000000..491044b281e --- /dev/null +++ b/src/implementations/vanilla/components/navigation-list/navigation-list-eu.scss @@ -0,0 +1,5 @@ +@use 'sass:map'; +@use '@ecl/theme-dev/theme'; +@use 'navigation-list' with ( + $_border-radius: 8px +); diff --git a/src/implementations/vanilla/components/navigation-list/navigation-list-print.scss b/src/implementations/vanilla/components/navigation-list/navigation-list-print.scss new file mode 100644 index 00000000000..d71a247e7f5 --- /dev/null +++ b/src/implementations/vanilla/components/navigation-list/navigation-list-print.scss @@ -0,0 +1,32 @@ +/** + * Content item + * @define content-item; weak + */ + +@use 'sass:map'; +@use '@ecl/theme-dev/theme'; + +.ecl-content-item { + margin: 0; +} + +.ecl-content-item__container { + align-items: flex-start; + border-bottom: map.get(theme.$color, 'grey-15') 1px solid; + display: flex; + flex-direction: row; + padding-bottom: map.get(theme.$spacing-print, 'm'); +} + +.ecl-content-item__image, +.ecl-content-item__date { + margin-right: map.get(theme.$spacing-print, 'xl'); +} + +.ecl-content-item .ecl-card__label-container { + margin-top: 0; +} + +.ecl-content-item__taxonomy { + margin-top: map.get(theme.$spacing-print, 'm'); +} diff --git a/src/implementations/vanilla/components/navigation-list/package.json b/src/implementations/vanilla/components/navigation-list/package.json new file mode 100644 index 00000000000..fb625c46af9 --- /dev/null +++ b/src/implementations/vanilla/components/navigation-list/package.json @@ -0,0 +1,28 @@ +{ + "name": "@ecl/vanilla-component-navigation-list", + "author": "European Commission", + "license": "EUPL-1.2", + "version": "3.2.3", + "description": "ECL Navigation List", + "style": "navigation-list.scss", + "sass": "navigation-list.scss", + "dependencies": { + "@ecl/theme-dev": "^3.2.3" + }, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ec-europa/europa-component-library.git" + }, + "bugs": { + "url": "https://github.com/ec-europa/europa-component-library/issues" + }, + "homepage": "https://github.com/ec-europa/europa-component-library", + "keywords": [ + "ecl", + "europa-component-library", + "design-system" + ] +} diff --git a/src/presets/dev/package.json b/src/presets/dev/package.json index c236b93478f..f98e90682af 100644 --- a/src/presets/dev/package.json +++ b/src/presets/dev/package.json @@ -42,6 +42,7 @@ "@ecl/vanilla-component-list-illustration": "^3.2.3", "@ecl/vanilla-component-menu": "^3.2.3", "@ecl/vanilla-component-message": "^3.2.3", + "@ecl/vanilla-component-navigation-list": "^3.2.3", "@ecl/vanilla-component-news-ticker": "^3.2.3", "@ecl/vanilla-component-ordered-list": "^3.2.3", "@ecl/vanilla-component-page-banner": "^3.2.3", diff --git a/src/presets/dev/src/dev.scss b/src/presets/dev/src/dev.scss index 497770ba787..9b9963f87a0 100644 --- a/src/presets/dev/src/dev.scss +++ b/src/presets/dev/src/dev.scss @@ -32,6 +32,7 @@ @use '@ecl/vanilla-component-file/file'; @use '@ecl/vanilla-component-list-illustration/list-illustration'; @use '@ecl/vanilla-component-media-container/media-container'; +@use '@ecl/vanilla-component-navigation-list/navigation-list'; @use '@ecl/vanilla-component-ordered-list/ordered-list'; @use '@ecl/vanilla-component-unordered-list/unordered-list'; @use '@ecl/vanilla-component-pagination/pagination'; diff --git a/src/presets/ec/src/ec-print.scss b/src/presets/ec/src/ec-print.scss index c8088d8d0a7..d4403dd3d93 100644 --- a/src/presets/ec/src/ec-print.scss +++ b/src/presets/ec/src/ec-print.scss @@ -43,6 +43,7 @@ @use '@ecl/vanilla-component-fact-figures/fact-figures-print'; @use '@ecl/vanilla-component-file/file-print'; @use '@ecl/vanilla-component-media-container/media-container-print'; +@use '@ecl/vanilla-component-navigation-list/navigation-list-print'; @use '@ecl/vanilla-component-ordered-list/ordered-list-print'; @use '@ecl/vanilla-component-unordered-list/unordered-list-print'; @use '@ecl/vanilla-component-pagination/pagination-print'; diff --git a/src/presets/ec/src/ec.scss b/src/presets/ec/src/ec.scss index e6ecab05c29..40fd4efdf01 100644 --- a/src/presets/ec/src/ec.scss +++ b/src/presets/ec/src/ec.scss @@ -45,6 +45,7 @@ @use '@ecl/vanilla-component-fact-figures/fact-figures-ec'; @use '@ecl/vanilla-component-file/file-ec'; @use '@ecl/vanilla-component-media-container/media-container-ec'; +@use '@ecl/vanilla-component-navigation-list/navigation-list-ec'; @use '@ecl/vanilla-component-ordered-list/ordered-list-ec'; @use '@ecl/vanilla-component-unordered-list/unordered-list-ec'; @use '@ecl/vanilla-component-pagination/pagination-ec'; diff --git a/src/presets/eu/src/eu-print.scss b/src/presets/eu/src/eu-print.scss index 90b42726274..303059d70ac 100644 --- a/src/presets/eu/src/eu-print.scss +++ b/src/presets/eu/src/eu-print.scss @@ -43,6 +43,7 @@ @use '@ecl/vanilla-component-fact-figures/fact-figures-print'; @use '@ecl/vanilla-component-file/file-print'; @use '@ecl/vanilla-component-media-container/media-container-print'; +@use '@ecl/vanilla-component-navigation-list/navigation-list-print'; @use '@ecl/vanilla-component-ordered-list/ordered-list-print'; @use '@ecl/vanilla-component-unordered-list/unordered-list-print'; @use '@ecl/vanilla-component-pagination/pagination-print'; diff --git a/src/presets/eu/src/eu.scss b/src/presets/eu/src/eu.scss index f24f481b5ba..983d46a1496 100644 --- a/src/presets/eu/src/eu.scss +++ b/src/presets/eu/src/eu.scss @@ -45,6 +45,7 @@ @use '@ecl/vanilla-component-fact-figures/fact-figures-eu'; @use '@ecl/vanilla-component-file/file-eu'; @use '@ecl/vanilla-component-media-container/media-container-eu'; +@use '@ecl/vanilla-component-navigation-list/navigation-list-eu'; @use '@ecl/vanilla-component-ordered-list/ordered-list-eu'; @use '@ecl/vanilla-component-unordered-list/unordered-list-eu'; @use '@ecl/vanilla-component-pagination/pagination-eu'; diff --git a/src/specs/components/card/demo/data--tile.js b/src/specs/components/card/demo/data--tile.js index 2ee66f2492a..664aad9e45e 100644 --- a/src/specs/components/card/demo/data--tile.js +++ b/src/specs/components/card/demo/data--tile.js @@ -11,9 +11,9 @@ module.exports = { label: 'Better regulation', }, links: [ - { label: 'link 1', path: exampleLink, type: 'standalone' }, - { label: 'link 2', path: exampleLink, type: 'standalone' }, - { label: 'link 3', path: exampleLink, type: 'standalone' }, + { label: 'link 1', path: exampleLink }, + { label: 'link 2', path: exampleLink }, + { label: 'link 3', path: exampleLink }, ], }, }; diff --git a/src/specs/components/navigation-list/demo/data.js b/src/specs/components/navigation-list/demo/data.js new file mode 100644 index 00000000000..5d73972ec15 --- /dev/null +++ b/src/specs/components/navigation-list/demo/data.js @@ -0,0 +1,83 @@ +// Simple content for demo +const publicUrl = process.env.PUBLIC_URL || ''; +const exampleLink = `${publicUrl}/example`; + +module.exports = { + items: [ + { + image: { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', + size: 'l', + }, + title: { + type: 'standalone', + label: 'Title 1', + path: exampleLink, + }, + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus, quis tincidunt sem viverra. Nunc vestibulum, mauris quis porta venenatis, justo odio commodo tellus', + links: [ + [ + { label: 'primary link 1', path: exampleLink }, + { label: 'primary link 2', path: exampleLink }, + { label: 'primary link 3', path: exampleLink }, + { label: 'primary link 4', path: exampleLink }, + ], + [ + { label: 'secondary link 1', path: exampleLink }, + { label: 'secondary link 2', path: exampleLink }, + ], + ], + }, + { + image: { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', + size: 'l', + }, + title: { + type: 'standalone', + label: 'Title 2', + path: exampleLink, + }, + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus, quis tincidunt sem viverra. Nunc vestibulum, mauris quis porta venenatis, justo odio commodo tellus', + links: [ + [ + { label: 'primary link 1', path: exampleLink }, + { label: 'primary link 2', path: exampleLink }, + { label: 'primary link 3', path: exampleLink }, + { label: 'primary link 4', path: exampleLink }, + ], + [ + { label: 'secondary link 1', path: exampleLink }, + { label: 'secondary link 2', path: exampleLink }, + ], + ], + }, + { + image: { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', + size: 'l', + }, + title: { + type: 'standalone', + label: 'Title 3', + path: exampleLink, + }, + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus, quis tincidunt sem viverra. Nunc vestibulum, mauris quis porta venenatis, justo odio commodo tellus', + links: [ + [ + { label: 'primary link 1', path: exampleLink }, + { label: 'primary link 2', path: exampleLink }, + { label: 'primary link 3', path: exampleLink }, + { label: 'primary link 4', path: exampleLink }, + ], + [ + { label: 'secondary link 1', path: exampleLink }, + { label: 'secondary link 2', path: exampleLink }, + ], + ], + }, + ], +}; diff --git a/src/specs/components/navigation-list/package.json b/src/specs/components/navigation-list/package.json new file mode 100644 index 00000000000..01ebeefdb1c --- /dev/null +++ b/src/specs/components/navigation-list/package.json @@ -0,0 +1,23 @@ +{ + "name": "@ecl/specs-component-navigation-list", + "author": "European Commission", + "license": "EUPL-1.2", + "version": "3.2.3", + "description": "ECL Navigation List Specs", + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ec-europa/europa-component-library.git" + }, + "bugs": { + "url": "https://github.com/ec-europa/europa-component-library/issues" + }, + "homepage": "https://github.com/ec-europa/europa-component-library", + "keywords": [ + "ecl", + "europa-component-library", + "design-system" + ] +} diff --git a/src/website/public/admin/config.yml b/src/website/public/admin/config.yml index dce22a29370..1ed1a787555 100644 --- a/src/website/public/admin/config.yml +++ b/src/website/public/admin/config.yml @@ -219,6 +219,11 @@ collections: file: 'src/website/src/pages/ec/components/message/docs/usage.md' fields: - { label: Body, name: body, widget: markdown } + - label: 'Navigation list' + name: 'ec_navigation-list' + file: 'src/website/src/pages/ec/components/navigation-list/docs/usage.md' + fields: + - { label: Body, name: body, widget: markdown } - label: 'News ticker' name: 'ec_news_ticker' file: 'src/website/src/pages/ec/components/news-ticker/docs/usage.md' @@ -664,6 +669,11 @@ collections: file: 'src/website/src/pages/eu/components/message/docs/usage.md' fields: - { label: Body, name: body, widget: markdown } + - label: 'Navigation list' + name: 'eu_navigation-list' + file: 'src/website/src/pages/eu/components/navigation-list/docs/usage.md' + fields: + - { label: Body, name: body, widget: markdown } - label: 'News ticker' name: 'eu_news_ticker' file: 'src/website/src/pages/eu/components/news-ticker/docs/usage.md' diff --git a/src/website/src/pages/ec/components/index.mdx b/src/website/src/pages/ec/components/index.mdx index 60dba86a1b8..610f226cb0f 100644 --- a/src/website/src/pages/ec/components/index.mdx +++ b/src/website/src/pages/ec/components/index.mdx @@ -54,6 +54,7 @@ import BreadcrumbThumbnail from './navigation/breadcrumb/ec_comp_breadcrumb.svg' import InpageNavigationThumbnail from './navigation/inpage-navigation/ec_comp_inpage_navigation.svg'; import LinkThumbnail from './navigation/link/ec_comp_links.svg'; import MenuThumbnail from './navigation/menu/ec_comp_menu.svg'; +import NavigationListThumbnail from './navigation/navigation-list/ec_comp_navigation_list.svg'; import PaginationThumbnail from './navigation/pagination/ec_comp_pagination.svg'; import TabsThumbnail from './navigation/tabs/ec_comp_tabs.svg'; @@ -321,6 +322,13 @@ Every component is coded to serve a function and designed to solve a specific us title="Menu" /> + + + + + diff --git a/src/website/src/pages/ec/components/navigation/navigation-list/docs/usage.md b/src/website/src/pages/ec/components/navigation/navigation-list/docs/usage.md new file mode 100644 index 00000000000..b81363c33fc --- /dev/null +++ b/src/website/src/pages/ec/components/navigation/navigation-list/docs/usage.md @@ -0,0 +1,4 @@ +--- +title: Usage +order: 1 +--- diff --git a/src/website/src/pages/ec/components/navigation/navigation-list/ec_comp_navigation_list.svg b/src/website/src/pages/ec/components/navigation/navigation-list/ec_comp_navigation_list.svg new file mode 100644 index 00000000000..d68606cd772 --- /dev/null +++ b/src/website/src/pages/ec/components/navigation/navigation-list/ec_comp_navigation_list.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/website/src/pages/ec/components/navigation/navigation-list/index.md b/src/website/src/pages/ec/components/navigation/navigation-list/index.md new file mode 100644 index 00000000000..c4005a81c6f --- /dev/null +++ b/src/website/src/pages/ec/components/navigation/navigation-list/index.md @@ -0,0 +1,5 @@ +--- +title: Navigation list +defaultTab: usage +status: ready +--- diff --git a/src/website/src/pages/eu/components/content-item/docs/code.mdx b/src/website/src/pages/eu/components/content-item/docs/code.mdx index fef7f81379b..0976ccdc530 100644 --- a/src/website/src/pages/eu/components/content-item/docs/code.mdx +++ b/src/website/src/pages/eu/components/content-item/docs/code.mdx @@ -23,7 +23,7 @@ import { ## Content item with image (right) diff --git a/src/website/src/pages/eu/components/index.mdx b/src/website/src/pages/eu/components/index.mdx index 5ebc302ec2e..aa2fec972ea 100644 --- a/src/website/src/pages/eu/components/index.mdx +++ b/src/website/src/pages/eu/components/index.mdx @@ -54,6 +54,7 @@ import BreadcrumbThumbnail from './navigation/breadcrumb/eu_comp_breadcrumb.svg' import InpageNavigationThumbnail from './navigation/inpage-navigation/eu_comp_inpage_navigation.svg'; import LinkThumbnail from './navigation/link/eu_comp_links.svg'; import MenuThumbnail from './navigation/menu/eu_comp_menu.svg'; +import NavigationListThumbnail from './navigation/navigation-list/eu_comp_navigation_list.svg'; import PaginationThumbnail from './navigation/pagination/eu_comp_pagination.svg'; import TabsThumbnail from './navigation/tabs/eu_comp_tabs.svg'; @@ -349,6 +350,13 @@ Every component is coded to serve a function and designed to solve a specific us title="Menu" /> + + + + + diff --git a/src/website/src/pages/eu/components/navigation/navigation-list/docs/usage.md b/src/website/src/pages/eu/components/navigation/navigation-list/docs/usage.md new file mode 100644 index 00000000000..b81363c33fc --- /dev/null +++ b/src/website/src/pages/eu/components/navigation/navigation-list/docs/usage.md @@ -0,0 +1,4 @@ +--- +title: Usage +order: 1 +--- diff --git a/src/website/src/pages/eu/components/navigation/navigation-list/eu_comp_navigation_list.svg b/src/website/src/pages/eu/components/navigation/navigation-list/eu_comp_navigation_list.svg new file mode 100644 index 00000000000..cbcd0b6d7af --- /dev/null +++ b/src/website/src/pages/eu/components/navigation/navigation-list/eu_comp_navigation_list.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/website/src/pages/eu/components/navigation/navigation-list/index.md b/src/website/src/pages/eu/components/navigation/navigation-list/index.md new file mode 100644 index 00000000000..c4005a81c6f --- /dev/null +++ b/src/website/src/pages/eu/components/navigation/navigation-list/index.md @@ -0,0 +1,5 @@ +--- +title: Navigation list +defaultTab: usage +status: ready +---