@planningcenter/tapestry-react 2.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/Calendar/Day.js +32 -38
  2. package/dist/esm/Calendar/Day.js +32 -39
  3. package/package.json +1 -1
  4. package/src/Calendar/Day.js +13 -10
  5. package/src/Icon/Status.js +1 -1
package/dist/cjs/Calendar/Day.js CHANGED
@@ -17,38 +17,29 @@ var _StackView = _interopRequireDefault(require("../StackView"));
17
17
 
18
18
  var _Text = _interopRequireDefault(require("../Text"));
19
19
 
20
- var DayStatus = function DayStatus(_ref) {
21
- var color = _ref.color,
22
- restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["color"]);
23
- return /*#__PURE__*/_react["default"].createElement(_Icon["default"].Status, (0, _extends2["default"])({
24
- size: "5px",
25
- color: color
26
- }, restProps));
27
- };
28
-
29
- var Day = function Day(_ref2) {
30
- var backgroundColor = _ref2.backgroundColor,
31
- cellSize = _ref2.cellSize,
32
- children = _ref2.children,
33
- color = _ref2.color,
34
- date = _ref2.date,
35
- disabled = _ref2.disabled,
36
- fontSize = _ref2.fontSize,
37
- fontWeight = _ref2.fontWeight,
38
- inSameMonth = _ref2.inSameMonth,
39
- isMinDate = _ref2.isMinDate,
40
- isMaxDate = _ref2.isMaxDate,
41
- isSelected = _ref2.isSelected,
42
- isToday = _ref2.isToday,
43
- selectDate = _ref2.selectDate,
44
- _ref2$selectedColor = _ref2.selectedColor,
45
- selectedColor = _ref2$selectedColor === void 0 ? 'primary' : _ref2$selectedColor,
46
- _ref2$statusColor = _ref2.statusColor,
47
- statusColor = _ref2$statusColor === void 0 ? 'transparent' : _ref2$statusColor,
48
- statuses = _ref2.statuses,
49
- _ref2$statusOffset = _ref2.statusOffset,
50
- statusOffset = _ref2$statusOffset === void 0 ? '15%' : _ref2$statusOffset,
51
- restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["backgroundColor", "cellSize", "children", "color", "date", "disabled", "fontSize", "fontWeight", "inSameMonth", "isMinDate", "isMaxDate", "isSelected", "isToday", "selectDate", "selectedColor", "statusColor", "statuses", "statusOffset"]);
20
+ var Day = function Day(_ref) {
21
+ var backgroundColor = _ref.backgroundColor,
22
+ cellSize = _ref.cellSize,
23
+ children = _ref.children,
24
+ color = _ref.color,
25
+ date = _ref.date,
26
+ disabled = _ref.disabled,
27
+ fontSize = _ref.fontSize,
28
+ fontWeight = _ref.fontWeight,
29
+ inSameMonth = _ref.inSameMonth,
30
+ isMinDate = _ref.isMinDate,
31
+ isMaxDate = _ref.isMaxDate,
32
+ isSelected = _ref.isSelected,
33
+ isToday = _ref.isToday,
34
+ selectDate = _ref.selectDate,
35
+ _ref$selectedColor = _ref.selectedColor,
36
+ selectedColor = _ref$selectedColor === void 0 ? 'primary' : _ref$selectedColor,
37
+ _ref$statusColor = _ref.statusColor,
38
+ statusColor = _ref$statusColor === void 0 ? 'transparent' : _ref$statusColor,
39
+ statuses = _ref.statuses,
40
+ _ref$statusOffset = _ref.statusOffset,
41
+ statusOffset = _ref$statusOffset === void 0 ? '15%' : _ref$statusOffset,
42
+ restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["backgroundColor", "cellSize", "children", "color", "date", "disabled", "fontSize", "fontWeight", "inSameMonth", "isMinDate", "isMaxDate", "isSelected", "isToday", "selectDate", "selectedColor", "statusColor", "statuses", "statusOffset"]);
52
43
  var affordance = !disabled && !isMinDate && !isMaxDate && (selectDate || restProps.onClick || restProps.onMouseDown);
53
44
  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
54
45
  width: cellSize,
@@ -70,13 +61,14 @@ var Day = function Day(_ref2) {
70
61
  hover: affordance && {
71
62
  backgroundColor: 'highlight'
72
63
  }
73
- }, restProps), (isSelected || isToday || statusColor) && /*#__PURE__*/_react["default"].createElement(_Icon["default"].Status, {
74
- size: cellSize,
64
+ }, restProps), (isSelected || isToday || statusColor) && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
75
65
  color: isSelected ? selectedColor : isToday ? 'surfaceTertiary' : statusColor,
66
+ left: "50%",
76
67
  position: "absolute",
77
68
  top: "50%",
78
- left: "50%",
79
- transform: "translate(-50%, -50%)"
69
+ transform: "translate(-50%, -50%)",
70
+ name: "tapestry.radio0",
71
+ size: cellSize
80
72
  }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
81
73
  as: "span",
82
74
  fontSize: fontSize,
@@ -92,9 +84,11 @@ var Day = function Day(_ref2) {
92
84
  right: 0,
93
85
  spacing: 0.25
94
86
  }, statuses.map(function (color, index) {
95
- return /*#__PURE__*/_react["default"].createElement(DayStatus, {
87
+ return /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
88
+ color: isSelected ? 'white' : color,
96
89
  key: index,
97
- color: isSelected ? 'white' : color
90
+ name: "tapestry.radio0",
91
+ size: "5px"
98
92
  });
99
93
  }))));
100
94
  };
package/dist/esm/Calendar/Day.js CHANGED
@@ -5,39 +5,29 @@ import Icon from '../Icon';
5
5
  import StackView from '../StackView';
6
6
  import Text from '../Text';
7
7
 
8
- var DayStatus = function DayStatus(_ref) {
9
- var color = _ref.color,
10
- restProps = _objectWithoutPropertiesLoose(_ref, ["color"]);
11
-
12
- return /*#__PURE__*/React.createElement(Icon.Status, _extends({
13
- size: "5px",
14
- color: color
15
- }, restProps));
16
- };
17
-
18
- var Day = function Day(_ref2) {
19
- var backgroundColor = _ref2.backgroundColor,
20
- cellSize = _ref2.cellSize,
21
- children = _ref2.children,
22
- color = _ref2.color,
23
- date = _ref2.date,
24
- disabled = _ref2.disabled,
25
- fontSize = _ref2.fontSize,
26
- fontWeight = _ref2.fontWeight,
27
- inSameMonth = _ref2.inSameMonth,
28
- isMinDate = _ref2.isMinDate,
29
- isMaxDate = _ref2.isMaxDate,
30
- isSelected = _ref2.isSelected,
31
- isToday = _ref2.isToday,
32
- selectDate = _ref2.selectDate,
33
- _ref2$selectedColor = _ref2.selectedColor,
34
- selectedColor = _ref2$selectedColor === void 0 ? 'primary' : _ref2$selectedColor,
35
- _ref2$statusColor = _ref2.statusColor,
36
- statusColor = _ref2$statusColor === void 0 ? 'transparent' : _ref2$statusColor,
37
- statuses = _ref2.statuses,
38
- _ref2$statusOffset = _ref2.statusOffset,
39
- statusOffset = _ref2$statusOffset === void 0 ? '15%' : _ref2$statusOffset,
40
- restProps = _objectWithoutPropertiesLoose(_ref2, ["backgroundColor", "cellSize", "children", "color", "date", "disabled", "fontSize", "fontWeight", "inSameMonth", "isMinDate", "isMaxDate", "isSelected", "isToday", "selectDate", "selectedColor", "statusColor", "statuses", "statusOffset"]);
8
+ var Day = function Day(_ref) {
9
+ var backgroundColor = _ref.backgroundColor,
10
+ cellSize = _ref.cellSize,
11
+ children = _ref.children,
12
+ color = _ref.color,
13
+ date = _ref.date,
14
+ disabled = _ref.disabled,
15
+ fontSize = _ref.fontSize,
16
+ fontWeight = _ref.fontWeight,
17
+ inSameMonth = _ref.inSameMonth,
18
+ isMinDate = _ref.isMinDate,
19
+ isMaxDate = _ref.isMaxDate,
20
+ isSelected = _ref.isSelected,
21
+ isToday = _ref.isToday,
22
+ selectDate = _ref.selectDate,
23
+ _ref$selectedColor = _ref.selectedColor,
24
+ selectedColor = _ref$selectedColor === void 0 ? 'primary' : _ref$selectedColor,
25
+ _ref$statusColor = _ref.statusColor,
26
+ statusColor = _ref$statusColor === void 0 ? 'transparent' : _ref$statusColor,
27
+ statuses = _ref.statuses,
28
+ _ref$statusOffset = _ref.statusOffset,
29
+ statusOffset = _ref$statusOffset === void 0 ? '15%' : _ref$statusOffset,
30
+ restProps = _objectWithoutPropertiesLoose(_ref, ["backgroundColor", "cellSize", "children", "color", "date", "disabled", "fontSize", "fontWeight", "inSameMonth", "isMinDate", "isMaxDate", "isSelected", "isToday", "selectDate", "selectedColor", "statusColor", "statuses", "statusOffset"]);
41
31
 
42
32
  var affordance = !disabled && !isMinDate && !isMaxDate && (selectDate || restProps.onClick || restProps.onMouseDown);
43
33
  return /*#__PURE__*/React.createElement(StackView, {
@@ -60,13 +50,14 @@ var Day = function Day(_ref2) {
60
50
  hover: affordance && {
61
51
  backgroundColor: 'highlight'
62
52
  }
63
- }, restProps), (isSelected || isToday || statusColor) && /*#__PURE__*/React.createElement(Icon.Status, {
64
- size: cellSize,
53
+ }, restProps), (isSelected || isToday || statusColor) && /*#__PURE__*/React.createElement(Icon, {
65
54
  color: isSelected ? selectedColor : isToday ? 'surfaceTertiary' : statusColor,
55
+ left: "50%",
66
56
  position: "absolute",
67
57
  top: "50%",
68
- left: "50%",
69
- transform: "translate(-50%, -50%)"
58
+ transform: "translate(-50%, -50%)",
59
+ name: "tapestry.radio0",
60
+ size: cellSize
70
61
  }), /*#__PURE__*/React.createElement(Text, {
71
62
  as: "span",
72
63
  fontSize: fontSize,
@@ -82,9 +73,11 @@ var Day = function Day(_ref2) {
82
73
  right: 0,
83
74
  spacing: 0.25
84
75
  }, statuses.map(function (color, index) {
85
- return /*#__PURE__*/React.createElement(DayStatus, {
76
+ return /*#__PURE__*/React.createElement(Icon, {
77
+ color: isSelected ? 'white' : color,
86
78
  key: index,
87
- color: isSelected ? 'white' : color
79
+ name: "tapestry.radio0",
80
+ size: "5px"
88
81
  });
89
82
  }))));
90
83
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planningcenter/tapestry-react",
3
- "version": "2.1.0",
3
+ "version": "2.1.1",
4
4
  "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
5
5
  "author": "Front End Systems Engineering <frontend@pco.bz>",
6
6
  "main": "dist/cjs/index.js",
package/src/Calendar/Day.js CHANGED
@@ -4,10 +4,6 @@ import Icon from '../Icon'
4
4
  import StackView from '../StackView'
5
5
  import Text from '../Text'
6
6
 
7
- const DayStatus = ({ color, ...restProps }) => (
8
- <Icon.Status size="5px" color={color} {...restProps} />
9
- )
10
-
11
7
  export type PublicProps = {
12
8
  children?: any,
13
9
  /**
@@ -39,11 +35,11 @@ export type PublicProps = {
39
35
  */
40
36
  statusColor?: string,
41
37
  /**
42
- * Specifies the `bottom` offset of the `DayStatus` icons, defaults to `15%`.
38
+ * Specifies the `bottom` offset of the status dots, defaults to `15%`.
43
39
  */
44
40
  statusOffset: string | number,
45
41
  /**
46
- * Accepts an array of color names (theme token or valid html) which render as small `DayStatus` icons below the date.
42
+ * Accepts an array of color names (theme token or valid html) which render as small colorized dots below the date.
47
43
  */
48
44
  statuses?: array,
49
45
  }
@@ -101,8 +97,7 @@ const Day = ({
101
97
  {...restProps}
102
98
  >
103
99
  {(isSelected || isToday || statusColor) && (
104
- <Icon.Status
105
- size={cellSize}
100
+ <Icon
106
101
  color={
107
102
  isSelected
108
103
  ? selectedColor
@@ -110,10 +105,12 @@ const Day = ({
110
105
  ? 'surfaceTertiary'
111
106
  : statusColor
112
107
  }
108
+ left="50%"
113
109
  position="absolute"
114
110
  top="50%"
115
- left="50%"
116
111
  transform="translate(-50%, -50%)"
112
+ name="tapestry.radio0"
113
+ size={cellSize}
117
114
  />
118
115
  )}
119
116
  <Text
@@ -136,7 +133,12 @@ const Day = ({
136
133
  spacing={0.25}
137
134
  >
138
135
  {statuses.map((color, index) => (
139
- <DayStatus key={index} color={isSelected ? 'white' : color} />
136
+ <Icon
137
+ color={isSelected ? 'white' : color}
138
+ key={index}
139
+ name="tapestry.radio0"
140
+ size="5px"
141
+ />
140
142
  ))}
141
143
  </StackView>
142
144
  )}
@@ -144,5 +146,6 @@ const Day = ({
144
146
  </StackView>
145
147
  )
146
148
  }
149
+
147
150
  Day.displayName = 'Calendar.Day'
148
151
  export default Day
package/src/Icon/Status.js CHANGED
@@ -24,7 +24,7 @@ const STATUS_VARIANTS = {
24
24
 
25
25
  export type Props = {
26
26
  /** The name of the status icon to render. */
27
- variant?: 'confirmed' | 'unconfirmed' | 'declined',
27
+ variant: 'confirmed' | 'unconfirmed' | 'declined',
28
28
  /** Uses the filled version of the icon. */
29
29
  variantFilled?: boolean,
30
30
  /** Pass any valid color from [colors](/colors). Defaults to variant color. */