@soul-refiner/design-system 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {

package/src/components/actions/button/button.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { Styles } from 'common';
-import { Box, P } from 'components';
+import { P } from 'components';
+import { Box } from '../../atoms/box/box';
 import { ChevronDown, ChevronUp } from 'icons';
 
 const LG_ICON_SIZE = 20;
@@ -15,6 +16,18 @@ const SM_FONT_SIZE = 14;
 const SM_PADDING = '5px 15px';
 const SM_PADDING_WO_CHILDREN = '7px';
 
+type NativeProps = Pick<
+  React.HTMLAttributes<HTMLButtonElement>,
+  | 'dangerouslySetInnerHTML'
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+> & { value?: string };
+
 type ButtonTypes =
   | 'primary'
   | 'secondary'
@@ -26,13 +39,15 @@ type ButtonTypes =
 type ButtonSize = 'small' | 'large';
 type ButtonShape = 'none' | 'small' | 'medium-small' | 'large';
 
-export interface ButtonProps extends React.PropsWithChildren {
+export interface ButtonProps extends NativeProps, React.PropsWithChildren {
   as?: React.ElementType;
   disabled?: boolean;
+  fluid?: boolean;
   icon?: React.ReactElement | undefined;
   isDropdownOpen?: boolean;
   roundness?: ButtonShape;
   size?: ButtonSize;
+  sx?: string;
   type?: ButtonTypes;
 }
 
@@ -40,10 +55,12 @@ export const Button = ({
   as = 'button',
   children,
   disabled,
+  fluid = false,
   icon,
   isDropdownOpen,
-  size = 'large',
   roundness = 'large',
+  size = 'large',
+  sx,
   type = 'primary',
   ...props
 }: ButtonProps) => {
@@ -85,12 +102,14 @@ export const Button = ({
       disabled={disabled}
       $align="center"
       $display="flex"
+      $fluid={fluid}
       $gap={size === 'large' ? 12 : 8}
       $hasChildren={!!children}
       $justify="center"
       $padding={padding}
       $roundness={roundness}
       $size={size}
+      $sx={sx}
       {...props}
     >
       {buttonIcon}
@@ -120,7 +139,9 @@ const Components = (): Record<ButtonTypes, any> => ({
 });
 
 const base = css<{
+  $fluid: boolean;
   $roundness: ButtonShape;
+  $sx?: string;
 }>`
   display: flex;
   border-radius: ${({ $roundness }) =>
@@ -135,6 +156,12 @@ const base = css<{
   user-select: none;
   box-sizing: border-box;
   outline: none;
+  ${({ $fluid }) =>
+    $fluid
+      ? `flex-basis: max-content;
+    flex: 1 !important;
+    width: max-content`
+      : ''}
 
   svg {
     fill: currentColor;
@@ -146,10 +173,14 @@ const base = css<{
     color: var(--color-grey-7) !important;
     cursor: unset !important;
   }
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Primary = styled(Box)<{
+  $fluid: boolean;
   $roundness: ButtonShape;
+  $sx?: string;
 }>`
   background-color: var(--color-primary-blue-2);
   color: var(--color-white);
@@ -171,7 +202,9 @@ const Primary = styled(Box)<{
 `;
 
 const Secondary = styled(Box)<{
+  $fluid: boolean;
   $roundness: ButtonShape;
+  $sx?: string;
 }>`
   background-color: var(--color-primary-blue-4);
   color: var(--color-primary-blue-2);
@@ -192,7 +225,9 @@ const Secondary = styled(Box)<{
 `;
 
 const Outlined = styled(Box)<{
+  $fluid: boolean;
   $roundness: ButtonShape;
+  $sx?: string;
 }>`
   background-color: var(--color-white);
   color: var(--color-grey-3);
@@ -208,7 +243,9 @@ const Outlined = styled(Box)<{
 `;
 
 const Danger = styled(Box)<{
+  $fluid: boolean;
   $roundness: ButtonShape;
+  $sx?: string;
 }>`
   background-color: var(--color-red-4);
   color: var(--color-white);
@@ -230,7 +267,9 @@ const Danger = styled(Box)<{
 `;
 
 const Text = styled(Box)<{
+  $fluid: boolean;
   $roundness: ButtonShape;
+  $sx?: string;
 }>`
   background-color: transparent;
   border: 1px solid transparent;
@@ -255,7 +294,9 @@ const Text = styled(Box)<{
 `;
 
 const Raised = styled(Box)<{
+  $fluid: boolean;
   $roundness: ButtonShape;
+  $sx?: string;
 }>`
   background-color: var(--color-white);
   color: var(--color-grey-3);
@@ -282,7 +323,9 @@ const Raised = styled(Box)<{
 `;
 
 const Special = styled(Box)<{
+  $fluid: boolean;
   $roundness: ButtonShape;
+  $sx?: string;
 }>`
   background-color: transparent;
   border: 1px solid transparent;

package/src/components/atoms/typography/paragraph.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Typography, TypographyProps } from './typography';
+import { TypographyProps } from './typography';
+import { Styles } from 'common';
 
 export interface CommonProps extends TypographyProps {
   as?: React.ElementType;
@@ -18,6 +19,7 @@ export const P = ({
   $fontSize = 16,
   $lineHeight = 24,
   $textAlign = 'left',
+
   ...rest
 }: ParagraphProps) => (
   <StyledP
@@ -31,8 +33,15 @@ export const P = ({
   </StyledP>
 );
 
-const StyledP = styled(Typography)<ParagraphProps>`
+const StyledP = styled.p<ParagraphProps>`
+  margin: 0px;
+  font-family: Inter;
   font-size: ${({ $fontSize }) => $fontSize + 'px'};
   line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
   text-align: ${({ $textAlign }) => $textAlign || 'left'};
+  ${Styles.color}
+  ${Styles.weight}
+  ${Styles.typography}
+  ${Styles.styleable}
+  ${({ $textClampLines }) => ($textClampLines ? Styles.textClamp : '')}
 `;

package/src/components/atoms/typography/typography.tsx

@@ -30,7 +30,7 @@ export type TypographyProps = Pick<
   | 'onMouseLeave'
   | 'onMouseOut'
   | 'onMouseOver'
-> & { value?: string } & Color &
+> & { value?: string; href?: string } & Color &
   Styleable &
   TextClamp &
   TypographyStyle &

package/src/components/feedback/banner/banner.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { Box, BoxProps, Button, P } from 'components';
+import {
+  AlertCircle,
+  AlertOctogon,
+  AlertTriangle,
+  Close,
+  Information,
+} from 'icons';
+
+type BannerTypes = 'error' | 'info' | 'success' | 'warning';
+
+export interface BannerProps {
+  content: string;
+  href: string;
+  onClose: () => void;
+  title: string;
+  type: BannerTypes;
+}
+
+export const Banner = ({
+  content,
+  href,
+  onClose,
+  title,
+  type,
+}: BannerProps) => {
+  const iconLookup: Record<BannerTypes, React.ReactElement> = {
+    error: <AlertOctogon size={24} />,
+    info: <Information size={24} />,
+    success: <AlertCircle size={24} />,
+    warning: <AlertTriangle size={24} />,
+  };
+
+  return (
+    <Wrapper as="output" $align="center" $dir="row" $gap={8} $type={type}>
+      {iconLookup[type]}
+      <Box $dir="row" $gap={4} $align="center">
+        <P as="span" $semiBold>
+          {title}
+        </P>
+        <P as="span">{content}</P>
+        <P as="a" href={href} $color="primary-blue-2">
+          Read more
+        </P>
+      </Box>
+      <Button icon={<Close size={24} />} onClick={onClose} type="special" />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.output<
+  BoxProps & {
+    $type: BannerTypes;
+  }
+>`
+  width: 100%;
+  box-sizing: border-box;
+  padding: 12px 16px;
+  display: flex;
+  background-color: ${({ $type }) =>
+    $type === 'error'
+      ? 'var(--color-red-9)'
+      : $type === 'info'
+      ? 'var(--color-blue-9)'
+      : $type === 'success'
+      ? 'var(--color-green-9)'
+      : 'var(--color-orange-9)'};
+  border-bottom: 1px solid
+    ${({ $type }) =>
+      $type === 'error'
+        ? 'var(--color-red-4)'
+        : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+        ? 'var(--color-green-3)'
+        : 'var(--color-orange-5)'};
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+
+  & > svg {
+    fill: ${({ $type }) =>
+      $type === 'error'
+        ? 'var(--color-red-4)'
+        : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+        ? 'var(--color-green-3)'
+        : 'var(--color-orange-5)'};
+  }
+
+  a {
+    position: relative;
+    cursor: pointer;
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 1px;
+      right: 0px;
+      left: 0px;
+      bottom: 0px;
+      background-color: var(--color-primary-blue-2);
+    }
+  }
+
+  button {
+    padding: 0px;
+    margin-left: auto;
+  }
+
+  ${Styles.flex}
+`;

package/src/components/feedback/banner/index.ts

@@ -0,0 +1,2 @@
+export { Banner } from './banner';
+export type { BannerProps } from './banner';

package/src/components/feedback/index.ts

@@ -1,2 +1,6 @@
+export { Banner } from './banner';
+export type { BannerProps } from './banner';
 export { Loader } from './loader';
 export type { LoaderProps } from './loader';
+export { Toast } from './toast';
+export type { ToastProps } from './toast';

package/src/components/feedback/notification/notification.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { Box, BoxProps, Button, P } from 'components';
+import {
+  AlertCircle,
+  AlertOctogon,
+  AlertTriangle,
+  Close,
+  Information,
+} from 'icons';
+
+type NotificationTypes = 'error' | 'info' | 'success' | 'warning';
+
+export interface NotificationProps {
+  content: string;
+  href?: string;
+  onClose: () => void;
+  sx?: string;
+  title: string;
+  type: NotificationTypes;
+}
+
+export const Notification = ({
+  content,
+  href,
+  onClose,
+  sx,
+  title,
+  type,
+}: NotificationProps) => {
+  const iconLookup: Record<NotificationTypes, React.ReactElement> = {
+    error: <AlertOctogon size={24} />,
+    info: <Information size={24} />,
+    success: <AlertCircle size={24} />,
+    warning: <AlertTriangle size={24} />,
+  };
+
+  return (
+    <Wrapper
+      as={href ? 'a' : 'output'}
+      href={href}
+      $dir="column"
+      $gap={8}
+      $sx={sx}
+      $type={type}
+    >
+      <Box $dir="row" $gap={8} $flex={1}>
+        {iconLookup[type]}
+        <P as="span" $semiBold>
+          {title}
+        </P>
+        <Button
+          icon={<Close size={24} />}
+          onClick={onClose}
+          sx="margin-left: auto;"
+          type="special"
+        />
+      </Box>
+      <Box $align="center" $dir="row" $gap={4}>
+        <P as="span" sx="padding-left: 32px;">
+          {content}
+        </P>
+      </Box>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.output<
+  BoxProps & {
+    $sx?: string;
+    $type: NotificationTypes;
+  }
+>`
+  text-decoration: none;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 16px;
+  display: flex;
+  background-color: ${({ $type }) =>
+    $type === 'error'
+      ? 'var(--color-red-9)'
+      : $type === 'info'
+      ? 'var(--color-blue-9)'
+      : $type === 'success'
+      ? 'var(--color-green-9)'
+      : 'var(--color-orange-9)'};
+  border: 1px solid
+    ${({ $type }) =>
+      $type === 'error'
+        ? 'var(--color-red-8)'
+        : $type === 'info'
+        ? 'var(--color-blue-8)'
+        : $type === 'success'
+        ? 'var(--color-green-8)'
+        : 'var(--color-orange-8)'};
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+
+  & > div > svg {
+    fill: ${({ $type }) =>
+      $type === 'error'
+        ? 'var(--color-red-4)'
+        : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+        ? 'var(--color-green-3)'
+        : 'var(--color-orange-5)'};
+  }
+
+  button > svg {
+    fill: unset;
+  }
+
+  a {
+    position: relative;
+    cursor: pointer;
+  }
+
+  button {
+    padding: 0px;
+    margin-left: auto;
+  }
+
+  ${Styles.flex}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;

package/src/components/feedback/toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast } from './toast';
+export type { ToastProps } from './toast';

package/src/components/feedback/toast/toast.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { BoxProps, Button, P } from 'components';
+import {
+  AlertCircle,
+  AlertOctogon,
+  AlertTriangle,
+  Close,
+  Information,
+} from 'icons';
+
+type ToastTypes = 'error' | 'info' | 'success' | 'warning';
+
+export interface ToastProps {
+  content: string;
+  href?: string;
+  onClose: () => void;
+  type: ToastTypes;
+}
+
+export const Toast = ({ content, href, onClose, type }: ToastProps) => {
+  const iconLookup: Record<ToastTypes, React.ReactElement> = {
+    error: <AlertOctogon size={24} />,
+    info: <Information size={24} />,
+    success: <AlertCircle size={24} />,
+    warning: <AlertTriangle size={24} />,
+  };
+
+  return (
+    <Wrapper as="output" $align="center" $dir="row" $gap={8} $type={type}>
+      {iconLookup[type]}
+      <P as="span">{content}</P>
+      {href && (
+        <P sx="padding-left: 8px;" as="a" href={href} $color="primary-blue-2">
+          View
+        </P>
+      )}
+      <Button icon={<Close size={24} />} onClick={onClose} type="special" />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.output<
+  BoxProps & {
+    $type: ToastTypes;
+  }
+>`
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 99vw;
+  max-width: 476px;
+  box-sizing: border-box;
+  padding: 12px 16px;
+  display: flex;
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+
+  &::before {
+    position: absolute;
+    content: '';
+    left: 0px;
+    width: 4px;
+    height: 100%;
+    background-color: ${({ $type }) =>
+      $type === 'error'
+        ? 'var(--color-red-4)'
+        : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+        ? 'var(--color-green-3)'
+        : 'var(--color-orange-5)'};
+    border-radius: 8px 0px 0px 8px;
+  }
+
+  & > svg {
+    fill: ${({ $type }) =>
+      $type === 'error'
+        ? 'var(--color-red-4)'
+        : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+        ? 'var(--color-green-3)'
+        : 'var(--color-orange-5)'};
+  }
+
+  a {
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  button {
+    padding: 0px;
+    margin-left: auto;
+  }
+
+  ${Styles.flex}
+`;

package/src/components/index.ts

@@ -1,15 +1,5 @@
-export { Button } from './actions';
-export type { ButtonProps } from './actions';
-export { Box, Display, H, P, Typography } from './atoms';
-export type {
-  BoxProps,
-  DisplayProps,
-  HeadingProps,
-  ParagraphProps,
-  TypographyProps,
-} from './atoms';
+export * from './actions';
+export * from './atoms';
 export * from './feedback';
-export { Avatar, Icon } from './iconography';
-export type { AvatarGroupProps, AvatarProps, IconProps } from './iconography';
-export { Modal } from './surfaces';
-export type { ModalContentProps, ModalProps } from './surfaces';
+export * from './iconography';
+export * from './surfaces';

package/src/components/surfaces/modal/modal.tsx

@@ -134,12 +134,7 @@ const Wrapper = styled.div<{
       : 'display: none;'}
   ${({ $backgroundDark }) =>
     $backgroundDark
-      ? `background: radial-gradient(
-      79.02% 79.02% at 50% 0%,
-      rgba(0, 27, 58, 0.8) 0%,
-      rgba(0, 0, 0, 0.8) 100%
-    );
-    backdrop-filter: blur(5px);
+      ? `background: rgba(0, 0, 0, 0.5);
     cursor: pointer;`
       : ''}
   position: fixed;
@@ -160,20 +155,22 @@ const Content = styled.div`
   box-shadow: var(--elevation-2);
   border-radius: var(--small);
   cursor: initial;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
 
   [class~='header'] {
     display: flex;
     align-items: center;
-    padding: 16px;
-    border-bottom: 1px solid var(--color-grey-8);
-    > *:first-child {
+
+    div:first-child {
       flex: 1;
-      display: block;
     }
   }
 
   [class~='footer'] {
-    padding: 16px;
-    border-top: 1px solid var(--color-grey-8);
+    position: relative;
+    padding-top: 16px;
   }
 `;

package/src/icons/basic/checkmark_filled.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const CheckmarkFilled = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path d="M10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" />
+    </Icon>
+  );
+};

package/src/icons/basic/close_filled.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const CloseFilled = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path d="M8.4 17L12 13.4L15.6 17L17 15.6L13.4 12L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4L10.6 12L7 15.6L8.4 17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" />
+    </Icon>
+  );
+};

package/src/icons/basic/index.ts

@@ -21,12 +21,14 @@ export { CameraAdd } from './camera_add';
 export { CameraSlash } from './camera_slash';
 export { Checkmark } from './checkmark';
 export { CheckmarkCircle } from './checkmark_circle';
+export { CheckmarkFilled } from './checkmark_filled';
 export { Checkmarks } from './checkmarks';
 export { Circle } from './circle';
 export { CircleSlash } from './circle_slash';
 export { ClearTextStyle } from './clear_text_style';
 export { Close } from './close';
 export { CloseCircle } from './close_circle';
+export { CloseFilled } from './close_filled';
 export { Copy } from './copy';
 export { Delete } from './delete';
 export { Detail } from './detail';
@@ -70,6 +72,7 @@ export { Minimize } from './minimize';
 export { MicrophoneSlash } from './microphone_slash';
 export { Minus } from './minus';
 export { MinusCircle } from './minus_circle';
+export { MoveItem } from './move_item';
 export { New } from './new';
 export { Newspaper } from './newspaper';
 export { NotePad } from './note_pad';

package/src/icons/basic/move_item.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const MoveItem = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path d="M8 11H20.15L18.6 9.45L20 8L24 12L20 16L18.6 14.55L20.15 13H8V11ZM15 9V5H5V19H15V15H17V19C17 19.55 16.8042 20.0208 16.4125 20.4125C16.0208 20.8042 15.55 21 15 21H5C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H15C15.55 3 16.0208 3.19583 16.4125 3.5875C16.8042 3.97917 17 4.45 17 5V9H15Z" />
+    </Icon>
+  );
+};