diff --git a/bin/demo-build.js b/bin/demo-build.js
index fbba7f883d..166654f2bd 100644
--- a/bin/demo-build.js
+++ b/bin/demo-build.js
@@ -43,7 +43,7 @@ const gitPagesUrl = `https://${parsedGitUrl.owner}.github.io/${parsedGitUrl.name
console.log('Publish storybook demo for github');
console.log('=> Build storybook');
shell.exec(`yarn build-storybook -o ${tempOutputDir}`, { fatal: true });
-shell.exec(`STORYBOOK_BUILD_DIR=${tempOutputDir} node bin/generate-docs-urls.js`)
+shell.exec(`STORYBOOK_BUILD_DIR=${tempOutputDir} node bin/generate-docs-urls.js`);
// Prepare temporary gh-pages dir
console.log('=> Prepare temporary dir');
diff --git a/packages/amount/src/__image_snapshots__/amount-screenshots-sprite-snap.png b/packages/amount/src/__image_snapshots__/amount-screenshots-main-snap.png
similarity index 100%
rename from packages/amount/src/__image_snapshots__/amount-screenshots-sprite-snap.png
rename to packages/amount/src/__image_snapshots__/amount-screenshots-main-snap.png
diff --git a/packages/amount/src/__image_snapshots__/amount-screenshots-styles-snap.png b/packages/amount/src/__image_snapshots__/amount-screenshots-styles-snap.png
new file mode 100644
index 0000000000..d657fa390b
--- /dev/null
+++ b/packages/amount/src/__image_snapshots__/amount-screenshots-styles-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:547ad7dc255c47c0b160a7a002185ff05d570b3b454c38c348fae270346f968e
+size 19692
diff --git a/packages/amount/src/__snapshots__/component.test.tsx.snap b/packages/amount/src/__snapshots__/component.test.tsx.snap
index 483627c57c..adbb2f4d9e 100644
--- a/packages/amount/src/__snapshots__/component.test.tsx.snap
+++ b/packages/amount/src/__snapshots__/component.test.tsx.snap
@@ -3,12 +3,12 @@
exports[`Amount should match snapshots for base and Pure components 1`] = `
1
@@ -28,24 +28,24 @@ exports[`Amount should match snapshots for base and Pure components 1`] = `
exports[`Amount should not render plus sign when showPlus and value <= 0 1`] = `
0
−1
@@ -69,12 +69,12 @@ exports[`Amount should not render plus sign when showPlus and value <= 0 1`] = `
exports[`Amount should render plus sign when showPlus and value > 0 1`] = `
+
1
@@ -92,12 +92,12 @@ exports[`Amount should render plus sign when showPlus and value > 0 1`] = `
exports[`Amount should render rightAddons 1`] = `
1
diff --git a/packages/amount/src/component.screenshots.test.tsx b/packages/amount/src/component.screenshots.test.tsx
index a6dcff3269..c7d8729e04 100644
--- a/packages/amount/src/component.screenshots.test.tsx
+++ b/packages/amount/src/component.screenshots.test.tsx
@@ -12,11 +12,11 @@ describe(
screenshotTesting({
cases: [
[
- 'sprite',
+ 'main',
createSpriteStorybookUrl({
componentName: 'Amount',
knobs: {
- value: [12300],
+ value: 12300,
currency: ['RUR', 'USD'],
minority: [100, 10],
view: ['default', 'withZeroMinorPart'],
@@ -24,6 +24,21 @@ describe(
size: { width: 100, height: 50 },
}),
],
+ [
+ 'styles',
+ createSpriteStorybookUrl({
+ componentName: 'Amount',
+ knobs: {
+ value: 12300,
+ currency: 'RUR',
+ minority: 100,
+ view: 'withZeroMinorPart',
+ bold: ['none', 'full', 'major'],
+ transparentMinor: [false, true],
+ },
+ size: { width: 100, height: 50 },
+ }),
+ ],
],
}),
);
diff --git a/packages/amount/src/component.tsx b/packages/amount/src/component.tsx
index 89f524933e..bc0add455f 100644
--- a/packages/amount/src/component.tsx
+++ b/packages/amount/src/component.tsx
@@ -14,6 +14,8 @@ export const Amount: React.FC = ({
minority,
currency,
view = 'default',
+ bold,
+ transparentMinor,
rightAddons,
showPlus = false,
className,
@@ -26,11 +28,26 @@ export const Amount: React.FC = ({
view,
});
+ const defaultStyles = bold === undefined && transparentMinor === undefined;
+
return (
-
+
{showPlus && value > 0 ? '+' : ''}
{majorPart}
-
+
{minorPart && AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR}
{minorPart}
{currency ? `${THINSP}${currencySymbol}` : null}
diff --git a/packages/amount/src/docs/component.stories.mdx b/packages/amount/src/docs/component.stories.mdx
index 8eaaeae108..6b4e7b6a2f 100644
--- a/packages/amount/src/docs/component.stories.mdx
+++ b/packages/amount/src/docs/component.stories.mdx
@@ -22,13 +22,13 @@ import styles from '!!raw-loader!../index.module.css';
{React.createElement(() => {
const currencyCodes = getAllCurrencyCodes();
- const value = number('value', 12300);
+ const value = number('value', 10099);
const currency = select('currency', currencyCodes, 'RUR');
const minority = number('minority', 100);
const showPlus = boolean('showPlus', false);
const view = select('view', ['default', 'withZeroMinorPart'], 'default');
- const className = select('className', '');
- const dataTestId = text('dataTestId', '');
+ const bold = select('bold', ['full', 'major', 'none'], 'bold');
+ const transparentMinor = boolean('transparentMinor', true);
return (
@@ -43,8 +43,8 @@ import styles from '!!raw-loader!../index.module.css';
minority={minority}
showPlus={showPlus}
view={view}
- className={className}
- dataTestId={dataTestId}
+ bold={bold}
+ transparentMinor={transparentMinor}
/>
@@ -54,8 +54,6 @@ import styles from '!!raw-loader!../index.module.css';
minority={minority}
showPlus={showPlus}
view={view}
- className={className}
- dataTestId={dataTestId}
/>
diff --git a/packages/amount/src/index.module.css b/packages/amount/src/index.module.css
index 207de1d225..da4978fa1e 100644
--- a/packages/amount/src/index.module.css
+++ b/packages/amount/src/index.module.css
@@ -3,14 +3,34 @@
:root {
--amount-major-part-font-weight: bold;
--amount-minor-part-font-weight: normal;
+ --amount-minor-part-opacity: 0.6;
}
.component {
white-space: nowrap;
- font-weight: var(--amount-major-part-font-weight);
}
-.minorPartAndCurrency {
+.transparentMinor {
opacity: 0.6;
+}
+
+.bold {
+ font-weight: bold;
+}
+
+.boldMajor {
+ font-weight: bold;
+}
+
+.normalMinor {
+ font-weight: normal;
+}
+
+.default {
+ font-weight: var(--amount-major-part-font-weight);
+}
+
+.defaultMinor {
+ opacity: var(--amount-minor-part-opacity);
font-weight: var(--amount-minor-part-font-weight);
}
diff --git a/packages/amount/src/types/amount-props.ts b/packages/amount/src/types/amount-props.ts
index 699091f63a..e340028e62 100644
--- a/packages/amount/src/types/amount-props.ts
+++ b/packages/amount/src/types/amount-props.ts
@@ -28,6 +28,16 @@ export type AmountProps = {
*/
view?: 'default' | 'withZeroMinorPart';
+ /**
+ * Управление жирностью
+ */
+ bold?: 'full' | 'major' | 'none';
+
+ /**
+ * Делает минорную часть полупрозрачной
+ */
+ transparentMinor?: boolean;
+
/**
* Показывать значок + для положительных значений
*/
diff --git a/packages/bottom-sheet/src/component.test.tsx b/packages/bottom-sheet/src/component.test.tsx
index ef9f492e0d..07544fbfcb 100644
--- a/packages/bottom-sheet/src/component.test.tsx
+++ b/packages/bottom-sheet/src/component.test.tsx
@@ -189,7 +189,7 @@ describe('Bottom sheet', () => {
fireEvent.click(content);
}
- await new Promise((res) => setTimeout(res, 1000));
+ await new Promise(res => setTimeout(res, 1000));
expect(queryByTestId(dataTestId)).toBeInTheDocument();
});
diff --git a/packages/bottom-sheet/src/components/closer/Component.tsx b/packages/bottom-sheet/src/components/closer/Component.tsx
index 7b0d8494db..f3193041ac 100644
--- a/packages/bottom-sheet/src/components/closer/Component.tsx
+++ b/packages/bottom-sheet/src/components/closer/Component.tsx
@@ -32,7 +32,7 @@ export const Closer: React.FC = ({
const { onClose } = useContext(BaseModalContext);
const handleClick = useCallback(
- (event) => {
+ event => {
onClose(event, 'closerClick');
},
[onClose],
diff --git a/packages/codemod/src/button-xs/transform.ts b/packages/codemod/src/button-xs/transform.ts
index 127407e133..930bad1ac4 100644
--- a/packages/codemod/src/button-xs/transform.ts
+++ b/packages/codemod/src/button-xs/transform.ts
@@ -31,7 +31,7 @@ const buttonTransform: Transform = (fileInfo, api) => {
/**
* Находим использование компонента Tag и меняем ему пропсы
*/
- source.findJSXElements('Tag').forEach(path => {
+ source.findJSXElements('Tag').forEach(path => {
j(path).replaceWith((path: ASTPath) => {
const { node } = path;
diff --git a/packages/confirmation/src/components/screens/index.ts b/packages/confirmation/src/components/screens/index.ts
index 1abea19de0..8d96385db1 100644
--- a/packages/confirmation/src/components/screens/index.ts
+++ b/packages/confirmation/src/components/screens/index.ts
@@ -2,4 +2,3 @@ export * from './initial';
export * from './hint';
export * from './fatal-error';
export * from './temp-block';
-
diff --git a/packages/date-input/src/Component.test.tsx b/packages/date-input/src/Component.test.tsx
index 21089d4e14..d22709e280 100644
--- a/packages/date-input/src/Component.test.tsx
+++ b/packages/date-input/src/Component.test.tsx
@@ -72,7 +72,9 @@ describe('DateInput', () => {
const onChange = jest.fn();
const onComplete = jest.fn();
const value = '01.01.2020';
- const { queryByRole } = render();
+ const { queryByRole } = render(
+ ,
+ );
const input = queryByRole('textbox') as HTMLInputElement;
diff --git a/packages/file-upload-item/src/Component.test.tsx b/packages/file-upload-item/src/Component.test.tsx
index c3175069f1..f1fcf7c1ac 100644
--- a/packages/file-upload-item/src/Component.test.tsx
+++ b/packages/file-upload-item/src/Component.test.tsx
@@ -77,7 +77,7 @@ describe('FileUploadItem', () => {
expect(cb.mock.calls[0][0]).toBe(fileId);
});
- it('should call `onDownload` prop', async() => {
+ it('should call `onDownload` prop', async () => {
const cb = jest.fn();
const fileId = 'id';
const { baseElement } = render(
diff --git a/packages/file-upload-item/src/component.screenshots.test.tsx b/packages/file-upload-item/src/component.screenshots.test.tsx
index dff281f41b..044158b9b1 100644
--- a/packages/file-upload-item/src/component.screenshots.test.tsx
+++ b/packages/file-upload-item/src/component.screenshots.test.tsx
@@ -83,14 +83,15 @@ describe(
}),
);
-
describe(
'FileUploadItem | ellipsis',
screenshotTesting({
cases: generateTestCases({
componentName: 'FileUploadItem',
knobs: {
- name: ['very-long-file-name-123-very-long-file-name-123-very-long-file-name-123.jpg'],
+ name: [
+ 'very-long-file-name-123-very-long-file-name-123-very-long-file-name-123.jpg',
+ ],
uploadDate: ['22.01.2018'],
size: [45000],
showRestore: [true],
diff --git a/packages/screenshot-utils/screenshots-story/components.ts b/packages/screenshot-utils/screenshots-story/components.ts
index ec4740ac3b..eede7cc4d1 100644
--- a/packages/screenshot-utils/screenshots-story/components.ts
+++ b/packages/screenshot-utils/screenshots-story/components.ts
@@ -1,8 +1,4 @@
-const req = require.context(
- '../../',
- true,
- /^\.\/(.*)\/src\/index.ts$/,
-);
+const req = require.context('../../', true, /^\.\/(.*)\/src\/index.ts$/);
const packages = req.keys().reduce((acc, key) => {
const packageName = key.split('/')[1];
diff --git a/packages/themes/src/mixins/click.css b/packages/themes/src/mixins/click.css
index a058b59566..89d3d0897c 100644
--- a/packages/themes/src/mixins/click.css
+++ b/packages/themes/src/mixins/click.css
@@ -27,7 +27,6 @@
--disabled-cursor: not-allowed;
--arrow-transform: rotate(-180deg);
- @mixin amount-click;
@mixin form-control-click;
@mixin input-click;
@mixin button-click;
@@ -51,4 +50,5 @@
@mixin dropzone-click;
@mixin code-input-click;
@mixin bottom-sheet-click;
+ @mixin amount-click;
}
diff --git a/packages/tooltip/src/Component.test.tsx b/packages/tooltip/src/Component.test.tsx
index 8f2b705b79..7bc31edf5b 100644
--- a/packages/tooltip/src/Component.test.tsx
+++ b/packages/tooltip/src/Component.test.tsx
@@ -12,7 +12,7 @@ import * as popoverModule from '@alfalab/core-components-popover';
import { Tooltip, TooltipProps } from './index';
jest.mock('react-transition-group', () => {
- return { CSSTransition: jest.fn((props) => (props.in ? props.children : null)) };
+ return { CSSTransition: jest.fn(props => (props.in ? props.children : null)) };
});
type PopoverComponent = {