@fellesdatakatalog/ui 1.0.15 → 1.0.16

package/src/components/core/reset.css

@@ -0,0 +1,131 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+    v2.0 | 20110126
+    License: none (public domain)
+  */
+
+/* This is file is used to neutrilize default css properties defined by the browsers (or other parties) */
+@layer reset {
+    html,
+    body,
+    div,
+    span,
+    applet,
+    object,
+    iframe,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    blockquote,
+    pre,
+    a,
+    abbr,
+    acronym,
+    address,
+    big,
+    cite,
+    code,
+    del,
+    dfn,
+    em,
+    img,
+    ins,
+    kbd,
+    q,
+    s,
+    samp,
+    small,
+    strike,
+    strong,
+    sub,
+    sup,
+    tt,
+    var,
+    b,
+    u,
+    i,
+    center,
+    dl,
+    dt,
+    dd,
+    ol,
+    ul,
+    li,
+    fieldset,
+    form,
+    label,
+    legend,
+    table,
+    caption,
+    tbody,
+    tfoot,
+    thead,
+    tr,
+    th,
+    td,
+    article,
+    aside,
+    canvas,
+    details,
+    embed,
+    figure,
+    figcaption,
+    footer,
+    header,
+    hgroup,
+    menu,
+    nav,
+    output,
+    ruby,
+    section,
+    summary,
+    time,
+    mark,
+    audio,
+    video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: inherit;
+        vertical-align: baseline;
+    }
+    /* HTML5 display-role reset for older browsers */
+    article,
+    aside,
+    details,
+    figcaption,
+    figure,
+    footer,
+    header,
+    hgroup,
+    menu,
+    nav,
+    section {
+        display: block;
+    }
+    body {
+        line-height: 1.5rem;
+    }
+    ol,
+    ul {
+        list-style: none;
+    }
+    blockquote,
+    q {
+        quotes: none;
+    }
+    blockquote:before,
+    blockquote:after,
+    q:before,
+    q:after {
+        content: '';
+        content: none;
+    }
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+}

package/src/components/core/tokens.scss

@@ -0,0 +1,26 @@
+@import './reset.css';
+@import '@digdir/designsystemet-css';
+@import '@digdir/designsystemet-theme';
+@import './ds-overrides.scss';
+
+:root {
+    // Colors
+    --fdk-color-navy: #1e2b3c;
+    --fdk-color-navy-dark: color-mix(in srgb, var(--fdk-color-navy), #000 60%);
+    --fdk-color-blue-lightest: #ddeaf6;
+    --fdk-color-blue-light: #1e98f5;
+    --fdk-color-blue: #0062ba;
+    --fdk-color-blue-dark: #004f96;
+    --fdk-color-cyan: #8eaacb;
+    --fdk-color-orange: var(--ds-color-brand2-base-default);
+    --fdk-color-red: #b81a1a;
+
+    // Other variables
+    --fdk-color-interactive: var(--fdk-color-blue);
+    --fdk-color-interactive-negative: var(--fdk-color-cyan);
+    --fdk-color-text: var(--fdk-color-navy);
+    --fdk-color-text-negative: white;
+    --fdk-color-link: var(--fdk-color-interactive);
+    --fdk-color-link-negative: var(--fdk-color-interactive-negative);
+    --custom-helptext-size: 1.25rem;
+}

package/src/components/helptext/helptext.module.scss

@@ -0,0 +1,46 @@
+.helptext {
+    --dsc-helptext-icon-size: 65%;
+    --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    --dsc-helptext-size: var(--custom-helptext-size, var(--ds-size-7));
+  
+    border-radius: var(--ds-border-radius-full);
+    border: max(1px, calc(var(--ds-size-1) / 2)) solid; /* Allow border-width to grow with font-size */
+    box-sizing: border-box;
+    height: var(--dsc-helptext-size);
+    min-height: 0;
+    min-width: 0;
+    padding: 0;
+    position: relative;
+    width: var(--dsc-helptext-size);
+  
+    @media (forced-colors: active) {
+      color: ButtonText;
+    }
+  
+    &::before {
+      content: '';
+      border-radius: inherit;
+      background: currentcolor;
+      mask-composite: exclude;
+      mask-image: var(--dsc-helptext-icon-url);
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size), cover;
+      scale: 1.1; /* Hide tiny half pixel rendeing bug */
+      width: 100%;
+      height: 100%;
+  
+      @media (forced-colors: active) {
+        background: ButtonText;
+      }
+    }
+  
+    &:has(+ :popover-open)::before {
+      mask-image: var(--dsc-helptext-icon-url), linear-gradient(currentcolor, currentcolor); /* Cut icon out of currentcolor surface */
+    }
+  
+    @media print {
+      display: none;
+    }
+  }
+  

package/src/components/helptext/helptext.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HelpText } from '.';
+
+const meta: Meta<typeof HelpText> = {
+    component: HelpText,
+    title: 'HelpText',
+    parameters: {
+        docs: {
+            description: {
+                component: 'A help text component that displays additional information in a popover when clicked.',
+            },
+        },
+    },
+    argTypes: {
+        placement: {
+            control: 'select',
+            options: ['right', 'bottom', 'left', 'top'],
+            description: 'Placement of the popover',
+        },
+        'aria-label': {
+            control: 'text',
+            description: 'Required descriptive label for screen readers',
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof HelpText>;
+
+export const Default: Story = {
+    args: {
+        'aria-label': 'Help information',
+        placement: 'right',
+        children: 'This is helpful information that appears when you click the help icon.',
+    },
+    render: (args) => (
+        <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            <HelpText {...args} />
+        </div>
+    ),
+};

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}
+      />
+    );
+  },
+};
+