braid-design-system - npm Package Compare versions

Comparing version 0.0.42 to 0.0.43

lib/atoms/color/makeBackgroundColors.ts

@@ -1,2 +0,2 @@
-export interface BackgroundColorParms {
+export interface BackgroundColorParams {
   input: string;
@@ -21,11 +21,13 @@ inputDisabled: string;
   critical,
-}: BackgroundColorParms) => ({
-  '.backgroundColor_input': { background: input },
-  '.backgroundColor_inputDisabled': { background: inputDisabled },
-  '.backgroundColor_formAccent': { background: formAccent },
-  '.backgroundColor_formAccentDisabled': { background: formAccentDisabled },
-  '.backgroundColor_selection': { background: selection },
-  '.backgroundColor_info': { background: info },
-  '.backgroundColor_card': { background: card },
-  '.backgroundColor_critical': { background: critical },
+}: BackgroundColorParams) => ({
+  '.backgroundColor_input': { backgroundColor: input },
+  '.backgroundColor_inputDisabled': { backgroundColor: inputDisabled },
+  '.backgroundColor_formAccent': { backgroundColor: formAccent },
+  '.backgroundColor_formAccentDisabled': {
+    backgroundColor: formAccentDisabled,
+  },
+  '.backgroundColor_selection': { backgroundColor: selection },
+  '.backgroundColor_info': { backgroundColor: info },
+  '.backgroundColor_card': { backgroundColor: card },
+  '.backgroundColor_critical': { backgroundColor: critical },
 });

lib/atoms/makeAtoms.ts

@@ -18,3 +18,3 @@ import merge from 'lodash/merge';
 import makeBackgroundColors, {
-  BackgroundColorParms,
+  BackgroundColorParams,
 } from './color/makeBackgroundColors';
@@ -39,3 +39,3 @@ import makeBoxShadows, { BoxShadowParams } from './makeBoxShadows';
   fontWeights: FontWeightParams,
-  backgroundColor: BackgroundColorParms,
+  backgroundColor: BackgroundColorParams,
 ): Css => {
@@ -42,0 +42,0 @@ const rules = merge(

lib/atoms/makeSizes.ts

@@ -42,3 +42,12 @@ import merge from 'lodash/merge';
 
+const width = {
+  '.width_full': { width: '100%' },
+};
+
 export default (tokens: Tokens) =>
-  merge({}, makeSizeRules(tokens, 'height'), makeSizeRules(tokens, 'width'));
+  merge(
+    {},
+    makeSizeRules(tokens, 'height'),
+    makeSizeRules(tokens, 'width'),
+    width,
+  );

lib/atoms/normalizeAtoms.ts

 import { Atoms } from '../themes/theme';
-import { CssModuleAtoms } from './types';
+import CssModuleAtoms from '../themes/wireframe/atoms.css.js.d';
 
-export default (reset: Atoms['reset'], atoms: CssModuleAtoms): Atoms => ({
+export default (
+  reset: Atoms['reset'],
+  atoms: typeof CssModuleAtoms,
+): Atoms => ({
   reset,
@@ -271,3 +274,4 @@ backgroundColor: {
     standardTextInline: atoms.width_standardTextInline,
+    full: atoms.width_full,
   },
 });

lib/atoms/types.ts

 export interface Css {
   [selector: string]: object;
 }
-
-export interface CssModuleAtoms {
-  backgroundColor_card: string;
-  backgroundColor_critical: string;
-  backgroundColor_formAccent: string;
-  backgroundColor_formAccentDisabled: string;
-  backgroundColor_info: string;
-  backgroundColor_input: string;
-  backgroundColor_inputDisabled: string;
-  backgroundColor_selection: string;
-  borderColor_critical: string;
-  borderColor_formAccent: string;
-  borderColor_standard: string;
-  borderRadius_standard: string;
-  borderWidth_standard: string;
-  boxShadow_focus: string;
-  color_black: string;
-  color_critical: string;
-  color_formAccent: string;
-  color_link: string;
-  color_neutral: string;
-  color_positive: string;
-  color_secondary: string;
-  color_white: string;
-  displayDesktop_block: string;
-  displayDesktop_flex: string;
-  displayDesktop_inline: string;
-  displayDesktop_inlineBlock: string;
-  displayDesktop_none: string;
-  display_block: string;
-  display_flex: string;
-  display_inline: string;
-  display_inlineBlock: string;
-  display_none: string;
-  fill_critical: string;
-  fill_currentColor: string;
-  fill_formAccent: string;
-  fill_formAccentDisabled: string;
-  fill_positive: string;
-  fill_secondary: string;
-  fill_white: string;
-  fontFamily_text: string;
-  fontSize_large: string;
-  fontSize_level1: string;
-  fontSize_level2: string;
-  fontSize_level3: string;
-  fontSize_standard: string;
-  fontWeight_medium: string;
-  fontWeight_regular: string;
-  fontWeight_strong: string;
-  height_largeText: string;
-  height_largeTextInline: string;
-  height_standardText: string;
-  height_standardTextInline: string;
-  marginBottomDesktop_large: string;
-  marginBottomDesktop_medium: string;
-  marginBottomDesktop_none: string;
-  marginBottomDesktop_small: string;
-  marginBottomDesktop_xlarge: string;
-  marginBottomDesktop_xsmall: string;
-  marginBottomDesktop_xxlarge: string;
-  marginBottomDesktop_xxsmall: string;
-  marginBottom_large: string;
-  marginBottom_medium: string;
-  marginBottom_none: string;
-  marginBottom_small: string;
-  marginBottom_xlarge: string;
-  marginBottom_xsmall: string;
-  marginBottom_xxlarge: string;
-  marginBottom_xxsmall: string;
-  marginLeftDesktop_gutter: string;
-  marginLeftDesktop_large: string;
-  marginLeftDesktop_medium: string;
-  marginLeftDesktop_none: string;
-  marginLeftDesktop_small: string;
-  marginLeftDesktop_xlarge: string;
-  marginLeftDesktop_xsmall: string;
-  marginLeftDesktop_xxlarge: string;
-  marginLeftDesktop_xxsmall: string;
-  marginLeft_gutter: string;
-  marginLeft_large: string;
-  marginLeft_medium: string;
-  marginLeft_none: string;
-  marginLeft_small: string;
-  marginLeft_xlarge: string;
-  marginLeft_xsmall: string;
-  marginLeft_xxlarge: string;
-  marginLeft_xxsmall: string;
-  marginRightDesktop_gutter: string;
-  marginRightDesktop_large: string;
-  marginRightDesktop_medium: string;
-  marginRightDesktop_none: string;
-  marginRightDesktop_small: string;
-  marginRightDesktop_xlarge: string;
-  marginRightDesktop_xsmall: string;
-  marginRightDesktop_xxlarge: string;
-  marginRightDesktop_xxsmall: string;
-  marginRight_gutter: string;
-  marginRight_large: string;
-  marginRight_medium: string;
-  marginRight_none: string;
-  marginRight_small: string;
-  marginRight_xlarge: string;
-  marginRight_xsmall: string;
-  marginRight_xxlarge: string;
-  marginRight_xxsmall: string;
-  marginTopDesktop_large: string;
-  marginTopDesktop_medium: string;
-  marginTopDesktop_none: string;
-  marginTopDesktop_small: string;
-  marginTopDesktop_xlarge: string;
-  marginTopDesktop_xsmall: string;
-  marginTopDesktop_xxlarge: string;
-  marginTopDesktop_xxsmall: string;
-  marginTop_large: string;
-  marginTop_medium: string;
-  marginTop_none: string;
-  marginTop_small: string;
-  marginTop_xlarge: string;
-  marginTop_xsmall: string;
-  marginTop_xxlarge: string;
-  marginTop_xxsmall: string;
-  paddingBottomDesktop_large: string;
-  paddingBottomDesktop_medium: string;
-  paddingBottomDesktop_none: string;
-  paddingBottomDesktop_small: string;
-  paddingBottomDesktop_xlarge: string;
-  paddingBottomDesktop_xsmall: string;
-  paddingBottomDesktop_xxlarge: string;
-  paddingBottomDesktop_xxsmall: string;
-  paddingBottomDesktop_standardTouchableText: string;
-  paddingBottom_large: string;
-  paddingBottom_medium: string;
-  paddingBottom_none: string;
-  paddingBottom_small: string;
-  paddingBottom_standardTouchableText: string;
-  paddingBottom_xlarge: string;
-  paddingBottom_xsmall: string;
-  paddingBottom_xxlarge: string;
-  paddingBottom_xxsmall: string;
-  paddingLeftDesktop_gutter: string;
-  paddingLeftDesktop_large: string;
-  paddingLeftDesktop_medium: string;
-  paddingLeftDesktop_none: string;
-  paddingLeftDesktop_small: string;
-  paddingLeftDesktop_xlarge: string;
-  paddingLeftDesktop_xsmall: string;
-  paddingLeftDesktop_xxlarge: string;
-  paddingLeftDesktop_xxsmall: string;
-  paddingLeft_gutter: string;
-  paddingLeft_large: string;
-  paddingLeft_medium: string;
-  paddingLeft_none: string;
-  paddingLeft_small: string;
-  paddingLeft_xlarge: string;
-  paddingLeft_xsmall: string;
-  paddingLeft_xxlarge: string;
-  paddingLeft_xxsmall: string;
-  paddingRightDesktop_gutter: string;
-  paddingRightDesktop_large: string;
-  paddingRightDesktop_medium: string;
-  paddingRightDesktop_none: string;
-  paddingRightDesktop_small: string;
-  paddingRightDesktop_xlarge: string;
-  paddingRightDesktop_xsmall: string;
-  paddingRightDesktop_xxlarge: string;
-  paddingRightDesktop_xxsmall: string;
-  paddingRight_gutter: string;
-  paddingRight_large: string;
-  paddingRight_medium: string;
-  paddingRight_none: string;
-  paddingRight_small: string;
-  paddingRight_xlarge: string;
-  paddingRight_xsmall: string;
-  paddingRight_xxlarge: string;
-  paddingRight_xxsmall: string;
-  paddingTopDesktop_large: string;
-  paddingTopDesktop_medium: string;
-  paddingTopDesktop_none: string;
-  paddingTopDesktop_small: string;
-  paddingTopDesktop_xlarge: string;
-  paddingTopDesktop_xsmall: string;
-  paddingTopDesktop_xxlarge: string;
-  paddingTopDesktop_xxsmall: string;
-  paddingTopDesktop_standardTouchableText: string;
-  paddingTop_large: string;
-  paddingTop_medium: string;
-  paddingTop_none: string;
-  paddingTop_small: string;
-  paddingTop_standardTouchableText: string;
-  paddingTop_xlarge: string;
-  paddingTop_xsmall: string;
-  paddingTop_xxlarge: string;
-  paddingTop_xxsmall: string;
-  transform_largeText: string;
-  transform_level1Heading: string;
-  transform_level2Heading: string;
-  transform_level3Heading: string;
-  transform_standardText: string;
-  transition_fast: string;
-  width_largeText: string;
-  width_largeTextInline: string;
-  width_standardText: string;
-  width_standardTextInline: string;
-}

lib/components/Checkbox/Checkbox.css.js

@@ -63,3 +63,2 @@ export default {
     // IE11:
-    width: '100%',
     height: '100%',
@@ -66,0 +65,0 @@ },

lib/components/Divider/Divider.css.js

@@ -7,3 +7,2 @@ export default {
     position: 'absolute',
-    width: '100%',
     borderBottomWidth: 0,
@@ -10,0 +9,0 @@ borderLeftWidth: 0,

lib/components/icons/Icon/Icon.css.js

@@ -6,3 +6,2 @@ export default {
   '.fillSize': {
-    width: '100%',
     height: '100%',
@@ -9,0 +8,0 @@ },

lib/components/Radio/Radio.css.js

@@ -55,3 +55,2 @@ export default {
     position: 'relative',
-    width: '100%',
     height: '100%',
@@ -58,0 +57,0 @@ borderRadius: '100%',

lib/themes/jobStreet/atoms.css.js.d.ts

@@ -201,2 +201,3 @@ // This file is automatically generated.
 export const transition_fast: string;
+export const width_full: string;
 export const width_largeText: string;
@@ -203,0 +204,0 @@ export const width_largeTextInline: string;

lib/themes/seekAnz/atoms.css.js.d.ts

@@ -201,2 +201,3 @@ // This file is automatically generated.
 export const transition_fast: string;
+export const width_full: string;
 export const width_largeText: string;
@@ -203,0 +204,0 @@ export const width_largeTextInline: string;

lib/themes/seekAsia/atoms.css.js.d.ts

@@ -201,2 +201,3 @@ // This file is automatically generated.
 export const transition_fast: string;
+export const width_full: string;
 export const width_largeText: string;
@@ -203,0 +204,0 @@ export const width_largeTextInline: string;

lib/themes/theme.d.ts

@@ -51,3 +51,3 @@ // Text definitions
 type BorderRadius = 'standard';
-type BorderShadow = 'focus';
+type BoxShadow = 'focus';
 export type Color =
@@ -160,2 +160,3 @@ | 'black'
   | 'largeTextInline';
+export type Width = 'full';
 type Spacing =
@@ -186,3 +187,3 @@ | 'none'
   borderWidth: Record<BorderWidth, string>;
-  boxShadow: Record<BorderShadow, string>;
+  boxShadow: Record<BoxShadow, string>;
   color: Record<Color, string>;
@@ -214,3 +215,3 @@ fill: Record<Fill, string>;
   transition: Record<Transition, string>;
-  width: Record<IconSize, string>;
+  width: Record<IconSize | Width, string>;
 }
@@ -217,0 +218,0 @@

lib/themes/wireframe/atoms.css.js.d.ts

@@ -201,2 +201,3 @@ // This file is automatically generated.
 export const transition_fast: string;
+export const width_full: string;
 export const width_largeText: string;
@@ -203,0 +204,0 @@ export const width_largeTextInline: string;

package.json

 {
   "name": "braid-design-system",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "Themeable design system for the SEEK Group",
@@ -120,3 +120,3 @@ "main": "lib/components/index.ts",
     "semantic-release": "^15.10.8",
-    "sku": "8.2.2",
+    "sku": "8.3.0",
     "style-loader": "^0.23.1",
@@ -123,0 +123,0 @@ "surge": "^0.20.1",

No alert changes

Improved metrics

Total package byte prevSize

6473374

increased by1.53%

Worsened metrics

Lines of code

49898

decreased by-0.29%

No dependency changes