braid-design-system - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

lib/componentDocs/componentDocs.json

@@ -283,2 +283,100 @@ {
   },
+  "Text": {
+    "description": "",
+    "displayName": "Text",
+    "methods": [],
+    "props": {
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "lib/components/Text/Text.tsx",
+          "name": "Props"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "component": {
+        "defaultValue": null,
+        "description": "",
+        "name": "component",
+        "parent": {
+          "fileName": "lib/components/Text/Text.tsx",
+          "name": "Props"
+        },
+        "required": false,
+        "type": {
+          "name": "string | ComponentClass<any, any> | FunctionComponent<any>"
+        }
+      },
+      "size": {
+        "defaultValue": null,
+        "description": "",
+        "name": "size",
+        "parent": {
+          "fileName": "lib/components/Text/Text.tsx",
+          "name": "Props"
+        },
+        "required": false,
+        "type": {
+          "name": "\"large\" | \"standard\" | \"interaction\""
+        }
+      },
+      "color": {
+        "defaultValue": null,
+        "description": "",
+        "name": "color",
+        "parent": {
+          "fileName": "lib/components/Text/Text.tsx",
+          "name": "Props"
+        },
+        "required": false,
+        "type": {
+          "name": "\"formAccent\" | \"critical\" | \"black\" | \"white\" | \"positive\" | \"secondary\" | \"neutral\""
+        }
+      },
+      "weight": {
+        "defaultValue": null,
+        "description": "",
+        "name": "weight",
+        "parent": {
+          "fileName": "lib/components/Text/Text.tsx",
+          "name": "Props"
+        },
+        "required": false,
+        "type": {
+          "name": "\"strong\" | \"regular\""
+        }
+      },
+      "baseline": {
+        "defaultValue": null,
+        "description": "",
+        "name": "baseline",
+        "parent": {
+          "fileName": "lib/components/Text/Text.tsx",
+          "name": "Props"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "theme": {
+        "defaultValue": null,
+        "description": "",
+        "name": "theme",
+        "parent": {
+          "fileName": "braid-design-system/lib/components/private/withTheme.tsx",
+          "name": "WithOverrideThemeProps"
+        },
+        "required": false,
+        "type": {
+          "name": "Theme"
+        }
+      }
+    }
+  },
   "ThemeProvider": {
@@ -694,81 +792,2 @@ "description": "",
   },
-  "Text": {
-    "description": "",
-    "displayName": "Text",
-    "methods": [],
-    "props": {
-      "theme": {
-        "type": {
-          "name": "object"
-        },
-        "required": true,
-        "description": "",
-        "defaultValue": null
-      },
-      "component": {
-        "type": {
-          "name": "string | func"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": null
-      },
-      "size": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "standard"
-        }
-      },
-      "color": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "neutral"
-        }
-      },
-      "weight": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "regular"
-        }
-      },
-      "baseline": {
-        "type": {
-          "name": "bool"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "true"
-        }
-      },
-      "className": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": null
-      },
-      "children": {
-        "type": {
-          "name": "node"
-        },
-        "required": true,
-        "description": "",
-        "defaultValue": null
-      }
-    }
-  },
   "ChevronIcon": {
@@ -775,0 +794,0 @@ "description": "",

lib/components/Checkbox/Checkbox.js

@@ -224,3 +224,2 @@ import React from 'react';
                 size="interaction"
-                baseline={false}
                 color={textColorForState({ disabled, hovered })}
@@ -227,0 +226,0 @@ {...(checked && children ? { weight: 'strong' } : {})}

lib/components/Radio/Radio.js

@@ -202,3 +202,2 @@ import React from 'react';
                 size="interaction"
-                baseline={false}
                 color={textColorForState({ disabled, hovered })}
@@ -205,0 +204,0 @@ >

lib/themes/jobStreet/atoms/atoms.ts

@@ -26,3 +26,4 @@ // Baseline styles, designed to be easily overriden
 export { default as paddingLeft } from './padding/paddingLeft.css.js';
+export { default as transform } from './transform.css.js';
 export { default as transition } from './transition.css.js';
 export { default as width } from './width.css.js';

lib/themes/seekAnz/atoms/atoms.ts

@@ -26,3 +26,4 @@ // Baseline styles, designed to be easily overriden
 export { default as paddingLeft } from './padding/paddingLeft.css.js';
+export { default as transform } from './transform.css.js';
 export { default as transition } from './transition.css.js';
 export { default as width } from './width.css.js';

lib/themes/seekAnz/atoms/font/fontFamily.css.js

 export default {
   '.text': {
-    fontFamily: '"Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif'
+    fontFamily:
+      'Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif'
   }
 };

lib/themes/seekAsia/atoms/atoms.ts

@@ -26,3 +26,4 @@ // Baseline styles, designed to be easily overriden
 export { default as paddingLeft } from './padding/paddingLeft.css.js';
+export { default as transform } from './transform.css.js';
 export { default as transition } from './transition.css.js';
 export { default as width } from './width.css.js';

lib/themes/theme.d.ts

@@ -48,3 +48,3 @@ // Text definitions
 type BorderShadowVariants = 'focus';
-type ColorVariants =
+export type ColorVariants =
   | 'black'
@@ -66,4 +66,4 @@ | 'white'
 type FontFamilyVariants = 'text';
-type FontSizeVariants = 'standard' | 'interaction' | 'large';
-type FontWeightVariants = 'regular' | 'strong';
+export type FontSizeVariants = TextSize | 'interaction';
+export type FontWeightVariants = 'regular' | 'strong';
 type ResetTags =
@@ -165,2 +165,3 @@ | 'html'
 type HorizontalSpacingVariants = SpacingVariants | 'gutter';
+export type TransformVariants = 'standardText' | 'largeText';
 type TransitionVariants = 'fast';
@@ -189,2 +190,3 @@
   paddingLeft: Record<HorizontalSpacingVariants, string>;
+  transform: Record<TransformVariants, string>;
   transition: Record<TransitionVariants, string>;
@@ -191,0 +193,0 @@ width: Record<SizeVariants, string>;

lib/themes/utils/fontSizeRulesForTokens.js

@@ -1,3 +0,3 @@
-import basekick from 'basekick';
 import merge from 'lodash/merge';
+import alignTextToGrid from './alignTextToGrid';
 import createResponsiveRules from './createResponsiveRules';
@@ -7,11 +7,2 @@ import { px } from './toUnit';
 export default ({ tokens }) => {
-  const size = (fontSize, rows) =>
-    basekick({
-      baseFontSize: 1,
-      typeSizeModifier: fontSize,
-      typeRowSpan: rows,
-      gridRowHeight: tokens.rowHeight,
-      descenderHeightScale: tokens.descenderHeightScale
-    });
-
   const rules = [];
@@ -21,5 +12,20 @@ Object.keys(tokens.text).forEach(typeName => {
 
-    const mobileRules = size(type.mobile.size, type.mobile.rows);
-    const desktopRules = size(type.desktop.size, type.desktop.rows);
+    const {
+      fontSize: mobileFontSize,
+      lineHeight: mobileLineHeight
+    } = alignTextToGrid(type.mobile, tokens);
+    const {
+      fontSize: desktopFontSize,
+      lineHeight: desktopLineHeight
+    } = alignTextToGrid(type.desktop, tokens);
 
+    const mobileRules = {
+      fontSize: mobileFontSize,
+      lineHeight: mobileLineHeight
+    };
+    const desktopRules = {
+      fontSize: desktopFontSize,
+      lineHeight: desktopLineHeight
+    };
+
     rules.push(
@@ -53,3 +59,3 @@ createResponsiveRules({
           desktopRules: {
-            ...mobileRules,
+            ...desktopRules,
             paddingTop: desktopInteractionPadding,
@@ -56,0 +62,0 @@ paddingBottom: desktopInteractionPadding

lib/themes/wireframe/atoms/atoms.ts

@@ -26,3 +26,4 @@ // Baseline styles, designed to be easily overriden
 export { default as paddingLeft } from './padding/paddingLeft.css.js';
+export { default as transform } from './transform.css.js';
 export { default as transition } from './transition.css.js';
 export { default as width } from './width.css.js';

package.json

 {
   "name": "braid-design-system",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Themeable design system for the SEEK Group",
@@ -5,0 +5,0 @@ "main": "lib/components/index.js",

No alert changes

Improved metrics

Number of package files

388

increased by3.19%

Lines of code

10055

increased by1.12%

Worsened metrics

Total package byte prevSize

3777966

decreased by-1%

No dependency changes