@bloom-housing/ui-components 9.0.2 → 9.0.4

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 (19) hide show
  1. package/dist/src/actions/Button.d.ts +3 -0
  2. package/dist/src/actions/Button.js +2 -2
  3. package/dist/src/actions/Button.js.map +1 -1
  4. package/dist/src/actions/ExpandableContent.d.ts +7 -2
  5. package/dist/src/actions/ExpandableContent.js +10 -4
  6. package/dist/src/actions/ExpandableContent.js.map +1 -1
  7. package/dist/src/actions/ExpandableContent.stories.d.ts +1 -0
  8. package/dist/src/actions/ExpandableContent.stories.js +2 -1
  9. package/dist/src/actions/ExpandableContent.stories.js.map +1 -1
  10. package/dist/src/icons/Icon.d.ts +3 -1
  11. package/dist/src/icons/Icon.js +3 -3
  12. package/dist/src/icons/Icon.js.map +1 -1
  13. package/package.json +1 -1
  14. package/src/actions/Button.scss +8 -4
  15. package/src/actions/Button.tsx +17 -2
  16. package/src/actions/ExpandableContent.stories.tsx +7 -1
  17. package/src/actions/ExpandableContent.tsx +15 -3
  18. package/src/icons/Icon.scss +5 -0
  19. package/src/icons/Icon.tsx +17 -2
package/dist/src/actions/Button.d.ts CHANGED
@@ -12,6 +12,8 @@ export interface ButtonProps extends AppearanceProps {
12
12
  disabled?: boolean;
13
13
  fullWidth?: boolean;
14
14
  icon?: UniversalIconType;
15
+ iconClass?: string;
16
+ iconColor?: string;
15
17
  iconPlacement?: "left" | "right";
16
18
  iconSize?: IconSize;
17
19
  id?: string;
@@ -19,6 +21,7 @@ export interface ButtonProps extends AppearanceProps {
19
21
  inlineIcon?: "left" | "right";
20
22
  loading?: boolean;
21
23
  onClick?: (e: React.MouseEvent) => void;
24
+ passToIconClass?: string;
22
25
  transition?: boolean;
23
26
  type?: "button" | "submit" | "reset";
24
27
  unstyled?: boolean;
package/dist/src/actions/Button.js CHANGED
@@ -27,10 +27,10 @@ export var buttonInner = function (props) {
27
27
  var iconSize = props.inline || props.inlineIcon ? "tiny" : "small";
28
28
  if (props.icon) {
29
29
  return props.inlineIcon == "left" || props.iconPlacement == "left" ? (React.createElement(React.Fragment, null,
30
- React.createElement(Icon, { className: "button__icon", size: (_a = props.iconSize) !== null && _a !== void 0 ? _a : iconSize, symbol: props.icon }),
30
+ React.createElement(Icon, { className: "button__icon ".concat(props.iconClass || ""), size: (_a = props.iconSize) !== null && _a !== void 0 ? _a : iconSize, symbol: props.icon, iconClass: props.passToIconClass, fill: props.iconColor }),
31
31
  React.createElement("span", { className: "button__content" }, props.children))) : (React.createElement(React.Fragment, null,
32
32
  React.createElement("span", { className: "button__content" }, props.children),
33
- React.createElement(Icon, { className: "button__icon", size: (_b = props.iconSize) !== null && _b !== void 0 ? _b : iconSize, symbol: props.icon })));
33
+ React.createElement(Icon, { className: "button__icon ".concat(props.iconClass || ""), size: (_b = props.iconSize) !== null && _b !== void 0 ? _b : iconSize, symbol: props.icon, iconClass: props.passToIconClass, fill: props.iconColor })));
34
34
  }
35
35
  else if (props.loading) {
36
36
  return (React.createElement(React.Fragment, null,
package/dist/src/actions/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/actions/Button.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/actions/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,eAAe,CAAA;AACtB,OAAO,EAAmB,4BAA4B,EAAE,MAAM,2BAA2B,CAAA;AACzF,OAAO,EAAE,IAAI,EAA+B,MAAM,eAAe,CAAA;AA4BjE,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,KAAmC;IACvE,IAAM,UAAU,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAA;IACzE,IAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,UAAU,CAAA;IAC/C,IAAM,aAAa,GAAG,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,UAAU,IAAI,OAAO,CAAA;IAExE,IAAI,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,IAAI;QAAE,UAAU,CAAC,IAAI,CAAC,mBAAY,aAAa,CAAE,CAAC,CAAA;IAChF,IAAI,MAAM;QAAE,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IACxC,IAAI,KAAK,CAAC,QAAQ;QAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAClD,IAAI,KAAK,CAAC,SAAS;QAAE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;IACpD,IAAI,KAAK,CAAC,SAAS;QAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACrD,IAAI,KAAK,CAAC,OAAO;QAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAChD,IAAI,KAAK,CAAC,UAAU;QAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACnD,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAmC;;IAC7D,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;IAEpE,IAAI,KAAK,CAAC,IAAI,EAAE;QACd,OAAO,KAAK,CAAC,UAAU,IAAI,MAAM,IAAI,KAAK,CAAC,aAAa,IAAI,MAAM,CAAC,CAAC,CAAC,CACnE;YACE,oBAAC,IAAI,IACH,SAAS,EAAE,uBAAgB,KAAK,CAAC,SAAS,IAAI,EAAE,CAAE,EAClD,IAAI,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,QAAQ,EAChC,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,SAAS,EAAE,KAAK,CAAC,eAAe,EAChC,IAAI,EAAE,KAAK,CAAC,SAAS,GACrB;YACF,8BAAM,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAC,QAAQ,CAAQ,CACxD,CACJ,CAAC,CAAC,CAAC,CACF;YACE,8BAAM,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAC,QAAQ,CAAQ;YACzD,oBAAC,IAAI,IACH,SAAS,EAAE,uBAAgB,KAAK,CAAC,SAAS,IAAI,EAAE,CAAE,EAClD,IAAI,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,QAAQ,EAChC,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,SAAS,EAAE,KAAK,CAAC,eAAe,EAChC,IAAI,EAAE,KAAK,CAAC,SAAS,GACrB,CACD,CACJ,CAAA;KACF;SAAM,IAAI,KAAK,CAAC,OAAO,EAAE;QACxB,OAAO,CACL;YACE,oBAAC,IAAI,IAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,SAAS,GAAG;YACjE,8BAAM,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAC,QAAQ,CAAQ,CACxD,CACJ,CAAA;KACF;SAAM;QACL,OAAO,0CAAG,KAAK,CAAC,QAAQ,CAAI,CAAA;KAC7B;AACH,CAAC,CAAA;AAED,IAAM,MAAM,GAAG,UAAC,KAAkB;IAChC,IAAM,aAAa,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAA;IAElD,OAAO,CACL,gCACE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAClC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,iBAC5B,KAAK,CAAC,UAAU,EAC7B,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBACvB,KAAK,CAAC,SAAS,kBACb,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,IAEtD,WAAW,CAAC,KAAK,CAAC,CACZ,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,EAAE,CAAA"}
package/dist/src/actions/ExpandableContent.d.ts CHANGED
@@ -1,11 +1,16 @@
1
1
  import React from "react";
2
+ export declare enum Order {
3
+ above = "above",
4
+ below = "below"
5
+ }
2
6
  type ExpandableContentProps = {
3
- children: React.ReactChild;
7
+ children: React.ReactNode;
4
8
  strings: {
5
9
  readMore?: string;
6
10
  readLess?: string;
7
11
  };
8
12
  className?: string;
13
+ order?: Order;
9
14
  };
10
- declare const ExpandableContent: ({ children, strings, className }: ExpandableContentProps) => JSX.Element;
15
+ declare const ExpandableContent: ({ children, strings, className, order, }: ExpandableContentProps) => JSX.Element;
11
16
  export { ExpandableContent as default, ExpandableContent };
package/dist/src/actions/ExpandableContent.js CHANGED
@@ -1,13 +1,19 @@
1
1
  import React, { useState } from "react";
2
+ export var Order;
3
+ (function (Order) {
4
+ Order["above"] = "above";
5
+ Order["below"] = "below";
6
+ })(Order || (Order = {}));
2
7
  var ExpandableContent = function (_a) {
3
- var children = _a.children, strings = _a.strings, className = _a.className;
4
- var _b = useState(false), isExpanded = _b[0], setExpanded = _b[1];
8
+ var children = _a.children, strings = _a.strings, className = _a.className, _b = _a.order, order = _b === void 0 ? Order.above : _b;
9
+ var _c = useState(false), isExpanded = _c[0], setExpanded = _c[1];
5
10
  var rootClassNames = className ? "".concat(className) : undefined;
6
11
  return (React.createElement("div", { className: rootClassNames },
7
- isExpanded && React.createElement("div", null, children),
12
+ order === Order.above && React.createElement(React.Fragment, null, isExpanded && React.createElement("div", null, children)),
8
13
  React.createElement("button", { type: "button", className: "button is-unstyled m-0 no-underline has-toggle", "aria-expanded": isExpanded, onClick: function () {
9
14
  setExpanded(!isExpanded);
10
- } }, isExpanded ? strings.readLess : strings.readMore)));
15
+ } }, isExpanded ? strings.readLess : strings.readMore),
16
+ order === Order.below && React.createElement(React.Fragment, null, isExpanded && React.createElement("div", null, children))));
11
17
  };
12
18
  export { ExpandableContent as default, ExpandableContent };
13
19
  //# sourceMappingURL=ExpandableContent.js.map
package/dist/src/actions/ExpandableContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ExpandableContent.js","sourceRoot":"","sources":["../../../src/actions/ExpandableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAWvC,IAAM,iBAAiB,GAAG,UAAC,EAAwD;QAAtD,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,SAAS,eAAA;IACjD,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,UAAU,QAAA,EAAE,WAAW,QAAmB,CAAA;IACjD,IAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,UAAG,SAAS,CAAE,CAAC,CAAC,CAAC,SAAS,CAAA;IAE7D,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc;QAC3B,UAAU,IAAI,iCAAM,QAAQ,CAAO;QACpC,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gDAAgD,mBAC3C,UAAU,EACzB,OAAO,EAAE;gBACP,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;YAC1B,CAAC,IAEA,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAC1C,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,iBAAiB,IAAI,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
1
+ {"version":3,"file":"ExpandableContent.js","sourceRoot":"","sources":["../../../src/actions/ExpandableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,wBAAe,CAAA;AACjB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAYD,IAAM,iBAAiB,GAAG,UAAC,EAKF;QAJvB,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,aAAmB,EAAnB,KAAK,mBAAG,KAAK,CAAC,KAAK,KAAA;IAEb,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,UAAU,QAAA,EAAE,WAAW,QAAmB,CAAA;IACjD,IAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,UAAG,SAAS,CAAE,CAAC,CAAC,CAAC,SAAS,CAAA;IAE7D,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc;QAC3B,KAAK,KAAK,KAAK,CAAC,KAAK,IAAI,0CAAG,UAAU,IAAI,iCAAM,QAAQ,CAAO,CAAI;QACpE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gDAAgD,mBAC3C,UAAU,EACzB,OAAO,EAAE;gBACP,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;YAC1B,CAAC,IAEA,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAC1C;QACR,KAAK,KAAK,KAAK,CAAC,KAAK,IAAI,0CAAG,UAAU,IAAI,iCAAM,QAAQ,CAAO,CAAI,CAChE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,iBAAiB,IAAI,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
package/dist/src/actions/ExpandableContent.stories.d.ts CHANGED
@@ -3,3 +3,4 @@ declare const _default: {
3
3
  };
4
4
  export default _default;
5
5
  export declare const standard: () => JSX.Element;
6
+ export declare const below: () => JSX.Element;
package/dist/src/actions/ExpandableContent.stories.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from "react";
2
- import { ExpandableContent } from "./ExpandableContent";
2
+ import { ExpandableContent, Order } from "./ExpandableContent";
3
3
  export default {
4
4
  title: "Actions/Expandable Content",
5
5
  };
6
6
  var content = React.createElement("div", { className: "mb-2" }, "Sample Content");
7
7
  export var standard = function () { return (React.createElement(ExpandableContent, { strings: { readMore: "read more", readLess: "read less" } }, content)); };
8
+ export var below = function () { return (React.createElement(ExpandableContent, { strings: { readMore: "read more", readLess: "read less" }, order: Order.below }, content)); };
8
9
  //# sourceMappingURL=ExpandableContent.stories.js.map
package/dist/src/actions/ExpandableContent.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ExpandableContent.stories.js","sourceRoot":"","sources":["../../../src/actions/ExpandableContent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,4BAA4B;CACpC,CAAA;AAED,IAAM,OAAO,GAAG,6BAAK,SAAS,EAAE,MAAM,qBAAsB,CAAA;AAE5D,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,oBAAC,iBAAiB,IAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,IACzE,OAAO,CACU,CACrB,EAJ6B,CAI7B,CAAA"}
1
+ {"version":3,"file":"ExpandableContent.stories.js","sourceRoot":"","sources":["../../../src/actions/ExpandableContent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAE9D,eAAe;IACb,KAAK,EAAE,4BAA4B;CACpC,CAAA;AAED,IAAM,OAAO,GAAG,6BAAK,SAAS,EAAE,MAAM,qBAAsB,CAAA;AAE5D,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,oBAAC,iBAAiB,IAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,IACzE,OAAO,CACU,CACrB,EAJ6B,CAI7B,CAAA;AAED,MAAM,CAAC,IAAM,KAAK,GAAG,cAAM,OAAA,CACzB,oBAAC,iBAAiB,IAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAC7F,OAAO,CACU,CACrB,EAJ0B,CAI1B,CAAA"}
package/dist/src/icons/Icon.d.ts CHANGED
@@ -72,14 +72,16 @@ export declare const IconFillColors: {
72
72
  primary: string;
73
73
  alert: string;
74
74
  };
75
- export type IconSize = "tiny" | "small" | "base" | "medium" | "large" | "xlarge" | "2xl" | "3xl";
75
+ export type IconSize = "tiny" | "small" | "base" | "medium" | "md-large" | "large" | "xlarge" | "2xl" | "3xl";
76
76
  export interface IconProps {
77
77
  size: IconSize;
78
78
  symbol: UniversalIconType;
79
79
  className?: string;
80
80
  fill?: string;
81
81
  ariaHidden?: boolean;
82
+ iconClass?: string;
82
83
  dataTestId?: string;
84
+ tabIndex?: number;
83
85
  }
84
86
  declare const Icon: (props: IconProps) => JSX.Element;
85
87
  export { Icon as default, Icon };
package/dist/src/icons/Icon.js CHANGED
@@ -72,7 +72,7 @@ export var IconFillColors = {
72
72
  alert: "#b91c1c",
73
73
  };
74
74
  var Icon = function (props) {
75
- var _a, _b;
75
+ var _a, _b, _c;
76
76
  var wrapperClasses = ["ui-icon"];
77
77
  wrapperClasses.push("ui-".concat(props.size));
78
78
  if (props.className)
@@ -80,8 +80,8 @@ var Icon = function (props) {
80
80
  if (props.symbol == "spinner")
81
81
  wrapperClasses.push("spinner-animation");
82
82
  var SpecificIcon = typeof props.symbol === "string" ? (IconMap[props.symbol]) : (React.createElement(FontAwesomeIcon, { icon: props.symbol }));
83
- return typeof props.symbol === "string" ? (React.createElement("span", { className: wrapperClasses.join(" "), "aria-hidden": props.ariaHidden, "data-test-id": (_a = props.dataTestId) !== null && _a !== void 0 ? _a : null },
84
- React.createElement(SpecificIcon, { fill: props.fill ? props.fill : undefined }))) : (React.createElement("span", { className: wrapperClasses.join(" "), "aria-hidden": props.ariaHidden, "data-test-id": (_b = props.dataTestId) !== null && _b !== void 0 ? _b : null, style: { color: props.fill } }, SpecificIcon));
83
+ return typeof props.symbol === "string" ? (React.createElement("span", { className: wrapperClasses.join(" "), "aria-hidden": props.ariaHidden, "data-test-id": (_a = props.dataTestId) !== null && _a !== void 0 ? _a : null, tabIndex: props.tabIndex },
84
+ React.createElement(SpecificIcon, { fill: props.fill ? props.fill : undefined, className: (_b = props.iconClass) !== null && _b !== void 0 ? _b : undefined }))) : (React.createElement("span", { className: wrapperClasses.join(" "), "aria-hidden": props.ariaHidden, "data-test-id": (_c = props.dataTestId) !== null && _c !== void 0 ? _c : null, style: { color: props.fill } }, SpecificIcon));
85
85
  };
86
86
  export { Icon as default, Icon };
87
87
  //# sourceMappingURL=Icon.js.map
package/dist/src/icons/Icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/icons/Icon.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/icons/Icon.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bloom-housing/ui-components",
3
- "version": "9.0.2",
3
+ "version": "9.0.4",
4
4
  "author": "Sean Albert <sean.albert@exygy.com>",
5
5
  "description": "Shared user interface components for Bloom affordable housing system",
6
6
  "homepage": "https://github.com/bloom-housing/ui-components",
package/src/actions/Button.scss CHANGED
@@ -15,6 +15,10 @@
15
15
  --big-rounded: var(--bloom-rounded);
16
16
  --big-padding: var(--bloom-s6);
17
17
  --big-font-size: var(--bloom-font-size-xs);
18
+ --secondary-text-color: var(--bloom-text-color-light);
19
+ --unstyled-inline-font-size: var(--bloom-font-size-sm);
20
+ --inline-font-size: var(--bloom-font-size-sm);
21
+ --caps-font-size: var(--bloom-font-size-sm);
18
22
 
19
23
  /* Base Styles */
20
24
  position: relative;
@@ -54,7 +58,7 @@
54
58
 
55
59
  &.is-secondary {
56
60
  border-color: var(--bloom-color-gray-700);
57
- color: var(--bloom-text-color-light);
61
+ color: var(--secondary-text-color);
58
62
 
59
63
  &:hover {
60
64
  background-color: var(--bloom-color-gray-700);
@@ -93,7 +97,7 @@
93
97
  font-weight: 400;
94
98
  text-decoration: underline;
95
99
  margin: var(--bloom-s4);
96
- font-size: var(--bloom-font-size-sm);
100
+ font-size: var(--unstyled-inline-font-size);
97
101
 
98
102
  &:hover {
99
103
  color: var(--bloom-color-primary);
@@ -104,7 +108,7 @@
104
108
  &.is-inline {
105
109
  color: var(--bloom-color-primary);
106
110
  font-weight: 600;
107
- font-size: var(--bloom-font-size-sm);
111
+ font-size: var(--inline-font-size);
108
112
  margin: 0;
109
113
  text-decoration: none;
110
114
 
@@ -140,7 +144,7 @@
140
144
  text-decoration: underline;
141
145
  margin: var(--bloom-s4);
142
146
  text-transform: uppercase;
143
- font-size: var(--bloom-font-size-sm);
147
+ font-size: var(--caps-font-size);
144
148
  display: block;
145
149
 
146
150
  &:hover {
package/src/actions/Button.tsx CHANGED
@@ -13,6 +13,8 @@ export interface ButtonProps extends AppearanceProps {
13
13
  disabled?: boolean
14
14
  fullWidth?: boolean
15
15
  icon?: UniversalIconType
16
+ iconClass?: string
17
+ iconColor?: string
16
18
  iconPlacement?: "left" | "right"
17
19
  iconSize?: IconSize
18
20
  id?: string
@@ -21,6 +23,7 @@ export interface ButtonProps extends AppearanceProps {
21
23
  inlineIcon?: "left" | "right"
22
24
  loading?: boolean
23
25
  onClick?: (e: React.MouseEvent) => void
26
+ passToIconClass?: string
24
27
  transition?: boolean
25
28
  type?: "button" | "submit" | "reset"
26
29
  unstyled?: boolean
@@ -47,13 +50,25 @@ export const buttonInner = (props: Omit<ButtonProps, "onClick">) => {
47
50
  if (props.icon) {
48
51
  return props.inlineIcon == "left" || props.iconPlacement == "left" ? (
49
52
  <>
50
- <Icon className="button__icon" size={props.iconSize ?? iconSize} symbol={props.icon} />
53
+ <Icon
54
+ className={`button__icon ${props.iconClass || ""}`}
55
+ size={props.iconSize ?? iconSize}
56
+ symbol={props.icon}
57
+ iconClass={props.passToIconClass}
58
+ fill={props.iconColor}
59
+ />
51
60
  <span className="button__content">{props.children}</span>
52
61
  </>
53
62
  ) : (
54
63
  <>
55
64
  <span className="button__content">{props.children}</span>
56
- <Icon className="button__icon" size={props.iconSize ?? iconSize} symbol={props.icon} />
65
+ <Icon
66
+ className={`button__icon ${props.iconClass || ""}`}
67
+ size={props.iconSize ?? iconSize}
68
+ symbol={props.icon}
69
+ iconClass={props.passToIconClass}
70
+ fill={props.iconColor}
71
+ />
57
72
  </>
58
73
  )
59
74
  } else if (props.loading) {
package/src/actions/ExpandableContent.stories.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from "react"
2
2
 
3
- import { ExpandableContent } from "./ExpandableContent"
3
+ import { ExpandableContent, Order } from "./ExpandableContent"
4
4
 
5
5
  export default {
6
6
  title: "Actions/Expandable Content",
@@ -13,3 +13,9 @@ export const standard = () => (
13
13
  {content}
14
14
  </ExpandableContent>
15
15
  )
16
+
17
+ export const below = () => (
18
+ <ExpandableContent strings={{ readMore: "read more", readLess: "read less" }} order={Order.below}>
19
+ {content}
20
+ </ExpandableContent>
21
+ )
package/src/actions/ExpandableContent.tsx CHANGED
@@ -1,21 +1,32 @@
1
1
  import React, { useState } from "react"
2
2
 
3
+ export enum Order {
4
+ above = "above",
5
+ below = "below",
6
+ }
7
+
3
8
  type ExpandableContentProps = {
4
- children: React.ReactChild
9
+ children: React.ReactNode
5
10
  strings: {
6
11
  readMore?: string
7
12
  readLess?: string
8
13
  }
9
14
  className?: string
15
+ order?: Order
10
16
  }
11
17
 
12
- const ExpandableContent = ({ children, strings, className }: ExpandableContentProps) => {
18
+ const ExpandableContent = ({
19
+ children,
20
+ strings,
21
+ className,
22
+ order = Order.above,
23
+ }: ExpandableContentProps) => {
13
24
  const [isExpanded, setExpanded] = useState(false)
14
25
  const rootClassNames = className ? `${className}` : undefined
15
26
 
16
27
  return (
17
28
  <div className={rootClassNames}>
18
- {isExpanded && <div>{children}</div>}
29
+ {order === Order.above && <>{isExpanded && <div>{children}</div>}</>}
19
30
  <button
20
31
  type="button"
21
32
  className="button is-unstyled m-0 no-underline has-toggle"
@@ -26,6 +37,7 @@ const ExpandableContent = ({ children, strings, className }: ExpandableContentPr
26
37
  >
27
38
  {isExpanded ? strings.readLess : strings.readMore}
28
39
  </button>
40
+ {order === Order.below && <>{isExpanded && <div>{children}</div>}</>}
29
41
  </div>
30
42
  )
31
43
  }
package/src/icons/Icon.scss CHANGED
@@ -42,6 +42,11 @@
42
42
  @apply h-4;
43
43
  }
44
44
 
45
+ .ui-md-large svg {
46
+ @apply w-6;
47
+ @apply h-6;
48
+ }
49
+
45
50
  .ui-large svg {
46
51
  @apply w-8;
47
52
  @apply h-8;
package/src/icons/Icon.tsx CHANGED
@@ -143,7 +143,16 @@ export const IconFillColors = {
143
143
  alert: "#b91c1c",
144
144
  }
145
145
 
146
- export type IconSize = "tiny" | "small" | "base" | "medium" | "large" | "xlarge" | "2xl" | "3xl"
146
+ export type IconSize =
147
+ | "tiny"
148
+ | "small"
149
+ | "base"
150
+ | "medium"
151
+ | "md-large"
152
+ | "large"
153
+ | "xlarge"
154
+ | "2xl"
155
+ | "3xl"
147
156
 
148
157
  export interface IconProps {
149
158
  size: IconSize
@@ -151,7 +160,9 @@ export interface IconProps {
151
160
  className?: string
152
161
  fill?: string
153
162
  ariaHidden?: boolean
163
+ iconClass?: string
154
164
  dataTestId?: string
165
+ tabIndex?: number
155
166
  }
156
167
 
157
168
  const Icon = (props: IconProps) => {
@@ -172,8 +183,12 @@ const Icon = (props: IconProps) => {
172
183
  className={wrapperClasses.join(" ")}
173
184
  aria-hidden={props.ariaHidden}
174
185
  data-test-id={props.dataTestId ?? null}
186
+ tabIndex={props.tabIndex}
175
187
  >
176
- <SpecificIcon fill={props.fill ? props.fill : undefined} />
188
+ <SpecificIcon
189
+ fill={props.fill ? props.fill : undefined}
190
+ className={props.iconClass ?? undefined}
191
+ />
177
192
  </span>
178
193
  ) : (
179
194
  <span