Merge pull request #1832 from SpareBank1/ny-detailListCard-komponent

Ny detail list card komponent

component-overview/examples/lists/DetailListCard-clickable-rows.jsx

@@ -0,0 +1,12 @@
+import { DetailListCard, DetailListCardItem } from '@sb1/ffe-lists-react';
+import { Icon } from '@sb1/ffe-icons-react';
+import { LinkText } from '@sb1/ffe-core-react';
+import { PrimaryButton } from '@sb1/ffe-buttons-react';
+
+<DetailListCard>
+    <DetailListCardItem label="Kontonavn" value="Daglig konto"/>
+    <DetailListCardItem label="Kontotype" value="Brukskonto" />
+    <DetailListCardItem label="Kontonummer" value={<><LinkText>1234 56 78912</LinkText> <Icon fileUrl="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik0zNjIuMzA4LTI2MC4wMDFxLTI3LjAwOCAwLTQ1LjY1Ny0xOC42NS0xOC42NS0xOC42NS0xOC42NS00NS42NTh2LTQ1NS4zODJxMC0yNy4wMDggMTguNjUtNDUuNjU4IDE4LjY0OS0xOC42NSA0NS42NTctMTguNjVoMzU5LjM4M3EyNy4wMDcgMCA0NS42NTcgMTguNjUgMTguNjUgMTguNjUgMTguNjUgNDUuNjU4djQ1NS4zODJxMCAyNy4wMDgtMTguNjUgNDUuNjU4LTE4LjY1IDE4LjY1LTQ1LjY1NyAxOC42NUgzNjIuMzA4Wm0wLTUxLjk5OWgzNTkuMzgzcTQuNjE1IDAgOC40NjItMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTQ1NS4zODJxMC00LjYxNi0zLjg0Ni04LjQ2My0zLjg0Ny0zLjg0Ni04LjQ2Mi0zLjg0NkgzNjIuMzA4cS00LjYxNiAwLTguNDYyIDMuODQ2LTMuODQ3IDMuODQ3LTMuODQ3IDguNDYzdjQ1NS4zODJxMCA0LjYxNiAzLjg0NyA4LjQ2MyAzLjg0NiAzLjg0NiA4LjQ2MiAzLjg0NlpNMjM4LjMwOS0xMzYuMDAzcS0yNy4wMDcgMC00NS42NTctMTguNjUtMTguNjUtMTguNjUtMTguNjUtNDUuNjU3di00ODEuMzgycTAtMTEuMDY5IDcuNDA1LTE4LjUzNCA3LjQwNC03LjQ2NSAxOC4zODQtNy40NjUgMTAuOTc5IDAgMTguNTk1IDcuNDY1IDcuNjE1IDcuNDY1IDcuNjE1IDE4LjUzNHY0ODEuMzgycTAgNC42MTYgMy44NDYgOC40NjIgMy44NDcgMy44NDcgOC40NjIgMy44NDdoMzg1LjM4MnExMS4wNjkgMCAxOC41MzQgNy40MDQgNy40NjYgNy40MDUgNy40NjYgMTguMzg0IDAgMTAuOTgtNy40NjYgMTguNTk1LTcuNDY1IDcuNjE1LTE4LjUzNCA3LjYxNUgyMzguMzA5Wk0zNDkuOTk5LTMxMlYtNzkyLTMxMloiLz48L3N2Zz4=" size="sm"></Icon></>}/>
+    <DetailListCardItem label="Kontoeier" value="Ola veldiglangtmellomnavn Nordmann" />
+    <DetailListCardItem label="Tilfeldig knapp" value={<PrimaryButton>Tilfeldig</PrimaryButton>} />
+</DetailListCard>

component-overview/examples/lists/DetailListCard-minimal-clickable.jsx

@@ -0,0 +1,7 @@
+import { DetailListCard, DetailListCardItem } from '@sb1/ffe-lists-react';
+import { LinkText } from '@sb1/ffe-core-react';
+
+<DetailListCard>
+    <DetailListCardItem label="Kontonavn" value={<LinkText>D</LinkText>} />
+    <DetailListCardItem label="Kontotype" value="Brukskonto" />
+</DetailListCard>

component-overview/examples/lists/DetailListCard.jsx

@@ -0,0 +1,8 @@
+import { DetailListCard, DetailListCardItem } from '@sb1/ffe-lists-react';
+
+<DetailListCard>
+    <DetailListCardItem label="Kontonavn" value="Daglig konto" />
+    <DetailListCardItem label="Kontotype" value="Brukskonto" />
+    <DetailListCardItem label="Kontonummer" value="1234 45 34554" />
+    <DetailListCardItem label="Kontoeier" value="Ola Nordmann" />
+</DetailListCard>

packages/ffe-lists-react/src/DetailListCard.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import { node, string } from 'prop-types';
+
+const DetailListCard = props => {
+    const { className, children, ...rest } = props;
+
+    return (
+        <dl className={classNames('ffe-detail-list-card', className)} {...rest}>
+            {children}
+        </dl>
+    );
+};
+
+DetailListCard.propTypes = {
+    /** Additional classnames */
+    className: string,
+    children: node,
+};
+
+export default DetailListCard;

packages/ffe-lists-react/src/DetailListCard.spec.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import DetailListCard from './DetailListCard';
+import DetailListCardItem from './DetailListCardItem';
+
+const getWrapper = props =>
+    shallow(
+        <DetailListCard {...props}>
+            <DetailListCardItem label="Test Label" value="Test Value" />
+        </DetailListCard>,
+    );
+
+const getDetailListCardItemWrapper = props =>
+    shallow(
+        <DetailListCardItem
+            label="Kontonummer"
+            value="1234 45 12345"
+            {...props}
+        />,
+    );
+
+describe('<DetailListCard />', () => {
+    it('renders without exploding', () => {
+        const wrapper = getWrapper();
+        expect(wrapper.is('dl')).toBe(true);
+    });
+    it('add classNames correctly', () => {
+        const wrapper = getWrapper({ className: 'test-class' });
+        expect(wrapper.hasClass('ffe-detail-list-card')).toBe(true);
+        expect(wrapper.hasClass('test-class')).toBe(true);
+    });
+});
+
+describe('<DetailListCard />', () => {
+    it('renders without exploding', () => {
+        const wrapper = getDetailListCardItemWrapper();
+        expect(wrapper.is('div')).toBe(true);
+        expect(wrapper.hasClass('ffe-detail-list-card__item')).toBe(true);
+    });
+    it('adds additional classNames correctly', () => {
+        const wrapper = getDetailListCardItemWrapper({
+            className: 'test-class',
+        });
+        expect(wrapper.hasClass('test-class')).toBe(true);
+    });
+
+    it('adds additional props correctly', () => {
+        const wrapper = getDetailListCardItemWrapper({ id: 'test-id' });
+        expect(wrapper.prop('id')).toBe('test-id');
+    });
+    it('renders correct label content', () => {
+        const wrapper = getDetailListCardItemWrapper();
+        expect(
+            wrapper.find('dt').hasClass('ffe-detail-list-card__item-label'),
+        ).toBe(true);
+        const wrapper2 = getDetailListCardItemWrapper({
+            label: <span>Test Label</span>,
+        });
+        expect(wrapper2.find('dt').contains(<span>Test Label</span>)).toBe(
+            true,
+        );
+    });
+
+    it('renders correct value content', () => {
+        const wrapper = getDetailListCardItemWrapper();
+        expect(
+            wrapper.find('dd').hasClass('ffe-detail-list-card__item-value'),
+        ).toBe(true);
+        const wrapper2 = getDetailListCardItemWrapper({
+            value: <span>Test Value</span>,
+        });
+        expect(wrapper2.find('dd').contains(<span>Test Value</span>)).toBe(
+            true,
+        );
+    });
+});

packages/ffe-lists-react/src/DetailListCardItem.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+import { string, node } from 'prop-types';
+
+const DetailListCardItem = ({ className, label, value, ...rest }) => {
+    return (
+        <div
+            className={classNames('ffe-detail-list-card__item', className)}
+            {...rest}
+        >
+            <dt className="ffe-detail-list-card__item-label">
+                {typeof label === 'string'
+                    ? label
+                    : React.cloneElement(label, { ...label.props })}
+            </dt>
+            <dd className="ffe-detail-list-card__item-value">
+                {typeof value === 'string'
+                    ? value
+                    : React.cloneElement(value, { ...value.props })}
+            </dd>
+        </div>
+    );
+};
+
+DetailListCardItem.propTypes = {
+    /** Additional classnames */
+    className: string,
+    /** Content of the label / left column */
+    label: node.isRequired,
+    /** Content of the value / right column */
+    value: node.isRequired,
+};
+
+export default DetailListCardItem;

packages/ffe-lists-react/src/index.d.ts

@@ -32,6 +32,18 @@ export interface DescriptionListProps extends BaseListProps {
     horizontal?: boolean;
 }
 
+export interface DetailListCardItemProps
+    extends React.ComponentPropsWithoutRef<'div'> {
+    label: NonNullable<React.ReactNode>;
+    value: NonNullable<React.ReactNode>;
+}
+
+export interface DetailListCard extends React.ComponentPropsWithoutRef<'dl'> {
+    children:
+        | NonNullable<React.ReactNode>
+        | ((props: DetailListCardItemProps) => NonNullable<React.ReactNode>);
+}
+
 declare class BulletList extends React.Component<
     BulletListProps & React.ComponentProps<'ul'>,
     any

packages/ffe-lists-react/src/index.js

@@ -10,6 +10,8 @@ import DescriptionList from './DescriptionList';
 import DescriptionListMultiCol from './DescriptionListMultiCol';
 import DescriptionListTerm from './DescriptionListTerm';
 import DescriptionListDescription from './DescriptionListDescription';
+import DetailListCard from './DetailListCard';
+import DetailListCardItem from './DetailListCardItem';
 
 export {
     BulletList,
@@ -24,6 +26,8 @@ export {
     DescriptionListMultiCol,
     DescriptionListTerm,
     DescriptionListDescription,
+    DetailListCard,
+    DetailListCardItem,
 };
 
 export default BulletList;

packages/ffe-lists/less/detail-list-card.less

@@ -0,0 +1,65 @@
+.ffe-detail-list-card {
+    background-color: var(--ffe-v-detail-list-card-background-color);
+    border-radius: var(--ffe-v-detail-list-card-border-radius);
+    font-family: var(--ffe-g-font);
+    font-variant-numeric: tabular-nums;
+    container-type: inline-size;
+
+    &__item:not(:last-child) {
+        border-bottom: 1px solid var(--ffe-v-detail-list-card-border-color);
+    }
+
+    &__item {
+        padding: var(--ffe-spacing-sm);
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--ffe-spacing-xs);
+        overflow-wrap: anywhere;
+        text-wrap: balance;
+
+        &:is(button) {
+            background-color: transparent;
+            border: 0;
+            width: 100%;
+            color: inherit;
+        }
+
+        &:is(a) {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        &:is(:first-child) {
+            border-radius: var(--ffe-v-detail-list-card-border-radius)
+                var(--ffe-v-detail-list-card-border-radius) 0 0;
+        }
+
+        &:is(:last-child) {
+            border-radius: 0 0 var(--ffe-v-detail-list-card-border-radius)
+                var(--ffe-v-detail-list-card-border-radius);
+        }
+
+        &-label {
+            font-family: var(--ffe-g-font-heading-small);
+            color: var(--ffe-g-secondary-color);
+        }
+
+        &-value {
+            margin: 0; // Removes the default dd-element margin when it breaks to a new line
+            display: flex;
+            align-items: center;
+
+            & > a,
+            & > button {
+                min-width: 24px; // Secures a minimal size for clickable area in WCAG
+            }
+        }
+
+        @container (width < 299px) {
+            flex-direction: column;
+            align-items: normal;
+        }
+    }
+}

packages/ffe-lists/less/lists.less

@@ -1,3 +1,4 @@
 @import 'theme';
 @import './regular-lists.less';
 @import './description-list.less';
+@import './detail-list-card.less';

packages/ffe-lists/less/theme.less

@@ -4,14 +4,18 @@
     --ffe-v-lists-description-description-color: var(--ffe-farge-svart);
     --ffe-v-lists-check-list-check-icon-color: var(--ffe-farge-skog);
     --ffe-v-lists-check-list-cross-icon-color: var(--ffe-farge-baer);
-
+    --ffe-v-detail-list-card-background-color: var(--ffe-farge-hvit);
+    --ffe-v-detail-list-card-border-color: var(--ffe-farge-lysgraa);
+    --ffe-v-detail-list-card-border-radius: 16px;
     @media (prefers-color-scheme: dark) {
         .native {
             --ffe-v-lists-title-color: var(--ffe-farge-hvit);
             --ffe-v-lists-description-description-color: var(
                 --ffe-farge-lysgraa
             );
             --ffe-v-lists-check-list-check-icon-color: var(--ffe-farge-skog-70);
+            --ffe-v-detail-list-card-background-color: var(--ffe-farge-natt);
+            --ffe-v-detail-list-card-border-color: var(--ffe-farge-koksgraa);
         }
     }
 }