diff --git a/package-lock.json b/package-lock.json index 10a1a2770..31932dbc9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2543,6 +2543,103 @@ "node": ">=10.0.0" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.13.5", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz", + "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/serialize": "^1.3.3", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "dev": true + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/cache": { + "version": "11.14.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz", + "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==", + "dev": true, + "dependencies": { + "@emotion/memoize": "^0.9.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.2", + "@emotion/weak-memoize": "^0.4.0", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/css": { + "version": "11.13.5", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.13.5.tgz", + "integrity": "sha512-wQdD0Xhkn3Qy2VNcIzbLP9MR8TafI0MJb7BEAXKp+w4+XqErksWR4OXomuDzPsN4InLdGhVe6EYcn2ZIUCpB8w==", + "dev": true, + "dependencies": { + "@emotion/babel-plugin": "^11.13.5", + "@emotion/cache": "^11.13.5", + "@emotion/serialize": "^1.3.3", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.2" + } + }, + "node_modules/@emotion/hash": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz", + "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==", + "dev": true + }, + "node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "dev": true + }, + "node_modules/@emotion/serialize": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz", + "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==", + "dev": true, + "dependencies": { + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/unitless": "^0.10.0", + "@emotion/utils": "^1.4.2", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/sheet": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz", + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==", + "dev": true + }, + "node_modules/@emotion/unitless": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz", + "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==", + "dev": true + }, "node_modules/@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", @@ -2552,6 +2649,18 @@ "react": ">=16.8.0" } }, + "node_modules/@emotion/utils": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz", + "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==", + "dev": true + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", + "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==", + "dev": true + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", @@ -7835,6 +7944,12 @@ "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==", "dev": true }, + "node_modules/@types/parse-json": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", + "dev": true + }, "node_modules/@types/pretty-hrtime": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", @@ -9134,6 +9249,46 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, + "node_modules/babel-plugin-macros/node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dev": true, + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/babel-plugin-macros/node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/babel-plugin-polyfill-corejs2": { "version": "0.4.11", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz", @@ -13284,6 +13439,12 @@ "node": ">=8" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", + "dev": true + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -23258,6 +23419,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==", + "dev": true + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -26032,6 +26199,7 @@ "version": "2.20.0", "license": "ISC", "dependencies": { + "@emotion/css": "^11.13.0", "@floating-ui/react": "^0.26.25", "@livechat/data-utils": "^0.2.16", "@livechat/design-system-icons": "^2.20.0", @@ -26046,6 +26214,7 @@ }, "devDependencies": { "@chromatic-com/storybook": "^1.5.0", + "@emotion/css": "^11.13.0", "@storybook/addon-a11y": "^8.1.7", "@storybook/addon-actions": "^8.1.7", "@storybook/addon-backgrounds": "^8.1.7", @@ -26083,6 +26252,7 @@ "vitest": "^1.6.0" }, "peerDependencies": { + "@emotion/css": "^11.13.0", "react": ">= 18.3.0", "react-dom": ">= 18.3.0" } diff --git a/packages/react-components/package.json b/packages/react-components/package.json index d1a8499a2..c9574f2db 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -33,7 +33,8 @@ }, "peerDependencies": { "react": ">= 18.3.0", - "react-dom": ">= 18.3.0" + "react-dom": ">= 18.3.0", + "@emotion/css": "^11.13.0" }, "devDependencies": { "@chromatic-com/storybook": "^1.5.0", @@ -74,6 +75,7 @@ "vitest": "^1.6.0" }, "dependencies": { + "@emotion/css": "^11.13.0", "@floating-ui/react": "^0.26.25", "@livechat/data-utils": "^0.2.16", "@livechat/design-system-icons": "^2.20.0", diff --git a/packages/react-components/src/components/Accordion/Accordion.module.scss b/packages/react-components/src/components/Accordion/Accordion.module.scss deleted file mode 100644 index 598302138..000000000 --- a/packages/react-components/src/components/Accordion/Accordion.module.scss +++ /dev/null @@ -1,116 +0,0 @@ -$base-class: 'accordion'; - -.#{$base-class} { - display: flex; - position: relative; - flex-direction: column; - justify-content: space-between; - transition: all var(--transition-duration-moderate-1); - border: 1px solid transparent; - border-radius: var(--radius-4); - box-shadow: unset; - background-color: var(--surface-secondary-default); - width: 100%; - min-height: 24px; - - &:focus-visible { - outline: 0; - box-shadow: var(--shadow-focus); - } - - &:hover { - border-color: var(--border-basic-hover); - box-shadow: var(--shadow-float); - } - - &--warning { - background-color: var(--surface-accent-emphasis-min-warning); - - &:hover { - border-color: var(--border-basic-warning); - } - } - - &--error { - background-color: var(--surface-accent-emphasis-min-negative); - - &:hover { - border-color: var(--content-basic-negative); - } - } - - &--promo { - border: 1px solid var(--border-basic-secondary); - background-color: var(--surface-primary-default); - } - - &--open { - border: 1px solid var(--action-primary-default); - box-shadow: var(--shadow-float); - background-color: var(--surface-primary-default); - - &:hover { - border-color: var(--action-primary-default); - } - } - - &__chevron { - position: absolute; - top: 22px; - right: 20px; - transition: inherit; - pointer-events: none; - - &--open { - transform: rotate(180deg); - } - - &--promo { - top: 26px; - } - } - - &__label { - margin: 0; - padding: var(--spacing-5) var(--spacing-12) var(--spacing-5) - var(--spacing-5); - - &:hover { - cursor: pointer; - } - - &--promo { - padding: var(--spacing-6) var(--spacing-12) var(--spacing-6) - var(--spacing-6); - } - } - - &__content { - transition: inherit; - height: 100%; - overflow: hidden; - - &__inner { - transition: all var(--transition-duration-moderate-1); - opacity: 0; - padding: 0 var(--spacing-12) var(--spacing-5) var(--spacing-5); - - &--open { - opacity: 1; - } - - &--promo { - padding: 0 var(--spacing-12) var(--spacing-6) var(--spacing-6); - } - } - } - - &__footer { - border-top: 1px solid var(--border-basic-secondary); - padding: var(--spacing-5); - - &--promo { - padding: var(--spacing-6); - } - } -} diff --git a/packages/react-components/src/components/Accordion/Accordion.tsx b/packages/react-components/src/components/Accordion/Accordion.tsx index a68b86a7d..de4a6a729 100644 --- a/packages/react-components/src/components/Accordion/Accordion.tsx +++ b/packages/react-components/src/components/Accordion/Accordion.tsx @@ -1,23 +1,22 @@ import * as React from 'react'; +import { cx } from '@emotion/css'; import { ChevronDown } from '@livechat/design-system-icons'; -import cx from 'clsx'; import { useAnimations, useHeightResizer } from '../../hooks'; import { Icon } from '../Icon'; import { Heading, Text, TTextSize } from '../Typography'; -import { AccordionMultilineElement } from './components/AccordionMultilineElement'; +import { AccordionMultilineElement } from './components'; import { getLabel } from './helpers'; import { useAccordion } from './hooks'; +import * as styles from './styles'; import { IAccordionProps, IAccordionPromoProps, IAccordionComponentProps, } from './types'; -import styles from './Accordion.module.scss'; - const AccordionComponent: React.FC = ({ className, mainClassName, @@ -54,7 +53,7 @@ const AccordionComponent: React.FC = ({ const mergedClassName = cx( mainClassName, { - [styles[`${baseClass}--open`]]: isExpanded, + [styles.open]: isExpanded, }, className ); @@ -64,9 +63,7 @@ const AccordionComponent: React.FC = ({ const props = { 'aria-expanded': isExpanded, as: 'div', - className: cx(styles[`${baseClass}__label`], { - [styles[`${baseClass}__label--promo`]]: isPromo, - }), + className: styles.label(isPromo), onClick: () => handleExpandChange(isExpanded), bold: !isPromo ? true : undefined, ...(isPromo ? { size: 'xs' as TTextSize } : {}), @@ -85,10 +82,7 @@ const AccordionComponent: React.FC = ({ > {buildHeader(isPromo)} {multilineElement && ( @@ -97,7 +91,7 @@ const AccordionComponent: React.FC = ({ )}
@@ -106,10 +100,7 @@ const AccordionComponent: React.FC = ({ <> {children} @@ -118,9 +109,7 @@ const AccordionComponent: React.FC = ({ as="div" aria-label="Accordion footer" role="complementary" - className={cx(styles[`${baseClass}__footer`], { - [styles[`${baseClass}__footer--promo`]]: isPromo, - })} + className={styles.footer(isPromo)} > {footer} @@ -133,18 +122,14 @@ const AccordionComponent: React.FC = ({ ); }; -const baseClass = 'accordion'; - export const Accordion: React.FC = ({ kind, ...props }) => { - const mainClassName = cx(styles[baseClass], styles[`${baseClass}--${kind}`]); + const mainClassName = cx(styles.baseStyles(), styles.kind(kind)); return ; }; -const promoBaseClass = `${baseClass}--promo`; - export const AccordionPromo: React.FC = (props) => { - const mainClassName = cx(styles[baseClass], styles[promoBaseClass]); + const mainClassName = cx(styles.baseStyles(true)); return ( diff --git a/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel.module.scss b/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel.module.scss deleted file mode 100644 index 7901f5207..000000000 --- a/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel.module.scss +++ /dev/null @@ -1,21 +0,0 @@ -$base-class: 'accordion-animated-label'; - -.#{$base-class} { - display: flex; - position: relative; - align-items: center; - transition: all var(--transition-duration-fast-2) ease-in-out; - min-height: 24px; - - &__open, - &__close { - position: absolute; - transition: all var(--transition-duration-fast-2) ease-in-out; - opacity: 0; - max-width: 100%; - - &--visible { - opacity: 1; - } - } -} diff --git a/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel.spec.tsx b/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel/AccordionAnimatedLabel.spec.tsx similarity index 94% rename from packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel.spec.tsx rename to packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel/AccordionAnimatedLabel.spec.tsx index 4a4b39f39..3e1af9771 100644 --- a/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel.spec.tsx +++ b/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel/AccordionAnimatedLabel.spec.tsx @@ -1,6 +1,6 @@ import { render } from 'test-utils'; -import { IAccordionAnimatedLabelProps } from '../types'; +import { IAccordionAnimatedLabelProps } from '../../types'; import { AccordionAnimatedLabel } from './AccordionAnimatedLabel'; diff --git a/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel.tsx b/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel/AccordionAnimatedLabel.tsx similarity index 59% rename from packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel.tsx rename to packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel/AccordionAnimatedLabel.tsx index 48c57d486..8ad06200e 100644 --- a/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel.tsx +++ b/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel/AccordionAnimatedLabel.tsx @@ -1,13 +1,9 @@ import * as React from 'react'; -import cx from 'clsx'; +import { useAnimations } from '../../../../hooks'; +import { IAccordionAnimatedLabelProps } from '../../types'; -import { useAnimations } from '../../../hooks'; -import { IAccordionAnimatedLabelProps } from '../types'; - -import styles from './AccordionAnimatedLabel.module.scss'; - -const baseClass = `accordion-animated-label`; +import * as styles from './styles'; export const AccordionAnimatedLabel: React.FC = ({ open, @@ -39,27 +35,14 @@ export const AccordionAnimatedLabel: React.FC = ({ }, [isOpen, isOpenMounted, isClosedMounted]); return ( -
+
{isOpenMounted && ( -
+
{open}
)} {isClosedMounted && ( -
+
{closed}
)} diff --git a/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel/styles.ts b/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel/styles.ts new file mode 100644 index 000000000..130381fd1 --- /dev/null +++ b/packages/react-components/src/components/Accordion/components/AccordionAnimatedLabel/styles.ts @@ -0,0 +1,33 @@ +import { css } from '@emotion/css'; + +import { TransitionDurationToken } from '../../../../foundations'; + +export const baseStyles = (containerHeight?: number) => css` + display: flex; + position: relative; + align-items: center; + transition: all var(${TransitionDurationToken.Fast2}) ease-in-out; + min-height: 24px; + + ${containerHeight + ? ` + height: ${containerHeight}px; + ` + : ` + height: auto; + `} +`; + +export const element = (isVisible: boolean) => css` + position: absolute; + transition: all var(${TransitionDurationToken.Fast2}) ease-in-out; + max-width: 100%; + + ${isVisible + ? ` + opacity: 1; + ` + : ` + opacity: 0; + `} +`; diff --git a/packages/react-components/src/components/Accordion/components/AccordionMultilineElement.module.scss b/packages/react-components/src/components/Accordion/components/AccordionMultilineElement.module.scss deleted file mode 100644 index 3fd42a7c1..000000000 --- a/packages/react-components/src/components/Accordion/components/AccordionMultilineElement.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -$base-class: 'accordion-multiline'; - -.#{$base-class} { - transition: inherit; - height: 100%; - overflow: hidden; - - &__inner { - padding: 0 var(--spacing-12) var(--spacing-5) var(--spacing-5); - } -} diff --git a/packages/react-components/src/components/Accordion/components/AccordionMultilineElement.tsx b/packages/react-components/src/components/Accordion/components/AccordionMultilineElement/AccordionMultilineElement.tsx similarity index 67% rename from packages/react-components/src/components/Accordion/components/AccordionMultilineElement.tsx rename to packages/react-components/src/components/Accordion/components/AccordionMultilineElement/AccordionMultilineElement.tsx index 8525b2cda..bbec0620b 100644 --- a/packages/react-components/src/components/Accordion/components/AccordionMultilineElement.tsx +++ b/packages/react-components/src/components/Accordion/components/AccordionMultilineElement/AccordionMultilineElement.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; -import { useAnimations, useHeightResizer } from '../../../hooks'; +import { useAnimations, useHeightResizer } from '../../../../hooks'; -import styles from './AccordionMultilineElement.module.scss'; - -const baseClass = 'accordion-multiline'; +import * as styles from './styles'; export interface IAccordionMultilineElementProps { children: React.ReactNode; @@ -23,14 +21,12 @@ export const AccordionMultilineElement: React.FC< return (
- {isMounted && ( -
{children}
- )} + {isMounted &&
{children}
}
); diff --git a/packages/react-components/src/components/Accordion/components/AccordionMultilineElement/styles.ts b/packages/react-components/src/components/Accordion/components/AccordionMultilineElement/styles.ts new file mode 100644 index 000000000..de0af5b44 --- /dev/null +++ b/packages/react-components/src/components/Accordion/components/AccordionMultilineElement/styles.ts @@ -0,0 +1,14 @@ +import { css } from '@emotion/css'; + +import { SpacingToken } from '../../../../foundations'; + +export const baseStyles = css` + transition: inherit; + height: 100%; + overflow: hidden; +`; + +export const inner = css` + padding: 0 var(${SpacingToken.Spacing12}) var(${SpacingToken.Spacing5}) + var(${SpacingToken.Spacing5}); +`; diff --git a/packages/react-components/src/components/Accordion/components/index.ts b/packages/react-components/src/components/Accordion/components/index.ts new file mode 100644 index 000000000..776d07259 --- /dev/null +++ b/packages/react-components/src/components/Accordion/components/index.ts @@ -0,0 +1,2 @@ +export { AccordionAnimatedLabel } from './AccordionAnimatedLabel/AccordionAnimatedLabel'; +export { AccordionMultilineElement } from './AccordionMultilineElement/AccordionMultilineElement'; diff --git a/packages/react-components/src/components/Accordion/helpers.tsx b/packages/react-components/src/components/Accordion/helpers.tsx index 81d3abaff..eb97fcf0a 100644 --- a/packages/react-components/src/components/Accordion/helpers.tsx +++ b/packages/react-components/src/components/Accordion/helpers.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { AccordionAnimatedLabel } from './components/AccordionAnimatedLabel'; +import { AccordionAnimatedLabel } from './components'; import type { AccordionLabel } from './types'; diff --git a/packages/react-components/src/components/Accordion/styles.ts b/packages/react-components/src/components/Accordion/styles.ts new file mode 100644 index 000000000..8dbb8ecfa --- /dev/null +++ b/packages/react-components/src/components/Accordion/styles.ts @@ -0,0 +1,146 @@ +import { css } from '@emotion/css'; + +import { + DesignToken, + RadiusToken, + ShadowToken, + SpacingToken, + TransitionDurationToken, +} from '../../foundations'; + +export const baseStyles = (isPromo?: boolean) => css` + display: flex; + position: relative; + flex-direction: column; + justify-content: space-between; + transition: all var(${TransitionDurationToken.Moderate1}); + border-radius: var(${RadiusToken.Radius4}); + box-shadow: unset; + width: 100%; + min-height: 24px; + + ${isPromo + ? ` + border: 1px solid var(${DesignToken.BorderBasicSecondary}); + background-color: var(${DesignToken.SurfacePrimaryDefault}); + ` + : ` + border: 1px solid transparent; + background-color: var(${DesignToken.SurfaceSecondaryDefault}); + `} + + &:focus-visible { + outline: 0; + box-shadow: var(${ShadowToken.Focus}); + } + + &:hover { + border-color: var(${DesignToken.BorderBasicHover}); + box-shadow: var(${ShadowToken.Float}); + } +`; + +export const kind = (kind?: string) => css` + ${kind === 'warning' && + ` + background-color: var(${DesignToken.SurfaceAccentEmphasisMinWarning}); + + &:hover { + border-color: var(${DesignToken.BorderBasicWarning}); + } + `} + + ${kind === 'error' && + ` + background-color: var(${DesignToken.SurfaceAccentEmphasisMinNegative}); + + &:hover { + border-color: var(${DesignToken.ContentBasicNegative}); + } + `} +`; + +export const open = css` + border: 1px solid var(${DesignToken.ActionPrimaryDefault}); + box-shadow: var(${ShadowToken.Float}); + background-color: var(${DesignToken.SurfacePrimaryDefault}); + + &:hover { + border-color: var(${DesignToken.ActionPrimaryDefault}); + } +`; + +export const label = (isPromo?: boolean) => css` + margin: 0; + + ${isPromo + ? ` + padding: var(${SpacingToken.Spacing6}) var(${SpacingToken.Spacing12}) var(${SpacingToken.Spacing6}) var(${SpacingToken.Spacing6}); + ` + : ` + padding: var(${SpacingToken.Spacing5}) var(${SpacingToken.Spacing12}) var(${SpacingToken.Spacing5}) var(${SpacingToken.Spacing5}); + `} + + &:hover { + cursor: pointer; + } +`; + +export const chevron = (isOpen?: boolean, isPromo?: boolean) => css` + position: absolute; + right: 20px; + transition: inherit; + pointer-events: none; + + ${isPromo + ? ` + top: 26px; + ` + : ` + top: 22px; + `} + + ${isOpen && + ` + transform: rotate(180deg); + `} +`; + +export const content = css` + transition: inherit; + height: 100%; + overflow: hidden; +`; + +export const contentInner = (isOpen?: boolean, isPromo?: boolean) => css` + transition: all var(${TransitionDurationToken.Moderate1}); + + ${isOpen + ? ` + opacity: 1; + ` + : ` + opacity: 0; + `} + + ${isPromo + ? ` + padding: 0 var(${SpacingToken.Spacing12}) var(${SpacingToken.Spacing6}) var(${SpacingToken.Spacing6}); + ` + : ` + padding: 0 var(${SpacingToken.Spacing12}) var(${SpacingToken.Spacing5}) var(${SpacingToken.Spacing5}); + `} +`; + +export const footer = (isPromo?: boolean) => css` + border-top: 1px solid var(${DesignToken.BorderBasicSecondary}); + padding: var(${SpacingToken.Spacing5}); + + ${isPromo + ? ` + padding: var(${SpacingToken.Spacing6}); + ` + : ` + padding: var(${SpacingToken.Spacing5}); + `} +`;