@hig/themes
Advanced tools
Comparing version 0.1.0-alpha.3aaec357 to 0.1.0-alpha.3c1f3649
@@ -5,14 +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' | ||
themeId: "hig-dark-blue", | ||
themeClass: "hig--dark-blue-theme" | ||
}; | ||
var MatrixTheme = { | ||
themeId: 'matrix', | ||
themeClass: 'hig--matrix-theme' | ||
themeId: "matrix", | ||
themeClass: "hig--matrix-theme" | ||
}; | ||
@@ -47,3 +47,3 @@ | ||
_createClass(Provider, [{ | ||
key: 'getChildContext', | ||
key: "getChildContext", | ||
value: function getChildContext() { | ||
@@ -53,3 +53,3 @@ return _extends({}, this.props.value); | ||
}, { | ||
key: 'render', | ||
key: "render", | ||
value: function render() { | ||
@@ -92,3 +92,3 @@ return this.props.children; | ||
_createClass$1(Consumer, [{ | ||
key: 'render', | ||
key: "render", | ||
value: function render() { | ||
@@ -109,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,0 +120,0 @@ } |
@@ -11,14 +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' | ||
themeId: "hig-dark-blue", | ||
themeClass: "hig--dark-blue-theme" | ||
}; | ||
var MatrixTheme = { | ||
themeId: 'matrix', | ||
themeClass: 'hig--matrix-theme' | ||
themeId: "matrix", | ||
themeClass: "hig--matrix-theme" | ||
}; | ||
@@ -53,3 +53,3 @@ | ||
_createClass(Provider, [{ | ||
key: 'getChildContext', | ||
key: "getChildContext", | ||
value: function getChildContext() { | ||
@@ -59,3 +59,3 @@ return _extends({}, this.props.value); | ||
}, { | ||
key: 'render', | ||
key: "render", | ||
value: function render() { | ||
@@ -98,3 +98,3 @@ return this.props.children; | ||
_createClass$1(Consumer, [{ | ||
key: 'render', | ||
key: "render", | ||
value: function render() { | ||
@@ -115,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" | ||
} | ||
@@ -126,0 +126,0 @@ } |
{ | ||
"name": "@hig/themes", | ||
"version": "0.1.0-alpha.3aaec357", | ||
"version": "0.1.0-alpha.3c1f3649", | ||
"description": "HIG theme definitions and supporting components", | ||
@@ -14,6 +14,6 @@ "author": "Autodesk Inc.", | ||
"devDependencies": { | ||
"@hig/babel-preset": "0.2.0-alpha.3aaec357", | ||
"@hig/banner": "0.2.0-alpha.3aaec357", | ||
"@hig/scripts": "0.2.0-alpha.3aaec357", | ||
"@hig/styles": "0.1.0-alpha.3aaec357" | ||
"@hig/babel-preset": "0.2.0-alpha.3c1f3649", | ||
"@hig/banner": "0.2.0-alpha.3c1f3649", | ||
"@hig/scripts": "0.2.0-alpha.3c1f3649", | ||
"@hig/styles": "0.1.0-alpha.3c1f3649" | ||
}, | ||
@@ -25,4 +25,8 @@ "peerDependencies": { | ||
"scripts": { | ||
"build": "hig-scripts-build" | ||
"build": "hig-scripts-build", | ||
"lint": "eslint src --ext .js,.jsx" | ||
}, | ||
"eslintConfig": { | ||
"extends": "@hig" | ||
} | ||
} |
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"; | ||
@@ -19,4 +17,4 @@ import HIGLightTheme from "../themes/HIGLightTheme"; | ||
"hig-dark-blue": "HIG Dark Blue", | ||
"matrix": "BIM360 Matrix" | ||
} | ||
matrix: "BIM360 Matrix" | ||
}; | ||
@@ -26,24 +24,29 @@ const themes = { | ||
"hig-dark-blue": HIGDarkBlueTheme, | ||
"matrix": MatrixTheme | ||
} | ||
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> | ||
); | ||
}) | ||
); |
@@ -1,4 +0,4 @@ | ||
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'; | ||
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"; |
@@ -9,3 +9,3 @@ import * as index from "./index"; | ||
Consumer: expect.any(Function), | ||
Provider: expect.any(Function), | ||
Provider: expect.any(Function) | ||
}) | ||
@@ -12,0 +12,0 @@ }, |
@@ -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); | ||
} | ||
} |
@@ -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}`, () => { |
@@ -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() { |
@@ -1,2 +0,2 @@ | ||
import PropTypes from 'prop-types'; | ||
import PropTypes from "prop-types"; | ||
@@ -3,0 +3,0 @@ export default { |
const HIGDarkBlueTheme = { | ||
themeId: 'hig-dark-blue', | ||
themeClass: 'hig--dark-blue-theme' | ||
themeId: "hig-dark-blue", | ||
themeClass: "hig--dark-blue-theme" | ||
}; | ||
export default HIGDarkBlueTheme; |
const HIGLightTheme = { | ||
themeId: 'hig-light', | ||
themeClass: 'hig--light-theme' | ||
themeId: "hig-light", | ||
themeClass: "hig--light-theme" | ||
}; | ||
export default HIGLightTheme; | ||
export default HIGLightTheme; |
const MatrixTheme = { | ||
themeId: 'matrix', | ||
themeClass: 'hig--matrix-theme' | ||
themeId: "matrix", | ||
themeClass: "hig--matrix-theme" | ||
}; | ||
export default MatrixTheme; | ||
export default MatrixTheme; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
19665
431