agroptima-design-system 0.16.2-beta.4 → 0.16.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -3
- package/src/atoms/Card/Card.scss +9 -5
- package/src/atoms/Card/Card.tsx +2 -5
- package/src/atoms/CardMenu/CardMenu.scss +1 -14
- package/src/atoms/CardMenu/CardMenuOption.tsx +7 -17
- package/src/atoms/Input.scss +0 -4
- package/src/atoms/Input.tsx +6 -11
- package/src/icons/add.svg +1 -1
- package/src/icons/calendar.svg +1 -1
- package/src/icons/change-password.svg +1 -1
- package/src/icons/double-arrow-left.svg +1 -1
- package/src/icons/double-arrow-right.svg +1 -1
- package/src/icons/export.svg +1 -1
- package/src/icons/import.svg +1 -1
- package/src/icons/logout.svg +1 -1
- package/src/icons/product.svg +1 -1
- package/src/icons/salesman.svg +1 -1
- package/src/icons/settings.svg +1 -1
- package/src/stories/Card.stories.js +3 -27
- package/src/stories/CardMenu.stories.js +11 -40
- package/src/stories/Changelog.stories.mdx +1 -3
- package/tests/CardMenuOption.spec.tsx +1 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "agroptima-design-system",
|
|
3
|
-
"version": "0.16.2
|
|
3
|
+
"version": "0.16.2",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "npm run storybook",
|
|
6
6
|
"storybook": "storybook dev -p 6006 --ci",
|
|
@@ -10,8 +10,7 @@
|
|
|
10
10
|
"lint:fix": "eslint src --fix",
|
|
11
11
|
"types": "tsc --noEmit",
|
|
12
12
|
"chromatic": "npx chromatic --exit-zero-on-changes",
|
|
13
|
-
"test": "jest"
|
|
14
|
-
"publish:beta": "npm publish --tag beta"
|
|
13
|
+
"test": "jest"
|
|
15
14
|
},
|
|
16
15
|
"dependencies": {
|
|
17
16
|
"@storybook/addon-designs": "^7.0.5",
|
package/src/atoms/Card/Card.scss
CHANGED
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
flex-direction: column;
|
|
9
9
|
gap: config.$space-1x;
|
|
10
10
|
padding: config.$space-3x;
|
|
11
|
-
width: 100%;
|
|
12
11
|
|
|
13
12
|
p {
|
|
14
13
|
margin: 0;
|
|
@@ -58,10 +57,15 @@
|
|
|
58
57
|
@include typography.body-regular-disabled;
|
|
59
58
|
background: color_alias.$neutral-color-50;
|
|
60
59
|
}
|
|
60
|
+
}
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
// Media queries
|
|
63
|
+
// Mobile case
|
|
64
|
+
@media only screen and (min-width: breakpoints.$small) and (max-width: breakpoints.$medium) {
|
|
65
|
+
width: 100%;
|
|
66
|
+
}
|
|
67
|
+
// Tablet & Desktop cases
|
|
68
|
+
@media only screen and (min-width: breakpoints.$medium) {
|
|
69
|
+
width: 18.625rem;
|
|
66
70
|
}
|
|
67
71
|
}
|
package/src/atoms/Card/Card.tsx
CHANGED
|
@@ -7,25 +7,22 @@ export type Variant = 'primary'
|
|
|
7
7
|
export interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
8
8
|
variant?: Variant
|
|
9
9
|
isDisabled?: boolean
|
|
10
|
-
isActive?: boolean
|
|
11
10
|
}
|
|
12
11
|
|
|
13
12
|
export function Card({
|
|
14
13
|
className,
|
|
15
14
|
variant = 'primary',
|
|
16
15
|
isDisabled = false,
|
|
17
|
-
isActive = false,
|
|
18
16
|
children,
|
|
19
17
|
...props
|
|
20
18
|
}: CardProps): React.JSX.Element {
|
|
21
19
|
const cssClasses = classNames('card', className, variant, {
|
|
22
20
|
disabled: isDisabled,
|
|
23
|
-
active: isActive,
|
|
24
21
|
})
|
|
25
22
|
|
|
26
23
|
return (
|
|
27
|
-
<
|
|
24
|
+
<div className={cssClasses} {...props}>
|
|
28
25
|
{children}
|
|
29
|
-
</
|
|
26
|
+
</div>
|
|
30
27
|
)
|
|
31
28
|
}
|
|
@@ -13,16 +13,12 @@
|
|
|
13
13
|
gap: config.$space-3x;
|
|
14
14
|
border-radius: config.$corner-radius-xxs;
|
|
15
15
|
border-bottom: 1px solid color_alias.$neutral-color-200;
|
|
16
|
-
text-decoration: none;
|
|
17
16
|
cursor: default;
|
|
18
|
-
|
|
19
|
-
text-decoration: none;
|
|
20
|
-
}
|
|
17
|
+
|
|
21
18
|
@include typography.body-regular-primary;
|
|
22
19
|
|
|
23
20
|
.icon {
|
|
24
21
|
width: config.$icon-size-4x;
|
|
25
|
-
min-width: config.$icon-size-4x;
|
|
26
22
|
height: config.$icon-size-4x;
|
|
27
23
|
> svg {
|
|
28
24
|
width: 100%;
|
|
@@ -58,15 +54,6 @@
|
|
|
58
54
|
&.primary {
|
|
59
55
|
background: color_alias.$neutral-white;
|
|
60
56
|
|
|
61
|
-
&.active {
|
|
62
|
-
background-color: color_alias.$primary-color-50;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
&.error {
|
|
66
|
-
border: 1px solid color_alias.$error-color-600;
|
|
67
|
-
background-color: color_alias.$error-color-50;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
57
|
.icon {
|
|
71
58
|
> svg {
|
|
72
59
|
fill: color_alias.$primary-color-600;
|
|
@@ -1,21 +1,17 @@
|
|
|
1
1
|
import { Icon, IconType } from '../Icon'
|
|
2
2
|
import './CardMenu.scss'
|
|
3
3
|
import { classNames } from '../../utils/classNames'
|
|
4
|
-
import Link, { LinkProps as NextLinkProps } from 'next/link'
|
|
5
4
|
|
|
6
5
|
export type Variant = 'primary'
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
export interface CardMenuOptionProps
|
|
8
|
+
extends React.ComponentPropsWithoutRef<'div'> {
|
|
10
9
|
id?: string
|
|
11
10
|
variant?: Variant
|
|
12
11
|
icon: IconType
|
|
13
12
|
title: string
|
|
14
13
|
description?: string
|
|
15
14
|
disabled?: boolean
|
|
16
|
-
href: string
|
|
17
|
-
active?: boolean
|
|
18
|
-
error?: boolean
|
|
19
15
|
}
|
|
20
16
|
|
|
21
17
|
export function CardMenuOption({
|
|
@@ -26,35 +22,29 @@ export function CardMenuOption({
|
|
|
26
22
|
title,
|
|
27
23
|
description,
|
|
28
24
|
disabled,
|
|
29
|
-
href,
|
|
30
|
-
active,
|
|
31
|
-
error,
|
|
32
25
|
...props
|
|
33
26
|
}: CardMenuOptionProps): React.JSX.Element {
|
|
34
27
|
const cssClasses = classNames('card-menu-option', variant, className, {
|
|
35
|
-
disabled,
|
|
36
|
-
active,
|
|
37
|
-
error,
|
|
28
|
+
disabled: disabled,
|
|
38
29
|
})
|
|
39
30
|
|
|
40
31
|
return (
|
|
41
|
-
<
|
|
32
|
+
<div
|
|
42
33
|
role="menuitem"
|
|
43
34
|
className={cssClasses}
|
|
44
|
-
href={disabled ? '#' : href}
|
|
45
|
-
aria-disabled={disabled}
|
|
46
35
|
{...props}
|
|
36
|
+
aria-disabled={disabled}
|
|
47
37
|
>
|
|
48
38
|
<div className="left">
|
|
49
39
|
<div className="title-container">
|
|
50
40
|
<Icon name={icon} className={variant} />
|
|
51
41
|
<span className="title">{title}</span>
|
|
52
42
|
</div>
|
|
53
|
-
|
|
43
|
+
<p className="content">{description}</p>
|
|
54
44
|
</div>
|
|
55
45
|
<div className="right">
|
|
56
46
|
<Icon name="AngleRight" className={variant} />
|
|
57
47
|
</div>
|
|
58
|
-
</
|
|
48
|
+
</div>
|
|
59
49
|
)
|
|
60
50
|
}
|
package/src/atoms/Input.scss
CHANGED
package/src/atoms/Input.tsx
CHANGED
|
@@ -13,7 +13,6 @@ export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
|
|
|
13
13
|
icon?: IconType
|
|
14
14
|
helpText?: string
|
|
15
15
|
variant?: InputVariant
|
|
16
|
-
fullWidth?: boolean
|
|
17
16
|
id?: string
|
|
18
17
|
errors?: string[]
|
|
19
18
|
}
|
|
@@ -28,7 +27,6 @@ export function Input({
|
|
|
28
27
|
variant = 'primary',
|
|
29
28
|
disabled,
|
|
30
29
|
type = 'text',
|
|
31
|
-
fullWidth = false,
|
|
32
30
|
name,
|
|
33
31
|
id,
|
|
34
32
|
errors,
|
|
@@ -36,6 +34,10 @@ export function Input({
|
|
|
36
34
|
}: InputProps): React.JSX.Element {
|
|
37
35
|
const identifier = id || name
|
|
38
36
|
const [showPassword, setShowPassword] = useState(false)
|
|
37
|
+
const cssClasses = classNames('input', className, {
|
|
38
|
+
'with-icon': icon,
|
|
39
|
+
invalid: errors?.length,
|
|
40
|
+
})
|
|
39
41
|
const helpTexts = buildHelpText(helpText, errors)
|
|
40
42
|
|
|
41
43
|
function handlePasswordIcon() {
|
|
@@ -53,11 +55,7 @@ export function Input({
|
|
|
53
55
|
}
|
|
54
56
|
|
|
55
57
|
return (
|
|
56
|
-
<div
|
|
57
|
-
className={classNames('input-group', variant, className, {
|
|
58
|
-
'full-width': fullWidth,
|
|
59
|
-
})}
|
|
60
|
-
>
|
|
58
|
+
<div className={`input-group ${variant}`}>
|
|
61
59
|
{!hideLabel && (
|
|
62
60
|
<label className="input-label" htmlFor={identifier}>
|
|
63
61
|
{label}
|
|
@@ -67,10 +65,7 @@ export function Input({
|
|
|
67
65
|
{icon && <Icon className="left-icon" name={icon} />}
|
|
68
66
|
<input
|
|
69
67
|
id={identifier}
|
|
70
|
-
className={
|
|
71
|
-
'with-icon': icon,
|
|
72
|
-
invalid: errors?.length,
|
|
73
|
-
})}
|
|
68
|
+
className={cssClasses}
|
|
74
69
|
disabled={disabled}
|
|
75
70
|
type={handleInputType()}
|
|
76
71
|
name={name}
|
package/src/icons/add.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="#444" xmlns="http://www.w3.org/2000/svg"><path d="M20 11.429h-8.571V20H8.57v-8.571H0V8.57h8.571V0h2.858v8.571H20v2.858Z" fill="#444"/><defs><clipPath id="add__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>
|
package/src/icons/calendar.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 2h-1V0h-2v2H6V0H4v2H3c-1.11 0-1.99.9-1.99 2L1 18a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2Zm0 16H3V8h14v10Zm0-12H3V4h14v2Zm-7 5h5v5h-5v-5Z" fill="#444"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.91 13.167h18.18V15H.91v-1.833Zm1.045-3.713.772-1.357.773 1.357 1.182-.687-.773-1.357h1.546V6.035H3.909l.773-1.348L3.5 4l-.773 1.348L1.955 4l-1.182.688.772 1.347H0V7.41h1.545L.773 8.767l1.182.687Zm6.09-.687 1.182.687L10 8.097l.773 1.357 1.181-.687-.772-1.357h1.545V6.035h-1.545l.772-1.348L10.773 4 10 5.348 9.227 4l-1.182.688.773 1.347H7.273V7.41h1.545l-.773 1.357ZM20 6.035h-1.546l.773-1.348L18.046 4l-.773 1.348L16.5 4l-1.182.688.773 1.347h-1.546V7.41h1.546l-.773 1.357 1.182.687.773-1.357.773 1.357 1.181-.687-.773-1.357H20V6.035Z" fill="#444"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.907 19 20 16.885 13.201 10 20 3.115 17.907 1 9 10l8.907 9Z" fill="#444"/><path d="M8.907 19 11 16.885 4.201 10 11 3.115 8.907 1 0 10l8.907 9Z" fill="#444"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.093 1 0 3.115 6.799 10 0 16.885 2.093 19 11 10 2.093 1Z" fill="#444"/><path d="M11.093 1 9 3.115 15.799 10 9 16.885 11.093 19 20 10l-8.907-9Z" fill="#444"/></svg>
|
package/src/icons/export.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#export__a)"><path d="M17.5 13.75v3.75h-15v-3.75H0v3.75C0 18.875 1.125 20 2.5 20h15c1.375 0 2.5-1.125 2.5-2.5v-3.75h-2.5ZM3.75 6.25l1.763 1.762L8.75 4.787V15h2.5V4.787l3.238 3.225L16.25 6.25 10 0 3.75 6.25Z" fill="#444"/></g><defs><clipPath id="export__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>
|
package/src/icons/import.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 13.75v3.75h-15v-3.75H0v3.75C0 18.875 1.125 20 2.5 20h15c1.375 0 2.5-1.125 2.5-2.5v-3.75h-2.5Zm-1.25-5-1.762-1.763-3.238 3.226V0h-2.5v10.213L5.513 6.988 3.75 8.75 10 15l6.25-6.25Z" fill="#444"/></svg>
|
package/src/icons/logout.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#logout__a)"><path d="m15.556 5.556-1.567 1.566 1.755 1.767H6.667v2.222h9.077l-1.755 1.756 1.567 1.577L20 10l-4.444-4.444ZM2.222 2.222H10V0H2.222C1 0 0 1 0 2.222v15.556C0 19 1 20 2.222 20H10v-2.222H2.222V2.222Z" fill="#444"/></g><defs><clipPath id="logout__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>
|
package/src/icons/product.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#product__a)" fill="#444"><path d="M11.404 0H8.596v2.922h2.808V0Zm0 4.832V3.596H8.596v1.236c0 1.46-2.023 2.022-2.023 4.607v9.606c0 .528.428.955.955.955h4.944a.955.955 0 0 0 .955-.955V9.439c0-2.585-2.023-3.147-2.023-4.607Zm.45 11.91H8.146V9.325h3.708v7.415Z"/></g><defs><clipPath id="product__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>
|
package/src/icons/salesman.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.333 2.5H1.667C.75 2.5 0 3.25 0 4.167v11.666C0 16.75.75 17.5 1.667 17.5h16.666c.917 0 1.659-.75 1.659-1.667L20 4.167c0-.917-.75-1.667-1.667-1.667Zm0 13.333H1.667V4.167h16.666v11.666ZM7.5 10C8.875 10 10 8.875 10 7.5S8.875 5 7.5 5A2.507 2.507 0 0 0 5 7.5C5 8.875 6.125 10 7.5 10Zm0-3.333c.458 0 .833.375.833.833a.836.836 0 0 1-.833.833.836.836 0 0 1-.833-.833c0-.458.375-.833.833-.833Zm5 7.158c0-2.083-3.308-2.983-5-2.983-1.692 0-5 .9-5 2.983V15h10v-1.175Zm-7.933-.492c.616-.416 1.85-.833 2.933-.833 1.083 0 2.308.408 2.933.833H4.567Z" fill="#444"/><path d="M17.5 7.5h-4.583v1.25H17.5V7.5Zm0 2.5h-4.583v1.25H17.5V10Z" fill="#444"/></svg>
|
package/src/icons/settings.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#settings__a)"><path d="M17.64 10.98c.042-.32.073-.64.073-.98 0-.34-.031-.66-.072-.98l2.169-1.65a.495.495 0 0 0 .123-.64l-2.056-3.46a.517.517 0 0 0-.452-.25.492.492 0 0 0-.175.03l-2.56 1c-.534-.4-1.11-.73-1.737-.98l-.39-2.65a.497.497 0 0 0-.505-.42H7.946a.497.497 0 0 0-.504.42l-.39 2.65a7.97 7.97 0 0 0-1.738.98l-2.56-1a.597.597 0 0 0-.185-.03c-.174 0-.35.09-.442.25L.071 6.73a.484.484 0 0 0 .124.64l2.169 1.65a7.74 7.74 0 0 0-.072.98c0 .33.03.66.072.98l-2.17 1.65a.495.495 0 0 0-.123.64l2.056 3.46c.093.16.268.25.453.25.061 0 .123-.01.175-.03l2.56-1c.534.4 1.11.73 1.737.98l.39 2.65c.031.24.247.42.504.42h4.112c.257 0 .473-.18.504-.42l.39-2.65a7.955 7.955 0 0 0 1.738-.98l2.56 1c.062.02.123.03.185.03a.51.51 0 0 0 .442-.25l2.056-3.46a.495.495 0 0 0-.123-.64l-2.17-1.65Zm-2.035-1.71c.041.31.052.52.052.73 0 .21-.021.43-.052.73l-.144 1.13.915.7 1.11.84-.72 1.21-1.305-.51-1.069-.42-.925.68c-.442.32-.864.56-1.285.73l-1.09.43-.165 1.13-.205 1.35h-1.44l-.195-1.35-.164-1.13-1.09-.43a5.876 5.876 0 0 1-1.264-.71l-.936-.7-1.09.43-1.305.51-.72-1.21 1.11-.84.915-.7-.144-1.13a8.1 8.1 0 0 1-.051-.74c0-.2.02-.43.051-.73l.144-1.13-.915-.7-1.11-.84.72-1.21 1.305.51 1.07.42.925-.68a6.05 6.05 0 0 1 1.285-.73l1.09-.43.164-1.13L9.283 2h1.429l.195 1.35.164 1.13 1.09.43c.442.18.854.41 1.265.71l.935.7 1.09-.43 1.306-.51.72 1.21-1.1.85-.916.7.144 1.13ZM10.002 6C7.73 6 5.89 7.79 5.89 10s1.84 4 4.112 4c2.272 0 4.112-1.79 4.112-4s-1.84-4-4.112-4Zm0 6c-1.13 0-2.056-.9-2.056-2s.925-2 2.056-2 2.056.9 2.056 2-.925 2-2.056 2Z" fill="#444"/></g><defs><clipPath id="settings__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>
|
|
@@ -399,13 +399,7 @@ export const Primary = {
|
|
|
399
399
|
/>
|
|
400
400
|
</CardHeader>
|
|
401
401
|
<CardContent>
|
|
402
|
-
<p>
|
|
403
|
-
TEKKEN 8 will feature exciting new gameplay focused on “Aggressive”
|
|
404
|
-
tactics. Retaining TEKKEN's unique fighting game identity, the game
|
|
405
|
-
will provide both players and spectators with the series' most
|
|
406
|
-
thrilling experience yet with visceral screen-jarring attacks and
|
|
407
|
-
environments that are both dynamic and destructible.
|
|
408
|
-
</p>
|
|
402
|
+
<p>TEKKEN 8 will feature exciting new gameplay focused on “Aggressive” tactics. Retaining TEKKEN's unique fighting game identity, the game will provide both players and spectators with the series' most thrilling experience yet with visceral screen-jarring attacks and environments that are both dynamic and destructible.</p>
|
|
409
403
|
</CardContent>
|
|
410
404
|
<CardFooter>
|
|
411
405
|
<Button variant="primary-outlined" label="Add to wishlist" />
|
|
@@ -418,18 +412,12 @@ export const Primary = {
|
|
|
418
412
|
export const Disabled = {
|
|
419
413
|
render: () => (
|
|
420
414
|
<div style={{ display: 'flex' }}>
|
|
421
|
-
<Card isDisabled variant="primary">
|
|
415
|
+
<Card isDisabled={true} variant="primary">
|
|
422
416
|
<CardHeader title="Tekken 8">
|
|
423
417
|
<IconButton disabled icon="Delete" accessibilityLabel="Delete game" />
|
|
424
418
|
</CardHeader>
|
|
425
419
|
<CardContent>
|
|
426
|
-
<p>
|
|
427
|
-
TEKKEN 8 will feature exciting new gameplay focused on “Aggressive”
|
|
428
|
-
tactics. Retaining TEKKEN's unique fighting game identity, the game
|
|
429
|
-
will provide both players and spectators with the series' most
|
|
430
|
-
thrilling experience yet with visceral screen-jarring attacks and
|
|
431
|
-
environments that are both dynamic and destructible.
|
|
432
|
-
</p>
|
|
420
|
+
<p>TEKKEN 8 will feature exciting new gameplay focused on “Aggressive” tactics. Retaining TEKKEN's unique fighting game identity, the game will provide both players and spectators with the series' most thrilling experience yet with visceral screen-jarring attacks and environments that are both dynamic and destructible.</p>
|
|
433
421
|
</CardContent>
|
|
434
422
|
<CardFooter>
|
|
435
423
|
<Button variant="primary-outlined" disabled label="Add to wishlist" />
|
|
@@ -438,15 +426,3 @@ export const Disabled = {
|
|
|
438
426
|
</div>
|
|
439
427
|
),
|
|
440
428
|
}
|
|
441
|
-
|
|
442
|
-
export const Active = {
|
|
443
|
-
render: () => (
|
|
444
|
-
<div style={{ display: 'flex' }}>
|
|
445
|
-
<Card isActive>
|
|
446
|
-
<CardHeader title="Fallout 3">
|
|
447
|
-
<IconButton icon="Delete" accessibilityLabel="Delete game" />
|
|
448
|
-
</CardHeader>
|
|
449
|
-
</Card>
|
|
450
|
-
</div>
|
|
451
|
-
),
|
|
452
|
-
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
|
|
3
3
|
import { CardMenu, CardMenuOption } from '../atoms/CardMenu'
|
|
4
|
-
import { isErrored } from 'stream'
|
|
5
4
|
|
|
6
5
|
const figmaPrimaryDesign = {
|
|
7
6
|
design: {
|
|
@@ -30,14 +29,11 @@ const meta = {
|
|
|
30
29
|
description: {
|
|
31
30
|
description: 'Component description text',
|
|
32
31
|
},
|
|
33
|
-
|
|
32
|
+
isDisabled: {
|
|
34
33
|
description: 'Is the component disabled?',
|
|
35
34
|
},
|
|
36
|
-
|
|
37
|
-
description: '
|
|
38
|
-
},
|
|
39
|
-
error: {
|
|
40
|
-
description: 'Is the component error?',
|
|
35
|
+
onClick: {
|
|
36
|
+
description: 'Event triggered when the component is clicked',
|
|
41
37
|
},
|
|
42
38
|
},
|
|
43
39
|
parameters: figmaPrimaryDesign,
|
|
@@ -49,11 +45,12 @@ export const Option = {
|
|
|
49
45
|
render: () => (
|
|
50
46
|
<CardMenuOption
|
|
51
47
|
id="first-menu-option"
|
|
52
|
-
href="#"
|
|
53
48
|
icon="Info"
|
|
54
49
|
variant="primary"
|
|
55
50
|
title="It's dangerous to go alone!"
|
|
56
51
|
description="Take this 🗡️ and this 🛡️ and this 💣 and this 🏹 and this 🔪 and this 🐴 and this 🔫 and this 🔪"
|
|
52
|
+
isDisabled={false}
|
|
53
|
+
onClick={() => alert('click')}
|
|
57
54
|
/>
|
|
58
55
|
),
|
|
59
56
|
}
|
|
@@ -62,7 +59,6 @@ export const DisabledOption = {
|
|
|
62
59
|
render: () => (
|
|
63
60
|
<CardMenuOption
|
|
64
61
|
id="first-menu-option"
|
|
65
|
-
href="#"
|
|
66
62
|
icon="Info"
|
|
67
63
|
variant="primary"
|
|
68
64
|
title="It's dangerous to go alone!"
|
|
@@ -72,60 +68,35 @@ export const DisabledOption = {
|
|
|
72
68
|
),
|
|
73
69
|
}
|
|
74
70
|
|
|
75
|
-
export const ActiveOption = {
|
|
76
|
-
render: () => (
|
|
77
|
-
<CardMenuOption
|
|
78
|
-
id="first-menu-option"
|
|
79
|
-
href="#"
|
|
80
|
-
icon="Info"
|
|
81
|
-
variant="primary"
|
|
82
|
-
title="It's dangerous to go alone!"
|
|
83
|
-
description="Take this 🗡️"
|
|
84
|
-
active
|
|
85
|
-
/>
|
|
86
|
-
),
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
export const ErrorOption = {
|
|
90
|
-
render: () => (
|
|
91
|
-
<CardMenuOption
|
|
92
|
-
id="first-menu-option"
|
|
93
|
-
href="#"
|
|
94
|
-
icon="Info"
|
|
95
|
-
variant="primary"
|
|
96
|
-
title="It's dangerous to go alone!"
|
|
97
|
-
description="Take this 🗡️"
|
|
98
|
-
error
|
|
99
|
-
/>
|
|
100
|
-
),
|
|
101
|
-
}
|
|
102
|
-
|
|
103
71
|
export const Menu = {
|
|
104
72
|
render: () => (
|
|
105
73
|
<CardMenu>
|
|
106
74
|
<CardMenuOption
|
|
107
75
|
id="first-menu-option"
|
|
108
|
-
href="#"
|
|
109
76
|
icon="AddCircle"
|
|
110
77
|
variant="primary"
|
|
111
78
|
title="Title"
|
|
112
79
|
description="Name of the videogame"
|
|
80
|
+
isDisabled={false}
|
|
81
|
+
onClick={() => alert('click title')}
|
|
113
82
|
/>
|
|
114
83
|
<CardMenuOption
|
|
115
84
|
id="second-menu-option"
|
|
116
|
-
href="#"
|
|
117
85
|
icon="Edit"
|
|
118
86
|
variant="primary"
|
|
119
87
|
title="Address"
|
|
120
88
|
description="Videogame company address"
|
|
89
|
+
isDisabled={false}
|
|
90
|
+
onClick={() => alert('click address')}
|
|
121
91
|
/>
|
|
122
92
|
<CardMenuOption
|
|
123
93
|
id="third-menu-option"
|
|
124
|
-
href="#"
|
|
125
94
|
icon="Info"
|
|
126
95
|
variant="primary"
|
|
127
96
|
title="Email"
|
|
128
97
|
description="Videogame company email"
|
|
98
|
+
isDisabled={false}
|
|
99
|
+
onClick={() => alert('click email')}
|
|
129
100
|
/>
|
|
130
101
|
</CardMenu>
|
|
131
102
|
),
|
|
@@ -3,10 +3,8 @@ import { Meta } from "@storybook/addon-docs";
|
|
|
3
3
|
<Meta title="Changelog" />
|
|
4
4
|
# Changelog
|
|
5
5
|
|
|
6
|
-
|
|
7
6
|
## 0.16.2
|
|
8
|
-
-
|
|
9
|
-
- Add active and error state to CardMenuOption component
|
|
7
|
+
- Fixed some icons missing ViewBox
|
|
10
8
|
|
|
11
9
|
## 0.16.1
|
|
12
10
|
- Updated Oultined Button background color
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import { render } from '@testing-library/react'
|
|
2
|
+
import { screen, render } from '@testing-library/react'
|
|
3
3
|
import { CardMenuOption } from '@/atoms/CardMenu/CardMenuOption'
|
|
4
4
|
|
|
5
5
|
describe('CardMenuOption', () => {
|
|
@@ -7,7 +7,6 @@ describe('CardMenuOption', () => {
|
|
|
7
7
|
const { getByRole, getByText, getAllByRole } = render(
|
|
8
8
|
<CardMenuOption
|
|
9
9
|
id="option-one"
|
|
10
|
-
href="#"
|
|
11
10
|
icon="Info"
|
|
12
11
|
title="It's dangerous to go alone!"
|
|
13
12
|
description="Take this sword!"
|