@times-tooling/button - npm Package Compare versions

Comparing version 3.4.2 to 3.4.3

lib/style.scss

+@import '~@times-tooling/style-guide/_index.scss';
+
+button.button {
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  font-size: 1.5rem;
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+
+  i {
+    font-size: 1.6rem;
+    height: 2.6rem;
+    text-align: center;
+    line-height: 2.6rem;
+  }
+
+  &.primary {
+    border-radius: 10rem;
+    background-color: $colourPrimary;
+    color: $white;
+    font-weight: 500;
+    width: 25rem;
+    padding: 1rem 3rem;
+
+    &:hover:enabled {
+      background-color: $colourSecondary;
+    }
+
+    &:disabled {
+      background-color: $colourInputDisabledBackground;
+      color: $colourDarkText;
+      cursor: default;
+    }
+
+    &.inverted {
+      background-color: $white;
+      color: $colourPrimary;
+      border: 1px solid $colourPrimary;
+
+      &:disabled {
+        background-color: $colourInputDisabledBackground;
+        border: unset;
+        color: $colourDarkText;
+        cursor: default;
+      }
+
+      &:hover:enabled {
+        background-color: $colourSecondary;
+        color: $white;
+      }
+    }
+
+    &.withText {
+      i {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+
+  &.secondary {
+    font-size: 1.4rem;
+    border-radius: 10rem;
+    background-color: $colourSecondary;
+    padding: 0rem 1.5rem;
+    color: $white;
+    min-height: 2.5rem;
+
+    &:disabled {
+      background-color: $colourInputDisabledBackground;
+      color: $colourDisabled;
+      opacity: 0.85;
+      cursor: default;
+    }
+
+    &.withText {
+      i {
+        margin-right: 0.5rem;
+      }
+    }
+
+    &:hover {
+      background-color: darken($colourSecondary, 5%);
+    }
+
+    &.selected {
+      background-color: darken($colourSecondary, 25%);
+      border: none;
+    }
+  }
+
+  &.tertiary {
+    border-radius: 10rem;
+    background-color: $colourButtonTertiary;
+    color: $colourOxfordBlue;
+    font-weight: 500;
+    width: 25rem;
+    padding: 1rem 3rem;
+
+    &:hover {
+      background-color: darken($colourButtonTertiary, 20%);
+    }
+  }
+
+  &.textOnly,
+  &.back,
+  &.cancel {
+    display: flex;
+    font-weight: 500;
+    outline: none;
+    border: none;
+    font-size: 1.4rem;
+    background-color: inherit;
+  }
+
+  &.textOnly,
+  &.cancel {
+    color: $colourInputText;
+  }
+
+  &.cancel {
+    margin: 2rem auto 0;
+  }
+
+  &.back {
+    color: $white;
+
+    .backArrow {
+      margin: auto 0.5rem;
+      width: 0.5rem;
+      height: 0.5rem;
+      transform: rotate(-315deg);
+      border-bottom: 1px solid $white;
+      border-left: 1px solid $white;
+    }
+
+    &.inverted {
+      color: $colourPrimary;
+
+      .backArrow {
+        border-color: $colourPrimary;
+      }
+    }
+  }
+
+  &.articleSlots {
+    border: 1px solid $colourBorder;
+    color: $colourTitleText;
+    opacity: 0.7;
+    border-radius: 100%;
+    height: 3rem;
+    min-width: 3rem;
+  }
+
+  &.create,
+  &.icon,
+  &.iconBorder,
+  &.iconCircle,
+  &.toggleDraft,
+  &.togglePublished {
+    background-color: $white;
+    color: $colourPrimary;
+    border: 1px solid $colourPrimary;
+    border-radius: 100%;
+    height: 3rem;
+    min-width: 3rem;
+  }
+
+  &.create {
+    font-size: 2rem;
+
+    &:hover {
+      background-color: $colourPrimary;
+      color: $white;
+    }
+  }
+
+  &.icon {
+    border: none;
+    background: inherit;
+
+    &.inverted {
+      color: $white;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+
+    &:hover:enabled {
+      color: $colourSecondary;
+      transform: scale(1.1);
+    }
+  }
+
+  &.iconBorder {
+    border-radius: 2px;
+    background: inherit;
+    margin-left: 0.8rem;
+  }
+
+  &.iconCircle {
+    color: $black;
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 0 2px #888;
+    height: 2rem;
+    min-width: 2rem;
+    font-size: 0.5rem;
+
+    i {
+      font-size: 1.2rem;
+      height: 2.2rem;
+      text-align: center;
+      line-height: 2.2rem;
+    }
+  }
+
+  &.toggleDraft,
+  &.togglePublished {
+    width: 1.8rem;
+    height: 1.8rem;
+    color: $white;
+    min-width: 1.8rem;
+    max-width: 2rem;
+    max-height: 2rem;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    font-weight: 600;
+    border: none;
+
+    &[disabled] {
+      cursor: inherit;
+    }
+  }
+
+  &.toggleDraft {
+    background-color: $colourCadetBlue;
+
+    &:hover:enabled {
+      background-color: darken($colourCadetBlue, 10%);
+      transform: scale(1.1);
+    }
+  }
+
+  &.togglePublished {
+    background-color: $colourPastelGreen;
+
+    &:hover:enabled {
+      background-color: darken($colourPastelGreen, 10%);
+      transform: scale(1.1);
+    }
+  }
+
+  &.close {
+    position: absolute;
+    height: 2.4rem;
+    width: 2.4rem;
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      display: block;
+      margin: auto;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 2.4rem;
+      height: 0;
+      border-top: 1px solid $white;
+      transform-origin: center;
+    }
+    &:before {
+      transform: rotate(45deg);
+    }
+    &:after {
+      transform: rotate(-45deg);
+    }
+  }
+
+  // Color Picker
+  &.selected {
+    border: 2px solid black;
+  }
+}

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [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)
+
+**Note:** Version bump only for package @times-tooling/button
+
+
+
+
+
 ## [3.4.2](https://github.com/newsuk/times-tooling/compare/@times-tooling/button@3.4.1...@times-tooling/button@3.4.2) (2019-11-11)
@@ -8,0 +16,0 @@

lib/index.js

@@ -1,119 +0,45 @@
-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';
 import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ButtonBase, LinkBase } from './styles';
-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"]);
+import '@fortawesome/fontawesome-free/css/all.css';
+import styles from './style.scss';
 
-  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(FontAwesomeIcon, {
-    icon: icon
-  }), children);
-};
-export const Button = (_ref2) => {
-  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
-  } = _ref2,
-      rest = _objectWithoutProperties(_ref2, ["children", "onClick", "title", "type", "disabled", "selected", "buttonStyle", "displayMode", "size", "bordered", "rounded", "inverted", "centered", "hoverEnabled", "textAsIcon", "icon"]);
+const joinClasses = cs => cs.filter(Boolean).join(' ').trim();
 
-  return React.createElement(ButtonBase, _extends({}, rest, {
-    onClick: onClick,
-    title: title,
-    type: type,
-    disabled: disabled,
-    selected: selected,
-    buttonStyle: buttonStyle,
-    displayMode: displayMode,
-    size: size,
-    bordered: bordered,
-    rounded: rounded,
-    inverted: inverted,
-    centered: centered,
-    hoverEnabled: hoverEnabled,
-    textAsIcon: textAsIcon,
-    icon: icon,
-    withText: children && children.length > 0,
-    disabled: disabled,
-    type: type,
-    title: title,
-    onClick: onClick
-  }), icon && React.createElement(FontAwesomeIcon, {
-    icon: icon
-  }), children);
-};
-const commonPropTypes = {
-  buttonStyle: PropTypes.oneOf(['primary', 'secondary']),
-  displayMode: PropTypes.oneOf(['inline', 'block']),
-  size: PropTypes.oneOf(['tiny', 'small', 'large']),
-  icon: PropTypes.string,
-  selected: PropTypes.bool,
+export const Button = ({
+  children,
+  className,
+  disabled,
+  type,
+  onClick,
+  buttonStyle,
+  size = 'small',
+  title,
+  icon = null,
+  selected,
+  inverted,
+  id
+}) => React.createElement("button", {
+  id: id,
+  className: joinClasses([className, styles.button, styles[buttonStyle], styles[size], icon && styles.withIcon, children && children.length > 0 && styles.withText, selected && styles.selected, inverted && styles.inverted]),
+  disabled: disabled,
+  type: type,
+  title: title,
+  onClick: onClick
+}, icon && React.createElement("i", {
+  className: `fa fa-${icon}`
+}), buttonStyle === 'back' ? React.createElement(React.Fragment, null, React.createElement("div", {
+  className: styles.backArrow
+}), "Back") : children);
+Button.displayName = 'Button';
+Button.propTypes = {
   disabled: PropTypes.bool,
-  centered: PropTypes.bool,
-  hoverEnabled: PropTypes.bool,
-  textAsIcon: PropTypes.bool,
+  inverted: PropTypes.bool,
   type: PropTypes.string,
   title: PropTypes.string,
   onClick: PropTypes.func,
-  bordered: PropTypes.bool,
-  rounded: PropTypes.bool
+  buttonStyle: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'articleSlots', 'textOnly', 'back', 'close', 'create', 'icon', 'iconBorder', 'iconCircle', 'cancel', 'toggleDraft', 'togglePublished']),
+  size: PropTypes.oneOf(['small', 'large']),
+  icon: PropTypes.string,
+  selected: PropTypes.bool
 };
-Button.displayName = 'Button';
-Button.propTypes = commonPropTypes;
-LinkButton.displayName = 'LinkButton';
-LinkButton.propTypes = commonPropTypes;
 export default memo(Button);

package.json

 {
   "name": "@times-tooling/button",
-  "version": "3.4.2",
+  "version": "3.4.3",
   "main": "lib/index.js",
@@ -11,9 +11,7 @@ "module": "lib/index.js",
     "test": "jest",
-    "build": "rm -rf lib; babel src --out-dir lib",
+    "build": "rm -rf lib; babel src --out-dir lib && cp src/style.scss lib",
     "lint": "eslint ."
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.15",
-    "@fortawesome/free-solid-svg-icons": "^5.7.2",
-    "@fortawesome/react-fontawesome": "^0.1.4",
+    "@fortawesome/fontawesome-free": "^5.15.0",
     "@times-tooling/style-guide": "2.0.2",
@@ -46,3 +44,3 @@ "classnames": "^2.2.6",
   ],
-  "gitHead": "cef0ca29dab8a4bda741f9c744b6434803b81729"
+  "gitHead": "564db9cbf3cf88f0e9160a0b9d8b0d09ffffe62d"
 }

README.md

@@ -14,3 +14,3 @@ # Button
 ```jsx
-import { Button, LinkButton } from '@times-tooling/button';
+import Button from '@times-tooling/button';
 ```
@@ -32,12 +32,2 @@
 
-### `<LinkButton />`
-
-```jsx
-<Router>
-  <LinkButton size="small" to="/route/name">
-    Go!
-  </LinkButton>
-</Router>
-```
-
 ## Props
@@ -57,6 +47,2 @@
 
-### `to` (if using `<LinkButton />`)
-
-> React Router route to navigate to
-
 ### `buttonStyle`
@@ -68,2 +54,11 @@
 - `secondary`
+- `tertiary`
+- `textOnly`
+- `back`
+- `close`
+- `create`
+- `icon`
+- `iconBorder`
+- `iconCircle`
+- `cancel`
 
@@ -74,13 +69,5 @@ ### `size`
 
-- `large` (default)
-- `small`
-- `tiny`
+- `small` (default)
+- `large`
 
-### `displayMode`
-
-> Horizontally padded (fixed width or dynamic)
-
-- `block` (default)
-- `inline`
-
 ### `inverted` (Boolean, default: `false`)
@@ -90,14 +77,2 @@
 
-### `centered` (Boolean, default: `false`)
-
-> Position it centrally in the parent container
-
-### `bordered` (Boolean, default: `false`)
-
-> Include a border
-
-### `rounded` (Boolean, default: `true`)
-
-> Round the corners
-
 ### `selected` (Boolean, default: `false`)
@@ -111,10 +86,2 @@
 
-### `hoverEnabled` (Boolean, default: `true`)
-
-> Toggle if the hover effect is visible
-
-### `textAsIcon` (Boolean, default: `false`)
-
-> Treats the children (text) as if it were an icon
-
 ### `icon`
@@ -121,0 +88,0 @@

lib/styles.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;
-      `}
-`;

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

Improved metrics

Dependency count

8

-20%

Worsened metrics

Total package byte prevSize

15523

-29.8%

Lines of code

42

-89.12%

Number of lines in readme file

126

-20.75%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @fortawesome/fontawesome-free@^5.15.0

• - Removed

  @fortawesome/fontawesome-svg-core@^1.2.15

• - Removed

  @fortawesome/free-solid-svg-icons@^5.7.2

• - Removed

  @fortawesome/react-fontawesome@^0.1.4

• - Removed

  @fortawesome/fontawesome-common-types@0.2.360.3.0
  (transitive)

• - Removed

  @fortawesome/fontawesome-svg-core@1.3.0
  (transitive)

• - Removed

  @fortawesome/free-solid-svg-icons@5.15.4
  (transitive)

• - Removed

  @fortawesome/react-fontawesome@0.1.19
  (transitive)