@hig/themes - npm Package Compare versions

Comparing version 0.1.0-alpha.434672b9 to 0.1.0-alpha.46b594c5

build/index.es.js

@@ -5,9 +5,14 @@ import PropTypes from 'prop-types';
 var HIGLightTheme = {
-  themeId: 'hig-light',
-  themeClass: 'hig--light-theme'
+  themeId: "hig-light",
+  themeClass: "hig--light-theme"
 };
 
+var HIGDarkBlueTheme = {
+  themeId: "hig-dark-blue",
+  themeClass: "hig--dark-blue-theme"
+};
+
 var MatrixTheme = {
-  themeId: 'matrix',
-  themeClass: 'hig--matrix-theme'
+  themeId: "matrix",
+  themeClass: "hig--matrix-theme"
 };
@@ -42,3 +47,3 @@
   _createClass(Provider, [{
-    key: 'getChildContext',
+    key: "getChildContext",
     value: function getChildContext() {
@@ -48,3 +53,3 @@ return _extends({}, this.props.value);
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
@@ -87,3 +92,3 @@ return this.props.children;
   _createClass$1(Consumer, [{
-    key: 'render',
+    key: "render",
     value: function render() {
@@ -104,11 +109,11 @@ var theme = this.context.themeId && this.context.themeClass ? this.context : HIGLightTheme;
 Consumer.__docgenInfo = {
-  'description': '',
-  'displayName': 'Consumer',
-  'props': {
-    'children': {
-      'type': {
-        'name': 'func'
+  "description": "",
+  "displayName": "Consumer",
+  "props": {
+    "children": {
+      "type": {
+        "name": "func"
       },
-      'required': false,
-      'description': 'A theme provided to the consumer within'
+      "required": false,
+      "description": "A theme provided to the consumer within"
     }
@@ -120,2 +125,2 @@ }
 
-export { HIGLightTheme, MatrixTheme, index as ThemeContext };
+export { HIGLightTheme, HIGDarkBlueTheme, MatrixTheme, index as ThemeContext };

build/index.js

@@ -11,9 +11,14 @@ 'use strict';
 var HIGLightTheme = {
-  themeId: 'hig-light',
-  themeClass: 'hig--light-theme'
+  themeId: "hig-light",
+  themeClass: "hig--light-theme"
 };
 
+var HIGDarkBlueTheme = {
+  themeId: "hig-dark-blue",
+  themeClass: "hig--dark-blue-theme"
+};
+
 var MatrixTheme = {
-  themeId: 'matrix',
-  themeClass: 'hig--matrix-theme'
+  themeId: "matrix",
+  themeClass: "hig--matrix-theme"
 };
@@ -48,3 +53,3 @@
   _createClass(Provider, [{
-    key: 'getChildContext',
+    key: "getChildContext",
     value: function getChildContext() {
@@ -54,3 +59,3 @@ return _extends({}, this.props.value);
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
@@ -93,3 +98,3 @@ return this.props.children;
   _createClass$1(Consumer, [{
-    key: 'render',
+    key: "render",
     value: function render() {
@@ -110,11 +115,11 @@ var theme = this.context.themeId && this.context.themeClass ? this.context : HIGLightTheme;
 Consumer.__docgenInfo = {
-  'description': '',
-  'displayName': 'Consumer',
-  'props': {
-    'children': {
-      'type': {
-        'name': 'func'
+  "description": "",
+  "displayName": "Consumer",
+  "props": {
+    "children": {
+      "type": {
+        "name": "func"
       },
-      'required': false,
-      'description': 'A theme provided to the consumer within'
+      "required": false,
+      "description": "A theme provided to the consumer within"
     }
@@ -127,3 +132,4 @@ }
 exports.HIGLightTheme = HIGLightTheme;
+exports.HIGDarkBlueTheme = HIGDarkBlueTheme;
 exports.MatrixTheme = MatrixTheme;
 exports.ThemeContext = index;

package.json

 {
   "name": "@hig/themes",
-  "version": "0.1.0-alpha.434672b9",
+  "version": "0.1.0-alpha.46b594c5",
   "description": "HIG theme definitions and supporting components",
@@ -8,10 +8,12 @@ "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.434672b9"
-  },
   "devDependencies": {
-    "@hig/scripts": "0.2.0-alpha.434672b9",
-    "@hig/styles": "0.1.0-alpha.434672b9"
+    "@hig/babel-preset": "0.2.0-alpha.46b594c5",
+    "@hig/banner": "0.2.0-alpha.46b594c5",
+    "@hig/scripts": "0.2.0-alpha.46b594c5",
+    "@hig/styles": "0.1.0-alpha.46b594c5"
   },
@@ -23,4 +25,8 @@ "peerDependencies": {
   "scripts": {
-    "build": "hig-scripts-build"
+    "build": "hig-scripts-build",
+    "lint": "eslint src --ext .js,.jsx"
+  },
+  "eslintConfig": {
+    "extends": "@hig"
   }
 }

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

 import React from "react";
 
 import { storiesOf } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
-import { text, select, boolean } from "@storybook/addon-knobs/react";
+import { select } from "@storybook/addon-knobs/react";
 import { withInfo } from "@storybook/addon-info";
-import { makeSelectOptions } from "@hig/storybook/utils";
 
 import Banner, { AVAILABLE_TYPES as BANNER_TYPES } from "@hig/banner";
-import readme from '../../README.md';
+import readme from "../../README.md";
 import ThemeContext from "../ThemeContext";
 import HIGLightTheme from "../themes/HIGLightTheme";
+import HIGDarkBlueTheme from "../themes/HIGDarkBlueTheme";
 import MatrixTheme from "../themes/MatrixTheme";
@@ -17,29 +16,36 @@
   "hig-light": "HIG Light",
-  "matrix": "BIM360 Matrix"
-}
+  "hig-dark-blue": "HIG Dark Blue",
+  matrix: "BIM360 Matrix"
+};
 
 const themes = {
   "hig-light": HIGLightTheme,
-  "matrix": MatrixTheme
-}
+  "hig-dark-blue": HIGDarkBlueTheme,
+  matrix: MatrixTheme
+};
 
 const themeContextStories = storiesOf("ThemeContext", module);
 
-themeContextStories.add("themable", withInfo({
-  propTables: [ThemeContext.Provider, ThemeContext.Consumer],
-  propTablesExclude: [Banner],
-  text: <div dangerouslySetInnerHTML={{__html: readme}}></div>,
-})(() => {
-  const theme = select('Theme', themeOptions, 'hig-light');
-  return (
-    <ThemeContext.Provider value={themes[theme]}>
-      <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>
-  );
-}));
+themeContextStories.add(
+  "themable",
+  withInfo({
+    propTables: [ThemeContext.Provider, ThemeContext.Consumer],
+    propTablesExclude: [Banner],
+    text: <div dangerouslySetInnerHTML={{ __html: readme }} />
+  })(() => {
+    const theme = select("Theme", themeOptions, "hig-light");
+    return (
+      <ThemeContext.Provider value={themes[theme]}>
+        <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

@@ -1,3 +0,4 @@
-export { default as HIGLightTheme } from './themes/HIGLightTheme';
-export { default as MatrixTheme } from './themes/MatrixTheme';
-export { default as ThemeContext } from './ThemeContext';
+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

@@ -9,3 +9,3 @@ import * as index from "./index";
         Consumer: expect.any(Function),
-        Provider: expect.any(Function),
+        Provider: expect.any(Function)
       })
@@ -18,2 +18,6 @@ },
     {
+      name: "HIGDarkBlueTheme",
+      value: expect.any(Object)
+    },
+    {
       name: "MatrixTheme",
@@ -20,0 +24,0 @@ value: expect.any(Object)

src/ThemeContext/Consumer.js

@@ -1,4 +0,4 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import themeContextShape from './shape';
+import { Component } from "react";
+import PropTypes from "prop-types";
+import themeContextShape from "./shape";
 import HIGLightTheme from "../themes/HIGLightTheme";
@@ -10,3 +10,3 @@
     children: PropTypes.func
-  }
+  };
 
@@ -16,5 +16,8 @@ static contextTypes = themeContextShape;
   render() {
-    const theme = (this.context.themeId && this.context.themeClass) ? this.context : HIGLightTheme;
+    const theme =
+      this.context.themeId && this.context.themeClass
+        ? this.context
+        : HIGLightTheme;
     return this.props.children(theme);
   }
 }

src/ThemeContext/index.test.js

@@ -9,3 +9,3 @@ import * as index from "./index";
         Consumer: expect.any(Function),
-        Provider: expect.any(Function),
+        Provider: expect.any(Function)
       })
@@ -20,3 +20,3 @@ },
       value: expect.any(Function)
-    },
+    }
   ].forEach(({ name, value }) => {
@@ -23,0 +23,0 @@ it(`exports ${name}`, () => {

src/ThemeContext/Provider.js

@@ -1,4 +0,4 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import themeContextShape from './shape';
+import { Component } from "react";
+import PropTypes from "prop-types";
+import themeContextShape from "./shape";
 import HIGLightTheme from "../themes/HIGLightTheme";
@@ -12,3 +12,3 @@
     children: PropTypes.node.isRequired
-  }
+  };
 
@@ -19,3 +19,3 @@ static childContextTypes = themeContextShape;
     value: HIGLightTheme
-  }
+  };
 
@@ -22,0 +22,0 @@ getChildContext() {

src/ThemeContext/shape.js

@@ -1,2 +0,2 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
@@ -3,0 +3,0 @@ export default {

src/themes/HIGLightTheme.js

 const HIGLightTheme = {
-  themeId: 'hig-light',
-  themeClass: 'hig--light-theme'
+  themeId: "hig-light",
+  themeClass: "hig--light-theme"
 };
 
-export default HIGLightTheme;
+export default 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/MatrixTheme.js

 const MatrixTheme = {
-  themeId: 'matrix',
-  themeClass: 'hig--matrix-theme'
+  themeId: "matrix",
+  themeClass: "hig--matrix-theme"
 };
 
-export default MatrixTheme;
+export default MatrixTheme;

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

Improved metrics

Total package byte prevSize

19665

increased by4.55%

Dependency count

2

decreased by-33.33%

Number of package files

20

increased by5.26%

Lines of code

431

increased by8.84%

Number of lines in readme file

21

increased by50%

Worsened metrics

Dev dependency count

4

increased by100%

Number of downloads

8

decreased by-20%

Dependency changes

• - Removed@hig/banner@0.2.0-alpha.434672b9

• - Removed@hig/banner@0.2.0-alpha.434672b9(transitive)

• - Removed@hig/icon@0.1.0-alpha.434672b9(transitive)

• - Removed@hig/icon-button@0.1.0-alpha.434672b9(transitive)

• - Removed@hig/icons@0.1.0-alpha.434672b9(transitive)

• - Removed@hig/typography@0.1.0-alpha.434672b9(transitive)

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