feat: Split Alert into LocalAlert and GlobalAlert.

.gitignore

@@ -51,4 +51,4 @@ vite.config.*.timestamp*
 *storybook.log
 
 # AI
-.qodo
+.qodo

packages/pxweb2-ui/src/index.ts

@@ -1,7 +1,6 @@
 export * from './../style-dictionary/dist/js/css-variables';
 export * from './../style-dictionary/dist/js/fixed-variables';
 export * from './lib/components/ActionItem/ActionItem';
-export * from './lib/components/Alert/Alert';
 export * from './lib/components/BottomSheet/BottomSheet';
 export * from './lib/components/Breadcrumbs/Breadcrumbs';
 export * from './lib/components/Button/Button';
@@ -14,11 +13,13 @@ export * from './lib/components/ContentBox/ContentBox';
 export * from './lib/components/DetailsSection/DetailsSection';
 export * from './lib/components/EmptyState/EmptyState';
 export * from './lib/components/FilterCategory/FilterCategory';
+export * from './lib/components/GlobalAlert/GlobalAlert';
 export * from './lib/components/Icon/Icon';
 export * from './lib/components/Icon/ActionItemIcon';
 export * from './lib/components/InformationCard/InformationCard';
 export * from './lib/components/Link/Link';
 export * from './lib/components/List';
+export * from './lib/components/LocalAlert/LocalAlert';
 export * from './lib/components/Notes/MandatoryNotes';
 export * from './lib/components/Notes/MandatoryTableNotes';
 export * from './lib/components/Notes/MandatoryVariableNotes';

packages/pxweb2-ui/src/lib/components/GlobalAlert/GlobalAlert.module.scss

@@ -0,0 +1,180 @@
+@use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixvar;
+@use '../../text-styles.scss';
+@use '../../breakpoints.scss' as breakpoint;
+
+.alert-medium {
+  display: flex;
+  padding: fixvar.$spacing-5 0px;
+  align-items: flex-start;
+  gap: fixvar.$spacing-3;
+}
+.alert-small {
+  display: flex;
+  padding: fixvar.$spacing-4;
+  align-items: flex-start;
+  gap: fixvar.$spacing-2;
+}
+
+.container {
+  display: block;
+  @media #{breakpoint.$xsmall} {
+    padding: 0 fixvar.$spacing-4;
+  }
+  @media #{breakpoint.$small} {
+    padding: 0 fixvar.$spacing-6;
+  }
+  @media #{breakpoint.$medium} {
+    padding: 0 fixvar.$spacing-6;
+  }
+  @media #{breakpoint.$large} {
+    padding: 0 fixvar.$spacing-6;
+  }
+  @media #{breakpoint.$xlarge} {
+    padding: 0 fixvar.$spacing-6;
+  }
+  @media #{breakpoint.$xxlarge} {
+    padding: 0 fixvar.$spacing-6;
+  }
+}
+
+.info {
+  background: var(--px-color-surface-info-moderate);
+}
+.success {
+  background: var(--px-color-surface-success-moderate);
+}
+.warning {
+  background: var(--px-color-surface-warning-moderate);
+}
+.error {
+  background: var(--px-color-surface-error-moderate);
+}
+
+.alert-section-left-medium {
+  display: flex;
+  height: fixvar.$spacing-6;
+  margin-top: 0.25rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  flex-shrink: 0;
+}
+
+.alert-section-left-small {
+  display: flex;
+  height: fixvar.$spacing-6;
+  padding-top: fixvar.$spacing-1;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-shrink: 0;
+}
+
+.alert-section-middle-medium {
+  display: flex;
+  flex-direction: column;
+  padding-top: 2px;
+  row-gap: fixvar.$spacing-2;
+}
+.alert-section-middle-medium:has(ol) {
+  row-gap: fixvar.$spacing-4;
+}
+.alert-section-middle-medium:has(ul) {
+  row-gap: fixvar.$spacing-4;
+}
+
+.alert-section-middle-small {
+  display: flex;
+  flex-direction: column;
+  padding-top: 2px;
+}
+
+.alert-heading {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-top: 1px;
+  flex: 1 0 0;
+}
+
+.alert-body-small {
+  display: flex;
+  align-self: stretch;
+  padding-top: 2px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.alert-body-medium {
+  display: flex;
+  align-self: stretch;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.alert-section-right {
+  display: flex;
+  align-self: center;
+}
+
+.alert-section-right-close-medium {
+  display: flex;
+  align-self: flex-start;
+  margin-inline-start: auto;
+  height: 32px;
+  align-items: center;
+  gap: 6px;
+}
+
+.alert-section-right-close-small {
+  display: flex;
+  align-self: flex-start;
+  margin-inline-start: auto;
+  height: 32px;
+  align-items: center;
+  gap: 6px;
+}
+
+.alert-xmark {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  align-self: stretch;
+  margin-inline-start: auto;
+}
+
+.alert-xmark-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.alert-icon-info {
+  --px-icon-color: var(--px-color-icon-info);
+  flex-shrink: 0;
+}
+
+.alert-icon-success {
+  --px-icon-color: var(--px-color-icon-success);
+}
+
+.alert-icon-warning {
+  --px-icon-color: var(--px-color-icon-warning);
+}
+
+.alert-icon-error {
+  --px-icon-color: var(--px-color-icon-error);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

packages/pxweb2-ui/src/lib/components/GlobalAlert/GlobalAlert.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryFn } from '@storybook/react-vite';
+
+import { GlobalAlert } from './GlobalAlert';
+import { Link } from '../Link/Link';
+
+const meta: Meta<typeof GlobalAlert> = {
+  component: GlobalAlert,
+  title: 'Components/GlobalAlert',
+  parameters: {
+    layout: 'padded',
+  },
+};
+export default meta;
+
+export const VariantL = {
+  args: {
+    variant: 'info',
+    heading: 'Welcome',
+    children:
+      "Welcome to the new PxWeb 2.0! We're still improving to help you find and use the numbers you need",
+  },
+};
+
+export const WithLink: StoryFn<typeof GlobalAlert> = () => {
+  return (
+    <>
+      <br />
+      <div style={{ width: '480px' }}>
+        <GlobalAlert variant="info" closeButton>
+          <Link href="https://www.ssb.no/en/statbank/table/07459/" inline>
+            SSB
+          </Link>
+        </GlobalAlert>
+      </div>
+    </>
+  );
+};
+
+export const WithTextAndLink: StoryFn<typeof GlobalAlert> = () => {
+  return (
+    <>
+      <br />
+      <div style={{ width: '480px' }}>
+        <GlobalAlert variant="info" closeButton>
+          Would you like to se this table in the old user interface:{' '}
+          <Link href="https://www.ssb.no/en/statbank/table/07459/" inline>
+            Old table
+          </Link>
+        </GlobalAlert>
+      </div>
+    </>
+  );
+};