Skip to content

Commit

Permalink
refactor: updated functional iconset (#890)
Browse files Browse the repository at this point in the history 
* refactor: updated functional iconset

* refactor: added new icon font set

* refactor: added new icons

* refactor: added new icons sizes
  • Loading branch information
@mfranzke
mfranzke authored Feb 14, 2023
1 parent 2f58c6c commit fc75249
Show file tree
Hide file tree
Showing 8 changed files with 119 additions and 16 deletions.
2 changes: 2 additions & 0 deletions packages/db-ui-elements-stencil/src/components/db-icon/db-icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,13 @@ export class DbIcon {
* The variant attribute specifies the style and size of an icon.
*/
@Prop() variant:
| '16-filled'
| '20-filled'
| '24-filled'
| '32-filled'
| '48-filled'
| '64-filled'
| '16-outline'
| '20-outline'
| '24-outline'
| '32-outline'
Expand Down
115 changes: 104 additions & 11 deletions packages/db-ui-elements-stencil/src/components/db-icon/iconset.array.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,88 @@ export const iconsetAction: string[] = [
'account',
'add',
'add-circle',
'add-link',
'alarm',
'alarm-add',
'alert',
'alert-on',
'alert-off',
'attachment',
'augmented-reality',
'block',
'bookmark',
'bug',
'build',
'calendar',
'camera',
'cash',
'check-circle',
'cloud',
'cloud-download',
'cloud-upload',
'compass',
'copy',
'credit-card',
'dashboard',
'delete',
'discount',
'document',
'done',
'download',
'drag-and-drop',
'edit',
'face-neutral',
'face-sad',
'face-smiling',
'filter',
'fingerprint',
'folder',
'folder-open',
'generic-card',
'giftcard',
'hearing',
'hearing-disabled',
'heart',
'heart-on',
'help',
'image',
'info',
'key',
'legal',
'lightbulb',
'lock-close',
'lock-open',
'log-out',
'logbook',
'minus',
'pin',
'print',
'remove',
'resize',
'save',
'schedule',
'search',
'send',
'sepa',
'settings',
'share',
'shopping-bag',
'shopping-basket',
'shopping-basket-disabled',
'shopping-cart',
'shopping-cart-disabled',
'sort-down',
'sort-up',
'star',
'star-on',
'swap-horizontal',
'swap-vertical',
'thumb-up',
'thumb-up-down',
'translation',
'undo',
'upload',
'visibility',
'visibility-off',
'voucher',
'website',
'zoom-in',
'zoom-out'
Expand All @@ -55,6 +96,7 @@ export const iconsetAv: string[] = [
'fast-forward-10',
'fast-forward-30',
'fast-forward-empty',
'microphone',
'pause',
'play',
'skip-backward',
Expand All @@ -67,6 +109,8 @@ export const iconsetAv: string[] = [
'volume-up'
];

export const iconsetBrand: string[] = ['logo'];

export const iconsetCommunication: string[] = [
'call',
'chat',
Expand All @@ -76,29 +120,61 @@ export const iconsetCommunication: string[] = [
'mail',
'mobile-off',
'mobile-phone',
'question',
'receive-item',
'share-item',
'wifi',
'wifi-off'
];

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

export const iconsetFacilities: string[] = [
'playground',
'restricted-mobility-toilet',
'shower',
'shower-men',
'shower-women',
'sink',
'wc',
'wc-men',
'wc-sign',
'wc-woman'
];

export const iconsetFeature: string[] = [
'air-condition',
'buggy',
'clothing-hanger',
'day',
'entry-aid',
'environmental-mobility-check',
'hydrogen',
'luggage-compartment',
'luggage-rack',
'marketplace',
'medical',
'power-outlet'
'night',
'no-smoking',
'person-with-cane',
'person-with-rollator',
'platform',
'power-outlet',
'reservation',
'standing-room',
'support-dog'
];

export const iconsetFood: string[] = [
'breakfast',
'coffee-cup',
'drink',
'restaurant'
];

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

export const iconsetJournay: string[] = [
export const iconsetJourney: string[] = [
'1st-class',
'2nd-class',
'alternative-connection',
Expand All @@ -109,18 +185,23 @@ export const iconsetJournay: string[] = [
'capacity-indicator-low',
'destination',
'intermediary-stop',
'mixed-class',
'round-trip',
'single-trip',
'start'
];

export const iconsetMaps: string[] = [
'gps',
'gps-north',
'home',
'map',
'map-stop',
'parking',
'place',
'set-position',
'trainstation'
'station',
'stop-sign',
'train-station'
];

export const iconsetNavigation: string[] = [
Expand Down Expand Up @@ -148,15 +229,21 @@ export const iconsetNavigation: string[] = [

export const iconsetNotification: string[] = [
'error',
'error-triangle',
'notify',
'notify-cutoff'
'notify-cutoff',
'warning'
];

export const iconsetSeat: string[] = [
'aisle',
'aisle-not-available',
'bed',
'childrens-compartment',
'elderly',
'handicapped',
'parent-child-compartment',
'priority',
'quiet-zone',
'table',
'window'
];
Expand All @@ -165,11 +252,14 @@ export const iconsetTicket: string[] = [
'bahnbonus',
'bahnbonus-card',
'bahncard',
'best-price',
'commuter-ticket',
'komfort-check-in',
'komfort-check-in-check',
'komfort-check-in-circle',
'my-travel',
'multiple-cards',
'multiple-passenger',
'outward-journey',
'qr-code',
'return-journey',
Expand All @@ -178,7 +268,8 @@ export const iconsetTicket: string[] = [
'ticket-multiple',
'time-outward-journey',
'time-return-journey',
'timetable'
'timetable',
'travel-insurance'
];

export const iconsetTransportation: string[] = [
Expand All @@ -193,12 +284,14 @@ export const iconsetTransportation: string[] = [
export const iconset: string[] = iconsetAction
.concat(
iconsetAv,
iconsetBrand,
iconsetCommunication,
iconsetCovid,
iconsetFacilities,
iconsetFeature,
iconsetFood,
iconsetJournay,
iconsetIT,
iconsetJourney,
iconsetMaps,
iconsetNavigation,
iconsetNotification,
Expand Down
8 changes: 4 additions & 4 deletions packages/db-ui-elements-stencil/src/components/db-icon/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------- | --------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `icon` _(required)_ | `icon` | The icon attribute specifies the icon to use. | `string` | `undefined` |
| `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` |
| Property | Attribute | Description | Type | Default |
| ------------------- | --------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `icon` _(required)_ | `icon` | The icon attribute specifies the icon to use. | `string` | `undefined` |
| `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` |


## Dependencies
Expand Down
2 changes: 2 additions & 0 deletions packages/db-ui-elements-stencil/src/components/db-icon/stories/db-icon.demo.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,13 @@ export default {
variant: {
control: {
options: [
'16-filled',
'20-filled',
'24-filled',
'32-filled',
'48-filled',
'64-filled',
'16-outline',
'20-outline',
'24-outline',
'32-outline',
Expand Down
2 changes: 2 additions & 0 deletions packages/db-ui-elements-stencil/src/components/db-link/db-link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,13 @@ export class DbLink {
* The variant attribute specifies the style and size of an icon.
*/
@Prop({ reflect: true, attribute: 'icon-variant' }) iconVariant?:
| '16-filled'
| '20-filled'
| '24-filled'
| '32-filled'
| '48-filled'
| '64-filled'
| '16-outline'
| '20-outline'
| '24-outline'
| '32-outline'
Expand Down
2 changes: 1 addition & 1 deletion packages/db-ui-elements-stencil/src/components/db-link/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
| `href` | `href` | The href attribute represents a hyperlink (a hypertext anchor). | `string` | `undefined` |
| `hreflang` | `hreflang` | The hreflang attribute gives the language of the linked resource. The value must be a valid BCP 47 language tag. | `string` | `undefined` |
| `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` |
| `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'` |
| `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'` |
| `icononly` | `icononly` | Define the text next to the icon specified via the icon Property to get hidden. | `boolean` | `undefined` |
| `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` |
| `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` |
Expand Down
2 changes: 2 additions & 0 deletions packages/db-ui-elements-stencil/src/utils/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,13 @@ export const getDefaultLinkData = (compData: DbLinkType[]) => {
export const addIconVariantToAllDbLinksRecursive = (
host: Element,
variant:
| '16-filled'
| '20-filled'
| '24-filled'
| '32-filled'
| '48-filled'
| '64-filled'
| '16-outline'
| '20-outline'
| '24-outline'
| '32-outline'
Expand Down
2 changes: 2 additions & 0 deletions showcase/playground-showcase/src/grapesjs/blocks/elements.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,11 +133,13 @@ export const DB_ICON = {
label: 'Icon size', // The label you will see in Settings
name: 'variant', // The name of the attribute/property to use on component
options: [
{ id: '16-outline', name: '16 / outline' },
{ id: '20-outline', name: '20 / outline' },
{ id: '24-outline', name: '24 / outline' },
{ id: '32-outline', name: '32 / outline' },
{ id: '48-outline', name: '48 / outline' },
{ id: '64-outline', name: '64 / outline' },
{ id: '16-filled', name: '16 / filled' },
{ id: '20-filled', name: '20 / filled' },
{ id: '24-filled', name: '24 / filled' },
{ id: '32-filled', name: '32 / filled' },
Expand Down

0 comments on commit fc75249

Please sign in to comment.