@cloudflare/component-button 2.12.1 → 2.12.5

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.12.5](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.12.4...@cloudflare/component-button@2.12.5) (2022-02-08)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
+## [2.12.4](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.12.3...@cloudflare/component-button@2.12.4) (2022-02-08)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
+## [2.12.3](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.12.2...@cloudflare/component-button@2.12.3) (2022-02-04)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
+## [2.12.2](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.12.1...@cloudflare/component-button@2.12.2) (2022-02-01)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
 ## [2.12.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.12.0...@cloudflare/component-button@2.12.1) (2022-01-19)
 
 **Note:** Version bump only for package @cloudflare/component-button

package/dist/Button.d.ts

@@ -1,5 +1,115 @@
 import React from 'react';
+import { ThemeProp } from '@cloudflare/style-container';
 import { IconType } from '@cloudflare/component-icon';
+export declare const buttonStyles: (props: PropsWithTheme) => {
+    readonly '&:hover': {
+        backgroundColor: string | undefined;
+        color: string | undefined;
+    } | undefined;
+    readonly '&:active': {
+        backgroundColor: string | undefined;
+        color: string | undefined;
+    } | undefined;
+    readonly '&:focus': {
+        backgroundColor: string | undefined;
+        color: string | undefined;
+    } | undefined;
+    readonly '&:focus-visible': {
+        readonly outlineOffset: 3;
+        readonly outlineStyle: "auto";
+        readonly outlineColor: string;
+    };
+    readonly '&:focus-within:hover': {
+        backgroundColor: string | undefined;
+        color: string | undefined;
+    } | undefined;
+    readonly '&:active:hover': {
+        backgroundColor: string | undefined;
+        color: string | undefined;
+    } | undefined;
+    readonly '&[title]': {
+        readonly pointerEvents: "none" | "auto";
+    };
+    readonly backgroundColor: string | undefined;
+    readonly color: string | undefined;
+    readonly cursor: "default" | "pointer";
+    readonly display: "inline-flex";
+    readonly flexGrow: 1 | undefined;
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\",  Arial, sans-serif";
+    readonly fontSize: 2;
+    readonly fontWeight: 400;
+    readonly lineHeight: 1.2;
+    readonly borderBottomWidth: 0 | "1px";
+    readonly borderLeftWidth: 0 | "1px";
+    readonly borderRightWidth: 0 | "1px";
+    readonly borderTopWidth: 0 | "1px";
+    readonly borderBottomStyle: "solid";
+    readonly borderTopStyle: "solid";
+    readonly borderLeftStyle: "solid";
+    readonly borderRightStyle: "solid";
+    readonly borderColor: string | undefined;
+    readonly borderTopRightRadius: 0 | 5;
+    readonly borderTopLeftRadius: 0 | 5;
+    readonly borderBottomLeftRadius: 0 | 5;
+    readonly borderBottomRightRadius: 0 | 5;
+    readonly '&::before': {
+        content: string;
+        color: string | undefined;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        position: string;
+        left: number;
+        height: string;
+        width: string;
+        opacity: number;
+        animationName: {
+            '50%': {
+                opacity: number;
+            };
+        };
+        animationDuration: string;
+        animationIterationCount: string;
+        animationTimingFunction: string;
+    } | undefined;
+    readonly opacity: "inherit" | 0.5;
+    readonly mt: number;
+    readonly mr: 0;
+    readonly mb: 0;
+    readonly ml: number;
+    readonly px: 3;
+    readonly py: 2;
+    readonly pointerEvents: "none" | "auto";
+    readonly position: "relative";
+    readonly textAlign: "center";
+    readonly transitionProperty: "background-color,border-color" | "background-color,border-color,color";
+    readonly transitionDuration: "200ms";
+    readonly transitionTimingFunction: "ease";
+    readonly userSelect: "none";
+    readonly maxWidth: "initial";
+    readonly float: "none";
+    readonly whiteSpace: "nowrap";
+    readonly width: "auto" | "100%";
+};
+declare type Props = {
+    submit?: boolean;
+    spaced?: boolean;
+    space?: number;
+    direction?: 'column' | 'row';
+    group?: 'first' | 'inbetween' | 'last';
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    testId?: string;
+    loading?: boolean;
+    inverted?: boolean;
+    iconType?: IconType;
+    iconLabel?: string;
+    iconSize?: number;
+    ariaLabel?: string;
+    stretch?: boolean;
+} & Pick<JSX.IntrinsicElements['button'], 'onClick' | 'disabled' | 'form' | 'tabIndex' | 'className'>;
+declare type PropsWithTheme = Props & ThemeProp;
 declare const _default: React.ComponentType<{
     form?: string | undefined;
     key?: React.Key | null | undefined;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import Button from './Button';
+import Button, { buttonStyles } from './Button';
 import ButtonGroup from './ButtonGroup';
 import TextButton from './TextButton';
 import IconTextButton from './IconTextButton';
 import UnstyledButton from './UnstyledButton';
-export { Button, ButtonGroup, TextButton, IconTextButton, UnstyledButton };
+export { buttonStyles, Button, ButtonGroup, TextButton, IconTextButton, UnstyledButton };

package/es/Button.js

@@ -139,7 +139,7 @@ const interactionStyleAccessor = (interactionState, props) => {
   } : undefined;
 };
 
-const styles = props => {
+export const buttonStyles = props => {
   const theme = props.theme,
         _props$loading = props.loading,
         loading = _props$loading === void 0 ? false : _props$loading,
@@ -236,7 +236,6 @@ const styles = props => {
     width: direction === 'column' ? '100%' : 'auto'
   };
 };
-
 const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   const _props$submit = props.submit,
         submit = _props$submit === void 0 ? false : _props$submit,
@@ -294,4 +293,4 @@ Button.propTypes = {
   stretch: PropTypes.bool
 };
 Button.displayName = 'Button';
-export default createStyledComponent(styles, Button);
+export default createStyledComponent(buttonStyles, Button);

package/es/index.js

@@ -1,6 +1,6 @@
-import Button from './Button';
+import Button, { buttonStyles } from './Button';
 import ButtonGroup from './ButtonGroup';
 import TextButton from './TextButton';
 import IconTextButton from './IconTextButton';
 import UnstyledButton from './UnstyledButton';
-export { Button, ButtonGroup, TextButton, IconTextButton, UnstyledButton };
+export { buttonStyles, Button, ButtonGroup, TextButton, IconTextButton, UnstyledButton };

package/lib/Button.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.buttonStyles = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -155,7 +155,7 @@ var interactionStyleAccessor = function interactionStyleAccessor(interactionStat
   } : undefined;
 };
 
-var styles = function styles(props) {
+var buttonStyles = function buttonStyles(props) {
   var theme = props.theme,
       _props$loading = props.loading,
       loading = _props$loading === void 0 ? false : _props$loading,
@@ -253,6 +253,8 @@ var styles = function styles(props) {
   };
 };
 
+exports.buttonStyles = buttonStyles;
+
 var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$submit = props.submit,
       submit = _props$submit === void 0 ? false : _props$submit,
@@ -314,6 +316,6 @@ Button.propTypes = {
 };
 Button.displayName = 'Button';
 
-var _default = (0, _styleContainer.createStyledComponent)(styles, Button);
+var _default = (0, _styleContainer.createStyledComponent)(buttonStyles, Button);
 
 exports.default = _default;

package/lib/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,6 +11,12 @@ Object.defineProperty(exports, "Button", {
     return _Button.default;
   }
 });
+Object.defineProperty(exports, "buttonStyles", {
+  enumerable: true,
+  get: function get() {
+    return _Button.buttonStyles;
+  }
+});
 Object.defineProperty(exports, "ButtonGroup", {
   enumerable: true,
   get: function get() {
@@ -34,7 +42,7 @@ Object.defineProperty(exports, "UnstyledButton", {
   }
 });
 
-var _Button = _interopRequireDefault(require("./Button"));
+var _Button = _interopRequireWildcard(require("./Button"));
 
 var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup"));
 
@@ -44,4 +52,8 @@ var _IconTextButton = _interopRequireDefault(require("./IconTextButton"));
 
 var _UnstyledButton = _interopRequireDefault(require("./UnstyledButton"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-button",
   "description": "Cloudflare Button Component",
-  "version": "2.12.1",
+  "version": "2.12.5",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -12,9 +12,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/component-icon": "^6.6.10",
-    "@cloudflare/style-const": "^5.2.0",
-    "@cloudflare/style-container": "^7.6.1",
+    "@cloudflare/component-icon": "^6.6.13",
+    "@cloudflare/style-const": "^5.2.3",
+    "@cloudflare/style-container": "^7.6.4",
     "polished": "^1.9.3",
     "prop-types": "^15.6.0"
   },
@@ -32,5 +32,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "2ff85104561ff104d4e3d777f0c3d9ee49c2d4c7"
+  "gitHead": "4cae13e569aecfe2e562957bef3e38c0cdfcffa7"
 }