feat(FileCard): Adding new component FileCard

.storybook/preview.js

@@ -1,5 +1,5 @@
 import '@altinn/figma-design-tokens/dist/tokens.css';
-import '@digdir/design-system-tokens/dist/digdir/tokens.css';
+import '@digdir/design-system-tokens/brand/digdir/tokens.css';
 import './style.css';
 
 /** @type { import('@storybook/react').Preview } */

package.json

@@ -25,7 +25,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@digdir/design-system-react": "^0.9.0",
+    "@digdir/design-system-react": "^0.24.1",
     "@navikt/aksel-icons": "^2.8.2",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-image": "^3.0.1",
@@ -94,7 +94,7 @@
   "dependencies": {
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
-    "@digdir/design-system-tokens": "^0.0.3",
+    "@digdir/design-system-tokens": "^0.6.0",
     "rollup-plugin-copy": "^3.4.0"
   }
 }

packages/react/src/components/FileCard/FileCard.module.css

@@ -0,0 +1,107 @@
+.fileCard {
+  display: grid;
+  grid-template-columns: var(--fds-spacing-18) 1fr var(--fds-spacing-18);
+  width: 100%;
+  outline: 1px solid var(--fds-semantic-border-neutral-default);
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--fds-semantic-text-neutral-default);
+  text-decoration: none;
+}
+
+.isMobile {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto 1fr;
+}
+
+.fileCard:hover {
+  outline-width: 2px;
+  background-color: var(--color-200);
+}
+
+.fileCard:focus {
+  outline-width: 3px;
+  background-color: var(--color-300);
+  box-shadow: 0 0 0 6px var(--fds-semantic-border-focus-outline);
+}
+
+.primary {
+  --color-200: var(--fds-brand-primary-200);
+  --color-300: var(--fds-brand-primary-300);
+  --color-400: var(--fds-brand-primary-400);
+  --color-500: var(--fds-brand-primary-500);
+}
+
+.secondary {
+  --color-200: var(--fds-brand-secondary-200);
+  --color-300: var(--fds-brand-secondary-300);
+  --color-400: var(--fds-brand-secondary-400);
+  --color-500: var(--fds-brand-secondary-500);
+}
+
+.tertiary {
+  --color-200: var(--fds-brand-tertiary-200);
+  --color-300: var(--fds-brand-tertiary-300);
+  --color-400: var(--fds-brand-tertiary-400);
+  --color-500: var(--fds-brand-tertiary-500);
+}
+
+.fileIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  background-color: var(--color-300);
+  font-size: 2rem;
+}
+
+.isMobile .fileIcon {
+  justify-content: flex-start;
+  padding: var(--fds-spacing-3) var(--fds-spacing-6);
+}
+
+.fileCard:hover .fileIcon {
+  background-color: var(--color-400);
+}
+
+.fileCard:focus .fileIcon {
+  background-color: var(--color-500);
+}
+
+.fileText {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--fds-spacing-4) var(--fds-spacing-6);
+  flex: 1;
+  gap: 4px;
+}
+
+.isMobile .fileText {
+  padding: 24px;
+  grid-column: 1 / 3;
+}
+
+.fileDownload {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 2rem;
+}
+
+.isMobile .fileDownload {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+  justify-content: flex-end;
+  background-color: var(--color-300);
+  padding: var(--fds-spacing-3) var(--fds-spacing-7);
+}
+
+.isMobile:hover .fileDownload {
+  background-color: var(--color-400);
+}
+
+.isMobile:focus .fileDownload {
+  background-color: var(--color-500);
+}

packages/react/src/components/FileCard/FileCard.stories.tsx

@@ -0,0 +1,57 @@
+import { FileCard } from './FileCard';
+
+export default {
+  title: 'Components/FileCard',
+  component: FileCard,
+  tags: ['autodocs'],
+  argTypes: {
+    brand: {
+      control: {
+        type: 'radio',
+        options: ['primary', 'secondary', 'tertiary'],
+      },
+    },
+  },
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'Light',
+      values: [
+        {
+          name: 'Dark',
+          value: '#1E2B3C',
+        },
+        {
+          name: 'Light',
+          value: '#00000',
+        },
+      ],
+    },
+  },
+};
+
+export const Normal = {
+  args: {
+    heading: 'Dette er en fil',
+    description: 'Dette er en filbeskrivelse',
+    filePath: '/test',
+  },
+};
+
+export const Secondary = {
+  args: {
+    heading: 'Dette er en fil',
+    description: 'Dette er en filbeskrivelse',
+    brand: 'secondary',
+    filePath: '/test',
+  },
+};
+
+export const Tertiary = {
+  args: {
+    heading: 'Dette er en fil',
+    description: 'Dette er en filbeskrivelse',
+    brand: 'tertiary',
+    filePath: '/test',
+  },
+};

packages/react/src/components/FileCard/FileCard.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render as renderRtl, screen } from '@testing-library/react';
+import { FileJsonIcon } from '@navikt/aksel-icons';
+
+import type { FileCardProps } from './FileCard';
+import { FileCard } from './FileCard';
+
+let mockIsMobile = {
+  isMobile: false,
+};
+
+jest.mock('../../hooks/useDeviceBreakpoints', () => () => mockIsMobile);
+
+describe('FileCard', () => {
+  it('should have the fileCard class', () => {
+    render({
+      heading: 'test',
+      description: 'test',
+      filePath: '/test',
+    });
+    const list = screen.getByRole('link');
+    expect(list.classList).toContain('fileCard');
+  });
+
+  it('should render the heading', () => {
+    render({
+      heading: 'test heading',
+      description: 'test',
+      filePath: '/test',
+    });
+    const heading = screen.getByText('test heading');
+    expect(heading).toBeInTheDocument();
+  });
+
+  it('should render the description', () => {
+    render({
+      heading: 'test',
+      description: 'test description',
+      filePath: '/test',
+    });
+    const description = screen.getByText('test description');
+    expect(description).toBeInTheDocument();
+  });
+
+  it('should render the file icon when icon is passed', () => {
+    render({
+      heading: 'test',
+      description: 'test',
+      filePath: '/test',
+      icon: <FileJsonIcon title='JSON Icon' />,
+    });
+    const fileIcon = screen.getByTitle('JSON Icon');
+    expect(fileIcon).toBeInTheDocument();
+  });
+
+  it('should be focusable', () => {
+    render({
+      heading: 'test',
+      description: 'test',
+      filePath: '/test',
+    });
+    const fileCard = screen.getByRole('link');
+    fileCard.focus();
+    expect(fileCard).toHaveFocus();
+  });
+
+  it('should have class "isMobile", when isMobile is true', () => {
+    mockIsMobile = {
+      isMobile: true,
+    };
+    render({
+      heading: 'test',
+      description: 'test',
+      filePath: '/test',
+    });
+    const fileCard = screen.getByRole('link');
+    expect(fileCard.classList).toContain('isMobile');
+  });
+});
+
+const render = (props: FileCardProps) => renderRtl(<FileCard {...props} />);

packages/react/src/components/FileCard/FileCard.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import cn from 'classnames';
+import { DownloadIcon, FileIcon } from '@navikt/aksel-icons';
+import { Heading, Paragraph } from '@digdir/design-system-react';
+
+import useDeviceBreakpoints from '../../hooks/useDeviceBreakpoints';
+import type { BrandColor } from '../../types/brand';
+
+import classes from './FileCard.module.css';
+
+type FileCardProps = {
+  heading: string;
+  description: string;
+  filePath: string;
+  icon?: React.ReactNode;
+  brand?: BrandColor;
+};
+
+/**
+ * Component that allows the user to download a file.
+ *
+ * @param heading: string;
+ * @param description: string;
+ * @param filePath: string;
+ * @param icon?: React.ReactNode = FileIcon
+ * @param brand?: 'primary' | 'secondary' | 'tertiary' = 'primary';
+ */
+const FileCard = ({
+  icon,
+  heading,
+  description,
+  filePath,
+  brand = 'primary',
+  ...rest
+}: FileCardProps) => {
+  const { isMobile } = useDeviceBreakpoints();
+
+  return (
+    <a
+      className={cn(
+        classes.fileCard,
+        classes[brand],
+        isMobile && classes.isMobile,
+      )}
+      href={filePath}
+      download={true}
+      {...rest}
+    >
+      <div className={cn(classes.fileIcon)}>{icon ? icon : <FileIcon />}</div>
+      <div className={cn(classes.fileText)}>
+        <Heading size='xxsmall'>{heading}</Heading>
+        <Paragraph size='small'>{description}</Paragraph>
+      </div>
+      <div className={cn(classes.fileDownload)}>
+        <DownloadIcon />
+      </div>
+    </a>
+  );
+};
+
+export { FileCard };
+export type { FileCardProps };

packages/react/src/components/FileCard/index.ts

@@ -0,0 +1,2 @@
+export { FileCard } from './FileCard';
+export type { FileCardProps } from './FileCard';