From 7f53fad8d0923bfceca4e1355af00cb3bbc952d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrik=20Matias=CC=8Cko?= Date: Thu, 25 Jan 2024 00:41:59 +0100 Subject: [PATCH] logo resizing in preview mode --- package.json | 8 +- src/common/context/FormContext.ts | 7 + src/common/context/FormContext.types.ts | 6 + src/components/Atomic/App/App.tsx | 2 +- src/components/Atomic/Button/Button.styles.ts | 1 + .../Atomic/CodeEditor/CodeEditor.tsx | 83 +++++++++++ .../Atomic/CodeEditor/CodeEditor.types.ts | 9 ++ .../Atomic/CodeEditor/CodeMirror.styles.ts | 28 ++++ src/components/Atomic/CodeEditor/index.ts | 2 + .../Atomic/ContentMenu/ContentMenu.styles.ts | 140 ++++++++++++++++++ .../Atomic/ContentMenu/ContentMenu.tsx | 83 +++++++++++ .../Atomic/ContentMenu/ContentMenu.types.ts | 23 +++ src/components/Atomic/ContentMenu/index.ts | 2 + .../Atomic/ContentSwitch/ContentSwitch.tsx | 43 ++++++ .../ContentSwitch/ContentSwitch.types.ts | 8 + src/components/Atomic/ContentSwitch/index.ts | 2 + .../Atomic/FormSelect/FormSelect.styles.ts | 7 +- .../Atomic/FormSelect/FormSelect.tsx | 15 +- .../Atomic/FormSelect/FormSelect.types.ts | 1 + .../Atomic/Headline/Headline.styles.ts | 1 + src/components/Atomic/Headline/Headline.tsx | 8 +- .../Atomic/Icon/assets/icon-globe.svg | 5 + .../Atomic/Icon/assets/icon-shield.svg | 5 + .../Atomic/Icon/components/IconActions.tsx | 2 +- .../Icon/components/IconArrowDetail.tsx | 2 +- .../Atomic/Icon/components/IconArrowDown.tsx | 2 +- .../components/IconArrowDownNoPadding.tsx | 2 +- .../Atomic/Icon/components/IconArrowRight.tsx | 2 +- .../components/IconArrowTriangleFullUp.tsx | 2 +- .../Atomic/Icon/components/IconBell.tsx | 2 +- .../Icon/components/IconCertificate.tsx | 2 +- .../Atomic/Icon/components/IconChat.tsx | 2 +- .../Atomic/Icon/components/IconCloudError.tsx | 2 +- .../Icon/components/IconCloudSuccess.tsx | 2 +- .../Icon/components/IconCloudWarning.tsx | 2 +- .../Atomic/Icon/components/IconCollapse.tsx | 2 +- .../Atomic/Icon/components/IconCopy.tsx | 2 +- .../Atomic/Icon/components/IconDashboard.tsx | 2 +- .../Icon/components/IconDeviceUpdate.tsx | 2 +- .../Atomic/Icon/components/IconDevices.tsx | 2 +- .../Atomic/Icon/components/IconDocs.tsx | 2 +- .../Atomic/Icon/components/IconEdit.tsx | 2 +- .../Atomic/Icon/components/IconFilePem.tsx | 2 +- .../Atomic/Icon/components/IconFileUpload.tsx | 2 +- .../Atomic/Icon/components/IconGlobe.tsx | 16 ++ .../Icon/components/IconHidePassword.tsx | 2 +- .../Atomic/Icon/components/IconInfo.tsx | 2 +- .../Icon/components/IconIntegrations.tsx | 4 +- .../Atomic/Icon/components/IconLink.tsx | 2 +- .../Atomic/Icon/components/IconLoader.tsx | 2 +- .../Atomic/Icon/components/IconLog.tsx | 2 +- .../Atomic/Icon/components/IconLogout.tsx | 2 +- .../Atomic/Icon/components/IconNet.tsx | 2 +- .../Atomic/Icon/components/IconNetwork.tsx | 2 +- .../Icon/components/IconNotification.tsx | 2 +- .../Atomic/Icon/components/IconRefresh.tsx | 2 +- .../Icon/components/IconRemoteClients.tsx | 2 +- .../Atomic/Icon/components/IconSettings.tsx | 2 +- .../Atomic/Icon/components/IconShield.tsx | 18 +++ .../Icon/components/IconShowPassword.tsx | 2 +- .../Atomic/Icon/components/IconSortDown.tsx | 2 +- .../Atomic/Icon/components/IconSortUp.tsx | 2 +- .../Atomic/Icon/components/IconSuccess.tsx | 2 +- .../Icon/components/IconTableArrowDown.tsx | 2 +- .../Icon/components/IconTableArrowUp.tsx | 2 +- .../Atomic/Icon/components/IconToastClose.tsx | 2 +- .../Atomic/Icon/components/IconTrash.tsx | 2 +- .../Atomic/Icon/components/IconWarning.tsx | 2 +- .../Atomic/Icon/components/index.ts | 2 + src/components/Atomic/Loadable/Loadable.tsx | 13 ++ .../Atomic/Loadable/Loadable.types.ts | 6 + src/components/Atomic/Loadable/index.ts | 2 + .../Loader/IconLoader/IconLoader.styles.ts | 7 + .../Atomic/Loader/IconLoader/IconLoader.tsx | 11 +- .../Loader/IconLoader/IconLoader.types.ts | 3 +- src/components/Atomic/Logo/Logo.tsx | 57 ++++++- src/components/Atomic/Logo/Logo.types.ts | 6 +- src/components/Atomic/Modal/Modal.tsx | 4 +- src/components/Atomic/Modal/Modal.types.ts | 1 + .../Atomic/TableNew/Table.styles.ts | 12 +- src/components/Atomic/TableNew/Table.tsx | 106 ++++++------- src/components/Atomic/TableNew/Table.types.ts | 2 + .../TableNew/TableActions/TableActions.tsx | 2 +- .../TableGlobalFilter/TableGlobalFilter.tsx | 14 +- .../TableGlobalFilter.types.ts | 4 +- src/components/Atomic/Tabs/Tabs.tsx | 6 +- src/components/Atomic/Tabs/Tabs.types.ts | 4 +- .../TimeoutControl/TimeoutControl.styles.ts | 17 +++ .../Atomic/TimeoutControl/TimeoutControl.tsx | 41 ++--- .../TimeoutControl/TimeoutControl.types.ts | 10 +- src/components/Atomic/_theme/plgd.ts | 4 +- src/components/Atomic/_theme/siemens.ts | 3 + src/components/Atomic/_theme/template.ts | 56 ++++++- src/components/Atomic/_utils/commonStyles.ts | 4 + src/components/Atomic/index.ts | 6 + .../Layout/LeftPanel/LeftPanel.styles.ts | 6 +- src/components/Layout/LeftPanel/LeftPanel.tsx | 15 +- .../Layout/LeftPanel/LeftPanel.types.ts | 2 +- src/components/Layout/LeftPanel/utils.ts | 2 +- .../Organisms/CaPool/CaPool.styles.ts | 8 + src/components/Organisms/CaPool/CaPool.tsx | 106 +++++++++++++ .../Organisms/CaPool/CaPool.types.ts | 19 +++ src/components/Organisms/CaPool/index.ts | 2 + .../TableActionButton/TableActionButton.tsx | 2 +- src/stories/CaPool.stories.jsx | 25 ++++ src/stories/Form/FormSelect.snip.tsx | 27 ++++ src/stories/Icon.stories.jsx | 6 + src/stories/Table/TreeTable.stories.jsx | 3 +- 108 files changed, 1057 insertions(+), 180 deletions(-) create mode 100644 src/common/context/FormContext.ts create mode 100644 src/common/context/FormContext.types.ts create mode 100644 src/components/Atomic/CodeEditor/CodeEditor.tsx create mode 100644 src/components/Atomic/CodeEditor/CodeEditor.types.ts create mode 100644 src/components/Atomic/CodeEditor/CodeMirror.styles.ts create mode 100644 src/components/Atomic/CodeEditor/index.ts create mode 100644 src/components/Atomic/ContentMenu/ContentMenu.styles.ts create mode 100644 src/components/Atomic/ContentMenu/ContentMenu.tsx create mode 100644 src/components/Atomic/ContentMenu/ContentMenu.types.ts create mode 100644 src/components/Atomic/ContentMenu/index.ts create mode 100644 src/components/Atomic/ContentSwitch/ContentSwitch.tsx create mode 100644 src/components/Atomic/ContentSwitch/ContentSwitch.types.ts create mode 100644 src/components/Atomic/ContentSwitch/index.ts create mode 100644 src/components/Atomic/Icon/assets/icon-globe.svg create mode 100644 src/components/Atomic/Icon/assets/icon-shield.svg create mode 100644 src/components/Atomic/Icon/components/IconGlobe.tsx create mode 100644 src/components/Atomic/Icon/components/IconShield.tsx create mode 100644 src/components/Atomic/Loadable/Loadable.tsx create mode 100644 src/components/Atomic/Loadable/Loadable.types.ts create mode 100644 src/components/Atomic/Loadable/index.ts create mode 100644 src/components/Organisms/CaPool/CaPool.styles.ts create mode 100644 src/components/Organisms/CaPool/CaPool.tsx create mode 100644 src/components/Organisms/CaPool/CaPool.types.ts create mode 100644 src/components/Organisms/CaPool/index.ts create mode 100644 src/stories/CaPool.stories.jsx diff --git a/package.json b/package.json index c478d4c7..fe484a10 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "@babel/preset-env": "^7.23.3", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@babel/runtime": "^7.23.4", "@emotion/babel-plugin": "^11.11.0", "@emotion/babel-preset-css-prop": "^11.11.0", "@emotion/cache": "^11.11.0", @@ -49,6 +48,7 @@ "@floating-ui/react": "^0.26.2", "@floating-ui/react-dom": "^2.0.4", "@floating-ui/react-dom-interactions": "^0.13.3", + "@lezer/highlight": "^1.2.0", "@mdx-js/react": "^2.3.0", "@opentelemetry/api": "^1.7.0", "@opentelemetry/context-zone": "^1.18.1", @@ -73,6 +73,9 @@ "@types/uuid": "^9.0.7", "@typescript-eslint/eslint-plugin": "^6.12.0", "@typescript-eslint/parser": "^6.12.0", + "@uiw/codemirror-extensions-langs": "^4.21.21", + "@uiw/codemirror-themes": "^4.21.21", + "@uiw/react-codemirror": "^4.21.21", "axios": "^1.6.2", "babel-jest": "^29.7.0", "bootstrap": "^5.3.2", @@ -113,7 +116,8 @@ "devDependencies": { "@babel/cli": "^7.23.4", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@babel/plugin-transform-runtime": "^7.23.4", + "@babel/plugin-transform-runtime": "^7.23.7", + "@babel/runtime": "^7.23.8", "@emotion/jest": "^11.11.0", "@storybook/addon-actions": "^7.5.3", "@storybook/addon-essentials": "^7.5.3", diff --git a/src/common/context/FormContext.ts b/src/common/context/FormContext.ts new file mode 100644 index 00000000..1105d5a9 --- /dev/null +++ b/src/common/context/FormContext.ts @@ -0,0 +1,7 @@ +import { createContext } from 'react' +import { FormContextType } from './FormContext.types' + +export const FormContext = createContext({ + onSubmit: (d: any) => {}, + updateData: (s: string, d: string) => {}, +}) diff --git a/src/common/context/FormContext.types.ts b/src/common/context/FormContext.types.ts new file mode 100644 index 00000000..9d3499ce --- /dev/null +++ b/src/common/context/FormContext.types.ts @@ -0,0 +1,6 @@ +export type FormContextType = { + onSubmit: (data: any) => void + updateData: (field: string, value: any) => void + toggleDirty?: (tab: string, dirty: boolean) => void + toggleError?: (tab: string, error: boolean) => void +} diff --git a/src/components/Atomic/App/App.tsx b/src/components/Atomic/App/App.tsx index 2ecc0966..dea6c81b 100644 --- a/src/components/Atomic/App/App.tsx +++ b/src/components/Atomic/App/App.tsx @@ -1,8 +1,8 @@ import React from 'react' import { Global } from '@emotion/react' +import 'react-toastify/dist/ReactToastify.css' import { Props, defaultProps } from './App.types' -import 'react-toastify/dist/ReactToastify.css' import { ToastContainer } from '../Notification' import * as styles from './App.styles' diff --git a/src/components/Atomic/Button/Button.styles.ts b/src/components/Atomic/Button/Button.styles.ts index 4a8013e6..4694b89e 100644 --- a/src/components/Atomic/Button/Button.styles.ts +++ b/src/components/Atomic/Button/Button.styles.ts @@ -79,6 +79,7 @@ export const icon = (position: ButtonIconPositionType) => css` export const fullWidth = css` flex: 1 1 auto; + width: 100%; ` export const loadingWrapper = css` diff --git a/src/components/Atomic/CodeEditor/CodeEditor.tsx b/src/components/Atomic/CodeEditor/CodeEditor.tsx new file mode 100644 index 00000000..1599cf58 --- /dev/null +++ b/src/components/Atomic/CodeEditor/CodeEditor.tsx @@ -0,0 +1,83 @@ +import { FC, useCallback, useMemo } from 'react' +import CodeMirror from '@uiw/react-codemirror' +import { loadLanguage } from '@uiw/codemirror-extensions-langs' +import isFunction from 'lodash/isFunction' +import { tags as t } from '@lezer/highlight' +import { createTheme } from '@uiw/codemirror-themes' +import { useTheme } from '@emotion/react' + +import { Props, defaultProps } from './CodeEditor.types' +import * as styles from './CodeMirror.styles' +import { getSizeInPx } from '../_utils/commonStyles' +import { ThemeType } from '../_theme' + +const CodeEditor: FC = (props) => { + const { height, onChange, value } = { ...defaultProps, ...props } + const globalTheme: ThemeType = useTheme() + + const handleChange = useCallback( + (v: string) => { + isFunction(onChange) && onChange(v) + }, + [onChange] + ) + + const extensions = useMemo(() => { + const ext = [] + + if (isFunction(loadLanguage)) { + ext.push(loadLanguage('markdown') as any) + } + + return ext + }, []) + + const theme = useMemo( + () => + createTheme({ + theme: 'light', + settings: { + background: globalTheme?.colors?.CodeEditor.background, + lineHighlight: globalTheme?.colors?.CodeEditor.lineHighlight, + selection: globalTheme?.colors?.CodeEditor.selection, + }, + styles: [ + { tag: t.comment, color: '#787b8099' }, + { tag: t.variableName, color: '#0080ff' }, + { tag: [t.string, t.special(t.brace)], color: '#5c6166' }, + { tag: t.number, color: '#5c6166' }, + { tag: t.bool, color: '#5c6166' }, + { tag: t.null, color: '#5c6166' }, + { tag: t.keyword, color: '#5c6166' }, + { tag: t.operator, color: '#5c6166' }, + { tag: t.className, color: '#5c6166' }, + { tag: t.definition(t.typeName), color: '#5c6166' }, + { tag: t.typeName, color: '#5c6166' }, + { tag: t.angleBracket, color: '#5c6166' }, + { tag: t.tagName, color: '#5c6166' }, + { tag: t.attributeName, color: '#5c6166' }, + ], + }), + [] + ) + + return ( + handleChange(v)} + theme={theme} + value={value} + /> + ) +} + +CodeEditor.displayName = 'CodeEditor' +CodeEditor.defaultProps = defaultProps + +export default CodeEditor diff --git a/src/components/Atomic/CodeEditor/CodeEditor.types.ts b/src/components/Atomic/CodeEditor/CodeEditor.types.ts new file mode 100644 index 00000000..6f30ba4c --- /dev/null +++ b/src/components/Atomic/CodeEditor/CodeEditor.types.ts @@ -0,0 +1,9 @@ +export type Props = { + height?: string | number + onChange?: (value: string) => void + value: string +} + +export const defaultProps: Partial = { + height: '500px', +} diff --git a/src/components/Atomic/CodeEditor/CodeMirror.styles.ts b/src/components/Atomic/CodeEditor/CodeMirror.styles.ts new file mode 100644 index 00000000..e4cbc308 --- /dev/null +++ b/src/components/Atomic/CodeEditor/CodeMirror.styles.ts @@ -0,0 +1,28 @@ +import { css } from '@emotion/react' +import { ThemeType, get } from '../_theme' + +export const editor = (theme: ThemeType) => css` + border: 1px solid ${get(theme, `Editor.borderColor`)}; + border-radius: 8px; + overflow: hidden; + + .cm-gutters { + background: #e6e9ed; + border: 0; + } + + .cm-lineNumbers .cm-gutterElement { + color: #757676; + text-align: center; + padding: 0 16px 0 16px; + } + + .cm-content { + padding: 16px 0; + } + + .cm-line { + padding: 0 16px; + line-height: 1.6; + } +` diff --git a/src/components/Atomic/CodeEditor/index.ts b/src/components/Atomic/CodeEditor/index.ts new file mode 100644 index 00000000..9c2762cd --- /dev/null +++ b/src/components/Atomic/CodeEditor/index.ts @@ -0,0 +1,2 @@ +export { default } from './CodeEditor' +export * from './CodeEditor' diff --git a/src/components/Atomic/ContentMenu/ContentMenu.styles.ts b/src/components/Atomic/ContentMenu/ContentMenu.styles.ts new file mode 100644 index 00000000..c49cdbd4 --- /dev/null +++ b/src/components/Atomic/ContentMenu/ContentMenu.styles.ts @@ -0,0 +1,140 @@ +import { css } from '@emotion/react' +import { ThemeType, get } from '../_theme' + +export const contentMenu = (theme: ThemeType) => css` + padding: 16px 12px 12px 12px; + border-radius: 16px; + border: 1px solid ${get(theme, `ContentMenu.borderColor`)}; + background: ${get(theme, `ContentMenu.background`)}; + box-shadow: 0 1px 2px 0 rgba(228, 229, 231, 0.24); +` + +export const title = (theme: ThemeType) => css` + color: ${get(theme, `ContentMenu.title.color`)}; + margin-bottom: 12px; + padding: 0 12px; +` + +export const menuList = css` + list-style: none; + padding: 0; + margin: 0; + + .item-enter { + } + + .item-enter-done { + max-height: 200px; + } + + .item-enter-active { + max-height: 200px; + } + + .item-exit { + max-height: 0; + } + + .item-exit-active { + max-height: 0; + } +` + +export const itemTitleIcon = css` + flex: 0 0 16px; +` + +export const itemTitleText = css` + margin-left: 12px; + font-weight: bold; +` + +export const item = (theme: ThemeType) => css` + display: flex; + padding: 10px 12px; + text-decoration: none; + min-height: 40px; + box-sizing: border-box; + border-radius: 8px; + color: ${get(theme, `ContentMenu.item.color`)}; + transition: all 0.25s; + position: relative; + overflow: hidden; + + &:hover { + text-decoration: none !important; + color: ${get(theme, `ContentMenu.item.hover.color`)}; + + .icon { + color: ${get(theme, `ContentMenu.item.hover.icon.color`)}; + } + } +` + +export const activeItem = (theme: ThemeType) => css` + color: ${get(theme, `ContentMenu.item.active.color`)}; + background: ${get(theme, `ContentMenu.item.active.background`)}; + + .icon { + color: ${get(theme, `ContentMenu.item.active.icon.color`)}!important; + } + + &:hover { + text-decoration: none !important; + color: ${get(theme, `ContentMenu.item.active.hover.color`)}; + } +` + +export const arrow = css` + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + width: 10px; + height: 10px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.25s; +` + +export const activeArrow = css` + transform: translateY(-50%) rotate(180deg); +` + +export const subItems = css` + max-height: 0; + overflow: hidden; + transition: all 0.45s; +` + +export const subItemsList = css` + margin: 0; + padding: 10px 0 0 20px; + list-style: none; +` + +export const subItemLink = (theme: ThemeType) => css` + display: block; + position: relative; + padding: 8px 8px 8px 20px; + white-space: nowrap; + margin: 4px 0 4px 0; + color: ${get(theme, `ContentMenu.subItem.color`)}; + + &:hover { + color: ${get(theme, `ContentMenu.subItem.hover.color`)}; + } +` + +export const subItemLinkActive = (theme: ThemeType) => css` + color: ${get(theme, `ContentMenu.subItem.active.color`)}; +` + +export const line = css` + width: 14px; + height: 55px; + position: absolute; + left: 0; + bottom: 50%; +` diff --git a/src/components/Atomic/ContentMenu/ContentMenu.tsx b/src/components/Atomic/ContentMenu/ContentMenu.tsx new file mode 100644 index 00000000..13304119 --- /dev/null +++ b/src/components/Atomic/ContentMenu/ContentMenu.tsx @@ -0,0 +1,83 @@ +import React, { cloneElement, FC, ReactElement } from 'react' +import { CSSTransition } from 'react-transition-group' +import isFunction from 'lodash/isFunction' + +import * as styles from './ContentMenu.styles' +import { Props } from './ContentMenu.types' +import { Icon } from '../Icon' +import { Arrow } from '../../Layout/LeftPanel/components' +import img from '../../Layout/LeftPanel/assets/line.png' + +const ContentMenu: FC = (props) => { + const { activeItem, className, handleItemClick, handleSubItemClick, id, menu, title } = props + return ( + + ) +} + +ContentMenu.displayName = 'ContentMenu' + +export default ContentMenu diff --git a/src/components/Atomic/ContentMenu/ContentMenu.types.ts b/src/components/Atomic/ContentMenu/ContentMenu.types.ts new file mode 100644 index 00000000..cd70b8f9 --- /dev/null +++ b/src/components/Atomic/ContentMenu/ContentMenu.types.ts @@ -0,0 +1,23 @@ +import { ReactNode, SyntheticEvent } from 'react' + +export type ItemType = { + children?: SubItemItem[] + icon: ReactNode + id: string + link: string + title: string +} + +export type SubItemItem = Omit & { + contentRef?: any +} + +export type Props = { + activeItem: string + className?: string + handleItemClick: (item: ItemType, e: SyntheticEvent) => void + handleSubItemClick?: (subItem: SubItemItem, item: ItemType, e: SyntheticEvent) => void + id?: string + menu: ItemType[] + title: string +} diff --git a/src/components/Atomic/ContentMenu/index.ts b/src/components/Atomic/ContentMenu/index.ts new file mode 100644 index 00000000..559b7084 --- /dev/null +++ b/src/components/Atomic/ContentMenu/index.ts @@ -0,0 +1,2 @@ +export { default } from './ContentMenu' +export * from './ContentMenu' diff --git a/src/components/Atomic/ContentSwitch/ContentSwitch.tsx b/src/components/Atomic/ContentSwitch/ContentSwitch.tsx new file mode 100644 index 00000000..1814a11c --- /dev/null +++ b/src/components/Atomic/ContentSwitch/ContentSwitch.tsx @@ -0,0 +1,43 @@ +import React, { FC, Suspense, useCallback } from 'react' +import { motion, AnimatePresence } from 'framer-motion' +import isFunction from 'lodash/isFunction' + +import { Props } from './ContentSwitch.types' +import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper' + +const ContentSwitch: FC = (props) => { + const { activeItem, children, isAsync, onAnimationComplete } = props + + const onAnimationCompleteCallback = useCallback(() => { + isFunction(onAnimationComplete) && onAnimationComplete() + }, [onAnimationComplete]) + + return ( + }>{c} }> + null}> + {React.Children.map(children, (child, i) => { + if (i !== activeItem) { + return null + } + return ( + + {child} + + ) + })} + + + ) +} + +ContentSwitch.displayName = 'ContentSwitch' + +export default ContentSwitch diff --git a/src/components/Atomic/ContentSwitch/ContentSwitch.types.ts b/src/components/Atomic/ContentSwitch/ContentSwitch.types.ts new file mode 100644 index 00000000..f04557b0 --- /dev/null +++ b/src/components/Atomic/ContentSwitch/ContentSwitch.types.ts @@ -0,0 +1,8 @@ +import { ReactElement } from 'react' + +export type Props = { + activeItem: number + children: ReactElement[] + isAsync?: boolean + onAnimationComplete?: () => void +} diff --git a/src/components/Atomic/ContentSwitch/index.ts b/src/components/Atomic/ContentSwitch/index.ts new file mode 100644 index 00000000..bfd29eea --- /dev/null +++ b/src/components/Atomic/ContentSwitch/index.ts @@ -0,0 +1,2 @@ +export { default } from './ContentSwitch' +export * from './ContentSwitch' diff --git a/src/components/Atomic/FormSelect/FormSelect.styles.ts b/src/components/Atomic/FormSelect/FormSelect.styles.ts index 94c602bf..cd3cc6b5 100644 --- a/src/components/Atomic/FormSelect/FormSelect.styles.ts +++ b/src/components/Atomic/FormSelect/FormSelect.styles.ts @@ -84,6 +84,7 @@ export const error = (theme: ThemeType) => css` ` export const menu = (theme: ThemeType) => css` + width: auto !important; margin-top: 4px; margin-bottom: 4px; border: 1px solid ${get(theme, `FormSelect.menu.borderColor`)}; @@ -133,8 +134,12 @@ export const selectContainer = css` width: 100%; ` +export const selectAutoWidthContainer = css` + display: inline-flex; +` + export const valueContainer = css` - padding: 0 15px; // -1 for border + padding: 0 0 0 15px; // -1 for border ` export const value = (theme: ThemeType) => css` diff --git a/src/components/Atomic/FormSelect/FormSelect.tsx b/src/components/Atomic/FormSelect/FormSelect.tsx index 495e6739..ad7fcd8e 100644 --- a/src/components/Atomic/FormSelect/FormSelect.tsx +++ b/src/components/Atomic/FormSelect/FormSelect.tsx @@ -19,10 +19,11 @@ import { convertSize, IconTableArrowDown } from '../Icon' import { selectAligns, selectSizes } from './constants' const FormSelect = forwardRef((props, ref) => { - const { align, className, defaultValue, error, disabled, inlineStyle, isSearchable, options, name, menuIsOpen, onChange, size, value, ...rest } = { - ...defaultProps, - ...props, - } + const { align, autoWidth, className, defaultValue, error, disabled, inlineStyle, isSearchable, options, name, menuIsOpen, onChange, size, value, ...rest } = + { + ...defaultProps, + ...props, + } const stylesOverride = { menu: (base: any) => ({ ...base, @@ -47,7 +48,7 @@ const FormSelect = forwardRef((props, ref) => { ) const SelectContainer = ({ children, ...props }: ContainerProps