@fellesdatakatalog/ui 1.0.15 → 1.0.17

package/src/components/helptext/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Popover } from '@digdir/designsystemet-react';
+import styles from './helptext.module.scss';
+
+export type HelpTextProps = {
+    /**
+     * Required descriptive label for screen readers.
+     **/
+    "aria-label": string;
+    /**
+     * Placement of the Popover.
+     * @default 'right'
+     */
+    placement?: "right" | "bottom" | "left" | "top";
+  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color">;
+  
+  export const HelpText = React.forwardRef<HTMLButtonElement, HelpTextProps>(
+    function HelpText(
+      { placement = "right", children, ...rest },
+      ref
+    ) {
+      return (
+        <Popover.TriggerContext>
+          <Popover.Trigger
+            className={styles.helptext}
+            ref={ref}
+            variant="tertiary"
+            data-color="info"
+            {...rest}
+          />
+          <Popover placement={placement} data-color="info">
+            {children}
+          </Popover>
+        </Popover.TriggerContext>
+      );
+    }
+  );

package/src/components/hstack/hstack.module.scss

@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}

package/src/components/hstack/hstack.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import HStack from '.';
+
+const meta: Meta<typeof HStack> = {
+    component: HStack,
+    title: 'HStack',
+};
+
+export default meta;
+type Story = StoryObj<typeof HStack>;
+
+const Item = ({ children }: { children: React.ReactNode }) => (
+    <span
+        style={{
+            display: 'inline-block',
+            padding: '0.25rem 0.5rem',
+            background: '#EEF0F2',
+            borderRadius: 4,
+        }}
+    >
+        {children}
+    </span>
+);
+
+export const Primary: Story = {
+    render: () => (
+        <div style={{ padding: '1rem' }}>
+            <HStack>
+                <Item>One</Item>
+                <Item>Two</Item>
+                <Item>Three</Item>
+            </HStack>
+        </div>
+    ),
+};
+
+

package/src/components/hstack/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import cn from 'classnames';
+
+import styles from './hstack.module.scss';
+
+const HStack = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div
+            className={cn(styles.wrapper, className)}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default HStack;

package/src/components/org-logo/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import cn from 'classnames';
+import { Buildings3Icon } from '@navikt/aksel-icons';
+import styles from './styles.module.scss';
+
+export type OrgLogoProps = {
+    orgLogoSrc?: string | null;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const OrgLogo = ({ className, orgLogoSrc, ...props }: OrgLogoProps) => {
+    return (
+        <div className={cn(styles.orgLogo, className)} {...props}>
+            {orgLogoSrc ? (
+                <img
+                    aria-hidden
+                    src={orgLogoSrc}
+                    alt=''
+                />
+            ) : (
+                <Buildings3Icon aria-hidden />
+            )}
+        </div>
+    );
+};
+
+export { OrgLogo };

package/src/components/org-logo/org-logo.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { OrgLogo } from '.';
+
+const meta: Meta<typeof OrgLogo> = {
+    component: OrgLogo,
+    title: 'OrgLogo',
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        orgLogoSrc: {
+            control: 'text',
+            description: 'URL of the organization logo image',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof OrgLogo>;
+
+export const Default: Story = {
+    args: {
+        orgLogoSrc: 'https://orglogo.digdir.no/api/emblem/svg/991825827',
+    },
+    render: (args) => (
+        <div style={{ maxWidth: '2rem', padding: '1rem' }}>
+            <OrgLogo {...args} />
+        </div>
+    ),
+};

package/src/components/org-logo/styles.module.scss

@@ -0,0 +1,20 @@
+.orgLogo {
+    display: flex;
+    width: 1em;
+    height: 1em;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    svg,
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+
+    svg {
+        color: var(--color-text);
+    }
+}

package/src/components/radio-group/index.tsx

@@ -0,0 +1,101 @@
+import React, { type ReactNode } from 'react';
+import {
+  Fieldset,
+  Radio,
+  ValidationMessage,
+  type UseRadioGroupProps,
+  useRadioGroup,
+} from '@digdir/designsystemet-react';
+
+export interface RadioGroupProps extends Omit<UseRadioGroupProps, 'value' | 'onChange'> {
+  /**
+   * The legend text for the fieldset
+   */
+  legend?: ReactNode;
+  /**
+   * Optional description text for the fieldset
+   */
+  description?: ReactNode;
+  /**
+   * Array of radio options
+   */
+  options: Array<{
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+  }>;
+  /**
+   * Controlled value - the selected radio value
+   */
+  value?: string;
+  /**
+   * Callback when the selected value changes
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Optional className for the fieldset
+   */
+  className?: string;
+}
+
+/**
+ * RadioGroup component that wraps multiple Radio components in a Fieldset.
+ * Handles state management, onChange, and value automatically.
+ *
+ * @example
+ * <RadioGroup
+ *   legend="Hvilken iskremsmak er best?"
+ *   description="Velg din favorittsmak"
+ *   options={[
+ *     { value: 'vanilje', label: 'Vanilje' },
+ *     { value: 'jordbær', label: 'Jordbær' },
+ *     { value: 'sjokolade', label: 'Sjokolade' },
+ *   ]}
+ *   value={selectedValue}
+ *   onChange={(value) => setSelectedValue(value)}
+ * />
+ */
+export const RadioGroup = ({
+  legend,
+  description,
+  options,
+  value,
+  onChange,
+  error,
+  disabled,
+  readOnly,
+  required,
+  name,
+  className,
+}: RadioGroupProps) => {
+  const { getRadioProps, validationMessageProps } = useRadioGroup({
+    value,
+    onChange: onChange ? (nextValue) => onChange(nextValue) : undefined,
+    error,
+    disabled,
+    readOnly,
+    required,
+    name,
+  });
+
+  return (
+    <Fieldset className={className}>
+      {legend && <Fieldset.Legend>{legend}</Fieldset.Legend>}
+      {description && <Fieldset.Description>{description}</Fieldset.Description>}
+      {options.map((option) => (
+        <Radio
+          key={option.value}
+          label={option.label}
+          description={option.description}
+          disabled={option.disabled}
+          {...getRadioProps(option.value)}
+        />
+      ))}
+      {error && <ValidationMessage {...validationMessageProps} />}
+    </Fieldset>
+  );
+};
+
+export default RadioGroup;
+

package/src/components/radio-group/radio-group.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import RadioGroup from '.';
+
+const meta: Meta<typeof RadioGroup> = {
+  component: RadioGroup,
+  title: 'RadioGroup',
+  argTypes: {
+    legend: {
+      control: 'text',
+      description: 'The legend text for the fieldset',
+    },
+    description: {
+      control: 'text',
+      description: 'Optional description text',
+    },
+    value: {
+      control: 'text',
+      description: 'Controlled value - the selected radio value',
+    },
+    error: {
+      control: 'text',
+      description: 'Error message to display',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable all radios',
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Make all radios read-only',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Make all radios required',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+
+const defaultOptions = [
+  { value: 'vanilje', label: 'Vanilje' },
+  { value: 'jordbær', label: 'Jordbær' },
+  { value: 'sjokolade', label: 'Sjokolade' },
+  { value: 'spiser-ikke-is', label: 'Jeg spiser ikke iskrem' },
+];
+
+export const Primary: Story = {
+  render: () => {
+    const [value, setValue] = useState('vanilje');
+    return (
+      <RadioGroup
+        legend="Hvilken iskremsmak er best?"
+        description="Velg din favorittsmak blant alternativene."
+        options={defaultOptions}
+        value={value}
+        onChange={setValue}
+      />
+    );
+  },
+};
+
+export const Uncontrolled: Story = {
+  render: () => (
+    <RadioGroup
+      legend="Hvilken iskremsmak er best?"
+      description="Velg din favorittsmak blant alternativene."
+      options={defaultOptions}
+    />
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <RadioGroup
+      legend="Hvilken bydel bor du i?"
+      description="Trondheim er delt inn i fire bydeler"
+      options={[
+        { value: 'ostbyen', label: 'Østbyen' },
+        { value: 'lerkendal', label: 'Lerkendal' },
+        { value: 'heimdal', label: 'Heimdal' },
+        { value: 'midtbyen', label: 'Midtbyen' },
+      ]}
+      error="Du må velge en bydel før du kan fortsette."
+      required
+    />
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup
+      legend="Hvilken iskremsmak er best?"
+      options={defaultOptions}
+      disabled
+    />
+  ),
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <RadioGroup
+      legend="Hvilken bydel bor du i?"
+      options={[
+        { value: 'ostbyen', label: 'Østbyen' },
+        { value: 'lerkendal', label: 'Lerkendal' },
+        { value: 'heimdal', label: 'Heimdal', disabled: true },
+        { value: 'midtbyen', label: 'Midtbyen' },
+      ]}
+      value="heimdal"
+      readOnly
+    />
+  ),
+};
+
+export const WithDescriptions: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <RadioGroup
+        legend="Velg pizza"
+        description="Alle pizzaene er laget på våre egne nybakte bunner"
+        options={[
+          { value: 'ost', label: 'Bare ost' },
+          {
+            value: 'dobbeldekker',
+            label: 'Dobbeldekker',
+            description: 'Chorizo spesial med kokkens luksuskylling',
+          },
+          { value: 'flammen', label: 'Flammen' },
+          { value: 'snadder', label: 'Snadder' },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    );
+  },
+};
+

package/src/components/tag-list/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import cn from 'classnames';
+import { Tag } from '@digdir/designsystemet-react';
+import styles from './styles.module.scss';
+
+export type TagListProps = {
+    maxTags?: number;
+    'data-size'?: string;
+};
+
+const TagList = ({ children, className, maxTags, 'data-size': dataSize, ...props }: TagListProps & React.HTMLAttributes<HTMLUListElement>) => {
+    const childArray = React.Children.toArray(children);
+    if (!childArray.length) return null;
+    return (
+        <ul
+            className={cn(styles.tagList, className)}
+            {...props}
+        >
+            {childArray
+                .filter((child) => Boolean(child))
+                .slice(0, maxTags ?? childArray.length)
+                .map((child, i) => {
+                    const key = React.isValidElement(child) && child.key != null 
+                        ? child.key 
+                        : i;
+                    return <li key={key}>{child}</li>;
+                })}
+            {maxTags && maxTags < childArray.length && (
+                <li>
+                    <Tag data-size={dataSize || 'sm'}>
+                        <span>+{childArray.length - maxTags}</span>
+                    </Tag>
+                </li>
+            )}
+        </ul>
+    );
+};
+
+export default TagList;

package/src/components/tag-list/styles.module.scss

@@ -0,0 +1,8 @@
+.tagList {
+    display: flex;
+    gap: 0.5rem;
+    font-weight: normal;
+    font-size: 0.8em;
+    align-items: center;
+    flex-wrap: wrap;
+}

package/src/components/tag-list/tag-list.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Tag } from '@digdir/designsystemet-react';
+import TagList from '.';
+
+const meta: Meta<typeof TagList> = {
+    component: TagList,
+    title: 'TagList',
+};
+
+export default meta;
+type Story = StoryObj<typeof TagList>;
+
+export const Primary: Story = {
+    parameters: {
+        nextjs: {
+            appDirectory: true,
+        },
+    },
+    render: () => (
+        <>
+            <div style={{ padding: '1rem' }}>
+                <TagList>
+                    <Tag data-size='sm'>My tag</Tag>
+                    <Tag
+                        data-size='sm'
+                        color='success'
+                    >
+                        My tag
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='neutral'
+                    >
+                        My tag
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='warning'
+                    >
+                        My tag
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='danger'
+                    >
+                        My tag
+                    </Tag>
+                </TagList>
+            </div>
+        </>
+    ),
+};
+
+export const WithMaxTags: Story = {
+    parameters: {
+        nextjs: {
+            appDirectory: true,
+        },
+    },
+    render: () => (
+        <>
+            <div style={{ padding: '1rem' }}>
+                <TagList maxTags={3}>
+                    <Tag data-size='sm'>Tag 1</Tag>
+                    <Tag
+                        data-size='sm'
+                        color='success'
+                    >
+                        Tag 2
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='neutral'
+                    >
+                        Tag 3
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='warning'
+                    >
+                        Tag 4
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='danger'
+                    >
+                        Tag 5
+                    </Tag>
+                    <Tag data-size='sm'>Tag 6</Tag>
+                    <Tag
+                        data-size='sm'
+                        color='success'
+                    >
+                        Tag 7
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='neutral'
+                    >
+                        Tag 8
+                    </Tag>
+                </TagList>
+            </div>
+        </>
+    ),
+};

package/src/components/vstack/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import styles from './vstack.module.scss';
+
+const VStack = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div
+            className={styles.wrapper}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default VStack;

package/src/components/vstack/vstack.module.scss

@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}

package/src/components/vstack/vstack.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import VStack from '.';
+
+const meta: Meta<typeof VStack> = {
+    component: VStack,
+    title: 'VStack',
+};
+
+export default meta;
+type Story = StoryObj<typeof VStack>;
+
+const Item = ({ children }: { children: React.ReactNode }) => (
+    <div
+        style={{
+            padding: '0.25rem 0.5rem',
+            background: '#EEF0F2',
+            borderRadius: 4,
+        }}
+    >
+        {children}
+    </div>
+);
+
+export const Primary: Story = {
+    render: () => (
+        <div style={{ padding: '1rem' }}>
+            <VStack>
+                <Item>Row 1</Item>
+                <Item>Row 2</Item>
+                <Item>Row 3</Item>
+            </VStack>
+        </div>
+    ),
+};
+
+

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from './components/app-bar';
+export * from './components/org-logo';
+export { default as CopyButton } from './components/copy-button';
+export { default as HStack } from './components/hstack';
+export { default as VStack } from './components/vstack';
+export { HelpText } from './components/helptext';
+export { default as TagList } from './components/tag-list';
+export { default as RadioGroup } from './components/radio-group';
+export { default as CheckboxGroup } from './components/checkbox-group';
+export type { RadioGroupProps } from './components/radio-group';
+export type { CheckboxGroupProps } from './components/checkbox-group';

package/src/styles/storybook.scss

@@ -0,0 +1,34 @@
+@layer reset, fds;
+@import '../components/core/reset.css';
+@import '@digdir/designsystemet-theme';
+@import '@digdir/designsystemet-css';
+
+html { font-size: 16px; }
+body { font-size: 1rem; }
+
+html, body, #storybook-root {
+  height: 100%;
+}
+
+/* Place for additional global styles */
+body {
+    font-family:
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        'Helvetica Neue',
+        Arial,
+        sans-serif;
+    background: var(--color-fdk-navy-dark);
+    color: var(--color-text);
+
+    main {
+        background: white;
+    }
+}
+
+* {
+    font-family: inherit;
+}