diginet-core-ui 1.4.39 → 1.4.40

package/src/components/dialogs/colors.js

@@ -0,0 +1,13 @@
+// export const iconDefault  = '#687799';
+// export const iconHover    = '#111d5e';
+// export const iconDisabled = '#8f9bb3';
+
+// export const fillHover    = '#eff5ff';
+// export const fillDisabled = '#e7eaf0';
+// export const fillDefault  = '#8f9bb3';
+// export const fillPath     = '#fff';
+
+// export const uiSuccess    = '#00c875';
+// export const uiWarning    = '#ffaa00';
+// export const uiDanger     = '#ff3d71';
+// export const uiInfo       = '#0095ff';

package/src/components/divider/index.js

@@ -0,0 +1,87 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { bgColor, borderNone, flexShrink0, parseWidthHeight } from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp } from 'utils';
+
+const Divider = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+        const { colors } = theme;
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Divider' });
+        const { action = {}, className, color: colorProp, direction, height, id, style, width } = props;
+
+        const ref = useRef(null);
+
+        const isVertical = direction === 'vertical';
+
+        const color = getProp(colors, colorProp, colorProp);
+
+        const _DividerRoot = DividerRoot(color, width, height, isVertical, 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 useMemo(() => {
+            return (
+                <hr
+                    css={_DividerRoot}
+                    ref={ref}
+                    id={id}
+                    style={style}
+                    className={classNames('DGN-UI-Divider', className)}
+                />
+            );
+        }, [className, color, direction, height, id, style, width, theme]);
+    })
+);
+
+const DividerRoot = (color, width, height, isVertical, { spacing }) => css`
+    ${borderNone};
+    ${flexShrink0};
+    margin: ${spacing([0])};
+    ${bgColor(color)};
+    ${parseWidthHeight(width || (isVertical ? 1 : '100%'), height || (isVertical ? 'auto' : 1))};
+`;
+
+// Divider.defaultProps = {
+//     className: '',
+//     color: 'system/disabled',
+//     direction: 'horizontal',
+//     style: {},
+// };
+
+Divider.propTypes = {
+    /** Class for component. */
+    className: PropTypes.string,
+    /** The color of the component. */
+    color: PropTypes.string,
+    /** direction of divider */
+    direction: PropTypes.oneOf(['vertical', 'horizontal']),
+    /** Height oof the component. */
+    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Width of the component. */
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export { Divider };
+export default OptionWrapper(Divider);

package/src/components/divider/index.stories.js

@@ -0,0 +1,52 @@
+import { Typography } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+import { useTheme } from 'theme';
+import { Divider } from '.';
+
+const theme = useTheme();
+Divider.defaultProps = theme?.components?.Divider?.defaultProps || {};
+
+export default {
+    title: 'Components/Divider',
+    component: Divider,
+    parameters: {
+        componentSubtitle:
+            'The Divider component provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy.',
+    },
+};
+
+const Template = args => {
+    return (
+        <>
+            <ImportComp components={'Divider'} />
+            <Typography>Divider horizontal demo</Typography>
+            <Divider {...args} />
+            <Typography>Divider horizontal demo</Typography>
+        </>
+    );
+};
+
+const Template2 = args => {
+    return (
+        <>
+            <ImportComp components={'Divider'} />
+            <div style={{ display: 'flex' }}>
+                <Typography>Divider vertical demo</Typography>
+                <Divider {...args} />
+                <Typography>Divider vertical demo</Typography>
+            </div>
+        </>
+    );
+};
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+    color: 'black',
+};
+
+export const Vertical = Template2.bind({});
+Vertical.args = {
+    direction: 'vertical',
+    color: 'black',
+};