-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(content-item): add component - FRONT-2499 (#2250)
* init component * update component * update website * add test * apply latest specs * update test * add max width * fix css * update thumbnail * fix after review * fix print and markup * Fix prettier Co-authored-by: Alexis Gaillard <a@bypopcorn.com>
- Loading branch information
Showing
46 changed files
with
2,156 additions
and
331 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| __snapshots__ | ||
| *.js |
127 changes: 127 additions & 0 deletions
127
src/implementations/twig/components/content-item/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| # ECL Content item component | ||
|
|
||
| npm package: `@ecl/twig-component-content-item` | ||
|
|
||
| ```shell | ||
| npm install --save @ecl/twig-component-content-item | ||
| ``` | ||
|
|
||
| ### Parameters | ||
|
|
||
| - **"variant"** (string) (default: ''): Variant of the content item (can be 'image-right' or 'event') | ||
| - **"image"** (associative array) (default: {}): | ||
| - "src" (string) (default: ''): Path to the image | ||
| - "size" (string) (default: 'm'): Size of the image (can be 's' or 'l') | ||
| - **"date"** (associative array) (default: {}): Predefined structure compatible with Date block component | ||
| - **"labels"** (array) (default: []): List of labels compatible with EC Label component structure | ||
| - **"meta"** (array) (default: []): Meta's for the Content item | ||
| - **"title"** (associative array) (default: {}): Predefined structure compatible with Link component | ||
| - **"description"** (string) (default: ''): Description of the Content item | ||
| - **"infos"** (array) (default: []): format: [ | ||
| { | ||
| "label" (string) (default: ''): Label of info item | ||
| "icon" (associative array) (default: {}) A predefined structure compatible with Icon component | ||
| }, | ||
| ... | ||
| ] | ||
| - **"lists"** (array) (default: []) Array of objects of type "description list". Used for taxonomy | ||
| - **"extra_classes"** (string) (default: '') | ||
| - **"extra_attributes"** (array) (default: []): format: [ | ||
| { | ||
| "name" (string) (default: ''), | ||
| "value" (optional) (string) | ||
| ... | ||
| ], | ||
|
|
||
| <!-- prettier-ignore --> | ||
| ```twig | ||
| {% include '@ecl/content-item/content-item.html.twig' with { | ||
| image: { | ||
| src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', | ||
| size: 'l', | ||
| }, | ||
| labels: [ | ||
| { label: 'highlight', variant: 'highlight' }, | ||
| { label: 'high importance', variant: 'high' }, | ||
| ], | ||
| meta: ['PRIMARY META', 'DD Month Year'], | ||
| title: { | ||
| type: 'standalone', | ||
| label: 'Title', | ||
| 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', | ||
| infos: [ | ||
| { | ||
| icon: { | ||
| name: 'calendar', | ||
| size: 'xs', | ||
| path: '/icons.svg', | ||
| }, | ||
| label: '2018/10/22', | ||
| }, | ||
| { | ||
| icon: { | ||
| name: 'location', | ||
| size: 'xs', | ||
| path: '/icons.svg', | ||
| }, | ||
| label: 'Luxembourg', | ||
| }, | ||
| ], | ||
| lists: [ | ||
| { | ||
| items: [ | ||
| { | ||
| term: 'Science areas', | ||
| definition: [ | ||
| { | ||
| label: 'Energy and transport', | ||
| variant: 'display', | ||
| }, | ||
| { | ||
| label: 'Standards', | ||
| variant: 'display', | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| term: 'Keywords', | ||
| definition: [ | ||
| { | ||
| label: 'Electricity', | ||
| variant: 'display', | ||
| }, | ||
| { | ||
| label: 'Electromobility', | ||
| variant: 'display', | ||
| }, | ||
| { | ||
| label: 'Energy', | ||
| variant: 'display', | ||
| }, | ||
| { | ||
| label: 'Energy storage', | ||
| variant: 'display', | ||
| }, | ||
| { | ||
| label: 'Security', | ||
| variant: 'display', | ||
| }, | ||
| { | ||
| label: 'Transport', | ||
| variant: 'display', | ||
| }, | ||
| { | ||
| label: 'Low carbon', | ||
| variant: 'display', | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| variant: 'taxonomy', | ||
| }, | ||
| ], | ||
| } %} | ||
| ``` |
Oops, something went wrong.
c29abddThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚀 Deployed on https://v3--europa-component-library.netlify.app