@hig/themes - npm Package Compare versions

Comparing version 0.1.0-alpha.2e38833e to 0.1.0-alpha.39d3c760

build/index.es.js

@@ -9,2 +9,7 @@ import PropTypes from 'prop-types';
 
+var HIGDarkBlueTheme = {
+  themeId: 'hig-dark-blue',
+  themeClass: 'hig--dark-blue-theme'
+};
+
 var MatrixTheme = {
@@ -87,3 +92,4 @@ themeId: 'matrix',
     value: function render() {
-      return this.props.children(this.context);
+      var theme = this.context.themeId && this.context.themeClass ? this.context : HIGLightTheme;
+      return this.props.children(theme);
     }
@@ -116,2 +122,2 @@ }]);
 
-export { HIGLightTheme, MatrixTheme, index as ThemeContext };
+export { HIGLightTheme, HIGDarkBlueTheme, MatrixTheme, index as ThemeContext };

build/index.js

@@ -15,2 +15,7 @@ 'use strict';
 
+var HIGDarkBlueTheme = {
+  themeId: 'hig-dark-blue',
+  themeClass: 'hig--dark-blue-theme'
+};
+
 var MatrixTheme = {
@@ -93,3 +98,4 @@ themeId: 'matrix',
     value: function render() {
-      return this.props.children(this.context);
+      var theme = this.context.themeId && this.context.themeClass ? this.context : HIGLightTheme;
+      return this.props.children(theme);
     }
@@ -123,3 +129,4 @@ }]);
 exports.HIGLightTheme = HIGLightTheme;
+exports.HIGDarkBlueTheme = HIGDarkBlueTheme;
 exports.MatrixTheme = MatrixTheme;
 exports.ThemeContext = index;

package.json

 {
   "name": "@hig/themes",
-  "version": "0.1.0-alpha.2e38833e",
+  "version": "0.1.0-alpha.39d3c760",
   "description": "HIG theme definitions and supporting components",
@@ -8,10 +8,10 @@ "author": "Autodesk Inc.",
   "homepage": "https://hig.autodesk.com",
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "build/index.js",
   "module": "build/index.es.js",
-  "dependencies": {
-    "@hig/banner": "0.2.0-alpha.2e38833e",
-    "@hig/styles": "0.1.0-alpha.2e38833e"
-  },
   "devDependencies": {
-    "@hig/scripts": "0.2.0-alpha.2e38833e"
+    "@hig/scripts": "0.2.0-alpha.39d3c760",
+    "@hig/styles": "0.1.0-alpha.39d3c760"
   },
@@ -18,0 +18,0 @@ "peerDependencies": {

README.md

@@ -5,2 +5,8 @@ # ThemeContext component
 
+## Getting started
+
+```
+yarn add @hig/themes
+```
+
 ## Provide a theme to components
@@ -15,2 +21,2 @@ ```
 }
-```
+```

src/__stories__/ThemeContext.stories.js

@@ -9,11 +9,12 @@ import React from "react";
 
-import Banner from "@hig/banner";
+import Banner, { AVAILABLE_TYPES as BANNER_TYPES } from "@hig/banner";
 import readme from '../../README.md';
 import ThemeContext from "../ThemeContext";
 import HIGLightTheme from "../themes/HIGLightTheme";
+import HIGDarkBlueTheme from "../themes/HIGDarkBlueTheme";
 import MatrixTheme from "../themes/MatrixTheme";
 
-const typeOptions = makeSelectOptions(Banner.types);
 const themeOptions = {
   "hig-light": "HIG Light",
+  "hig-dark-blue": "HIG Dark Blue",
   "matrix": "BIM360 Matrix"
@@ -24,2 +25,3 @@ }
   "hig-light": HIGLightTheme,
+  "hig-dark-blue": HIGDarkBlueTheme,
   "matrix": MatrixTheme
@@ -36,8 +38,13 @@ }
   const theme = select('Theme', themeOptions, 'hig-light');
-  const bannerType = select("Banner type", typeOptions, Banner.types[0]);
   return (
     <ThemeContext.Provider value={themes[theme]}>
-      <Banner type={bannerType}>{`This message presented in ${themeOptions[theme]} theme`}</Banner>
+      <div>
+        {BANNER_TYPES.map((type) => (
+          <div style={{ marginBottom: "20px" }}>
+            <Banner type={type}>{`This ${type} message presented in ${themeOptions[theme]} theme`}</Banner>
+          </div>
+        ))}
+      </div>
     </ThemeContext.Provider>
   );
 }));

src/index.js

 export { default as HIGLightTheme } from './themes/HIGLightTheme';
+export { default as HIGDarkBlueTheme } from './themes/HIGDarkBlueTheme';
 export { default as MatrixTheme } from './themes/MatrixTheme';
 export { default as ThemeContext } from './ThemeContext';

src/index.test.js

@@ -17,2 +17,6 @@ import * as index from "./index";
     {
+      name: "HIGDarkBlueTheme",
+      value: expect.any(Object)
+    },
+    {
       name: "MatrixTheme",
@@ -19,0 +23,0 @@ value: expect.any(Object)

src/ThemeContext/Consumer.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import themeContextShape from './shape';
+import HIGLightTheme from "../themes/HIGLightTheme";
 
@@ -14,4 +15,5 @@ export default class Consumer extends Component {
   render() {
-    return this.props.children(this.context);
+    const theme = (this.context.themeId && this.context.themeClass) ? this.context : HIGLightTheme;
+    return this.props.children(theme);
   }
 }

src/ThemeContext/ThemeContext.test.js

 import { mount } from "enzyme";
 import React from "react";
 
+import HIGLightTheme from "../themes/HIGLightTheme";
+
 import ThemeContext from "./index";
 
 const TestTheme = {
-  themeId: 'test-theme',
-  themeClass: 'hig--test-theme'
-}
+  themeId: "test-theme",
+  themeClass: "hig--test-theme"
+};
 
 describe("ThemeContext", () => {
   describe("with a provided theme", () => {
-    let renderFunction = jest.fn();
-    renderFunction.mockReturnValue(null);
+    const renderFunction = jest.fn();
 
-    let wrapper;
+    beforeEach(() => {
+      renderFunction.mockReset();
+      renderFunction.mockReturnValue(null);
+    });
 
-    beforeEach(() => {
-      wrapper = mount(
+    it("provides the theme to the consumer", () => {
+      mount(
         <ThemeContext.Provider value={TestTheme}>
@@ -24,8 +28,12 @@ <ThemeContext.Consumer>{renderFunction}</ThemeContext.Consumer>
       );
-    });
 
-    it(`provides the theme to the consumer`, () => {
       expect(renderFunction).toHaveBeenCalledWith(TestTheme);
     });
+
+    it("provides the default theme without a provider", () => {
+      mount(<ThemeContext.Consumer>{renderFunction}</ThemeContext.Consumer>);
+
+      expect(renderFunction).toHaveBeenCalledWith(HIGLightTheme);
+    });
   });
 });

src/themes/index.js

 export { default as HIGLightTheme } from "./HIGLightTheme";
+export { default as HIGDarkBlueTheme } from "./HIGDarkBlueTheme";
 export { default as MatrixTheme } from "./MatrixTheme";

src/themes/index.test.js

@@ -10,2 +10,6 @@ import * as index from "./index";
     {
+      name: "HIGDarkBlueTheme",
+      value: expect.any(Object)
+    },
+    {
       name: "MatrixTheme",
@@ -12,0 +16,0 @@ value: expect.any(Object)

src/themes/Themes.test.js

@@ -1,4 +0,4 @@
-import { HIGLightTheme, MatrixTheme } from "./index";
+import { HIGLightTheme, HIGDarkBlueTheme, MatrixTheme } from "./index";
 
-[HIGLightTheme, MatrixTheme].forEach(theme => {
+[HIGLightTheme, HIGDarkBlueTheme, MatrixTheme].forEach(theme => {
   describe(`${theme}`, () => {
@@ -5,0 +5,0 @@ it("has a themeId", () => {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19684

increased by8.52%

Dependency count

2

decreased by-50%

Number of package files

20

increased by5.26%

Lines of code

423

increased by10.44%

Number of lines in readme file

21

increased by50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

2

increased by100%

Dependency changes

• - Removed@hig/banner@0.2.0-alpha.2e38833e

• - Removed@hig/styles@0.1.0-alpha.2e38833e

• - Removed@hig/banner@0.2.0-alpha.2e38833e(transitive)

• - Removed@hig/icon@0.1.0-alpha.2e38833e(transitive)

• - Removed@hig/icon-button@0.1.0-alpha.2e38833e(transitive)

• - Removed@hig/icons@0.1.0-alpha.2e38833e(transitive)

• - Removed@hig/typography@0.1.0-alpha.2e38833e(transitive)

• - Removedreact-lifecycles-compat@2.0.2(transitive)