@edirect/frontend-foundations - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/components/Typography/Typography.d.ts

 import { ReactElement } from 'react';
 import { TypographyPropsType } from '../../shared/types/typography.type.js';
-declare const Typography: ({ element, type, align, className, children, ...rest }: TypographyPropsType) => ReactElement;
+declare const Typography: ({ element, className, children, ...rest }: TypographyPropsType) => ReactElement;
 export default Typography;

dist/components/Typography/Typography.js

@@ -10,4 +10,54 @@ "use strict";
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var S = _interopRequireWildcard(require("./Typography.styles.js"));
 
+function _getRequireWildcardCache(nodeInterop) {
+  if (typeof WeakMap !== "function") return null;
+  var cacheBabelInterop = new WeakMap();
+  var cacheNodeInterop = new WeakMap();
+  return (_getRequireWildcardCache = function (nodeInterop) {
+    return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+  })(nodeInterop);
+}
+
+function _interopRequireWildcard(obj, nodeInterop) {
+  if (!nodeInterop && obj && obj.__esModule) {
+    return obj;
+  }
+
+  if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+    return {
+      default: obj
+    };
+  }
+
+  var cache = _getRequireWildcardCache(nodeInterop);
+
+  if (cache && cache.has(obj)) {
+    return cache.get(obj);
+  }
+
+  var newObj = {};
+  var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+  for (var key in obj) {
+    if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+      var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+      if (desc && (desc.get || desc.set)) {
+        Object.defineProperty(newObj, key, desc);
+      } else {
+        newObj[key] = obj[key];
+      }
+    }
+  }
+
+  newObj.default = obj;
+
+  if (cache) {
+    cache.set(obj, newObj);
+  }
+
+  return newObj;
+}
+
 function _interopRequireDefault(obj) {
@@ -21,4 +71,2 @@ return obj && obj.__esModule ? obj : {
   element = 'p',
-  type = 'bodyS',
-  align = 'left',
   className,
@@ -28,22 +76,7 @@ children,
 }) => {
-  const createTypographyElement = () => {
-    const Element = _styledComponents.default[element]`
-      text-align: ${align};
-      font-size: ${({
-      theme
-    }) => theme.typography[type].fontSize};
-      font-weight: ${({
-      theme
-    }) => theme.typography[type].fontWeight};
-      line-height: ${({
-      theme
-    }) => theme.typography[type].lineHeight};
-    `;
-    return /*#__PURE__*/_react.default.createElement(Element, {
-      className: className,
-      ...rest
-    }, children);
-  };
-
-  return createTypographyElement();
+  return /*#__PURE__*/_react.default.createElement(S.TyporaphyDefault, {
+    as: element,
+    className: className,
+    ...rest
+  }, children);
 };
@@ -50,0 +83,0 @@

dist/shared/types/typography.type.d.ts

@@ -0,1 +1,2 @@
+import { ReactNode } from 'react';
 import { typographyBreakPoints } from './bolttech-theme-provider.type.js';
@@ -6,2 +7,3 @@ declare type TextElementsType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span' | 'p';
     className?: string;
+    children?: ReactNode | ReactNode[];
     element?: TextElementsType;
@@ -8,0 +10,0 @@ type?: typographyBreakPoints;

dist/style/BolttechThemeProvider.js

@@ -23,13 +23,18 @@ "use strict";
 
+const GlobalColorClasses = (0, _styledComponents.createGlobalStyle)`
+  ${(0, _styledComponents.css)`
+    ${props => (0, _styleUtils.createColorClasses)(props.theme)}
+  `}
+`;
+
 const BolttechThemeProvider = ({
   children,
   theme = _index.bolttechTheme
-}) => {
-  const GlobalColorClasses = (0, _styledComponents.createGlobalStyle)`${(0, _styleUtils.createColorClasses)(theme)}`;
-  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/_react.default.createElement(GlobalColorClasses, null), children);
-};
+}) => /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+  theme: theme
+}, /*#__PURE__*/_react.default.createElement(GlobalColorClasses, {
+  theme: theme
+}), children);
 
 var _default = BolttechThemeProvider;
 exports.default = _default;

package.json

 {
   "name": "@edirect/frontend-foundations",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Frontend Foundations",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -169,2 +169,37 @@ [![N|Solid](https://www.bolttech.co.th/blog/wp-content/uploads/2020/10/logo.png)](https://bolttech.io)
 | Navy -- secondary-base (#170F4F)     | text-secondary-base | bg-secondary-base | fill-secondary-base |
-| Yellow (600) -- accent-600 (#E9E133) | text-accent-600     | bg-accent-600     | fill-accent-600     |
+| Yellow (600) -- accent-600 (#E9E133) | text-accent-600     | bg-accent-600     | fill-accent-600     |
+
+## Default Theme - bolttech
+The foundations came with a preset of colors, paddings, spacings, typography and tokens, these presets are the default
+theme or bolttech theme.
+
+Here is the structure of theme:
+```typescript
+type bolttechTheme = {
+    colors: Record<colors, Record<string, string>>;
+    paddingScale: Record<paddingScaleType, string>;
+    spacingScale: Record<spacingScaleType, string>;
+    typography: Record<typographyBreakPoints, TypographyProps>;
+    effects: EffectType;
+    tokens?: Record<string, unknown>;
+}
+```
+***
+In some cases you will need to write a theme for a specific partner and/or flow.
+To do that you just need to override the theme object with the properties that you want.
+
+Example: Override the base primary color.
+```typescript
+import { bolttechTheme } from '@edirect/frontend-foundations';
+
+const customTheme = {
+    ...bolttechTheme,
+    colors: {
+        ...bolttechTheme.colors,
+        primary: {
+            ...bolttechTheme.colors.primary,
+            base: '#f3f3f3',
+        }
+    }
+}
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

183928

increased by1.61%

Number of package files

286

increased by1.06%

Lines of code

1247

increased by4.88%

Number of lines in readme file

205

increased by21.3%

Worsened metrics

Number of downloads

18

decreased by-78.57%

No dependency changes