diginet-core-ui 1.4.39 → 1.4.40

package/.browserslistrc

@@ -0,0 +1,6 @@
+# Browsers that we support
+
+defaults
+not IE 11
+not IE_Mob 11
+maintained node versions

package/.eslintrc.js

@@ -0,0 +1,91 @@
+/* eslint-disable no-undef */
+module.exports = {
+    env: {
+        browser: true,
+        es6: true,
+    },
+    extends: ['eslint:recommended', 'plugin:react/recommended'],
+    globals: {
+        Atomics: 'readonly',
+        SharedArrayBuffer: 'readonly',
+    },
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+        ecmaVersion: 2021,
+        sourceType: 'module',
+    },
+    plugins: ['react', 'regex'],
+    rules: {
+        'react/prop-types': [0],
+        'react/no-unknown-property': ['error', { ignore: ['css'] }],
+        'react/jsx-uses-react': 'error',
+        'react/jsx-uses-vars': 'error',
+        'regex/invalid': [
+            'error',
+            [
+                {
+                    regex: '\\?\\<=',
+                    files: {
+                        ignore: '.eslintrc.js',
+                    },
+                    message: 'Not used regex with `?<=`, causing bug on IOS',
+                },
+                {
+                    regex: '\\?\\<!',
+                    files: {
+                        ignore: '.eslintrc.js',
+                    },
+                    message: 'Not used regex with `?<!`, causing bug on IOS',
+                },
+            ],
+        ],
+    },
+    "overrides": [
+        {
+            "files": ["./src/theme/use-classes.js"],
+            "rules": {
+                "react-hooks/rules-of-hooks": "off", // tried each
+            }
+        }
+    ],
+    ignorePatterns: ['dist/*'],
+    settings: {
+        react: {
+            createClass: 'createReactClass', // Regex for Component Factory to use,
+            // default to "createReactClass"
+            pragma: 'React', // Pragma to use, default to "React"
+            fragment: 'Fragment', // Fragment to use (may be a property of <pragma>), default to "Fragment"
+            version: 'detect', // React version. "detect" automatically picks the version you have installed.
+            // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
+            // It will default to "latest" and warn if missing, and to "detect" in the future
+            flowVersion: '0.53', // Flow version
+        },
+        propWrapperFunctions: [
+            // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
+            'forbidExtraProps',
+            { property: 'freeze', object: 'Object' },
+            { property: 'myFavoriteWrapper' },
+            // for rules that check exact prop wrappers
+            { property: 'forbidExtraProps', exact: true },
+        ],
+        componentWrapperFunctions: [
+            // The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
+            'observer', // `property`
+            { property: 'styled' }, // `object` is optional
+            { property: 'observer', object: 'Mobx' },
+            { property: 'observer', object: '<pragma>' }, // sets `object` to whatever value `settings.react.pragma` is set to
+        ],
+        formComponents: [
+            // Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } />
+            'CustomForm',
+            { name: 'Form', formAttribute: 'endpoint' },
+        ],
+        linkComponents: [
+            // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
+            'Hyperlink',
+            { name: 'Link', linkAttribute: 'to' },
+        ],
+    },
+};

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

package/.prettierrc

@@ -0,0 +1,32 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,  
+  "configPath": "",
+  "disableLanguages": [
+    "css"
+  ],
+  "documentSelectors": [],
+  "embeddedLanguageFormatting": "auto",
+  "enable": true,
+  "enableDebugLogs": false,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "ignorePath": ".prettierignore",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "prettierPath": "",
+  "printWidth": 120,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requireConfig": false,
+  "requirePragma": false,
+  "resolveGlobalModules": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 4,
+  "trailingComma": "es5",
+  "useEditorConfig": false,
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

package/.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/addon-essentials', '@storybook/addon-postcss'],
+};

package/.storybook/manager.js

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming/create';
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+    theme: create({
+        base: 'light',
+        brandTitle: 'Diginet-Core-UI',
+        brandImage: 'https://diginet.com.vn/wp-content/uploads/2020/05/Group-9.png',
+    }),
+});

package/.storybook/preview-head.html

@@ -0,0 +1,17 @@
+<style type="text/css">
+    @font-face {
+        font-family: "SF Pro Display";
+        font-weight: 400;
+        src: url('https://core.diginet.com.vn/theme/default/fonts/SF-Pro-Display/SF-Pro-Display-Regular.otf') format('opentype');
+    }
+    @font-face {
+        font-family: "SF Pro Display";
+        font-weight: 500;
+        src: url('https://core.diginet.com.vn/theme/default/fonts/SF-Pro-Display/SF-Pro-Display-Medium.otf') format('opentype');
+    }
+    @font-face {
+        font-family: "SF Pro Display";
+        font-weight: 700;
+        src: url('https://core.diginet.com.vn/theme/default/fonts/SF-Pro-Display/SF-Pro-Display-Bold.otf') format('opentype');
+    }
+</style>

package/.storybook/preview.js

@@ -0,0 +1,36 @@
+export const parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+    options: {
+        storySort: {
+            order: [
+                'Documentation',
+                'Theme',
+                ['Theming', 'Colors', 'Dark Mode', 'Spacing', 'Breakpoints', 'Layers', 'Components'],
+                'Components',
+            ],
+        },
+    },
+    backgrounds: {
+        default: 'light',
+        values: [
+            {
+                name: 'light',
+                value: 'white',
+            },
+            {
+                name: 'dark',
+                value: 'black',
+            },
+        ],
+    },
+};
+
+import { addDecorator } from '@storybook/react';
+import themeDecorator from './themeDecorator';
+addDecorator(themeDecorator);

package/.storybook/themeDecorator.js

@@ -0,0 +1,19 @@
+// themeDecorator.js
+import React, { useMemo } from 'react';
+import { ThemeProvider } from '../src/theme';
+
+const ThemeDecorator = (storyFn, context) => {
+    const { value: backgrounds } = context?.globals?.backgrounds || {};
+
+    const mode = useMemo(() => (backgrounds === 'black' ? 'dark' : 'light'), [backgrounds]);
+
+    const theme = { mode: mode };
+
+    return (
+        <ThemeProvider mode={mode} theme={theme}>
+            {storyFn()}
+        </ThemeProvider>
+    );
+};
+
+export default ThemeDecorator;

package/babel.config.json

@@ -0,0 +1,17 @@
+{
+    "presets": [["@babel/preset-react", { "useSpread": true }]],
+    "plugins": [
+        ["@babel/plugin-proposal-class-properties", { "loose": true }],
+        "@babel/plugin-proposal-optional-chaining",
+        "@babel/plugin-proposal-nullish-coalescing-operator",
+        "@babel/plugin-proposal-logical-assignment-operators",
+        ["@babel/plugin-proposal-private-methods", { "loose": true }],
+        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+        [
+            "module-resolver",
+            {
+                "root": ["./src"]
+            }
+        ]
+    ]
+}

package/bitbucket-pipelines.yml

@@ -0,0 +1,18 @@
+image: node:12.21.0
+
+pipelines:
+  branches:
+    dev:
+      - step:
+          name: Deploy to dev
+          deployment: Dev
+          script:
+            - export NODE_OPTIONS="--max_old_space_size=8192"
+            - ls -lah
+            - npm install
+            - npm run pack
+            - file=$(ls -t dist/diginet-core-ui* | head -n 1)
+            - ls -lah dist
+            - MyName=/home/public/diginet-core-ui.tgz
+            - scp $file root@14.241.231.149:$MyName
+            - echo "Success"

package/jsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "*": ["src/*"]
+        }
+    }
+}

package/package.json

@@ -1,44 +1,78 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.39",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
-  "main": "index.js",
-  "scripts": {
-    "start-js": "react-scripts start --max_old_space_size=4096",
-    "start": "npx npm-run-all -p start-js",
-    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
-    "eject": "react-scripts eject",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "@emotion/core": "^10.0.35",
-    "prop-types": "^15.7.2",
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.10.6"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
-  },
-  "keywords": [
-    "core ui",
-    "diginet"
-  ],
-  "author": "rocachien",
-  "contributors": [
-    {
-      "name": "Chien Do",
-      "email": "rocachien@gmail.com"
-    },
-    {
-      "name": "Nhat Tran",
-      "email": "tranminhnhat1005@gmail.com"
-    },
-    {
-      "name": "Thuan Nguyen",
-      "email": "nt.thuan.hutech@gmail.com"
-    }
-  ],
-  "license": "MIT"
-}
+{
+  "name": "diginet-core-ui",
+  "version": "1.4.40",
+  "description": "",
+  "main": "index.js",
+  "license": "UNLICENSED",
+  "scripts": {
+    "start": "npm-run-all --parallel start-sb eslint-test",
+    "start-sb": "start-storybook -p 9050",
+    "build-storybook": "build-storybook -c .storybook -s src",
+    "build": "run-script-os",
+    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
+    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
+    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
+    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
+    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
+    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
+    "version:add": "run-script-os",
+    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
+    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
+    "version:bump": "npm version patch --no-git-tag-version --silent",
+    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepare": "husky install",
+    "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
+    "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix",
+    "freshtall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install",
+    "test-storybook": "test-storybook --url http://localhost:9050",
+    "preinstall": "echo {} > package-lock.json"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.6",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "date-fns": "^2.30.0",
+    "prop-types": "^15.7.2"
+  },
+  "lint-staged": {
+    "*/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+    "@babel/preset-react": "^7.13.13",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-links": "6.2.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "6.2.9",
+    "@storybook/test-runner": "^0.7.1",
+    "autoprefixer": "^10.3.1",
+    "babel-loader": "^8.2.2",
+    "eslint": "^8.4.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-regex": "^1.10.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.1.2",
+    "mkdirp": "^1.0.4",
+    "npm-run-all": "^4.1.5",
+    "onchange": "^7.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "run-script-os": "^1.1.6",
+    "sass": "1.58.3"
+  }
+}

package/package.json.tmp

@@ -0,0 +1,44 @@
+{
+  "name": "diginet-core-ui",
+  "version": "0.0.0",
+  "description": "The DigiNet core ui",
+  "homepage": "https://diginet.com.vn",
+  "main": "index.js",
+  "scripts": {
+    "start-js": "react-scripts start --max_old_space_size=4096",
+    "start": "npx npm-run-all -p start-js",
+    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
+    "eject": "react-scripts eject",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "prop-types": "^15.7.2",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
+  },
+  "keywords": [
+    "core ui",
+    "diginet"
+  ],
+  "author": "rocachien",
+  "contributors": [
+    {
+      "name": "Chien Do",
+      "email": "rocachien@gmail.com"
+    },
+    {
+      "name": "Nhat Tran",
+      "email": "tranminhnhat1005@gmail.com"
+    },
+    {
+      "name": "Thuan Nguyen",
+      "email": "nt.thuan.hutech@gmail.com"
+    }
+  ],
+  "license": "MIT"
+}

package/postcss.config.js

@@ -0,0 +1,9 @@
+/* eslint-disable no-undef */
+module.exports = {
+    plugins: [
+        require('postcss-flexbugs-fixes'),
+        require('autoprefixer')({
+            flexbox: 'no-2009',
+        }),
+    ],
+};

package/readme.md

@@ -42,6 +42,11 @@ npm test
 
 ## Changelog
 
+## 1.4.39
+
+- \[Added\]: IconMenu – Add IconMenu MHRP15N0003
+- \[Added\]: IconMenu – Add IconMenu MHRP15N0002
+
 ## 1.4.38
 
 - \[Added\]: IconMenu – Add IconMenu MHRM38N0001

package/src/assets/images/menu/dhr/MHRP15N0002.svg

@@ -0,0 +1,17 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1959_74)">
+<path d="M17.1 21.4C16.5 20.8 15.7 20.5 14.7 20.5C13.8 20.5 13 20.8 12.4 21.3C12.2 21.9 12.1 22.4 12.1 23.1C12 24.3 12.2 25.4 12.6 26.5C13.1 26.9 13.8 27.1 14.7 27.1C15.7 27.1 16.5 26.8 17.1 26.2C17.7 25.6 18 24.8 18 23.8C18 22.8 17.7 22 17.1 21.4ZM16.2 24.7C16.1 25 16 25.2 15.9 25.4C15.8 25.6 15.6 25.7 15.4 25.8C15.2 25.9 15 25.9 14.8 25.9C14.6 25.9 14.4 25.9 14.2 25.8C14 25.7 13.8 25.6 13.7 25.4C13.6 25.2 13.4 25 13.4 24.8C13.3 24.5 13.3 24.2 13.3 23.9C13.3 23.5 13.4 23.2 13.4 22.9C13.5 22.6 13.6 22.4 13.7 22.2C13.8 22 14 21.9 14.2 21.8C14.4 21.7 14.6 21.7 14.8 21.7C15 21.7 15.2 21.7 15.4 21.8C15.6 21.9 15.7 22 15.9 22.2C16 22.4 16.2 22.6 16.2 22.9C16.3 23.2 16.3 23.5 16.3 23.9C16.3 24.1 16.3 24.4 16.2 24.7Z" fill="#FF4444"/>
+<path d="M23.1 21.8V20.6H18.6V26.9H20.2V24.2H22.9V23H20.2V21.8H23.1Z" fill="#FF4444"/>
+<path d="M27.4 23H25.1V21.8H27.2C27.1 21.4 27 21 26.8 20.6H23.5V26.9H25.1V24.2H27.4C27.4 23.8 27.4 23.4 27.4 23Z" fill="#FF4444"/>
+<path d="M34.9 2.4V4.4C34.9 6.4 33.2 8 31.2 8H31C29 8 27.3 6.4 27.3 4.4V2.2H23.3V4.4C23.3 6.4 21.6 8 19.6 8H19.4C17.4 8 15.7 6.4 15.7 4.4V2.2H11.6V4.4C11.6 6.4 10 8 8 8H7.7C5.7 7.9 4 6.3 4 4.4V2.4C1.6 3.2 0 5.4 0 7.9V33.3C0 33.9 0.1 34.6 0.3 35.1L3 32.9C3 32.8 3 32.7 3 32.6V13.4C3 12.1 4 11 5.3 11H33.8C35.1 11 36.1 12 36.1 13.4V32.6C36.1 34.5 34.6 36.1 32.7 36.1H11.1C10.9 36.5 10.6 36.8 10.3 37.1L8.1 39H33.1C36.3 39 39 36.5 39 33.3V7.9C39 5.4 37.3 3.2 34.9 2.4Z" fill="#FF4949"/>
+<path d="M7.7 6.2H7.9C8.5 6.2 9 6 9.4 5.6C9.7 5.3 9.9 4.8 9.9 4.4V1.8C9.9 1.3 9.7 0.8 9.4 0.5C8.9 0.2 8.4 0 7.9 0H7.7C7.2 0 6.7 0.2 6.3 0.5C6 0.9 5.8 1.3 5.8 1.8V4.3C5.8 4.7 6 5.2 6.3 5.5C6.6 6 7.2 6.2 7.7 6.2Z" fill="#F79B91"/>
+<path d="M18.3 5.9C18.7 6.1 19 6.2 19.4 6.2H19.6C19.9 6.2 20.2 6.1 20.5 6C21.1 5.7 21.5 5 21.5 4.4V1.8C21.5 1.2 21.2 0.7 20.7 0.3C20.4 0.1 20 0 19.6 0H19.4C18.9 0 18.5 0.2 18.1 0.5C17.7 0.8 17.5 1.3 17.5 1.9V4.4C17.4 5 17.7 5.6 18.3 5.9Z" fill="#F79B91"/>
+<path d="M31 6.2H31.2C31.8 6.2 32.3 6 32.7 5.6C33 5.3 33.2 4.8 33.2 4.4V1.8C33.2 1.1 32.8 0.5 32.2 0.2C32.2 0.2 32.1 0.2 32.1 0.1H32C32 0.1 32 0.1 31.9 0.1C31.6 0 31.4 0 31.2 0H31C30.9 0 30.8 0 30.7 0C29.8 0.1 29.1 0.9 29.1 1.8V4.3C29.1 5.4 29.9 6.2 31 6.2Z" fill="#F79B91"/>
+<path d="M28.1 16.3C24.1 11.7 17.1 11.2 12.5 15.2C8.3 18.8 7.5 25 10.5 29.5L8.5 31.3C7.6 31 6.6 31.2 5.9 31.9L0 37V39H6.4L9.5 36.3C10.3 35.6 10.6 34.7 10.5 33.8L12.5 32C16.6 35.5 22.8 35.6 27 32C31.6 27.9 32.1 20.9 28.1 16.3ZM25.5 30.2C21.8 33.4 16.2 33 13.1 29.3C9.9 25.6 10.3 20 14 16.9C17.7 13.7 23.3 14.1 26.4 17.8C29.6 21.5 29.2 27.1 25.5 30.2Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_1959_74">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/images/menu/dhr/MHRP15N0003.svg

@@ -0,0 +1,26 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1959_76)">
+<path d="M39 7.1V22.5L38.9 22.3L37 20.5V10.6C37 7.8 34.9 5.5 32.2 5.1C32.2 5 32.2 4.9 32.2 4.8V2.6H34.4C37 2.6 39 4.6 39 7.1Z" fill="#FDE4DA"/>
+<path d="M37 28.1L39 26.1V28.4C39 30 38.2 31.4 37 32.2C37 32.1 37 32 37 31.9V28.1Z" fill="#FDE4DA"/>
+<path d="M25.9 2.6H17.9V4.8C17.9 4.9 17.9 4.9 17.9 5H24C24.1 3.9 24.8 2.9 25.9 2.6Z" fill="#FDE4DA"/>
+<path d="M9.6 5C9.6 3.9 10.4 2.9 11.4 2.6H10.5C8.7 2.6 7.2 3.6 6.4 5.1C6.8 5.1 7.2 5 7.5 5H9.6Z" fill="#FDE4DA"/>
+<path d="M15.3 0C14.4 0 13.6 0.8 13.6 1.7V2.8C14.4 3.2 14.9 4.1 15 5H17C17 4.9 17 4.9 17 4.8V1.7C17 0.8 16.2 0 15.3 0ZM29.7 0C28.8 0 28 0.8 28 1.7V2.8C28.8 3.2 29.3 4.1 29.4 5H31.4C31.4 4.9 31.4 4.9 31.4 4.8V1.7C31.4 0.8 30.7 0 29.7 0Z" fill="#FDE4DA"/>
+<path d="M4.1 7.6C4.2 7.6 4.4 7.6 4.5 7.6H6.6C6.6 7.5 6.6 7.3 6.6 7.2C6.6 7.1 6.6 7.1 6.7 7C6.7 6.9 6.8 6.8 6.8 6.7C6.8 6.6 6.9 6.5 6.9 6.4C7 6.3 7.1 6.1 7.2 6.1C5.9 6.1 4.9 6.7 4.1 7.6Z" fill="#F79B91"/>
+<path d="M14.8 6V7.6H21C21 7.5 21 7.3 21 7.2C21 7.1 21 7 21.1 6.9C21.1 6.8 21.1 6.8 21.2 6.8C21.2 6.7 21.3 6.6 21.3 6.5C21.4 6.4 21.5 6.3 21.5 6.2H14.8V6Z" fill="#F79B91"/>
+<path d="M31.5 6H29.3V7.6H29.4C29.5 7.6 29.6 7.6 29.7 7.7C29.8 7.7 29.9 7.8 30.1 7.8H30.2C30.4 7.8 30.5 7.9 30.7 8C30.9 8.1 31 8.1 31.2 8.2C31.5 8.4 31.8 8.6 32.1 8.8C32.2 8.9 32.4 9.1 32.5 9.2C32.6 9.3 32.7 9.4 32.8 9.5C32.8 9.5 32.8 9.6 32.9 9.6C32.9 9.8 33 9.9 33 10C33 10 33 10 33 10.1C33.1 10.2 33.2 10.4 33.2 10.5C33.2 10.5 33.2 10.5 33.2 10.6C33.3 10.7 33.3 10.9 33.4 11C33.5 11.1 33.5 11.3 33.6 11.4C33.7 11.8 33.8 12.2 33.9 12.6C33.9 12.8 33.9 13 33.9 13.2V18.3C34.4 18.3 34.9 18.5 35.2 18.9L35.9 19.6V10.7C36 8.1 34 6 31.5 6Z" fill="#F79B91"/>
+<path d="M34 31.1V34.4C34 34.6 34 34.8 34 34.9C34 35.1 34 35.2 33.9 35.4C33.9 35.5 33.9 35.6 33.8 35.7C35.1 34.9 36 33.5 36 31.8V29L34 31.1Z" fill="#F79B91"/>
+<path d="M12.3 3.4C11.4 3.4 10.6 4.2 10.6 5.1V5.3C11.4 5.7 11.9 6.6 12 7.5H14V5.1C14 4.2 13.2 3.4 12.3 3.4ZM26.7 3.4C25.8 3.4 25 4.2 25 5.1V5.3C25.8 5.7 26.3 6.6 26.4 7.5H28.4V5.1C28.4 4.2 27.7 3.4 26.7 3.4Z" fill="#F79B91"/>
+<path d="M30.5 34.6C30.2 35.5 29.5 36.2 28.6 36.5L26.5 38.6C26.3 38.8 26.2 38.9 26 39H28.5C31 39 33 37 33 34.4V32.1L30.5 34.6Z" fill="#FF4444"/>
+<path d="M28.5 8.6H26.3V10.8C26.3 12.2 25.2 13.3 23.8 13.3C22.4 13.3 21.3 12.2 21.3 10.8V8.6H11.9V10.8C11.9 12.2 10.8 13.3 9.4 13.3C8 13.3 6.9 12.2 6.9 10.8V8.6H4.5C2 8.6 0 10.6 0 13.1V34.4C0 37 2 39 4.5 39H18.4C18.2 38.6 18.1 38.2 18.2 37.7V37.4L18.3 36.6H5.2C3.7 36.6 2.4 35.4 2.4 33.8V17.9H30.6V20.8L32.6 18.8C32.7 18.7 32.9 18.6 33 18.5V13.1C33 10.6 31 8.6 28.5 8.6Z" fill="#FF4444"/>
+<path d="M23.7 6C22.8 6 22 6.8 22 7.7V10.8C22 11.7 22.8 12.5 23.7 12.5C24.6 12.5 25.4 11.7 25.4 10.8V7.7C25.4 6.8 24.7 6 23.7 6ZM9.3 6C8.4 6 7.6 6.8 7.6 7.7V10.8C7.6 11.7 8.4 12.5 9.3 12.5C10.2 12.5 11 11.7 11 10.8V7.7C11 6.8 10.2 6 9.3 6Z" fill="#FF4444"/>
+<path d="M12.8 24C12.1 23.2 11.1 22.8 9.9 22.8C8.7 22.8 7.7 23.2 7 24C6.3 24.8 5.9 25.9 5.9 27.2C5.9 28.6 6.3 29.6 7 30.4C7.7 31.2 8.7 31.6 9.9 31.6C11.1 31.6 12.1 31.2 12.8 30.4C13.5 29.6 13.9 28.5 13.9 27.2C13.9 25.9 13.5 24.8 12.8 24ZM11.5 29.3C11.1 29.8 10.6 30.1 9.9 30.1C9.2 30.1 8.7 29.8 8.3 29.3C7.9 28.8 7.7 28.1 7.7 27.2C7.7 26.3 7.9 25.6 8.3 25.1C8.7 24.6 9.2 24.3 9.9 24.3C10.6 24.3 11.1 24.6 11.5 25.1C11.9 25.6 12.1 26.3 12.1 27.2C12.1 28.1 11.9 28.8 11.5 29.3Z" fill="#FF4444"/>
+<path d="M20.5 24.6V23.1H15V31.5H16.8V28.2H20.2V26.8H16.8V24.6H20.5Z" fill="#FF4444"/>
+<path d="M21.7 23.1V29.8L24.7 26.8H23.5V24.6H27.2V23.1H21.7Z" fill="#FF4444"/>
+<path d="M38.7 23.6L34.6 19.5C34.4 19.3 34.2 19.2 33.9 19.2C33.8 19.2 33.7 19.2 33.6 19.2C33.5 19.2 33.3 19.3 33.2 19.4L20.3 32.3C20.2 32.4 20.1 32.6 20 32.8L19.8 34.2L19.6 35.5L19.3 37.4L19.2 37.7C19.1 38 19.2 38.3 19.5 38.5C19.6 38.6 19.8 38.7 20 38.8C20.1 38.8 20.1 38.8 20.2 38.8C20.2 38.8 20.3 38.8 20.4 38.8L25.3 38C25.5 38 25.7 37.9 25.8 37.7L38.8 24.8C39 24.6 39.1 24.4 39.1 24.1C39 24.1 38.9 23.8 38.7 23.6ZM34 22.2L36.1 24.3L34.4 26L32.3 23.9L34 22.2ZM24.4 35.9L22.5 36.2L21.9 36.3L22.3 33.8L30.3 25.8L32.4 27.9L24.4 35.9Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_1959_76">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/accordion/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const AccordionContext = createContext({ onExpand: () => {}, onCollapse: () => {} });
+
+export default AccordionContext;

package/src/components/accordion/details.js

@@ -0,0 +1,80 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import {
+    boxBorder,
+    overflowHidden,
+    parseHeight,
+    pointerEventsNone,
+    positionRelative,
+    textColor,
+    userSelectNone,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp } from 'utils';
+
+const AccordionDetails = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'AccordionDetails' });
+        const { action = {}, children, className, id, style } = props;
+
+        const ref = useRef(null);
+
+        const _DetailsRootCSS = DetailsRootCSS(theme);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        return (
+            <div css={_DetailsRootCSS} className={'DGN-UI-Accordion-Details'} ref={ref} id={id}>
+                <div style={style} className={classNames('DGN-UI-Accordion-Details-Content', className)}>
+                    {children}
+                </div>
+            </div>
+        );
+    })
+);
+
+const DetailsRootCSS = ({ colors, spacing, typography }) => css`
+    ${positionRelative};
+    ${overflowHidden};
+    ${parseHeight(0)};
+    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    .DGN-UI-Accordion-Details-Content {
+        ${boxBorder};
+        ${typography.paragraph1};
+        padding: ${spacing([0, 6, 4, 6])};
+        ${textColor(getProp(colors, 'text/main'))};
+        &.disabled {
+            ${pointerEventsNone};
+            ${userSelectNone};
+        }
+    }
+`;
+
+AccordionDetails.propTypes = {
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** CSS class for the component. */
+    className: PropTypes.string,
+    /** Inline style object for the component. */
+    style: PropTypes.object,
+};
+
+export default AccordionDetails;