Skip to content

Commit

Permalink
Merge pull request #315 from ebs-integrator/development
Browse files Browse the repository at this point in the history 
Development
  • Loading branch information
@devdfan
devdfan authored Aug 19, 2021
2 parents 178bb88 + f045d0b commit 9361b29
Show file tree
Hide file tree
Showing 127 changed files with 1,600 additions and 3,742 deletions.
15 changes: 13 additions & 2 deletions .storybook/storybook.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,16 @@
#story--react-ebs-ui-organisms-layout-sidebar--regular {
min-height: 50vh;
}

#story--react-ebs-ui-molecules-loader--regular .ebs-loader {
height: 200px;
}

.ebs-loader {
> .ebs-loader__spinner.fixed {
position: absolute;
}
}
}

.ebs-select__wrapper {
Expand All @@ -140,7 +150,8 @@
}

@media (max-width: 500px) {
.ebs-select__wrapper, .ebs-space__item {
.ebs-select__wrapper,
.ebs-space__item {
width: 100%;
}
}
}
18 changes: 9 additions & 9 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ebs-design",
"version": "0.0.1-beta.98",
"version": "0.0.1-beta.99",
"description": "EBS Design System React UI elements.",
"author": "EBS Integrator <[email protected]> (https://ebs-integrator.com/)",
"maintainers": [
Expand Down Expand Up @@ -47,7 +47,7 @@
"build:storybook": "build-storybook -o docs-build -s ./.storybook/images"
},
"dependencies": {
"@storybook/addon-controls": "^6.3.6",
"@storybook/addon-controls": "^6.3.7",
"classnames": "^2.2.6",
"dayjs": "^1.9.4",
"rc-field-form": "^1.17.4",
Expand All @@ -66,15 +66,15 @@
"react-dom": ">= 16.8"
},
"devDependencies": {
"@storybook/addon-actions": "^6.3.6",
"@storybook/addon-docs": "^6.3.6",
"@storybook/addon-essentials": "^6.3.6",
"@storybook/addon-links": "^6.3.6",
"@storybook/addons": "^6.3.6",
"@storybook/addon-actions": "^6.3.7",
"@storybook/addon-docs": "^6.3.7",
"@storybook/addon-essentials": "^6.3.7",
"@storybook/addon-links": "^6.3.7",
"@storybook/addons": "^6.3.7",
"@storybook/preset-create-react-app": "^3.2.0",
"@storybook/preset-typescript": "^3.0.0",
"@storybook/react": "^6.3.6",
"@storybook/theming": "^6.3.6",
"@storybook/react": "^6.3.7",
"@storybook/theming": "^6.3.7",
"@svgr/rollup": "^2.4.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
Expand Down
74 changes: 17 additions & 57 deletions src/components/atoms/Alert/Alert.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,28 @@
import * as React from 'react';
import { Template } from 'components/storybook';

import { Alert, Container, Row, Col } from '../';
import { Alert, AlertProps } from './Alert';
import { exportStory } from '../../../libs';

export default {
title: exportStory('Alert', 'atoms'),
component: Alert,
};

export const regular = (): React.ReactElement => (
<Container>
<Row className="gy-4">
<Col size={12}>
<Alert icon message="Success">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, ratione!
</Alert>
</Col>
<Col size={12}>
<Alert icon message="Info" type="info" />
</Col>
<Col size={12}>
<Alert icon message="Warning" type="warning" />
</Col>
<Col size={12}>
<Alert icon message="Error" type="error" />
</Col>
</Row>
</Container>
export const Regular: React.FC<AlertProps> & { args: AlertProps } = ({ children, ...props }) => (
<Template>
<Alert icon message="Success" {...props}>
{children}
</Alert>
</Template>
);

export const closable = (): React.ReactElement => (
<Container>
<Row className="gy-4">
<Col size={12}>
<Alert icon message="Success" closable />
</Col>
<Col size={12}>
<Alert icon message="Info" type="info" closable />
</Col>
<Col size={12}>
<Alert icon message="Warning" type="warning" closable />
</Col>
<Col size={12}>
<Alert icon message="Error" type="error" closable />
</Col>
</Row>
</Container>
);

export const outlined = (): React.ReactElement => (
<Container>
<Row className="gy-4">
<Col size={12}>
<Alert icon message="Success" outlined />
</Col>
<Col size={12}>
<Alert icon message="Info" type="info" outlined />
</Col>
<Col size={12}>
<Alert icon message="Warning" type="warning" outlined />
</Col>
<Col size={12}>
<Alert icon message="Error" type="error" outlined />
</Col>
</Row>
</Container>
);
Regular.args = {
message: 'Message',
icon: true,
closable: true,
outlined: false,
type: 'success',
onClose: () => console.log,
children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, ratione!',
};
9 changes: 5 additions & 4 deletions src/components/atoms/Alert/Alert.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import * as React from 'react';

import cn from 'classnames';

import { Icon } from '../';

export type AlertType = 'success' | 'info' | 'warning' | 'error';
export interface AlertProps {

export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
type?: AlertType;
className?: string;
message?: string;
description?: string;
closable?: boolean;
outlined?: boolean;
icon?: boolean;
Expand All @@ -24,6 +23,7 @@ export const Alert: React.FC<AlertProps> = ({
closable,
className,
children,
...props
}) => {
const [closed, setClosed] = React.useState(false);

Expand All @@ -36,6 +36,7 @@ export const Alert: React.FC<AlertProps> = ({
{ 'ebs-alert--outlined': outlined },
className,
)}
{...props}
>
{icon && <Icon type={type} />}

Expand Down
14 changes: 10 additions & 4 deletions src/components/atoms/Animated.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,25 @@ import * as React from 'react';
import cn from 'classnames';
import AnimateHeight from 'react-animate-height';

interface Props {
export interface AnimatedProps
extends Omit<Omit<Omit<React.HTMLAttributes<HTMLDivElement>, 'aria-hidden'>, 'onAnimationStart'>, 'onAnimationEnd'> {
startFrom?: string | number;
debounce?: number;
duration?: number;
className?: string;
loading?: boolean;
disabled?: boolean;

// lots of conflicts from Animated's types
children: any;
}

export const Animated: React.FC<Props> = ({ startFrom = '0%', debounce = 1, duration = 500, className, ...props }) => {
export const Animated: React.FC<AnimatedProps> = ({
startFrom = '0%',
debounce = 1,
duration = 500,
className,
...props
}) => {
const [loading, setLoading] = React.useState(true);
const timer = React.useRef<NodeJS.Timeout>();

Expand All @@ -41,7 +47,7 @@ export const Animated: React.FC<Props> = ({ startFrom = '0%', debounce = 1, dura
}

return (
<AnimateHeight duration={duration} height={loading ? startFrom : 'auto'} className={cn(className)}>
<AnimateHeight {...props} duration={duration} height={loading ? startFrom : 'auto'} className={cn(className)}>
{props.children}
</AnimateHeight>
);
Expand Down
126 changes: 35 additions & 91 deletions src/components/atoms/Avatar/Avatar.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,53 @@
import * as React from 'react';
import SizeSwitcher from 'components/SizeSwitcher';
import { Template } from 'components/storybook';

import { Avatar, AvatarCard, AvatarInline } from './';
import { AvatarSize } from './AvatarCard';
import { Avatar, AvatarProps } from './Avatar';
import { AvatarCard, CardProps } from './AvatarCard';
import { AvatarInline } from './AvatarInline';
import { exportStory } from '../../../libs';

export default {
title: exportStory('Avatar', 'atoms'),
component: Avatar,
subcomponents: { AvatarCard, AvatarInline },
argTypes: {
icon: { control: 'text' },
shortAlt: { control: 'text' },
},
};

const sizes = ['small', 'big'];

export const regularWithPhoto = (): React.ReactElement => (
<SizeSwitcher sizes={sizes} defaultSize="small">
{(size) => (
<Avatar
size={size as AvatarSize}
img="https://s3.amazonaws.com/TWFiles/328702/userAvatar/tf_ae0f94af-4f65-47f5-bc9e-e5cebb5537e2.photo_2018-08-07_16-57-45.jpg"
alt="Wladimir Zhosan"
/>
)}
</SizeSwitcher>
);

export const regularWithOutPhoto = (): React.ReactElement => (
<SizeSwitcher sizes={sizes} defaultSize="small">
{(size) => <Avatar size={size as AvatarSize} alt="Wladimir Zhosan" />}
</SizeSwitcher>
);

export const regularCicledWithPhoto = (): React.ReactElement => (
<SizeSwitcher sizes={sizes} defaultSize="small">
{(size) => (
<Avatar
circle
size={size as AvatarSize}
img="https://s3.amazonaws.com/TWFiles/328702/userAvatar/tf_ae0f94af-4f65-47f5-bc9e-e5cebb5537e2.photo_2018-08-07_16-57-45.jpg"
alt="Wladimir Zhosan"
/>
)}
</SizeSwitcher>
);

export const regularCicledWithoutPhoto = (): React.ReactElement => (
<SizeSwitcher sizes={sizes} defaultSize="small">
{(size) => <Avatar size={size as AvatarSize} circle alt="Wladimir Zhosan" />}
</SizeSwitcher>
);

export const statusActive = (): React.ReactElement => (
<SizeSwitcher sizes={sizes} defaultSize="small">
{(size) => <Avatar size={size as AvatarSize} alt="Wladimir Zhosan" status="active" />}
</SizeSwitcher>
);

export const statusUnactive = (): React.ReactElement => (
<SizeSwitcher sizes={sizes} defaultSize="small">
{(size) => <Avatar size={size as AvatarSize} alt="Wladimir Zhosan" status="unactive" />}
</SizeSwitcher>
export const Regular: React.FC<AvatarProps> & { args: AvatarProps } = ({ children, ...props }) => (
<Template>
<Avatar {...props} />
</Template>
);

export const cardWithPhoto = (): React.ReactElement => (
<SizeSwitcher sizes={sizes} defaultSize="small">
{(size) => (
<AvatarCard
size={size as AvatarSize}
img="https://s3.amazonaws.com/TWFiles/328702/userAvatar/tf_ae0f94af-4f65-47f5-bc9e-e5cebb5537e2.photo_2018-08-07_16-57-45.jpg"
alt="Wladimir Zhosan"
/>
)}
</SizeSwitcher>
);
Regular.args = {
type: 'regular',
img:
'https://s3.amazonaws.com/TWFiles/328702/userAvatar/tf_ae0f94af-4f65-47f5-bc9e-e5cebb5537e2.photo_2018-08-07_16-57-45.jpg',
alt: 'Wladimir Zhosan',
size: 'small',
};

export const cardWithOutPhoto = (): React.ReactElement => (
<SizeSwitcher sizes={sizes} defaultSize="small">
{(size) => <AvatarCard size={size as AvatarSize} alt="Wladimir Zhosan" />}
</SizeSwitcher>
export const Card: React.FC<CardProps> & { args: CardProps } = ({ children, ...props }) => (
<Template>
<AvatarCard {...props} />
</Template>
);

export const cardWithStatus = (): React.ReactElement => (
<SizeSwitcher sizes={sizes} defaultSize="small">
{(size) => <AvatarCard size={size as AvatarSize} alt="Wladimir Zhosan" status="active" />}
</SizeSwitcher>
);
Card.args = Regular.args;

export const avatarInline = (): React.ReactElement => (
<SizeSwitcher sizes={sizes} defaultSize="small">
{(size) => (
<AvatarInline size={size as AvatarSize} alt="Wladimir Zhosan" status="active" description="Administrator" />
)}
</SizeSwitcher>
export const Inline: React.FC<CardProps> & { args: CardProps } = ({ children, ...props }) => (
<Template>
<AvatarInline {...props} />
</Template>
);

export const avatarInlineDynamicColor = (): React.ReactElement => (
<SizeSwitcher sizes={sizes} defaultSize="small">
{(size) => (
<AvatarInline
size={size as AvatarSize}
alt="Wladimir Zhosan"
status="active"
type="dynamic"
description="Administrator"
/>
)}
</SizeSwitcher>
);
Inline.args = {
status: 'active',
description: 'Administrator',
alt: Regular.args.alt,
type: Regular.args.type,
size: Regular.args.size,
};
Loading

0 comments on commit 9361b29

Please sign in to comment.