From d56df48452b9f71f8ded8adf69266081719d422c Mon Sep 17 00:00:00 2001 From: planctus Date: Wed, 22 Dec 2021 10:28:25 +0200 Subject: [PATCH] feat(stories): refactoring, batch 2 - FRONT-3513 (#2293) --- .../twig/components/card/card.html.twig | 2 +- .../twig/components/card/card.story.js | 357 +++++++----------- .../hero-banner/hero-banner.story.js | 30 +- .../list-illustration-item.html.twig | 2 +- .../list-illustration.story.js | 145 +++++-- .../media-container/media-container.story.js | 33 +- .../page-banner/page-banner.story.js | 30 +- .../vanilla/components/card/_card.scss | 3 +- .../pages/ec/components/card/docs/code.mdx | 6 +- .../pages/eu/components/card/docs/code.mdx | 6 +- 10 files changed, 340 insertions(+), 274 deletions(-) diff --git a/src/implementations/twig/components/card/card.html.twig b/src/implementations/twig/components/card/card.html.twig index 37d846b30c3..bcb3d521b7c 100644 --- a/src/implementations/twig/components/card/card.html.twig +++ b/src/implementations/twig/components/card/card.html.twig @@ -114,7 +114,7 @@ {% if _card.meta is not empty %}
{{ _card.meta|join(" | ") }}
{% endif %} - {% if _card.title is not empty %} + {% if _card.title is not empty and _card.title.label is not empty %}

{%- if _card.title.path %} {% include '@ecl/link/link.html.twig' with { diff --git a/src/implementations/twig/components/card/card.story.js b/src/implementations/twig/components/card/card.story.js index e4f3101e2ae..b91ac13be5e 100644 --- a/src/implementations/twig/components/card/card.story.js +++ b/src/implementations/twig/components/card/card.story.js @@ -1,102 +1,71 @@ import { withNotes } from '@ecl/storybook-addon-notes'; import withCode from '@ecl/storybook-addon-code'; -import getSystem from '@ecl/builder/utils/getSystem'; +import { correctSvgPath } from '@ecl/story-utils'; -import defaultSpriteEc from '@ecl/resources-ec-icons/dist/sprites/icons.svg'; -import defaultSpriteEu from '@ecl/resources-eu-icons/dist/sprites/icons.svg'; import dataCard from '@ecl/specs-component-card/demo/data--card'; import dataCardTaxonomy from '@ecl/specs-component-card/demo/data--card-taxonomy'; import dataCardTile from '@ecl/specs-component-card/demo/data--tile'; -import dataCardTileTaxonomy from '@ecl/specs-component-card/demo/data--tile-taxonomy'; - import card from './card.html.twig'; import notes from './README.md'; -const system = getSystem(); -const defaultSprite = system === 'eu' ? defaultSpriteEu : defaultSpriteEc; - -const infosClone = { ...dataCard.card.infos }; -const linkClone = { ...dataCardTile.card.links[0] }; -const tagClone = { ...dataCard.card.tags[0] }; -const labelClone = { ...dataCard.card.labels[0] }; +const metaClone = [...dataCard.card.meta]; +const infosClone = [...dataCard.card.infos]; +const linkClone = [...dataCardTile.card.links]; +const tagClone = [...dataCard.card.tags]; +const labelClone = [...dataCard.card.labels]; const descriptionListClone = { ...dataCardTaxonomy.card.lists[0] }; const taxonomyListClone = { ...dataCardTaxonomy.card.lists[1] }; -const getArgs = (data) => { +const getArgs = (data, variant) => { const args = {}; - if (data.card.title) { - args.title = data.card.title.label; - } - if (data.card.description) { - args.description = data.card.description; - } - if (data.card.meta) { - args.meta = data.card.meta; - } - if (data.card.image) { - args.image = data.card.image.src; - } - if (data.card.infos) { - const infos = data.card.infos.map(({ label }) => label); - args.infos = infos; - } - if (data.card.tags) { - const tags = data.card.tags.map(({ label }) => label); - args.tags = tags; - } - if (data.card.labels) { - const labels = data.card.labels.map(({ label }) => label); - args.labels = labels; + args.show_description = true; + if (variant === 'card') { + args.show_image = true; + args.image = (data.card && data.card.image && data.card.image.src) || ''; } - if (data.card.links) { - const links = data.card.links.map(({ label }) => label); - args.links = links; - } - if (data.card.lists) { - args.lists = true; - args.taxonomy = true; + args.show_infos = !!data.card.infos; + args.show_tags = !!data.card.tags; + args.show_meta = !!data.card.meta; + args.show_labels = !!data.card.labels; + + if (variant === 'tile') { + args.show_links = !!data.card.links; } + args.show_lists = false; + args.show_taxonomy = false; + args.title = (data.card.title && data.card.title.label) || ''; + args.description = (data.card && data.card.description) || ''; return args; }; -const getArgTypes = (data) => { +const getArgTypes = (data, variant) => { const argTypes = {}; - if (data.card.title) { - argTypes.title = { - type: { name: 'string', required: true }, - description: 'The card title', + argTypes.show_description = { + name: 'description', + type: { name: 'boolean' }, + description: 'Show the description', + table: { + category: 'Optional', + }, + }; + argTypes.show_meta = { + name: 'meta', + type: { name: 'boolean' }, + description: 'Show meta', + table: { + category: 'Optional', + }, + }; + if (variant === 'card') { + argTypes.show_image = { + name: 'image', + type: { name: 'boolean' }, + description: 'Show image', table: { - type: { summary: 'string' }, - defaultValue: { summary: '' }, - category: 'Content', + category: 'Optional', }, }; - } - if (data.card.description) { - argTypes.description = { - type: 'string', - description: 'The card description', - table: { - type: { summary: 'string' }, - defaultValue: { summary: '' }, - category: 'Content', - }, - }; - } - if (data.card.meta) { - argTypes.meta = { - name: 'meta', - type: { name: 'array' }, - description: 'The card meta', - table: { - type: { summary: 'array' }, - defaultValue: { summary: '[]' }, - category: 'Content', - }, - }; - } - if (data.card.image) { argTypes.image = { type: 'string', description: 'The url of the card image', @@ -107,145 +76,108 @@ const getArgTypes = (data) => { }, }; } - if (data.card.labels) { - argTypes.labels = { - name: 'labels', - type: 'array', - description: 'Labels to be placed at the top of the card', - table: { - type: { summary: 'array of objects' }, - defaultValue: { summary: '[]' }, - category: 'Content', - }, - }; - } - if (data.card.infos) { - argTypes.infos = { - name: 'infos', - type: 'array', - description: 'Additional elements like a location or a date', - table: { - type: { - summary: 'array of objects', - }, - defaultValue: { summary: '[]' }, - category: 'Card footer', - }, - }; - } - if (data.card.tags) { - argTypes.tags = { - name: 'tags', - type: 'array', - description: 'Tags to be placed at the bottom of the card', - table: { - type: { summary: 'array of objects' }, - defaultValue: { summary: '[]' }, - category: 'Card footer', - }, - }; - } - if (data.card.links) { - argTypes.links = { + argTypes.show_labels = { + name: 'labels', + type: 'boolean', + description: 'Labels to be placed at the top of the card', + table: { + category: 'Optional', + }, + }; + argTypes.show_infos = { + name: 'infos', + type: 'boolean', + description: 'Show infos', + table: { + category: 'Optional', + }, + }; + argTypes.show_tags = { + name: 'tags', + type: 'boolean', + description: 'Show tags', + table: { + category: 'Optional', + }, + }; + if (variant === 'tile') { + argTypes.show_links = { name: 'links', - type: 'array', - description: - 'Links to be placed at the bottom of the card. (comma separated)', - table: { - type: { - summary: 'array of objects', - }, - defaultValue: { summary: '[]' }, - category: 'Card footer', - }, - }; - } - if (data.card.lists) { - argTypes.list = { - name: 'Display additional list', - type: 'boolean', - description: 'Show/hide description list in the card footer', - table: { - category: 'Card footer', - }, - }; - argTypes.taxonomy = { - name: 'Display taxonomy list', type: 'boolean', - description: 'Show/hide taxonomy list in the card footer', + description: 'Show links', table: { - category: 'Card footer', + category: 'Optional', }, }; } + argTypes.show_lists = { + name: 'description list', + type: 'boolean', + description: 'Show description list', + table: { + category: 'Optional', + }, + }; + argTypes.show_taxonomy = { + name: 'taxonomy list', + type: 'boolean', + description: 'Show taxonomy list', + table: { + category: 'Optional', + }, + }; + argTypes.title = { + type: { name: 'string', required: true }, + description: 'The card title', + table: { + type: { summary: 'string' }, + defaultValue: { summary: '' }, + category: 'Content', + }, + }; + argTypes.description = { + type: 'string', + description: 'The card description', + table: { + type: { summary: 'string' }, + defaultValue: { summary: '' }, + category: 'Content', + }, + }; return argTypes; }; const prepareData = (data, args) => { - if (data.card.title) { - data.card.title.label = args.title; + const lists = []; + + if (args.show_lists) { + lists.push(descriptionListClone); + } + if (args.show_taxonomy) { + lists.push(taxonomyListClone); } + if (data.card.image) { data.card.image.src = args.image; } - if (data.card.meta) { - data.card.meta = args.meta; - } - if (data.card.infos) { - data.card.infos = []; - if (args.infos && args.infos[0]) { - args.infos.forEach((info, i) => { - const addInfo = { - label: info, - icon: { - ...infosClone[0].icon, - path: defaultSprite, - name: infosClone[i] ? infosClone[i].icon.name : 'faq', - size: system === 'eu' ? 'm' : 'xs', - }, - }; - data.card.infos.push(addInfo); - }); - } - } - if (data.card.links) { - data.card.links = []; - if (args.links && args.links[0]) { - args.links.forEach((link) => { - data.card.links.push({ ...linkClone, label: link }); - }); - } - } - if (data.card.tags) { - data.card.tags = []; - if (args.tags && args.tags[0]) { - args.tags.forEach((tag) => { - data.card.tags.push({ ...tagClone, label: tag }); - }); - } - } - if (data.card.labels) { - data.card.labels = []; - if (args.labels && args.labels[0]) { - args.labels.forEach((label) => { - data.card.labels.push({ ...labelClone, label }); - }); - } - } - if (data.card.lists) { - if (!args.list) { - data.card.lists[0] = []; - } else { - data.card.lists[0] = descriptionListClone; - } - if (!args.taxonomy) { - data.card.lists[1] = []; - } else { - data.card.lists[1] = taxonomyListClone; - } + + data.card.description = args.show_description ? args.description : ''; + + if (data.card.image) { + data.card.image.src = args.show_image ? args.image : ''; } + data.card.title.label = args.title; + data.card.tags = args.show_tags ? tagClone : []; + data.card.meta = args.show_meta ? metaClone : []; + data.card.links = args.show_links ? linkClone : []; + data.card.infos = args.show_infos ? infosClone : []; + data.card.labels = args.show_labels ? labelClone : []; + data.card.lists = lists; + + correctSvgPath(data); + return data; }; @@ -256,33 +188,14 @@ export default { export const Card = (args) => card(prepareData(dataCard, args)); -Card.storyName = 'card'; -Card.args = getArgs(dataCard); -Card.argTypes = getArgTypes(dataCard); +Card.storyName = 'default'; +Card.args = getArgs(dataCard, 'card'); +Card.argTypes = getArgTypes(dataCard, 'card'); Card.parameters = { notes: { markdown: notes, json: dataCard } }; -export const CardTaxonomy = (args) => card(prepareData(dataCardTaxonomy, args)); - -CardTaxonomy.storyName = 'card (taxonomy)'; -CardTaxonomy.args = getArgs(dataCardTaxonomy); -CardTaxonomy.argTypes = getArgTypes(dataCardTaxonomy); -CardTaxonomy.parameters = { - notes: { markdown: notes, json: dataCardTaxonomy }, -}; - export const Tile = (args) => card(prepareData(dataCardTile, args)); Tile.storyName = 'tile'; -Tile.args = getArgs(dataCardTile); -Tile.argTypes = getArgTypes(dataCardTile); +Tile.args = getArgs(dataCardTile, 'tile'); +Tile.argTypes = getArgTypes(dataCardTile, 'tile'); Tile.parameters = { notes: { markdown: notes, json: dataCardTile } }; - -export const TileTaxonomy = (args) => - card(prepareData(dataCardTileTaxonomy, args)); - -TileTaxonomy.storyName = 'tile (taxonomy)'; -TileTaxonomy.args = getArgs(dataCardTileTaxonomy); -TileTaxonomy.argTypes = getArgTypes(dataCardTileTaxonomy); -TileTaxonomy.parameters = { - notes: { markdown: notes, json: dataCardTileTaxonomy }, -}; diff --git a/src/implementations/twig/components/hero-banner/hero-banner.story.js b/src/implementations/twig/components/hero-banner/hero-banner.story.js index 13b48b24d0b..71f796273a6 100644 --- a/src/implementations/twig/components/hero-banner/hero-banner.story.js +++ b/src/implementations/twig/components/hero-banner/hero-banner.story.js @@ -12,8 +12,11 @@ import bannerDataImageGradient from '@ecl/specs-component-hero-banner/demo/data- import heroBanner from './hero-banner.html.twig'; import notes from './README.md'; +const cta = { ...bannerDataSimplePrimary.link }; const getArgs = (data) => { const args = { + show_description: true, + show_button: true, title: data.title, description: data.description, label: data.link.link.label, @@ -30,6 +33,22 @@ const getArgs = (data) => { const getArgTypes = (data) => { const argTypes = { + show_description: { + name: 'description', + type: { name: 'boolean' }, + description: 'Show the description', + table: { + category: 'Optional', + }, + }, + show_button: { + name: 'button', + type: { name: 'boolean' }, + description: 'Show the cta button', + table: { + category: 'Optional', + }, + }, title: { type: { name: 'string', required: true }, description: 'Heading of the banner', @@ -115,10 +134,19 @@ const prepareData = (data, args) => { data.description = args.description; data.centered = args.centered; data.full_width = args.width === 'inside'; - data.link.link.label = args.label; + if (data.image) { data.image = args.image; } + if (!args.show_description) { + data.description = ''; + } + if (!args.show_button) { + data.link = false; + } else { + data.link = cta; + data.link.link.label = args.label; + } return data; }; diff --git a/src/implementations/twig/components/list-illustration/list-illustration-item.html.twig b/src/implementations/twig/components/list-illustration/list-illustration-item.html.twig index d41e55c62ab..bb6ac142bec 100644 --- a/src/implementations/twig/components/list-illustration/list-illustration-item.html.twig +++ b/src/implementations/twig/components/list-illustration/list-illustration-item.html.twig @@ -54,7 +54,7 @@
{% if _title is not empty or _icon is not empty %}
- {% if _icon is not empty %} + {% if _icon is not empty and _icon.path is defined %} {% include '@ecl/icon/icon.html.twig' with { icon: _icon, extra_classes: 'ecl-list-illustration__icon', diff --git a/src/implementations/twig/components/list-illustration/list-illustration.story.js b/src/implementations/twig/components/list-illustration/list-illustration.story.js index 03c013759c7..342440c4ed1 100644 --- a/src/implementations/twig/components/list-illustration/list-illustration.story.js +++ b/src/implementations/twig/components/list-illustration/list-illustration.story.js @@ -14,18 +14,26 @@ import notes from './README.md'; const system = getSystem(); const iconsAll = system === 'eu' ? iconsAllEu : iconsAllEc; - +const imgDefault = dataListIllustrationImage.items[0].image; +const iconDefault = dataListIllustrationIcon.items[0].icon; +const descDefault = dataListIllustrationIcon.items[0].description; // Create 'none' option. iconsAll.unshift('none'); const getArgs = (data, variant) => { - const args = {}; + const args = { + show_description: true, + }; + if (variant.includes('image')) { + args.show_image = true; + } + if (variant.includes('icon')) { + args.show_icon = true; + } if (data.items[0].title) { args.title = data.items[0].title; } - if (data.items[0].description) { - args.description = data.items[0].description; - } + args.description = data.items[0].description; if (data.items[0].image && data.items[0].image.src) { args.image = data.items[0].image.src; args.image_squared = false; @@ -34,7 +42,7 @@ const getArgs = (data, variant) => { args.icon = data.items[0].icon.name; } - if (variant === 'horizontal') { + if (variant.includes('horizontal')) { args.column = 2; } else { args.zebra = true; @@ -44,8 +52,38 @@ const getArgs = (data, variant) => { }; const getArgTypes = (data, variant) => { - const argTypes = {}; - if (variant === 'horizontal') { + const argTypes = { + show_description: { + name: 'description', + type: { name: 'boolean' }, + description: 'Show the description', + table: { + category: 'Optional', + }, + }, + }; + if (variant.includes('image')) { + argTypes.show_image = { + name: 'image', + type: { name: 'boolean' }, + description: 'Show image', + table: { + category: 'Optional', + }, + }; + } + if (variant.includes('icon')) { + argTypes.show_icon = { + name: 'icon', + type: { name: 'boolean' }, + description: 'Show icon', + table: { + category: 'Optional', + }, + }; + } + + if (variant.includes('horizontal')) { argTypes.column = { name: 'number of columns', control: { type: 'range', min: 2, max: 4, step: 1 }, @@ -76,7 +114,7 @@ const getArgTypes = (data, variant) => { table: { type: { summary: 'string' }, defaultValue: { summary: '' }, - category: 'Content', + category: 'Content (first-item)', }, }; argTypes.description = { @@ -86,7 +124,7 @@ const getArgTypes = (data, variant) => { table: { type: { summary: 'string' }, defaultValue: { summary: '' }, - category: 'Content', + category: 'Content (first-item)', }, }; @@ -122,7 +160,7 @@ const getArgTypes = (data, variant) => { table: { type: { summary: 'string' }, defaultValue: { summary: '' }, - category: 'Icon', + category: 'Icon (first item)', }, }; argTypes.icon_flag = { @@ -133,7 +171,7 @@ const getArgTypes = (data, variant) => { table: { type: { summary: 'string' }, defaultValue: { summary: '' }, - category: 'Icon', + category: 'Icon (first item)', }, }; } @@ -143,25 +181,34 @@ const getArgTypes = (data, variant) => { const prepareDataItem = (data, args) => { data.title = args.title; - data.description = args.description; - if (args.image) { + if (!args.show_description) { + data.description = ''; + } else { + data.description = args.description; + } + if (!args.show_image) { + data.image = {}; + } else { data.image.src = args.image; data.image.squared = args.image_squared; } - if (args.icon && args.icon !== 'none') { + if (!args.show_icon) { + delete data.icon; + } else { data.icon = {}; data.icon.name = args.icon; data.icon.size = 'l'; data.icon.path = 'icon.svg'; + if (args.icon_flag && args.icon_flag !== 'none') { + data.icon.name = args.icon_flag; + data.icon.path = 'icon-flag.svg'; + } + if (args.icon === 'none') { + delete data.icon; + } } - if (args.icon_flag && args.icon_flag !== 'none') { - data.icon = {}; - data.icon.name = args.icon_flag; - data.icon.size = 'l'; - data.icon.path = 'icon-flag.svg'; - } - if (args.icon === 'none') { - delete data.icon; + if (!args.show_description) { + data.description = ''; } correctSvgPath(data); @@ -171,10 +218,33 @@ const prepareDataItem = (data, args) => { const prepareDataList = (data, args) => { data.items[0] = prepareDataItem(data.items[0], args); - for (let i = 1; i < data.items.length; i += 1) { - if (args.image) { + if (args.show_image) { + for (let i = 1; i < data.items.length; i += 1) { + data.items[i].image = imgDefault; data.items[i].image.squared = args.image_squared; } + } else { + for (let i = 1; i < data.items.length; i += 1) { + data.items[i].image = {}; + } + } + if (args.show_icon) { + for (let i = 1; i < data.items.length; i += 1) { + data.items[i].icon = iconDefault; + } + } else { + for (let i = 1; i < data.items.length; i += 1) { + data.items[i].icon = {}; + } + } + if (args.show_description) { + for (let i = 1; i < data.items.length; i += 1) { + data.items[i].description = descDefault; + } + } else { + for (let i = 1; i < data.items.length; i += 1) { + data.items[i].description = ''; + } } data.zebra = args.zebra; @@ -194,8 +264,11 @@ export const HorizontalImage = (args) => listIllustration(prepareDataList(dataListIllustrationImage, args)); HorizontalImage.storyName = 'horizontal (images)'; -HorizontalImage.args = getArgs(dataListIllustrationImage, 'horizontal'); -HorizontalImage.argTypes = getArgTypes(dataListIllustrationImage, 'horizontal'); +HorizontalImage.args = getArgs(dataListIllustrationImage, 'horizontal-image'); +HorizontalImage.argTypes = getArgTypes( + dataListIllustrationImage, + 'horizontal-image' +); HorizontalImage.parameters = { notes: { markdown: notes, json: dataListIllustrationImage }, }; @@ -204,8 +277,11 @@ export const HorizontalIcon = (args) => listIllustration(prepareDataList(dataListIllustrationIcon, args)); HorizontalIcon.storyName = 'horizontal (icons)'; -HorizontalIcon.args = getArgs(dataListIllustrationIcon, 'horizontal'); -HorizontalIcon.argTypes = getArgTypes(dataListIllustrationIcon, 'horizontal'); +HorizontalIcon.args = getArgs(dataListIllustrationIcon, 'horizontal-icon'); +HorizontalIcon.argTypes = getArgTypes( + dataListIllustrationIcon, + 'horizontal-icon' +); HorizontalIcon.parameters = { notes: { markdown: notes, json: dataListIllustrationIcon }, }; @@ -214,8 +290,11 @@ export const VerticalImage = (args) => listIllustration(prepareDataList(dataListIllustrationImage, args)); VerticalImage.storyName = 'vertical (images)'; -VerticalImage.args = getArgs(dataListIllustrationImage, 'vertical'); -VerticalImage.argTypes = getArgTypes(dataListIllustrationImage, 'vertical'); +VerticalImage.args = getArgs(dataListIllustrationImage, 'vertical-image'); +VerticalImage.argTypes = getArgTypes( + dataListIllustrationImage, + 'vertical-image' +); VerticalImage.parameters = { notes: { markdown: notes, json: dataListIllustrationImage }, }; @@ -224,8 +303,8 @@ export const VerticalIcon = (args) => listIllustration(prepareDataList(dataListIllustrationIcon, args)); VerticalIcon.storyName = 'vertical (icons)'; -VerticalIcon.args = getArgs(dataListIllustrationIcon, 'vertical'); -VerticalIcon.argTypes = getArgTypes(dataListIllustrationIcon, 'vertical'); +VerticalIcon.args = getArgs(dataListIllustrationIcon, 'vertical-icon'); +VerticalIcon.argTypes = getArgTypes(dataListIllustrationIcon, 'vertical-icon'); VerticalIcon.parameters = { notes: { markdown: notes, json: dataListIllustrationIcon }, }; diff --git a/src/implementations/twig/components/media-container/media-container.story.js b/src/implementations/twig/components/media-container/media-container.story.js index 3eec2cb69c6..83e250415da 100644 --- a/src/implementations/twig/components/media-container/media-container.story.js +++ b/src/implementations/twig/components/media-container/media-container.story.js @@ -9,6 +9,7 @@ import notes from './README.md'; const getArgs = (data) => { const args = { + show_description: true, description: data.description, width: 'outside', }; @@ -23,16 +24,24 @@ const getArgs = (data) => { }; const getArgTypes = (data) => { - const argTypes = {}; - - argTypes.description = { - name: 'description', - type: 'string', - description: 'Media description', - table: { - type: { summary: 'string' }, - defaultValue: { summary: '' }, - category: 'Content', + const argTypes = { + show_description: { + name: 'description', + type: { name: 'boolean' }, + description: 'Show the description', + table: { + category: 'Optional', + }, + }, + description: { + name: 'description', + type: 'string', + description: 'Media description', + table: { + type: { summary: 'string' }, + defaultValue: { summary: '' }, + category: 'Content', + }, }, }; @@ -91,6 +100,10 @@ const getArgTypes = (data) => { const prepareData = (data, args) => { data.full_width = args.width === 'inside'; + if (!args.show_description) { + args.description = ''; + } + return Object.assign(data, args); }; diff --git a/src/implementations/twig/components/page-banner/page-banner.story.js b/src/implementations/twig/components/page-banner/page-banner.story.js index bb172bf7489..aaa854f676f 100644 --- a/src/implementations/twig/components/page-banner/page-banner.story.js +++ b/src/implementations/twig/components/page-banner/page-banner.story.js @@ -12,8 +12,11 @@ import bannerDataImageGradient from '@ecl/specs-component-page-banner/demo/data- import pageBanner from './page-banner.html.twig'; import notes from './README.md'; +const cta = { ...bannerDataSimplePrimary.link }; const getArgs = (data) => { const args = { + show_description: true, + show_button: true, title: data.title, description: data.description, label: data.link.link.label, @@ -30,6 +33,22 @@ const getArgs = (data) => { const getArgTypes = (data) => { const argTypes = { + show_description: { + name: 'description', + type: { name: 'boolean' }, + description: 'Show the description', + table: { + category: 'Optional', + }, + }, + show_button: { + name: 'button', + type: { name: 'boolean' }, + description: 'Show the cta button', + table: { + category: 'Optional', + }, + }, title: { type: { name: 'string', required: true }, description: 'Heading of the banner', @@ -115,10 +134,19 @@ const prepareData = (data, args) => { data.description = args.description; data.centered = args.centered; data.full_width = args.width === 'inside'; - data.link.link.label = args.label; + if (data.image) { data.image = args.image; } + if (!args.show_description) { + data.description = ''; + } + if (!args.show_button) { + data.link = false; + } else { + data.link = cta; + data.link.link.label = args.label; + } return data; }; diff --git a/src/implementations/vanilla/components/card/_card.scss b/src/implementations/vanilla/components/card/_card.scss index fb75d1d1752..2dc71c3aabd 100644 --- a/src/implementations/vanilla/components/card/_card.scss +++ b/src/implementations/vanilla/components/card/_card.scss @@ -190,7 +190,7 @@ $_list-padding: null !default; /* stylelint-enable plugin/selector-bem-pattern */ + .ecl-card__list { margin-top: map.get(theme.$spacing, 's'); - padding-top: 0; + padding-top: map.get(theme.$spacing, 's'); } } @@ -216,6 +216,7 @@ $_list-padding: null !default; */ .ecl-card__body > :first-child { margin-top: 0; + padding-top: 0; } .ecl-card__body > :last-child { diff --git a/src/website/src/pages/ec/components/card/docs/code.mdx b/src/website/src/pages/ec/components/card/docs/code.mdx index a600e5eecf3..fcb720d3dd2 100644 --- a/src/website/src/pages/ec/components/card/docs/code.mdx +++ b/src/website/src/pages/ec/components/card/docs/code.mdx @@ -17,7 +17,8 @@ import { card, tile, cardTaxonomy, tileTaxonomy } from '../demo'; @@ -33,7 +34,8 @@ import { card, tile, cardTaxonomy, tileTaxonomy } from '../demo'; diff --git a/src/website/src/pages/eu/components/card/docs/code.mdx b/src/website/src/pages/eu/components/card/docs/code.mdx index 12b07820a7f..1cee602e56f 100644 --- a/src/website/src/pages/eu/components/card/docs/code.mdx +++ b/src/website/src/pages/eu/components/card/docs/code.mdx @@ -8,7 +8,7 @@ import { card, tile, cardTaxonomy, tileTaxonomy } from '../demo'; ## Card - + @@ -17,7 +17,8 @@ import { card, tile, cardTaxonomy, tileTaxonomy } from '../demo'; @@ -34,6 +35,7 @@ import { card, tile, cardTaxonomy, tileTaxonomy } from '../demo'; system="eu" selectedKind="components-card" selectedStory="tile-taxonomy" + selectedArgs="show_description:false;show_links:false;show_lists:true;show_taxonomy:true;title:" >