drywall - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

@@ -5,2 +5,17 @@ # Changelog
 
+## [0.2.0](https://github.com/zillow/drywall/compare/v0.1.1...v0.2.0) (2019-06-22)
+
+
+### Build System
+
+* add GitHub pages deploy script ([46e057e](https://github.com/zillow/drywall/commit/46e057e))
+* move react and styled-components to peerDependencies and update the minimum version of react to 16.8 ([74de2d1](https://github.com/zillow/drywall/commit/74de2d1))
+
+
+### Features
+
+* add `Button` component ([0f3573a](https://github.com/zillow/drywall/commit/0f3573a))
+
+
+
 ### 0.1.1 (2019-06-22)
@@ -7,0 +22,0 @@

es/__tests__/index.test.js

@@ -1,55 +0,24 @@
-var _jsxFileName = "/Users/bstone/git/drywall/src/__tests__/index.test.js";
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Button, { StyledButton } from '../components/Button/Button';
-import Bootstrap from '../themes';
-describe('Themed Styled Button', function () {
-  it('displays a button with requested text', function () {
-    var component = renderer.create(React.createElement(StyledButton, {
-      theme: Bootstrap,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 8
-      },
-      __self: this
-    }, "Click Me!"));
-    expect(component.toJSON()).toMatchSnapshot();
+import path from 'path';
+import glob from 'glob';
+import * as drywall from '../index';
+describe('drywall exports', function () {
+  it('exports component properties', function () {
+    var components = glob.sync(path.join(__dirname, '../components/**/*.jsx'));
+    components.forEach(function (component) {
+      // eslint-disable-next-line
+      var module = require(component);
+
+      var basename = path.basename(component, '.jsx');
+      Object.keys(module).forEach(function (key) {
+        if (key === 'default') {
+          expect(drywall).toHaveProperty(basename);
+        } else {
+          expect(drywall).toHaveProperty(key);
+        }
+      });
+    });
   });
-  it('displays a secondary button with requested text', function () {
-    var component = renderer.create(React.createElement(StyledButton, {
-      theme: Bootstrap,
-      type: "secondary",
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 14
-      },
-      __self: this
-    }, "\u2299_\u0298"));
-    expect(component.toJSON()).toMatchSnapshot();
+  it('exports theme properites', function () {
+    expect(drywall).toHaveProperty('withNamespace');
   });
-});
-describe('Themed Button', function () {
-  it('displays a button with requested text', function () {
-    var component = renderer.create(React.createElement(Button, {
-      theme: Bootstrap,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 24
-      },
-      __self: this
-    }, "Click Me!"));
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('displays a secondary button with requested text', function () {
-    var component = renderer.create(React.createElement(Button, {
-      theme: Bootstrap,
-      type: "secondary",
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 30
-      },
-      __self: this
-    }, "\u2299_\u0298"));
-    expect(component.toJSON()).toMatchSnapshot();
-  });
 });

es/components/Button/Button.js

@@ -1,39 +0,55 @@
-var _jsxFileName = "/Users/bstone/git/drywall/src/components/Button/Button.jsx";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-export var StyledButton = styled.button.withConfig({
-  displayName: "Button__StyledButton",
+export var BUTTON_TYPES = {
+  primary: 'primary',
+  secondary: 'secondary',
+  caution: 'caution'
+};
+export var BUTTON_SIZES = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg'
+};
+/**
+ * See also [`TextButton`](#textbutton)
+ */
+
+var Button = styled.button.withConfig({
+  displayName: "Button",
   componentId: "sc-1gypvbx-0"
 })(["", ";"], function (props) {
-  return props.theme.Button;
+  return props.theme && props.theme.ns && props.theme.ns().Button;
 });
+Button.propTypes = {
+  /** A fluid button will take up all horizontal space */
+  fluid: PropTypes.bool,
 
-var Button = function Button(props) {
-  return React.createElement(StyledButton, _extends({}, props, {
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 8
-    },
-    __self: this
-  }));
-};
+  /** Inverse colors for use on dark or colored backgrounds */
+  inverse: PropTypes.bool,
 
-Button.propTypes = process.env.NODE_ENV !== "production" ? {
-  /** Button content */
-  children: PropTypes.node.isRequired,
+  /** The size of the button */
+  size: PropTypes.oneOf(Object.keys(BUTTON_SIZES)),
 
-  /** Button type */
-  type: PropTypes.oneOf(['primary', 'secondary']),
+  /** The type of the button */
+  buttonType: PropTypes.oneOf(Object.keys(BUTTON_TYPES)),
 
-  /** Enable outline buttons */
-  outline: PropTypes.bool
-} : {};
+  /**
+   * Use the styled-components
+   * [polymorphic "as" prop](https://www.styled-components.com/docs/api#as-polymorphic-prop)
+   * to change the HTML tag of the component.
+   *
+   * This can be used to apply `Button` styling to HTML anchors.
+   */
+  as: PropTypes.string
+};
 Button.defaultProps = {
-  type: 'primary',
-  outline: false
+  fluid: false,
+  inverse: false,
+  size: BUTTON_SIZES.md,
+  buttonType: BUTTON_TYPES.secondary,
+  as: 'button'
 };
-export default Button;
+/** @component */
+
+export default Button;
+export var StyledButton = Button;

es/components/Button/Button.md

@@ -1,15 +0,44 @@
-Button types:
+#### Button types
+```jsx
+<Button buttonType="primary">Primary label</Button>{' '}
+<Button buttonType="secondary">Secondary button</Button>{' '}
+<Button buttonType="caution">Caution button</Button>{' '}
+```
 
+#### Disabled buttons
 ```jsx
-<div>
-    <Button>Primary</Button> <Button type="secondary">Secondary</Button>
-</div>
+<Button buttonType="primary" disabled>Primary label</Button>{' '}
+<Button buttonType="secondary" disabled>Secondary button</Button>{' '}
+<Button buttonType="caution" disabled>Caution button</Button>{' '}
 ```
 
-Outline buttons:
+#### Fluid button
+```jsx
+<Button fluid>Fluid button</Button>
+```
 
+#### Button sizes
 ```jsx
-<div>
-    <Button outline={true}>Primary</Button> <Button outline type="secondary">Secondary</Button>
-</div>
+<Button size="sm">Small button</Button>{' '}
+<Button size="md">Medium button</Button>{' '}
+<Button size="lg">Large button</Button>
 ```
+
+#### Inversed buttons for colored backgrounds or background images
+
+```jsx
+import TransparencyWrapper from '../../styleguidist/TransparencyWrapper';
+
+<TransparencyWrapper dark style={{ padding: '10px' }}>
+    <Button buttonType="primary" inverse>Primary label</Button>{' '}
+    <Button buttonType="secondary" inverse>Secondary button</Button>
+</TransparencyWrapper>
+```
+
+#### Anchors as Buttons
+
+```jsx
+<Button as="a" href="https://www.zillow.com/" buttonType="primary">Zillow anchor</Button>{' '}
+<Button as="a" href="https://www.zillow.com/" buttonType="secondary">Zillow anchor</Button>{' '}
+<Button as="a" href="https://www.zillow.com/" buttonType="caution">Zillow anchor</Button>
+```

es/index.js

@@ -1,1 +0,2 @@
-export { default } from './components/Button';
+export { default as Button, BUTTON_TYPES, BUTTON_SIZES, StyledButton } from './components/Button/Button';
+export { default as withNamespace } from './theme/withNamespace';

es/styleguidist/ThemeWrapper.js

@@ -7,9 +7,8 @@ var _jsxFileName = "/Users/bstone/git/drywall/src/styleguidist/ThemeWrapper.jsx";
 import { ThemeProvider } from 'styled-components';
-import theme from '../themes';
 export default (function (props) {
   return React.createElement(ThemeProvider, _extends({}, props, {
-    theme: theme,
+    theme: {},
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 5
+      lineNumber: 4
     },
@@ -16,0 +15,0 @@ __self: this

lib/__tests__/index.test.js

 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var _path = _interopRequireDefault(require("path"));
 
-var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
+var _glob = _interopRequireDefault(require("glob"));
 
-var _Button = _interopRequireWildcard(require("../components/Button/Button"));
+var drywall = _interopRequireWildcard(require("../index"));
 
-var _themes = _interopRequireDefault(require("../themes"));
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -15,35 +13,24 @@
 
-describe('Themed Styled Button', function () {
-  it('displays a button with requested text', function () {
-    var component = _reactTestRenderer.default.create(_react.default.createElement(_Button.StyledButton, {
-      theme: _themes.default
-    }, "Click Me!"));
+describe('drywall exports', function () {
+  it('exports component properties', function () {
+    var components = _glob.default.sync(_path.default.join(__dirname, '../components/**/*.jsx'));
 
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('displays a secondary button with requested text', function () {
-    var component = _reactTestRenderer.default.create(_react.default.createElement(_Button.StyledButton, {
-      theme: _themes.default,
-      type: "secondary"
-    }, "\u2299_\u0298"));
+    components.forEach(function (component) {
+      // eslint-disable-next-line
+      var module = require(component);
 
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-});
-describe('Themed Button', function () {
-  it('displays a button with requested text', function () {
-    var component = _reactTestRenderer.default.create(_react.default.createElement(_Button.default, {
-      theme: _themes.default
-    }, "Click Me!"));
+      var basename = _path.default.basename(component, '.jsx');
 
-    expect(component.toJSON()).toMatchSnapshot();
+      Object.keys(module).forEach(function (key) {
+        if (key === 'default') {
+          expect(drywall).toHaveProperty(basename);
+        } else {
+          expect(drywall).toHaveProperty(key);
+        }
+      });
+    });
   });
-  it('displays a secondary button with requested text', function () {
-    var component = _reactTestRenderer.default.create(_react.default.createElement(_Button.default, {
-      theme: _themes.default,
-      type: "secondary"
-    }, "\u2299_\u0298"));
-
-    expect(component.toJSON()).toMatchSnapshot();
+  it('exports theme properites', function () {
+    expect(drywall).toHaveProperty('withNamespace');
   });
 });

lib/components/Button/Button.js

@@ -6,6 +6,4 @@ "use strict";
 });
-exports.default = exports.StyledButton = void 0;
+exports.StyledButton = exports.default = exports.BUTTON_SIZES = exports.BUTTON_TYPES = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,30 +15,60 @@
 
-var StyledButton = _styledComponents.default.button.withConfig({
-  displayName: "Button__StyledButton",
+var BUTTON_TYPES = {
+  primary: 'primary',
+  secondary: 'secondary',
+  caution: 'caution'
+};
+exports.BUTTON_TYPES = BUTTON_TYPES;
+var BUTTON_SIZES = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg'
+};
+/**
+ * See also [`TextButton`](#textbutton)
+ */
+
+exports.BUTTON_SIZES = BUTTON_SIZES;
+
+var Button = _styledComponents.default.button.withConfig({
+  displayName: "Button",
   componentId: "sc-1gypvbx-0"
 })(["", ";"], function (props) {
-  return props.theme.Button;
+  return props.theme && props.theme.ns && props.theme.ns().Button;
 });
 
-exports.StyledButton = StyledButton;
+Button.propTypes = {
+  /** A fluid button will take up all horizontal space */
+  fluid: _propTypes.default.bool,
 
-var Button = function Button(props) {
-  return _react.default.createElement(StyledButton, props);
-};
+  /** Inverse colors for use on dark or colored backgrounds */
+  inverse: _propTypes.default.bool,
 
-Button.propTypes = process.env.NODE_ENV !== "production" ? {
-  /** Button content */
-  children: _propTypes.default.node.isRequired,
+  /** The size of the button */
+  size: _propTypes.default.oneOf(Object.keys(BUTTON_SIZES)),
 
-  /** Button type */
-  type: _propTypes.default.oneOf(['primary', 'secondary']),
+  /** The type of the button */
+  buttonType: _propTypes.default.oneOf(Object.keys(BUTTON_TYPES)),
 
-  /** Enable outline buttons */
-  outline: _propTypes.default.bool
-} : {};
+  /**
+   * Use the styled-components
+   * [polymorphic "as" prop](https://www.styled-components.com/docs/api#as-polymorphic-prop)
+   * to change the HTML tag of the component.
+   *
+   * This can be used to apply `Button` styling to HTML anchors.
+   */
+  as: _propTypes.default.string
+};
 Button.defaultProps = {
-  type: 'primary',
-  outline: false
+  fluid: false,
+  inverse: false,
+  size: BUTTON_SIZES.md,
+  buttonType: BUTTON_TYPES.secondary,
+  as: 'button'
 };
+/** @component */
+
 var _default = Button;
-exports.default = _default;
+exports.default = _default;
+var StyledButton = Button;
+exports.StyledButton = StyledButton;

lib/components/Button/Button.md

@@ -1,15 +0,44 @@
-Button types:
+#### Button types
+```jsx
+<Button buttonType="primary">Primary label</Button>{' '}
+<Button buttonType="secondary">Secondary button</Button>{' '}
+<Button buttonType="caution">Caution button</Button>{' '}
+```
 
+#### Disabled buttons
 ```jsx
-<div>
-    <Button>Primary</Button> <Button type="secondary">Secondary</Button>
-</div>
+<Button buttonType="primary" disabled>Primary label</Button>{' '}
+<Button buttonType="secondary" disabled>Secondary button</Button>{' '}
+<Button buttonType="caution" disabled>Caution button</Button>{' '}
 ```
 
-Outline buttons:
+#### Fluid button
+```jsx
+<Button fluid>Fluid button</Button>
+```
 
+#### Button sizes
 ```jsx
-<div>
-    <Button outline={true}>Primary</Button> <Button outline type="secondary">Secondary</Button>
-</div>
+<Button size="sm">Small button</Button>{' '}
+<Button size="md">Medium button</Button>{' '}
+<Button size="lg">Large button</Button>
 ```
+
+#### Inversed buttons for colored backgrounds or background images
+
+```jsx
+import TransparencyWrapper from '../../styleguidist/TransparencyWrapper';
+
+<TransparencyWrapper dark style={{ padding: '10px' }}>
+    <Button buttonType="primary" inverse>Primary label</Button>{' '}
+    <Button buttonType="secondary" inverse>Secondary button</Button>
+</TransparencyWrapper>
+```
+
+#### Anchors as Buttons
+
+```jsx
+<Button as="a" href="https://www.zillow.com/" buttonType="primary">Zillow anchor</Button>{' '}
+<Button as="a" href="https://www.zillow.com/" buttonType="secondary">Zillow anchor</Button>{' '}
+<Button as="a" href="https://www.zillow.com/" buttonType="caution">Zillow anchor</Button>
+```

lib/index.js

@@ -6,3 +6,3 @@ "use strict";
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "Button", {
   enumerable: true,
@@ -13,5 +13,33 @@ get: function get() {
 });
+Object.defineProperty(exports, "BUTTON_TYPES", {
+  enumerable: true,
+  get: function get() {
+    return _Button.BUTTON_TYPES;
+  }
+});
+Object.defineProperty(exports, "BUTTON_SIZES", {
+  enumerable: true,
+  get: function get() {
+    return _Button.BUTTON_SIZES;
+  }
+});
+Object.defineProperty(exports, "StyledButton", {
+  enumerable: true,
+  get: function get() {
+    return _Button.StyledButton;
+  }
+});
+Object.defineProperty(exports, "withNamespace", {
+  enumerable: true,
+  get: function get() {
+    return _withNamespace.default;
+  }
+});
 
-var _Button = _interopRequireDefault(require("./components/Button"));
+var _Button = _interopRequireWildcard(require("./components/Button/Button"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _withNamespace = _interopRequireDefault(require("./theme/withNamespace"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

lib/styleguidist/ThemeWrapper.js

@@ -12,4 +12,2 @@ "use strict";
 
-var _themes = _interopRequireDefault(require("../themes"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,3 +19,3 @@
   return _react.default.createElement(_styledComponents.ThemeProvider, _extends({}, props, {
-    theme: _themes.default
+    theme: {}
   }));
@@ -24,0 +22,0 @@ };

package.json

 {
   "name": "drywall",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "drywall component library",
@@ -28,3 +28,5 @@ "main": "lib/index.js",
     "prepublishOnly": "create-react-styleguide script prepublishOnly",
-    "release": "standard-version --commit-all"
+    "release": "standard-version --commit-all",
+    "predeploy": "npm run build:styleguide",
+    "deploy": "gh-pages -d styleguide"
   },
@@ -37,7 +39,7 @@ "husky": {
   "dependencies": {
-    "prop-types": "^15.7.2",
-    "styled-components": "^4.2.0"
+    "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "16.x"
+    "react": "^16.8.0",
+    "styled-components": ">=4.1.2"
   },
@@ -50,2 +52,4 @@ "devDependencies": {
     "eslint-plugin-zillow": "^3.1.0",
+    "gh-pages": "^2.0.1",
+    "glob": "^7.1.4",
     "husky": "^2.4.1",
@@ -56,3 +60,4 @@ "jest-styled-components": "^6.3.1",
     "react-test-renderer": "^16.8.6",
-    "standard-version": "^6.0.1"
+    "standard-version": "^6.0.1",
+    "styled-components": "^4.2.0"
   },
@@ -59,0 +64,0 @@ "author": "[e-mail]",

src/__tests__/index.test.js

@@ -1,36 +0,24 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Button, { StyledButton } from '../components/Button/Button';
-import Bootstrap from '../themes';
+import path from 'path';
+import glob from 'glob';
+import * as drywall from '../index';
 
-describe('Themed Styled Button', () => {
-    it('displays a button with requested text', () => {
-        const component = renderer.create(<StyledButton theme={Bootstrap}>Click Me!</StyledButton>);
-        expect(component.toJSON()).toMatchSnapshot();
+describe('drywall exports', () => {
+    it('exports component properties', () => {
+        const components = glob.sync(path.join(__dirname, '../components/**/*.jsx'));
+        components.forEach(component => {
+            // eslint-disable-next-line
+            const module = require(component);
+            const basename = path.basename(component, '.jsx');
+            Object.keys(module).forEach(key => {
+                if (key === 'default') {
+                    expect(drywall).toHaveProperty(basename);
+                } else {
+                    expect(drywall).toHaveProperty(key);
+                }
+            });
+        });
     });
-
-    it('displays a secondary button with requested text', () => {
-        const component = renderer.create(
-            <StyledButton theme={Bootstrap} type="secondary">
-                ⊙_ʘ
-            </StyledButton>
-        );
-        expect(component.toJSON()).toMatchSnapshot();
+    it('exports theme properites', () => {
+        expect(drywall).toHaveProperty('withNamespace');
     });
 });
-
-describe('Themed Button', () => {
-    it('displays a button with requested text', () => {
-        const component = renderer.create(<Button theme={Bootstrap}>Click Me!</Button>);
-        expect(component.toJSON()).toMatchSnapshot();
-    });
-
-    it('displays a secondary button with requested text', () => {
-        const component = renderer.create(
-            <Button theme={Bootstrap} type="secondary">
-                ⊙_ʘ
-            </Button>
-        );
-        expect(component.toJSON()).toMatchSnapshot();
-    });
-});

src/components/Button/Button.jsx

@@ -1,24 +0,52 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-export const StyledButton = styled.button`
-    ${props => props.theme.Button};
+export const BUTTON_TYPES = {
+    primary: 'primary',
+    secondary: 'secondary',
+    caution: 'caution',
+};
+
+export const BUTTON_SIZES = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+};
+
+/**
+ * See also [`TextButton`](#textbutton)
+ */
+const Button = styled.button`
+    ${props => props.theme && props.theme.ns && props.theme.ns().Button};
 `;
-const Button = props => <StyledButton {...props} />;
 
 Button.propTypes = {
-    /** Button content */
-    children: PropTypes.node.isRequired,
-    /** Button type */
-    type: PropTypes.oneOf(['primary', 'secondary']),
-    /** Enable outline buttons */
-    outline: PropTypes.bool,
+    /** A fluid button will take up all horizontal space */
+    fluid: PropTypes.bool,
+    /** Inverse colors for use on dark or colored backgrounds */
+    inverse: PropTypes.bool,
+    /** The size of the button */
+    size: PropTypes.oneOf(Object.keys(BUTTON_SIZES)),
+    /** The type of the button */
+    buttonType: PropTypes.oneOf(Object.keys(BUTTON_TYPES)),
+    /**
+     * Use the styled-components
+     * [polymorphic "as" prop](https://www.styled-components.com/docs/api#as-polymorphic-prop)
+     * to change the HTML tag of the component.
+     *
+     * This can be used to apply `Button` styling to HTML anchors.
+     */
+    as: PropTypes.string,
 };
 
 Button.defaultProps = {
-    type: 'primary',
-    outline: false,
+    fluid: false,
+    inverse: false,
+    size: BUTTON_SIZES.md,
+    buttonType: BUTTON_TYPES.secondary,
+    as: 'button',
 };
 
+/** @component */
 export default Button;
+export const StyledButton = Button;

src/components/Button/Button.md

@@ -1,15 +0,44 @@
-Button types:
+#### Button types
+```jsx
+<Button buttonType="primary">Primary label</Button>{' '}
+<Button buttonType="secondary">Secondary button</Button>{' '}
+<Button buttonType="caution">Caution button</Button>{' '}
+```
 
+#### Disabled buttons
 ```jsx
-<div>
-    <Button>Primary</Button> <Button type="secondary">Secondary</Button>
-</div>
+<Button buttonType="primary" disabled>Primary label</Button>{' '}
+<Button buttonType="secondary" disabled>Secondary button</Button>{' '}
+<Button buttonType="caution" disabled>Caution button</Button>{' '}
 ```
 
-Outline buttons:
+#### Fluid button
+```jsx
+<Button fluid>Fluid button</Button>
+```
 
+#### Button sizes
 ```jsx
-<div>
-    <Button outline={true}>Primary</Button> <Button outline type="secondary">Secondary</Button>
-</div>
+<Button size="sm">Small button</Button>{' '}
+<Button size="md">Medium button</Button>{' '}
+<Button size="lg">Large button</Button>
 ```
+
+#### Inversed buttons for colored backgrounds or background images
+
+```jsx
+import TransparencyWrapper from '../../styleguidist/TransparencyWrapper';
+
+<TransparencyWrapper dark style={{ padding: '10px' }}>
+    <Button buttonType="primary" inverse>Primary label</Button>{' '}
+    <Button buttonType="secondary" inverse>Secondary button</Button>
+</TransparencyWrapper>
+```
+
+#### Anchors as Buttons
+
+```jsx
+<Button as="a" href="https://www.zillow.com/" buttonType="primary">Zillow anchor</Button>{' '}
+<Button as="a" href="https://www.zillow.com/" buttonType="secondary">Zillow anchor</Button>{' '}
+<Button as="a" href="https://www.zillow.com/" buttonType="caution">Zillow anchor</Button>
+```

src/index.js

@@ -1,1 +0,7 @@
-export { default } from './components/Button';
+export {
+    default as Button,
+    BUTTON_TYPES,
+    BUTTON_SIZES,
+    StyledButton,
+} from './components/Button/Button';
+export { default as withNamespace } from './theme/withNamespace';

src/styleguidist/ThemeWrapper.jsx

 import React from 'react';
 import { ThemeProvider } from 'styled-components';
-import theme from '../themes';
 
-export default props => <ThemeProvider {...props} theme={theme} />;
+export default props => <ThemeProvider {...props} theme={{}} />;

New alerts

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Lines of code

540

increased by38.82%

Worsened metrics

Total package byte prevSize

28529

decreased by-8.3%

Dev dependency count

14

increased by27.27%

Number of low supply chain risk alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@types/stylis@4.2.5(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstyled-components@6.1.15(transitive)

• + Addedstylis@4.3.2(transitive)

• + Addedtslib@2.6.2(transitive)

• - Removedstyled-components@^4.2.0

• - Removed@ampproject/remapping@2.3.0(transitive)

• - Removed@babel/code-frame@7.26.2(transitive)

• - Removed@babel/compat-data@7.26.8(transitive)

• - Removed@babel/core@7.26.9(transitive)

• - Removed@babel/generator@7.26.9(transitive)

• - Removed@babel/helper-annotate-as-pure@7.25.9(transitive)

• - Removed@babel/helper-compilation-targets@7.26.5(transitive)

• - Removed@babel/helper-module-imports@7.25.9(transitive)

• - Removed@babel/helper-module-transforms@7.26.0(transitive)

• - Removed@babel/helper-plugin-utils@7.26.5(transitive)

• - Removed@babel/helper-string-parser@7.25.9(transitive)

• - Removed@babel/helper-validator-identifier@7.25.9(transitive)

• - Removed@babel/helper-validator-option@7.25.9(transitive)

• - Removed@babel/helpers@7.26.9(transitive)

• - Removed@babel/parser@7.26.9(transitive)

• - Removed@babel/plugin-syntax-jsx@7.25.9(transitive)

• - Removed@babel/template@7.26.9(transitive)

• - Removed@babel/traverse@7.26.9(transitive)

• - Removed@babel/types@7.26.9(transitive)

• - Removed@emotion/is-prop-valid@0.8.8(transitive)

• - Removed@emotion/memoize@0.7.4(transitive)

• - Removed@emotion/unitless@0.7.5(transitive)

• - Removed@jridgewell/gen-mapping@0.3.8(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removedbabel-plugin-styled-components@2.1.4(transitive)

• - Removedbrowserslist@4.24.4(transitive)

• - Removedcaniuse-lite@1.0.30001700(transitive)

• - Removedconvert-source-map@2.0.0(transitive)

• - Removedcss-to-react-native@2.3.2(transitive)

• - Removeddebug@4.4.0(transitive)

• - Removedelectron-to-chromium@1.5.103(transitive)

• - Removedescalade@3.2.0(transitive)

• - Removedgensync@1.0.0-beta.2(transitive)

• - Removedglobals@11.12.0(transitive)

• - Removedhas-flag@3.0.0(transitive)

• - Removedis-what@3.14.1(transitive)

• - Removedjsesc@3.1.0(transitive)

• - Removedjson5@2.2.3(transitive)

• - Removedlodash@4.17.21(transitive)

• - Removedlru-cache@5.1.1(transitive)

• - Removedmemoize-one@5.2.1(transitive)

• - Removedmerge-anything@2.4.4(transitive)

• - Removedms@2.1.3(transitive)

• - Removednode-releases@2.0.19(transitive)

• - Removedpicomatch@2.3.1(transitive)

• - Removedpostcss-value-parser@3.3.1(transitive)

• - Removedsemver@6.3.1(transitive)

• - Removedstyled-components@4.4.1(transitive)

• - Removedstylis@3.5.4(transitive)

• - Removedstylis-rule-sheet@0.0.10(transitive)

• - Removedsupports-color@5.5.0(transitive)

• - Removedupdate-browserslist-db@1.1.2(transitive)

• - Removedyallist@3.1.1(transitive)