fix: modal

interlay · Mar 6, 2024 · 2b8ad35 · 2b8ad35
1 parent 480f08c
commit 2b8ad35
Show file tree

Hide file tree

Showing 49 changed files with 551 additions and 231 deletions.
diff --git a/packages/components/src/Accordion/Accordion.stories.tsx b/packages/components/src/Accordion/Accordion.stories.tsx
@@ -29,6 +29,8 @@ export default {
 
 export const Default: StoryObj<AccordionProps> = {};
 
+export const Splitted: StoryObj<AccordionProps> = { args: { variant: 'splitted' } };
+
 export const DefaultExpanded: StoryObj<AccordionProps> = {
   args: {
     defaultExpandedKeys: ['1']

diff --git a/packages/components/src/Accordion/Accordion.style.tsx b/packages/components/src/Accordion/Accordion.style.tsx
@@ -1,11 +1,14 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { ChevronDown } from '@interlay/icons';
-import { theme } from '@interlay/theme';
+import { AccordionVariants } from '@interlay/themev2';
 
-import { H3 } from '../Text';
+import { H3, Span } from '../Text';
 
 type StyledAccordionProps = {
-  $isDisabled: boolean;
+  $variant: AccordionVariants;
+};
+
+type StyledChevronDownProps = {
   $isExpanded: boolean;
 };
 
@@ -22,22 +25,33 @@ type StyledAccordionItemContentProps = {
   $isExpanded: boolean;
 };
 
-const StyledAccordionItemWrapper = styled.div<Pick<StyledAccordionProps, '$isDisabled'>>`
+type StyledAccordionItemWrapperProps = {
+  $isDisabled: boolean;
+  $variant: AccordionVariants;
+};
+
+const StyledAccordion = styled.div<StyledAccordionProps>`
+  display: flex;
+  flex-direction: column;
+  ${({ theme, $variant }) => theme.accordion.variant[$variant].base}
+`;
+
+const StyledAccordionItemWrapper = styled.div<StyledAccordionItemWrapperProps>`
   z-index: inherit;
   position: relative;
   opacity: ${({ $isDisabled }) => $isDisabled && '0.5'};
+  ${({ theme, $variant }) => theme.accordion.variant[$variant].item.base}
 `;
 
 const StyledAccordionItemHeading = styled(H3)`
   margin: 0;
-  font-weight: ${theme.fontWeight.semibold};
+  ${({ theme }) => theme.accordion.item.heading}
 `;
 
 const StyledAccordionItemButton = styled.button<StyledAccordionItemButtonProps>`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: ${theme.spacing.spacing4};
   min-height: 3.25rem;
   text-overflow: ellipsis;
   cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
@@ -48,11 +62,13 @@ const StyledAccordionItemButton = styled.button<StyledAccordionItemButtonProps>`
   color: inherit;
   font: inherit;
   outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
+
+  ${({ theme }) => theme.accordion.item.button}
 `;
 
-const StyledChevronDown = styled(ChevronDown)<Pick<StyledAccordionProps, '$isExpanded'>>`
+const StyledChevronDown = styled(ChevronDown)<StyledChevronDownProps>`
   transform: ${({ $isExpanded }) => $isExpanded && 'rotate(-180deg)'};
-  transition: transform ${theme.transition.duration.duration150}ms ease;
+  transition: transform 150ms ease;
 `;
 
 const StyledAccordionItemRegion = styled.div<StyledAccordionItemRegionProps>`
@@ -64,10 +80,24 @@ const StyledAccordionItemRegion = styled.div<StyledAccordionItemRegionProps>`
 const StyledAccordionItemContent = styled.div<StyledAccordionItemContentProps>`
   overflow: hidden;
   padding-top: 0;
-  padding-left: ${theme.spacing.spacing4};
-  padding-right: ${theme.spacing.spacing4};
-  padding-bottom: ${({ $isExpanded }) => ($isExpanded ? theme.spacing.spacing4 : 0)};
   transition: all 200ms ease 0ms;
+
+  ${({ theme, $isExpanded }) => {
+    const { paddingTop, paddingBottom, paddingLeft, paddingRight } = theme.accordion.item.content || {};
+
+    return css`
+      padding-top: ${paddingTop};
+      padding-left: ${paddingLeft};
+      padding-right: ${paddingRight};
+      padding-bottom: ${$isExpanded ? paddingBottom : 0};
+    `;
+  }}
+`;
+
+const StyledSpan = styled(Span)`
+  font-weight: inherit;
+  font-size: inherit;
+  line-height: inherit;
 `;
 
 export {
@@ -76,5 +106,7 @@ export {
   StyledAccordionItemHeading,
   StyledAccordionItemRegion,
   StyledAccordionItemWrapper,
-  StyledChevronDown
+  StyledChevronDown,
+  StyledAccordion,
+  StyledSpan
 };
diff --git a/packages/components/src/Accordion/Accordion.tsx b/packages/components/src/Accordion/Accordion.tsx
@@ -2,13 +2,14 @@ import { AriaAccordionProps, useAccordion } from '@react-aria/accordion';
 import { mergeProps } from '@react-aria/utils';
 import { useTreeState } from '@react-stately/tree';
 import { forwardRef, HTMLAttributes, Ref } from 'react';
-import { FontSize } from '@interlay/theme';
 import { useDOMRef } from '@interlay/hooks';
+import { AccordionVariants } from '@interlay/themev2';
 
 import { AccordionItem } from './AccordionItem';
+import { StyledAccordion } from './Accordion.style';
 
 type Props = {
-  size?: FontSize;
+  variant?: AccordionVariants;
 };
 
 type InheritAttrs<T> = Omit<AriaAccordionProps<T>, keyof Props>;
@@ -18,19 +19,19 @@ type NativeAttrs<T> = Omit<HTMLAttributes<unknown>, (keyof InheritAttrs<T> & Pro
 type AccordionProps<T = any> = Props & InheritAttrs<T> & NativeAttrs<T>;
 
 const Accordion = <T extends Record<string, unknown>>(
-  { size = 'base', ...props }: AccordionProps<T>,
+  { variant = 'light', ...props }: AccordionProps<T>,
   ref: Ref<HTMLDivElement>
 ): JSX.Element => {
   const state = useTreeState(props);
   const accordionRef = useDOMRef<HTMLDivElement>(ref);
   const { accordionProps } = useAccordion(props, state, accordionRef);
 
   return (
-    <div {...mergeProps(props, accordionProps)} ref={accordionRef}>
+    <StyledAccordion $variant={variant} {...mergeProps(props, accordionProps)} ref={accordionRef}>
       {[...state.collection].map((item) => (
-        <AccordionItem<T> key={item.key} item={item} size={size} state={state} />
+        <AccordionItem<T> key={item.key} item={item} state={state} variant={variant} />
       ))}
-    </div>
+    </StyledAccordion>
   );
 };
 

diff --git a/packages/components/src/Accordion/AccordionItem.tsx b/packages/components/src/Accordion/AccordionItem.tsx
@@ -4,25 +4,24 @@ import { mergeProps } from '@react-aria/utils';
 import { TreeState } from '@react-stately/tree';
 import { Node } from '@react-types/shared';
 import { useRef } from 'react';
-import { FontSize } from '@interlay/theme';
-
-import { Span } from '..';
+import { AccordionVariants } from '@interlay/themev2';
 
 import {
   StyledAccordionItemButton,
   StyledAccordionItemHeading,
   StyledAccordionItemWrapper,
-  StyledChevronDown
+  StyledChevronDown,
+  StyledSpan
 } from './Accordion.style';
 import { AccordionItemRegion } from './AccordionItemRegion';
 
 type AccordionItemProps<T> = {
   item: Node<T>;
   state: TreeState<T>;
-  size?: FontSize;
+  variant?: AccordionVariants;
 };
 const AccordionItem = <T extends Record<string, unknown>>({
-  size = 'base',
+  variant = 'light',
   ...props
 }: AccordionItemProps<T>): JSX.Element => {
   const ref = useRef<HTMLButtonElement>(null);
@@ -33,16 +32,16 @@ const AccordionItem = <T extends Record<string, unknown>>({
   const { isFocusVisible, focusProps } = useFocusRing();
 
   return (
-    <StyledAccordionItemWrapper $isDisabled={isDisabled}>
-      <StyledAccordionItemHeading size={size}>
+    <StyledAccordionItemWrapper $isDisabled={isDisabled} $variant={variant}>
+      <StyledAccordionItemHeading>
         <FocusRing within>
           <StyledAccordionItemButton
             {...mergeProps(buttonProps, focusProps)}
             ref={ref}
             $isDisabled={isDisabled}
             $isFocusVisible={isFocusVisible}
           >
-            <Span>{item.props.title}</Span>
+            <StyledSpan>{item.props.title}</StyledSpan>
             <StyledChevronDown $isExpanded={isExpanded} aria-hidden='true' role='img' size='s' />
           </StyledAccordionItemButton>
         </FocusRing>

diff --git a/packages/components/src/Alert/Alert.style.tsx b/packages/components/src/Alert/Alert.style.tsx
@@ -1,28 +1,38 @@
-import { Warning } from '@interlay/icons';
-import styled from 'styled-components';
-import { theme } from '@interlay/theme';
-import { Status } from '@interlay/theme';
+import { CheckCircle, InformationCircle, Warning } from '@interlay/icons';
+import styled, { css } from 'styled-components';
+import { AlertStatus } from '@interlay/themev2';
 
 import { Flex } from '../Flex';
 
 type StyledAlertProps = {
-  $status: Status;
+  $status: AlertStatus;
 };
 
+// FIXME: waiting on JAy
 const StyledAlert = styled(Flex)<StyledAlertProps>`
-  padding: ${theme.spacing.spacing2};
-  color: ${({ $status }) => theme.alert.status[$status]};
-  border: 1px solid ${({ $status }) => theme.alert.status[$status]};
-  background-color: ${({ $status }) => theme.alert.bg[$status]};
-  border-radius: ${theme.rounded.md};
-  font-size: ${theme.text.xs};
+  ${({ $status, theme }) => css`
+    ${theme.alert.base}
+    ${theme.alert.status[$status]}
+  `}
 `;
 
-const StyledWarningIcon = styled(Warning)`
-  color: inherit;
-  width: ${theme.spacing.spacing5};
-  height: ${theme.spacing.spacing5};
-  flex-shrink: 0;
+const StyledInformationCircle = styled(InformationCircle)<StyledAlertProps>`
+  ${({ $status, theme }) => css`
+    ${theme.alert.status[$status]}
+  `}
 `;
 
-export { StyledAlert, StyledWarningIcon };
+const StyledCheckCircle = styled(CheckCircle)<StyledAlertProps>`
+  ${({ $status, theme }) => css`
+    ${theme.alert.base}
+    ${theme.alert.status[$status]}
+  `}
+`;
+
+const StyledWarning = styled(Warning)<StyledAlertProps>`
+  ${({ $status, theme }) => css`
+    ${theme.alert.status[$status].color}
+  `}
+`;
+
+export { StyledAlert, StyledInformationCircle, StyledCheckCircle, StyledWarning };
diff --git a/packages/components/src/Alert/Alert.tsx b/packages/components/src/Alert/Alert.tsx
@@ -1,23 +1,35 @@
-import { Status } from '@interlay/theme';
+import { AlertStatus } from '@interlay/themev2';
+import { ForwardRefExoticComponent } from 'react';
 
 import { FlexProps } from '../Flex';
 
-import { StyledAlert, StyledWarningIcon } from './Alert.style';
+import { StyledAlert, StyledCheckCircle, StyledInformationCircle, StyledWarning } from './Alert.style';
+
+const iconMap: Record<AlertStatus, ForwardRefExoticComponent<any>> = {
+  info: StyledInformationCircle,
+  success: StyledCheckCircle,
+  error: StyledWarning,
+  warning: StyledWarning
+};
 
 type Props = {
-  status?: Status;
+  status?: AlertStatus;
 };
 
 type InheritAttrs = Omit<FlexProps, keyof Props>;
 
 type AlertProps = Props & InheritAttrs;
 
-const Alert = ({ status = 'success', children, ...props }: AlertProps): JSX.Element => (
-  <StyledAlert $status={status} alignItems='center' gap='md' role='alert' {...props}>
-    <StyledWarningIcon />
-    <div>{children}</div>
-  </StyledAlert>
-);
+const Alert = ({ status = 'success', children, ...props }: AlertProps): JSX.Element => {
+  const Icon = iconMap[status];
+
+  return (
+    <StyledAlert $status={status} alignItems='center' gap='md' role='alert' {...props}>
+      <Icon $status={status} size='md' />
+      <div>{children}</div>
+    </StyledAlert>
+  );
+};
 
 export { Alert };
 export type { AlertProps };
diff --git a/packages/components/src/Button/Button.stories.tsx b/packages/components/src/Button/Button.stories.tsx
@@ -16,8 +16,19 @@ export default {
 
 export const Solid: StoryObj<ButtonProps> = {
   args: {
-    variant: 'solid',
-    loading: true
+    variant: 'solid'
+  }
+};
+
+export const Outline: StoryObj<ButtonProps> = {
+  args: {
+    variant: 'outline'
+  }
+};
+
+export const Ghost: StoryObj<ButtonProps> = {
+  args: {
+    variant: 'ghost'
   }
 };
 

diff --git a/packages/components/src/Button/Button.style.tsx b/packages/components/src/Button/Button.style.tsx
@@ -2,6 +2,8 @@ import { ButtonSizes, ButtonVariants } from '@interlay/themev2';
 import { ButtonColors } from '@interlay/themev2/src/components';
 import styled, { css } from 'styled-components';
 
+import { UnstyledButton } from '../UnstyledButton';
+
 type StyledButtonProps = {
   $fullWidth?: boolean;
   $size: ButtonSizes;
@@ -11,17 +13,14 @@ type StyledButtonProps = {
   $isIconOnly?: boolean;
 };
 
-const StyledButton = styled.button<StyledButtonProps>`
+const StyledButton = styled(UnstyledButton)<StyledButtonProps>`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: ${(props) => (props.$fullWidth ? '100%' : 'auto')};
-  background: none;
   outline: transparent solid 2px;
   border: 0px solid;
 
-  text-decoration: none;
-  appearance: none;
   user-select: none;
 
   ${({ theme, $size, $variant, $color, $isFocusVisible, $isIconOnly }) => {