@thecb/components 2.2.0

package/src/components/atoms/spinner/Spinner.js

@@ -0,0 +1,61 @@
+import React from "react";
+import styled from "styled-components";
+import { fallbackValues } from "./Spinner.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const SpinnerSvgAnimation = styled.svg`
+  animation: rotate 2s linear infinite;
+  margin: -25px 0 0 -25px;
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+  & .path {
+    stroke: ${({ color }) => color};
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
+    }
+  }
+`;
+
+export const SpinnerContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+`;
+
+const Spinner = ({ size = "24", themeValues }) => (
+  <SpinnerContainer>
+    <SpinnerSvgAnimation size={size} color={themeValues.color}>
+      <circle
+        className="path"
+        cx="50"
+        cy="50"
+        r="25"
+        fill="none"
+        strokeWidth="6"
+      />
+    </SpinnerSvgAnimation>
+  </SpinnerContainer>
+);
+
+export default themeComponent(Spinner, "Spinner", fallbackValues);

package/src/components/atoms/spinner/Spinner.theme.js

@@ -0,0 +1,5 @@
+const color = "#15749D";
+
+export const fallbackValues = {
+  color
+};

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

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

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+import FormSelect from "../form-select";
+import { placeHolderOption, placeHolderOptionUS, getOptions } from "./options";
+
+const FormStateDropdown = ({
+  labelTextWhenNoError,
+  errorMessages,
+  field,
+  fieldActions,
+  showErrors,
+  countryCode
+}) => {
+  const placeholder =
+    countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
+  const options = [placeholder, ...getOptions(countryCode)];
+  return (
+    <FormSelect
+      options={options}
+      field={field}
+      fieldActions={fieldActions}
+      labelTextWhenNoError={labelTextWhenNoError}
+      errorMessages={errorMessages}
+      showErrors={showErrors}
+    />
+  );
+};
+export default FormStateDropdown;

package/src/components/atoms/state-province-dropdown/index.js

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