@redsift/design-system-legacy 8.0.1 → 8.0.2

package/src/components/Switch/Switch.jsx

@@ -1,130 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Typography } from '../Typography';
-
-const SwitchContainer = styled.div`
-  position: relative;
-  display: inline-block;
-  width: 32px;
-  height: 14px;
-`;
-
-const SwitchInput = styled.input`
-  display: none;
-  &:checked + span {
-    background-color: ${props =>
-      props.disabled
-        ? "rgba(0, 0, 0, 0.12)"
-        : props.color
-        ? props.color
-        : "#ccc"};
-    border-color: ${props =>
-      props.disabled
-        ? "rgba(0, 0, 0, 0.12)"
-        : props.color
-        ? props.color
-        : "#ccc"};
-  }
-  &:checked + span:before {
-    border-color: ${props =>
-      props.disabled
-        ? "rgba(0, 0, 0, 0.12)"
-        : props.color
-        ? props.color
-        : "#ccc"};
-    background-color: ${props => (props.disabled ? "#ccc" : "#fff")};
-    -webkit-transform: translateX(15px);
-    -ms-transform: translateX(15px);
-    transform: translateX(15px);
-    transition: all 0.3s ease;
-  }
-`;
-
-const SwitchSlider = styled.span`
-  border-radius: 14px;
-  position: absolute;
-  cursor: ${props => (props.disabled ? "default" : "pointer")};
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid;
-  background-color: ${props =>
-    props.disabled ? "rgba(0, 0, 0, 0.12)" : "#ccc"};
-  border-color: ${props => (props.disabled ? "rgba(0, 0, 0, 0.12)" : "#ccc")};
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-  &:before {
-    position: absolute;
-    content: "";
-    height: 20px;
-    width: 20px;
-    left: -3px;
-    bottom: -4px;
-    border: 1px solid;
-    background-color: ${props => (props.disabled ? "#ccc" : "#fff")};
-    border-color: ${props => (props.disabled ? "rgba(0, 0, 0, 0.12)" : "#ccc")};
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 50%;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  }
-`;
-
-const SwitchLabel = styled(Typography)`
-  margin-left: ${props => (props.labelPosition === "right" ? "15px" : "0px")};
-  margin-right: ${props => (props.labelPosition === "left" ? "15px" : "0px")};
-`;
-
-const Wrapper = styled.label`
-  display: flex;
-  align-items: center;
-  margin-left: 5px;
-  cursor: ${props => (props.disabled ? "default" : "pointer")};
-`;
-
-export const Switch = ({
-  label,
-  checked,
-  defaultChecked,
-  disabled,
-  id,
-  onChange,
-  inputProps,
-  labelProps,
-  sliderProps,
-  labelPosition = "right",
-  color,
-  ...rest
-}) => {
-  return (
-    <Wrapper {...rest} disabled={disabled} htmlFor={id}>
-      {labelPosition === "left" && (
-        <SwitchLabel labelPosition={labelPosition} {...labelProps}>
-          {label}
-        </SwitchLabel>
-      )}
-      <SwitchContainer>
-        <SwitchInput
-          id={id}
-          role="switch"
-          aria-checked={checked}
-          type="checkbox"
-          checked={checked}
-          defaultChecked={defaultChecked}
-          onChange={onChange}
-          {...inputProps}
-          color={color}
-          disabled={disabled}
-        />
-        <SwitchSlider color={color} disabled={disabled} {...sliderProps} />
-      </SwitchContainer>
-      {labelPosition === "right" && (
-        <SwitchLabel labelPosition={labelPosition} {...labelProps}>
-          {label}
-        </SwitchLabel>
-      )}
-    </Wrapper>
-  );
-};

package/src/components/Switch/index.ts

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

package/src/components/Switch/readme.md

@@ -1,55 +0,0 @@
-### Accessibility
-
-- Ensure both the label and id props are completed
-
-### Props
-
-|      Prop      | Default |                     Options |
-| :------------: | :-----: | --------------------------: |
-|     color      |  #ccc   |                       Color |
-|     label      |         |         string **Required** |
-|       id       |         |         string **Required** |
-|    checked     |  false  |                     Boolean |
-| defaultChecked |  false  |                     Boolean |
-|    disabled    |  false  |                     Boolean |
-|    onChange    |         |                    Function |
-|   inputProps   |         |   Props passed to the input |
-| labelPosition  | 'right' |             'right', 'left' |
-|   labelProps   |         |   Props passed to the label |
-|  sliderProps   |         |  Props passed to the slider |
-|    ...rest     |         | Props passed to the Wrapper |
-
-### Examples
-
-```js
-<div
-  style={{
-    display: "flex",
-    flexWrap: "wrap",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-evenly"
-  }}
->
-  <Switch label="Default" id="one" />
-  <Switch label="OnDMARC" defaultChecked id="ondmarc1" color="#02ac61" />
-  <Switch label="OnINBOX" defaultChecked id="oninbox1" color="#33b222" />
-  <Switch label="InGRAIN" defaultChecked id="ingrain1" color="#53C3EB" />
-  <Switch disabled label="Disabled" id="disabled1" />
-  <Switch disabled label="Disabled" defaultChecked id="disabled2" />
-</div>
-```
-
-```js
-<div
-  style={{
-    display: "flex",
-    flexWrap: "wrap",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-evenly"
-  }}
->
-  <Switch label="Default Left" labelPosition="left" id="left" />
-</div>
-```

package/src/components/Table/ExportCSVButton.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { CSVLink } from "react-csv";
-import styled from 'styled-components';
-
-import { ExportIcon } from '../icons';
-import { ActionIcon } from "./TableStyles";
-
-const StyledCSVLink = styled(CSVLink)`
-  &,
-  &:hover {
-    text-decoration: none;
-  }
-`;
-
-export const ExportCSVButton = ({
-  locale,
-  data,
-  filename,
-  headers,
-  hoverColor,
-  activeColor,
-  ...rest
-}) => {
-  return (
-    <StyledCSVLink data={data} filename={filename} headers={headers} {...rest}>
-      <ActionIcon
-        label={locale("export", "Export")}
-        icon={() => <ExportIcon width={18} />}
-        hoverColor={hoverColor}
-        activeColor={activeColor}
-      />
-    </StyledCSVLink>
-  );
-};