mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Adding types file to Box component (#18009)
This commit is contained in:
George Marshall
GitHub
parent
6222cf0b7d
commit
848b699f68
@ -12,6 +12,7 @@ module.exports = {
|
||||
features: { buildStoriesJson: true },
|
||||
stories: [
|
||||
'../ui/**/*.stories.js',
|
||||
'../ui/**/*.stories.tsx',
|
||||
'../ui/**/*.stories.mdx',
|
||||
'./*.stories.mdx',
|
||||
],
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"**/jest-coverage/**/*",
|
||||
"**/__mocks__/**/*",
|
||||
"**/storybook-build/**/*",
|
||||
"**/*.stories.*",
|
||||
".storybook/**/*",
|
||||
"builds/**/*",
|
||||
"dist/**/*",
|
||||
|
||||
131
ui/components/ui/box/box.d.ts
vendored
Normal file
131
ui/components/ui/box/box.d.ts
vendored
Normal file
@ -0,0 +1,131 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import {
|
||||
AlignItems,
|
||||
BLOCK_SIZES,
|
||||
BorderStyle,
|
||||
BackgroundColor,
|
||||
BorderColor,
|
||||
TextColor,
|
||||
IconColor,
|
||||
DISPLAY,
|
||||
JustifyContent,
|
||||
TEXT_ALIGN,
|
||||
FLEX_DIRECTION,
|
||||
FLEX_WRAP,
|
||||
BorderRadius,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
export type BoxChildren = React.ReactNode | ((...args: any[]) => any);
|
||||
|
||||
export type BoxFlexDirection = typeof FLEX_DIRECTION;
|
||||
export type BoxFlexDirectionArray = [
|
||||
BoxFlexDirection[keyof BoxFlexDirection],
|
||||
BoxFlexDirection[keyof BoxFlexDirection]?,
|
||||
BoxFlexDirection[keyof BoxFlexDirection]?,
|
||||
BoxFlexDirection[keyof BoxFlexDirection]?,
|
||||
];
|
||||
|
||||
export type BoxFlexWrap = typeof FLEX_WRAP;
|
||||
export type BoxFlexWrapArray = [
|
||||
BoxFlexWrap[keyof BoxFlexWrap],
|
||||
BoxFlexWrap[keyof BoxFlexWrap]?,
|
||||
BoxFlexWrap[keyof BoxFlexWrap]?,
|
||||
BoxFlexWrap[keyof BoxFlexWrap]?,
|
||||
];
|
||||
|
||||
export type BoxTextAlign = typeof TEXT_ALIGN;
|
||||
export type BoxTextAlignArray = [
|
||||
BoxTextAlign[keyof BoxTextAlign],
|
||||
BoxTextAlign[keyof BoxTextAlign]?,
|
||||
BoxTextAlign[keyof BoxTextAlign]?,
|
||||
BoxTextAlign[keyof BoxTextAlign]?,
|
||||
];
|
||||
|
||||
export type BoxDisplay = typeof DISPLAY;
|
||||
export type BoxDisplayArray = [
|
||||
BoxDisplay[keyof BoxDisplay],
|
||||
BoxDisplay[keyof BoxDisplay]?,
|
||||
BoxDisplay[keyof BoxDisplay]?,
|
||||
BoxDisplay[keyof BoxDisplay]?,
|
||||
];
|
||||
|
||||
export type BoxWidth = typeof BLOCK_SIZES;
|
||||
export type BoxWidthArray = [
|
||||
BoxWidth[keyof BoxWidth],
|
||||
BoxWidth[keyof BoxWidth]?,
|
||||
BoxWidth[keyof BoxWidth]?,
|
||||
BoxWidth[keyof BoxWidth]?,
|
||||
];
|
||||
|
||||
export type BoxHeight = typeof BLOCK_SIZES;
|
||||
export type BoxHeightArray = [
|
||||
BoxHeight[keyof BoxHeight],
|
||||
BoxHeight[keyof BoxHeight]?,
|
||||
BoxHeight[keyof BoxHeight]?,
|
||||
BoxHeight[keyof BoxHeight]?,
|
||||
];
|
||||
|
||||
export type SizeNumber =
|
||||
| 0
|
||||
| 1
|
||||
| 2
|
||||
| 3
|
||||
| 4
|
||||
| 5
|
||||
| 6
|
||||
| 7
|
||||
| 8
|
||||
| 9
|
||||
| 10
|
||||
| 11
|
||||
| 12
|
||||
| null
|
||||
| undefined;
|
||||
|
||||
export type Size =
|
||||
| SizeNumber
|
||||
| [SizeNumber, SizeNumber?, SizeNumber?, SizeNumber?];
|
||||
|
||||
export interface BoxProps {
|
||||
children?: React.ReactNode;
|
||||
flexDirection?:
|
||||
| BoxFlexDirection[keyof BoxFlexDirection]
|
||||
| BoxFlexDirectionArray;
|
||||
flexWrap?: BoxFlexWrap[keyof BoxFlexWrap] | BoxFlexWrapArray;
|
||||
gap?: Size;
|
||||
margin?: Size;
|
||||
marginTop?: Size;
|
||||
marginBottom?: Size;
|
||||
marginRight?: Size;
|
||||
marginLeft?: Size;
|
||||
marginInline?: Size;
|
||||
marginInlineStart?: Size;
|
||||
marginInlineEnd?: Size;
|
||||
padding?: Size;
|
||||
paddingTop?: Size;
|
||||
paddingBottom?: Size;
|
||||
paddingRight?: Size;
|
||||
paddingLeft?: Size;
|
||||
paddingInline?: Size;
|
||||
paddingInlineStart?: Size;
|
||||
paddingInlineEnd?: Size;
|
||||
borderColor?: BorderColor;
|
||||
borderWidth?: Size;
|
||||
borderRadius?: BorderRadius;
|
||||
borderStyle?: BorderStyle;
|
||||
alignItems?: AlignItems;
|
||||
justifyContent?: JustifyContent;
|
||||
textAlign?: BoxTextAlign[keyof BoxTextAlign] | BoxTextAlignArray;
|
||||
display?: BoxDisplay[keyof BoxDisplay] | BoxDisplayArray;
|
||||
width?: BoxWidth[keyof BoxWidth] | BoxWidthArray;
|
||||
height?: BoxHeight[keyof BoxHeight] | BoxHeightArray;
|
||||
backgroundColor?: BackgroundColor;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
as?: keyof HTMLElementTagNameMap;
|
||||
color?: TextColor | IconColor | string; // TODO: remove string when someone smarter figures out the issue with the color prop
|
||||
}
|
||||
|
||||
declare const Box: React.FC<BoxProps>;
|
||||
export default Box;
|
||||
@ -302,7 +302,7 @@ import Typography from '../../ui/typography';
|
||||
Use the `boxProps` prop object to pass any valid [Box](/?path=/story/components-ui-box--default-story) component props to the Typography component. `boxProps` will overwrite the `margin` prop
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-ui-typography--box-props" />
|
||||
<Story id="components-ui-typography--box-props-story" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
|
||||
@ -375,7 +375,7 @@ Margin.args = {
|
||||
margin: 4,
|
||||
};
|
||||
|
||||
export const BoxProps = (args) => (
|
||||
export const BoxPropsStory = (args) => (
|
||||
<>
|
||||
<BannerAlert
|
||||
severity={SEVERITIES.WARNING}
|
||||
@ -390,7 +390,7 @@ export const BoxProps = (args) => (
|
||||
</>
|
||||
);
|
||||
|
||||
BoxProps.args = {
|
||||
BoxPropsStory.args = {
|
||||
color: TextColor.textDefault,
|
||||
boxProps: {
|
||||
backgroundColor: BackgroundColor.infoMuted,
|
||||
@ -399,3 +399,5 @@ BoxProps.args = {
|
||||
borderRadius: 4,
|
||||
},
|
||||
};
|
||||
|
||||
BoxPropsStory.storyName = 'BoxProps';
|
||||
|
||||
33
yarn.lock
33
yarn.lock
@ -808,14 +808,14 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@babel/plugin-syntax-flow@npm:^7.12.1":
|
||||
version: 7.12.1
|
||||
resolution: "@babel/plugin-syntax-flow@npm:7.12.1"
|
||||
"@babel/plugin-syntax-flow@npm:^7.18.6":
|
||||
version: 7.18.6
|
||||
resolution: "@babel/plugin-syntax-flow@npm:7.18.6"
|
||||
dependencies:
|
||||
"@babel/helper-plugin-utils": ^7.10.4
|
||||
"@babel/helper-plugin-utils": ^7.18.6
|
||||
peerDependencies:
|
||||
"@babel/core": ^7.0.0-0
|
||||
checksum: 9c57968346838966ac7ba15bb282ba62e8d81a5e065d2b627ab4069e47205435cf33e54e241317986621128954d0fbe32f19f605e66d89630f29b615c7af951e
|
||||
checksum: abe82062b3eef14de7d2b3c0e4fecf80a3e796ca497e9df616d12dd250968abf71495ee85a955b43a6c827137203f0c409450cf792732ed0d6907c806580ea71
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@ -1095,15 +1095,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@babel/plugin-transform-flow-strip-types@npm:^7.12.1":
|
||||
version: 7.12.1
|
||||
resolution: "@babel/plugin-transform-flow-strip-types@npm:7.12.1"
|
||||
"@babel/plugin-transform-flow-strip-types@npm:^7.18.6":
|
||||
version: 7.21.0
|
||||
resolution: "@babel/plugin-transform-flow-strip-types@npm:7.21.0"
|
||||
dependencies:
|
||||
"@babel/helper-plugin-utils": ^7.10.4
|
||||
"@babel/plugin-syntax-flow": ^7.12.1
|
||||
"@babel/helper-plugin-utils": ^7.20.2
|
||||
"@babel/plugin-syntax-flow": ^7.18.6
|
||||
peerDependencies:
|
||||
"@babel/core": ^7.0.0-0
|
||||
checksum: 5b6929ae7fb7d516cabbc6d10cc8cf6a25c11a04d6d6a872cad19505e6a36693f1b072e9cf5d3475113e4c8400cad5a164127d98cbfae562c32cf0c89212424a
|
||||
checksum: a45951c57265c366f95db9a5e70a62cfc3eafafa3f3d23295357577b5fc139d053d45416cdbdf4a0a387e41cefc434ab94dd6c3048d03b094ff6d041dd10a0b0
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@ -1527,14 +1527,15 @@ __metadata:
|
||||
linkType: hard
|
||||
|
||||
"@babel/preset-flow@npm:^7.12.1":
|
||||
version: 7.12.1
|
||||
resolution: "@babel/preset-flow@npm:7.12.1"
|
||||
version: 7.18.6
|
||||
resolution: "@babel/preset-flow@npm:7.18.6"
|
||||
dependencies:
|
||||
"@babel/helper-plugin-utils": ^7.10.4
|
||||
"@babel/plugin-transform-flow-strip-types": ^7.12.1
|
||||
"@babel/helper-plugin-utils": ^7.18.6
|
||||
"@babel/helper-validator-option": ^7.18.6
|
||||
"@babel/plugin-transform-flow-strip-types": ^7.18.6
|
||||
peerDependencies:
|
||||
"@babel/core": ^7.0.0-0
|
||||
checksum: 0edb0a8eaa59f2bd07249e0e420d6861e9429ecfef77014aa54a0c118802968d8d71bc0d97ba7bbf0f105cebf126cedafd4b15a2a1cff7cb44bfc1966f344288
|
||||
checksum: 9100d4eab3402e6601e361a5b235e46d90cfd389c12db19e2a071e1082ca2a00c04bd47eb185ce68d8979e7c8f3e548cd5d61b86dcd701135468fb929c3aecb6
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user