@altinn/altinn-components 0.1.0 → 0.2.0

package/lib/components/Dialog/dialogTitle.module.css

@@ -0,0 +1,47 @@
+.title {
+  font-weight: 600;
+  margin: 0;
+  padding-right: 1.25rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.title[data-size="xs"] {
+  font-size: 1rem;
+}
+
+.title[data-size="sm"] {
+  font-size: 1rem;
+}
+
+.title[data-size="md"] {
+  font-size: 1.125rem;
+  line-height: 1.2;
+}
+
+.title[data-size="lg"] {
+  font-size: 1.25rem;
+  line-height: 1.2;
+}
+
+.title[data-size="xl"] {
+  font-size: 1.5rem;
+  line-height: 1.25;
+}
+
+.title[data-seen="true"] {
+  font-weight: 400;
+}
+
+.title[data-variant="archive"] {
+  font-weight: 400;
+}
+
+.title[data-variant="bin"] {
+  font-weight: 400;
+  text-decoration: line-through;
+}

package/lib/components/Dialog/index.ts

@@ -0,0 +1,2 @@
+export * from './DialogMetadata';
+export * from './DialogListItem';

package/lib/components/Header/GlobalMenu.tsx

@@ -116,7 +116,7 @@ export const GlobalMenu = ({
   return (
     <div className={cx(styles.button, className)}>
       <HeaderButton as="div" avatar={accountMenuItem.avatar} onClick={onToggle} expanded={expanded} label={menuLabel} />
-      <div className={styles?.dropdown} aria-expanded={expanded}>
+      <div className={styles.dropdown} aria-expanded={expanded}>
         {selectAccount ? (
           <>
             <MenuItem {...backItem} />

package/lib/components/Header/Header.tsx

@@ -41,19 +41,19 @@ export const Header = ({ color, search, menu }: HeaderProps) => {
 
   return (
     <header className={styles.header} data-color={color}>
-      <HeaderLogo className={styles?.logo} />
+      <HeaderLogo className={styles.logo} />
       {menu && (
         <GlobalMenu
           {...menu}
           expanded={expandedType === 'account'}
           onToggle={() => onToggle('account')}
-          className={styles?.button}
+          className={styles.button}
         />
       )}
       {search && (
         <HeaderSearch
           {...search}
-          className={styles?.search}
+          className={styles.search}
           expanded={expandedType === 'search'}
           onBlur={onSearchBlur}
           onFocus={onSearchFocus}

package/lib/components/Header/HeaderSearch.tsx

@@ -34,7 +34,7 @@ export const HeaderSearch = ({
           value={value}
           onChange={onChange}
           placeholder={placeholder}
-          className={styles?.input}
+          className={styles.input}
           type="search"
         />
         <Icon name="magnifying-glass" className={styles.icon} />

package/lib/components/History/HistoryBorder.tsx

@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './historyBorder.module.css';
+
+export interface HistoryBorderProps {
+  seen?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const HistoryBorder = ({ seen = true, className, children }: HistoryBorderProps) => {
+  return (
+    <div className={cx(styles.border, className)} data-seen={seen}>
+      {children}
+    </div>
+  );
+};

package/lib/components/History/HistoryItem.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { HistoryItem } from './HistoryItem';
+
+const meta = {
+  title: 'History/HistoryItem',
+  component: HistoryItem,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    createdAt: '2004-09-22 13:34',
+    createdBy: {
+      name: 'Eirik Horneland',
+    },
+    summary: 'Brann slo Glimt 4-1 på Stadion.',
+  },
+} satisfies Meta<typeof HistoryItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Attachments: Story = {
+  args: {
+    attachments: [
+      {
+        label: '1-0 Castro.pdf',
+      },
+      {
+        label: '2-0 Kornvig.pdf',
+      },
+      {
+        label: '3-0 Kartum.pdf',
+      },
+      {
+        label: '3-1 Zinkernagel.pdf',
+      },
+      {
+        label: '4-1 Castro.pdf',
+      },
+    ],
+  },
+};

package/lib/components/History/HistoryItem.tsx

@@ -0,0 +1,64 @@
+import { type AttachmentLinkProps, AttachmentList } from '../Attachment';
+import { Avatar } from '../Avatar/';
+import { MetaBase, MetaItem, MetaTimestamp } from '../Meta/';
+import { Typography } from '../Typography';
+import { HistoryBorder } from './HistoryBorder';
+import styles from './historyItem.module.css';
+
+export interface CreatedByProps {
+  type?: 'company' | 'person';
+  name?: string;
+  imageUrl?: string;
+}
+
+export interface HistoryItemProps {
+  createdBy?: CreatedByProps;
+  createdAt?: string;
+  summary?: string;
+  attachments?: AttachmentLinkProps[];
+}
+
+export const HistoryItem = ({
+  createdBy = {
+    type: 'person',
+  },
+  createdAt,
+  summary,
+  attachments,
+}: HistoryItemProps) => {
+  const title = attachments?.length + ' vedlegg';
+
+  return (
+    <section className={styles.item}>
+      <header className={styles.header}>
+        <Avatar
+          type={createdBy.type || 'person'}
+          imageUrl={createdBy?.imageUrl}
+          name={createdBy.name || 'Unknown name'}
+          size="sm"
+        />
+      </header>
+      <HistoryBorder className={styles.border}>
+        <article className={styles.body}>
+          <MetaBase>
+            <MetaTimestamp datetime={createdAt} size="xs">
+              {createdBy?.name + ', '}
+              {createdAt}
+            </MetaTimestamp>
+          </MetaBase>
+          <Typography size="lg">
+            <p>{summary}</p>
+            {attachments ? (
+              <section>
+                <MetaItem size="xs">{title}</MetaItem>
+                <AttachmentList items={attachments} />
+              </section>
+            ) : (
+              ''
+            )}
+          </Typography>
+        </article>
+      </HistoryBorder>
+    </section>
+  );
+};

package/lib/components/History/HistoryList.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { HistoryList } from './HistoryList';
+
+const meta = {
+  title: 'History/HistoryList',
+  component: HistoryList,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    items: [
+      {
+        createdAt: '2004-09-22 13:34',
+        createdBy: {
+          name: 'Eirik Horneland',
+        },
+        summary: 'Brann slo Glimt 4-1 på Stadion.',
+        attachments: [
+          {
+            label: '1-0 Castro.pdf',
+          },
+          {
+            label: '2-0 Kornvig.pdf',
+          },
+          {
+            label: '3-0 Kartum.pdf',
+          },
+          {
+            label: '3-1 Zinkernagel.pdf',
+          },
+          {
+            label: '4-1 Castro.pdf',
+          },
+        ],
+      },
+      {
+        createdAt: '2004-09-09 13:34',
+        createdBy: {
+          name: 'Eirik Horneland',
+        },
+        summary: 'Brann vant 1-0 i Haugesund.',
+        attachments: [
+          {
+            label: 'Målet til Heggebø.pdf',
+          },
+        ],
+      },
+    ],
+  },
+} satisfies Meta<typeof HistoryList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/History/HistoryList.tsx

@@ -0,0 +1,26 @@
+import cx from 'classnames';
+import { HistoryItem, type HistoryItemProps } from './HistoryItem';
+import styles from './historyList.module.css';
+
+export interface HistoryProps {
+  items: HistoryItemProps[];
+  className?: string;
+}
+
+export const HistoryList = ({ items, className }: HistoryProps) => {
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <ul className={cx(styles.list, className)}>
+      {items.map((item, index) => {
+        return (
+          <li key={index} className={styles.item}>
+            <HistoryItem {...item} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

package/lib/components/History/historyBorder.module.css

@@ -0,0 +1,8 @@
+.border {
+  border-left: 0.25rem solid;
+  border-color: var(--theme-surface-active);
+}
+
+.border[data-seen="true"] {
+  border-color: var(--neutral-surface-default);
+}

package/lib/components/History/historyItem.module.css

@@ -0,0 +1,19 @@
+.item {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  margin: 0.375em;
+}
+
+.border {
+  padding-left: 1.5rem;
+  padding-top: 0;
+  margin-left: 1rem;
+  padding-bottom: 1.5rem;
+}
+
+.body {
+  margin-top: -1.875rem;
+}

package/lib/components/History/historyList.module.css

@@ -0,0 +1,12 @@
+.list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  padding: 0;
+  margin: 0;
+}
+
+.item {
+  margin: 0;
+}

package/lib/components/History/index.ts

@@ -0,0 +1,2 @@
+export * from './HistoryList';
+export * from './HistoryItem';

package/lib/components/Icon/CheckboxCheckedIcon.tsx

@@ -0,0 +1,28 @@
+export type CheckboxCheckedIconProps = {
+  title?: string;
+  className?: string;
+};
+
+/**
+ * Checkbox for lists and list items
+ */
+export const CheckboxCheckedIcon = ({ title = 'Checkbox', className }: CheckboxCheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5 0C1.11929 0 0 1.11929 0 2.5V21.5C0 22.8807 1.11929 24 2.5 24H21.5C22.8807 24 24 22.8807 24 21.5V2.5C24 1.11929 22.8807 0 21.5 0H2.5ZM18.5547 5.76815C19.0142 6.07451 19.1384 6.69538 18.8321 7.1549L11.6321 17.9549C11.4659 18.2042 11.1967 18.3658 10.8985 18.3953C10.6004 18.4249 10.3047 18.3192 10.0929 18.1073L5.29289 13.3073C4.90237 12.9168 4.90237 12.2836 5.29289 11.8931C5.68342 11.5026 6.31658 11.5026 6.70711 11.8931L10.6446 15.8306L17.1679 6.0455C17.4743 5.58598 18.0952 5.4618 18.5547 5.76815Z"
+        fill="black"
+      />
+    </svg>
+  );
+};

package/lib/components/Icon/CheckboxIcon.stories.ts

@@ -18,6 +18,13 @@ export const Default: Story = {
   },
 };
 
+export const Hover: Story = {
+  args: {
+    checked: false,
+    hover: true,
+  },
+};
+
 export const Checked: Story = {
   args: {
     checked: true,

package/lib/components/Icon/CheckboxIcon.tsx

@@ -1,8 +1,9 @@
-import cx from 'classnames';
-import styles from './checkboxIcon.module.css';
+import { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
+import { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 
 export type CheckboxIconProps = {
   checked: boolean;
+  hover?: boolean;
   title?: string;
   className?: string;
 };
@@ -10,20 +11,7 @@ export type CheckboxIconProps = {
 /**
  * Checkbox for lists and list items
  */
-export const CheckboxIcon = ({ checked, title, className }: CheckboxIconProps) => {
-  return (
-    <div data-checked={checked} className={cx(styles.checkbox, className)}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={2.5}
-        stroke="currentColor"
-        className={styles.icon}
-      >
-        <title>{title}</title>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-      </svg>
-    </div>
-  );
+export const CheckboxIcon = ({ checked, title = 'checkbox', hover = false, className }: CheckboxIconProps) => {
+  const iconProps = { title, className };
+  return checked ? <CheckboxCheckedIcon {...iconProps} /> : <CheckboxUncheckedIcon {...iconProps} hover={hover} />;
 };

package/lib/components/Icon/CheckboxUncheckedIcon.tsx

@@ -0,0 +1,38 @@
+export type CheckboxUncheckedIconProps = {
+  title?: string;
+  className?: string;
+  hover?: boolean;
+};
+
+/**
+ * Checkbox for lists and list items
+ */
+export const CheckboxUncheckedIcon = ({ title = 'Checkbox', className, hover = false }: CheckboxUncheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.5 2.5H2.5V21.5H21.5V2.5ZM2.5 0C1.11929 0 0 1.11929 0 2.5V21.5C0 22.8807 1.11929 24 2.5 24H21.5C22.8807 24 24 22.8807 24 21.5V2.5C24 1.11929 22.8807 0 21.5 0H2.5Z"
+        fill="black"
+      />
+      {hover && (
+        <path
+          data-hover={true}
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M18.5547 5.76815C19.0142 6.07451 19.1384 6.69538 18.8321 7.1549L11.6321 17.9549C11.4659 18.2042 11.1967 18.3658 10.8985 18.3953C10.6004 18.4249 10.3047 18.3192 10.0929 18.1073L5.29289 13.3073C4.90237 12.9168 4.90237 12.2836 5.29289 11.8931C5.68342 11.5026 6.31658 11.5026 6.70711 11.8931L10.6446 15.8306L17.1679 6.0455C17.4743 5.58598 18.0952 5.4618 18.5547 5.76815Z"
+          fill="currentColor"
+        />
+      )}
+    </svg>
+  );
+};

package/lib/components/Icon/ProgressIcon.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProgressIcon } from './ProgressIcon';
+
+const meta = {
+  title: 'Atoms/Icon/ProgressIcon',
+  component: ProgressIcon,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta<typeof ProgressIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 0,
+  },
+};
+
+export const Progress25: Story = {
+  args: {
+    value: 25,
+  },
+};
+
+export const Progress50: Story = {
+  args: {
+    value: 50,
+  },
+};
+
+export const Progress75: Story = {
+  args: {
+    value: 75,
+  },
+};
+
+export const Progress100: Story = {
+  args: {
+    value: 100,
+  },
+};

package/lib/components/Icon/ProgressIcon.tsx

@@ -0,0 +1,44 @@
+import cx from 'classnames';
+import type { CSSProperties } from 'react';
+import styles from './progressIcon.module.css';
+export interface ProgressIconProps {
+  value?: number;
+  total?: number;
+  className?: string;
+}
+
+interface CustomCSSProperties extends CSSProperties {
+  '--progress'?: string;
+}
+export const ProgressIcon = ({ value = 0, total = 100, className }: ProgressIconProps) => {
+  const percentage = Math.round((value / total) * 100);
+
+  if (value === total) {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={styles.complete}
+      >
+        <title>
+          Progress {value} of {total}
+        </title>
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.1751 5.11246C11.3892 4.87167 11.7579 4.84998 11.9987 5.06402C12.2395 5.27805 12.2612 5.64676 12.0471 5.88755L7.60268 10.8876C7.49595 11.0076 7.34442 11.0784 7.18383 11.0831C7.02324 11.0878 6.86782 11.0261 6.75421 10.9125L3.97644 8.13471C3.74863 7.9069 3.74863 7.53756 3.97644 7.30975C4.20424 7.08194 4.57359 7.08194 4.80139 7.30975L7.14172 9.65007L11.1751 5.11246Z"
+        />
+      </svg>
+    );
+  }
+
+  const progressStyle: CustomCSSProperties = {
+    '--progress': `${percentage}%`,
+  };
+
+  return <div className={cx(styles.progress, className)} style={progressStyle} data-value={`${percentage}%`} />;
+};

package/lib/components/Icon/RadioCheckedIcon.tsx

@@ -0,0 +1,29 @@
+export type RadioCheckedIconProps = {
+  title?: string;
+  className?: string;
+};
+
+/**
+ * Radio for lists and list items
+ */
+export const RadioCheckedIcon = ({ title = 'Radio', className }: RadioCheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
+        fill="black"
+      />
+    </svg>
+  );
+};

package/lib/components/Icon/RadioIcon.stories.ts

@@ -18,6 +18,13 @@ export const Default: Story = {
   },
 };
 
+export const Hover: Story = {
+  args: {
+    checked: false,
+    hover: true,
+  },
+};
+
 export const Checked: Story = {
   args: {
     checked: true,

package/lib/components/Icon/RadioIcon.tsx

@@ -1,29 +1,17 @@
-import cx from 'classnames';
-import styles from './radioIcon.module.css';
+import { RadioCheckedIcon } from './RadioCheckedIcon';
+import { RadioUncheckedIcon } from './RadioUncheckedIcon';
 
 export type RadioIconProps = {
   checked: boolean;
+  hover?: boolean;
   title?: string;
   className?: string;
 };
 
 /**
- * Radio icon for lists and list items
+ * Radio for lists and list items
  */
-export const RadioIcon = ({ checked, title, className }: RadioIconProps) => {
-  return (
-    <div data-checked={checked} className={cx(styles.radio, className)}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={2.5}
-        stroke="currentColor"
-        className={styles.icon}
-      >
-        <title>{title}</title>
-        <circle cx="12" cy="12" r="6" fill="currentColor" />
-      </svg>
-    </div>
-  );
+export const RadioIcon = ({ checked, title = 'Radio', hover = false, className }: RadioIconProps) => {
+  const iconProps = { title, className };
+  return checked ? <RadioCheckedIcon {...iconProps} /> : <RadioUncheckedIcon {...iconProps} hover={hover} />;
 };

package/lib/components/Icon/RadioUncheckedIcon.tsx

@@ -0,0 +1,30 @@
+export type RadioUncheckedIconProps = {
+  title?: string;
+  className?: string;
+  hover?: boolean;
+};
+
+/**
+ * Radio for lists and list items
+ */
+export const RadioUncheckedIcon = ({ title = 'Radio', className, hover = false }: RadioUncheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+        fill="black"
+      />
+      {hover && <circle data-hover={true} cx="12" cy="12" r="5" fill="black" />}
+    </svg>
+  );
+};