@norges-domstoler/dds-components 13.6.2 → 13.6.4

package/dist/components/AppShell/AppShell.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren, ReactElement } from 'react';
+export type AppShellProps = PropsWithChildren<{
+    /**Versjon på appen på formatet 0.0.0 */
+    version?: string;
+    navigation: AppShellNavigationProps;
+}>;
+export type AppShellNavigationProps = {
+    /**Interne lenker i navigasjonen. */
+    internal?: ReactElement[];
+    /**Eksterne lenker i navigasjonen. */
+    external?: ReactElement[];
+};
+export declare const AppShell: ({ children, version, navigation: { internal, external }, }: AppShellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AppShell/AppShell.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { appShellTokens } from './AppShell.tokens.js';
+import { Navigation } from './Navigation/Navigation.js';
+
+var AppShellContainer = styled.div.withConfig({
+  displayName: "AppShell__AppShellContainer",
+  componentId: "sc-1c8yu5p-0"
+})(["display:flex;flex-direction:row;"]);
+var MainContent = styled.main.withConfig({
+  displayName: "AppShell__MainContent",
+  componentId: "sc-1c8yu5p-1"
+})(["min-width:calc(100vw - ", ");max-width:calc(100vw - ", ");"], appShellTokens.navigation.width, appShellTokens.navigation.width);
+var AppShell = function AppShell(_ref) {
+  var children = _ref.children,
+    _ref$version = _ref.version,
+    version = _ref$version === void 0 ? '' : _ref$version,
+    _ref$navigation = _ref.navigation,
+    _ref$navigation$inter = _ref$navigation.internal,
+    internal = _ref$navigation$inter === void 0 ? [] : _ref$navigation$inter,
+    _ref$navigation$exter = _ref$navigation.external,
+    external = _ref$navigation$exter === void 0 ? [] : _ref$navigation$exter;
+  return jsxs(AppShellContainer, {
+    children: [jsx(Navigation, {
+      version: version,
+      internal: internal,
+      external: external
+    }), jsx(MainContent, {
+      children: children
+    })]
+  });
+};
+
+export { AppShell };

package/dist/components/AppShell/AppShell.stories.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps } from 'react';
+import { AppShell } from '.';
+declare const _default: {
+    title: string;
+    component: (({ children, version, navigation: { internal, external }, }: import("./AppShell").AppShellProps) => import("react/jsx-runtime").JSX.Element) & {
+        NavItem: {
+            <T extends import("@norges-domstoler/dds-core").As = "a">({ as: _as, active, icon, external, children, ...rest }: import("react").PropsWithoutRef<ComponentProps<T>> & {
+                as?: T | undefined;
+            } & ({
+                icon: import("@norges-domstoler/dds-icons").SvgIcon;
+                active?: boolean | undefined;
+                external?: false | undefined;
+            } | {
+                external: true;
+                active?: false | undefined;
+                icon?: undefined;
+            })): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: ComponentProps<typeof AppShell>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AppShell/AppShell.tokens.d.ts

@@ -0,0 +1,68 @@
+export declare const appShellTokens: {
+    navigation: {
+        navigationItems: {
+            gap: string;
+            item: {
+                color: string;
+                borderRadius: string;
+                padding: string;
+                gap: string;
+                external: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                hover: {
+                    backgroundColor: string;
+                };
+                active: {
+                    color: string;
+                    backgroundColor: string;
+                };
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+        };
+        logoAndVersion: {
+            padding: string;
+            color: string;
+            logo: {
+                fontWeight: number;
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontStyle: any;
+            };
+            version: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+        };
+        color: string;
+        backgroundColor: string;
+        gap: string;
+        dividerColor: string;
+        padding: string;
+        width: string;
+        mobile: {
+            iconColors: string;
+        };
+    };
+    floatingActionButtons: {
+        gap: string;
+        textColor: string;
+        backgroundColor: string;
+    };
+};

package/dist/components/AppShell/AppShell.tokens.js

@@ -0,0 +1,55 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var colors = ddsBaseTokens.colors,
+  spacing = ddsBaseTokens.spacing,
+  fontPackages = ddsBaseTokens.fontPackages,
+  borderRadius = ddsBaseTokens.borderRadius;
+var navigationItems = {
+  gap: spacing.SizesDdsSpacingLocalX05,
+  item: Object.assign(Object.assign({}, fontPackages.body_sans_02.base), {
+    color: colors.DdsColorNeutralsGray1,
+    borderRadius: borderRadius.RadiiDdsBorderRadius3Radius,
+    padding: spacing.SizesDdsSpacingLocalX075,
+    gap: spacing.SizesDdsSpacingLocalX05,
+    external: Object.assign({}, fontPackages.body_sans_01.base),
+    hover: {
+      backgroundColor: colors.DdsColorPrimaryDark
+    },
+    active: {
+      color: colors.DdsColorNeutralsWhite,
+      backgroundColor: colors.DdsColorPrimaryDarker
+    }
+  })
+};
+var logoAndVersion = {
+  padding: '36px 24px',
+  color: colors.DdsColorNeutralsWhite,
+  logo: Object.assign(Object.assign({}, fontPackages.heading_sans_05.base), {
+    fontWeight: 700
+  }),
+  version: Object.assign({}, fontPackages.supportingStyle_tiny_01.base)
+};
+var navigation = {
+  navigationItems: navigationItems,
+  logoAndVersion: logoAndVersion,
+  color: colors.DdsColorNeutralsGray1,
+  backgroundColor: colors.DdsColorPrimaryBase,
+  gap: spacing.SizesDdsSpacingLocalX05,
+  dividerColor: colors.DdsColorPrimaryLight,
+  padding: spacing.SizesDdsSpacingLocalX1,
+  width: '264px',
+  mobile: {
+    iconColors: colors.DdsColorNeutralsGray3
+  }
+};
+var floatingActionButtons = {
+  gap: spacing.SizesDdsSpacingLocalX1,
+  textColor: colors.DdsColorNeutralsGray7,
+  backgroundColor: colors.DdsColorPrimaryDarker
+};
+var appShellTokens = {
+  navigation: navigation,
+  floatingActionButtons: floatingActionButtons
+};
+
+export { appShellTokens };

package/dist/components/AppShell/Navigation/Navigation.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+export declare const NavigationItems: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export type NavigationProps = {
+    version: string;
+    internal: ReactElement[];
+    external: ReactElement[];
+};
+export declare const Navigation: ({ version, internal, external, }: NavigationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AppShell/Navigation/Navigation.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Children } from 'react';
+import styled from 'styled-components';
+import { appShellTokens } from '../AppShell.tokens.js';
+import { Divider } from '../../Divider/Divider.js';
+import { NavigationItem } from './NavigationItem.js';
+
+var navTokens = appShellTokens.navigation;
+var Sidebar = styled.div.withConfig({
+  displayName: "Navigation__Sidebar",
+  componentId: "sc-twhp5c-0"
+})(["display:flex;flex-direction:column;height:100vh;width:", ";padding:", ";color:", ";background-color:", ";box-sizing:border-box;position:sticky;top:0;left:0;"], navTokens.width, navTokens.padding, navTokens.color, navTokens.backgroundColor);
+var LogoAndVersionContainer = styled.div.withConfig({
+  displayName: "Navigation__LogoAndVersionContainer",
+  componentId: "sc-twhp5c-1"
+})(["display:flex;flex-direction:column;color:", ";padding:", ";"], navTokens.logoAndVersion.color, navTokens.logoAndVersion.padding);
+var Logo = styled.a.withConfig({
+  displayName: "Navigation__Logo",
+  componentId: "sc-twhp5c-2"
+})(["font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";text-align:middle;"], navTokens.logoAndVersion.logo.fontSize, navTokens.logoAndVersion.logo.fontStyle, navTokens.logoAndVersion.logo.fontFamily, navTokens.logoAndVersion.logo.fontWeight, navTokens.logoAndVersion.logo.lineHeight, navTokens.logoAndVersion.logo.letterSpacing);
+var Version = styled.span.withConfig({
+  displayName: "Navigation__Version",
+  componentId: "sc-twhp5c-3"
+})(["font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";"], navTokens.logoAndVersion.version.fontSize, navTokens.logoAndVersion.version.fontStyle, navTokens.logoAndVersion.version.fontFamily, navTokens.logoAndVersion.version.fontWeight, navTokens.logoAndVersion.version.lineHeight, navTokens.logoAndVersion.version.letterSpacing);
+var NavigationItems = styled.nav.withConfig({
+  displayName: "Navigation__NavigationItems",
+  componentId: "sc-twhp5c-4"
+})(["display:flex;flex-direction:column;gap:", ";"], navTokens.navigationItems.gap);
+var DividerWrapper = styled.div.withConfig({
+  displayName: "Navigation__DividerWrapper",
+  componentId: "sc-twhp5c-5"
+})(["padding-left:", ";padding-right:", ";"], navTokens.navigationItems.item.padding, navTokens.navigationItems.item.padding);
+var StyledDivider = styled(Divider).withConfig({
+  displayName: "Navigation__StyledDivider",
+  componentId: "sc-twhp5c-6"
+})(["border-color:", ";"], navTokens.dividerColor);
+var Navigation = function Navigation(_ref) {
+  var version = _ref.version,
+    internal = _ref.internal,
+    external = _ref.external;
+  return jsxs(Sidebar, {
+    children: [jsxs(LogoAndVersionContainer, {
+      children: [jsx(Logo, {
+        children: "Lovisa"
+      }), version !== '' && jsxs(Version, {
+        children: ["v ", version]
+      })]
+    }), jsxs(NavigationItems, {
+      children: [Children.map(internal, function (item) {
+        if (item.type !== NavigationItem) {
+          console.warn("Du bruker en React-komponent som ikke er tillat i AppShell-internal. Du kan kun bruke AppShell.NavItem i AppShell-internal.");
+          return null;
+        }
+        return item;
+      }), external.length > 0 && jsx(DividerWrapper, {
+        children: jsx(StyledDivider, {})
+      }), Children.map(external, function (item) {
+        if (item.type !== NavigationItem) {
+          console.warn('Du bruker en React-komponent som ikke er tillat i AppShell-external. Du kan kun bruke AppShell.NavItem i AppShell-external.');
+          return null;
+        }
+        return item;
+      })]
+    })]
+  });
+};
+
+export { Navigation, NavigationItems };

package/dist/components/AppShell/Navigation/NavigationItem.d.ts

@@ -0,0 +1,17 @@
+import { type PropsOf, type As } from '@norges-domstoler/dds-core';
+import { SvgIcon } from '@norges-domstoler/dds-icons';
+type BaseNavigationItemProps = {
+    icon: SvgIcon;
+    active?: boolean;
+    external?: undefined | false;
+} | {
+    external: true;
+    active?: undefined | false;
+    icon?: undefined;
+};
+type NavigationItemProps<T extends As = 'a'> = PropsOf<T> & BaseNavigationItemProps;
+export declare const NavigationItem: {
+    <T extends As = "a">({ as: _as, active, icon, external, children, ...rest }: NavigationItemProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/AppShell/Navigation/NavigationItem.js

@@ -0,0 +1,70 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Icon, OpenExternalIcon, ChevronRightIcon } from '@norges-domstoler/dds-icons';
+import { appShellTokens } from '../AppShell.tokens.js';
+
+var navTokens = appShellTokens.navigation;
+var navItemTokens = navTokens.navigationItems.item;
+var IconContainer = styled.div.withConfig({
+  displayName: "NavigationItem__IconContainer",
+  componentId: "sc-8k2l5g-0"
+})(["grid-area:icon;display:flex;align-items:center;"]);
+var TextContainer = styled.span.withConfig({
+  displayName: "NavigationItem__TextContainer",
+  componentId: "sc-8k2l5g-1"
+})(["grid-area:text;"]);
+var ChevronContainer = styled.div.withConfig({
+  displayName: "NavigationItem__ChevronContainer",
+  componentId: "sc-8k2l5g-2"
+})(["display:flex;align-items:center;opacity:0;grid-area:chevron;"]);
+var BaseLink = styled.a.withConfig({
+  displayName: "NavigationItem__BaseLink",
+  componentId: "sc-8k2l5g-3"
+})(["padding:", ";gap:", ";border-radius:", ";text-decoration:none;color:", ";font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";:hover:not(.active){background-color:", ";}&.active{color:", ";background-color:", ";}"], navItemTokens.padding, navItemTokens.gap, navItemTokens.borderRadius, navItemTokens.color, navItemTokens.fontSize, navItemTokens.fontStyle, navItemTokens.fontFamily, navItemTokens.fontWeight, navItemTokens.lineHeight, navItemTokens.letterSpacing, navItemTokens.hover.backgroundColor, navItemTokens.active.color, navItemTokens.active.backgroundColor);
+var InternalNavItem = styled(BaseLink).withConfig({
+  displayName: "NavigationItem__InternalNavItem",
+  componentId: "sc-8k2l5g-4"
+})(["display:grid;align-items:center;grid-template-areas:'icon text chevron';grid-template-columns:min-content 1fr min-content;:hover{", "{opacity:1;}}"], ChevronContainer);
+var ExternalNavItem = styled(BaseLink).withConfig({
+  displayName: "NavigationItem__ExternalNavItem",
+  componentId: "sc-8k2l5g-5"
+})(["display:flex;flex-direction:row;align-items:center;font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";"], navItemTokens.external.fontSize, navItemTokens.external.fontStyle, navItemTokens.external.fontFamily, navItemTokens.external.fontWeight, navItemTokens.external.lineHeight, navItemTokens.external.letterSpacing);
+var NavigationItem = function NavigationItem(_a) {
+  var _as = _a.as,
+    active = _a.active,
+    icon = _a.icon,
+    external = _a.external,
+    children = _a.children,
+    rest = __rest(_a, ["as", "active", "icon", "external", "children"]);
+  var Comp = _as !== null && _as !== void 0 ? _as : 'a';
+  if (external) {
+    return jsxs(ExternalNavItem, Object.assign({
+      as: Comp
+    }, rest, {
+      children: [children, jsx(Icon, {
+        icon: OpenExternalIcon,
+        iconSize: "inherit"
+      })]
+    }));
+  }
+  return jsxs(InternalNavItem, Object.assign({
+    as: Comp
+  }, rest, {
+    className: active ? 'active' : '',
+    children: [jsx(IconContainer, {
+      children: icon && jsx(Icon, {
+        icon: icon
+      })
+    }), jsx(TextContainer, {
+      children: children
+    }), jsx(ChevronContainer, {
+      children: jsx(Icon, {
+        icon: ChevronRightIcon
+      })
+    })]
+  }));
+};
+NavigationItem.displayName = 'AppShell.NavItem';
+
+export { NavigationItem };

package/dist/components/AppShell/index.d.ts

@@ -0,0 +1,7 @@
+import { AppShell as BaseAppShell, AppShellProps } from './AppShell';
+import { NavigationItem } from './Navigation/NavigationItem';
+type CompoundAppShell = typeof BaseAppShell & {
+    NavItem: typeof NavigationItem;
+};
+declare const AppShell: CompoundAppShell;
+export { AppShell, type AppShellProps };

package/dist/components/AppShell/index.js

@@ -0,0 +1,7 @@
+import { AppShell as AppShell$1 } from './AppShell.js';
+import { NavigationItem } from './Navigation/NavigationItem.js';
+
+var AppShell = AppShell$1;
+AppShell.NavItem = NavigationItem;
+
+export { AppShell };

package/dist/components/List/List.stories.d.ts

@@ -2,14 +2,14 @@
 import { ListProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLUListElement | HTMLOListElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLOListElement | HTMLUListElement>, "className" | "id"> & {
         listType?: import("./List").ListType | undefined;
         typographyType?: import("./List").ListTypographyType | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {
-        htmlProps?: import("react").HTMLAttributes<HTMLUListElement | HTMLOListElement> | undefined;
-    } & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+        htmlProps?: import("react").HTMLAttributes<HTMLOListElement | HTMLUListElement> | undefined;
+    } & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 };
 export default _default;
 export declare const Overview: (args: ListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './dds-core';
 export * from './dds-form';
 export * from './dds-icons';
 export * from './dds-typography';
+export * from './components/AppShell';
 export * from './components/SelectionControl/RadioButton';
 export * from './components/SelectionControl/Checkbox';
 export * from './components/Button';

package/dist/index.js

@@ -3,6 +3,7 @@ export { ScreenSize, getBaseHTMLProps, getLiteralScreenSize, isKeyboardEvent, us
 export * from '@norges-domstoler/dds-form';
 export * from '@norges-domstoler/dds-icons';
 export * from '@norges-domstoler/dds-typography';
+export { AppShell } from './components/AppShell/index.js';
 export { RadioButton } from './components/SelectionControl/RadioButton/RadioButton.js';
 export { RadioButtonGroup } from './components/SelectionControl/RadioButton/RadioButtonGroup.js';
 export { Checkbox } from './components/SelectionControl/Checkbox/Checkbox.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "13.6.2",
+  "version": "13.6.4",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",