@redsift/design-system-legacy 8.0.1 → 8.0.3

package/src/components/Card/Card.jsx

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

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

package/src/components/Card/readme.md

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

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

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

package/src/components/Checkbox/Checkbox.jsx

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

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

package/src/components/Checkbox/readme.md

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

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

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

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

package/src/components/CheckboxTree/readme.md

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

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

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

package/src/components/Input/Input.jsx

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