@altinn/altinn-components 0.2.2 → 0.4.0

package/lib/components/LayoutAction/actionHeader.module.css

@@ -0,0 +1,55 @@
+.header {
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: 0;
+}
+
+.header {
+  background-color: var(--global-base-default);
+  color: white;
+  height: 76px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+}
+
+.header {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: .15s;
+  transform: translateY(0);
+}
+
+.header[aria-hidden="true"] {
+  transform: translateY(-100%);
+}
+
+.title {
+  font-size: 1rem;
+  font-weight: normal;
+}
+
+.button {
+  border: 1px solid #fff;
+  width: 2.75rem;
+  height: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+}
+
+.button:hover {
+  background-color: var(--global-base-hover);
+}
+
+.icon {
+  font-size: 1.5rem;
+}

package/lib/components/LayoutAction/actionMenu.module.css

@@ -0,0 +1,25 @@
+.menu {
+  background-color: var(--global-base-default);
+  color: white;
+  padding: 0 .5rem;
+  border-radius: 0.375rem;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+}
+
+@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);
+}

package/lib/components/LayoutAction/index.ts

@@ -0,0 +1,3 @@
+export * from './ActionHeader.tsx';
+export * from './ActionFooter.tsx';
+export * from './ActionMenu.tsx';

package/lib/components/Menu/MenuBase.tsx

@@ -1,16 +1,18 @@
+import cx from 'classnames';
 import type { ElementType, ReactNode } from 'react';
 import styles from './menu.module.css';
 
 export interface MenuBaseProps {
   as?: ElementType;
   theme?: string;
+  className?: string;
   children?: ReactNode;
 }
 
-export const MenuBase = ({ as = 'nav', theme, children }: MenuBaseProps) => {
+export const MenuBase = ({ as = 'nav', theme, className, children }: MenuBaseProps) => {
   const Component = as;
   return (
-    <Component className={styles.menu} data-theme={theme}>
+    <Component className={cx(styles.menu, className)} data-theme={theme}>
       {children}
     </Component>
   );

package/lib/components/Menu/MenuItemBase.tsx

@@ -54,9 +54,11 @@ export const MenuItemBase = ({
         {children}
         {badge && <Badge {...badge} />}
       </div>
-      <div className={styles.action}>
-        {applicableIcon && <Icon name={applicableIcon} className={styles.actionIcon} />}
-      </div>
+      {applicableIcon && (
+        <div className={styles.action}>
+          {applicableIcon && <Icon name={applicableIcon} className={styles.actionIcon} />}
+        </div>
+      )}
     </Component>
   );
 };

package/lib/components/RootProvider/RootProvider.tsx

@@ -0,0 +1,19 @@
+import { type ReactNode, createContext } from 'react';
+
+interface RootContextProvider {
+  showBackdrop: boolean;
+}
+
+const initialValue = {
+  showBackdrop: false,
+};
+const RootContext = createContext<RootContextProvider>(initialValue);
+
+interface ProviderProps {
+  children: ReactNode;
+  value?: RootContextProvider;
+}
+
+export const RootProvider = ({ children, value }: ProviderProps) => {
+  return <RootContext.Provider value={value ?? initialValue}>{children}</RootContext.Provider>;
+};

package/lib/components/RootProvider/index.ts

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

package/lib/components/Snackbar/Snackbar.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Snackbar } from './Snackbar';
+
+const meta = {
+  title: 'Snackbar/Snackbar',
+  component: Snackbar,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    id: 'id',
+    icon: 'bell',
+    message: 'Message',
+  },
+} satisfies Meta<typeof Snackbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/Snackbar/Snackbar.tsx

@@ -0,0 +1,32 @@
+import type { ElementType } from 'react';
+import type { IconName } from '../Icon';
+import { SnackbarBase, type SnackbarColor } from './SnackbarBase';
+import { SnackbarLabel } from './SnackbarLabel';
+import { SnackbarMedia } from './SnackbarMedia';
+
+export interface SnackbarProps {
+  id: string;
+  /** Element type to render */
+  as?: ElementType;
+  /** Color */
+  color?: SnackbarColor;
+  /** Message */
+  message?: string;
+  /** Icon */
+  icon?: IconName;
+  /** Dismissable */
+  dismissable?: boolean;
+  /** onDismiss */
+  onDismiss?: () => void;
+  /** Optional classname */
+  className?: string;
+}
+
+export const Snackbar = ({ as = 'a', color, message, icon, ...rest }: SnackbarProps) => {
+  return (
+    <SnackbarBase as={as} color={color} {...rest}>
+      <SnackbarMedia icon={icon} />
+      <SnackbarLabel>{message}</SnackbarLabel>
+    </SnackbarBase>
+  );
+};

package/lib/components/Snackbar/SnackbarBase.tsx

@@ -0,0 +1,39 @@
+import cx from 'classnames';
+import type { ElementType, ReactNode } from 'react';
+import { IconButton } from '../Button';
+import styles from './snackbarBase.module.css';
+
+export type SnackbarColor = 'default' | 'accent';
+
+interface SnackbarBaseProps {
+  as?: ElementType;
+  color?: SnackbarColor;
+  href?: string;
+  className?: string;
+  dismissable?: boolean;
+  onDismiss?: () => void;
+  children?: ReactNode;
+}
+
+export const SnackbarBase = ({
+  as,
+  children,
+  className,
+  color,
+  dismissable = true,
+  onDismiss,
+  ...rest
+}: SnackbarBaseProps) => {
+  const Component = as || 'div';
+
+  return (
+    <Component className={cx(styles.item, className)} data-color={color} {...rest}>
+      <div className={styles.content}>{children}</div>
+      {dismissable && (
+        <div className={styles.action}>
+          <IconButton icon="x-mark" variant="text" onClick={onDismiss} className={styles.dismiss} />
+        </div>
+      )}
+    </Component>
+  );
+};

package/lib/components/Snackbar/SnackbarLabel.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import styles from './snackbarLabel.module.css';
+
+export interface SnackbarLabelProps {
+  children?: ReactNode;
+}
+
+export const SnackbarLabel = ({ children }: SnackbarLabelProps) => {
+  return <span className={styles.label}>{children}</span>;
+};

package/lib/components/Snackbar/SnackbarMedia.tsx

@@ -0,0 +1,14 @@
+import { Icon, type IconName } from '../Icon';
+import styles from './snackbarMedia.module.css';
+
+interface SnackbarMediaProps {
+  icon?: IconName;
+}
+
+export const SnackbarMedia = ({ icon = 'bell' }: SnackbarMediaProps) => {
+  return (
+    <div className={styles.media}>
+      <Icon name={icon} variant="solid" className={styles.icon} />
+    </div>
+  );
+};

package/lib/components/Snackbar/index.ts

@@ -0,0 +1,4 @@
+export * from './Snackbar';
+export * from './SnackbarBase';
+export * from './SnackbarMedia';
+export * from './SnackbarLabel';

package/lib/components/Snackbar/snackbarBase.module.css

@@ -0,0 +1,55 @@
+.item {
+  border: none;
+
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+
+  line-height: normal;
+
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+
+  user-select: none;
+
+  border-radius: 0.5rem;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+}
+
+.content {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin: 0.625rem;
+}
+
+.action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin: 0.625rem;
+}
+
+/* colors */
+
+.item {
+  background-color: var(--global-base-default);
+  color: #fff;
+  box-shadow: var(--ds-shadow-xs);
+}
+
+.item[data-color="accent"] {
+  background-color: var(--theme-surface-default);
+}
+
+.item[data-color="accent"]:hover {
+  background-color: var(--theme-surface-hover);
+}

package/lib/components/Snackbar/snackbarLabel.module.css

@@ -0,0 +1,6 @@
+/* label */
+
+.label {
+  display: flex;
+  justify-content: center;
+}

package/lib/components/Snackbar/snackbarMedia.module.css

@@ -0,0 +1,10 @@
+.media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  font-size: 1.5rem;
+  margin: 0.625rem;
+}

package/lib/components/Toolbar/ToolbarAdd.stories.ts

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
 import { ToolbarAdd } from './ToolbarAdd';
 
 const meta = {

package/lib/components/Toolbar/ToolbarFilter.stories.ts

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
 import { ToolbarFilter } from './ToolbarFilter';
 
 const meta = {

package/lib/components/index.ts

@@ -1,9 +1,13 @@
 export * from './Attachment';
 export * from './Avatar';
 export * from './Badge';
+export * from './LayoutAction';
 export * from './Button';
 export * from './ContextMenu';
 export * from './Dialog';
+export * from './Dropdown';
+export * from './Footer';
+export * from './GlobalMenu';
 export * from './Header';
 export * from './History';
 export * from './Icon';
@@ -11,5 +15,6 @@ export * from './Layout';
 export * from './List';
 export * from './Menu';
 export * from './Meta';
+export * from './Snackbar';
 export * from './Toolbar';
 export * from './Typography';

package/package.json

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

package/lib/components/Layout/Layout.stories.ts

@@ -1,124 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import type { MenuProps } from '../Menu';
-import { Layout } from './Layout';
-
-const menu: MenuProps = {
-  groups: {},
-  items: [
-    {
-      id: '1',
-      group: 1,
-      size: 'lg',
-      icon: 'inbox',
-      title: 'Innboks',
-    },
-    {
-      id: '2',
-      group: 2,
-      icon: 'doc-pencil',
-      title: 'Utkast',
-    },
-    {
-      id: '3',
-      group: 2,
-      icon: 'file-checkmark',
-      selected: true,
-      title: 'Sendt',
-    },
-    {
-      id: '4',
-      group: 3,
-      icon: 'bookmark',
-      title: 'Lagrede søk',
-    },
-    {
-      id: '5',
-      group: 4,
-      icon: 'archive',
-      title: 'Arkivert',
-    },
-    {
-      id: '6',
-      group: 4,
-      disabled: true,
-      icon: 'trash',
-      title: 'Papirkurv',
-    },
-  ],
-};
-
-const meta = {
-  title: 'Layout/Layout',
-  component: Layout,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    header: {
-      menu: {
-        search: {
-          name: 'search',
-          placeholder: 'Søk i Altinn',
-        },
-        accounts: [
-          {
-            type: 'person',
-            name: 'Aurora Mikalsen',
-            selected: true,
-          },
-        ],
-      },
-    },
-    sidebar: {
-      menu,
-    },
-  },
-} satisfies Meta<typeof Layout>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const GlobalCompany: Story = {
-  args: {
-    sidebar: {
-      menu: {
-        ...menu,
-        defaultItemColor: 'company',
-      },
-    },
-  },
-};
-
-export const GlobalPerson: Story = {
-  args: {
-    sidebar: {
-      menu: {
-        ...menu,
-        defaultItemColor: 'person',
-      },
-    },
-  },
-};
-
-export const Neutral: Story = {
-  args: {
-    theme: 'neutral',
-  },
-};
-
-export const Company: Story = {
-  args: {
-    theme: 'company',
-  },
-};
-
-export const Person: Story = {
-  args: {
-    theme: 'person',
-  },
-};

package/lib/components/Layout/layout.module.css

@@ -1,63 +0,0 @@
-.base {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-/* theme */
-
-.base[data-theme="global"] {
-  background-color: var(--neutral-background-default);
-}
-
-.base[data-theme="neutral"] {
-  background-color: var(--neutral-background-subtle);
-}
-
-.base[data-theme="person"] {
-  background-color: var(--person-background-subtle);
-}
-
-.base[data-theme="company"] {
-  background-color: var(--company-background-subtle);
-}
-
-/* body (sidebar + content ) */
-
-.body {
-  flex-grow: 1;
-  width: 100%;
-  max-width: 1280px;
-  margin: 0 auto;
-  display: flex;
-  column-gap: 2em;
-}
-
-@media (min-width: 1024px) {
-  .body {
-    padding: 0 1rem;
-  }
-}
-
-.content {
-  flex-grow: 1;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.sidebar {
-  display: none;
-}
-
-@media (min-width: 1024px) {
-  .sidebar {
-    display: none;
-    width: 224px;
-  }
-
-  .sidebar[aria-expanded="true"] {
-    display: flex;
-    flex-direction: column;
-  }
-}