diff --git a/.gitignore b/.gitignore index 2245e061a..945e19a2a 100644 --- a/.gitignore +++ b/.gitignore @@ -51,4 +51,4 @@ vite.config.*.timestamp* *storybook.log # AI -.qodo +.qodo \ No newline at end of file diff --git a/MAINTAINERS.md b/MAINTAINERS.md deleted file mode 100644 index 3421fd1f6..000000000 --- a/MAINTAINERS.md +++ /dev/null @@ -1,128 +0,0 @@ -# Maintainers Guide - -This guide is intended for maintainers - those who are maintaining PxWeb by providing or reviewing pull requests. - -## Getting Started - -1. Familiarize yourself with the project structure and our [CONTRIBUTING.md](./CONTRIBUTING.md) guide as well as this guide. -2. Setup the project locally and make sure that you can run PxWeb. - -## Development Tools we use - -We recommend the following tools for our development environment: - -- **Code Editor**: [Visual Studio Code (VS Code)](https://code.visualstudio.com/) is our preferred code editor. It provides a rich set of features, extensions, and integrations that enhance productivity and make development easier. - -- **Build & Development Environment**: [Vite](https://vitejs.dev/) is our preferred build and development environment. It is a fast and lightweight build tool that optimizes the development experience by providing instant server startup, hot module replacement, and efficient bundling. - -- **Accessibility**: [Axe](https://www.deque.com/axe/) is our preferred tool to help us comply with wcag - -By using these tools, we ensure a streamlined and efficient development process, enabling us to deliver high-quality code. - -## Technical debt - -An overview of the current technical debt in the project: - -### Long running tasks - -1. Updating the packages used in the project. This includes both Dependabot PRs and other outdated packages. - - For security reasons, we want to wait atleast 9 days before updating packages. - Use NPM '--before' or npm-check-updates '--cooldown' flags. - E.g: npm-check-updates --format group --deep --cooldown 9 -iu -2. Fix [SonarQube issues/codesmells](https://sonarcloud.io/project/overview?id=PxTools_PxWeb2) -3. Fix warnings when running `npm run lint` - -### Onetime tasks - -1. The package we use to generate the api-client is no longer maintained, and needs to be updated. It recommends a fork that is activly maintained. -2. We should split up the Selection.tsx component a bit. That would make it easier to write unit tests for the code. - -## Git Branching Strategy - -We use a simple and effective Git branching strategy to keep our project organized and maintainable. - -1. **Main Branch**: The `main` branch is the primary branch where the source code of HEAD always reflects a "production-ready" state. - -2. **Feature Branches**: For new features and non-emergency bug fixes, we create a new branch off of `main`. Name your branch descriptively, indicating the purpose of your changes. Branch names should be lowercased and should be prefixed with `feature/`. - - Example: `feature/PXWEB2-1-new-login-screen` - -3. **Fix Branches**: For bug fixes, we create a new branch off of `main`. Name your branch descriptively, indicating the purpose of your changes. Branch names should be lowercased and prefixed with `fix/`. - - Example: `fix/PXWEB2-1-login-screen-bug` - -4. **Patch Branches**: For minor changes and patches, we create a new branch off of `main`. Name your branch descriptively, indicating the purpose of your changes. Branch names should be lowercased and prefixed with `patch/`. - - Example: `patch/PXWEB2-1-update-login-screen-docs` - -5. **Pull Requests**: After making your changes in these branches, merge them back into `main` via a pull request. The pull request should be reviewed and tested before it is merged. - -> Make sure that the JIRA id is included in the branch name and that this should be in capital letters. -> -> We prefer hyphens instead of underscores for word separator in branch names. - -This strategy ensures that our `main` branch always has "production-ready" code that has been reviewed and tested. - -## Create Pull Requests - -To get started with contributing code, please follow these steps: - -1. Clone the repository to your local machine. -2. Create a new branch from the `main` branch. Name your branch descriptively, indicating the purpose of your changes. -3. Make your changes and ensure that the code follows the project's coding conventions. -4. Test your changes thoroughly to ensure they work as expected. -5. Commit your changes with a clear and descriptive commit message. -6. Push your changes. -7. Open a pull request against the `main` branch and make sure that it has: - - A descriptive title. - - A clear and concise description of the changes, including the purpose and benefits of the change. - - A reference to the related issue(s) or ticket(s). - - Screenshots or gifs if the changes include UI/UX changes. - - New tests that cover the added features or bug fixes. - - Documentation updates if necessary. - - Passed all the continuous integration checks (like build, linting and tests). - - > Your PR will have automatic deploys to Cloudflare Pages that can be used by the reviewers - -8. Reviewers will be automatically assigned from [CODEOWNERS](CODEOWNERS) to your PR and once approved by at least one reviewer you can continue with one of the following options - - Create a merge commit - - Squash and merge (recomended for most/smaller changes) - - Rebase and merge - -> [!IMPORTANT] -> We use [Automatically generated release notes](https://docs.github.com/en/repositories/releasing-projects-on-github/automatically-generated-release-notes) -> so a descriptive PR title is essential for the release notes. - -## Reviewing Pull Requests - -1. Ensure that the PR is related to a filed issue. -2. Check that the code follows the project's coding standards. -3. Test the code locally to ensure it works as expected. -4. Review the tests included with the PR to ensure they cover the new functionality or bug fix. - -## Communicating - -1. Be respectful and kind to the contributors. -2. Provide clear, constructive feedback on PRs. -3. Promote a collaborative and learning environment. - -Remember, this project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. - -## 3rd Party Components - -While developing for this project, we aim to minimize the number of dependencies. This is to keep the project lightweight, maintainable, and to reduce potential security risks. - -Before adding a new 3rd party component or library, please consider the following: - -1. Is the component necessary? Can the functionality be achieved without it? -2. Is the component actively maintained? An unmaintained component can pose a security risk and may lack support. -3. Does the component have a large community? Larger communities often mean more resources for troubleshooting and learning. -4. Is the component's license compatible with our project? -5. Consult with another maintainer if it is the right component for the job. -6. Consult [snyk Advisor](https://snyk.io/advisor/) to get a summary for the component. - -For existing third-party component dependencies, we will utilize Dependabot to help us stay up to date. Dependabot is an automated dependency management tool that regularly checks for updates to our dependencies and creates pull requests to update them. This helps us ensure that we are using the latest versions of our dependencies, which can include important bug fixes, security patches, and new features. - -We are committed to continuously updating our dependencies to ensure that we are using the latest versions. However, in some cases, we may encounter conflicts with NX plugins that prevent us from updating to the latest versions. In such situations, we carefully evaluate the impact and risks before deciding on the appropriate course of action. - -In the event of a security vulnerability being discovered in any of our dependencies, we will prioritize attending to it urgently. Our team will take immediate action to mitigate the risk and apply necessary patches or updates. diff --git a/packages/pxweb2-ui/src/index.ts b/packages/pxweb2-ui/src/index.ts index b0b989f0c..9865f54df 100644 --- a/packages/pxweb2-ui/src/index.ts +++ b/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'; diff --git a/packages/pxweb2-ui/src/lib/components/GlobalAlert/GlobalAlert.module.scss b/packages/pxweb2-ui/src/lib/components/GlobalAlert/GlobalAlert.module.scss new file mode 100644 index 000000000..2d42fe484 --- /dev/null +++ b/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; +} diff --git a/packages/pxweb2-ui/src/lib/components/GlobalAlert/GlobalAlert.stories.tsx b/packages/pxweb2-ui/src/lib/components/GlobalAlert/GlobalAlert.stories.tsx new file mode 100644 index 000000000..3ef645e44 --- /dev/null +++ b/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 = { + 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 = () => { + return ( + <> +
+
+ + + SSB + + +
+ + ); +}; + +export const WithTextAndLink: StoryFn = () => { + return ( + <> +
+
+ + Would you like to se this table in the old user interface:{' '} + + Old table + + +
+ + ); +}; diff --git a/packages/pxweb2-ui/src/lib/components/GlobalAlert/GlobalAlert.tsx b/packages/pxweb2-ui/src/lib/components/GlobalAlert/GlobalAlert.tsx new file mode 100644 index 000000000..66866caee --- /dev/null +++ b/packages/pxweb2-ui/src/lib/components/GlobalAlert/GlobalAlert.tsx @@ -0,0 +1,153 @@ +import React, { useState } from 'react'; +import cl from 'clsx'; + +import { useTranslation } from 'react-i18next'; +import classes from './GlobalAlert.module.scss'; +import BodyLong from '../Typography/BodyLong/BodyLong'; +import Heading from '../Typography/Heading/Heading'; +import { Icon, IconProps } from '../Icon/Icon'; +import Button from '../Button/Button'; +import BodyShort from '../Typography/BodyShort/BodyShort'; + +export interface GlobalAlertProps { + readonly size?: 'small' | 'medium'; + readonly variant: 'info' | 'success' | 'warning' | 'error'; + readonly closeButton?: boolean; + readonly heading?: string; + readonly headingLevel?: '1' | '2' | '3' | '4' | '5' | '6'; + readonly onDismissed?: () => void; + readonly className?: string; + readonly children?: string | React.ReactNode; + readonly alertAriaLabel?: string; + readonly isRoleAlert?: boolean; + ref?: React.Ref; + id?: string; +} + +export function GlobalAlert({ + size = 'medium', + variant = 'info', + closeButton = false, + heading = '', + headingLevel = '2', + onDismissed, + className = '', + children, + alertAriaLabel, + isRoleAlert = true, + ref, + id, +}: Readonly) { + const cssClasses = className.length > 0 ? ' ' + className : ''; + const { t } = useTranslation(); + const [isVisible, setIsVisible] = useState(true); + const HandleClose = () => { + setIsVisible(false); + onDismissed?.(); + }; + if (!isVisible) { + return null; + } + const hasheading = Boolean(heading); + const iconClose = 'XMark'; + let variantIcon: IconProps['iconName']; + switch (variant) { + case 'info': + variantIcon = 'InformationCircleFilled'; + break; + case 'success': + variantIcon = 'CheckMarkCircleFilled'; + break; + case 'warning': + variantIcon = 'ExclamationMarkFilled'; + break; + case 'error': + variantIcon = 'XMarkCircleFilled'; + break; + } + let headingSize: 'small' | 'xsmall'; + const bodySize = 'medium'; + + switch (size) { + case 'small': + headingSize = 'xsmall'; + break; + case 'medium': + headingSize = 'small'; + break; + default: + headingSize = 'small'; + } + + return ( +
+
+
+
+ {!hasheading && ( + + {t(`common.alert.${variant}`)} + + )} + +
+
+ {hasheading && ( +
+ + {t(`common.alert.${variant}`)} + + + {heading} + +
+ )} +
+ {size === 'small' ? ( + {children} + ) : ( + + {children} + + )} +
+
+
+ {closeButton && ( +
+
+ )} +
+
+
+
+ ); +} + +export default GlobalAlert; diff --git a/packages/pxweb2-ui/src/lib/components/Alert/Alert.module.scss b/packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.module.scss similarity index 98% rename from packages/pxweb2-ui/src/lib/components/Alert/Alert.module.scss rename to packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.module.scss index 1077f6f47..78acaf571 100644 --- a/packages/pxweb2-ui/src/lib/components/Alert/Alert.module.scss +++ b/packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.module.scss @@ -10,7 +10,7 @@ } .alert-small { display: flex; - padding: fixvar.$spacing-3; + padding: fixvar.$spacing-4; align-items: flex-start; gap: fixvar.$spacing-2; border-radius: var(--px-border-radius-medium); @@ -135,7 +135,6 @@ display: flex; flex-direction: column; padding-top: 2px; - row-gap: fixvar.$spacing-1; } .alert-heading { diff --git a/packages/pxweb2-ui/src/lib/components/Alert/Alert.spec.tsx b/packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.spec.tsx similarity index 79% rename from packages/pxweb2-ui/src/lib/components/Alert/Alert.spec.tsx rename to packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.spec.tsx index 37cf2e8e0..870769cc1 100644 --- a/packages/pxweb2-ui/src/lib/components/Alert/Alert.spec.tsx +++ b/packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.spec.tsx @@ -1,11 +1,11 @@ import { render } from '@testing-library/react'; import '@testing-library/jest-dom/vitest'; -import Alert, { AlertProps } from './Alert'; +import LocalAlert, { LocalAlertProps } from './LocalAlert'; describe('Alert', () => { it('should render successfully', () => { - const { baseElement } = render(); + const { baseElement } = render(); expect(baseElement).toBeTruthy(); }); }); @@ -19,8 +19,8 @@ it.each([ (expectedAriaLive, variant) => { const headingText = `Test heading for ${variant}`; const { getByText } = render( - , ); diff --git a/packages/pxweb2-ui/src/lib/components/Alert/Alert.stories.tsx b/packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.stories.tsx similarity index 84% rename from packages/pxweb2-ui/src/lib/components/Alert/Alert.stories.tsx rename to packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.stories.tsx index 7136893c6..85b5c45f8 100644 --- a/packages/pxweb2-ui/src/lib/components/Alert/Alert.stories.tsx +++ b/packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.stories.tsx @@ -1,20 +1,20 @@ import type { Meta, StoryFn } from '@storybook/react-vite'; -import { Alert } from './Alert'; +import { LocalAlert } from './LocalAlert'; import { Link } from '../Link/Link'; import List from '../List/List'; import ListItem from '../List/ListItem'; -const meta: Meta = { - component: Alert, - title: 'Components/Alert', +const meta: Meta = { + component: LocalAlert, + title: 'Components/LocalAlert', parameters: { layout: 'padded', }, }; export default meta; -export const Variant = { +export const VariantL = { args: { variant: 'info', heading: 'Vi beklager', @@ -28,40 +28,40 @@ export const Variant = { }, }; -export const WithLink: StoryFn = () => { +export const WithLink: StoryFn = () => { return ( <>
- + SSB - +
); }; -export const WithTextAndLink: StoryFn = () => { +export const WithTextAndLink: StoryFn = () => { return ( <>
- + Det finnes mer metadata om emnet. Dette kan du lese mer om her:{' '} SSB - +
); }; -export const WithOLList: StoryFn = () => { +export const WithOLList: StoryFn = () => { return ( - + {' '} @@ -72,12 +72,12 @@ export const WithOLList: StoryFn = () => { {/* note b note c */} - + ); }; -export const WithULList: StoryFn = () => { +export const WithULList: StoryFn = () => { return ( - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do @@ -99,13 +99,13 @@ export const WithULList: StoryFn = () => {
  • Note c
    •  -     + ); }; -export const WithULListClickable: StoryFn = () => { +export const WithULListClickable: StoryFn = () => { return ( - = () => {
  • Note c
    • -     + ); }; -export const WithListgroupClickable: StoryFn = () => { +export const WithListgroupClickable: StoryFn = () => { return ( - + @@ -173,13 +173,13 @@ export const WithListgroupClickable: StoryFn = () => { - + ); }; -export const Test: StoryFn = () => { +export const Test: StoryFn = () => { return ( - + Gå til SSB @@ -199,6 +199,6 @@ export const Test: StoryFn = () => { - + ); }; diff --git a/packages/pxweb2-ui/src/lib/components/Alert/Alert.tsx b/packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.tsx similarity index 76% rename from packages/pxweb2-ui/src/lib/components/Alert/Alert.tsx rename to packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.tsx index 799bb76e8..d11a0b847 100644 --- a/packages/pxweb2-ui/src/lib/components/Alert/Alert.tsx +++ b/packages/pxweb2-ui/src/lib/components/LocalAlert/LocalAlert.tsx @@ -2,16 +2,15 @@ import React, { useState } from 'react'; import cl from 'clsx'; import { useTranslation } from 'react-i18next'; -import classes from './Alert.module.scss'; +import classes from './LocalAlert.module.scss'; import BodyLong from '../Typography/BodyLong/BodyLong'; import Heading from '../Typography/Heading/Heading'; import { Icon, IconProps } from '../Icon/Icon'; import Button from '../Button/Button'; import BodyShort from '../Typography/BodyShort/BodyShort'; -import List, { ListProps } from '../List/List'; import { getIconDirection } from '../../util/util'; -export interface AlertProps { +export interface LocalAlertProps { readonly size?: 'small' | 'medium'; readonly variant: 'info' | 'success' | 'warning' | 'error'; readonly clickable?: boolean; @@ -37,7 +36,7 @@ export interface AlertProps { id?: string; } -export function Alert({ +export function LocalAlert({ size = 'medium', variant = 'info', clickable = false, @@ -54,7 +53,7 @@ export function Alert({ role, ref, id, -}: Readonly) { +}: Readonly) { const cssClasses = className.length > 0 ? ' ' + className : ''; const { t } = useTranslation(); const [isVisible, setIsVisible] = useState(true); @@ -115,51 +114,6 @@ export function Alert({ closeButton = false; } - const childIsList = (node: React.ReactNode): boolean => { - if (React.isValidElement(node)) { - if (node.type === List) { - return true; - } - } - return false; - }; - - const extractTextFromChildren = (children: React.ReactNode): string => { - let textContent = ''; - - React.Children.forEach(children, (child) => { - if (React.isValidElement(child)) { - // If the child is a valid React element, check its children recursively - if (React.isValidElement(child) && child.type === List) { - textContent += ' ' + (child.props as ListProps)?.subHeading + ': '; - } - if ( - typeof child.props === 'object' && - child.props !== null && - 'children' in child.props - ) { - textContent += extractTextFromChildren( - child.props.children as React.ReactNode, - ); - } - } else if (typeof child === 'string' || typeof child === 'number') { - // If the child is a string or number, add it to the text content - textContent += ' ' + child.toString(); - } - }); - - return textContent; - }; - - if (childIsList(children) && clickable) { - let extractedText = ''; - if (React.isValidElement(children) && children.type === List) { - const listProps = children.props as ListProps; - extractedText = extractTextFromChildren(listProps.children); - } - children = extractedText; - } - return (
    ( {children} diff --git a/packages/pxweb2-ui/src/lib/components/Notes/MandatoryTableNotes.tsx b/packages/pxweb2-ui/src/lib/components/Notes/MandatoryTableNotes.tsx index 44bdab0b9..e1c906f92 100644 --- a/packages/pxweb2-ui/src/lib/components/Notes/MandatoryTableNotes.tsx +++ b/packages/pxweb2-ui/src/lib/components/Notes/MandatoryTableNotes.tsx @@ -4,7 +4,7 @@ import cl from 'clsx'; import classes from './Notes.module.scss'; import List from '../List/List'; import ListItem from '../List/ListItem'; -import Alert from '../Alert/Alert'; +import LocalAlert from '../LocalAlert/LocalAlert'; import MarkdownRenderer from '../MarkdownRenderer/MarkdownRenderer'; export type MandatoryTableNotesProps = { @@ -25,7 +25,7 @@ export function MandatoryTableNotes({ notes }: MandatoryTableNotesProps) { ); return ( - )} - + ); } diff --git a/packages/pxweb2-ui/src/lib/components/Notes/MandatoryVariableNotes.tsx b/packages/pxweb2-ui/src/lib/components/Notes/MandatoryVariableNotes.tsx index a46c3267f..026490d2a 100644 --- a/packages/pxweb2-ui/src/lib/components/Notes/MandatoryVariableNotes.tsx +++ b/packages/pxweb2-ui/src/lib/components/Notes/MandatoryVariableNotes.tsx @@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'; import cl from 'clsx'; import classes from './Notes.module.scss'; -import Alert from '../Alert/Alert'; +import LocalAlert from '../LocalAlert/LocalAlert'; import { variableNotes } from './noteCollection'; import { VariableNotes } from './VariableNotes'; @@ -24,13 +24,13 @@ export function MandatoryVariableNotes({ variableNotes.variableName; return ( - - + ); } diff --git a/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxHeader/VariableBoxHeader.tsx b/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxHeader/VariableBoxHeader.tsx index 37324b9aa..ce04cf8e9 100644 --- a/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxHeader/VariableBoxHeader.tsx +++ b/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxHeader/VariableBoxHeader.tsx @@ -5,7 +5,7 @@ import classes from './VariableBoxHeader.module.scss'; import { Icon } from '../../Icon/Icon'; import Tag from '../../Tag/Tag'; import { VariableBoxProps } from '../VariableBox'; -import Alert from '../../Alert/Alert'; +import LocalAlert from '../../LocalAlert/LocalAlert'; import Heading from '../../Typography/Heading/Heading'; type VariableBoxPropsToHeader = Pick; @@ -113,11 +113,11 @@ export function VariableBoxHeader({ {isMissingMandatoryValues && (
    - + {t( 'presentation_page.side_menu.selection.variablebox.header.alert_no_mandatory_values', )} - +
    )}
    diff --git a/packages/pxweb2/public/config/config.js b/packages/pxweb2/public/config/config.js index 54e2b9c70..d848546b6 100644 --- a/packages/pxweb2/public/config/config.js +++ b/packages/pxweb2/public/config/config.js @@ -54,4 +54,4 @@ window.PxWeb2Config = { sv: '', // Set to your Swedish homepage URL en: '', // Set to your English homepage URL }, -}; \ No newline at end of file +}; diff --git a/packages/pxweb2/src/app/components/Banners/WipStatusMessage.spec.tsx b/packages/pxweb2/src/app/components/Banners/WipStatusMessage.spec.tsx index c14b68513..4c25b1d57 100644 --- a/packages/pxweb2/src/app/components/Banners/WipStatusMessage.spec.tsx +++ b/packages/pxweb2/src/app/components/Banners/WipStatusMessage.spec.tsx @@ -13,7 +13,7 @@ vi.mock('react-i18next', () => ({ // Mock Alert component vi.mock('@pxweb2/pxweb2-ui', () => ({ - Alert: ({ + GlobalAlert: ({ children, onDismissed, closeButton, diff --git a/packages/pxweb2/src/app/components/Banners/WipStatusMessage.tsx b/packages/pxweb2/src/app/components/Banners/WipStatusMessage.tsx index 361fdf156..df6226721 100644 --- a/packages/pxweb2/src/app/components/Banners/WipStatusMessage.tsx +++ b/packages/pxweb2/src/app/components/Banners/WipStatusMessage.tsx @@ -1,7 +1,7 @@ import { useEffect, useState, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { Alert } from '@pxweb2/pxweb2-ui'; +import { GlobalAlert } from '@pxweb2/pxweb2-ui'; import classes from './WipStatusMessage.module.scss'; const SESSION_STORAGE_KEY = 'pxweb2.wip_status_message_dismissed'; @@ -28,13 +28,13 @@ export default function WipStatusMessage() { } return ( - {t('common.status_messages.welcome')} - + ); } diff --git a/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx b/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx index 536ccbad6..72c6d9daf 100644 --- a/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx +++ b/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'; import { useState, useContext, useEffect, useRef } from 'react'; import classes from './ContentTop.module.scss'; import { - Alert, + LocalAlert, BodyShort, Breadcrumbs, Button, @@ -252,7 +252,7 @@ export function ContentTop({ {noteMessage && (
    - {noteMessage.message} - +
    )} {isTableInformationOpen && ( diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerEdit.spec.tsx b/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerEdit.spec.tsx index 27345badf..306bf97b9 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerEdit.spec.tsx +++ b/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerEdit.spec.tsx @@ -62,7 +62,7 @@ vi.mock('@pxweb2/pxweb2-ui', () => ({ {label} ), - Alert: ({ children }: { children: React.ReactNode }) => ( + LocalAlert: ({ children }: { children: React.ReactNode }) => (
    {children}
    ), })); diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerEdit.tsx b/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerEdit.tsx index 49a84e304..eb4a41d88 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerEdit.tsx +++ b/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerEdit.tsx @@ -1,7 +1,12 @@ import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { ActionItem, ContentBox, Variable, Alert } from '@pxweb2/pxweb2-ui'; +import { + ActionItem, + ContentBox, + Variable, + LocalAlert, +} from '@pxweb2/pxweb2-ui'; import useTableData from '../../../context/useTableData'; import classes from './DrawerEdit.module.scss'; import { PivotType } from '../../../context/PivotType'; @@ -135,9 +140,9 @@ export function DrawerEdit() { /> )} - + {t('common.status_messages.drawer_edit')} - + ); } diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerHelp.tsx b/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerHelp.tsx index d5d59e806..b0b8f88b9 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerHelp.tsx +++ b/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerHelp.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next'; -import { ContentBox, Alert } from '@pxweb2/pxweb2-ui'; +import { ContentBox, LocalAlert } from '@pxweb2/pxweb2-ui'; import classes from './DrawerHelp.module.scss'; export function DrawerHelp() { @@ -8,9 +8,9 @@ export function DrawerHelp() { return ( - + {t('common.status_messages.drawer_help')} - + ); } diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerSave.tsx b/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerSave.tsx index 1f88a5e1d..e32eb8067 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerSave.tsx +++ b/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerSave.tsx @@ -13,7 +13,7 @@ import { Radio, RadioOption, VartypeEnum, - Alert, + LocalAlert, } from '@pxweb2/pxweb2-ui'; import { ApiError, @@ -500,9 +500,12 @@ export function DrawerSave({ tableId }: DrawerSaveProps) { ))} - + {t('common.status_messages.drawer_save_file')} - +
    @@ -549,9 +552,9 @@ export function DrawerSave({ tableId }: DrawerSaveProps) {
    - + {t('common.status_messages.drawer_save_api')} - + ); diff --git a/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerView.tsx b/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerView.tsx index 606ff7d76..f9a0810aa 100644 --- a/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerView.tsx +++ b/packages/pxweb2/src/app/components/NavigationDrawer/Drawers/DrawerView.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next'; -import { ContentBox, Alert } from '@pxweb2/pxweb2-ui'; +import { ContentBox, LocalAlert } from '@pxweb2/pxweb2-ui'; import classes from './DrawerView.module.scss'; export function DrawerView() { @@ -8,9 +8,9 @@ export function DrawerView() { return ( - + {t('common.status_messages.drawer_view')} - + ); } diff --git a/packages/pxweb2/src/app/components/Presentation/Presentation.tsx b/packages/pxweb2/src/app/components/Presentation/Presentation.tsx index 7597bed8b..959c447e7 100644 --- a/packages/pxweb2/src/app/components/Presentation/Presentation.tsx +++ b/packages/pxweb2/src/app/components/Presentation/Presentation.tsx @@ -6,7 +6,7 @@ import isEqual from 'lodash/isEqual'; import classes from './Presentation.module.scss'; import useApp from '../../context/useApp'; import { ContentTop } from '../ContentTop/ContentTop'; -import { Table, EmptyState, PxTable, Alert } from '@pxweb2/pxweb2-ui'; +import { Table, EmptyState, PxTable, LocalAlert } from '@pxweb2/pxweb2-ui'; import useTableData from '../../context/useTableData'; import useVariables from '../../context/useVariables'; import { useDebounce } from '@uidotdev/usehooks'; @@ -221,7 +221,7 @@ export function Presentation({ width: '100%', }} > - + )} diff --git a/packages/pxweb2/src/app/components/TableInformation/TableInformation.tsx b/packages/pxweb2/src/app/components/TableInformation/TableInformation.tsx index 45348f40c..04f5d97fd 100644 --- a/packages/pxweb2/src/app/components/TableInformation/TableInformation.tsx +++ b/packages/pxweb2/src/app/components/TableInformation/TableInformation.tsx @@ -15,7 +15,7 @@ import { Tabs, Tab, TabPanel, - Alert, + LocalAlert, } from '@pxweb2/pxweb2-ui'; import { NotesTab } from './Notes/NotesTab'; @@ -108,9 +108,9 @@ export function TableInformation({ - + {t('common.status_messages.tab_definitions')} - + {tableData.data?.metadata && (