@planningcenter/tapestry-react 2.1.1 → 2.1.2

package/dist/cjs/Avatar/Avatar.js

@@ -14,8 +14,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _system = require("../system");
-
+var avatarSizes = {
+  xs: 2.5,
+  sm: 3,
+  md: 4.5,
+  lg: 6,
+  xl: 9,
+  xxl: 14
+};
 var borderSizes = {
   xs: 2,
   sm: 2,
@@ -34,16 +40,12 @@ function Avatar(_ref) {
       source = _ref.source,
       status = _ref.status,
       restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["size", "source", "status"]);
-
-  var _useBoxSize = (0, _system.useBoxSize)(size),
-      boxSize = _useBoxSize.boxSize;
-
   return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
     as: "img",
     src: source,
-    width: boxSize,
-    height: boxSize,
-    flexBasis: boxSize,
+    width: avatarSizes[size],
+    height: avatarSizes[size],
+    flexBasis: avatarSizes[size],
     flexShrink: 0,
     flexGrow: 0,
     objectFit: "cover",

package/dist/cjs/Pagination/Pagination.js

@@ -23,6 +23,8 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _utils = require("../utils");
 
+var _utils2 = require("../system/utils");
+
 var _windowSize = require("@react-hook/window-size");
 
 var _system = require("../system");
@@ -100,28 +102,32 @@ function Pagination(_ref2) {
   }
 
   function renderPageLink(number) {
-    var isActive = currentPage === number;
+    var isCurrentPage = currentPage === number;
+    var activeBackgroundColor = (0, _utils2.parseColor)({
+      base: activeColor,
+      alpha: 0.1
+    });
     var outlineStyle = {
-      border: '1px solid #5b8bf7',
-      color: '#5b8bf7'
+      border: "1px solid " + activeColor,
+      color: isCurrentPage ? '#fff' : activeColor
     };
     return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
-      key: number,
-      focus: _objectSpread({
-        backgroundColor: '#f4f8fd'
+      active: _objectSpread({
+        backgroundColor: isCurrentPage ? activeColor : activeBackgroundColor
       }, outlineStyle),
+      key: number,
       fontWeight: 500,
       hover: _objectSpread({
-        backgroundColor: '#ffffff'
+        backgroundColor: isCurrentPage ? activeColor : '#fff'
       }, outlineStyle),
       onClick: onPageChange.bind(null, number),
       shrink: 0,
       square: true,
       title: number,
-      variant: isActive ? 'fill' : 'naked'
-    }, isActive && {
-      backgroundColor: '#5b8bf7',
-      color: 'white'
+      variant: isCurrentPage ? 'fill' : 'naked'
+    }, isCurrentPage && {
+      backgroundColor: activeColor,
+      color: '#fff'
     }));
   }
 

package/dist/cjs/system/box-sizes.js

@@ -23,7 +23,7 @@ var boxSizes = {
     radius: 3
   },
   md: {
-    boxSize: 4.5,
+    boxSize: 4,
     fontSize: 4,
     lineHeight: 3,
     paddingHorizontalDense: 1,
@@ -32,7 +32,7 @@ var boxSizes = {
     radius: 4
   },
   lg: {
-    boxSize: 6,
+    boxSize: 5,
     fontSize: 3,
     lineHeight: 4,
     paddingHorizontalDense: 1,
@@ -41,7 +41,7 @@ var boxSizes = {
     radius: 5
   },
   xl: {
-    boxSize: 9,
+    boxSize: 8,
     fontSize: 1,
     lineHeight: 5,
     paddingHorizontalDense: 2,

package/dist/esm/Avatar/Avatar.js

@@ -2,7 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import Box from '../Box';
-import { useBoxSize } from '../system';
+var avatarSizes = {
+  xs: 2.5,
+  sm: 3,
+  md: 4.5,
+  lg: 6,
+  xl: 9,
+  xxl: 14
+};
 var borderSizes = {
   xs: 2,
   sm: 2,
@@ -22,15 +29,12 @@ export function Avatar(_ref) {
       status = _ref.status,
       restProps = _objectWithoutPropertiesLoose(_ref, ["size", "source", "status"]);
 
-  var _useBoxSize = useBoxSize(size),
-      boxSize = _useBoxSize.boxSize;
-
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: "img",
     src: source,
-    width: boxSize,
-    height: boxSize,
-    flexBasis: boxSize,
+    width: avatarSizes[size],
+    height: avatarSizes[size],
+    flexBasis: avatarSizes[size],
     flexShrink: 0,
     flexGrow: 0,
     objectFit: "cover",

package/dist/esm/Pagination/Pagination.js

@@ -12,6 +12,7 @@ import Button from '../Button';
 import Group from '../Group';
 import StackView from '../StackView';
 import { range } from '../utils';
+import { parseColor } from '../system/utils';
 import { useWindowWidth } from '@react-hook/window-size';
 import { useThemeValue } from '../system';
 
@@ -85,28 +86,32 @@ export default function Pagination(_ref2) {
   }
 
   function renderPageLink(number) {
-    var isActive = currentPage === number;
+    var isCurrentPage = currentPage === number;
+    var activeBackgroundColor = parseColor({
+      base: activeColor,
+      alpha: 0.1
+    });
     var outlineStyle = {
-      border: '1px solid #5b8bf7',
-      color: '#5b8bf7'
+      border: "1px solid " + activeColor,
+      color: isCurrentPage ? '#fff' : activeColor
     };
     return /*#__PURE__*/React.createElement(Button, _extends({
-      key: number,
-      focus: _objectSpread({
-        backgroundColor: '#f4f8fd'
+      active: _objectSpread({
+        backgroundColor: isCurrentPage ? activeColor : activeBackgroundColor
       }, outlineStyle),
+      key: number,
       fontWeight: 500,
       hover: _objectSpread({
-        backgroundColor: '#ffffff'
+        backgroundColor: isCurrentPage ? activeColor : '#fff'
       }, outlineStyle),
       onClick: onPageChange.bind(null, number),
       shrink: 0,
       square: true,
       title: number,
-      variant: isActive ? 'fill' : 'naked'
-    }, isActive && {
-      backgroundColor: '#5b8bf7',
-      color: 'white'
+      variant: isCurrentPage ? 'fill' : 'naked'
+    }, isCurrentPage && {
+      backgroundColor: activeColor,
+      color: '#fff'
     }));
   }
 

package/dist/esm/system/box-sizes.js

@@ -18,7 +18,7 @@ export var boxSizes = {
     radius: 3
   },
   md: {
-    boxSize: 4.5,
+    boxSize: 4,
     fontSize: 4,
     lineHeight: 3,
     paddingHorizontalDense: 1,
@@ -27,7 +27,7 @@ export var boxSizes = {
     radius: 4
   },
   lg: {
-    boxSize: 6,
+    boxSize: 5,
     fontSize: 3,
     lineHeight: 4,
     paddingHorizontalDense: 1,
@@ -36,7 +36,7 @@ export var boxSizes = {
     radius: 5
   },
   xl: {
-    boxSize: 9,
+    boxSize: 8,
     fontSize: 1,
     lineHeight: 5,
     paddingHorizontalDense: 2,

package/dist/types/Button/Button.d.ts

@@ -11,6 +11,10 @@ declare type ButtonProps = {
      * Opens the linked destination in a new window or tab.
      */
     external?: boolean;
+    /**
+     * Pass styles for when the button is active.
+     */
+    active?: object;
     /**
      * Pass styles for when the button is focused.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/Avatar/Avatar.tsx

@@ -1,7 +1,15 @@
 import React from 'react'
 
 import Box from '../Box'
-import { useBoxSize } from '../system'
+
+const avatarSizes = {
+  xs: 2.5,
+  sm: 3,
+  md: 4.5,
+  lg: 6,
+  xl: 9,
+  xxl: 14,
+}
 
 const borderSizes = {
   xs: 2,
@@ -16,15 +24,15 @@ type AvatarProps = {
   /**
    * Controls the size of the avatar.
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
   /**
    * The source of the image to display.
    */
-  source?: string,
+  source?: string
   /**
    * Adds a colored ring with padding around the avatar. Accepts a valid color string.
    */
-  status?: string,
+  status?: string
 }
 
 /**
@@ -36,14 +44,13 @@ export function Avatar({
   status,
   ...restProps
 }: AvatarProps) {
-  const { boxSize } = useBoxSize(size)
   return (
     <Box
       as="img"
       src={source}
-      width={boxSize}
-      height={boxSize}
-      flexBasis={boxSize}
+      width={avatarSizes[size]}
+      height={avatarSizes[size]}
+      flexBasis={avatarSizes[size]}
       flexShrink={0}
       flexGrow={0}
       objectFit="cover"

package/src/Button/Button.tsx

@@ -25,6 +25,11 @@ type ButtonProps = {
    */
   external?: boolean
 
+  /**
+   * Pass styles for when the button is active.
+   */
+  active?: object
+
   /**
    * Pass styles for when the button is focused.
    */

package/src/Pagination/Pagination.tsx

@@ -5,6 +5,7 @@ import Button from '../Button'
 import Group from '../Group'
 import StackView from '../StackView'
 import { range } from '../utils'
+import { parseColor } from '../system/utils'
 import { useWindowWidth } from '@react-hook/window-size'
 import { useThemeValue } from '../system'
 
@@ -39,27 +40,27 @@ export type PaginationProps = {
   /**
    * Change the color of the active page
    */
-  activeColor: string,
+  activeColor: string
 
   /**
    * Current visible page number
    */
-  currentPage: number,
+  currentPage: number
 
   /**
    * Callback when new page is requested
    */
-  onPageChange: (nextPage: number) => undefined,
+  onPageChange: (nextPage: number) => undefined
 
   /**
    * Total available pages
    */
-  totalPages: number,
+  totalPages: number
 
   /**
    * Amount of visible pages
    */
-  visiblePages?: number,
+  visiblePages?: number
 }
 
 const NavButton = ({ disabled, iconName, ...props }) => {
@@ -98,22 +99,31 @@ export default function Pagination({
   }
 
   function renderPageLink(number) {
-    const isActive = currentPage === number
-
-    const outlineStyle = { border: '1px solid #5b8bf7', color: '#5b8bf7' }
+    const isCurrentPage = currentPage === number
+    const activeBackgroundColor = parseColor({ base: activeColor, alpha: 0.1 })
+    const outlineStyle = {
+      border: `1px solid ${activeColor}`,
+      color: isCurrentPage ? '#fff' : activeColor,
+    }
 
     return (
       <Button
+        active={{
+          backgroundColor: isCurrentPage ? activeColor : activeBackgroundColor,
+          ...outlineStyle,
+        }}
         key={number}
-        focus={{ backgroundColor: '#f4f8fd', ...outlineStyle }}
         fontWeight={500}
-        hover={{ backgroundColor: '#ffffff', ...outlineStyle }}
+        hover={{
+          backgroundColor: isCurrentPage ? activeColor : '#fff',
+          ...outlineStyle,
+        }}
         onClick={onPageChange.bind(null, number)}
         shrink={0}
         square
         title={number}
-        variant={isActive ? 'fill' : 'naked'}
-        {...(isActive && { backgroundColor: '#5b8bf7', color: 'white' })}
+        variant={isCurrentPage ? 'fill' : 'naked'}
+        {...(isCurrentPage && { backgroundColor: activeColor, color: '#fff' })}
       />
     )
   }

package/src/system/box-sizes.js

@@ -18,7 +18,7 @@ export const boxSizes = {
     radius: 3,
   },
   md: {
-    boxSize: 4.5,
+    boxSize: 4,
     fontSize: 4,
     lineHeight: 3,
     paddingHorizontalDense: 1,
@@ -27,7 +27,7 @@ export const boxSizes = {
     radius: 4,
   },
   lg: {
-    boxSize: 6,
+    boxSize: 5,
     fontSize: 3,
     lineHeight: 4,
     paddingHorizontalDense: 1,
@@ -36,7 +36,7 @@ export const boxSizes = {
     radius: 5,
   },
   xl: {
-    boxSize: 9,
+    boxSize: 8,
     fontSize: 1,
     lineHeight: 5,
     paddingHorizontalDense: 2,