Moved Accordion to css modules

css-modules.d.ts

@@ -0,0 +1,2 @@
+declare module '*.module.css'
+declare module '*.module.scss'

jest.config.js

@@ -2,4 +2,7 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.(css|scss)$': 'identity-obj-proxy',
+  },
 }

package.json

@@ -43,6 +43,7 @@
     "react-jazzicon": "^1.0.4",
     "react-toastify": "7.0.4",
     "react-transition-group": "4",
+    "sass": "^1.63.6",
     "styled-system": "5.1.5",
     "ua-parser-js": "^1.0.35",
     "use-callback-ref": "1.2.5"
@@ -91,6 +92,7 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-storybook": "^0.6.12",
     "husky": "^7.0.1",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.0.1",
     "jest-haste-map": "^29.0.1",

packages/accordion/Accordion.module.scss

@@ -0,0 +1,67 @@
+@import "../theme/index.scss";
+
+.accordion {
+  margin: 0 0 var(--lido-space-sm) 0;
+  background: var(--lido-color-foreground);
+  border-radius: var(--lido-border-radius-xl);
+}
+
+.summary {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  outline: none;
+  min-height: 40px;
+  box-sizing: content-box;
+  padding: var(--lido-space-lg);
+
+  @include media-breakpoint-up-md {
+    padding: var(--lido-space-lg) var(--lido-space-xxl);
+  }
+}
+
+.title {
+  color: var(--lido-color-text);
+  flex-grow: 1;
+  font-weight: 800;
+  font-size: var(--lido-font-size-xs);
+  line-height: 1.6em;
+}
+
+.content {
+  color: var(--lido-color-textSecondary);
+  font-weight: 400;
+  font-size: var(--lido-font-size-xxs);
+  line-height: 1.6em;
+  padding: var(--lido-space-lg);
+  padding-top: 0;
+
+  @include media-breakpoint-up-md {
+    padding: var(--lido-space-xxl);
+    padding-top: 0;
+  }
+
+  p, ul, ol {
+    margin: 0 0 1.6em 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ul, ol {
+    padding: 0 0 0 1.5em;
+  }
+}
+
+.arrow { 
+  flex-shrink: 0;
+  margin: -2px;
+  margin-left: var(--lido-space-md);
+  fill: var(--lido-color-textSecondary);
+}
+
+.arrowExpanded {
+  transition: transform var(--lido-transition-duration-norm) ease;
+  transform: rotate(180deg);
+}

packages/accordion/Accordion.stories.tsx

@@ -1,13 +1,12 @@
-import { Story, Meta } from '@storybook/react'
-import { AccordionProps } from './types'
-import Accordion from './Accordion'
+import { StoryFn, Meta } from '@storybook/react'
+import { Accordion, AccordionProps } from '.'
 
 export default {
   component: Accordion,
   title: 'Layout/Accordion',
 } as Meta
 
-export const Basic: Story<AccordionProps> = (props) => (
+export const Basic: StoryFn<AccordionProps> = (props) => (
   <Accordion {...props}>
     Liquid staking protocols allow users to earn staking rewards without locking
     assets or maintaining staking infrastructure. Users of these protocols can
@@ -32,7 +31,7 @@ Basic.argTypes = {
   },
 }
 
-export const List: Story = () => (
+export const List: StoryFn = () => (
   <>
     <Accordion summary='What is Liquid Staking?'>
       <p>

packages/accordion/Accordion.tsx

@@ -1,29 +1,37 @@
-import React, { ForwardedRef, forwardRef } from 'react'
-import { AccordionProps } from './types'
-import {
-  AccordionStyle,
-  AccordionSummaryStyle,
-  AccordionTitleStyle,
-  AccordionArrowStyle,
-  AccordionContentStyle,
-} from './AccordionStyles'
+import { ForwardedRef, forwardRef } from 'react'
 import { useExpanded } from './useExpanded'
+import { NewLidoComponentProps } from 'packages/utils'
+import styles from './Accordion.module.scss'
+import { ArrowBottom } from '../icons'
 
-function Accordion(props: AccordionProps, ref?: ForwardedRef<HTMLDivElement>) {
-  const { defaultExpanded, summary, children, ...rest } = props
-  const { toggleProps, collapseProps, isExpanded } = useExpanded(props)
+export type AccordionProps = NewLidoComponentProps<
+  'div',
+  {
+    defaultExpanded?: boolean
+    summary: React.ReactNode
+  }
+>
 
-  return (
-    <AccordionStyle {...rest} ref={ref}>
-      <AccordionSummaryStyle {...toggleProps}>
-        <AccordionTitleStyle>{summary}</AccordionTitleStyle>
-        <AccordionArrowStyle $expanded={isExpanded} />
-      </AccordionSummaryStyle>
-      <div {...collapseProps}>
-        <AccordionContentStyle>{children}</AccordionContentStyle>
-      </div>
-    </AccordionStyle>
-  )
-}
+export const Accordion = forwardRef(
+  (props: AccordionProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    const { defaultExpanded, summary, children, ...rest } = props
+    const { toggleProps, collapseProps, isExpanded } = useExpanded(props)
 
-export default forwardRef(Accordion)
+    return (
+      <div {...rest} ref={ref} className={styles.accordion}>
+        <div {...toggleProps} className={styles.summary}>
+          <div className={styles.title}>{summary}</div>
+          <ArrowBottom
+            className={`${styles.arrow} ${
+              isExpanded ? styles.arrowExpanded : ''
+            }`}
+          />
+        </div>
+        <div {...collapseProps}>
+          <div className={styles.content}>{children}</div>
+        </div>
+      </div>
+    )
+  }
+)
+Accordion.displayName = 'Accordion'

packages/accordion/index.ts

@@ -1,2 +1 @@
-export { default as Accordion } from './Accordion'
-export * from './types'
+export * from './Accordion'

packages/accordion/useExpanded.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
-import { AccordionProps } from './types'
+import { AccordionProps } from './Accordion'
 import useCollapse from 'react-collapsed'
 import {
   GetCollapsePropsOutput,

packages/theme/base/borders.scss

@@ -0,0 +1,7 @@
+:root {
+  --lido-border-radius-xs: 4px;
+  --lido-border-radius-sm: 6px;
+  --lido-border-radius-md: 8px;
+  --lido-border-radius-lg: 10px;
+  --lido-border-radius-xl: 20px;
+}

packages/theme/base/breakpoints.scss

@@ -0,0 +1,28 @@
+$lido-media-breakpoint-sm: 359px;
+$lido-media-breakpoint-md: 479px;
+$lido-media-breakpoint-lg: 767px;
+$lido-media-breakpoint-xl: 1023px;
+
+@mixin media-breakpoint-up-sm() {
+  @media screen and (min-width: $lido-media-breakpoint-sm) {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-up-md() {
+  @media screen and (min-width: $lido-media-breakpoint-md) {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-up-lg() {
+  @media screen and (min-width: $lido-media-breakpoint-lg) {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-up-xl() {
+  @media screen and (min-width: $lido-media-breakpoint-xl) {
+    @content;
+  }
+}

packages/theme/base/colors.scss

@@ -0,0 +1,38 @@
+:root {
+  --lido-color-dark-theme-opacity: '0',
+  --lido-color-light-theme-opacity: '1',
+
+  --lido-color-light-mode-visibility: 'visible',
+  --lido-color-dark-mode-visibility: 'hidden',
+
+  --lido-color-light-display: 'initial',
+  --lido-color-dark-display: 'none',
+
+  --lido-color-primary: '#00a3ff',
+  --lido-color-primary-hover: '#009bf2',
+  --lido-color-primary-contrast: '#fff',
+  --lido-color-primary-visited: '#4bbeff',
+
+  --lido-color-accent: '#27272e',
+  --lido-color-accent-contrast: '#fff',
+  --lido-color-accent-contrast-secondary: 'rgba(255, 255, 255, 0.6)',
+  --lido-color-accent-darken: 'rgba(0, 0, 0, .2)',
+  --lido-color-accent-control-bg: 'rgba(0, 0, 0, .1)',
+  --lido-color-accent-border: 'rgba(255, 255, 255, 0.2)',
+  --lido-color-accent-border-hover: 'rgba(255, 255, 255, 0.3)',
+
+  --lido-color-error: '#e14d4d',
+  --lido-color-error-hover: '#d44c4d',
+  --lido-color-error-contrast: '#fff',
+
+  --lido-color-warning: '#EC8600',
+  --lido-color-warning-hover: '#f0a431',
+  --lido-color-warning-contrast: '#fff',
+  --lido-color-warning-background: '#FFFAE0',
+
+  --lido-color-text-dark: '#273852',
+
+  --lido-color-success: '#53BA95',
+  --lido-color-success-hover: '#4ba886',
+  --lido-color-success-contrast: '#fff',
+}

packages/theme/base/index.scss

@@ -0,0 +1,7 @@
+@import './borders.scss';
+@import './breakpoints.scss';
+@import './colors.scss';
+@import './shadows.scss';
+@import './spacing.scss';
+@import './transitions.scss';
+@import './typography.scss';

packages/theme/base/shadows.scss

@@ -0,0 +1,8 @@
+:root {
+  --lido-shadows-xxl: 0px 8px 44px 0px;
+  --lido-shadows-xl: 0px 8px 32px 0px;
+  --lido-shadows-lg: 0px 8px 24px 0px;
+  --lido-shadows-md: 0px 4px 16px 0px;
+  --lido-shadows-sm: 0px 4px 12px 0px;
+  --lido-shadows-xs: 0px 4px 8px 0px;
+}

packages/theme/base/spacing.scss

@@ -0,0 +1,8 @@
+:root {
+  --lido-space-xs: 4px;
+  --lido-space-sm: 8px;
+  --lido-space-md: 16px;
+  --lido-space-lg: 20px;
+  --lido-space-xl: 24px;
+  --lido-space-xxl: 32px;
+}