@onemrvapublic/design-system-demos 21.6.0-develop.1 → 21.7.0-develop.1

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.
Files changed (6) hide show
  1. package/assets/json/avatar.json +1 -1
  2. package/assets/json/chips.json +1 -1
  3. package/assets/json/file-panel.json +1 -1
  4. package/assets/json/typography.json +1 -1
  5. package/main.js +5 -5
  6. package/package.json +1 -1
package/assets/json/avatar.json CHANGED
@@ -1 +1 @@
1
- {"demo-avatar.component.html":"<onemrva-mat-avatar\n [initials]=\"initials()\"\n [text]=\"text()\"\n [size]=\"size()\"\n [src]=\"src()\"\n [icon]=\"icon()\"\n [color]=\"color()\"\n/>\n","demo-avatar.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-avatar',\n templateUrl: 'demo-avatar.component.html',\n standalone: true,\n imports: [\n OnemrvaMatAvatarModule,\n OnemRvaColorDirective,\n OnemRvaSizeDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAvatarComponent extends DemoComponentBase {\n readonly initials = input('TC');\n readonly text = input('');\n readonly size = input<'xlarge' | 'large' | 'medium' | 'small' | 'xsmall'>(\n 'medium',\n );\n readonly src = input('');\n readonly icon = input('');\n readonly color = input<OnemrvaMatColor>('accent');\n}\n"}
1
+ {"demo-avatar.component.html":"<onemrva-mat-avatar\n [initials]=\"initials()\"\n [text]=\"text()\"\n [size]=\"size()\"\n [src]=\"src()\"\n [icon]=\"icon()\"\n [color]=\"color()\"\n/>\n","demo-avatar.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-avatar',\n templateUrl: 'demo-avatar.component.html',\n standalone: true,\n imports: [\n OnemrvaMatAvatarModule,\n OnemRvaColorDirective,\n OnemRvaSizeDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAvatarComponent extends DemoComponentBase {\n readonly initials = input('TC');\n readonly text = input('');\n readonly size = input<'large' | 'medium' | 'small' | 'xsmall'>('medium');\n readonly src = input('');\n readonly icon = input('');\n readonly color = input<OnemrvaMatColor>('accent');\n}\n"}
package/assets/json/chips.json CHANGED
@@ -1 +1 @@
1
- {"demo-chips.component.html":"<mat-chip-set aria-label=\"Chips\">\n <mat-chip [color]=\"color()\" [disabled]=\"disabled()\">chip 1</mat-chip>\n <mat-chip [color]=\"color()\" [disabled]=\"disabled()\">chip 2</mat-chip>\n</mat-chip-set>\n","demo-chips.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { FormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\nexport interface Fruit {\n name: string;\n}\n@Component({\n selector: 'app-demo-chips',\n standalone: true,\n imports: [FormsModule, MatChipsModule, DragDropModule, OnemRvaColorDirective],\n templateUrl: './demo-chips.component.html',\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsComponent extends DemoComponentBase {\n readonly color = input<OnemrvaMatColor>('');\n\n readonly disabled = input(false);\n}\n"}
1
+ {"demo-chips.component.html":"<mat-chip-set aria-label=\"Chips\">\n @for (chip of [1, 2]; track $index) {\n <mat-chip [color]=\"color()\" [disabled]=\"disabled()\">\n chip {{ chip }}\n\n @if (!disabled()) {\n <button matChipRemove [attr.aria-label]=\"`remove item ${chip}`\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-chip>\n }\n</mat-chip-set>\n","demo-chips.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { FormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { MatIcon } from '@angular/material/icon';\n\nexport interface Fruit {\n name: string;\n}\n@Component({\n selector: 'app-demo-chips',\n standalone: true,\n imports: [\n FormsModule,\n MatChipsModule,\n DragDropModule,\n OnemRvaColorDirective,\n MatIcon,\n ],\n templateUrl: './demo-chips.component.html',\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsComponent extends DemoComponentBase {\n readonly color = input<OnemrvaMatColor>('');\n\n readonly disabled = input(false);\n}\n"}
package/assets/json/file-panel.json CHANGED
@@ -1 +1 @@
1
- {"demo-file-panel.component.html":"<file-panel [file]=\"getFile()\" />\n","demo-file-panel.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n convertToReferencedProgressFile,\n ReferencedProgressFile,\n OnemrvaMatFileUploadModule,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\nexport interface Annex {\n /**\n * Document reference in document service\n */\n documentId?: string;\n /**\n * Name of the document\n */\n name?: string;\n}\n\n@Component({\n selector: 'app-demo-file-panel',\n templateUrl: 'demo-file-panel.component.html',\n\n standalone: true,\n imports: [MatButtonModule, OnemrvaMatFileUploadModule],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFilePanelComponent extends DemoComponentBase {\n readonly color = input<'' | 'warn' | 'success' | 'error'>('');\n\n testFile: Annex = {\n documentId: '1',\n name: 'File',\n };\n\n successFile: ReferencedProgressFile = {\n ref: Symbol('1'),\n enableProgressBar: false,\n id: '1',\n message: 'This is how a success file will look like',\n progress: 50,\n size: 100,\n type: '',\n url: null,\n name: 'Success',\n file: undefined,\n color: 'success',\n maxSize: 100,\n };\n\n errorFile: ReferencedProgressFile = {\n ref: Symbol('2'),\n enableProgressBar: false,\n id: '2',\n message: 'This is how an error file will look like',\n progress: 50,\n size: 100,\n type: '',\n url: null,\n name: 'Error',\n file: undefined,\n color: 'error',\n maxSize: 100,\n };\n\n warnFile: ReferencedProgressFile = {\n ref: Symbol('3'),\n enableProgressBar: false,\n id: '3',\n message: 'This is how a warn file will look like',\n progress: 50,\n size: 100,\n type: '',\n url: null,\n name: 'Warn',\n file: undefined,\n color: 'warn',\n maxSize: 100,\n };\n\n convertToProgressFile(annex: Annex) {\n return convertToReferencedProgressFile(annex.documentId!, annex.name!);\n }\n\n getFile() {\n switch (this.color()) {\n case 'success':\n return this.successFile;\n case 'error':\n return this.errorFile;\n case 'warn':\n return this.warnFile;\n default:\n return this.convertToProgressFile(this.testFile);\n }\n }\n}\n"}
1
+ {"demo-file-panel.component.html":"<file-panel\n [file]=\"getFile()\"\n [actions]=\"actions()\"\n (panelClick)=\"onPanelClick()\"\n [disabled]=\"disabled()\"\n [displayDate]=\"'02/06/22 07:51 PM'\"\n/>\n","demo-file-panel.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n convertToReferencedProgressFile,\n ReferencedProgressFile,\n OnemrvaMatFileUploadModule,\n ActionConfig,\n} from '@onemrvapublic/design-system/mat-file-upload';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\nexport interface Annex {\n /**\n * Document reference in document service\n */\n documentId?: string;\n /**\n * Name of the document\n */\n name?: string;\n}\n\n@Component({\n selector: 'app-demo-file-panel',\n templateUrl: 'demo-file-panel.component.html',\n\n standalone: true,\n imports: [MatButtonModule, OnemrvaMatFileUploadModule],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFilePanelComponent extends DemoComponentBase {\n readonly color = input<'' | 'warn' | 'success' | 'error'>('');\n\n readonly disabled = input<boolean>(false);\n\n testFile: Annex = {\n documentId: '1',\n name: 'archives.doc',\n };\n\n successFile: ReferencedProgressFile = {\n ref: Symbol('1'),\n enableProgressBar: false,\n id: '1',\n message: '',\n progress: 50,\n size: 100,\n type: '',\n url: null,\n name: 'Success',\n file: undefined,\n color: 'success',\n maxSize: 100,\n };\n\n errorFile: ReferencedProgressFile = {\n ref: Symbol('2'),\n enableProgressBar: false,\n id: '2',\n message: 'This is how an error file will look like',\n progress: 50,\n size: 100,\n type: '',\n url: null,\n name: 'Error',\n file: undefined,\n color: 'error',\n maxSize: 100,\n };\n\n warnFile: ReferencedProgressFile = {\n ref: Symbol('3'),\n enableProgressBar: false,\n id: '3',\n message: 'This is how a warn file will look like',\n progress: 50,\n size: 100,\n type: '',\n url: null,\n name: 'Warn',\n file: undefined,\n color: 'warn',\n maxSize: 100,\n };\n\n convertToProgressFile(annex: Annex) {\n return convertToReferencedProgressFile(annex.documentId!, annex.name!);\n }\n\n getFile() {\n switch (this.color()) {\n case 'success':\n return this.successFile;\n case 'error':\n return this.errorFile;\n case 'warn':\n return this.warnFile;\n default:\n return this.convertToProgressFile(this.testFile);\n }\n }\n\n onPanelClick() {\n console.log('panel clicked');\n }\n\n actions(): ActionConfig[] {\n return [\n {\n iconName: 'download', // angular material name\n dataCy: 'download-action',\n tooltipCode: 'file.panel.download',\n ariaCode: 'aria-code',\n clickHandler: (file: ReferencedProgressFile) => {\n console.log('clickhandler', file);\n },\n showAction: (file: ReferencedProgressFile) => {\n console.log('file', file);\n return true;\n },\n },\n {\n iconName: 'delete', // angular material name\n dataCy: 'delete-action',\n tooltipCode: 'file.panel.download',\n ariaCode: 'aria-code',\n clickHandler: (file: ReferencedProgressFile) => {\n console.log('clickhandler', file);\n },\n showAction: (file: ReferencedProgressFile) => {\n console.log('file', file);\n return true;\n },\n },\n ];\n }\n}\n"}
package/assets/json/typography.json CHANGED
@@ -1 +1 @@
1
- {"demo-typography.component.html":"<div class=\"typography-container\">\n @for (category of typographyCategories; track category.label) {\n <div class=\"typography-section\">\n <h3>{{ category.label }}</h3>\n @for (\n style of typographyStyles | filter: 'category' : category.value;\n track style.name\n ) {\n <div class=\"typography-item\">\n <div class=\"typography-details\">\n <div\n class=\"typography-sample\"\n [style.font]=\"\n style.weight +\n ' ' +\n style.size +\n '/' +\n style.lineHeight +\n ' ' +\n style.font\n \"\n >\n {{ style.name }}\n </div>\n <div class=\"typography-specs\">\n <div>Size: {{ style.size }} ({{ style.sizePx }}px)</div>\n <div>\n Line Height: {{ style.lineHeight }} ({{ style.lineHeightPx }}px)\n </div>\n <div>Weight: {{ style.weight }}</div>\n <div>Font: {{ style.font }}</div>\n </div>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","demo-typography.component.scss":".typography-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 1rem;\n}\n\n.typography-section {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n\n h3 {\n color: var(--mat-sys-on-surface);\n font-size: 1.25rem;\n font-weight: 600;\n margin: 0;\n }\n}\n\n.typography-item {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 1rem;\n background-color: var(--mat-sys-surface-container);\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.typography-name {\n color: var(--mat-sys-on-surface);\n font-size: 1.1rem;\n font-weight: 500;\n}\n\n.typography-details {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.typography-sample {\n padding: 1rem;\n background-color: var(--mat-sys-surface);\n border-radius: 4px;\n color: var(--mat-sys-on-surface);\n}\n\n.typography-specs {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 0.5rem;\n font-family: monospace;\n font-size: 0.9rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n@media (max-width: 768px) {\n .typography-specs {\n grid-template-columns: 1fr;\n }\n}\n","demo-typography.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FilterPipe } from '../palette';\n\ninterface TypographyStyle {\n name: string;\n size: string;\n sizePx: number;\n lineHeight: string;\n lineHeightPx: number;\n weight: number;\n font: string;\n category: 'body' | 'display' | 'headline' | 'label' | 'title';\n}\n\n@Component({\n selector: 'app-demo-typography',\n templateUrl: './demo-typography.component.html',\n styleUrls: ['./demo-typography.component.scss'],\n standalone: true,\n imports: [FilterPipe],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTypographyComponent extends DemoComponentBase {\n typographyStyles: TypographyStyle[] = [\n // Display Styles\n {\n name: 'Display Large',\n size: '9.25rem',\n sizePx: 148,\n lineHeight: '11.25rem',\n lineHeightPx: 180,\n weight: 700,\n font: 'Poppins',\n category: 'display',\n },\n {\n name: 'Display Medium',\n size: '4.5rem',\n sizePx: 72,\n lineHeight: '6.25rem',\n lineHeightPx: 100,\n weight: 700,\n font: 'Poppins',\n category: 'display',\n },\n {\n name: 'Display Small',\n size: '1.75rem',\n sizePx: 28,\n lineHeight: '3.25rem',\n lineHeightPx: 52,\n weight: 600,\n font: 'Poppins',\n category: 'display',\n },\n // Headline Styles\n {\n name: 'Headline Large',\n size: '1.375rem',\n sizePx: 22,\n lineHeight: '2.75rem',\n lineHeightPx: 44,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n {\n name: 'Headline Medium',\n size: '1.25rem',\n sizePx: 20,\n lineHeight: '2.5rem',\n lineHeightPx: 40,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n {\n name: 'Headline Small',\n size: '1.125rem',\n sizePx: 18,\n lineHeight: '2.25rem',\n lineHeightPx: 36,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n // Title Styles\n {\n name: 'Title Large',\n size: '1rem',\n sizePx: 16,\n lineHeight: '2rem',\n lineHeightPx: 32,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n {\n name: 'Title Medium',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.75rem',\n lineHeightPx: 28,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n {\n name: 'Title Small',\n size: '0.938rem',\n sizePx: 15,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n // Body Styles\n {\n name: 'Body Large',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.625rem',\n lineHeightPx: 26,\n weight: 600,\n font: 'Source Sans Pro',\n category: 'body',\n },\n {\n name: 'Body Medium',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.625rem',\n lineHeightPx: 26,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'body',\n },\n {\n name: 'Body Small',\n size: '0.875rem',\n sizePx: 14,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'body',\n },\n // Label Styles\n {\n name: 'Label Large',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 500,\n font: 'Poppins',\n category: 'label',\n },\n {\n name: 'Label Medium',\n size: '0.875rem',\n sizePx: 14,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Poppins',\n category: 'label',\n },\n {\n name: 'Label Small',\n size: '0.75rem',\n sizePx: 12,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'label',\n },\n ];\n\n typographyCategories = [\n { value: 'headline', label: 'Headline Styles' },\n { value: 'title', label: 'Title Styles' },\n { value: 'body', label: 'Body Styles' },\n { value: 'label', label: 'Label Styles' },\n { value: 'display', label: 'Display Styles' },\n ];\n}\n"}
1
+ {"demo-typography.component.html":"<!-- USE THE UTILITY CLASSES AS DESCRIBED IN THIS DOCUMENTATION-->\n\n<div class=\"typography-container\">\n <onemrva-mat-message-box [color]=\"OnemrvaMatColor.WARN\"\n >Ensure you use the utility classes, instead of implementing it directly. We\n moved away from header tags (h1, h2, h3,...) because of conflicting\n scenario's that potentially needed to work around the header tags only for\n semantic reasons.</onemrva-mat-message-box\n >\n\n <h1 class=\"font-body-medium\">\n Example: Here is an H1-tag with a font-body-medium\n </h1>\n\n @for (category of typographyCategories; track category.label) {\n <div class=\"typography-section\">\n <h3>{{ category.label }}</h3>\n @for (\n style of typographyStyles | filter: 'category' : category.value;\n track style.name\n ) {\n <div class=\"typography-item\">\n <div class=\"typography-details\">\n <div [class]=\"['typography-sample', style.class]\">\n {{ getStyleExample(style) }}\n </div>\n <div class=\"typography-specs\">\n <div>Size: {{ style.size }} ({{ style.sizePx }}px)</div>\n <div>\n Line Height: {{ style.lineHeight }} ({{ style.lineHeightPx }}px)\n </div>\n <div>Weight: {{ style.weight }}</div>\n <div>Font: {{ style.font }}</div>\n </div>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","demo-typography.component.scss":".typography-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 1rem;\n}\n\n.typography-section {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n\n h3 {\n color: var(--mat-sys-on-surface);\n font-size: 1.25rem;\n font-weight: 600;\n margin: 0;\n }\n}\n\n.typography-item {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 1rem;\n background-color: var(--mat-sys-surface-container);\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.typography-name {\n color: var(--mat-sys-on-surface);\n font-size: 1.1rem;\n font-weight: 500;\n}\n\n.typography-details {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.typography-sample {\n padding: 1rem;\n background-color: var(--mat-sys-surface);\n border-radius: 4px;\n color: var(--mat-sys-on-surface);\n}\n\n.typography-specs {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 0.5rem;\n font-family: monospace;\n font-size: 0.9rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n@media (max-width: 768px) {\n .typography-specs {\n grid-template-columns: 1fr;\n }\n}\n","demo-typography.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatMessageBoxComponent } from '@onemrvapublic/design-system/mat-message-box';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { FilterPipe } from '../palette';\n\ninterface TypographyStyle {\n name: string;\n size: string;\n sizePx: number;\n lineHeight: string;\n lineHeightPx: number;\n weight: number;\n font: string;\n class: string;\n category: 'body' | 'display' | 'headline' | 'label' | 'title';\n}\n\n@Component({\n selector: 'app-demo-typography',\n templateUrl: './demo-typography.component.html',\n styleUrls: ['./demo-typography.component.scss'],\n standalone: true,\n imports: [FilterPipe, OnemrvaMatMessageBoxComponent],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTypographyComponent extends DemoComponentBase {\n OnemrvaMatColor = OnemrvaMatColor;\n\n typographyStyles: TypographyStyle[] = [\n // Display Styles\n {\n name: 'Display Large',\n class: 'font-display-large',\n size: '9.25rem',\n sizePx: 148,\n lineHeight: '11.25rem',\n lineHeightPx: 180,\n weight: 700,\n font: 'Poppins',\n category: 'display',\n },\n {\n name: 'Display Medium',\n class: 'font-display-medium',\n size: '4.5rem',\n sizePx: 72,\n lineHeight: '6.25rem',\n lineHeightPx: 100,\n weight: 700,\n font: 'Poppins',\n category: 'display',\n },\n {\n name: 'Display Small',\n class: 'font-display-small',\n size: '1.75rem',\n sizePx: 28,\n lineHeight: '3.25rem',\n lineHeightPx: 52,\n weight: 600,\n font: 'Poppins',\n category: 'display',\n },\n // Headline Styles\n {\n name: 'Headline Large',\n class: 'font-headline-large',\n size: '1.375rem',\n sizePx: 22,\n lineHeight: '2.75rem',\n lineHeightPx: 44,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n {\n name: 'Headline Medium',\n class: 'font-headline-medium',\n size: '1.25rem',\n sizePx: 20,\n lineHeight: '2.5rem',\n lineHeightPx: 40,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n {\n name: 'Headline Small',\n class: 'font-headline-small',\n size: '1.125rem',\n sizePx: 18,\n lineHeight: '2.25rem',\n lineHeightPx: 36,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n // Title Styles\n {\n name: 'Title Large',\n class: 'font-title-large',\n size: '1rem',\n sizePx: 16,\n lineHeight: '2rem',\n lineHeightPx: 32,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n {\n name: 'Title Medium',\n class: 'font-title-medium',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.75rem',\n lineHeightPx: 28,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n {\n name: 'Title Small',\n class: 'font-title-small',\n size: '0.938rem',\n sizePx: 15,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n // Body Styles\n {\n name: 'Body Large',\n class: 'font-body-large',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.625rem',\n lineHeightPx: 26,\n weight: 600,\n font: 'Source Sans Pro',\n category: 'body',\n },\n {\n name: 'Body Medium',\n class: 'font-body-medium',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.625rem',\n lineHeightPx: 26,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'body',\n },\n {\n name: 'Body Small',\n class: 'font-body-small',\n size: '0.875rem',\n sizePx: 14,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'body',\n },\n // Label Styles\n {\n name: 'Label Large',\n class: 'font-label-large',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 500,\n font: 'Poppins',\n category: 'label',\n },\n {\n name: 'Label Medium',\n class: 'font-label-medium',\n size: '0.875rem',\n sizePx: 14,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Poppins',\n category: 'label',\n },\n {\n name: 'Label Small',\n class: 'font-label-small',\n size: '0.75rem',\n sizePx: 12,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'label',\n },\n ];\n\n getStyleExample(style: TypographyStyle) {\n return `<span class=\"${style.class}\">Here is your text</span>`;\n }\n\n typographyCategories = [\n { value: 'headline', label: 'Headline Styles' },\n { value: 'title', label: 'Title Styles' },\n { value: 'body', label: 'Body Styles' },\n { value: 'label', label: 'Label Styles' },\n { value: 'display', label: 'Display Styles' },\n ];\n}\n"}