@altinn/altinn-components 0.4.1 → 0.5.0

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.0",
   "main": "lib/index.ts",
   "description": "Reusable react components",
   "publishConfig": {

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