Moved Accordion to css modules

css-modules.d.ts

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

jest.config.js

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

package.json

@@ -18,9 +18,7 @@
   "scripts": {
     "dev": "storybook dev -p 5555",
     "build-storybook": "storybook build",
-    "build": "yarn build:js && yarn build:types",
-    "build:js": "vite build",
-    "build:types": "tsc -p tsconfig.build.json",
+    "build": "zx scripts/build.mjs",
     "test": "jest",
     "test:coverage": "jest coverage",
     "lint": "eslint .",
@@ -91,12 +89,14 @@
     "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",
     "jest-resolve": "^29.0.1",
     "jest-runner": "^29.0.1",
     "jest-styled-components": "^7.1.1",
+    "postcss-custom-media": "^10.0.0",
     "prettier": "2.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -108,6 +108,7 @@
     "ts-jest": "^29.1.1",
     "tslib": "2.3.1",
     "typescript": "4.8",
-    "vite": "^4.4.3"
+    "vite": "^4.4.3",
+    "zx": "^7.2.3"
   }
 }

packages/accordion/Accordion.module.css

@@ -0,0 +1,65 @@
+.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);
+
+  @media (--lido-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;
+
+  @media (--lido-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 { ArrowBottom } from '../icons'
+import styles from './Accordion.module.css'
 
-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.css

@@ -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.css

@@ -0,0 +1,4 @@
+@custom-media --lido-media-breakpoint-up-sm screen and (min-width: 359px);
+@custom-media --lido-media-breakpoint-up-md screen and (min-width: 479px);
+@custom-media --lido-media-breakpoint-up-lg screen and (min-width: 767px);
+@custom-media --lido-media-breakpoint-up-xl screen and (min-width: 1023px);

packages/theme/base/colors.css

@@ -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.css

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

packages/theme/base/shadows.css

@@ -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.css

@@ -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;
+}