alicia-design-system 1.0.1 → 1.2.0

package/index.ts

@@ -2,6 +2,7 @@ export * from "./src/legacy_agos/common";
 export * from "./src/legacy_agos/form";
 export * from "./src/legacy_agos/layout";
 export * from "./src/legacy_agos/table";
+export * from "./src/styles/index";
 export * from "./src/alicia/common/Buttons";
 export * from "./src/alicia/common/Checkbox";
 export * from "./src/alicia/common/DateInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "alicia-design-system",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "private": false,
   "dependencies": {
     "@chakra-ui/icons": "^2.0.17",

package/src/types/index.ts

@@ -1,10 +1,3 @@
 // Modules
 export * from "./general";
-
-export * from "legacy_agos/form/types";
-export * from "legacy_agos/form/SelectDropdown/types";
-export * from "legacy_agos/common/types";
-export * from "legacy_agos/table/types";
-export * from "legacy_agos/typography/types";
-
 export * from "styles/types";

package/src/legacy_agos/common/Accordion/Accordion.stories.tsx

@@ -1,13 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Accordion } from "./Accordion";
-
-export default {
-  title: "Agos/Components/Accordion",
-  component: Accordion,
-} as ComponentMeta<typeof Accordion>;
-
-const Template: ComponentStory<typeof Accordion> = (args) => (
-  <Accordion {...args} />
-);
-
-export const Primary = Template.bind({});

package/src/legacy_agos/common/Accordion/Accordion.styled.ts

@@ -1,41 +0,0 @@
-import styled from "styled-components";
-
-import { ReactComponent as ArrowDown } from "assets/vectors/arrow-down.svg";
-import { ReactComponent as ArrowRight } from "assets/vectors/arrow-right.svg";
-
-export const Accordion = styled.div`
-  box-shadow: ${({ theme }) => theme.shadows.overlay};
-`;
-
-export const IconDown = styled(ArrowDown)`
-  width: 26px;
-  height: 26px;
-  fill: ${({ theme }) => theme.colors.green};
-`;
-
-export const IconRight = styled(ArrowRight)`
-  width: 26px;
-  height: 26px;
-  fill: ${({ theme }) => theme.colors.green};
-`;
-
-export const AccordionItem = styled.div``;
-
-export const AccordionHeading = styled.div`
-  border-bottom: 1px solid ${({ theme }) => theme.colors.gray.light};
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  font-family: ${({ theme }) => theme.fonts.notoSans};
-  padding: 16px;
-
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.gray.light};
-  }
-`;
-
-export const AccordionContent = styled.div`
-  font-family: ${({ theme }) => theme.fonts?.notoSans};
-  font-size: 12px;
-  padding: 16px;
-`;

package/src/legacy_agos/common/Accordion/Accordion.tsx

@@ -1,58 +0,0 @@
-import React, { useState } from "react";
-
-import * as Styled from "./Accordion.styled";
-
-export const Accordion: React.FC = () => {
-  const [openItem, setOpenItem] = useState<number[]>([]);
-
-  const accordionData = [
-    {
-      id: 1,
-      title: "Heading 1",
-      content: `Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-              Quibusdam, sapiente!`,
-    },
-    {
-      id: 2,
-      title: "Heading 2",
-      content: `Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-              Quibusdam, sapiente!`,
-    },
-    {
-      id: 3,
-      title: "Heading 3",
-      content: `Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-              Quibusdam, sapiente!`,
-    },
-  ];
-
-  const toggleAccordion = (index: number) => {
-    if (openItem.includes(index)) {
-      setOpenItem(openItem.filter((i) => i !== index));
-    } else {
-      setOpenItem(openItem.concat(index));
-    }
-  };
-
-  return (
-    <>
-      <Styled.Accordion>
-        {accordionData.map(({ title, content, id }, i) => (
-          <Styled.AccordionItem key={id}>
-            <Styled.AccordionHeading onClick={() => toggleAccordion(i)}>
-              {title}
-              {openItem.includes(i) ? (
-                <Styled.IconDown />
-              ) : (
-                <Styled.IconRight />
-              )}
-            </Styled.AccordionHeading>
-            {openItem.includes(i) && (
-              <Styled.AccordionContent>{content}</Styled.AccordionContent>
-            )}
-          </Styled.AccordionItem>
-        ))}
-      </Styled.Accordion>
-    </>
-  );
-};

package/src/legacy_agos/common/Accordion/index.ts

@@ -1 +0,0 @@
-export { Accordion } from "./Accordion";

package/src/legacy_agos/common/Button/Button.stories.tsx

@@ -1,96 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import { Button } from "./Button";
-
-import { ReactComponent as AddIcon } from "assets/vectors/action-menu/add.svg";
-import { ReactComponent as ArrowLeftIcon } from "assets/vectors/arrow-left.svg";
-import { ReactComponent as ArrowRightIcon } from "assets/vectors/arrow-right.svg";
-import { ReactComponent as EditIcon } from "assets/vectors/action-menu/edit.svg";
-import { ReactComponent as CheckmarkIcon } from "assets/vectors/checkmark.svg";
-import { ReactComponent as SearchIcon } from "assets/vectors/search.svg";
-
-const icon = {
-  Empty: null,
-  Add: <AddIcon />,
-  ArrowLeft: <ArrowLeftIcon />,
-  ArrowRight: <ArrowRightIcon />,
-  Edit: <EditIcon />,
-  Checkmark: <CheckmarkIcon />,
-  Search: <SearchIcon />,
-};
-
-export default {
-  title: "Agos/Components/Button",
-  component: Button,
-  argTypes: {
-    disabled: {
-      control: {
-        type: "boolean",
-      },
-      defaultValue: false,
-    },
-    icon: {
-      options: Object.keys(icon),
-      mapping: icon,
-      control: {
-        type: "select",
-      },
-    },
-    isLoading: {
-      control: {
-        type: "boolean",
-      },
-      defaultValue: false,
-    },
-    as: {
-      table: {
-        disable: true,
-      },
-    },
-    size: {
-      table: {
-        disable: true,
-      },
-    },
-    to: {
-      table: {
-        disable: true,
-      },
-    },
-    urlTarget: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof Button>;
-
-const Template: ComponentStory<typeof Button> = ({ ...args }) => {
-  return <Button {...args} />;
-};
-
-export const Primary = Template.bind({});
-export const Secondary = Template.bind({});
-export const Tertiary = Template.bind({});
-export const Warning = Template.bind({});
-
-Primary.args = {
-  children: "Primary",
-  variant: "primary",
-  onChange: () => ({ variant: "primary" }),
-};
-
-Secondary.args = {
-  children: "Secondary",
-  variant: "secondary",
-};
-
-Tertiary.args = {
-  children: "Tertiary",
-  variant: "tertiary",
-};
-
-Warning.args = {
-  children: "Warning",
-  variant: "warning",
-};

package/src/legacy_agos/common/Button/Button.styled.ts

@@ -1,206 +0,0 @@
-import styled, { css, keyframes } from "styled-components";
-import { media } from "styles/utils";
-
-import { ButtonProps } from "./types";
-
-export const buttonLoaderAnimation = keyframes`
-  0%, 80%, 100% {
-    transform: scale(0);
-  } 40% {
-    transform: scale(1.0);
-  }
-`;
-
-export const StyledButtonLoader = styled.div`
-  width: 70px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & > div {
-    width: 6px;
-    height: 6px;
-    margin-right: 3px;
-    background-color: ${({ theme }) => theme.colors?.white};
-    border-radius: 100%;
-    animation: ${buttonLoaderAnimation} 1.4s infinite ease-in-out both;
-
-    &:nth-child(1) {
-      animation-delay: -0.32s;
-    }
-
-    &:nth-child(2) {
-      animation-delay: -0.16s;
-    }
-  }
-`;
-
-export const ButtonIcon = styled.div`
-  margin: 0 8px 0 0;
-  display: flex;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-`;
-
-export const StyledButton = styled.button<ButtonProps>`
-  color: ${({ theme }) => theme.colors?.white};
-  background-color: ${({ theme }) => theme.colors?.primary};
-  font-family: ${({ theme }) => theme.fonts?.notoSans};
-  font-size: 16px;
-  font-weight: 600;
-  width: auto;
-  height: 48px;
-  padding: 12px 16px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  line-height: normal;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  outline: none;
-  border-radius: 4px;
-  border: 0;
-  transition: background-color 300ms, color 300ms;
-
-  svg {
-    fill: ${({ theme }) => theme.colors?.white};
-    max-width: 24px;
-    max-height: 24px;
-  }
-
-  &:hover {
-    color: ${({ theme }) => theme.colors?.white};
-    background-color: ${({ theme }) => theme.colors?.primaryHover};
-  }
-
-  &:focus {
-    background-color: ${({ theme }) => theme.colors?.primaryHover};
-  }
-
-  ${media.desktop`
-    transition: background-color .2s, border-color .2s;
-
-    + button {
-      margin: 0 0 0 8px;
-    }
-  `}
-
-  ${({ iconOnly }) =>
-    iconOnly &&
-    css`
-      width: 48px;
-
-      ${ButtonIcon} {
-        margin: 0;
-      }
-    `}
-
-  ${({ iconOnlyOnMobile }) =>
-    iconOnlyOnMobile &&
-    css`
-      width: 48px;
-
-      ${ButtonIcon} {
-        margin: 0;
-      }
-
-      > span {
-        display: none;
-      }
-
-      ${media.tablet`
-      width: auto;
-
-      > span {
-        display: block;
-      }
-    `}
-    `}
-
-  ${({ iconPosition }) =>
-    iconPosition === "right" &&
-    css<ButtonProps>`
-      flex-direction: row-reverse;
-
-      ${ButtonIcon} {
-        margin: 0 0 0 8px;
-
-        ${({ iconOnlyOnMobile }) =>
-          iconOnlyOnMobile &&
-          css`
-            margin: 0;
-
-            ${media.tablet`
-          margin: 0 0 0 8px;
-        `}
-          `}
-      }
-    `}
-
-  ${({ variant }) =>
-    variant === "secondary" &&
-    css`
-      background-color: ${({ theme }) => theme.colors?.secondary};
-
-      &:hover {
-        background-color: ${({ theme }) => theme.colors?.secondaryHover};
-      }
-    `}
-
-  ${({ variant }) =>
-    variant === "tertiary" &&
-    css`
-      background-color: ${({ theme }) => theme.colors?.gray};
-
-      &:hover {
-        background-color: ${({ theme }) => theme.colors?.gray.light};
-      }
-    `}
-
-  ${({ variant }) =>
-    variant === "warning" &&
-    css`
-      background-color: ${({ theme }) => theme.colors?.red};
-    `}
-
-  ${({ size }) =>
-    size === "auto" &&
-    css`
-      width: auto;
-    `}
-
-  ${({ isLoading }) =>
-    isLoading &&
-    css`
-      cursor: not-allowed;
-
-      &:hover,
-      &:focus {
-        background-color: ${({ theme }) => theme.colors?.black.light};
-      }
-    `}
-
-  ${({ disabled }) =>
-    disabled &&
-    css`
-    color: ${({ theme }) => theme.colors?.white}};
-    background-color: ${({ theme }) => theme.colors?.gray};
-    cursor: not-allowed;
-
-    &:focus {
-      background-color: ${({ theme }) => theme.colors?.gray};
-    }
-
-    ${media.desktop`
-      transition: none;
-
-      &:hover {
-        background-color: ${({ theme }) => theme.colors?.gray};;
-      }
-    `}
-  `};
-`;

package/src/legacy_agos/common/Button/Button.tsx

@@ -1,94 +0,0 @@
-import * as React from "react";
-import { Link } from "react-router-dom";
-
-import { ButtonProps } from "./types";
-import { StyledButton, StyledButtonLoader, ButtonIcon } from "./Button.styled";
-
-const ButtonLoader = () => (
-  <StyledButtonLoader>
-    <div />
-    <div />
-    <div />
-  </StyledButtonLoader>
-);
-
-const ButtonContent: React.FC<ButtonProps> = ({
-  children,
-  icon,
-  isLoading,
-}) => (
-  <>
-    {isLoading ? (
-      <ButtonLoader />
-    ) : (
-      <>
-        {icon && <ButtonIcon>{icon}</ButtonIcon>}
-        <span>{children}</span>
-      </>
-    )}
-  </>
-);
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      children,
-      href,
-      icon,
-      iconPosition = "left",
-      isLoading,
-      onClick,
-      to,
-      urlTarget,
-      disabled,
-      variant,
-      iconOnlyOnMobile,
-      ...otherProps
-    },
-    ref
-  ) => {
-    const styledButtonProps = {
-      disabled,
-      iconOnly: !children && icon,
-      iconOnlyOnMobile,
-      iconPosition,
-      isLoading,
-      variant,
-      ref,
-    };
-
-    const buttonContentProps = {
-      children,
-      icon,
-      isLoading,
-    };
-
-    if (href) {
-      return (
-        <StyledButton
-          as="a"
-          href={href}
-          target={`_${urlTarget ?? "self"}`}
-          {...styledButtonProps}
-          {...otherProps}
-        >
-          <ButtonContent {...buttonContentProps} />
-        </StyledButton>
-      );
-    }
-
-    if (to) {
-      return (
-        <StyledButton as={Link} to={to} {...styledButtonProps} {...otherProps}>
-          <ButtonContent {...buttonContentProps} />
-        </StyledButton>
-      );
-    }
-
-    return (
-      <StyledButton onClick={onClick} {...styledButtonProps} {...otherProps}>
-        <ButtonContent {...buttonContentProps} />
-      </StyledButton>
-    );
-  }
-);

package/src/legacy_agos/common/Button/index.ts

@@ -1 +0,0 @@
-export { Button as AgosButton } from "./Button";

package/src/legacy_agos/common/Button/types.ts

@@ -1,34 +0,0 @@
-import * as i from "types";
-
-export type ButtonType = React.ButtonHTMLAttributes<HTMLButtonElement> &
-  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    as?: any;
-    children?: React.ReactNode;
-    disabled?: boolean;
-    href?: string;
-    iconOnly?: boolean;
-    iconOnlyOnMobile?: boolean;
-    isLoading?: boolean;
-    onClick?: i.OnClick<HTMLButtonElement>;
-    ref?: React.RefObject<HTMLButtonElement>;
-    to?: string;
-    urlTarget?: "blank" | "self" | "parent" | "top";
-  };
-
-export type IconType = {
-  icon?: React.ReactNode;
-  iconPosition?: "left" | "right";
-};
-
-export type ButtonVariantsType = {
-  variant?: "primary" | "secondary" | "tertiary" | "warning";
-};
-
-export type ButtonSizeType = {
-  size?: "auto";
-};
-
-export type ButtonProps = ButtonType &
-  ButtonSizeType &
-  ButtonVariantsType &
-  IconType;

package/src/legacy_agos/common/ConfirmModal/ConfirmModal.stories.tsx

@@ -1,28 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ConfirmModal } from "./ConfirmModal";
-
-export default {
-  title: "Agos/Components/ConfirmModal",
-  component: ConfirmModal,
-} as ComponentMeta<typeof ConfirmModal>;
-
-const Template: ComponentStory<typeof ConfirmModal> = (args) => (
-  <ConfirmModal {...args} />
-);
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  closeModal: () => {
-    console.log("Close");
-  },
-  closeButtonVariant: "warning",
-  closeText: "Close",
-  confirmButtonVariant: "warning",
-  confirmText: "Confirm",
-  text: "Do you want to confirm this action?",
-  title: "Confirm this action",
-  onConfirm: () => {
-    console.log("Confirm");
-  },
-};

package/src/legacy_agos/common/ConfirmModal/ConfirmModal.styled.ts

@@ -1,15 +0,0 @@
-import styled from "styled-components";
-
-export const ModalFooter = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  padding: 24px;
-
-  & > button {
-    + button {
-      margin: 0 0 0 8px;
-    }
-  }
-`;

package/src/legacy_agos/common/ConfirmModal/ConfirmModal.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-
-import { Text } from "legacy_agos/typography/Text";
-import { AgosButton as Button, Modal } from "legacy_agos/common";
-
-export const ConfirmModal: React.FC<ConfirmModalProps> = ({
-  closeButtonVariant,
-  closeModal,
-  closeText,
-  confirmButtonVariant,
-  confirmText,
-  onConfirm,
-  text,
-  title,
-}) => {
-  return (
-    <Modal.Container
-      onClose={closeModal}
-      title={title ?? "Confirm"}
-      withoutCloseButton
-    >
-      <Modal.Content>
-        <Text>{text}</Text>
-      </Modal.Content>
-      <Modal.Footer>
-        <Button
-          onClick={closeModal}
-          variant={closeButtonVariant ?? "secondary"}
-        >
-          {closeText ?? "Cancel"}
-        </Button>
-        <Button onClick={onConfirm} variant={confirmButtonVariant ?? "primary"}>
-          {confirmText ?? "Confirm"}
-        </Button>
-      </Modal.Footer>
-    </Modal.Container>
-  );
-};
-
-type ConfirmModalProps = {
-  closeButtonVariant?: "warning" | "tertiary";
-  closeModal: () => void;
-  closeText?: string;
-  confirmButtonVariant?: "warning" | "secondary";
-  confirmText?: string;
-  onConfirm: () => void;
-  text: string;
-  title?: string;
-};

package/src/legacy_agos/common/ConfirmModal/index.ts

@@ -1 +0,0 @@
-export { ConfirmModal } from "./ConfirmModal";