playbook_ui 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.31.0.pre.alpha.customiconsfa928

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/custom-icons.js +355 -0
  4. data/app/pb_kits/playbook/index.js +2 -1
  5. data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -0
  6. data/app/pb_kits/playbook/pb_badge/_badge.tsx +1 -1
  7. data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
  8. data/app/pb_kits/playbook/pb_badge/badge.test.js +13 -0
  9. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +12 -0
  10. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +25 -0
  11. data/app/pb_kits/playbook/pb_badge/docs/example.yml +2 -1
  12. data/app/pb_kits/playbook/pb_badge/docs/index.js +1 -0
  13. data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx +40 -0
  14. data/app/pb_kits/playbook/pb_button/docs/example.yml +1 -0
  15. data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
  16. data/app/pb_kits/playbook/pb_card/_card.scss +0 -3
  17. data/app/pb_kits/playbook/pb_card/_card.tsx +6 -5
  18. data/app/pb_kits/playbook/pb_card/card.html.erb +3 -1
  19. data/app/pb_kits/playbook/pb_card/card.rb +96 -0
  20. data/app/pb_kits/playbook/pb_card/card_body.rb +1 -93
  21. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +0 -11
  22. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +3 -1
  23. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +3 -1
  24. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +3 -1
  25. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +1 -1
  26. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +0 -12
  27. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx +2 -2
  28. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +4 -1
  29. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +2 -1
  30. data/app/pb_kits/playbook/pb_icon/_icon.tsx +9 -3
  31. data/app/pb_kits/playbook/pb_icon/icon.rb +8 -2
  32. data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +33 -45
  33. data/app/pb_kits/playbook/pb_message/docs/_message_hover.jsx +41 -0
  34. data/app/pb_kits/playbook/pb_message/docs/example.yml +1 -0
  35. data/app/pb_kits/playbook/pb_message/docs/index.js +2 -0
  36. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +4 -1
  37. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +8 -3
  38. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +76 -0
  39. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx +88 -0
  40. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +5 -0
  41. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
  42. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
  43. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +3 -0
  44. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +7 -0
  45. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +12 -7
  46. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +14 -0
  47. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +30 -0
  48. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.md +3 -0
  49. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.html.erb +1 -0
  50. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx +13 -0
  51. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb +1 -1
  52. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +6 -3
  54. data/app/pb_kits/playbook/pb_section_separator/docs/index.js +2 -0
  55. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +4 -2
  56. data/app/pb_kits/playbook/pb_section_separator/section_separator.rb +4 -1
  57. data/app/pb_kits/playbook/pb_title/_title.scss +18 -0
  58. data/app/pb_kits/playbook/pb_title/_title.tsx +20 -2
  59. data/app/pb_kits/playbook/pb_title/docs/_title_responsive.html.erb +1 -0
  60. data/app/pb_kits/playbook/pb_title/docs/_title_responsive.jsx +16 -0
  61. data/app/pb_kits/playbook/pb_title/docs/_title_responsive.md +1 -0
  62. data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
  63. data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
  64. data/app/pb_kits/playbook/pb_title/title.rb +21 -4
  65. data/app/pb_kits/playbook/pb_title/title.test.js +42 -29
  66. data/app/pb_kits/playbook/tokens/_scale.scss +9 -0
  67. data/app/pb_kits/playbook/tokens/exports/_scale.scss +13 -0
  68. data/app/pb_kits/playbook/utilities/_border_radius.scss +31 -0
  69. data/app/pb_kits/playbook/utilities/_colors.scss +3 -0
  70. data/app/pb_kits/playbook/utilities/_hover.scss +47 -0
  71. data/app/pb_kits/playbook/utilities/globalProps.ts +22 -2
  72. data/dist/playbook-rails.js +7 -7
  73. data/lib/playbook/version.rb +2 -2
  74. metadata +22 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 34a695910f67fbd8f8a01279fe53bcfd4115ca6fc419a2a4f598b48464ade926
4
- data.tar.gz: d17f2e8534379076372aa29bcf3daadbb83acc5fc47bb5be5bd3ff31a2541461
3
+ metadata.gz: 7e5f294819c764e724a6794cac4310d57aaf738894c2ffcf4dbcd9d7ada25953
4
+ data.tar.gz: '084cfd995463e4d69d3f4071ca8a5c34fec10276d9181866a1681a6f78b45dcf'
5
5
  SHA512:
6
- metadata.gz: 82adeb777f4240ec21972169b4866a1b857597d02f63c30859b30e3a407abdd62427807e837beef23780136a9002c01513cc6478ca0c023c8fc5c564ea3ac52f
7
- data.tar.gz: fdc73b9b2eed6973de5a14011ce0240cf3c84fcff6e9f8e454ceecf15de721a974958d349803d6657302b682cf8ed64ac4a1f87f97971f818c2607a20ce9b012
6
+ metadata.gz: fdaadc126dabfad4e105334e37a9056fb4df6c0981e91c22dd5fbc6d6cb1ed145d9217f580229b8c08e576e890722636db7199c8ceedac1956179e575d389f70
7
+ data.tar.gz: ca38cac25050fd1f429ec570adab8d2b00835025806e23cbd86cb0cc1e350e586132d49a91131e10f859cfa49fa630c036abba890942f3e717ece2253bc02ab3
@@ -110,5 +110,7 @@
110
110
  @import './utilities/display';
111
111
  @import './utilities/flexbox';
112
112
  @import './utilities/focus';
113
+ @import './utilities/border_radius';
114
+ @import './utilities/hover';
113
115
 
114
116
  @import 'pb_multi_level_select/multi_level_select';
@@ -0,0 +1,355 @@
1
+ /* eslint-disable */
2
+ (function () {
3
+ 'use strict';
4
+
5
+ function ownKeys(object, enumerableOnly) {
6
+ var keys = Object.keys(object);
7
+
8
+ if (Object.getOwnPropertySymbols) {
9
+ var symbols = Object.getOwnPropertySymbols(object);
10
+ enumerableOnly && (symbols = symbols.filter(function (sym) {
11
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
12
+ })), keys.push.apply(keys, symbols);
13
+ }
14
+
15
+ return keys;
16
+ }
17
+
18
+ function _objectSpread2(target) {
19
+ for (var i = 1; i < arguments.length; i++) {
20
+ var source = null != arguments[i] ? arguments[i] : {};
21
+ i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
22
+ _defineProperty(target, key, source[key]);
23
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
24
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
25
+ });
26
+ }
27
+
28
+ return target;
29
+ }
30
+
31
+ function _defineProperty(obj, key, value) {
32
+ if (key in obj) {
33
+ Object.defineProperty(obj, key, {
34
+ value: value,
35
+ enumerable: true,
36
+ configurable: true,
37
+ writable: true
38
+ });
39
+ } else {
40
+ obj[key] = value;
41
+ }
42
+
43
+ return obj;
44
+ }
45
+
46
+ function _toConsumableArray(arr) {
47
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
48
+ }
49
+
50
+ function _arrayWithoutHoles(arr) {
51
+ if (Array.isArray(arr)) return _arrayLikeToArray(arr);
52
+ }
53
+
54
+ function _iterableToArray(iter) {
55
+ if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
56
+ }
57
+
58
+ function _unsupportedIterableToArray(o, minLen) {
59
+ if (!o) return;
60
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
61
+ var n = Object.prototype.toString.call(o).slice(8, -1);
62
+ if (n === "Object" && o.constructor) n = o.constructor.name;
63
+ if (n === "Map" || n === "Set") return Array.from(o);
64
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
65
+ }
66
+
67
+ function _arrayLikeToArray(arr, len) {
68
+ if (len == null || len > arr.length) len = arr.length;
69
+
70
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
71
+
72
+ return arr2;
73
+ }
74
+
75
+ function _nonIterableSpread() {
76
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
77
+ }
78
+
79
+ function _createForOfIteratorHelper(o, allowArrayLike) {
80
+ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
81
+
82
+ if (!it) {
83
+ if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
84
+ if (it) o = it;
85
+ var i = 0;
86
+
87
+ var F = function () {};
88
+
89
+ return {
90
+ s: F,
91
+ n: function () {
92
+ if (i >= o.length) return {
93
+ done: true
94
+ };
95
+ return {
96
+ done: false,
97
+ value: o[i++]
98
+ };
99
+ },
100
+ e: function (e) {
101
+ throw e;
102
+ },
103
+ f: F
104
+ };
105
+ }
106
+
107
+ throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
108
+ }
109
+
110
+ var normalCompletion = true,
111
+ didErr = false,
112
+ err;
113
+ return {
114
+ s: function () {
115
+ it = it.call(o);
116
+ },
117
+ n: function () {
118
+ var step = it.next();
119
+ normalCompletion = step.done;
120
+ return step;
121
+ },
122
+ e: function (e) {
123
+ didErr = true;
124
+ err = e;
125
+ },
126
+ f: function () {
127
+ try {
128
+ if (!normalCompletion && it.return != null) it.return();
129
+ } finally {
130
+ if (didErr) throw err;
131
+ }
132
+ }
133
+ };
134
+ }
135
+
136
+ var _WINDOW = {};
137
+ var _DOCUMENT = {};
138
+
139
+ try {
140
+ if (typeof window !== 'undefined') _WINDOW = window;
141
+ if (typeof document !== 'undefined') _DOCUMENT = document;
142
+ } catch (e) {}
143
+
144
+ var _ref = _WINDOW.navigator || {},
145
+ _ref$userAgent = _ref.userAgent,
146
+ userAgent = _ref$userAgent === void 0 ? '' : _ref$userAgent;
147
+ var WINDOW = _WINDOW;
148
+ var DOCUMENT = _DOCUMENT;
149
+ var IS_BROWSER = !!WINDOW.document;
150
+ var IS_DOM = !!DOCUMENT.documentElement && !!DOCUMENT.head && typeof DOCUMENT.addEventListener === 'function' && typeof DOCUMENT.createElement === 'function';
151
+ var IS_IE = ~userAgent.indexOf('MSIE') || ~userAgent.indexOf('Trident/');
152
+
153
+ var _familyProxy, _familyProxy2, _familyProxy3, _familyProxy4, _familyProxy5;
154
+
155
+ var NAMESPACE_IDENTIFIER = '___FONT_AWESOME___';
156
+ var PRODUCTION = function () {
157
+ try {
158
+ return "production" === 'production';
159
+ } catch (e) {
160
+ return false;
161
+ }
162
+ }();
163
+ var FAMILY_CLASSIC = 'classic';
164
+ var FAMILY_SHARP = 'sharp';
165
+ var FAMILIES = [FAMILY_CLASSIC, FAMILY_SHARP];
166
+
167
+ function familyProxy(obj) {
168
+ // Defaults to the classic family if family is not available
169
+ return new Proxy(obj, {
170
+ get: function get(target, prop) {
171
+ return prop in target ? target[prop] : target[FAMILY_CLASSIC];
172
+ }
173
+ });
174
+ }
175
+ var PREFIX_TO_STYLE = familyProxy((_familyProxy = {}, _defineProperty(_familyProxy, FAMILY_CLASSIC, {
176
+ 'fa': 'solid',
177
+ 'fas': 'solid',
178
+ 'fa-solid': 'solid',
179
+ 'far': 'regular',
180
+ 'fa-regular': 'regular',
181
+ 'fal': 'light',
182
+ 'fa-light': 'light',
183
+ 'fat': 'thin',
184
+ 'fa-thin': 'thin',
185
+ 'fad': 'duotone',
186
+ 'fa-duotone': 'duotone',
187
+ 'fab': 'brands',
188
+ 'fa-brands': 'brands',
189
+ 'fak': 'kit',
190
+ 'fa-kit': 'kit'
191
+ }), _defineProperty(_familyProxy, FAMILY_SHARP, {
192
+ 'fa': 'solid',
193
+ 'fass': 'solid',
194
+ 'fa-solid': 'solid',
195
+ 'fasr': 'regular',
196
+ 'fa-regular': 'regular',
197
+ 'fasl': 'light',
198
+ 'fa-light': 'light'
199
+ }), _familyProxy));
200
+ var STYLE_TO_PREFIX = familyProxy((_familyProxy2 = {}, _defineProperty(_familyProxy2, FAMILY_CLASSIC, {
201
+ 'solid': 'fas',
202
+ 'regular': 'far',
203
+ 'light': 'fal',
204
+ 'thin': 'fat',
205
+ 'duotone': 'fad',
206
+ 'brands': 'fab',
207
+ 'kit': 'fak'
208
+ }), _defineProperty(_familyProxy2, FAMILY_SHARP, {
209
+ 'solid': 'fass',
210
+ 'regular': 'fasr',
211
+ 'light': 'fasl'
212
+ }), _familyProxy2));
213
+ var PREFIX_TO_LONG_STYLE = familyProxy((_familyProxy3 = {}, _defineProperty(_familyProxy3, FAMILY_CLASSIC, {
214
+ 'fab': 'fa-brands',
215
+ 'fad': 'fa-duotone',
216
+ 'fak': 'fa-kit',
217
+ 'fal': 'fa-light',
218
+ 'far': 'fa-regular',
219
+ 'fas': 'fa-solid',
220
+ 'fat': 'fa-thin'
221
+ }), _defineProperty(_familyProxy3, FAMILY_SHARP, {
222
+ 'fass': 'fa-solid',
223
+ 'fasr': 'fa-regular',
224
+ 'fasl': 'fa-light'
225
+ }), _familyProxy3));
226
+ var LONG_STYLE_TO_PREFIX = familyProxy((_familyProxy4 = {}, _defineProperty(_familyProxy4, FAMILY_CLASSIC, {
227
+ 'fa-brands': 'fab',
228
+ 'fa-duotone': 'fad',
229
+ 'fa-kit': 'fak',
230
+ 'fa-light': 'fal',
231
+ 'fa-regular': 'far',
232
+ 'fa-solid': 'fas',
233
+ 'fa-thin': 'fat'
234
+ }), _defineProperty(_familyProxy4, FAMILY_SHARP, {
235
+ 'fa-solid': 'fass',
236
+ 'fa-regular': 'fasr',
237
+ 'fa-light': 'fasl'
238
+ }), _familyProxy4));
239
+ var FONT_WEIGHT_TO_PREFIX = familyProxy((_familyProxy5 = {}, _defineProperty(_familyProxy5, FAMILY_CLASSIC, {
240
+ '900': 'fas',
241
+ '400': 'far',
242
+ 'normal': 'far',
243
+ '300': 'fal',
244
+ '100': 'fat'
245
+ }), _defineProperty(_familyProxy5, FAMILY_SHARP, {
246
+ '900': 'fass',
247
+ '400': 'fasr',
248
+ '300': 'fasl'
249
+ }), _familyProxy5));
250
+ var oneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
251
+ var oneToTwenty = oneToTen.concat([11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
252
+ var DUOTONE_CLASSES = {
253
+ GROUP: 'duotone-group',
254
+ SWAP_OPACITY: 'swap-opacity',
255
+ PRIMARY: 'primary',
256
+ SECONDARY: 'secondary'
257
+ };
258
+ var prefixes = new Set();
259
+ Object.keys(STYLE_TO_PREFIX[FAMILY_CLASSIC]).map(prefixes.add.bind(prefixes));
260
+ Object.keys(STYLE_TO_PREFIX[FAMILY_SHARP]).map(prefixes.add.bind(prefixes));
261
+ var RESERVED_CLASSES = [].concat(FAMILIES, _toConsumableArray(prefixes), ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', 'beat', 'border', 'fade', 'beat-fade', 'bounce', 'flip-both', 'flip-horizontal', 'flip-vertical', 'flip', 'fw', 'inverse', 'layers-counter', 'layers-text', 'layers', 'li', 'pull-left', 'pull-right', 'pulse', 'rotate-180', 'rotate-270', 'rotate-90', 'rotate-by', 'shake', 'spin-pulse', 'spin-reverse', 'spin', 'stack-1x', 'stack-2x', 'stack', 'ul', DUOTONE_CLASSES.GROUP, DUOTONE_CLASSES.SWAP_OPACITY, DUOTONE_CLASSES.PRIMARY, DUOTONE_CLASSES.SECONDARY]).concat(oneToTen.map(function (n) {
262
+ return "".concat(n, "x");
263
+ })).concat(oneToTwenty.map(function (n) {
264
+ return "w-".concat(n);
265
+ }));
266
+
267
+ function bunker(fn) {
268
+ try {
269
+ for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
270
+ args[_key - 1] = arguments[_key];
271
+ }
272
+
273
+ fn.apply(void 0, args);
274
+ } catch (e) {
275
+ if (!PRODUCTION) {
276
+ throw e;
277
+ }
278
+ }
279
+ }
280
+
281
+ var w = WINDOW || {};
282
+ if (!w[NAMESPACE_IDENTIFIER]) w[NAMESPACE_IDENTIFIER] = {};
283
+ if (!w[NAMESPACE_IDENTIFIER].styles) w[NAMESPACE_IDENTIFIER].styles = {};
284
+ if (!w[NAMESPACE_IDENTIFIER].hooks) w[NAMESPACE_IDENTIFIER].hooks = {};
285
+ if (!w[NAMESPACE_IDENTIFIER].shims) w[NAMESPACE_IDENTIFIER].shims = [];
286
+ var namespace = w[NAMESPACE_IDENTIFIER];
287
+
288
+ function normalizeIcons(icons) {
289
+ return Object.keys(icons).reduce(function (acc, iconName) {
290
+ var icon = icons[iconName];
291
+ var expanded = !!icon.icon;
292
+
293
+ if (expanded) {
294
+ acc[icon.iconName] = icon.icon;
295
+ } else {
296
+ acc[iconName] = icon;
297
+ }
298
+
299
+ return acc;
300
+ }, {});
301
+ }
302
+
303
+ function defineIcons(prefix, icons) {
304
+ var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
305
+ var _params$skipHooks = params.skipHooks,
306
+ skipHooks = _params$skipHooks === void 0 ? false : _params$skipHooks;
307
+ var normalized = normalizeIcons(icons);
308
+
309
+ if (typeof namespace.hooks.addPack === 'function' && !skipHooks) {
310
+ namespace.hooks.addPack(prefix, normalizeIcons(icons));
311
+ } else {
312
+ namespace.styles[prefix] = _objectSpread2(_objectSpread2({}, namespace.styles[prefix] || {}), normalized);
313
+ }
314
+ /**
315
+ * Font Awesome 4 used the prefix of `fa` for all icons. With the introduction
316
+ * of new styles we needed to differentiate between them. Prefix `fa` is now an alias
317
+ * for `fas` so we'll ease the upgrade process for our users by automatically defining
318
+ * this as well.
319
+ */
320
+
321
+
322
+ if (prefix === 'fas') {
323
+ defineIcons('fa', icons);
324
+ }
325
+ }
326
+
327
+ var icons = {
328
+
329
+ "greensky": [1707,512,[],"e002","M0 232.703v-.719c0-72.107 58.553-131.159 138.634-131.159 47.6 0 76.313 12.313 103.89 34.778l-36.643 42.394c-20.401-16.306-38.534-25.721-69.133-25.721-42.306 0-75.927 35.859-75.927 78.98v.728c0 46.377 33.239 80.428 80.085 80.428 21.155 0 40.038-5.074 54.772-15.221v-36.226H140.11l7.641-48.186h104.217v110.137c-27.205 22.094-64.602 40.214-112.952 40.214C56.662 363.13 0 307.7 0 232.703zm271.752-65.118l57.42-3v39.137c11.466-33.202 38.623-44.202 72.622-42.751l-8.024 57.605h-3.022c-38.157 0-61.575 22.099-61.575 68.476v71.736h-57.421V167.585zm540.92.916l57.422-3.916v27.538c13.22-16.297 30.222-31.156 59.308-31.156 43.446 0 68.755 27.534 68.755 72.102v125.715h-57.426V250.456c0-26.082-12.833-39.49-34.748-39.49-21.91 0-35.889 13.408-35.889 39.49v108.328h-57.421V168.501zm197.248 155.42l34.194-39.875c23.679 19.026 48.48 31.09 78.544 31.09 23.67 0 37.947-9.143 37.947-24.14v-.729c0-14.265-9.02-21.58-52.988-32.554-52.975-13.166-87.173-27.431-87.173-78.266v-.728c0-46.453 38.329-77.171 92.062-77.171 38.324 0 71.019 11.706 97.697 32.554l-30.054 42.415c-23.307-15.72-46.227-25.23-68.397-25.23-22.166 0-33.822 9.876-33.822 22.31v.732c0 16.824 11.274 22.309 56.746 33.648 53.361 13.533 83.425 32.184 83.425 76.801v.733c0 50.839-39.833 79.364-96.575 79.364-39.838 0-80.039-13.528-111.606-40.955zm557.438-159.336h59.68l-77.818 198.912c-15.488 39.499-33.533 67.48-67.913 67.48-20.778 0-36.261-5.074-50.995-13.404l17.397-40.196c7.232 5.847 17.435 8.817 26.422 7.946 13.677-1.327 16.536-16.025 21.444-25.81l-77.198-189.685-71.783 71.205 79.704 117.752h-65.729l-52.89-79.342-20.024 20.29v59.052h-57.417V106.1l57.417-4.551V235.24l67.247-70.655h122.168l46.082 132.244 44.206-132.244zM596.879 266.4c0 4.35-.377 9.42-.75 14.489H468.676l5.51-34.417h66.785c-3.394-24.64-18.51-41.303-42.687-41.303-23.28 0-38.58 15.627-43.48 39.713h-.032s-4.508 19.776.447 36.007c5.662 25.001 23.8 38.047 49.49 38.047 19.265 0 33.24-5.797 49.105-19.928l32.872 27.896c-18.897 22.47-46.092 36.225-82.735 36.225-60.816 0-105.772-40.937-105.772-100.355v-.72c0-55.434 41.18-101.083 100.105-101.083 67.619 0 98.595 50.352 98.595 105.43zm203.984 0c0 4.35-.382 9.42-.764 14.489H672.656l5.509-34.417h66.786c-3.404-24.64-18.51-41.303-42.688-41.303-23.279 0-38.58 15.627-43.48 39.713h-.032s-4.508 19.776.447 36.007c5.662 25.001 23.8 38.047 49.491 38.047 19.26 0 33.24-5.797 49.105-19.928l32.871 27.896c-18.892 22.47-46.096 36.225-82.735 36.225-60.82 0-105.772-40.937-105.772-100.355v-.72c0-55.434 41.175-101.083 100.105-101.083 67.62 0 98.6 50.352 98.6 105.43zm826.175-136.022h-271.88C1355.158 58.368 1416.025 0 1491.1 0c75.084 0 135.938 58.369 135.938 130.378zm50.059 64.334c3.725 0 5.714-1.911 5.714-4.569v-.174c0-3.073-2.254-4.65-5.896-4.65h-7.194v9.393h7.376zm-14.753-15.857h14.837c4.507 0 7.972 1.25 10.31 3.493 1.82 1.746 2.775 4.158 2.775 6.994v.165c0 5.15-2.938 8.397-7.19 9.893l8.15 11.482h-8.588l-7.106-10.321h-5.811v10.321h-7.377v-32.027zm40.676 16.738v-.171c0-15.262-11.879-27.589-27.67-27.589-15.865 0-27.832 12.498-27.832 27.76v.166c0 15.267 11.879 27.584 27.66 27.584 15.875 0 27.842-12.498 27.842-27.75zm-27.67-31.083a31.16 31.16 0 0131.317 31.203c0 17.25-13.882 31.548-31.489 31.548a31.148 31.148 0 01-31.297-31.208c0-17.244 13.877-31.543 31.47-31.543z"],
330
+ "nitro": [640,512,[],"e001","M480.162 0L383.87 222.074 373.495 0H213.982L113.475 232.183c42.797 22.5 87.538 42.393 133.577 59.024h.324l9.402-21.849.324 25.436c73.273 25.762 150.112 44.35 229.869 57.393h.324L640 .327H480.162V0zM237.65 309.794c-47.66-19.892-91.752-42.067-129.361-65.546L0 493.714h159.514l79.432-183.268c-.648-.326-.972-.652-1.297-.652zm236.353 71.416c-73.597-14.348-148.49-36.523-216.9-63.59l1.297 175.768h166.97l48.633-112.178z"],
331
+ "powergon": [410,512,[],"e000","M204.793 5.541c0-4.114 4.142-6.657 7.574-5.058l.914.541 193.141 140.777c1.593 1.15 2.671 2.89 3.039 4.815l.139 1.471v143.064c0 2.002-.76 3.913-2.083 5.333l-1.32 1.14L204.792 444.4v62.074c0 4.1-4.142 6.643-7.574 5.043l-.914-.54L3.164 370.212c-1.593-1.15-2.662-2.881-3.026-4.81L0 363.928v-143.05c0-2.013.76-3.926 2.075-5.354l1.089-.975L204.793 67.63V5.541zm72.44 166.383c-11.097-14.673-29.663-20.07-55.233-16.076l-3.888.669-67.639 12.717c-.452.086-.89.403-1.186.834-.188.307-.301.64-.326.963l.03.476 2.754 13.062v176.366l-2.755 14.083c-.098.504 0 .993.297 1.324.198.21.452.345.738.385l.448-.011 46.467-8.718c.636-.13 1.192-.663 1.43-1.305l.124-.666V297.74l19.603-3.682c27.584-5.193 47.47-17.896 59.122-37.748 8.65-14.74 10.857-30.526 11.273-40.506l.082-3.902-.094-4.14c-.447-9.793-2.69-24.517-11.247-35.837zm-58.867 32.511c15.832-2.975 20.095 4.529 21.243 10.777l.268 1.918.145 2.541.01 1.35c0 13.08-6.281 21.023-19.172 24.191l-2.494.538-19.872 3.74v-41.315l19.872-3.74z"]
332
+
333
+ };
334
+ var prefixes$1 = [null ,'fak',
335
+ ,'fa-kit'
336
+
337
+ ];
338
+ bunker(function () {
339
+ var _iterator = _createForOfIteratorHelper(prefixes$1),
340
+ _step;
341
+
342
+ try {
343
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
344
+ var prefix = _step.value;
345
+ if (!prefix) continue;
346
+ defineIcons(prefix, icons);
347
+ }
348
+ } catch (err) {
349
+ _iterator.e(err);
350
+ } finally {
351
+ _iterator.f();
352
+ }
353
+ });
354
+
355
+ }());
@@ -2,6 +2,7 @@
2
2
  import './_playbook.scss'
3
3
  import 'lazysizes/plugins/attrchange/ls.attrchange'
4
4
  import 'lazysizes'
5
+ import './custom-icons'
5
6
 
6
7
  // vvv React Component JSX Imports from the React Kits vvv
7
8
  export { default as Avatar } from './pb_avatar/_avatar'
@@ -129,4 +130,4 @@ export { default as PbTypeahead } from './pb_typeahead'
129
130
  export { default as dialogHelper } from './pb_dialog/dialogHelper'
130
131
 
131
132
  //Theming
132
- export {default as mapTheme} from './pb_map/pbMapTheme'
133
+ export {default as mapTheme} from './pb_map/pbMapTheme'
@@ -37,6 +37,11 @@
37
37
  border-radius: $pb_badge_height / 2;
38
38
  }
39
39
 
40
+ &[class*=_notification] {
41
+ background: $primary;
42
+ color: $white;
43
+ }
44
+
40
45
  &.dark {
41
46
  border-width: 0;
42
47
 
@@ -24,7 +24,7 @@ type BadgeProps = {
24
24
  removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
25
25
  rounded?: boolean,
26
26
  text?: string,
27
- variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
27
+ variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
28
28
  } & GlobalProps
29
29
  const Badge = (props: BadgeProps) => {
30
30
  const {
@@ -6,7 +6,7 @@ module Playbook
6
6
  prop :rounded, type: Playbook::Props::Boolean, default: false
7
7
  prop :text
8
8
  prop :variant, type: Playbook::Props::Enum,
9
- values: %w[success warning error info neutral primary],
9
+ values: %w[success warning error info neutral notification primary],
10
10
  default: "neutral"
11
11
 
12
12
  def classname
@@ -93,3 +93,16 @@ test('displays success variant', () => {
93
93
  cleanup()
94
94
 
95
95
  })
96
+
97
+ test('displays notification variant', () => {
98
+ render(
99
+ <Badge
100
+ data={{ testid: testId }}
101
+ text="1"
102
+ variant="notification"
103
+ />
104
+ )
105
+ const kit = screen.getByTestId(testId)
106
+ expect(kit).toHaveClass(`pb_badge_kit_notification`)
107
+ cleanup()
108
+ })
@@ -0,0 +1,12 @@
1
+ <div>
2
+ <%= pb_rails("badge", props: {
3
+ text: "1",
4
+ variant: "notification",
5
+ rounded: true
6
+ }) %>
7
+
8
+ <%= pb_rails("badge", props: {
9
+ text: "4",
10
+ variant: "notification"
11
+ }) %>
12
+ </div>
@@ -0,0 +1,25 @@
1
+ import React from 'react'
2
+ import Badge from '../_badge'
3
+
4
+ const BadgeNotification = (props) => {
5
+ return (
6
+ <>
7
+ <Badge
8
+ rounded
9
+ text="1"
10
+ variant="notification"
11
+ {...props}
12
+ />
13
+
14
+ &nbsp;
15
+
16
+ <Badge
17
+ text="4"
18
+ variant="notification"
19
+ {...props}
20
+ />
21
+ </>
22
+ )
23
+ }
24
+
25
+ export default BadgeNotification
@@ -3,9 +3,10 @@ examples:
3
3
  - badge_default: Rectangle
4
4
  - badge_rounded: Rounded
5
5
  - badge_colors: Colors
6
-
6
+ - badge_notification: Notification
7
7
 
8
8
  react:
9
9
  - badge_default: Rectangle
10
10
  - badge_rounded: Rounded
11
11
  - badge_colors: Colors
12
+ - badge_notification: Notification
@@ -1,3 +1,4 @@
1
1
  export { default as BadgeDefault } from './_badge_default'
2
2
  export { default as BadgeRounded } from './_badge_rounded'
3
3
  export { default as BadgeColors } from './_badge_colors'
4
+ export { default as BadgeNotification } from './_badge_notification'
@@ -0,0 +1,40 @@
1
+ import React from "react"
2
+ import { Button } from "../../"
3
+
4
+ const ButtonHover = (props) => (
5
+ <div>
6
+ <div>
7
+ <Button
8
+ hover={{ shadow: "deep" }}
9
+ marginRight='lg'
10
+ marginTop='xl'
11
+ onClick={() => alert("button clicked!")}
12
+ tabIndex={0}
13
+ text='Shadow Deep'
14
+ {...props}
15
+ />{" "}
16
+ <Button
17
+ hover={{ shadow: "deeper" }}
18
+ marginRight='lg'
19
+ marginTop='xl'
20
+ onClick={() => alert("button clicked!")}
21
+ tabIndex={0}
22
+ text='Shadow Deeper'
23
+ variant='secondary'
24
+ {...props}
25
+ />{" "}
26
+ <Button
27
+ hover={{ shadow: "deepest" }}
28
+ marginRight='lg'
29
+ marginTop='xl'
30
+ onClick={() => alert("button clicked!")}
31
+ tabIndex={0}
32
+ text='Shadow Deepest'
33
+ variant='link'
34
+ {...props}
35
+ />
36
+ </div>
37
+ </div>
38
+ )
39
+
40
+ export default ButtonHover
@@ -21,3 +21,4 @@ examples:
21
21
  - button_options: Button Additional Options (onClick)
22
22
  - button_size: Button Size
23
23
  - button_form: Button Form Attribute
24
+ - button_hover: Button Hover
@@ -8,3 +8,4 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
8
8
  export { default as ButtonOptions } from './_button_options.jsx'
9
9
  export { default as ButtonSize } from './_button_size.jsx'
10
10
  export { default as ButtonForm } from './_button_form.jsx'
11
+ export { default as ButtonHover } from './_button_hover.jsx'
@@ -3,7 +3,6 @@
3
3
 
4
4
  [class^=pb_card_kit] {
5
5
  @include pb_card;
6
- padding: $space_md;
7
6
 
8
7
  &[class*=_selected] {
9
8
  @include pb_card_selected;
@@ -26,7 +25,6 @@
26
25
  flex-shrink: 0;
27
26
  flex-basis: auto;
28
27
  min-height: 1px;
29
- padding: $space_sm;
30
28
  border: 0;
31
29
  border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
32
30
  @each $color_name, $color_value in $pb_card_header_colors {
@@ -59,7 +57,6 @@
59
57
  flex-basis: auto;
60
58
  min-height: 1px;
61
59
  border: 0;
62
- padding: $space_md;
63
60
  }
64
61
 
65
62
  &[class*=_highlight] {
@@ -42,10 +42,10 @@ type CardBodyProps = {
42
42
 
43
43
  // Header component
44
44
  const Header = (props: CardHeaderProps) => {
45
- const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
45
+ const { children, className, headerColor = 'category_1', headerColorStriped = false, padding = 'sm' } = props
46
46
  const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`, headerColorStriped ? 'striped' : '')
47
47
 
48
- const headerSpacing = globalProps(props)
48
+ const headerSpacing = globalProps(props, { padding })
49
49
 
50
50
  return (
51
51
  <div className={classnames(headerCSS, headerSpacing, className)}>
@@ -57,9 +57,9 @@ const Header = (props: CardHeaderProps) => {
57
57
 
58
58
  // Body component
59
59
  const Body = (props: CardBodyProps) => {
60
- const { children, className } = props
60
+ const { children, padding = 'md', className } = props
61
61
  const bodyCSS = buildCss('pb_card_body_kit')
62
- const bodySpacing = globalProps(props)
62
+ const bodySpacing = globalProps(props, { padding })
63
63
 
64
64
  return (
65
65
  <div className={classnames(bodyCSS, bodySpacing, className)}>
@@ -80,6 +80,7 @@ const Card = (props: CardPropTypes) => {
80
80
  highlight = {},
81
81
  selected = false,
82
82
  tag = 'div',
83
+ padding = 'md',
83
84
  } = props
84
85
  const borderCSS = borderNone == true ? 'border_none' : ''
85
86
  const selectedCSS = selected == true ? 'selected' : 'deselected'
@@ -113,7 +114,7 @@ const Card = (props: CardPropTypes) => {
113
114
  <Tag
114
115
  {...ariaProps}
115
116
  {...dataProps}
116
- className={classnames(cardCss, globalProps(props), className)}
117
+ className={classnames(cardCss, globalProps(props, { padding }), className)}
117
118
  >
118
119
  {subComponentTags('Header')}
119
120
  {nonHeaderChildren}
@@ -4,7 +4,9 @@
4
4
  class: object.classname,
5
5
  aria: object.aria,
6
6
  dark: object.dark) do %>
7
- <%= content.presence %>
7
+ <%= pb_rails("card/card_body", props: { padding: object.body_padding, flex_direction: object.body_flex_direction, flex_wrap: object.body_flex_wrap, justify_content: object.body_justify_content, justify_self: object.body_justify_self, align_items: object.body_align_items, align_content: object.body_align_content, align_self: object.body_align_self, flex: object.body_flex, flex_grow: object.body_flex_grow, flex_shrink: object.body_flex_shrink, order: object.body_order }) do %>
8
+ <%= content %>
9
+ <% end if content.present? %>
8
10
  <% end %>
9
11
 
10
12