Skip to content

Commit

Permalink
Merge branch 'master' into input-jl-money
Browse files Browse the repository at this point in the history
  • Loading branch information
zopa-charlotte-walker committed Jul 10, 2024
2 parents f73ac07 + 8853ae5 commit 4bb254a
Show file tree
Hide file tree
Showing 10 changed files with 272 additions and 101 deletions.
5 changes: 0 additions & 5 deletions .changeset/angry-horses-judge.md

This file was deleted.

27 changes: 27 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,32 @@
## [5.49.0](https://github.com/zopaUK/react-components/compare/v5.48.3...v5.49.0) (2023-08-17)

## 5.55.1

### Patch Changes

- 8f11934: change jsx: react-jsx to react

## 5.55.0

### Minor Changes

- e7d5162: Alert component

## 5.54.1

### Patch Changes

- 48591e4: Adds desktopMaxMedia and desktopMinMedia to navbar

## 5.54.0

### Minor Changes

- 162c4e8: Spinner swap aria label for alt
- 0b2a12f: add theming of navbar (desktop)

- 737d830: Bump minor

## 5.53.0

### Minor Changes
Expand Down
44 changes: 35 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,30 @@ git clone https://github.com/zopaUK/react-components.git
pnpm i
```

## Local linking

Local linking with Next.js applications can be particularly challenging due to the way Next.js handles module resolution and its own optimization processes. When attempting to link local packages, such as `react-components`, with a Next.js application, developers might encounter issues related to module resolution, duplicate React instances, or unexpected behavior in hot module reloading (HMR).

To mitigate these issues, you can use `pnpm dev:zrc`.

Follow these steps:

1. In the `react-components` directory, run the following command to start the watcher:

```bash
pnpm dev:zrc
```

2. In the application directory, run the following command to link the `react-components` library (if it exists):

```bash
pnpm dev:zrc
```

Now, any changes made in the `react-components` codebase will be reflected in the linked application after a delay (~500ms).

NOTE: It is named "zrc" (specifically) to allow the developer to run the same command on both projects.

## Running the project

Execute the development environment:
Expand All @@ -49,6 +73,8 @@ We start a watcher using [esbuild](https://esbuild.github.io/) and [tsc](https:/
pnpm dev:code
```

##

Your locally running app will have its own way of linking to local dependencies but making changes in react-components codebase should now show in the application.

## Motivation
Expand Down Expand Up @@ -106,25 +132,25 @@ In case you want to contribute to this library, please have a look at our [contr
</a>
</td>
<td align="center">
<a href="https://github.com/dfvalero">
<img src="https://avatars.githubusercontent.com/u/337955?v=4" width="50;" alt="dfvalero"/>
<a href="https://github.com/admmasters">
<img src="https://avatars.githubusercontent.com/u/335607?v=4" width="50;" alt="admmasters"/>
<br />
<sub><b>dfvalero</b></sub>
<sub><b>admmasters</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/OlenaKashuba">
<img src="https://avatars.githubusercontent.com/u/27281884?v=4" width="50;" alt="OlenaKashuba"/>
<a href="https://github.com/dfvalero">
<img src="https://avatars.githubusercontent.com/u/337955?v=4" width="50;" alt="dfvalero"/>
<br />
<sub><b>OlenaKashuba</b></sub>
<sub><b>dfvalero</b></sub>
</a>
</td></tr>
<tr>
<td align="center">
<a href="https://github.com/admmasters">
<img src="https://avatars.githubusercontent.com/u/335607?v=4" width="50;" alt="admmasters"/>
<a href="https://github.com/OlenaKashuba">
<img src="https://avatars.githubusercontent.com/u/27281884?v=4" width="50;" alt="OlenaKashuba"/>
<br />
<sub><b>admmasters</b></sub>
<sub><b>OlenaKashuba</b></sub>
</a>
</td>
<td align="center">
Expand Down
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@zopauk/react-components",
"sideEffects": false,
"description": "Shared react styled components for all the Zopa projects.",
"version": "5.53.0",
"version": "5.55.1",
"license": "MIT",
"author": "Zopa Ltd <frontend-opensource@zopa.com> (https://zopa.com)",
"main": "cjs/src/index.js",
Expand All @@ -25,7 +25,9 @@
"compile:types:dev": "pnpm compile:types --watch",
"sync": "concurrently pnpm:compile:code:dev pnpm:compile:types:dev",
"compile:clean": "rm -rf es cjs types",
"compile:types": "tsc --p ./tsconfig.types.json",
"compile:types": "tsc --p ./tsconfig.types.json --incremental false",
"compile:types:dev": "pnpm compile:types --watch",
"dev:zrc": "concurrently pnpm:compile:dev pnpm:compile:types:dev",
"test": "react-scripts test",
"format": "prettier -l --write \"**/*.{ts,tsx,js,jsx,json,less,css,md}\"",
"format:fix": "pnpm format --write",
Expand All @@ -40,7 +42,6 @@
"@fortawesome/fontawesome-common-types": "0.2.36",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/react-fontawesome": "^0.2.0",
"@swc/core": "^1.3.21",
"@tippyjs/react": "^4.2.0",
"@types/classnames": "^2.2.10",
"@types/react-headroom": "^2.2.1",
Expand Down Expand Up @@ -84,6 +85,7 @@
"@semantic-release/npm": "^9.0.1",
"@semantic-release/release-notes-generator": "^10.0.3",
"@svgr/webpack": "^6.2.1",
"@swc/core": "^1.3.21",
"@testing-library/jest-dom": "5.14.1",
"@testing-library/react": "12.0.0",
"@testing-library/react-hooks": "7.0.1",
Expand Down
23 changes: 15 additions & 8 deletions src/components/atoms/Alert/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useThemeContext } from '../../styles/Theme';
import ExclamationIcon from '../../styles/icons/exclamation';
import Button from '../Button/Button';
import HiddenText from '../HiddenText/HiddenText';
import InfoCircleIcon from '../../styles/icons/infoCircle';

export type Severity = 'info' | 'alert' | 'warning' | 'success' | 'brand';
export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
Expand All @@ -24,29 +25,33 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
const Wrapper = styled.div<{ severity: Severity; inline: boolean; hasRoundedCorners: boolean }>`
display: ${({ inline }) => (inline ? 'inline-flex' : 'flex')};
position: relative;
padding: 8px 12px 8px 12px;
align-items: ${({ severity, theme }) => theme.alert[severity].alignItems};
padding: ${({ severity, theme }) => theme.alert[severity].padding ?? '8px 12px 8px 12px'};
background: ${({ severity, theme }) => theme.alert[severity].background};
color: ${({ severity, theme }) => theme.alert[severity].text};
font-size: ${typography.sizes.text.body};
line-height: ${typography.sizes.lineHeight.body};
font-family: ${typography.primary};
font-weight: 400;
border-radius: ${({ hasRoundedCorners }) => (hasRoundedCorners ? 4 : 0)}px;
font-size: ${({ theme }) => theme.typography.text.sizes.body ?? typography.sizes.text.body};
line-height: ${({ theme }) => theme.typography.lineHeight.body};
font-family: ${({ theme }) => theme.typography.primary ?? typography.primary};
font-weight: ${({ severity, theme }) => theme.alert[severity].fontWeight ?? '400'};
border-radius: ${({ severity, theme, hasRoundedCorners }) =>
theme.alert[severity].borderRadius ? theme.alert[severity].borderRadius : hasRoundedCorners ? '4px' : '0px'};
border: ${({ severity, theme }) => theme.alert[severity].border};
border-left: ${({ severity, theme }) => theme.alert[severity].borderLeft};
width: ${({ severity, theme }) => theme.alert[severity].width};
height: ${({ severity, theme }) => theme.alert[severity].height};
a {
color: ${({ severity, theme }) => theme.alert[severity].text} !important;
font-size: 16px;
line-height: 20px;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
`;

const IconWrapper = styled.div<{ severity: Severity }>`
margin-right: 8px;
margin-right: ${({ severity, theme }) => theme.alert[severity].marginRight ?? '8px'};
padding-top: 2px;
font-size: 20px;
color: ${({ severity, theme }) => theme.alert[severity].icon};
Expand Down Expand Up @@ -89,6 +94,8 @@ const Alert = ({
if (customVariant) {
if (customVariant.iconName === 'exclamation') {
CustomIcon = <ExclamationIcon color={customVariant.color} />;
} else if (customVariant.iconName === 'info-circle') {
CustomIcon = <InfoCircleIcon color={customVariant.color} />;
} else {
throw new Error(`Unknown custom icon name: ${customVariant.iconName}`);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import * as React from 'react';
import { render, RenderResult } from '@testing-library/react';
import { ConditionalWrapper } from './ConditionalWrapper';

describe('ConditionalWrapper', () => {
const wrapperFunction = (children: React.ReactNode): JSX.Element => <div className="wrapper">{children}</div>;

it('renders without crashing', () => {
render(
<ConditionalWrapper condition={false} wrapper={wrapperFunction}>
Test
</ConditionalWrapper>,
);
});

it('does not wrap children when condition is false', () => {
const { container }: RenderResult = render(
<ConditionalWrapper condition={false} wrapper={wrapperFunction}>
Test
</ConditionalWrapper>,
);
expect(container.querySelector('.wrapper')).toBeNull();
});

it('wraps children when condition is true', () => {
const { container }: RenderResult = render(
<ConditionalWrapper condition={true} wrapper={wrapperFunction}>
Test
</ConditionalWrapper>,
);
expect(container.querySelector('.wrapper')).not.toBeNull();
});
});
12 changes: 12 additions & 0 deletions src/components/atoms/ConditionalWrapper/ConditionalWrapper.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as React from 'react';

export interface ConditionalWrapperProps {
condition: boolean;
wrapper: (children: React.ReactNode) => JSX.Element;
}

export const ConditionalWrapper = ({
condition,
wrapper,
children,
}: React.PropsWithChildren<ConditionalWrapperProps>) => (condition ? wrapper(children) : <>{children}</>);
Loading

0 comments on commit 4bb254a

Please sign in to comment.