Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop illustration card icon right #2213

Merged
merged 2 commits into from
Aug 20, 2024
Merged

Develop illustration card icon right #2213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a4c386e
feat(ffe-cards-react): added illustration on right IllustrationCard
pethel Aug 20, 2024
ec9dea5
feat(ffe-cards): added illustration on right IllustrationCard
pethel Aug 20, 2024
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
315 changes: 315 additions & 0 deletions component-overview/examples/cards/IllustrationCard-illustrationPositioned.jsx
View file
Open in desktop

Large diffs are not rendered by default.

41 changes: 19 additions & 22 deletions packages/ffe-cards-react/src/IconCard/IconCard.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,26 @@ const savingsIconXlarge =
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDgiPjxwYXRoIGQ9Ik0yNDMuMDc4LTE0MC4wMDFxLTIwLjIzMSAwLTM3LjgxNy0xMy4zNy0xNy41ODYtMTMuMzY5LTIzLjEwNi0zMi43MDctMjUtODcuNTM5LTQwLjk2NS0xNDguMjY2LTE1Ljk2Ni02MC43MjctMjUuMDE5LTEwNC42ODItOS4wNTItNDMuOTU1LTEyLjYxMS03Ni43OTEtMy41NTktMzIuODM2LTMuNTU5LTY0LjM2MyAwLTgzLjM1OCA1OC4yMzEtMTQxLjU4OCA1OC4yMy01OC4yMzEgMTQxLjc2OC01OC4yMzFoMjEwLjAwMXEyNy0zNiA2Ni01OCAzOC45OTktMjIgODMuOTk5LTIyIDE2LjUzOCAwIDI4LjI2OCAxMS43MzEgMTEuNzMxIDExLjczIDExLjczMSAyOC4yNjggMCA0LjA3Ny0xLjExNiA3Ljk2MS0xLjExNSAzLjg4NS0yLjM0NiA3LjczMS00LjM4NSAxMS43NjktOC40NjEgMjUuNDYyLTQuMDc3IDEzLjY5Mi03LjYxNiAzNC43N2wxMDQuMDc4IDEwNC4wNzdoNDYuNjE0cTEyLjM1NiAwIDIwLjYwMSA4LjI0NiA4LjI0NiA4LjI0NSA4LjI0NiAyMC42MDF2MTk0LjMwNXEwIDkuODc4LTUuMjQ2IDE3LjU5NS01LjI0NiA3LjcxNy0xNC45ODUgMTAuMjUxbC04OC44NDkgMjkuNTI4LTUzLjMwNSAxNzguMDFxLTYuMDI2IDE4Ljg0NS0yMS4wNzUgMzAuMTUzLTE1LjA0OSAxMS4zMDktMzQuNjE3IDExLjMwOWgtODQuMjI4cS0yMy41OTYgMC00MC42NDUtMTcuMDQ4LTE3LjA0OC0xNy4wNDktMTcuMDQ4LTQwLjY0NXYtMjIuMzA3SDM3OS45OTl2MjIuMzA3cTAgMjMuNTk2LTE3LjA0OCA0MC42NDUtMTcuMDQ5IDE3LjA0OC00MC42NDUgMTcuMDQ4aC03OS4yMjhabS0zLjg0Ni00NS4zODRoODMuMDc0cTUuMzg1IDAgOC44NDctMy40NjIgMy40NjItMy40NjIgMy40NjItOC44NDd2LTY3LjY5MWgyMTAuNzd2NjcuNjkxcTAgNS4zODUgMy40NjIgOC44NDcgMy40NjIgMy40NjIgOC44NDcgMy40NjJoODQuMjI4cTMuODQ3IDAgNy4xMTYtMi4zMDggMy4yNjktMi4zMDggNC44MDgtNi41MzlsNTkuOTIzLTE5OS45OTkgMTAwLjg0Ni0zNC42MTV2LTE2NS43NjloLTQ4LjkyM0w2MzQuNjE1LTcyNS42OTJxLjYxNS0xNyA0LjczMS00MC43MzEgNC4xMTUtMjMuNzMxIDExLjczLTQ5LjQ5OS0zNy45OTkgOS44NDYtNjguNDk5IDMyLjAzOC0zMC41IDIyLjE5Mi00NS4xMTUgNDkuMjY5SDMwMHEtNjQuMzYzIDAtMTA5LjQ4OSA0NS4xMjZRMTQ1LjM4NS02NDQuMzYyIDE0NS4zODUtNTgwcTAgNDEuMjMxIDIxLjAzOCAxNDEuNjkyIDIxLjAzOSAxMDAuNDYxIDYwLjExNiAyNDMuMzA3IDEuMTU0IDQuMjMxIDQuODA4IDYuOTIzIDMuNjU0IDIuNjkzIDcuODg1IDIuNjkzWk02NDAtNTI0LjYxNnExNC42OTIgMCAyNS4wMzgtMTAuMzQ2VDY3NS4zODQtNTYwcTAtMTQuNjkyLTEwLjM0Ni0yNS4wMzhUNjQwLTU5NS4zODRxLTE0LjY5MiAwLTI1LjAzOCAxMC4zNDZUNjA0LjYxNi01NjBxMCAxNC42OTIgMTAuMzQ2IDI1LjAzOFQ2NDAtNTI0LjYxNlptLTE0Mi42OTItMTAwcTkuNjYzIDAgMTYuMTc4LTYuNTY2UTUyMC02MzcuNzQ5IDUyMC02NDcuNDlxMC05Ljc0LTYuNTE0LTE2LjEyNS02LjUxNS02LjM4NC0xNi4xNzgtNi4zODRIMzQyLjY5MnEtOS42NjMgMC0xNi4xNzggNi41NjZRMzIwLTY1Ni44NjYgMzIwLTY0Ny4xMjVxMCA5Ljc0IDYuNTE0IDE2LjEyNSA2LjUxNSA2LjM4NCAxNi4xNzggNi4zODRoMTU0LjYxNlpNNDgwLTUwMC44NDZaIi8+PC9zdmc+';

const children = <div>Hello world</div>;
const TEST_ID = 'test-id';

describe('IconCard', () => {
it('should render correct class and contain a div with body class', () => {
render(
<IconCard
data-testid={TEST_ID}
as="li"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Disse vill ofta vare listelement så synes dette blir bedre.

icon={<Icon fileUrl={savingsIconXlarge} size="xl" />}
>
{children}
</IconCard>,
);
const card = screen.getByTestId(TEST_ID);
const card = screen.getByRole('listitem');
expect(card.classList.contains('ffe-icon-card')).toBeTruthy();
expect(card.querySelector('.ffe-icon-card__body')).toBeTruthy();
});

it('should render icon, with an added class', () => {
render(
<IconCard
data-testid={TEST_ID}
as="li"
icon={
<Icon
fileUrl={savingsIconXlarge}
Expand All @@ -39,7 +38,7 @@ describe('IconCard', () => {
{children}
</IconCard>,
);
const card = screen.getByTestId(TEST_ID);
const card = screen.getByRole('listitem');
const icon = card.querySelector('.ffe-icons');
expect(icon?.classList.contains('ffe-icon-card__icon')).toBe(true);
expect(icon?.classList.contains('my-custom-class')).toBe(true);
Expand All @@ -48,14 +47,14 @@ describe('IconCard', () => {
it('should add modifying classes when modifiers are given', () => {
render(
<IconCard
data-testid={TEST_ID}
as="li"
condensed={true}
icon={<Icon fileUrl={savingsIconXlarge} size="xl" />}
>
{children}
</IconCard>,
);
const card = screen.getByTestId(TEST_ID);
const card = screen.getByRole('listitem');
expect(card.classList.contains('ffe-icon-card')).toBeTruthy();
expect(
card.classList.contains('ffe-icon-card--condensed'),
Expand All @@ -65,38 +64,36 @@ describe('IconCard', () => {
it('should render icon on the right when modifier iconPosition="right', () => {
render(
<IconCard
data-testid={TEST_ID}
as="li"
iconPosition="right"
icon={<Icon fileUrl={savingsIconXlarge} size="xl" />}
>
{children}
</IconCard>,
);
const card = screen.getByTestId(TEST_ID);
const card = screen.getByRole('listitem');
const body = card.querySelector('.ffe-icon-card__body') as Element;
const icon = card.querySelector('.ffe-icon-card__icon') as Element;
expect(card.classList.contains('ffe-icon-card')).toBeTruthy();
expect(card.classList.contains('ffe-icon-card--right')).toBeTruthy();

const icon = card.querySelector('.ffe-icon-card__icon');
const body = card.querySelector('.ffe-icon-card__body');

if (icon && body) {
expect(
body?.compareDocumentPosition(icon) &
Node.DOCUMENT_POSITION_FOLLOWING,
).toBeTruthy();
}
expect(
body?.compareDocumentPosition(icon) &
Node.DOCUMENT_POSITION_FOLLOWING,
).toBeTruthy();
});

it('should render children as a function', () => {
render(
<IconCard
data-testid={TEST_ID}
as="li"
icon={<Icon fileUrl={savingsIconXlarge} size="xl" />}
children={Components => (
<Components.Text>Hello world</Components.Text>
)}
/>,
);
const card = screen.getByTestId(TEST_ID);
const card = screen.getByRole('listitem');
const p = card.querySelector('p');
expect(p?.classList.contains('ffe-card-body__text')).toBeTruthy();
expect(p?.textContent).toEqual('Hello world');
Expand All @@ -105,14 +102,14 @@ describe('IconCard', () => {
it('should render my custom class', () => {
render(
<IconCard
data-testid={TEST_ID}
as="li"
icon={<Icon fileUrl={savingsIconXlarge} size="xl" />}
className="my-custom-class"
>
{children}
</IconCard>,
);
const card = screen.getByTestId(TEST_ID);
const card = screen.getByRole('listitem');
expect(card.classList.contains('ffe-icon-card')).toBeTruthy();
expect(card.classList.contains('my-custom-class')).toBeTruthy();
});
Expand Down
36 changes: 22 additions & 14 deletions packages/ffe-cards-react/src/IconCard/IconCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ function IconCardWithForwardRef<As extends ElementType>(
) {
const { className, condensed, icon, children, iconPosition, ...rest } =
props;

return (
<WithCardAction
baseClassName="ffe-icon-card"
Expand All @@ -38,16 +39,8 @@ function IconCardWithForwardRef<As extends ElementType>(
ref={ref}
>
{({ CardAction }) => {
const content = [
React.cloneElement(icon, {
...icon.props,
key: 'icon',
className: classNames(
'ffe-icon-card__icon',
icon.props.className,
),
}),
<div className="ffe-icon-card__body" key="body">
const bodyElement = (
<div className="ffe-icon-card__body">
{typeof children === 'function'
? children({
Text,
Expand All @@ -57,11 +50,26 @@ function IconCardWithForwardRef<As extends ElementType>(
CardAction,
})
: children}
</div>,
];
return (
</div>
);

const iconElement = React.cloneElement(icon, {
...icon.props,
className: classNames(
'ffe-icon-card__icon',
icon.props.className,
),
});

return iconPosition === 'right' ? (
<>
{bodyElement}
{iconElement}
</>
) : (
<>
{iconPosition === 'right' ? content.reverse() : content}
{iconElement}
{bodyElement}
</>
);
}}
Expand Down
Loading
Loading