Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@hig/themes

Package Overview
Dependencies
Maintainers
5
Versions
238
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hig/themes - npm Package Compare versions

Comparing version 0.1.0-alpha.3aaec357 to 0.1.0-alpha.3c1f3649

34

build/index.es.js

@@ -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;
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc