npm - @thecb/components - Versions diffs - 7.5.1 → 7.5.2 - Mend

@thecb/components 7.5.1 → 7.5.2

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 (1039) hide show

package/dist/src/components/atoms/country-dropdown/options.js ADDED Viewed

@@ -0,0 +1,249 @@
+export var options = [
+    { text: "Afghanistan", value: "AF" },
+    { text: "Aland Islands", value: "AX" },
+    { text: "Albania", value: "AL" },
+    { text: "Algeria", value: "DZ" },
+    { text: "American Samoa", value: "AS" },
+    { text: "Andorra", value: "AD" },
+    { text: "Angola", value: "AO" },
+    { text: "Anguilla", value: "AI" },
+    { text: "Antarctica", value: "AQ" },
+    { text: "Antigua and Barbuda", value: "AG" },
+    { text: "Argentina", value: "AR" },
+    { text: "Armenia", value: "AM" },
+    { text: "Aruba", value: "AW" },
+    { text: "Australia", value: "AU" },
+    { text: "Austria", value: "AT" },
+    { text: "Azerbaijan", value: "AZ" },
+    { text: "Bahamas", value: "BS" },
+    { text: "Bahrain", value: "BH" },
+    { text: "Bangladesh", value: "BD" },
+    { text: "Barbados", value: "BB" },
+    { text: "Belarus", value: "BY" },
+    { text: "Belgium", value: "BE" },
+    { text: "Belize", value: "BZ" },
+    { text: "Benin", value: "BJ" },
+    { text: "Bermuda", value: "BM" },
+    { text: "Bhutan", value: "BT" },
+    { text: "Bolivia", value: "BO" },
+    { text: "Bosnia and Herzegovina", value: "BA" },
+    { text: "Botswana", value: "BW" },
+    { text: "Bouvet Island", value: "BV" },
+    { text: "Brazil", value: "BR" },
+    { text: "British Virgin Islands", value: "VG" },
+    { text: "British Indian Ocean Territory", value: "IO" },
+    { text: "Brunei Darussalam", value: "BN" },
+    { text: "Bulgaria", value: "BG" },
+    { text: "Burkina Faso", value: "BF" },
+    { text: "Burundi", value: "BI" },
+    { text: "Cambodia", value: "KH" },
+    { text: "Cameroon", value: "CM" },
+    { text: "Canada", value: "CA" },
+    { text: "Cape Verde", value: "CV" },
+    { text: "Cayman Islands", value: "KY" },
+    { text: "Central African Republic", value: "CF" },
+    { text: "Chad", value: "TD" },
+    { text: "Chile", value: "CL" },
+    { text: "China", value: "CN" },
+    { text: "Hong Kong, SAR China", value: "HK" },
+    { text: "Macao, SAR China", value: "MO" },
+    { text: "Christmas Island", value: "CX" },
+    { text: "Cocos (Keeling) Islands", value: "CC" },
+    { text: "Colombia", value: "CO" },
+    { text: "Comoros", value: "KM" },
+    { text: "Congo, (Brazzaville)", value: "CG" },
+    { text: "Congo, (Kinshasa)", value: "CD" },
+    { text: "Cook Islands", value: "CK" },
+    { text: "Costa Rica", value: "CR" },
+    { text: "Côte d'Ivoire", value: "CI" },
+    { text: "Croatia", value: "HR" },
+    { text: "Cuba", value: "CU" },
+    { text: "Cyprus", value: "CY" },
+    { text: "Czech Republic", value: "CZ" },
+    { text: "Denmark", value: "DK" },
+    { text: "Djibouti", value: "DJ" },
+    { text: "Dominica", value: "DM" },
+    { text: "Dominican Republic", value: "DO" },
+    { text: "Ecuador", value: "EC" },
+    { text: "Egypt", value: "EG" },
+    { text: "El Salvador", value: "SV" },
+    { text: "Equatorial Guinea", value: "GQ" },
+    { text: "Eritrea", value: "ER" },
+    { text: "Estonia", value: "EE" },
+    { text: "Ethiopia", value: "ET" },
+    { text: "Falkland Islands (Malvinas)", value: "FK" },
+    { text: "Faroe Islands", value: "FO" },
+    { text: "Fiji", value: "FJ" },
+    { text: "Finland", value: "FI" },
+    { text: "France", value: "FR" },
+    { text: "French Guiana", value: "GF" },
+    { text: "French Polynesia", value: "PF" },
+    { text: "French Southern Territories", value: "TF" },
+    { text: "Gabon", value: "GA" },
+    { text: "Gambia", value: "GM" },
+    { text: "Georgia", value: "GE" },
+    { text: "Germany", value: "DE" },
+    { text: "Ghana", value: "GH" },
+    { text: "Gibraltar", value: "GI" },
+    { text: "Greece", value: "GR" },
+    { text: "Greenland", value: "GL" },
+    { text: "Grenada", value: "GD" },
+    { text: "Guadeloupe", value: "GP" },
+    { text: "Guam", value: "GU" },
+    { text: "Guatemala", value: "GT" },
+    { text: "Guernsey", value: "GG" },
+    { text: "Guinea", value: "GN" },
+    { text: "Guinea-Bissau", value: "GW" },
+    { text: "Guyana", value: "GY" },
+    { text: "Haiti", value: "HT" },
+    { text: "Heard and Mcdonald Islands", value: "HM" },
+    { text: "Holy See (Vatican City State)", value: "VA" },
+    { text: "Honduras", value: "HN" },
+    { text: "Hungary", value: "HU" },
+    { text: "Iceland", value: "IS" },
+    { text: "India", value: "IN" },
+    { text: "Indonesia", value: "ID" },
+    { text: "Iran, Islamic Republic of", value: "IR" },
+    { text: "Iraq", value: "IQ" },
+    { text: "Ireland", value: "IE" },
+    { text: "Isle of Man", value: "IM" },
+    { text: "Israel", value: "IL" },
+    { text: "Italy", value: "IT" },
+    { text: "Jamaica", value: "JM" },
+    { text: "Japan", value: "JP" },
+    { text: "Jersey", value: "JE" },
+    { text: "Jordan", value: "JO" },
+    { text: "Kazakhstan", value: "KZ" },
+    { text: "Kenya", value: "KE" },
+    { text: "Kiribati", value: "KI" },
+    { text: "Korea (North)", value: "KP" },
+    { text: "Korea (South)", value: "KR" },
+    { text: "Kuwait", value: "KW" },
+    { text: "Kyrgyzstan", value: "KG" },
+    { text: "Lao PDR", value: "LA" },
+    { text: "Latvia", value: "LV" },
+    { text: "Lebanon", value: "LB" },
+    { text: "Lesotho", value: "LS" },
+    { text: "Liberia", value: "LR" },
+    { text: "Libya", value: "LY" },
+    { text: "Liechtenstein", value: "LI" },
+    { text: "Lithuania", value: "LT" },
+    { text: "Luxembourg", value: "LU" },
+    { text: "Macedonia, Republic of", value: "MK" },
+    { text: "Madagascar", value: "MG" },
+    { text: "Malawi", value: "MW" },
+    { text: "Malaysia", value: "MY" },
+    { text: "Maldives", value: "MV" },
+    { text: "Mali", value: "ML" },
+    { text: "Malta", value: "MT" },
+    { text: "Marshall Islands", value: "MH" },
+    { text: "Martinique", value: "MQ" },
+    { text: "Mauritania", value: "MR" },
+    { text: "Mauritius", value: "MU" },
+    { text: "Mayotte", value: "YT" },
+    { text: "Mexico", value: "MX" },
+    { text: "Micronesia, Federated States of", value: "FM" },
+    { text: "Moldova", value: "MD" },
+    { text: "Monaco", value: "MC" },
+    { text: "Mongolia", value: "MN" },
+    { text: "Montenegro", value: "ME" },
+    { text: "Montserrat", value: "MS" },
+    { text: "Morocco", value: "MA" },
+    { text: "Mozambique", value: "MZ" },
+    { text: "Myanmar", value: "MM" },
+    { text: "Namibia", value: "NA" },
+    { text: "Nauru", value: "NR" },
+    { text: "Nepal", value: "NP" },
+    { text: "Netherlands", value: "NL" },
+    { text: "Netherlands Antilles", value: "AN" },
+    { text: "New Caledonia", value: "NC" },
+    { text: "New Zealand", value: "NZ" },
+    { text: "Nicaragua", value: "NI" },
+    { text: "Niger", value: "NE" },
+    { text: "Nigeria", value: "NG" },
+    { text: "Niue", value: "NU" },
+    { text: "Norfolk Island", value: "NF" },
+    { text: "Northern Mariana Islands", value: "MP" },
+    { text: "Norway", value: "NO" },
+    { text: "Oman", value: "OM" },
+    { text: "Pakistan", value: "PK" },
+    { text: "Palau", value: "PW" },
+    { text: "Palestinian Territory", value: "PS" },
+    { text: "Panama", value: "PA" },
+    { text: "Papua New Guinea", value: "PG" },
+    { text: "Paraguay", value: "PY" },
+    { text: "Peru", value: "PE" },
+    { text: "Philippines", value: "PH" },
+    { text: "Pitcairn", value: "PN" },
+    { text: "Poland", value: "PL" },
+    { text: "Portugal", value: "PT" },
+    { text: "Puerto Rico", value: "PR" },
+    { text: "Qatar", value: "QA" },
+    { text: "Réunion", value: "RE" },
+    { text: "Romania", value: "RO" },
+    { text: "Russian Federation", value: "RU" },
+    { text: "Rwanda", value: "RW" },
+    { text: "Saint-Barthélemy", value: "BL" },
+    { text: "Saint Helena", value: "SH" },
+    { text: "Saint Kitts and Nevis", value: "KN" },
+    { text: "Saint Lucia", value: "LC" },
+    { text: "Saint-Martin (French part)", value: "MF" },
+    { text: "Saint Pierre and Miquelon", value: "PM" },
+    { text: "Saint Vincent and Grenadines", value: "VC" },
+    { text: "Samoa", value: "WS" },
+    { text: "San Marino", value: "SM" },
+    { text: "Sao Tome and Principe", value: "ST" },
+    { text: "Saudi Arabia", value: "SA" },
+    { text: "Senegal", value: "SN" },
+    { text: "Serbia", value: "RS" },
+    { text: "Seychelles", value: "SC" },
+    { text: "Sierra Leone", value: "SL" },
+    { text: "Singapore", value: "SG" },
+    { text: "Slovakia", value: "SK" },
+    { text: "Slovenia", value: "SI" },
+    { text: "Solomon Islands", value: "SB" },
+    { text: "Somalia", value: "SO" },
+    { text: "South Africa", value: "ZA" },
+    { text: "South Georgia and the South Sandwich Islands", value: "GS" },
+    { text: "South Sudan", value: "SS" },
+    { text: "Spain", value: "ES" },
+    { text: "Sri Lanka", value: "LK" },
+    { text: "Sudan", value: "SD" },
+    { text: "Suriname", value: "SR" },
+    { text: "Svalbard and Jan Mayen Islands", value: "SJ" },
+    { text: "Swaziland", value: "SZ" },
+    { text: "Sweden", value: "SE" },
+    { text: "Switzerland", value: "CH" },
+    { text: "Syrian Arab Republic (Syria)", value: "SY" },
+    { text: "Taiwan, Republic of China", value: "TW" },
+    { text: "Tajikistan", value: "TJ" },
+    { text: "Tanzania, United Republic of", value: "TZ" },
+    { text: "Thailand", value: "TH" },
+    { text: "Timor-Leste", value: "TL" },
+    { text: "Togo", value: "TG" },
+    { text: "Tokelau", value: "TK" },
+    { text: "Tonga", value: "TO" },
+    { text: "Trinidad and Tobago", value: "TT" },
+    { text: "Tunisia", value: "TN" },
+    { text: "Turkey", value: "TR" },
+    { text: "Turkmenistan", value: "TM" },
+    { text: "Turks and Caicos Islands", value: "TC" },
+    { text: "Tuvalu", value: "TV" },
+    { text: "Uganda", value: "UG" },
+    { text: "Ukraine", value: "UA" },
+    { text: "United Arab Emirates", value: "AE" },
+    { text: "United Kingdom", value: "GB" },
+    { text: "United States of America", value: "US" },
+    { text: "US Minor Outlying Islands", value: "UM" },
+    { text: "Uruguay", value: "UY" },
+    { text: "Uzbekistan", value: "UZ" },
+    { text: "Vanuatu", value: "VU" },
+    { text: "Venezuela (Bolivarian Republic)", value: "VE" },
+    { text: "Viet Nam", value: "VN" },
+    { text: "Virgin Islands, US", value: "VI" },
+    { text: "Wallis and Futuna Islands", value: "WF" },
+    { text: "Western Sahara", value: "EH" },
+    { text: "Yemen", value: "YE" },
+    { text: "Zambia", value: "ZM" },
+    { text: "Zimbabwe", value: "ZW" }
+];

package/dist/src/components/atoms/detail/Detail.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+declare const _default: ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;
+export default _default;

package/dist/src/components/atoms/detail/Detail.js ADDED Viewed

@@ -0,0 +1,63 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FIREFLY_GREY } from "../../../constants/colors";
+import { DetailText } from "./Detail.styled";
+import { safeChildren } from "../../../util/general";
+import { fallbackValues, mobileFallbackValues, MOBILE_BREAKPOINT } from "./Detail.theme";
+import { themeComponent } from "../../../util/themeUtils";
+/*
+  New responsive text component for Detail elements
+  (Block level text elements which are smaller than "Title" elements)
+  Size is decoupled from tag
+  Comes with four variants - "large", "regular", "small", "extraSmall"
+  Large variant results in text that is 1.125rem/1.1428rem (18px desktop, 16px mobile)
+  Regular variant results in text that is 1rem (16px desktop, 14px mobile)
+  Small variant reuslts in text that is 0.875rem/0.8571rem (14px desktop, 12px mobile)
+  ExtraSmall variant results in text that is 0.75rem/0.7142rem (12px desktop, 10px mobile)
+  If you need a larger font size, use the <Title /> atom, which has larger variants
+  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
+  If you need an inline text element (span), use the <Text /> atom
+  The "as" value should be dictated by the structure of your page, not what font-size you want
+  Title / Detail both use slightly different desktop/mobile scales
+  (Mobile scale is different to allow for design-friendly px values)
+  Both atoms detect the presence of a mobile device on their own
+  and apply the corresponding scale
+  Mobile breakpoint value is specified in Detail.theme.js
+  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set all of the variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
+*/
+var isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
+var isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
+var mobileDeviceDetected = isBelowBreakpoint && isTouchDevice;
+var fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues;
+var Detail = function (_a) {
+    var themeValues = _a.themeValues, _b = _a.weight, weight = _b === void 0 ? FONT_WEIGHT_REGULAR : _b, _c = _a.color, color = _c === void 0 ? FIREFLY_GREY : _c, _d = _a.margin, margin = _d === void 0 ? 0 : _d, textAlign = _a.textAlign, _e = _a.extraStyles, extraStyles = _e === void 0 ? "" : _e, className = _a.className, _f = _a.variant, variant = _f === void 0 ? "regular" : _f, _g = _a.as, as = _g === void 0 ? "p" : _g, dataQa = _a.dataQa, children = _a.children, rest = __rest(_a, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
+    return (React.createElement(DetailText, __assign({ variant: variant, as: as, weight: weight, color: color, margin: margin, textAlign: textAlign, extraStyles: extraStyles, className: className, fontFamily: themeValues.fontFamily, fontSize: themeValues.fontSize, "data-qa": dataQa }, rest), safeChildren(children, React.createElement("span", null))));
+};
+export default themeComponent(Detail, "Detail", fallbacks, "regular");

package/dist/src/components/atoms/detail/Detail.styled.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export const DetailText: any;

package/dist/src/components/atoms/detail/Detail.styled.js ADDED Viewed

@@ -0,0 +1,28 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+export var DetailText = styled.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: 1.5;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n  text-align: ", ";\n  font-family: ", ";\n\n  ", ";\n"], ["\n  font-size: ", ";\n  line-height: 1.5;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n  text-align: ", ";\n  font-family: ", ";\n\n  ", ";\n"])), function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize;
+}, function (_a) {
+    var color = _a.color;
+    return color;
+}, function (_a) {
+    var weight = _a.weight;
+    return weight;
+}, function (_a) {
+    var margin = _a.margin;
+    return margin;
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
+}, function (_a) {
+    var fontFamily = _a.fontFamily;
+    return fontFamily;
+}, function (_a) {
+    var extraStyles = _a.extraStyles;
+    return extraStyles;
+});
+var templateObject_1;

package/dist/src/components/atoms/detail/Detail.theme.d.ts ADDED Viewed

@@ -0,0 +1,36 @@
+export namespace fallbackValues {
+    export { fontFamily };
+    export { fontSize };
+}
+export namespace mobileFallbackValues {
+    export { fontFamily };
+    export { mobileFontSize as fontSize };
+}
+export const MOBILE_BREAKPOINT: 768;
+declare namespace fontFamily {
+    const large: string;
+    const regular: string;
+    const small: string;
+    const extraSmall: string;
+}
+declare namespace fontSize {
+    const large_1: string;
+    export { large_1 as large };
+    const regular_1: string;
+    export { regular_1 as regular };
+    const small_1: string;
+    export { small_1 as small };
+    const extraSmall_1: string;
+    export { extraSmall_1 as extraSmall };
+}
+declare namespace mobileFontSize {
+    const large_2: string;
+    export { large_2 as large };
+    const regular_2: string;
+    export { regular_2 as regular };
+    const small_2: string;
+    export { small_2 as small };
+    const extraSmall_2: string;
+    export { extraSmall_2 as extraSmall };
+}
+export {};

package/dist/src/components/atoms/detail/Detail.theme.js ADDED Viewed

@@ -0,0 +1,28 @@
+// Comments assume desktop base font size of 16px, mobile base font size of 14px
+var fontSize = {
+    large: "1.125rem",
+    regular: "1rem",
+    small: "0.875rem",
+    extraSmall: "0.75rem" // 12px
+};
+var fontFamily = {
+    large: "Public Sans",
+    regular: "Public Sans",
+    small: "Public Sans",
+    extraSmall: "Public Sans"
+};
+var mobileFontSize = {
+    large: "1.14285rem",
+    regular: "1",
+    small: "0.85714rem",
+    extraSmall: "0.71428rem" // 10px
+};
+export var fallbackValues = {
+    fontFamily: fontFamily,
+    fontSize: fontSize
+};
+export var mobileFallbackValues = {
+    fontFamily: fontFamily,
+    fontSize: mobileFontSize
+};
+export var MOBILE_BREAKPOINT = 768;

package/dist/src/components/atoms/detail/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export default Detail;
2	+ import Detail from "./Detail";

package/dist/src/components/atoms/detail/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import Detail from "./Detail";
2	+ export default Detail;

package/dist/src/components/atoms/display-box/DisplayBox.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+declare const _default: ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;
+export default _default;

package/dist/src/components/atoms/display-box/DisplayBox.js ADDED Viewed

@@ -0,0 +1,11 @@
+import React from "react";
+import Box from "../layouts/Box";
+import { fallbackValues } from "./DisplayBox.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { RED } from "../../../constants/colors";
+var DisplayBox = function (_a) {
+    var children = _a.children, themeValues = _a.themeValues, showError = _a.showError;
+    return (React.createElement(Box, { padding: "0.5rem 0 1.5rem 0" },
+        React.createElement(Box, { padding: "1.5rem", background: themeValues.backgroundColor, borderSize: showError && "1px", borderColor: showError && RED, borderRadius: "4px", boxShadow: themeValues.boxShadow }, children)));
+};
+export default themeComponent(DisplayBox, "DisplayBox", fallbackValues);

package/dist/src/components/atoms/display-box/DisplayBox.stories.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export function displayBox(): JSX.Element;
+export default story;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/atoms/display-box/DisplayBox.stories.js ADDED Viewed

@@ -0,0 +1,12 @@
+import React from "react";
+import { boolean } from "@storybook/addon-knobs";
+import DisplayBox from "./DisplayBox";
+import FormattedAddress from "../formatted-address";
+import page from "../../../../.storybook/page";
+export var displayBox = function () { return (React.createElement(DisplayBox, { showError: boolean("showError", false, "props") },
+    React.createElement(FormattedAddress, { qaPrefix: "billing-info", name: "Citybase", street1: "30 North Lasalle", city: "Chicago", country: "USA", stateProvince: "Illinois", zip: "60606" }))); };
+var story = page({
+    title: "Components|Atoms/DisplayBox",
+    Component: DisplayBox
+});
+export default story;

package/dist/src/components/atoms/display-box/DisplayBox.theme.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export namespace fallbackValues {
+    export { backgroundColor };
+    export { boxShadow };
+}
+declare const backgroundColor: "#FFFFFF";
+declare const boxShadow: string;
+export {};

package/dist/src/components/atoms/display-box/DisplayBox.theme.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { GHOST_GREY, ATHENS_GREY, WHITE } from "../../../constants/colors";
+var backgroundColor = WHITE;
+var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
+export var fallbackValues = {
+    backgroundColor: backgroundColor,
+    boxShadow: boxShadow
+};

package/dist/src/components/atoms/display-box/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export default DisplayBox;
2	+ import DisplayBox from "./DisplayBox";

package/dist/src/components/atoms/display-box/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import DisplayBox from "./DisplayBox";
2	+ export default DisplayBox;

package/dist/src/components/atoms/display-card/DisplayCard.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export default DisplayCard;
+declare function DisplayCard({ title, item, buttonText, buttonAction, url, link }: {
+    title: any;
+    item: any;
+    buttonText: any;
+    buttonAction: any;
+    url: any;
+    link?: boolean | undefined;
+}): JSX.Element;

package/dist/src/components/atoms/display-card/DisplayCard.js ADDED Viewed

@@ -0,0 +1,22 @@
+import React, { Fragment } from "react";
+import Stack from "../layouts/Stack";
+import Box from "../layouts/Box";
+import Text from "../text";
+import Paragraph from "../paragraph";
+import Cluster from "../layouts/Cluster";
+import ButtonWithAction from "../button-with-action";
+import ButtonWithLink from "../button-with-link";
+import { WHITE, CHARADE_GREY } from "../../../constants/colors";
+var DisplayCard = function (_a) {
+    var title = _a.title, item = _a.item, buttonText = _a.buttonText, buttonAction = _a.buttonAction, url = _a.url, _b = _a.link, link = _b === void 0 ? false : _b;
+    return (React.createElement(Box, { padding: "0 0 16px" },
+        React.createElement(Stack, { childGap: "0rem" },
+            React.createElement(Box, { padding: "0 0 8px 0" },
+                React.createElement(Paragraph, { variant: "pL", color: CHARADE_GREY, extraStyles: "letter-spacing: 0.29px" }, title)),
+            React.createElement(Box, { padding: "0" },
+                React.createElement(Box, { padding: "24px", borderSize: "1px", borderRadius: "4px", background: WHITE, boxShadow: "0px 2px 14px 0px rgb(246, 246, 249),\n            0px 3px 8px 0px rgb(202, 206, 216)" },
+                    React.createElement(Cluster, { justify: "space-between", align: "center" },
+                        React.createElement(Text, { variant: "p", color: CHARADE_GREY }, item),
+                        link ? (React.createElement(ButtonWithLink, { text: buttonText, url: url, variant: "smallGhost", dataQa: buttonText, extraStyles: "min-width: 0;" })) : buttonAction ? (React.createElement(ButtonWithAction, { text: buttonText, action: buttonAction, variant: "smallGhost", dataQa: buttonText, extraStyles: "min-width: 0;" })) : (React.createElement(Fragment, null))))))));
+};
+export default DisplayCard;

package/dist/src/components/atoms/display-card/DisplayCard.stories.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export default story;
+export function displayCard(): JSX.Element;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/atoms/display-card/DisplayCard.stories.js ADDED Viewed

@@ -0,0 +1,10 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import DisplayCard from "./DisplayCard";
+import page from "../../../../.storybook/page";
+var story = page({
+    title: "Components|Atoms/DisplayCard",
+    Component: DisplayCard
+});
+export default story;
+export var displayCard = function () { return (React.createElement(DisplayCard, { title: text("title", "Title", "props"), buttonText: text("buttonText", "Lorem", "props"), url: text("url", "http://google.com", "props"), link: boolean("link", false, "props"), buttonAction: text("buttonAction", function () { }, "props"), item: text("item", "Foo", "props") }, text("children", "Lorem Ipsum", "props"))); };

package/dist/src/components/atoms/display-card/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export default DisplayCard;
2	+ import DisplayCard from "./DisplayCard";

package/dist/src/components/atoms/display-card/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import DisplayCard from "./DisplayCard";
2	+ export default DisplayCard;

package/dist/src/components/atoms/dropdown/Dropdown.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+declare const _default: ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;
+export default _default;