@altinn/altinn-components 0.4.1 → 0.5.1

package/lib/stories/Inbox/layout/footer.ts

@@ -0,0 +1,27 @@
+export const footer = {
+  address: 'Postboks 1382 Vika, 0114 Oslo.',
+  menu: {
+    items: [
+      {
+        id: '1',
+        href: '#',
+        title: 'Om Altinn',
+      },
+      {
+        id: '2',
+        href: '#',
+        title: 'Driftsmeldinger',
+      },
+      {
+        id: '3',
+        href: '#',
+        title: 'Personvern',
+      },
+      {
+        id: '4',
+        href: '#',
+        title: 'Tilgjengelighet',
+      },
+    ],
+  },
+};

package/lib/stories/Inbox/layout/header.ts

@@ -0,0 +1,11 @@
+import { accounts } from '../accounts/';
+
+export const header = {
+  search: {
+    name: 'search',
+    placeholder: 'Søk i innboksen',
+  },
+  menu: {
+    accounts,
+  },
+};

package/lib/stories/Inbox/layout/index.ts

@@ -0,0 +1,3 @@
+export * from './menu';
+export * from './footer';
+export * from './header';

package/lib/stories/Inbox/layout/menu.ts

@@ -0,0 +1,64 @@
+export const menu = {
+  groups: {
+    shortcuts: {
+      title: 'Snarveier',
+      defaultItemColor: 'neutral',
+    },
+  },
+  items: [
+    {
+      id: 'inbox',
+      groupId: 1,
+      size: 'lg',
+      icon: 'inbox',
+      title: 'Innboks',
+      color: 'strong',
+    },
+    {
+      id: 'drafts',
+      groupId: 2,
+      icon: 'doc-pencil',
+      title: 'Utkast',
+    },
+    {
+      id: 'sent',
+      groupId: 2,
+      icon: 'file-checkmark',
+      selected: true,
+      title: 'Sendt',
+    },
+    {
+      id: 'bookmarks',
+      groupId: 3,
+      icon: 'bookmark',
+      //      disabled: true,
+      title: 'Lagrede søk',
+    },
+    {
+      id: 'archived',
+      groupId: 4,
+      disabled: true,
+      icon: 'archive',
+      title: 'Arkivert',
+    },
+    {
+      id: 'trash',
+      groupId: 4,
+      disabled: true,
+      icon: 'trash',
+      title: 'Papirkurv',
+    },
+    {
+      id: 'profile',
+      groupId: 'shortcuts',
+      icon: 'person-circle',
+      title: 'Din profil',
+    },
+    {
+      id: 'settings',
+      groupId: 'shortcuts',
+      icon: 'cog',
+      title: 'Innstillinger',
+    },
+  ],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "main": "lib/index.ts",
   "description": "Reusable react components",
   "publishConfig": {
@@ -16,23 +16,25 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.3",
-    "@chromatic-com/storybook": "^1.9.0",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-onboarding": "^8.3.5",
-    "@storybook/addon-themes": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-a11y": "^8.4.4",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-onboarding": "^8.4.4",
+    "@storybook/addon-themes": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-vite": "^8.4.4",
+    "@storybook/test": "^8.4.4",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.7.1",
+    "axe-core": "^4.10.2",
     "lint-staged": "^15.2.10",
     "prop-types": "^15.8.1",
-    "storybook": "^8.3.5",
-    "storybook-addon-theme-provider": "^0.2.6",
+    "storybook": "^8.4.4",
+    "storybook-addon-theme-provider": "^0.2.8",
     "typescript": "^5.6.3",
     "vite": "^5.4.9"
   },

package/tsconfig.json

@@ -17,7 +17,12 @@
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true
   },
-  "include": ["./lib/**/*.ts", "./lib/**/*.tsx", "./**/*.d.ts"],
-  "exclude": ["./lib/**/*.stories.tsx", "./lib/**/*.stories.ts", "./lib/components/Icon/__AkselIcon.tsx"],
+  "include": ["./lib/**/*.ts", "./lib/hooks/*.tsx", "./**/*.d.ts"],
+  "exclude": [
+    "./lib/stories/**/*",
+    "lib/components/**/*.stories.ts",
+    "lib/components/**/*.stories.tsx",
+    "./lib/components/Icon/__AkselIcon.tsx"
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/lib/components/Header/HeaderSearch.stories.ts

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { HeaderSearch } from './HeaderSearch';
-
-const meta = {
-  title: 'Header/HeaderSearch',
-  component: HeaderSearch,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {},
-} satisfies Meta<typeof HeaderSearch>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Search',
-    name: 'search',
-  },
-};

package/lib/components/Header/HeaderSearch.tsx

@@ -1,44 +0,0 @@
-import cx from 'classnames';
-import type { ChangeEventHandler, FocusEventHandler } from 'react';
-import { Icon } from '../Icon';
-import styles from './headerSearch.module.css';
-
-export interface HeaderSearchProps {
-  className?: string;
-  expanded?: boolean;
-  placeholder?: string;
-  name: string;
-  value?: string;
-  onFocus?: FocusEventHandler;
-  onBlur?: FocusEventHandler;
-  onChange?: ChangeEventHandler;
-}
-
-export const HeaderSearch = ({
-  className,
-  expanded = false,
-  name = 'q',
-  value,
-  placeholder = 'Søk',
-  onFocus,
-  onBlur,
-  onChange,
-}: HeaderSearchProps) => {
-  return (
-    <div className={cx(styles.form, className)} aria-expanded={expanded}>
-      <div className={styles.field}>
-        <input
-          onFocus={onFocus}
-          onBlur={onBlur}
-          name={name}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          className={styles.input}
-          type="search"
-        />
-        <Icon name="magnifying-glass" className={styles.icon} />
-      </div>
-    </div>
-  );
-};

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

@@ -1,30 +0,0 @@
-.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/Menu/MenuGroup.tsx

@@ -1,18 +0,0 @@
-import type { ElementType, ReactNode } from 'react';
-import styles from './menu.module.css';
-
-export interface MenuGroupProps {
-  as?: ElementType;
-  expanded?: boolean;
-  divider?: boolean;
-  children?: ReactNode;
-}
-
-export const MenuGroup = ({ as = 'ul', expanded, divider = true, children }: MenuGroupProps) => {
-  const Component = as;
-  return (
-    <Component aria-expanded={expanded} data-divider={divider} className={styles.group}>
-      {children}
-    </Component>
-  );
-};

package/lib/components/Menu/__menuItem.module.css

@@ -1,130 +0,0 @@
-.item {
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  column-gap: 4px;
-  border: 0;
-  user-select: none;
-  cursor: pointer;
-  margin: 0.5rem 0;
-}
-
-.item[aria-disabled="true"] {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-/* size */
-
-.item[data-size="sm"] {
-  min-height: 44px;
-}
-
-/* content */
-
-.content {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  column-gap: 6px;
-  padding: 6px;
-}
-
-.action {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-}
-
-.actionIcon {
-  font-size: 1.5rem;
-}
-
-.media {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5%;
-  width: 2rem;
-  height: 2rem;
-}
-
-.media[data-size="lg"] {
-  width: 44px;
-  height: 44px;
-}
-
-.icon {
-  font-size: 1.5rem;
-}
-
-/* label */
-
-.label {
-  display: flex;
-  flex-direction: column;
-  padding: 0 0.25rem;
-}
-
-/* title */
-
-.title[data-size="lg"] {
-  font-size: 1.125rem;
-  line-height: 1.25;
-  font-weight: 500;
-}
-
-.title[data-size="sm"] {
-  font-size: 1rem;
-  line-height: 1.25;
-  font-weight: 400;
-}
-
-.description {
-  font-size: 14px;
-  color: var(--theme-text-subtle);
-}
-
-.item:hover {
-  background-color: var(--theme-surface-default);
-}
-
-.item[aria-selected="true"] {
-  background-color: var(--theme-background-default);
-}
-
-.media[data-color="subtle"] {
-  background-color: var(--theme-background-default);
-  color: var(--theme-text-default);
-}
-
-.media[data-color="strong"] {
-  background-color: var(--theme-base-default);
-  color: var(--theme-background-default);
-}
-
-.item[data-color="company"]:hover {
-  background-color: var(--company-background-subtle);
-}
-
-.item[data-color="company"][aria-selected="true"] {
-  background-color: var(--company-surface-default);
-}
-
-.media[data-color="company"] {
-  background-color: var(--company-surface-default);
-}
-
-.item[data-color="person"]:hover {
-  background-color: var(--person-background-subtle);
-}
-
-.item[data-color="person"][aria-selected="true"] {
-  background-color: var(--person-surface-default);
-}
-
-.media[data-color="person"] {
-  background-color: var(--person-surface-default);
-}

package/lib/components/Toolbar/toolbar.module.css

@@ -1,43 +0,0 @@
-.toolbar {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-  gap: 0.5rem;
-  padding: 0 0.5rem;
-  margin: 1.125rem 0;
-}
-
-@media (min-width: 1024px) {
-  .toolbar {
-    padding: 0;
-  }
-}
-
-/* TIDI; move styles below */
-
-.button {
-  display: inline-block;
-}
-
-.remove-button > button:hover + * + * {
-  text-decoration: line-through;
-}
-
-.dropdown {
-  display: none;
-}
-
-.dropdown[aria-expanded="true"] {
-  display: block;
-  position: absolute;
-  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);
-}