@redsift/design-system-legacy 8.0.1 → 8.0.2

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

@@ -1,188 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,98 +0,0 @@
-// @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

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

package/src/components/Input/readme.md

@@ -1,82 +0,0 @@
-### 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

@@ -1,111 +0,0 @@
-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

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

package/src/components/Pagination/readme.md

@@ -1,34 +0,0 @@
-### 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

@@ -1,121 +0,0 @@
-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

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