@altinn/altinn-components 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.4.0](https://github.com/Altinn/altinn-components/compare/v0.3.0...v0.4.0) (2024-11-08)
+
+
+### Features
+
+* add footer component ([#40](https://github.com/Altinn/altinn-components/issues/40)) ([bdf5c0c](https://github.com/Altinn/altinn-components/commit/bdf5c0cd68c374ac5fe83536033074289f379abe))
+
 ## [0.3.0](https://github.com/Altinn/altinn-components/compare/v0.2.2...v0.3.0) (2024-11-08)
 
 

package/lib/components/Footer/Footer.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Footer } from './Footer';
+
+const meta = {
+  title: 'Footer/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    address: 'Postboks 1382 Vika, 0114 Oslo.',
+    menu: {
+      items: [
+        {
+          id: '1',
+          title: 'Om Altinn',
+        },
+        {
+          id: '2',
+          title: 'Driftsmeldinger',
+        },
+        {
+          id: '3',
+          title: 'Personvern',
+        },
+        {
+          id: '4',
+          title: 'Tilgjengelighet',
+        },
+      ],
+    },
+  },
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/lib/components/Footer/Footer.tsx

@@ -0,0 +1,21 @@
+import { FooterAddress } from './FooterAddress';
+import { FooterBase } from './FooterBase';
+import { FooterLogo } from './FooterLogo';
+import { FooterMenu, type FooterMenuProps } from './FooterMenu';
+
+export interface FooterProps {
+  address: string;
+  menu: FooterMenuProps;
+}
+
+export const Footer = ({ address, menu }: FooterProps) => {
+  return (
+    <FooterBase>
+      <FooterAddress>
+        <FooterLogo />
+        {address}
+      </FooterAddress>
+      <FooterMenu {...menu} />
+    </FooterBase>
+  );
+};

package/lib/components/Footer/FooterAddress.tsx

@@ -0,0 +1,12 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './footerAddress.module.css';
+
+export interface FooterAddressProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const FooterAddress = ({ className, children }: FooterAddressProps) => {
+  return <address className={cx(styles.address, className)}>{children}</address>;
+};

package/lib/components/Footer/FooterBase.tsx

@@ -0,0 +1,16 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './footerBase.module.css';
+
+export interface FooterBaseProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const FooterBase = ({ className, children }: FooterBaseProps) => {
+  return (
+    <footer className={cx(styles.footer, className)}>
+      <div className={styles.grid}>{children} </div>
+    </footer>
+  );
+};

package/lib/components/Footer/FooterLogo.tsx

@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import { DigdirLogomark } from '../Header/DigdirLogomark.tsx';
+import styles from './footerLogo.module.css';
+
+export interface FooterLogoProps {
+  className?: string;
+  title?: string;
+}
+
+export const FooterLogo = ({ className, title = 'Digdir' }: FooterLogoProps) => {
+  return (
+    <div className={cx(styles.logo, className)}>
+      <DigdirLogomark className={styles.symbol} />
+      <span>{title}</span>
+    </div>
+  );
+};

package/lib/components/Footer/FooterMenu.tsx

@@ -0,0 +1,43 @@
+import cx from 'classnames';
+import type { ElementType } from 'react';
+import { MenuBase } from '../Menu/';
+import styles from './footerMenu.module.css';
+
+export interface FooterMenuProps {
+  className?: string;
+  items: FooterLinkProps[];
+}
+
+export interface FooterLinkProps {
+  as?: ElementType;
+  id?: string;
+  href?: string;
+  title?: string;
+  className?: string;
+}
+
+export const FooterLink = ({ as, className, title, ...rest }: FooterLinkProps) => {
+  const Component = as || 'a';
+
+  return (
+    <Component className={cx(styles.link, className)} {...rest}>
+      {title}
+    </Component>
+  );
+};
+
+export const FooterMenu = ({ className, items = [] }: FooterMenuProps) => {
+  return (
+    <MenuBase className={cx(styles.menu, className)}>
+      <ul className={styles.list}>
+        {items.map((item) => {
+          return (
+            <li key={item.id}>
+              <FooterLink {...item} />
+            </li>
+          );
+        })}
+      </ul>
+    </MenuBase>
+  );
+};

package/lib/components/Footer/footerAddress.module.css

@@ -0,0 +1,8 @@
+.address {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  font-style: normal;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}

package/lib/components/Footer/footerBase.module.css

@@ -0,0 +1,28 @@
+.footer {
+  border-top: 1px solid;
+  border-color: var(--theme-border-subtle);
+
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+
+  padding: 1rem 0;
+  margin: 2rem 1rem;
+}
+
+.grid {
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  row-gap: 1rem;
+}
+
+@media (min-width: 1024px) {
+  .grid {
+    padding: 0 1rem;
+    flex-direction: row;
+  }
+}

package/lib/components/Footer/footerLogo.module.css

@@ -0,0 +1,12 @@
+.logo {
+  display: inline-flex;
+  align-items: center;
+  column-gap: .5em;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.symbol {
+  width: 1rem;
+  height: 1rem;
+}

package/lib/components/Footer/footerMenu.module.css

@@ -0,0 +1,30 @@
+.menu {
+  position: relative;
+  font-size: .875rem;
+  line-height: 1.5;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+}
+
+@media (min-width: 1024px) {
+  .list {
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    column-gap: .5rem;
+    width: auto;
+  }
+}
+
+.list .item:hover {
+  background-color: var(--global-base-hover);
+}
+
+.link {
+  color: inherit;
+  text-decoration: underline;
+}

package/lib/components/Footer/index.ts

@@ -0,0 +1 @@
+export * from './Footer';

package/lib/components/Layout/Layout.stories.tsx

@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { ActionFooter, ActionHeader, ActionMenu, DialogListItem, ListBase, Snackbar } from '../';
-import type { HeaderProps } from '../Header';
-import type { MenuProps } from '../Menu';
+import type { FooterProps, HeaderProps, MenuProps } from '../';
 import { Layout } from './Layout';
 
 const header: HeaderProps = {
@@ -21,6 +20,34 @@ const header: HeaderProps = {
   },
 };
 
+const footer: FooterProps = {
+  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',
+      },
+    ],
+  },
+};
+
 const menu: MenuProps = {
   groups: {},
   items: [
@@ -76,6 +103,7 @@ const meta = {
   },
   args: {
     header,
+    footer,
     sidebar: {
       menu,
     },

package/lib/components/Layout/Layout.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { LayoutBase, LayoutBody, LayoutContent, LayoutSidebar, type LayoutTheme } from '.';
+import { Footer, type FooterProps } from '../Footer';
 import { Header, type HeaderProps } from '../Header';
 import { Menu, type MenuProps } from '../Menu';
 
@@ -17,12 +18,13 @@ interface ContentProps {
 export interface LayoutProps {
   theme?: LayoutTheme;
   header?: HeaderProps;
+  footer?: FooterProps;
   sidebar: SidebarProps;
   content: ContentProps;
   children: ReactNode;
 }
 
-export const Layout = ({ theme = 'global', header, sidebar = {}, content = {}, children }: LayoutProps) => {
+export const Layout = ({ theme = 'global', header, footer, sidebar = {}, content = {}, children }: LayoutProps) => {
   const { menu, ...sideRestProps } = sidebar;
   return (
     <LayoutBase theme={theme}>
@@ -32,11 +34,11 @@ export const Layout = ({ theme = 'global', header, sidebar = {}, content = {}, c
           <LayoutSidebar hidden={sidebar?.hidden} theme={sidebar?.theme} {...sideRestProps}>
             {menu && <Menu {...menu} />}
             {sidebar?.children}
-            {sidebar?.hidden && 'HIDDEN'}
           </LayoutSidebar>
         )}
         <LayoutContent theme={content?.theme}>{children}</LayoutContent>
       </LayoutBody>
+      {footer && <Footer {...footer} />}
     </LayoutBase>
   );
 };

package/lib/components/index.ts

@@ -6,6 +6,7 @@ export * from './Button';
 export * from './ContextMenu';
 export * from './Dialog';
 export * from './Dropdown';
+export * from './Footer';
 export * from './GlobalMenu';
 export * from './Header';
 export * from './History';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "main": "lib/index.ts",
   "description": "Reusable react components",
   "publishConfig": {