@redsift/design-system-legacy 8.0.0-alpha.8 → 8.0.1

package/src/components/Input/OutlineInput/OutlineInput.jsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const OutlineLabel = styled.label`
+  position: relative;
+  display: block;
+  padding-top: 6px;
+
+  & > input {
+    box-sizing: border-box;
+    margin: 0;
+    border: 2px solid #ebedf4;
+    border-top-color: transparent;
+    border-radius: 4px;
+    padding: 16px 12px;
+    width: 100%;
+    height: inherit;
+    color: #4a4a4a;
+    background-color: transparent;
+    box-shadow: none; /* Firefox */
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    caret-color: #4a4a4a;
+    transition: border 0.2s, box-shadow 0.2s;
+  }
+
+  /* Span */
+  & > input + span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    border-color: #ebedf4;
+    width: 100%;
+    max-height: 100%;
+    color: #4a4a4a;
+    font-size: 75%;
+    line-height: 15px;
+    cursor: text;
+    transition: color 0.2s, font-size 0.2s, line-height 0.2s;
+  }
+
+  /* Corners */
+  & > input + span::before,
+  & > input + span::after {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    margin-top: 6px;
+    border-top: solid 1px #ebedf4;
+    min-width: 10px;
+    height: 8px;
+    pointer-events: none;
+    box-shadow: inset 0 1px transparent;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+
+  & > input + span::before {
+    margin-right: 4px;
+    border-left: solid 1px transparent;
+    border-radius: 4px 0;
+  }
+
+  & > input + span::after {
+    flex-grow: 1;
+    margin-left: 4px;
+    border-right: solid 1px transparent;
+    border-radius: 0 4px;
+  }
+
+  /* Hover */
+  &:hover > input {
+    border-color: ${({ color, error }) =>
+      `rgba(${error ? "#E06354" : color}, 0.87)`};
+    border-top-color: transparent;
+  }
+
+  &:hover > input + span {
+    color: ${({ color, error }) => `rgba(${error ? "#E06354" : color}, 0.87)`};
+  }
+
+  &:hover > input + span::before,
+  &:hover > input + span::after {
+    border-top-color: ${({ color, error }) =>
+      `rgba(${error ? "#E06354" : color}, 0.87)`};
+  }
+
+  &:hover > input:not(:focus):placeholder-shown {
+    border-color: ${({ color, error }) =>
+      `rgba(${error ? "#E06354" : color}, 0.87)`};
+  }
+
+  /* Placeholder-shown */
+  & > input:not(:focus):placeholder-shown {
+    border-top-color: #ebedf4;
+  }
+
+  & > input:not(:focus):placeholder-shown + span {
+    font-size: inherit;
+    line-height: 68px;
+  }
+
+  &
+    > input:not(:focus):placeholder-shown
+    + span::before
+    &
+    > input:not(:focus):placeholder-shown
+    + span::after {
+    border-top-color: transparent;
+  }
+
+  /* Focus */
+  & > input:focus {
+    border-color: ${({ color, error }) => (error ? "#E06354" : color)};
+    border-top-color: transparent;
+    box-shadow: inset 1px 0
+        ${({ color, error }) => `rgba(${error ? "#E06354" : color}, 0.87)`},
+      inset -1px 0 ${({ color, error }) => `rgba(${error ? "#E06354" : color}, 0.87)`},
+      inset 0 -1px ${({ color, error }) => `rgba(${error ? "#E06354" : color}, 0.87)`};
+    outline: none;
+  }
+
+  & > input:focus + span {
+    color: ${({ color, error }) => (error ? "#E06354" : color)};
+  }
+
+  & > input:focus + span::before,
+  & > input:focus + span::after {
+    border-top-color: ${({ color, error }) =>
+      error ? "#E06354" : color} !important;
+    box-shadow: inset 0 1px ${({ color, error }) => (error ? "#E06354" : color)};
+  }
+
+  /* Disabled */
+  & > input:disabled,
+  & > input:disabled + span {
+    border-color: rgba(#ebedf4, 0.38) !important;
+    border-top-color: transparent !important;
+    color: rgba(74, 74, 74, 0.38);
+    pointer-events: none;
+  }
+
+  & > input:disabled + span::before,
+  & > input:disabled + span::after {
+    border-top-color: rgba(#ebedf4, 0.38) !important;
+  }
+
+  & > input:disabled:placeholder-shown,
+  & > input:disabled:placeholder-shown + span {
+    border-top-color: rgba(#ebedf4, 0.38) !important;
+  }
+
+  & > input:disabled:placeholder-shown + span::before,
+  & > input:disabled:placeholder-shown + span::after {
+    border-top-color: transparent !important;
+  }
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      & > input,
+      & > input + span,
+      & > input + span::before,
+      & > input + span::after {
+        transition-duration: 0.1s;
+      }
+    }
+  }
+
+  // Error
+  & > p {
+    position: absolute;
+    bottom: -30px;
+    padding-left: 16px;
+    font-size: 12px;
+    color: #e06354;
+  }
+`;
+
+export const OutlineInput = React.forwardRef(
+  ({ placeholder, label, errorText, color = "#333333", ...rest }, ref) => (
+    <OutlineLabel className={rest.className} color={color} error={!!errorText}>
+      <input {...rest} placeholder={" "} ref={ref} />
+      <span>{placeholder || label}</span>
+      {!!errorText && <p>{errorText}</p>}
+    </OutlineLabel>
+  )
+);

package/src/components/Input/RegularInput/RegularInput.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Button } from '../../Button';
+import { ClearIcon } from '../../icons';
+import * as Styles from "./RegularInput.styles";
+
+const ClearSearchButton = ({ onChange }) => {
+  return (
+    <Button
+      aria-label="Clear Search"
+      onClick={() => onChange({ target: { value: "" } })}
+      flatIcon
+    >
+      <ClearIcon />
+    </Button>
+  );
+};
+
+export const RegularInput = ({
+  color,
+  label,
+  hideUnderline,
+  helperText,
+  errorText,
+  placeholder,
+  leftIcon,
+  rightIcon,
+  showClear,
+  ...rest
+}) => (
+  <Styles.Wrapper className={rest.className} htmlFor={rest.name}>
+    {leftIcon && <Styles.LeftIconWrapper>{leftIcon}</Styles.LeftIconWrapper>}
+    {((showClear && rest.value) || rightIcon) && (
+      <Styles.RightIconWrapper>
+        {showClear ? <ClearSearchButton onChange={rest.onChange} /> : rightIcon}
+      </Styles.RightIconWrapper>
+    )}
+    {(helperText || errorText) && (
+      <Styles.HelperText error={errorText}>
+        {errorText || helperText}
+      </Styles.HelperText>
+    )}
+    <Styles.InputField
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      hideUnderline={hideUnderline}
+      color={color}
+      placeholder={placeholder || " "}
+      error={errorText}
+      {...rest}
+    />
+    <Styles.Span leftIcon={leftIcon} color={color}>
+      {label}
+    </Styles.Span>
+  </Styles.Wrapper>
+);

package/src/components/Input/RegularInput/RegularInput.styles.ts

@@ -0,0 +1,98 @@
+// @ts-nocheck
+import styled from 'styled-components';
+
+export const Wrapper = styled.label`
+  position: relative;
+  margin-bottom: 0px;
+  display: flex;
+  flex-direction: column-reverse;
+  width: 100%;
+  padding-top: 20px;
+`;
+
+export const Span = styled.span`
+  color: rgba(0, 0, 0, 0.87);
+  font-weight: normal;
+  font-family: Raleway, sans-serif;
+  position: absolute;
+  pointer-events: none;
+  left: ${(props) => (props.leftIcon ? "45px" : "5px")};
+  transition: 0.2s ease all;
+  top: 17px;
+`;
+
+export const LeftIconWrapper = styled.div`
+  position: absolute;
+  top: 15px;
+  left: 15px;
+
+  img {
+    vertical-align: middle;
+  }
+`;
+
+export const RightIconWrapper = styled(LeftIconWrapper)`
+  top: 15px;
+  left: unset;
+  right: 10px;
+`;
+
+export const InputField = styled.input`
+  background-color: transparent;
+  font-size: 1rem;
+  font-family: Raleway, sans-serif;
+  line-height: 1.75rem;
+  color: rgba(0, 0, 0, 0.87);
+  padding: ${(props) =>
+    props.rightIcon ? "0px 40px 5px 10px" : "0px 10px 5px 10px"};
+  margin-top: 0px;
+  margin-bottom: 5px;
+  display: block;
+  border: none;
+  text-indent: ${(props) => (props.leftIcon ? "40px" : "0px")};
+  border-bottom: ${(props) =>
+    `${props.hideUnderline ? "0px" : props.error ? "2px" : "1px"} solid ${
+      props.error ? "#e06354" : "rgba(0, 0, 0, 0.42)"
+    }`};
+  ::placeholder {
+    opacity: 0;
+  }
+  :focus {
+    outline: none;
+    border-bottom: ${(props) =>
+      `${props.hideUnderline ? "0px" : "2px"} solid ${
+        props.error ? "#e06354" : props.color || "#000"
+      }`};
+  }
+  :disabled ~ ${Span} {
+    color: rgba(0, 0, 0, 0.38);
+  }
+  :disabled,
+  :disabled ~ ${Span} {
+    color: rgba(0, 0, 0, 0.38);
+  }
+  :focus ~ ${Span}, :disabled ~ ${Span}, :not(:placeholder-shown) ~ ${Span} {
+    top: 7px;
+    font-size: 0.75rem;
+  }
+  :focus ~ ${Span} {
+    color: ${(props) => (props.error ? "#e06354" : props.color || "#000")};
+  }
+  :focus:placeholder-shown {
+    ::placeholder {
+      opacity: 1;
+    }
+  }
+`;
+
+export const HelperText = styled.p`
+  padding-right: 16px;
+  padding-left: 16px;
+  font-family: Raleway, sans-serif;
+  color: ${(props) => (props.error ? "#e06354" : "rgba(0, 0, 0, 0.6)")};
+  font-size: 0.75rem;
+  letter-spacing: 0.0333333333em;
+  margin: 0;
+  height: 1rem;
+  margin-bottom: 5px;
+`;

package/src/components/Input/index.ts

@@ -0,0 +1 @@
+export * from './Input';

package/src/components/Input/readme.md

@@ -0,0 +1,82 @@
+### Accessibility
+
+- Ensure label is provided
+- Ensure name is provided
+
+### Props
+
+|     Prop      | Default |                                                                                           Options |
+| :-----------: | :-----: | ------------------------------------------------------------------------------------------------: |
+|     label     |         |                                                                               string **Required** |
+|     color     |  #000   |                                                                                             Color |
+| hideUnderline |         |                                                              Boolean (doesn't for outlined input) |
+|  placeholder  |         |                                                                                            string |
+|   errorText   |         |                                                               Will override helperText if present |
+|  helperText   |         |                                                               string (doesn't for outlined input) |
+|   leftIcon    |         |                                                            Left Icon (doesn't for outlined input) |
+|   rightIcon   |         |                                                           Right Icon (doesn't for outlined input) |
+|   showClear   |         | Enables the clearing right icon, overrides the right icon if present (doesn't for outlined input) |
+|   outlined    |         |                                                             specify if you want an outlined input |
+|    ...rest    |         |                                                                               input element props |
+
+### Examples
+
+Common case
+
+```js
+<Input label="Default"/>
+<Input color="#02ac61" label="OnDMARC"/>
+<Input color="#33b222" label="OnINBOX"/>
+<Input color="#53C3EB" label="InGRAIN"/>
+<Input color="#53C3EB" value="Clear" label="InGRAIN" showClear
+	   onChange={(ev) => console.log("Value", ev.target.value)}/>
+<Input color="green" label="Outlined example" outlined/>
+
+```
+
+Extras
+
+```js
+import styled from 'styled-components';
+import { OutlineInput } from './OutlineInput/OutlineInput';
+
+const ShortInput = styled(Input)`
+  width: 100px;
+`;
+const CustomInput = styled(Input)`
+  background: orange;
+`;
+
+<>
+  <Input
+    color="#33b222"
+    name="email"
+    type="email"
+    value=""
+    label="Email (autocomplete)"
+  />
+  <Input
+    color="#33b222"
+    name="email"
+    type="email"
+    value="email@email.com"
+    label="Email (autocomplete)"
+  />
+  <Input
+    color="#33b222"
+    placeholder="Placeholder text"
+    label="Click for Placeholder"
+  />
+  <Input color="#33b222" disabled label="Disabled" value="Can't touch this" />
+  <Input color="green" label="Outlined disabled" outlined disabled />
+  <ShortInput label="Short" />
+  <CustomInput hideUnderline label="No line, Yellow BG" />
+</>;
+```
+
+```js
+<Input color="#33b222" helperText='This is a text box, put stuff in here' label="OnINBOX"/>
+<Input color="#33b222" value={'@gmail.com'} errorText='Error! Does not compute!' label="OnINBOX"/>
+<Input color="#33b222" value={'@gmail.com'} errorText={null} label="No Error (yet)"/>
+<Input color="green" errorText={'Error outline input'} label="Outlined error" outlined/>
+```

package/src/components/Pagination/Pagination.jsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { ChevronLeft, ChevronRight } from '../icons';
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+
+const pagnationIconStyles = css`
+  vertical-align: middle;
+  opacity: ${(props) => (props.disabled ? 0.3 : 1)};
+`;
+
+const PageLeftIcon = styled(ChevronLeft)`
+  ${pagnationIconStyles}
+`;
+
+const PageRightIcon = styled(ChevronRight)`
+  ${pagnationIconStyles}
+`;
+
+const ActionIcon = ({ icon: Icon, disabled, ...rest }) => {
+  return (
+    <Button disabled={disabled} flatIcon {...rest}>
+      <Icon disabled={disabled} />
+    </Button>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  position: relative;
+  justify-content: ${(props) => (props.hideNavigation ? "flex-end" : "center")};
+  height: 50px;
+  align-items: center;
+`;
+
+const Navigation = styled.div`
+  display: flex;
+  margin: auto;
+  line-height: 2;
+`;
+
+const RowSelectContainer = styled.div`
+  width: 100px;
+`;
+
+const EmptyDiv = styled.div`
+  width: 100px;
+`;
+
+export const Pagination = ({
+  totalEntries,
+  nextPage,
+  previousPage,
+  staticPageSize,
+  setPageSize,
+  pageCount,
+  canNextPage,
+  canPreviousPage,
+  pageSize,
+  pageIndex,
+  pageSizeOptions,
+  locales = {},
+}) => {
+  const resultsStart = pageIndex * pageSize + 1;
+  const resultsEnd =
+    totalEntries < pageIndex * pageSize + pageSize
+      ? totalEntries
+      : pageIndex * pageSize + pageSize;
+
+  return (
+    <Container hideNavigation={Boolean(pageCount <= 1)}>
+      {!staticPageSize && <EmptyDiv />}
+      {pageCount > 1 && (
+        <Navigation>
+          <ActionIcon
+            icon={PageLeftIcon}
+            onClick={() => previousPage()}
+            disabled={!canPreviousPage}
+          />
+          <Typography number component="span">
+            {`${resultsStart}-${resultsEnd} of ${totalEntries}`}
+          </Typography>
+
+          <ActionIcon
+            icon={PageRightIcon}
+            onClick={() => nextPage()}
+            disabled={!canNextPage}
+          />
+        </Navigation>
+      )}
+      {!staticPageSize && (
+        <RowSelectContainer>
+          <Typography component="span">{locales["rows"] || "Rows:"}</Typography>
+          <select
+            style={{ marginLeft: "5px" }}
+            value={pageSize}
+            onChange={(e) => {
+              setPageSize(Number(e.target.value));
+            }}
+          >
+            {pageSizeOptions.map((pageSize) => (
+              <option key={pageSize} value={pageSize}>
+                {pageSize}
+              </option>
+            ))}
+          </select>
+        </RowSelectContainer>
+      )}
+    </Container>
+  );
+};

package/src/components/Pagination/index.ts

@@ -0,0 +1 @@
+export * from './Pagination';

package/src/components/Pagination/readme.md

@@ -0,0 +1,34 @@
+### Props
+
+|      Prop       | Default |                                                            Options |
+| :-------------: | :-----: | -----------------------------------------------------------------: |
+|  totalEntries   |         |                                 Total number of entries _Required_ |
+|    nextPage     |         |             Function, triggered on pressing next button _Required_ |
+|  previousPage   |         |         Function, triggered on pressing previous button _Required_ |
+| staticPageSize  |  false  |                            Disables selecting different page sizes |
+|   setPageSize   |         | Function, triggered when the page size selector changes _Required_ |
+|   canNextPage   |         |                        Boolean, Enables the next button _Required_ |
+| canPreviousPage |         |                    Boolean, Enables the previous button _Required_ |
+|    pageSize     |         |   Number, the number of rows / size of the current page _Required_ |
+|    pageIndex    |         |                           Number, the current page view _Required_ |
+| pageSizeOptions |         | Array, the different page size options for the selector _Required_ |
+|    pageCount    |         |                                            Number, Number of pages |
+|      color      |  #000   |                                                                    |
+
+### Examples
+
+```js
+<Pagination
+  totalEntries={47}
+  nextPage={() => console.log("next page")}
+  previousPage={() => console.log("previous page")}
+  setPageSize={size => console.log(`new page size: ${size}`)}
+  canNextPage={true}
+  canPreviousPage={true}
+  pageSize={10}
+  pageIndex={0}
+  pageCount={5}
+  pageSizeOptions={[10, 20, 30]}
+  color="#33b222"
+/>
+```

package/src/components/Radio/Radio.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { Typography } from '../Typography';
+
+const ripple = keyframes`
+  0% {
+    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.0);
+  }
+  50% { 
+    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
+  }
+  100% {
+    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);
+  }
+`;
+
+const Wrapper = styled.label`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: ${props => (props.disabled ? "default" : "pointer")};
+`;
+
+const Input = styled.input`
+  display: none;
+  :checked + span:before {
+    border-color: ${props => props.checkedColor || "#000"};
+    animation: ${ripple} 0.2s linear forwards;
+  }
+  :checked + span:after {
+    transform: scale(1);
+  }
+  /* Create the background for disabled status */
+  :disabled + span:before {
+    cursor: initial;
+    border-color: #ccc;
+  }
+  :checked:disabled + span:after {
+    cursor: initial;
+    background-color: #ccc;
+    border-color: #ccc;
+  }
+`;
+
+const CheckIndicator = styled.span`
+  position: relative;
+  display: inline-block;
+  height: 20px;
+  padding: 0 (20px + 10px);
+  margin-bottom: 0;
+  cursor: pointer;
+  vertical-align: bottom;
+  :before,
+  :after {
+    box-sizing: border-box;
+    position: absolute;
+    content: "";
+    border-radius: 50%;
+    transition: all 0.3s ease;
+    transition-property: transform, border-color;
+  }
+  /* The box */
+  :before {
+    width: 22px;
+    height: 22px;
+    border: 2px solid ${props => props.borderColor || "rgba(0, 0, 0, 0.54)"};
+  }
+  /* The check indicator */
+  :after {
+    content: "";
+    top: 6px;
+    left: 6px;
+    width: 10px;
+    height: 10px;
+    transform: scale(0);
+    background: ${props => props.checkedColor || "#000"};
+  }
+`;
+
+const Text = styled(Typography)`
+  margin-left: 30px;
+  margin-bottom: 1px;
+`;
+
+export const Radio = ({
+  color,
+  inputProps,
+  labelProps,
+  checked,
+  disabled,
+  onChange,
+  label,
+  checkProps,
+  borderColor,
+  name,
+  defaultChecked,
+  ...rest
+}) => {
+  return (
+    <Wrapper {...rest} disabled={disabled}>
+      <Input
+        checkedColor={color}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        onChange={onChange}
+        name={name}
+        {...inputProps}
+        type="radio"
+      />
+      <CheckIndicator
+        borderColor={borderColor}
+        checkedColor={color}
+        {...checkProps}
+      />
+      <Text component="span" color={disabled ? "#ccc" : "#333"} {...labelProps}>
+        {label}
+      </Text>
+    </Wrapper>
+  );
+};

package/src/components/Radio/index.ts

@@ -0,0 +1 @@
+export * from './Radio';