@spaced-out/ui-design-system 0.1.68 → 0.1.69
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/CHANGELOG.md +7 -0
- package/lib/components/Icon/Icon.docs.js +142 -0
- package/lib/components/Icon/Icon.docs.js.flow +110 -0
- package/lib/components/Icon/SemanticIcon.js +3 -3
- package/lib/components/Icon/SemanticIcon.js.flow +3 -2
- package/lib/components/Icon/SemanticIcon.module.css +20 -4
- package/lib/components/KPIBox/KPIBox.js +1 -1
- package/lib/components/KPIBox/KPIBox.js.flow +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.1.69](https://github.com/spaced-out/ui-design-system/compare/v0.1.68...v0.1.69) (2023-12-06)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* 🆕 icon with background component ([3ed7a90](https://github.com/spaced-out/ui-design-system/commit/3ed7a90f471feef036a055d17a1af314db52a437))
|
|
11
|
+
|
|
5
12
|
### [0.1.68](https://github.com/spaced-out/ui-design-system/compare/v0.1.67...v0.1.68) (2023-12-04)
|
|
6
13
|
|
|
7
14
|
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ICON_DOCS = void 0;
|
|
7
|
+
var _typography = require("../../types/typography");
|
|
8
|
+
var _Icon = require("./Icon");
|
|
9
|
+
|
|
10
|
+
const colorOptions = [...Object.values(_typography.TEXT_COLORS)];
|
|
11
|
+
const iconSize = [...Object.values(_Icon.ICON_SIZE)];
|
|
12
|
+
const ICON_DOCS = {
|
|
13
|
+
argTypes: {
|
|
14
|
+
type: {
|
|
15
|
+
description: 'Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone',
|
|
16
|
+
options: ['regular', 'solid', 'duotone', 'brands'],
|
|
17
|
+
control: {
|
|
18
|
+
type: 'select'
|
|
19
|
+
},
|
|
20
|
+
table: {
|
|
21
|
+
type: {
|
|
22
|
+
summary: 'string'
|
|
23
|
+
},
|
|
24
|
+
defaultValue: {
|
|
25
|
+
summary: 'regular'
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
name: {
|
|
30
|
+
description: 'Icon Name represents name of icon as supported by fontawesome',
|
|
31
|
+
type: {
|
|
32
|
+
required: true
|
|
33
|
+
},
|
|
34
|
+
table: {
|
|
35
|
+
type: {
|
|
36
|
+
summary: 'string'
|
|
37
|
+
},
|
|
38
|
+
defaultValue: {
|
|
39
|
+
summary: 'face-party'
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
color: {
|
|
44
|
+
description: 'Same set of colors as supported in text',
|
|
45
|
+
options: colorOptions,
|
|
46
|
+
control: {
|
|
47
|
+
type: 'select'
|
|
48
|
+
},
|
|
49
|
+
table: {
|
|
50
|
+
type: {
|
|
51
|
+
summary: 'string'
|
|
52
|
+
},
|
|
53
|
+
defaultValue: {
|
|
54
|
+
summary: 'primary'
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
size: {
|
|
59
|
+
description: 'Icon supports three size variants namely small and medium. `small` < `medium` < `large`',
|
|
60
|
+
options: iconSize,
|
|
61
|
+
control: {
|
|
62
|
+
type: 'select'
|
|
63
|
+
},
|
|
64
|
+
table: {
|
|
65
|
+
type: {
|
|
66
|
+
summary: 'string'
|
|
67
|
+
},
|
|
68
|
+
defaultValue: {
|
|
69
|
+
summary: 'medium'
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
swapOpacity: {
|
|
74
|
+
name: 'swapOpacity',
|
|
75
|
+
description: `Swap the default opacity of each layer in a duotone icon.`,
|
|
76
|
+
options: [false, true],
|
|
77
|
+
control: 'boolean',
|
|
78
|
+
table: {
|
|
79
|
+
type: {
|
|
80
|
+
summary: 'boolean'
|
|
81
|
+
},
|
|
82
|
+
defaultValue: {
|
|
83
|
+
summary: false
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
className: {
|
|
88
|
+
description: 'External className to be applied on container',
|
|
89
|
+
control: {
|
|
90
|
+
type: 'text'
|
|
91
|
+
},
|
|
92
|
+
table: {
|
|
93
|
+
type: {
|
|
94
|
+
summary: 'string'
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
onClick: {
|
|
99
|
+
description: 'onClick handler',
|
|
100
|
+
action: 'clicked',
|
|
101
|
+
table: {
|
|
102
|
+
type: {
|
|
103
|
+
summary: '(SyntheticEvent<HTMLElement>) => mixed'
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
ariaLabel: {
|
|
108
|
+
control: {
|
|
109
|
+
type: 'text'
|
|
110
|
+
},
|
|
111
|
+
description: '**aria-label** should be added where `ClickableIcon` and `CloseIcon` is used. This would avoid accessibility violations in screen readers',
|
|
112
|
+
table: {
|
|
113
|
+
type: {
|
|
114
|
+
summary: 'string'
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
parameters: {
|
|
120
|
+
componentSubtitle: 'Generates a Icon component',
|
|
121
|
+
docs: {
|
|
122
|
+
description: {
|
|
123
|
+
component: `
|
|
124
|
+
\`\`\`js
|
|
125
|
+
import {
|
|
126
|
+
Icon,
|
|
127
|
+
ClickableIcon,
|
|
128
|
+
CloseIcon,
|
|
129
|
+
SemanticIcon
|
|
130
|
+
} from "@spaced-out/ui-design-system/lib/components/Icon";
|
|
131
|
+
\`\`\`
|
|
132
|
+
Icon component uses <a href="https://fontawesome.com/icons" target="_blank">fontawesome</a> icon internally.
|
|
133
|
+
The name prop has be to consistent with one used in fontawesome.
|
|
134
|
+
`
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
storySource: {
|
|
138
|
+
componentPath: '/src/components/Icon/Icon.js'
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
exports.ICON_DOCS = ICON_DOCS;
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
// @flow strict
|
|
2
|
+
|
|
3
|
+
import {TEXT_COLORS} from '../../types/typography';
|
|
4
|
+
|
|
5
|
+
import {ICON_SIZE} from './Icon';
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
const colorOptions: Array<mixed> = [...Object.values(TEXT_COLORS)];
|
|
9
|
+
const iconSize: Array<mixed> = [...Object.values(ICON_SIZE)];
|
|
10
|
+
|
|
11
|
+
export const ICON_DOCS = {
|
|
12
|
+
argTypes: {
|
|
13
|
+
type: {
|
|
14
|
+
description:
|
|
15
|
+
'Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone',
|
|
16
|
+
options: ['regular', 'solid', 'duotone', 'brands'],
|
|
17
|
+
control: {type: 'select'},
|
|
18
|
+
table: {
|
|
19
|
+
type: {summary: 'string'},
|
|
20
|
+
defaultValue: {summary: 'regular'},
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
name: {
|
|
24
|
+
description:
|
|
25
|
+
'Icon Name represents name of icon as supported by fontawesome',
|
|
26
|
+
type: {required: true},
|
|
27
|
+
table: {
|
|
28
|
+
type: {summary: 'string'},
|
|
29
|
+
defaultValue: {summary: 'face-party'},
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
color: {
|
|
33
|
+
description: 'Same set of colors as supported in text',
|
|
34
|
+
options: colorOptions,
|
|
35
|
+
control: {type: 'select'},
|
|
36
|
+
table: {
|
|
37
|
+
type: {summary: 'string'},
|
|
38
|
+
defaultValue: {summary: 'primary'},
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
size: {
|
|
42
|
+
description:
|
|
43
|
+
'Icon supports three size variants namely small and medium. `small` < `medium` < `large`',
|
|
44
|
+
options: iconSize,
|
|
45
|
+
control: {type: 'select'},
|
|
46
|
+
table: {
|
|
47
|
+
type: {summary: 'string'},
|
|
48
|
+
defaultValue: {summary: 'medium'},
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
swapOpacity: {
|
|
52
|
+
name: 'swapOpacity',
|
|
53
|
+
description: `Swap the default opacity of each layer in a duotone icon.`,
|
|
54
|
+
options: [false, true],
|
|
55
|
+
control: 'boolean',
|
|
56
|
+
table: {
|
|
57
|
+
type: {summary: 'boolean'},
|
|
58
|
+
defaultValue: {summary: false},
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
className: {
|
|
62
|
+
description: 'External className to be applied on container',
|
|
63
|
+
control: {
|
|
64
|
+
type: 'text',
|
|
65
|
+
},
|
|
66
|
+
table: {
|
|
67
|
+
type: {summary: 'string'},
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
onClick: {
|
|
71
|
+
description: 'onClick handler',
|
|
72
|
+
action: 'clicked',
|
|
73
|
+
table: {
|
|
74
|
+
type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
ariaLabel: {
|
|
78
|
+
control: {
|
|
79
|
+
type: 'text',
|
|
80
|
+
},
|
|
81
|
+
description:
|
|
82
|
+
'**aria-label** should be added where `ClickableIcon` and `CloseIcon` is used. This would avoid accessibility violations in screen readers',
|
|
83
|
+
table: {
|
|
84
|
+
type: {summary: 'string'},
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
parameters: {
|
|
89
|
+
componentSubtitle: 'Generates a Icon component',
|
|
90
|
+
docs: {
|
|
91
|
+
description: {
|
|
92
|
+
component: `
|
|
93
|
+
\`\`\`js
|
|
94
|
+
import {
|
|
95
|
+
Icon,
|
|
96
|
+
ClickableIcon,
|
|
97
|
+
CloseIcon,
|
|
98
|
+
SemanticIcon
|
|
99
|
+
} from "@spaced-out/ui-design-system/lib/components/Icon";
|
|
100
|
+
\`\`\`
|
|
101
|
+
Icon component uses <a href="https://fontawesome.com/icons" target="_blank">fontawesome</a> icon internally.
|
|
102
|
+
The name prop has be to consistent with one used in fontawesome.
|
|
103
|
+
`,
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
storySource: {
|
|
107
|
+
componentPath: '/src/components/Icon/Icon.js',
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
};
|
|
@@ -16,16 +16,16 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
16
16
|
const SemanticIcon = _ref => {
|
|
17
17
|
let {
|
|
18
18
|
semantic = 'neutral',
|
|
19
|
-
type = 'solid',
|
|
20
19
|
classNames,
|
|
20
|
+
size = 'medium',
|
|
21
21
|
...iconProps
|
|
22
22
|
} = _ref;
|
|
23
23
|
return /*#__PURE__*/React.createElement(React.Fragment, null, !!iconProps.name && /*#__PURE__*/React.createElement("div", {
|
|
24
|
-
className: (0, _classify.default)(_SemanticIconModule.default.iconContainer, _SemanticIconModule.default[semantic], classNames?.wrapper)
|
|
24
|
+
className: (0, _classify.default)(_SemanticIconModule.default.iconContainer, _SemanticIconModule.default[semantic], _SemanticIconModule.default[size], classNames?.wrapper)
|
|
25
25
|
}, /*#__PURE__*/React.createElement(_Icon.Icon, _extends({}, iconProps, {
|
|
26
26
|
className: (0, _classify.default)(iconProps.className, classNames?.icon),
|
|
27
27
|
color: _typography.TEXT_COLORS[semantic],
|
|
28
|
-
|
|
28
|
+
size: size === 'large' ? 'medium' : size
|
|
29
29
|
}))));
|
|
30
30
|
};
|
|
31
31
|
exports.SemanticIcon = SemanticIcon;
|
|
@@ -22,8 +22,8 @@ export type SemanticIconProps = {
|
|
|
22
22
|
|
|
23
23
|
export const SemanticIcon = ({
|
|
24
24
|
semantic = 'neutral',
|
|
25
|
-
type = 'solid',
|
|
26
25
|
classNames,
|
|
26
|
+
size = 'medium',
|
|
27
27
|
...iconProps
|
|
28
28
|
}: SemanticIconProps): React.Node => (
|
|
29
29
|
<>
|
|
@@ -32,6 +32,7 @@ export const SemanticIcon = ({
|
|
|
32
32
|
className={classify(
|
|
33
33
|
css.iconContainer,
|
|
34
34
|
css[semantic],
|
|
35
|
+
css[size],
|
|
35
36
|
classNames?.wrapper,
|
|
36
37
|
)}
|
|
37
38
|
>
|
|
@@ -39,7 +40,7 @@ export const SemanticIcon = ({
|
|
|
39
40
|
{...iconProps}
|
|
40
41
|
className={classify(iconProps.className, classNames?.icon)}
|
|
41
42
|
color={TEXT_COLORS[semantic]}
|
|
42
|
-
|
|
43
|
+
size={size === 'large' ? 'medium' : size}
|
|
43
44
|
/>
|
|
44
45
|
</div>
|
|
45
46
|
)}
|
|
@@ -7,8 +7,9 @@
|
|
|
7
7
|
) from '../../styles/variables/_color.css';
|
|
8
8
|
|
|
9
9
|
@value (
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
size42,
|
|
11
|
+
size34,
|
|
12
|
+
size60
|
|
12
13
|
) from '../../styles/variables/_size.css';
|
|
13
14
|
|
|
14
15
|
@value (
|
|
@@ -18,14 +19,29 @@
|
|
|
18
19
|
.iconContainer {
|
|
19
20
|
display: flex;
|
|
20
21
|
width: fit-content;
|
|
21
|
-
min-width:
|
|
22
|
-
min-height:
|
|
22
|
+
min-width: size34;
|
|
23
|
+
min-height: size34;
|
|
23
24
|
justify-content: center;
|
|
24
25
|
align-items: center;
|
|
25
26
|
border-radius: borderRadiusMedium;
|
|
26
27
|
background-color: colorNeutralLightest;
|
|
27
28
|
}
|
|
28
29
|
|
|
30
|
+
.medium {
|
|
31
|
+
width: size42;
|
|
32
|
+
height: size42;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.small {
|
|
36
|
+
width: size34;
|
|
37
|
+
height: size34;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.large {
|
|
41
|
+
width: size60;
|
|
42
|
+
height: size60;
|
|
43
|
+
}
|
|
44
|
+
|
|
29
45
|
.neutral {
|
|
30
46
|
background-color: colorNeutralLightest;
|
|
31
47
|
}
|