feat: loading button state

moltin · Apr 25, 2019 · 1d5349f · 1d5349f
1 parent 5af0532
commit 1d5349f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 9 deletions.
diff --git a/src/components/Button.js b/src/components/Button.js
@@ -1,8 +1,42 @@
+import React from 'react'
 import styled, { css } from 'styled-components'
 
-const Button = styled.button.attrs({
+const SVG = styled.svg`
+  display: inline;
+  margin-right: 0.25rem;
+`
+
+const Spinner = () => (
+  <SVG
+    version="1.1"
+    id="loader-1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width="22px"
+    height="22px"
+    viewBox="0 0 50 50"
+  >
+    <path
+      fill="currentColor"
+      d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
+    >
+      <animateTransform
+        attributeType="xml"
+        attributeName="transform"
+        type="rotate"
+        from="0 25 25"
+        to="360 25 25"
+        dur="0.8s"
+        repeatCount="indefinite"
+      />
+    </path>
+  </SVG>
+)
+
+const StyledButton = styled.button.attrs({
   className: 'moltin-shopkit shopkit-button'
 })`
+  background: none;
   box-sizing: border-box;
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
@@ -15,7 +49,7 @@ const Button = styled.button.attrs({
   border: 1px solid transparent;
   color: ${props => props.theme.placeholder};
   font-weight: 500;
-  padding: ${props => (props.noPadding ? 0 : '0.75rem 1rem')};
+  padding: ${props => (props.noPadding ? 0 : '0 1rem')};
   outline: none;
   opacity: ${props => (props.disabled ? 0.5 : 1)};
 
@@ -50,20 +84,30 @@ const Button = styled.button.attrs({
     css`
       margin-top: 1.5rem;
     `};
-
-  ${({ large }) =>
-    large &&
-    css`
-      padding: 1rem;
-    `};
 `
 
+function Button({ loading, children, ...rest }) {
+  return (
+    <StyledButton {...rest}>{loading ? <Spinner /> : children}</StyledButton>
+  )
+}
+
 export const PrimaryButton = styled(Button).attrs({
   className: 'shopkit-primary-button shopkit-primary'
 })`
   background-color: ${props => props.theme.primary};
   border-color: ${props => props.theme.white};
   color: ${props => props.theme.white};
+  height: 2.8rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ large }) =>
+    large &&
+    css`
+      height: 3.25rem;
+    `};
 `
 
 export const TextButton = styled(Button)`

diff --git a/src/components/Label.js b/src/components/Label.js
@@ -10,7 +10,7 @@ export default function Label({
 }) {
   return (
     <StyledLabel htmlFor={htmlFor} {...props}>
-      {children || label} {required && <Required>(required)</Required>}
+      {children || label} {required && <Required>*</Required>}
     </StyledLabel>
   )
 }