@hig/themes - npm Package Compare versions

build/index.es.js

		@@ -86,3 +86,4 @@ import PropTypes from 'prop-types';
		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);
		}
		@@ -89,0 +90,0 @@ }]);

build/index.js

		@@ -92,3 +92,4 @@ 'use strict';
		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);
		}
		@@ -95,0 +96,0 @@ }]);

package.json

		{
		"name": "@hig/themes",
		"version": "0.1.0-alpha.2e38833e",
		"version": "0.1.0-alpha.411960e6",
		"description": "HIG theme definitions and supporting components",
		@@ -10,8 +10,5 @@ "author": "Autodesk Inc.",
		"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.411960e6",
		"@hig/styles": "0.1.0-alpha.411960e6"
		},
		@@ -18,0 +15,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,3 +9,3 @@ import React from "react";

		import Banner from "@hig/banner";
		import Banner, { AVAILABLE_TYPES as BANNER_TYPES } from "@hig/banner";
		import readme from '../../README.md';
		@@ -16,3 +16,2 @@ import ThemeContext from "../ThemeContext";

		const typeOptions = makeSelectOptions(Banner.types);
		const themeOptions = {
		@@ -36,8 +35,13 @@ "hig-light": "HIG Light",
		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/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);
		});
		});
		});

New alerts