@imtbl/design-system - npm Package Compare versions

Comparing version 0.0.20 to 0.0.21

dist/src/components/layout/box.component.d.ts

@@ -1,20 +0,3 @@
-export declare function Box({ children, className, testId, width, height, marginLeft, marginRight, marginTop, marginBottom, padding, margin, paddingLeft, paddingRight, paddingTop, paddingBottom, backgroundColor, backgroundGradient, }: {
-    children: any;
-    className?: string;
-    testId?: string;
-    width?: string;
-    height?: string;
-    padding?: string;
-    margin?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    paddingTop?: any;
-    paddingBottom?: any;
-    backgroundColor?: string;
-    backgroundGradient?: string;
-}): JSX.Element;
+import { BoxLayoutPropTypes } from '../../types';
+export declare function Box({ children, className, testId, ...props }: BoxLayoutPropTypes): JSX.Element;
 export declare namespace Box {
@@ -21,0 +4,0 @@ var defaultProps: {

dist/src/components/layout/flex-layout.component.d.ts

@@ -1,13 +0,3 @@
-import { FlexAlignItems, FlexDirection, FlexJustifyContent, FlexWrap } from 'src/types';
-export declare function FlexLayout({ children, className, testId, alignItems, flexDirection, justifyContent, flexWrap, width, height, }: {
-    children: any;
-    className?: string;
-    testId?: string;
-    alignItems?: FlexAlignItems;
-    flexDirection?: FlexDirection;
-    justifyContent?: FlexJustifyContent;
-    flexWrap?: FlexWrap;
-    width?: string;
-    height?: string;
-}): JSX.Element;
+import { FlexLayoutPropTypes } from 'src/types';
+export declare function FlexLayout({ children, className, testId, alignItems, flexDirection, justifyContent, flexWrap, ...props }: FlexLayoutPropTypes): JSX.Element;
 export declare namespace FlexLayout {
@@ -14,0 +4,0 @@ var defaultProps: {

dist/src/components/text/heading-text.component.d.ts

 import React from 'react';
-import { HeadingTextSizes, ResponsiveBreakpoint, TextAlign } from '../../types';
-export declare type HeadingTextPropTypes = {
-    children: any;
-    className?: string;
+import { BaseComponentPropTypes, HeadingTextSizes, ResponsiveBreakpoint, TextAlign } from '../../types';
+export interface HeadingTextPropTypes extends BaseComponentPropTypes {
     fontSize?: HeadingTextSizes;
@@ -12,5 +10,4 @@ textAlign?: TextAlign;
     responsiveTextAlign?: ResponsiveBreakpoint[];
-    testId?: string;
     semanticHeadingIndex?: 1 | 2 | 3 | 4 | 5 | 6;
-};
+}
 export declare function HeadingText({ children, className, fontSize, textAlign, fillColor, fillGradient, responsiveFontSize, testId, semanticHeadingIndex, responsiveTextAlign, }: HeadingTextPropTypes): React.ReactElement<{
@@ -17,0 +14,0 @@ 'data-testid': string | undefined;

dist/src/components/text/paragraph-text.component.d.ts

@@ -1,2 +0,2 @@
-import { TextPropTypes } from './simple-text.component';
+import { TextPropTypes } from '../../types';
 export declare function ParagraphText({ className, children, fontSize, testId, ...props }: TextPropTypes): JSX.Element;

dist/src/components/text/shared.d.ts

 import { ResponsiveBreakpoint } from 'src/types';
-export declare function renderColoringStyles({ fillColor, fillGradient }: {
+export declare function renderTextColoringStyles({ fillColor, fillGradient }: {
     fillColor: any;
@@ -4,0 +4,0 @@ fillGradient: any;

dist/src/components/text/simple-text.component.d.ts

@@ -1,16 +0,3 @@
-import { ResponsiveBreakpoint, SimpleTextSizes, TextAlign } from '../../types';
-export declare type TextPropTypes = {
-    children: any;
-    className?: string;
-    fontSize?: SimpleTextSizes;
-    fontStyle?: 'italic' | 'regular';
-    fontWeight?: 'regular' | 'bold';
-    textAlign?: TextAlign;
-    fillColor?: string;
-    fillGradient?: string;
-    responsiveFontSize?: ResponsiveBreakpoint[];
-    responsiveTextAlign?: ResponsiveBreakpoint[];
-    testId?: string;
-};
-export declare function SimpleText({ children, className, fontSize, fontWeight, fontStyle, textAlign, fillColor, fillGradient, responsiveFontSize, responsiveTextAlign, testId, }: TextPropTypes): JSX.Element;
+import { TextPropTypes } from '../../types';
+export declare function SimpleText({ children, className, testId, fontSize, fontWeight, fontStyle, textAlign, fillColor, fillGradient, responsiveFontSize, responsiveTextAlign, }: TextPropTypes): JSX.Element;
 export declare namespace SimpleText {
@@ -17,0 +4,0 @@ var defaultProps: {

dist/src/helpers/layout.helpers.d.ts

@@ -0,1 +1,2 @@
+import { BaseLayoutComponentPropTypes } from '../types';
 export declare const gridUnits: (multiplier: number) => string;
@@ -13,1 +14,2 @@ export declare const checkOutOfBounds: ({ x, y, left, top, width, height, tolerance, }: {
 export declare const waitForImageToLoad: (img: HTMLImageElement) => Promise<unknown>;
+export declare function buildLayoutComponentsCommonClassList(props: BaseLayoutComponentPropTypes): (string | null)[];

dist/src/types/breakpoints.types.d.ts

@@ -1,12 +0,1 @@
-import { HeadingTextSizes, SimpleTextSizes, TextAlign } from './typography.types';
-import { SpacingSizes } from './measurements.types';
 export declare const breakpointNames: readonly ["2x-small", "x-small", "small", "medium", "large", "x-large", "2x-large"];
-export declare type BreakpointSizes = typeof breakpointNames[number];
-export interface ResponsiveBreakpoint {
-    breakpoint: BreakpointSizes;
-    textAlign?: TextAlign;
-    fontSize?: HeadingTextSizes | SimpleTextSizes;
-    topSize?: SpacingSizes;
-    bottomSize?: SpacingSizes;
-    bothSize?: SpacingSizes;
-}

dist/src/types/button.types.d.ts

@@ -1,12 +0,9 @@
-import { ResponsiveBreakpoint } from './breakpoints.types';
+import { BaseComponentPropTypes, ResponsiveBreakpoint } from './shared.types';
 import { SimpleTextSizes, TextAlign } from './typography.types';
 export declare const buttonSizes: readonly ["normal", "large"];
 export declare type ButtonSizes = typeof buttonSizes[number];
-export declare type HyperlinkPropTypes = {
-    children: any;
-    className?: string;
-    testId?: string;
+export interface HyperlinkPropTypes extends BaseComponentPropTypes {
     href?: string;
     to?: string;
-};
+}
 export interface StyledHyperlinkPropTypes extends HyperlinkPropTypes {
@@ -22,8 +19,5 @@ fontSize?: SimpleTextSizes;
 }
-export declare type StandardButtonPropTypes = {
-    children: any;
-    className?: string;
+export interface StandardButtonPropTypes extends BaseComponentPropTypes {
     size?: ButtonSizes;
     responsiveSize?: ResponsiveBreakpoint[];
-    testId?: string;
     href?: string;
@@ -36,2 +30,2 @@ to?: string;
     icon?: string;
-};
+}

dist/src/types/index.d.ts

@@ -8,1 +8,2 @@ export * from './typography.types';
 export * from './button.types';
+export * from './shared.types';

dist/src/types/layout.types.d.ts

@@ -0,1 +1,2 @@
+import { BaseComponentPropTypes } from './shared.types';
 export declare type FlexAlignContent = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch';
@@ -6,1 +7,25 @@ export declare type FlexAlignItems = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
 export declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export declare type BaseLayoutComponentPropTypes = {
+    width?: string;
+    height?: string;
+    padding?: string;
+    margin?: string;
+    marginTop?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    paddingTop?: any;
+    paddingBottom?: any;
+    backgroundColor?: string;
+    backgroundGradient?: string;
+};
+export interface BoxLayoutPropTypes extends BaseLayoutComponentPropTypes, BaseComponentPropTypes {
+}
+export interface FlexLayoutPropTypes extends BaseLayoutComponentPropTypes, BaseComponentPropTypes {
+    alignItems?: FlexAlignItems;
+    flexDirection?: FlexDirection;
+    justifyContent?: FlexJustifyContent;
+    flexWrap?: FlexWrap;
+}

dist/src/types/measurements.types.d.ts

 export declare const spacingAmounts: readonly ["2x-small", "x-small", "small", "medium", "large", "x-large", "2x-large", "3x-large", "4x-large", "5x-large", "6x-large", "7x-large", "8x-large", "9x-large"];
-export declare type SpacingSizes = typeof spacingAmounts[number];

package.json

 {
   "name": "@imtbl/design-system",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "A repository to house all design system components utilised inside of IMX GUI",
@@ -17,3 +17,3 @@ "main": "dist/index.js",
     "npm": ">=6.14.8",
-    "node": ">=12.18.4"
+    "node": ">=14.14.0"
   },
@@ -35,3 +35,3 @@ "scripts": {
     "test:run": "cypress run",
-    "posttest:run": "nyc report --check-coverage --lines 90"
+    "posttest:run": "nyc report --check-coverage --lines 95"
   },
@@ -75,4 +75,4 @@ "lint-staged": {
     "@rollup/plugin-babel": "^5.2.1",
-    "@rollup/plugin-commonjs": "^15.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-url": "^5.0.1",
@@ -95,3 +95,3 @@ "@types/classnames": "^2.2.10",
     "css-loader": "^5.0.0",
-    "cypress": "^5.3.0",
+    "cypress": "^5.5.0",
     "cypress-react-unit-test": "^4.16.0",
@@ -98,0 +98,0 @@ "eslint": "^7.11.0",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

394575

increased by4.19%

Number of package files

49

increased by6.52%

Lines of code

1456

increased by4.6%

Number of low supply chain risk alerts

113

decreased by-1.74%

No dependency changes