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

package/src/components/Switch/Switch.jsx

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

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

package/src/components/Switch/readme.md

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

@@ -0,0 +1,34 @@
+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>
+  );
+};