@thecb/components 2.2.0

package/src/components/atoms/checkbox/Checkbox.js

@@ -0,0 +1,143 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { fallbackValues } from "./Checkbox.theme";
+import { noop } from "../../../util/general";
+import Box from "../layouts/Box";
+import Text from "../text";
+import { themeComponent } from "../../../util/themeUtils";
+
+const CheckboxContainer = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+`;
+
+const CheckboxLabelContainer = styled.label`
+  display: flex;
+  align-items: center;
+`;
+
+const CheckboxIcon = styled.svg`
+  fill: none;
+  stroke-width: 2px;
+  stroke: ${({ disabled, disabledCheckColor, checkColor }) =>
+    disabled
+      ? css`
+          ${disabledCheckColor}
+        `
+      : css`
+          ${checkColor}
+        `};
+`;
+
+const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
+  border: 0;
+  clip: rect(0 0 0 0);
+  clippath: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+
+const StyledCheckbox = styled.div`
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  transition: all 150ms;
+
+  ${CheckboxIcon} {
+    visibility: ${({ checked }) => (checked ? "visible" : "hidden")};
+  }
+
+  ${({
+    error,
+    disabled,
+    checked,
+    focused,
+    defaultStyles,
+    checkedStyles,
+    focusedStyles,
+    errorStyles,
+    disabledStyles
+  }) =>
+    error
+      ? css`
+          ${errorStyles} ${focused && focusedStyles}
+        `
+      : disabled
+      ? css`
+          ${disabledStyles}
+        `
+      : checked
+      ? css`
+          ${checkedStyles} ${focused && focusedStyles}
+        `
+      : css`
+          ${defaultStyles} ${focused && focusedStyles}
+        `};
+`;
+
+const Checkbox = ({
+  title,
+  name,
+  checked,
+  onChange = noop,
+  disabled = false,
+  focused = false,
+  themeValues,
+  hidden = false,
+  error = false
+}) => (
+  <Box
+    padding="0"
+    hiddenStyles={hidden}
+    background={themeValues.backgroundColor}
+  >
+    <CheckboxLabelContainer>
+      <CheckboxContainer data-qa="Checkbox">
+        <HiddenCheckbox
+          id={`checkbox-${name}`}
+          disabled={disabled}
+          name={name}
+          checked={checked}
+          onChange={onChange}
+          tabIndex="-1"
+        />
+        <StyledCheckbox
+          error={error}
+          disabled={disabled}
+          checked={checked}
+          focused={focused}
+          defaultStyles={themeValues.defaultStyles}
+          checkedStyles={themeValues.checkedStyles}
+          errorStyles={themeValues.errorStyles}
+          disabledStyles={themeValues.disabledStyles}
+          focusedStyles={themeValues.focusedStyles}
+        >
+          <CheckboxIcon
+            viewBox="0 0 24 24"
+            disabled={disabled}
+            disabledCheckColor={themeValues.disabledCheckColor}
+            checkColor={themeValues.checkColor}
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </CheckboxIcon>
+        </StyledCheckbox>
+      </CheckboxContainer>
+      <Text
+        variant="pL"
+        weight={themeValues.textFontWeight}
+        color={themeValues.textColor}
+        extraStyles={`margin-left: 0.5rem`}
+      >
+        {title}
+      </Text>
+    </CheckboxLabelContainer>
+  </Box>
+);
+
+export default themeComponent(Checkbox, "Checkbox", fallbackValues, "default");

package/src/components/atoms/checkbox/Checkbox.theme.js

@@ -0,0 +1,54 @@
+import {
+  WHITE,
+  TRANSPARENT,
+  GHOST_GREY,
+  STORM_GREY,
+  SEASHELL_WHITE,
+  MATISSE_BLUE,
+  RED
+} from "../../../constants/colors";
+
+const backgroundColor = { default: `${TRANSPARENT}` };
+const textFontSize = { default: "1.1rem" };
+const textFontWeight = { default: "400" };
+const textLineHeight = { default: "2rem" };
+const textColor = { default: `${STORM_GREY}` };
+const disabledCheckColor = { default: `${GHOST_GREY};` };
+const checkColor = { default: `${WHITE};` };
+const errorStyles = { default: `border: 1px solid ${RED};` };
+const focusedStyles = {
+  default: `box-shadow: 0 0 5px 0 ${MATISSE_BLUE};`
+};
+const disabledStyles = {
+  default: `
+  background: ${SEASHELL_WHITE};
+  border: 1px solid ${GHOST_GREY};
+`
+};
+const checkedStyles = {
+  default: `
+  background: ${MATISSE_BLUE};    
+  border: 1px solid ${MATISSE_BLUE};
+`
+};
+const defaultStyles = {
+  default: `
+  background: ${WHITE}; 
+  border: 1px solid ${GHOST_GREY};
+`
+};
+
+export const fallbackValues = {
+  backgroundColor,
+  textFontSize,
+  textFontWeight,
+  textLineHeight,
+  textColor,
+  disabledCheckColor,
+  checkColor,
+  errorStyles,
+  focusedStyles,
+  disabledStyles,
+  checkedStyles,
+  defaultStyles
+};

package/src/components/atoms/checkbox/index.js

@@ -0,0 +1,3 @@
+import Checkbox from "./Checkbox";
+
+export default Checkbox;

package/src/components/atoms/checkbox-list/CheckboxList.js

@@ -0,0 +1,129 @@
+import React from "react";
+import styled, { ThemeProvider } from "styled-components";
+import { fallbackValues } from "./CheckboxList.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { RadioButton } from "../../../deprecated";
+import Text from "../text";
+import { noop } from "../../../util/general";
+import { Box, Cluster, Switcher } from "../layouts";
+
+export const CheckboxItemIcon = styled.img`
+  width: 2rem;
+`;
+
+const HiddenCheckboxInput = styled.input`
+  opacity: 0;
+  position: absolute;
+  z-index: -2;
+  cursor: pointer;
+`;
+
+const CheckboxLabel = styled.label`
+  position: relative;
+  z-index: 5;
+  &:focus {
+    outline: none;
+  }
+`;
+
+const CheckboxListItem = ({
+  text,
+  render,
+  isSelected,
+  onSelect,
+  index,
+  name,
+  imageUrl,
+  image,
+  disabled,
+  borderColor,
+  color,
+  background,
+  radioButtonActive,
+  radioButtonInactive
+}) => (
+  <Box
+    padding="0.875rem"
+    borderRadius="4px"
+    minWidth="30%"
+    onClick={disabled ? noop : onSelect}
+    borderColor={borderColor}
+    borderSize="1px"
+    color={color}
+    background={background}
+    extraStyles={`cursor: pointer;`}
+  >
+    <Cluster justify="flex-start" align="center">
+      <HiddenCheckboxInput id={`checkbox-${name}-${index}`} />
+      <CheckboxLabel
+        name={name}
+        htmlFor={`checkbox-${name}-${index}`}
+        onClick={disabled ? noop : onSelect}
+        onKeyDown={disabled ? noop : onSelect}
+        tabIndex={0}
+      >
+        <ThemeProvider
+          theme={{
+            accentColor: radioButtonActive,
+            inactiveColor: radioButtonInactive
+          }}
+        >
+          <RadioButton name={name} isSelected={isSelected} />
+        </ThemeProvider>
+      </CheckboxLabel>
+      <Box padding="0rem 0.5rem 0rem 0rem" hiddenStyles={!imageUrl}>
+        <Cluster justify="flex-start" align="center">
+          <CheckboxItemIcon src={imageUrl} />
+        </Cluster>
+      </Box>
+      <Box padding="0rem 0.5rem 0rem 0rem" hiddenStyles={!image}>
+        <Cluster justify="flex-start" align="center">
+          {image}
+        </Cluster>
+      </Box>
+      <Text variant="p" isSelected={isSelected}>
+        {text ? text : render()}
+      </Text>
+    </Cluster>
+  </Box>
+);
+
+const CheckboxList = ({
+  items,
+  selectedName,
+  onSelect,
+  variant,
+  breakpoint = "30rem",
+  themeValues
+}) => (
+  <Box padding="0rem" background={themeValues.listBackgroundColor}>
+    <Switcher childGap="0.5rem" breakpoint={breakpoint} maxChildren={0}>
+      {items.map((item, index) => (
+        <CheckboxListItem
+          color={themeValues.listItemColor}
+          background={themeValues.listItemBackgroundColor}
+          borderColor={themeValues.listItemBorderColor}
+          key={`checkbox-item-${item.name}`}
+          text={item.text}
+          render={item.render}
+          isSelected={item.name === selectedName}
+          onSelect={evt => onSelect(evt, item)}
+          index={index}
+          imageUrl={item.imageUrl}
+          image={item.image}
+          name={item.name}
+          disabled={variant === "disabled"}
+          radioButtonActive={themeValues.radioButtonActive}
+          radioButtonInactive={themeValues.radioButtonInactive}
+        />
+      ))}
+    </Switcher>
+  </Box>
+);
+
+export default themeComponent(
+  CheckboxList,
+  "CheckboxList",
+  fallbackValues,
+  "default"
+);

package/src/components/atoms/checkbox-list/CheckboxList.theme.js

@@ -0,0 +1,42 @@
+import {
+  WHITE,
+  ATHENS_GREY,
+  STORM_GREY,
+  MINESHAFT_GREY,
+  GHOST_GREY,
+  BOSTON_BLUE
+} from "../../../constants/colors";
+
+const listBackgroundColor = {
+  default: `${ATHENS_GREY}`,
+  disabled: `${WHITE}`
+};
+const listItemColor = {
+  default: `${MINESHAFT_GREY}`,
+  disabled: `${STORM_GREY}`
+};
+const listItemBackgroundColor = {
+  default: `${WHITE}`,
+  disabled: `${ATHENS_GREY}`
+};
+const listItemBorderColor = {
+  default: `${GHOST_GREY}`,
+  disabled: `${GHOST_GREY}`
+};
+const radioButtonActive = {
+  default: `${BOSTON_BLUE}`,
+  disabled: `${GHOST_GREY}`
+};
+const radioButtonInactive = {
+  default: `${GHOST_GREY}`,
+  disabled: `${GHOST_GREY}`
+};
+
+export const fallbackValues = {
+  listBackgroundColor,
+  listItemColor,
+  listItemBackgroundColor,
+  listItemBorderColor,
+  radioButtonActive,
+  radioButtonInactive
+};

package/src/components/atoms/checkbox-list/index.js

@@ -0,0 +1,3 @@
+import CheckboxList from "./CheckboxList";
+
+export default CheckboxList;

package/src/components/atoms/country-dropdown/CountryDropdown.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+import FormSelect from "../form-select";
+import { options } from "./options";
+
+const CountryDropdown = ({
+  labelTextWhenNoError,
+  errorMessages,
+  field,
+  fieldActions,
+  showErrors,
+  onChange
+}) => (
+  <FormSelect
+    options={options}
+    field={field}
+    fieldActions={fieldActions}
+    labelTextWhenNoError={labelTextWhenNoError}
+    errorMessages={errorMessages}
+    showErrors={showErrors}
+    onChange={onChange}
+  />
+);
+export default CountryDropdown;

package/src/components/atoms/country-dropdown/index.js

@@ -0,0 +1 @@
+export { default } from "./CountryDropdown";

package/src/components/atoms/country-dropdown/options.js

@@ -0,0 +1,249 @@
+export const 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/src/components/atoms/display-box/DisplayBox.js

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

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

@@ -0,0 +1,9 @@
+import { GHOST_GREY, ATHENS_GREY, WHITE } from "../../../constants/colors";
+
+const backgroundColor = WHITE;
+const boxShadow = `0px 2px 14px 0px ${ATHENS_GREY}, 0px 3px 8px 0px ${GHOST_GREY}`;
+
+export const fallbackValues = {
+  backgroundColor,
+  boxShadow
+};