Skip to content

Commit fc75249

Browse files
mfranzkemfranzke
authored
refactor: updated functional iconset (#890)
* refactor: updated functional iconset * refactor: added new icon font set * refactor: added new icons * refactor: added new icons sizes
1 parent 2f58c6c commit fc75249

File tree

8 files changed

+119
-16
lines changed

8 files changed

+119
-16
lines changed

‎packages/db-ui-elements-stencil/src/components/db-icon/db-icon.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@ export class DbIcon {
1515
* The variant attribute specifies the style and size of an icon.
1616
*/
1717
@Prop() variant:
18+
| '16-filled'
1819
| '20-filled'
1920
| '24-filled'
2021
| '32-filled'
2122
| '48-filled'
2223
| '64-filled'
24+
| '16-outline'
2325
| '20-outline'
2426
| '24-outline'
2527
| '32-outline'

‎packages/db-ui-elements-stencil/src/components/db-icon/iconset.array.ts‎

Lines changed: 104 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,88 @@ export const iconsetAction: string[] = [
22
'account',
33
'add',
44
'add-circle',
5+
'add-link',
56
'alarm',
67
'alarm-add',
78
'alert',
89
'alert-on',
910
'alert-off',
11+
'attachment',
12+
'augmented-reality',
13+
'block',
14+
'bookmark',
15+
'bug',
16+
'build',
1017
'calendar',
18+
'camera',
19+
'cash',
1120
'check-circle',
21+
'cloud',
22+
'cloud-download',
23+
'cloud-upload',
24+
'compass',
25+
'copy',
1226
'credit-card',
27+
'dashboard',
1328
'delete',
1429
'discount',
1530
'document',
1631
'done',
1732
'download',
33+
'drag-and-drop',
1834
'edit',
35+
'face-neutral',
36+
'face-sad',
37+
'face-smiling',
1938
'filter',
39+
'fingerprint',
40+
'folder',
41+
'folder-open',
2042
'generic-card',
2143
'giftcard',
44+
'hearing',
45+
'hearing-disabled',
2246
'heart',
23-
'heart-on',
2447
'help',
48+
'image',
2549
'info',
50+
'key',
2651
'legal',
52+
'lightbulb',
53+
'lock-close',
54+
'lock-open',
2755
'log-out',
56+
'logbook',
2857
'minus',
58+
'pin',
2959
'print',
3060
'remove',
61+
'resize',
62+
'save',
3163
'schedule',
3264
'search',
3365
'send',
66+
'sepa',
3467
'settings',
3568
'share',
3669
'shopping-bag',
3770
'shopping-basket',
71+
'shopping-basket-disabled',
3872
'shopping-cart',
73+
'shopping-cart-disabled',
74+
'sort-down',
75+
'sort-up',
3976
'star',
40-
'star-on',
4177
'swap-horizontal',
4278
'swap-vertical',
79+
'thumb-up',
80+
'thumb-up-down',
81+
'translation',
82+
'undo',
4383
'upload',
4484
'visibility',
4585
'visibility-off',
86+
'voucher',
4687
'website',
4788
'zoom-in',
4889
'zoom-out'
@@ -55,6 +96,7 @@ export const iconsetAv: string[] = [
5596
'fast-forward-10',
5697
'fast-forward-30',
5798
'fast-forward-empty',
99+
'microphone',
58100
'pause',
59101
'play',
60102
'skip-backward',
@@ -67,6 +109,8 @@ export const iconsetAv: string[] = [
67109
'volume-up'
68110
];
69111

112+
export const iconsetBrand: string[] = ['logo'];
113+
70114
export const iconsetCommunication: string[] = [
71115
'call',
72116
'chat',
@@ -76,29 +120,61 @@ export const iconsetCommunication: string[] = [
76120
'mail',
77121
'mobile-off',
78122
'mobile-phone',
123+
'question',
124+
'receive-item',
125+
'share-item',
79126
'wifi',
80127
'wifi-off'
81128
];
82129

83130
export const iconsetCovid: string[] = ['mask'];
84131

85132
export const iconsetFacilities: string[] = [
133+
'playground',
134+
'restricted-mobility-toilet',
135+
'shower',
136+
'shower-men',
137+
'shower-women',
138+
'sink',
86139
'wc',
87140
'wc-men',
88141
'wc-sign',
89142
'wc-woman'
90143
];
91144

92145
export const iconsetFeature: string[] = [
146+
'air-condition',
147+
'buggy',
148+
'clothing-hanger',
149+
'day',
93150
'entry-aid',
151+
'environmental-mobility-check',
152+
'hydrogen',
153+
'luggage-compartment',
94154
'luggage-rack',
155+
'marketplace',
95156
'medical',
96-
'power-outlet'
157+
'night',
158+
'no-smoking',
159+
'person-with-cane',
160+
'person-with-rollator',
161+
'platform',
162+
'power-outlet',
163+
'reservation',
164+
'standing-room',
165+
'support-dog'
166+
];
167+
168+
export const iconsetFood: string[] = [
169+
'breakfast',
170+
'coffee-cup',
171+
'drink',
172+
'restaurant'
97173
];
98174

99-
export const iconsetFood: string[] = ['coffee-cup', 'drink', 'restaurant'];
175+
export const iconsetIT: string[] = ['database'];
100176

101-
export const iconsetJournay: string[] = [
177+
export const iconsetJourney: string[] = [
102178
'1st-class',
103179
'2nd-class',
104180
'alternative-connection',
@@ -109,18 +185,23 @@ export const iconsetJournay: string[] = [
109185
'capacity-indicator-low',
110186
'destination',
111187
'intermediary-stop',
188+
'mixed-class',
112189
'round-trip',
113190
'single-trip',
114191
'start'
115192
];
116193

117194
export const iconsetMaps: string[] = [
195+
'gps',
196+
'gps-north',
118197
'home',
119198
'map',
120-
'map-stop',
199+
'parking',
121200
'place',
122201
'set-position',
123-
'trainstation'
202+
'station',
203+
'stop-sign',
204+
'train-station'
124205
];
125206

126207
export const iconsetNavigation: string[] = [
@@ -148,15 +229,21 @@ export const iconsetNavigation: string[] = [
148229

149230
export const iconsetNotification: string[] = [
150231
'error',
151-
'error-triangle',
152232
'notify',
153-
'notify-cutoff'
233+
'notify-cutoff',
234+
'warning'
154235
];
155236

156237
export const iconsetSeat: string[] = [
157238
'aisle',
239+
'aisle-not-available',
240+
'bed',
241+
'childrens-compartment',
158242
'elderly',
159243
'handicapped',
244+
'parent-child-compartment',
245+
'priority',
246+
'quiet-zone',
160247
'table',
161248
'window'
162249
];
@@ -165,11 +252,14 @@ export const iconsetTicket: string[] = [
165252
'bahnbonus',
166253
'bahnbonus-card',
167254
'bahncard',
255+
'best-price',
168256
'commuter-ticket',
169257
'komfort-check-in',
170258
'komfort-check-in-check',
171259
'komfort-check-in-circle',
172260
'my-travel',
261+
'multiple-cards',
262+
'multiple-passenger',
173263
'outward-journey',
174264
'qr-code',
175265
'return-journey',
@@ -178,7 +268,8 @@ export const iconsetTicket: string[] = [
178268
'ticket-multiple',
179269
'time-outward-journey',
180270
'time-return-journey',
181-
'timetable'
271+
'timetable',
272+
'travel-insurance'
182273
];
183274

184275
export const iconsetTransportation: string[] = [
@@ -193,12 +284,14 @@ export const iconsetTransportation: string[] = [
193284
export const iconset: string[] = iconsetAction
194285
.concat(
195286
iconsetAv,
287+
iconsetBrand,
196288
iconsetCommunication,
197289
iconsetCovid,
198290
iconsetFacilities,
199291
iconsetFeature,
200292
iconsetFood,
201-
iconsetJournay,
293+
iconsetIT,
294+
iconsetJourney,
202295
iconsetMaps,
203296
iconsetNavigation,
204297
iconsetNotification,

‎packages/db-ui-elements-stencil/src/components/db-icon/readme.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77

88
## Properties
99

10-
| Property | Attribute | Description | Type | Default |
11-
| ------------------- | --------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
12-
| `icon` _(required)_ | `icon` | The icon attribute specifies the icon to use. | `string` | `undefined` |
13-
| `variant` | `variant` | The variant attribute specifies the style and size of an icon. | `"20-filled" \| "20-outline" \| "24-filled" \| "24-outline" \| "32-filled" \| "32-outline" \| "48-filled" \| "48-outline" \| "64-filled" \| "64-outline"` | `undefined` |
10+
| Property | Attribute | Description | Type | Default |
11+
| ------------------- | --------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
12+
| `icon` _(required)_ | `icon` | The icon attribute specifies the icon to use. | `string` | `undefined` |
13+
| `variant` | `variant` | The variant attribute specifies the style and size of an icon. | `"16-filled" \| "16-outline" \| "20-filled" \| "20-outline" \| "24-filled" \| "24-outline" \| "32-filled" \| "32-outline" \| "48-filled" \| "48-outline" \| "64-filled" \| "64-outline"` | `undefined` |
1414

1515

1616
## Dependencies

‎packages/db-ui-elements-stencil/src/components/db-icon/stories/db-icon.demo.stories.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,13 @@ export default {
1818
variant: {
1919
control: {
2020
options: [
21+
'16-filled',
2122
'20-filled',
2223
'24-filled',
2324
'32-filled',
2425
'48-filled',
2526
'64-filled',
27+
'16-outline',
2628
'20-outline',
2729
'24-outline',
2830
'32-outline',

‎packages/db-ui-elements-stencil/src/components/db-link/db-link.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,13 @@ export class DbLink {
3636
* The variant attribute specifies the style and size of an icon.
3737
*/
3838
@Prop({ reflect: true, attribute: 'icon-variant' }) iconVariant?:
39+
| '16-filled'
3940
| '20-filled'
4041
| '24-filled'
4142
| '32-filled'
4243
| '48-filled'
4344
| '64-filled'
45+
| '16-outline'
4446
| '20-outline'
4547
| '24-outline'
4648
| '32-outline'

‎packages/db-ui-elements-stencil/src/components/db-link/readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
| `href` | `href` | The href attribute represents a hyperlink (a hypertext anchor). | `string` | `undefined` |
1414
| `hreflang` | `hreflang` | The hreflang attribute gives the language of the linked resource. The value must be a valid BCP 47 language tag. | `string` | `undefined` |
1515
| `icon` | `icon` | Define an icon by it's identifier (like e.g. _download_, compare to [DB UI Icons](https://db-ui.github.io/core/patterns/base-icons/index.html)) to get displayed in front of the elements content. | `string` | `undefined` |
16-
| `iconVariant` | `icon-variant` | The variant attribute specifies the style and size of an icon. | `"20-filled" \| "20-outline" \| "24-filled" \| "24-outline" \| "32-filled" \| "32-outline" \| "48-filled" \| "48-outline" \| "64-filled" \| "64-outline"` | `'24-outline'` |
16+
| `iconVariant` | `icon-variant` | The variant attribute specifies the style and size of an icon. | `"16-filled" \| "16-outline" \| "20-filled" \| "20-outline" \| "24-filled" \| "24-outline" \| "32-filled" \| "32-outline" \| "48-filled" \| "48-outline" \| "64-filled" \| "64-outline"` | `'24-outline'` |
1717
| `icononly` | `icononly` | Define the text next to the icon specified via the icon Property to get hidden. | `boolean` | `undefined` |
1818
| `media` | `media` | The media attribute describes for which media the target document was designed. The value must be a valid media query. The default, if the media attribute is omitted, is "all". | `string` | `undefined` |
1919
| `rel` | `rel` | The rel attribute controls what kinds of links the elements create. The attribue's value must be a set of space-separated tokens. The allowed keywords and their meanings are defined below. | `"help" \| "section" \| "start" \| "search" \| "alternate" \| "appendix" \| "author" \| "bookmark" \| "chapter" \| "contents" \| "copyright" \| "glossary" \| "index" \| "license" \| "next" \| "nofollow" \| "noopener" \| "noreferrer" \| "prefetch" \| "prev" \| "subsection" \| "tag"` | `undefined` |

‎packages/db-ui-elements-stencil/src/utils/utils.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,11 +86,13 @@ export const getDefaultLinkData = (compData: DbLinkType[]) => {
8686
export const addIconVariantToAllDbLinksRecursive = (
8787
host: Element,
8888
variant:
89+
| '16-filled'
8990
| '20-filled'
9091
| '24-filled'
9192
| '32-filled'
9293
| '48-filled'
9394
| '64-filled'
95+
| '16-outline'
9496
| '20-outline'
9597
| '24-outline'
9698
| '32-outline'

‎showcase/playground-showcase/src/grapesjs/blocks/elements.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,11 +133,13 @@ export const DB_ICON = {
133133
label: 'Icon size', // The label you will see in Settings
134134
name: 'variant', // The name of the attribute/property to use on component
135135
options: [
136+
{ id: '16-outline', name: '16 / outline' },
136137
{ id: '20-outline', name: '20 / outline' },
137138
{ id: '24-outline', name: '24 / outline' },
138139
{ id: '32-outline', name: '32 / outline' },
139140
{ id: '48-outline', name: '48 / outline' },
140141
{ id: '64-outline', name: '64 / outline' },
142+
{ id: '16-filled', name: '16 / filled' },
141143
{ id: '20-filled', name: '20 / filled' },
142144
{ id: '24-filled', name: '24 / filled' },
143145
{ id: '32-filled', name: '32 / filled' },

0 commit comments

Comments
 (0)