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

package/src/components/Card/Card.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import styled from 'styled-components';
+
+const StyledCard = styled.section`
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-sizing: border-box;
+  margin-bottom: 20px;
+  padding: ${(props) => (props.noPadding ? "" : "1.875rem")};
+  width: 100%;
+`;
+
+export const Card = ({ children, className, component, noPadding, ...otherProps }) => {
+  return (
+    <StyledCard
+      {...otherProps}
+      noPadding={noPadding}
+      as={component}
+      className={className}
+    >
+      {children}
+    </StyledCard>
+  );
+};
+
+Card.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  component: PropTypes.string,
+  noPadding: PropTypes.bool,
+};

package/src/components/Card/index.ts

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

package/src/components/Card/readme.md

@@ -0,0 +1,54 @@
+### Accessibility
+
+### Props
+
+|   Prop    |  Default  |                           Options |
+| :-------: | :-------: | --------------------------------: |
+| component | 'section' | any html element including: `div` |
+| noPadding |           |                   Removes padding |
+| children  |           |                     Card contents |
+|  ...rest  |           |       Props passed to the Wrapper |
+
+### Examples
+
+Common case
+
+```js
+<div style={{ padding: "10px", backgroundColor: "rgba(0,0,0,.05)" }}>
+  <Card>Default Card</Card>
+</div>
+```
+
+### Subcomponents
+
+To facilitate the composition of Cards, the following components are defined:
+
+- CardHeader
+
+|   Prop    | Default |         Options |
+| :-------: | :-----: | --------------: |
+| children  |         |   Card contents |
+| className |         | Container class |
+|   title   |         |      Card title |
+
+#### NOTE
+
+This component is for the most common situation:
+
+- Title with h2
+- Optional elements in the top right of the card
+
+Using CardHeader
+
+```js
+import CardHeader from "../CardHeader/CardHeader";
+
+<div style={{ padding: "10px", backgroundColor: "rgba(0,0,0,.05)" }}>
+  <Card>
+    <CardHeader title="Card Header">
+      <div>Some icons here</div>
+    </CardHeader>
+    <div>Some content</div>
+  </Card>
+</div>;
+```

package/src/components/CardHeader/CardHeader.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import styled from 'styled-components';
+import { Typography } from '../Typography';
+
+const StyledContainer = styled.section`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+`;
+
+const StyledTitle = styled(Typography)`
+  margin: 0;
+  padding: 0;
+`;
+
+const StyledContent = styled.div`
+  align-items: flex-end;
+  display: flex;
+  gap: 10px;
+`;
+
+export const CardHeader = ({ children, className, title, ...otherProps }) => {
+  return (
+    <StyledContainer className={className} {...otherProps}>
+      {title && (
+        <StyledTitle as="h2" size="h2">
+          {title}
+        </StyledTitle>
+      )}
+      <StyledContent>{children}</StyledContent>
+    </StyledContainer>
+  );
+};
+
+CardHeader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  title: PropTypes.string,
+};

package/src/components/CardHeader/index.ts

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

package/src/components/Checkbox/Checkbox.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Typography } from '../Typography';
+
+const Wrapper = styled.label`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: ${props => (props.disabled ? "default" : "pointer")};
+`;
+
+const Input = styled.input`
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
+  /* Create the background for checked status */
+  :checked + span {
+    background-color: ${props => props.checkedColor || "#000"};
+    border-color: ${props => props.checkedColor || "#000"};
+  }
+  /* Show the checkmark when checked */
+  :checked + span:after {
+    display: block;
+  }
+  /* Create the background for disabled status */
+  :disabled + span {
+    cursor: initial;
+    border-color: #ccc;
+  }
+  :checked:disabled + span {
+    cursor: initial;
+    background-color: #ccc;
+    border-color: #ccc;
+  }
+`;
+
+const CheckIndicator = styled.span`
+  /* Create the box */
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: #fff;
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  border: solid 2px;
+  border-color: ${props => props.borderColor || "rgba(0, 0, 0 , .54)"};
+  border-radius: 2px;
+  width: 18px;
+  height: 18px;
+  vertical-align: top;
+  transition: border-color 0.2s, background-color 0.2s;
+
+  /* Create the checkmark */
+  :after {
+    content: "";
+    position: absolute;
+    display: none;
+    top: ${props => (props.dashed ? "6px" : "0px")};
+    left: ${props => (props.dashed ? "2px" : "4px")};
+    width: ${props => (props.dashed ? "10px" : "5px")};
+    height: 10px;
+    border: solid white;
+    border-width: ${props =>
+      props.dashed ? "2px 0px 0px 0px" : "0 2px 2px 0"};
+    -webkit-transform: ${props => (props.dashed ? "" : "rotate(45deg)")};
+    -ms-transform: ${props => (props.dashed ? "" : "rotate(45deg)")};
+    transform: ${props => (props.dashed ? "" : "rotate(45deg)")};
+  }
+`;
+
+const Text = styled(Typography)`
+  margin-left: ${props => (props.hideLabel ? "0px" : "10px")};
+`;
+
+export const Checkbox = props => {
+  const {
+    color,
+    inputProps,
+    labelProps,
+    checked,
+    defaultChecked,
+    disabled,
+    onChange,
+    label,
+    checkProps,
+    borderColor,
+    hideLabel,
+    dashed,
+    ...rest
+  } = props;
+  return (
+    <Wrapper {...rest} disabled={disabled}>
+      <Input
+        checkedColor={color}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        onChange={onChange}
+        aria-label={label}
+        {...inputProps}
+        type="checkbox"
+      />
+      <CheckIndicator
+        dashed={dashed}
+        borderColor={borderColor}
+        checkedColor={color}
+        {...checkProps}
+      />
+      <Text
+        hideLabel={hideLabel}
+        component="span"
+        color={disabled ? "#ccc" : "#333"}
+        {...labelProps}
+      >
+        {!hideLabel && label}
+      </Text>
+    </Wrapper>
+  );
+};

package/src/components/Checkbox/index.ts

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

package/src/components/Checkbox/readme.md

@@ -0,0 +1,54 @@
+### Accessibility
+
+- Ensure label is provided
+
+### Props
+
+|      Prop      |       Default       |                                              Options |
+| :------------: | :-----------------: | ---------------------------------------------------: |
+|     color      |        #000         |                                                Color |
+|  borderColor   | rgba(0, 0, 0 , .54) |                                                Color |
+|     label      |                     |                                  string **Required** |
+|    checked     |        false        |                                              Boolean |
+|     dashed     |        false        | Shows a dash instead of a check when checked is true |
+| defaultChecked |        false        |                                              Boolean |
+|    disabled    |        false        |                                              Boolean |
+|    onChange    |                     |                                             Function |
+|   checkProps   |                     |                  Passes props to the Check Indicator |
+|   inputProps   |                     |                            Passes props to the Input |
+|    ...rest     |                     |                          Passes props to the Wrapper |
+
+### Examples
+
+```js
+<div
+  style={{
+    display: "flex",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-evenly"
+  }}
+>
+  <Checkbox label="Default" />
+  <Checkbox color="#02ac61" borderColor="#02ac61" label="OnDMARC" />
+  <Checkbox color="#33b222" borderColor="#33b222" label="OnINBOX" />
+
+  <Checkbox color="#53C3EB" borderColor="#53C3EB" label="InGRAIN" />
+  <Checkbox color="#02ac61" borderColor="#02ac61" disabled label="Disabled" />
+  <Checkbox
+    color="#02ac61"
+    borderColor="#02ac61"
+    checked
+    disabled
+    label="Disabled"
+  />
+  <Checkbox
+    color="#33b222"
+    borderColor="#33b222"
+    label="Dashed"
+    dashed
+    defaultChecked={true}
+  />
+</div>
+```

package/src/components/CheckboxTree/CheckboxTree.jsx

@@ -0,0 +1,167 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { Checkbox } from '../Checkbox';
+import * as Styled from "./CheckboxTree.styles";
+
+// Types
+//
+// export type CheckboxTreeNode = {
+//     name: string;
+//     branches?: CheckboxTreeNode[];
+//     key?: string;
+// };
+//
+// type CheckedNodes = Record<string, string>;
+//
+// type TreeNodeProps = {
+//     node: CheckboxTreeNode;
+//     onSelectNode: (node: CheckboxTreeNode) => void;
+//     checkedNodes: CheckedNodes;
+//     isDisabled?: boolean;
+// };
+//
+// type CheckboxTreeProps = {
+//     data: CheckboxTreeNode[];
+//     onChange: (checkedNodesList: string[]) => void;
+//     initialChecked?: Boolean;
+// };
+
+/*
+type TAddKeysToNodeParams = {
+    node: CheckboxTreeNode;
+    nodeIndex: number;
+    rootKey?: string;
+};
+*/
+
+export const addKeysToNode = ({ node, nodeIndex, rootKey }) => {
+  const key = rootKey ? `${rootKey}.${nodeIndex}` : String(nodeIndex);
+  return {
+    ...node,
+    key,
+    branches: (node.branches || []).map((branchNode, branchNodeIndex) =>
+      addKeysToNode({
+        node: branchNode,
+        nodeIndex: branchNodeIndex,
+        rootKey: key,
+      })
+    ),
+  };
+};
+
+/*
+type TUpdateNodesParams = {
+    nodes: CheckboxTreeNode[];
+    checkedNds: CheckedNodes;
+    addChildren: boolean;
+}
+*/
+
+export const updateNodes = ({ nodes, checkedNds, addChildren }) => {
+  let newCheckedNodes = { ...checkedNds };
+  nodes.forEach((node) => {
+    if (addChildren) {
+      newCheckedNodes[node.key] = node.name;
+    } else {
+      delete newCheckedNodes[node.key];
+    }
+    if (node.branches && node.branches.length > 0) {
+      newCheckedNodes = updateNodes({
+        nodes: node.branches,
+        checkedNds: newCheckedNodes,
+        addChildren,
+      });
+    }
+  });
+  return newCheckedNodes;
+};
+
+// TreeNode Component
+const TreeNode = ({ node, onSelectNode, checkedNodes, isDisabled }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const isChecked = Boolean(checkedNodes[node.key]);
+  const hasBranches = Boolean(node.branches && node.branches.length > 0);
+  const renderCheckboxRow = () => (
+    <Styled.ListRow>
+      <Checkbox
+        checked={isChecked}
+        onChange={() => onSelectNode(node)}
+        disabled={isDisabled}
+      />
+      <span>{node.name}</span>
+    </Styled.ListRow>
+  );
+  const renderNodeRow = () => (
+    <>
+      <Styled.ListRow onClick={toggleIsOpen}>
+        {node.branches && <Styled.Arrow data-open={isOpen} />}
+        <Checkbox
+          checked={isChecked}
+          onChange={() => onSelectNode(node)}
+          disabled={isDisabled}
+        />
+        <span>{node.name}</span>
+      </Styled.ListRow>
+      <Styled.ListDropdown data-open={isOpen}>
+        {(node.branches || []).map((branchNode) => (
+          <TreeNode
+            key={`nodeTree.${branchNode.key}.${branchNode.name}`}
+            node={branchNode}
+            onSelectNode={onSelectNode}
+            checkedNodes={checkedNodes}
+            isDisabled={isDisabled || isChecked}
+          />
+        ))}
+      </Styled.ListDropdown>
+    </>
+  );
+  return <div>{hasBranches ? renderNodeRow() : renderCheckboxRow()}</div>;
+};
+
+// CheckboxTree Component
+export const CheckboxTree = ({ data, onChange, initialChecked }) => {
+  const [checkedNodes, setCheckedNodes] = useState({});
+
+  const parsedNodes = useMemo(() => {
+    return data.map((node, nodeIndex) => addKeysToNode({ node, nodeIndex }));
+  }, [data]);
+
+  useEffect(() => {
+    if (initialChecked) {
+      const newCheckedNodes = updateNodes({
+        nodes: parsedNodes,
+        checkedNds: {},
+        addChildren: true,
+      });
+      setCheckedNodes(newCheckedNodes);
+      if (onChange) {
+        onChange(Object.values(newCheckedNodes));
+      }
+    }
+  }, [initialChecked, parsedNodes]);
+
+  const onSelectNode = (node) => {
+    const newCheckedNodes = updateNodes({
+      nodes: [node],
+      checkedNds: checkedNodes,
+      addChildren: Boolean(!checkedNodes[node.key]),
+    });
+    setCheckedNodes(newCheckedNodes);
+    if (onChange) {
+      onChange(Object.values(newCheckedNodes));
+    }
+  };
+
+  return (
+    <Styled.Container>
+      {parsedNodes.map((node) => (
+        <TreeNode
+          key={`nodeTree.${node.key}.${node.name}`}
+          node={node}
+          onSelectNode={onSelectNode}
+          checkedNodes={checkedNodes}
+        />
+      ))}
+    </Styled.Container>
+  );
+};

package/src/components/CheckboxTree/CheckboxTree.styles.ts

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+export const Container = styled.div``;
+
+export const ListRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 16px;
+`;
+
+export const ListDropdown = styled.div`
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: all 0.3s;
+
+  padding: 0;
+
+  &[data-open="true"] {
+    opacity: 1;
+    height: auto;
+    padding-left: 16px;
+  }
+`;
+
+export const Arrow = styled.div`
+  width: 0;
+  height: 0;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+
+  border-left: 6px solid #000;
+
+  transform: rotate(0deg);
+  transition: all 0.2s;
+
+  margin-right: 12px;
+
+  &[data-open="true"] {
+    transform: rotate(90deg);
+  }
+
+  &,
+  & ~ span {
+    cursor: pointer;
+  }
+`;

package/src/components/CheckboxTree/index.ts

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

package/src/components/CheckboxTree/readme.md

@@ -0,0 +1,60 @@
+### General
+
+- When a node is selected, all its children are selected.
+- Can be used as a checkbox list.
+
+### Props
+
+|      Prop      | Default |                                                Options |
+| :------------: | :-----: | -----------------------------------------------------: |
+|      data      |         |                           CheckboxTreeNode[]. Required |
+|    onChange    |         | Function, triggered on pressing any checkbox. Required |
+| initialChecked |         |                                All boxes start checked |
+
+### Types
+
+```md
+type TCheckboxTreeNode = { name: string; branches?: TCheckboxTreeNode[]; key?: string; };
+
+type TCheckedNodes = Record<string, string>;
+
+type TTreeNodeProps = { node: CheckboxTreeNode; onSelectNode: (node: CheckboxTreeNode) => void; checkedNodes:
+CheckedNodes; isDisabled?: boolean; };
+
+type TCheckboxTreeProps = { data: CheckboxTreeNode[]; onChange: (checkedNodesList: string[]) => void; initialChecked?:
+Boolean; };
+```
+
+### Examples
+
+```js
+const data = [
+  {
+    name: "domain.com",
+    branches: [
+      { name: "subdomain.domain.com" },
+      {
+        name: "otherSubdomain.domain.com",
+        branches: [{ name: "otherSubdomain.domain.com/about" }],
+      },
+    ],
+  },
+  { name: "fakeDomain.com" },
+  { name: "error.com" },
+];
+const onChange = (checkedNodesList) =>
+  console.log("CheckboxTree =>", checkedNodesList);
+
+<div
+  style={{
+    display: "flex",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-evenly",
+  }}
+>
+  <CheckboxTree data={data} onChange={onChange} />
+  <CheckboxTree data={data} onChange={onChange} initialChecked />
+</div>;
+```

package/src/components/IconContainer/IconContainer.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import PropTypes from 'prop-types';
+
+const StyledIconContainer = styled.div`
+  ${({ fill = "#000000", size = '24px' }) => {
+    return css`
+      display: flex;
+      fill: ${fill };
+      height: ${size};
+      width: ${size};
+      align-items: center;
+      justify-content: center;
+
+      svg,
+      img {
+        width: 100%;
+        height: 100%;
+        margin: 0 !important;
+        padding: 0;
+      }
+      svg {
+        .stroke {
+          stroke: ${fill };
+        }
+        .fill {
+          fill: ${fill };
+        }
+      }
+    `;
+  }}
+`;
+
+export const IconContainer = ({ children, className, size, fill }) => {
+  return (
+    <StyledIconContainer className={className} fill={fill} size={size}>
+      {children}
+    </StyledIconContainer>
+  );
+};
+
+export const IconContainerPropTypes = {
+  className: PropTypes.string,
+  fill: PropTypes.string,
+  size: PropTypes.string,
+};
+
+IconContainer.propTypes = {
+  ...IconContainerPropTypes,
+  children: PropTypes.node.isRequired,
+};

package/src/components/IconContainer/index.ts

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

package/src/components/Input/Input.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { OutlineInput } from "./OutlineInput/OutlineInput";
+import { RegularInput } from "./RegularInput/RegularInput";
+
+export const Input = ({ color, label, errorText, placeholder, outlined, ...rest }) =>
+  outlined ? (
+    <OutlineInput
+      placeholder={placeholder}
+      label={label}
+      errorText={errorText}
+      color={color}
+      {...rest}
+    />
+  ) : (
+    <RegularInput
+      placeholder={placeholder}
+      label={label}
+      errorText={errorText}
+      color={color}
+      hideUnderline={rest.hideUnderline}
+      helperText={rest.helperText}
+      leftIcon={rest.leftIcon}
+      rightIcon={rest.rightIcon}
+      showClear={rest.showClear}
+      {...rest}
+    />
+  );