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

Commit

Permalink
refactor(demo): Pagebanner optional/mandatory knobs - FRONT-913 (#374)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Joosthe
Joosthe committed Mar 23, 2020
1 parent fcdafa2 commit bce35a8
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 134 deletions.
40 changes: 16 additions & 24 deletions src/ec/packages/ec-component-page-banner/adapter.js
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,25 @@
/* eslint-disable import/no-extraneous-dependencies */
import { formatLink } from '@ecl-twig/data-utils';

const adapter = initialData => {
// Copy reference specification demo adaptedData.
const adaptedData = JSON.parse(JSON.stringify(initialData));
const iconType = adaptedData.link.icon.shape.split('--');
const banner = {
type: adaptedData.variant,
title: adaptedData.title,
baseline: adaptedData.baseline,
link: {
link: {
path: '/example',
label: adaptedData.link.label,
icon_position: 'after',
},
icon: {
type: iconType[0],
name: iconType[1],
transform: adaptedData.link.icon.transform,
size: adaptedData.link.icon.size,
path: '/icons.svg',
},
},
centered: adaptedData.isCentered,
};
if (adaptedData.link) {
adaptedData.link = formatLink(adaptedData.link);

if ('image' in adaptedData) {
banner.image = adaptedData.image;
if (adaptedData.link.icon) {
adaptedData.link.link.icon_position = 'after';
delete adaptedData.icon_position;
}
}

return banner;
adaptedData.type = adaptedData.variant;
delete adaptedData.variant;

adaptedData.centered = initialData.isCentered;
delete adaptedData.isCentered;

return adaptedData;
};

export default adapter;
178 changes: 68 additions & 110 deletions src/ec/packages/ec-component-page-banner/page-banner.story.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import merge from 'deepmerge';
/* eslint-disable no-param-reassign */
import { storiesOf } from '@storybook/html';
import { withNotes } from '@ecl-twig/storybook-addon-notes';
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
import withCode from '@ecl-twig/storybook-addon-code';
import {
getExtraKnobs,
buttonLabels,
getIconKnobs,
} from '@ecl-twig/story-utils';

import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg';
import uiIcons from '@ecl/ec-resources-icons/dist/lists/ui.json';

import bannerDataDefault from './demo/data--default';
import bannerDataImage from './demo/data--image';
Expand All @@ -15,122 +20,75 @@ import bannerDataAlignLeft from './demo/data--align-left';
import pageBanner from './ecl-page-banner.html.twig';
import notes from './README.md';

const setIconPath = b => {
if (b.link.icon) {
b.link.icon.path = defaultSprite; // eslint-disable-line no-param-reassign
uiIcons.unshift('null');
const preparePageBanner = data => {
if (data.centered) {
data.centered = boolean('centered', data.centered, buttonLabels.states);
}
return b;

data.type = select('type', [data.type], data.type, buttonLabels.required);
data.title = text('title', data.title, buttonLabels.required);
if (data.baseline) {
data.baseline = text('baseline', data.baseline, buttonLabels.required);
}
if (data.image) {
data.image = text('image', data.image, buttonLabels.required);
}
data.link.link.label = text(
'Link label',
data.link.link.label,
buttonLabels.required
);
data.link.link.path = text(
'link.link.path',
data.link.link.path,
buttonLabels.required
);
data.link.icon.name = select(
'link.icon.name',
uiIcons,
data.link.icon.name,
buttonLabels.optional
);
if (data.link.icon.name !== 'null') {
getIconKnobs(
data,
data.link.icon.name,
'ui',
'xs',
'default',
'rotate-90',
true
);
} else {
delete data.link.icon;
}

getExtraKnobs(data);

return data;
};

storiesOf('Components/Banners/Page Banner', module)
.addDecorator(withNotes)
.addDecorator(withCode)
.addDecorator(withKnobs)
.add(
'image',
() =>
pageBanner(
merge(setIconPath(bannerDataImage), {
link: {
link: {
label: text('Link label', bannerDataImage.link.link.label),
},
},
title: text('Title', bannerDataImage.title),
baseline: text('baseline', bannerDataImage.baseline),
centered: boolean('Centered', bannerDataImage.centered),
image: text('Image', bannerDataImage.image),
})
),
{
notes: { markdown: notes, json: setIconPath(bannerDataImage) },
}
)
.add('image', () => pageBanner(preparePageBanner(bannerDataImage)), {
notes: { markdown: notes, json: bannerDataImage },
})
.add(
'image-shade',
() =>
pageBanner(
merge(setIconPath(bannerDataImageShade), {
link: {
link: {
label: text('Link label', bannerDataImageShade.link.link.label),
},
},
title: text('Title', bannerDataImageShade.title),
baseline: text('baseline', bannerDataImageShade.baseline),
centered: boolean('Centered', bannerDataImageShade.centered),
image: text('Image', bannerDataImageShade.image),
})
),
() => pageBanner(preparePageBanner(bannerDataImageShade)),
{
notes: {
markdown: notes,
json: setIconPath(bannerDataImageShade),
},
notes: { markdown: notes, json: bannerDataImageShade },
}
)
.add(
'primary',
() =>
pageBanner(
merge(setIconPath(bannerDataPrimary), {
link: {
link: {
label: text('Link label', bannerDataPrimary.link.link.label),
},
},
title: text('Title', bannerDataPrimary.title),
baseline: text('baseline', bannerDataPrimary.baseline),
centered: boolean('Centered', bannerDataPrimary.centered),
})
),
{
notes: {
markdown: notes,
json: setIconPath(bannerDataPrimary),
},
}
)
.add(
'default',
() =>
pageBanner(
merge(setIconPath(bannerDataDefault), {
link: {
link: {
label: text('Link label', bannerDataDefault.link.link.label),
},
},
title: text('Title', bannerDataDefault.title),
baseline: text('baseline', bannerDataDefault.baseline),
centered: boolean('Centered', bannerDataDefault.centered),
})
),
{
notes: {
markdown: notes,
json: setIconPath(bannerDataDefault),
},
}
)
.add(
'align-left',
() =>
pageBanner(
merge(setIconPath(bannerDataAlignLeft), {
link: {
link: {
label: text('Link label', bannerDataAlignLeft.link.link.label),
},
},
title: text('Title', bannerDataAlignLeft.title),
baseline: text('baseline', bannerDataAlignLeft.baseline),
})
),
{
notes: {
markdown: notes,
json: setIconPath(bannerDataAlignLeft),
},
}
);
.add('primary', () => pageBanner(preparePageBanner(bannerDataPrimary)), {
notes: { markdown: notes, json: bannerDataPrimary },
})
.add('default', () => pageBanner(preparePageBanner(bannerDataDefault)), {
notes: { markdown: notes, json: bannerDataDefault },
})
.add('align-left', () => pageBanner(preparePageBanner(bannerDataAlignLeft)), {
notes: { markdown: notes, json: bannerDataAlignLeft },
});

0 comments on commit bce35a8

Please sign in to comment.