@times-tooling/button - npm Package Compare versions

Comparing version 3.4.3 to 3.4.5

lib/linkStyle.js

+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { colors } from '@times-tooling/style-guide';
+import { Link } from 'react-router-dom'; // semi-hack so that props are not passed down to DOM causing react warnings
+
+/* eslint-disable no-unused-vars */
+
+const LinkWithRelevantProps = (_ref) => {
+  let {
+    buttonStyle,
+    bordered,
+    rounded,
+    inverted,
+    centered,
+    hoverEnabled,
+    textAsIcon,
+    icon,
+    withText,
+    displayMode,
+    children
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, ["buttonStyle", "bordered", "rounded", "inverted", "centered", "hoverEnabled", "textAsIcon", "icon", "withText", "displayMode", "children"]);
+
+  return React.createElement(Link, rest, children);
+};
+/* eslint-enable no-unused-vars */
+
+
+const buttonStyling = css`  appearance: none;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  font-size: 1.5rem;
+  cursor: pointer;
+  line-height: 1rem;
+  border-radius: 2px;
+  font-family: 'Montserrat', sans-serif;
+
+  svg {
+    font-size: 1.6rem;
+    text-align: center;
+  }
+
+  ${props => props.text && css`
+      display: flex;
+      outline: none;
+      border: none;
+      background-color: inherit;
+      color: ${colors.inputText};
+    `}
+
+  ${props => props.bordered && css`
+      border: 1px solid ${colors.primary};
+    `}
+
+  ${props => props.rounded && css`
+      border-radius: 10rem;
+    `}
+
+  ${props => props.centered && css`
+      & {
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+      }
+    `}
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  ${props => props.size === 'large' && css`
+      padding: 1rem;
+      min-height: 4rem;
+      min-width: 4rem;
+
+      ${props => props.withText && css`
+          padding: 1rem;
+          width: inherit;
+
+      ${props => props.bordered && css`
+          padding: 0.9rem;
+        `}
+
+      ${props => props.displayMode === 'block' && css`
+          width: 100%;
+          padding: 1rem 3rem;
+        `}
+
+      ${props => props.textAsIcon && css`
+          padding: 1rem 0;
+          width: 4rem;
+        `}
+      `}
+    `}
+
+  ${props => props.size === 'small' && css`
+      font-size: 1.4rem;
+      padding: 0.3rem;
+      height: 3rem;
+      width: 3rem;
+
+      ${props => props.withText && css`
+      height: 3rem;
+      width: inherit;
+      padding: 0.3rem 1.5rem;
+
+      svg {
+        padding: 0;
+      }
+
+      ${props => props.bordered && css`
+          padding: 0.2rem 1.4rem;
+        `}
+
+      ${props => props.displayMode === 'block' && css`
+          width: 100%;
+
+          ${props => props.bordered && css`
+              padding: 0.2rem 1.5rem;
+            `}
+        `}
+
+      ${props => props.textAsIcon && css`
+          padding: 0.3rem 0;
+          width: 3rem;
+        `}
+
+      ${props => props.bordered && css`
+          ${props => props.textAsIcon && css`
+              padding: 0.3rem;
+            `}
+        `}
+    `}
+
+      svg {
+        font-size: 1.4rem;
+        padding: 0.4rem;
+      }
+    `}
+
+  ${props => props.size === 'tiny' && css`
+      font-size: 1.4rem;
+      padding: 0;
+      height: 2rem;
+      min-width: 2rem;
+
+      ${props => props.withText && css`
+          svg {
+            padding: 0;
+          }
+        `}
+
+      svg {
+        font-size: 1.1rem;
+        padding: 0.25rem;
+      }
+    `}
+
+  ${props => props.displayMode === 'block' && css`
+      width: 100%;
+      max-width: 25rem;
+    `}
+
+  ${props => props.withText && props.icon && css`
+      svg {
+        margin-right: 0.6rem;
+      }
+    `}
+
+  ${props => props.buttonStyle === 'primary' && css`
+      background-color: ${colors.primary};
+      color: ${colors.white};
+
+      ${props => props.hoverEnabled && css`
+          &:hover {
+            background-color: ${colors.secondary};
+          }
+        `}
+
+      &:disabled {
+        background-color: ${colors.inputDisabledBackground};
+        color: ${colors.darkText};
+
+        ${props => props.hoverEnabled && css`
+            &:hover {
+              background-color: ${colors.inputDisabledBackground};
+            }
+          `}
+      }
+
+      &:focus {
+        outline: 0;
+        box-shadow: 0 0 0 2px rgba(${colors.primary}, 0.4);
+      }
+
+      ${props => props.selected && css`
+          border: 2px solid black;
+        `}
+
+      ${props => props.inverted && css`
+          background-color: #fff;
+          color: ${colors.primary};
+
+          ${props => props.hoverEnabled && css`:hover {
+            background-color: ${colors.primary};
+            color: #fff;
+          `}
+
+          &:disabled {
+            background-color: ${colors.inputDisabledBackground};
+            color: ${colors.darkText};
+            cursor: default;
+
+            ${props => props.hoverEnabled && css`
+                :hover {
+                  background-color: ${colors.inputDisabledBackground};
+                  color: ${colors.darkText};
+                }
+              `}
+          }
+        `}
+    `}
+
+    ${props => props.buttonStyle === 'secondary' && css`
+        background-color: transparent;
+        color: ${colors.oxfordBlue};
+
+        ${props => props.hoverEnabled && css`
+            :hover {
+              background-color: darken(#fff, 20%);
+            }
+          `}
+
+        &:disabled {
+            background-color: ${colors.inputDisabledBackground};
+            color: ${colors.darkText};
+
+            ${props => props.hoverEnabled && css`
+                :hover {
+                  background-color: ${colors.inputDisabledBackground};
+                }
+              `}
+        }
+
+        &:focus {
+            outline: 0;
+            box-shadow: 0 0 0 2px rgba(${colors.primary}, 0.4);
+        }
+
+        ${props => props.selected && css`
+            border: 1px solid #e9eef2;
+            background-color: #7b93ad;
+            color: #fff;
+          `}
+
+        ${props => props.bordered && css`
+            border-color: ${colors.mysticGrey};
+          `}
+
+        ${props => props.inverted && css`
+            background-color: transparent;
+            color: #fff;
+          `}
+
+        ${props => props.hoverEnabled && css`
+            :hover {
+              background-color: darken(${colors.oxfordBlue}, 20%);
+            }
+          `}
+
+        &:disabled {
+            background-color: #666;
+            color: rgba(255, 255, 255, 0.4);
+            cursor: default;
+            ${props => props.hoverEnabled && css`
+                :hover {
+                  background-color: ${colors.inputDisabledBackground};
+                }
+              `}
+        }
+
+        ${props => props.bordered && css`
+            border: 1px solid #333;
+          `}
+    }
+    `}`;
+export const ButtonBase = styled.button`
+  ${buttonStyling}
+`;
+export const LinkBase = styled(LinkWithRelevantProps)`
+    ${buttonStyling}
+    
+    display: inline-block;
+
+    ${props => props.size === 'large' && css`
+        line-height: 2rem;
+
+        ${props => props.selected && css`
+            padding: 0.8rem;
+          `}
+      `}
+
+    ${props => props.size === 'small' && css`
+        line-height: 2.3rem;
+      `}
+
+    ${props => props.size === 'tiny' && css`
+    line-height: 2.3rem;
+
+    ${props => props.withText && css`
+        line-height: 2rem;
+      `}
+
+    ${props => props.icon || props.textAsIcon && css`
+          text-align: center;
+        `}
+
+    ${props => props.textAsIcon && css`
+        line-height: 2rem;
+      `}
+    `}
+
+    ${props => props.displayMode === 'block' && css`
+        text-align: center;
+      `}
+`;

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+## [3.4.5](https://github.com/newsuk/times-tooling/compare/@times-tooling/button@3.4.3...@times-tooling/button@3.4.5) (2020-11-25)
+
+**Note:** Version bump only for package @times-tooling/button
+
+
+
+
+
+## [3.4.4](https://github.com/newsuk/times-tooling/compare/@times-tooling/button@3.4.3...@times-tooling/button@3.4.4) (2020-11-25)
+
+**Note:** Version bump only for package @times-tooling/button
+
+
+
+
+
 ## [3.4.3](https://github.com/newsuk/times-tooling/compare/@times-tooling/button@3.4.2...@times-tooling/button@3.4.3) (2020-11-16)
@@ -8,0 +24,0 @@

lib/index.js

@@ -0,1 +1,7 @@
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 import React, { memo } from 'react';
@@ -5,3 +11,63 @@ import PropTypes from 'prop-types';
 import styles from './style.scss';
+import { LinkBase } from './linkStyle';
+export const LinkButton = (_ref) => {
+  let {
+    children,
+    onClick,
+    title,
+    type = 'button',
+    disabled = false,
+    selected = false,
+    buttonStyle = 'primary',
+    displayMode = 'block',
+    size = 'large',
+    bordered = false,
+    rounded = true,
+    inverted = false,
+    centered = false,
+    hoverEnabled = true,
+    textAsIcon = false,
+    icon = null
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, ["children", "onClick", "title", "type", "disabled", "selected", "buttonStyle", "displayMode", "size", "bordered", "rounded", "inverted", "centered", "hoverEnabled", "textAsIcon", "icon"]);
 
+  return React.createElement(LinkBase, _extends({
+    buttonStyle: buttonStyle,
+    displayMode: displayMode,
+    size: size,
+    withText: children.length > 0,
+    bordered: bordered,
+    rounded: rounded,
+    inverted: inverted,
+    centered: centered,
+    icon: icon,
+    hoverEnabled: hoverEnabled,
+    textAsIcon: textAsIcon,
+    selected: selected,
+    disabled: disabled,
+    type: type,
+    title: title,
+    onClick: onClick
+  }, rest), icon && React.createElement("i", {
+    className: `fa fa-${icon}`
+  }), children);
+};
+LinkButton.displayName = 'LinkButton';
+LinkButton.propTypes = {
+  buttonStyle: PropTypes.oneOf(['primary', 'secondary']),
+  displayMode: PropTypes.oneOf(['inline', 'block']),
+  size: PropTypes.oneOf(['tiny', 'small', 'large']),
+  icon: PropTypes.string,
+  selected: PropTypes.bool,
+  disabled: PropTypes.bool,
+  centered: PropTypes.bool,
+  hoverEnabled: PropTypes.bool,
+  textAsIcon: PropTypes.bool,
+  type: PropTypes.string,
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+  bordered: PropTypes.bool,
+  rounded: PropTypes.bool
+};
+
 const joinClasses = cs => cs.filter(Boolean).join(' ').trim();
@@ -8,0 +74,0 @@

package.json

 {
   "name": "@times-tooling/button",
-  "version": "3.4.3",
+  "version": "3.4.5",
   "main": "lib/index.js",
@@ -16,3 +16,3 @@ "module": "lib/index.js",
     "@fortawesome/fontawesome-free": "^5.15.0",
-    "@times-tooling/style-guide": "2.0.2",
+    "@times-tooling/style-guide": "2.0.4",
     "classnames": "^2.2.6",
@@ -44,3 +44,3 @@ "prop-types": "^15.6.2",
   ],
-  "gitHead": "564db9cbf3cf88f0e9160a0b9d8b0d09ffffe62d"
+  "gitHead": "b5229b75a83c0ada03f74e84e8feecb9f5922c4b"
 }

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

Fixed 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

Improved metrics

Total package byte prevSize

27063

74.34%

Number of package files

6

20%

Lines of code

377

797.62%

Dependency changes

• + Added

  @times-tooling/style-guide@2.0.4
  (transitive)

• - Removed

  @times-tooling/style-guide@2.0.2
  (transitive)

• Updated

  @times-tooling/style-guide@2.0.4