@altinn/altinn-components 0.0.1

package/lib/components/Header/globalMenu.module.css

@@ -0,0 +1,28 @@
+.button {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown {
+  display: none;
+}
+
+.header {
+  margin: 0.5rem 0;
+}
+
+.dropdown[aria-expanded="true"] {
+  display: block;
+  position: absolute;
+  min-width: 256px;
+  right: 0;
+  z-index: 2;
+}
+
+.dropdown {
+  margin-top: 0.5rem;
+  padding: 0 0.5rem;
+  background-color: var(--neutral-background-default);
+  border-radius: 2px;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}

package/lib/components/Header/header.module.css

@@ -0,0 +1,39 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+/* color */
+
+.header[data-color="light"] {
+  background-color: var(--global-background-default);
+}
+
+.header[data-color="dark"] {
+  background-color: var(--global-base-default);
+  color: #fff;
+}
+
+/* search */
+
+.search {
+  width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .search {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    max-width: 320px;
+  }
+
+  .search[aria-expanded="true"] {
+    max-width: 640px;
+  }
+}

package/lib/components/Header/headerButton.module.css

@@ -0,0 +1,35 @@
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  column-gap: 0.625rem;
+  background-color: var(--global-base-default);
+  color: white;
+  padding: 0.625rem;
+  border-radius: 4px;
+}
+
+.label {
+  font-size: 1.125rem;
+  font-weight: 500;
+  padding: 0.25rem;
+}
+
+.icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  font-size: 1.5rem;
+}
+
+.loginIcon {
+  background-color: white;
+  color: black;
+}
+
+.closeIcon {
+  border: 1px solid white;
+}

package/lib/components/Header/headerLogo.module.css

@@ -0,0 +1,24 @@
+.logo {
+  display: flex;
+  align-items: center;
+  color: currentColor;
+  text-decoration: none;
+}
+
+.symbol {
+  width: 2rem;
+  height: 2rem;
+  margin: 6px;
+}
+
+.riksSymbol {
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0;
+}
+
+.text {
+  font-size: 1.5rem;
+  font-weight: 500;
+  padding: 4px;
+}

package/lib/components/Header/headerSearch.module.css

@@ -0,0 +1,30 @@
+.field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: 1.125rem;
+  color: currentColor;
+}
+
+.input {
+  font-size: inherit;
+  flex-grow: 1;
+  padding-left: 2.5rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-radius: 4px;
+  border: 2px solid;
+  background-color: transparent;
+}
+
+.input[value] {
+  background-color: white;
+}
+
+.icon {
+  position: absolute;
+  left: 0;
+  font-size: 1.25rem;
+  margin: 0 1rem;
+}

package/lib/components/Header/index.tsx

@@ -0,0 +1,5 @@
+export * from './Header';
+export * from './HeaderBase';
+export * from './HeaderLogo';
+export * from './HeaderButton';
+export * from './GlobalMenu.tsx';

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CheckboxIcon } from './CheckboxIcon';
+
+const meta = {
+  title: 'Atoms/Icon/CheckboxIcon',
+  component: CheckboxIcon,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta<typeof CheckboxIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    checked: false,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+};

package/lib/components/Icon/CheckboxIcon.tsx

@@ -0,0 +1,29 @@
+import cx from 'classnames';
+import styles from './checkboxIcon.module.css';
+
+export type CheckboxIconProps = {
+  checked: boolean;
+  title?: string;
+  className?: string;
+};
+
+/**
+ * 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>
+  );
+};

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from './Icon';
+import { iconsMap } from './iconsMap';
+
+const meta = {
+  title: 'Atoms/Icon/Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  parameters: {},
+  argTypes: {
+    name: Object.keys(iconsMap),
+  },
+  args: {
+    name: 'inbox',
+    variant: 'outline',
+  },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/Icon/Icon.tsx

@@ -0,0 +1,23 @@
+import cx from 'classnames';
+import { type IconName, iconsMap } from './';
+import { SvgIcon } from './SvgIcon';
+import styles from './icon.module.css';
+
+export type IconVariant = 'solid' | 'outline';
+
+interface IconProps {
+  name: IconName;
+  variant?: IconVariant;
+  className?: string;
+}
+
+export const Icon = ({ name, variant = 'outline', className }: IconProps) => {
+  const svgIcon: JSX.Element | undefined =
+    (iconsMap[name] as { [key in IconVariant]: JSX.Element })?.[variant] ?? iconsMap[name]?.outline;
+
+  if (!svgIcon) {
+    return <span className={cx([styles.icon], className)} />;
+  }
+
+  return <SvgIcon svgIconComponent={svgIcon} className={cx([styles.icon], className)} />;
+};

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RadioIcon } from './RadioIcon';
+
+const meta = {
+  title: 'Atoms/Icon/RadioIcon',
+  component: RadioIcon,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta<typeof RadioIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    checked: false,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+};

package/lib/components/Icon/RadioIcon.tsx

@@ -0,0 +1,29 @@
+import cx from 'classnames';
+import styles from './radioIcon.module.css';
+
+export type RadioIconProps = {
+  checked: boolean;
+  title?: string;
+  className?: string;
+};
+
+/**
+ * Radio icon 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>
+  );
+};

package/lib/components/Icon/SvgIcon.tsx

@@ -0,0 +1,18 @@
+import type { SVGAttributes } from 'react';
+import { cloneElement, isValidElement } from 'react';
+import type React from 'react';
+
+export type IconComponentProps = {
+  svgIconComponent: React.ReactNode;
+};
+
+export type SvgIconProps = IconComponentProps & SVGAttributes<SVGElement>;
+
+export const SvgIcon = ({ svgIconComponent, ...rest }: SvgIconProps) => {
+  if (isValidElement(svgIconComponent)) {
+    return cloneElement(svgIconComponent, { ...rest });
+  }
+  return null;
+};
+
+SvgIcon.displayName = 'SvgIcon';

package/lib/components/Icon/__AkselIcon.tsx

@@ -0,0 +1,37 @@
+import * as AkselIcons from '@navikt/aksel-icons';
+
+const convertName = (str: string) => str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+
+export const Icon = ({ name = 'inbox' }: { name: string; variant: 'solid' | 'outline' }) => {
+  const byIcon = [];
+  const byName = {};
+
+  const addRef = ({ name, type, key: string }: { name: string; type: 'solid' | 'outline'; key: string }) => {
+    const icon = `<${string} />`;
+    if (!byName[name]) {
+      byName[name] = {};
+    }
+
+    byName[name] = {
+      ...byName[name],
+      [type]: icon,
+    };
+  };
+
+  Object.entries(AkselIcons).map(([key]) => {
+    const iconName = convertName(key).substring(1);
+    let name: string;
+
+    if (iconName.includes('-fill-icon')) {
+      name = iconName.replace('-fill-icon', '');
+      addRef({ name, type: 'solid', key });
+    } else if (iconName.includes('-icon')) {
+      name = iconName.replace('-icon', '');
+      addRef({ name, type: 'outline', key });
+    }
+
+    byIcon.push(key);
+  });
+
+  return JSON.stringify(byName);
+};

package/lib/components/Icon/checkboxIcon.module.css

@@ -0,0 +1,21 @@
+.checkbox {
+  font-size: 1rem;
+  border: 2px solid;
+  border-radius: 2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--theme-base-default);
+  height: 1em;
+  width: 1em;
+}
+
+.checkbox[data-checked="true"] {
+  border-color: var(--theme-base-default);
+  background-color: var(--theme-base-default);
+  color: var(--theme-background-subtle);
+}
+
+.checkbox > svg {
+  stroke: currentColor;
+}

package/lib/components/Icon/icon.module.css

@@ -0,0 +1,4 @@
+.icon {
+  height: 1em;
+  width: 1em;
+}