-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: account card * resolve package-lock * Update libs/web-components/account-card/src/styles.scss Co-authored-by: dorsaf frigui <[email protected]> * document account card Co-authored-by: dorsaf frigui <[email protected]>
- Loading branch information
1 parent
12bb01d
commit 4b1aea2
Showing
13 changed files
with
369 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "extends": ["../../../.eslintrc.json"], | ||
| "ignorePatterns": ["!**/*"], | ||
| "overrides": [ | ||
| { | ||
| "files": ["*.ts"], | ||
| "parserOptions": { | ||
| "project": ["libs/web-components/account-card/tsconfig.*?.json"] | ||
| }, | ||
| "rules": {} | ||
| }, | ||
| { | ||
| "files": ["*.html"], | ||
| "rules": {} | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| .tsbuildinfo | ||
| tsconfig.json | ||
| .eslintignore | ||
| *.tgz | ||
| images/* | ||
| test/* | ||
| *.ts | ||
| !*.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| # Account Card | ||
|
|
||
| Account Card is a use case of card using the [Accounts and Balances](https://developer.fusionfabric.cloud/api/corporate-accounteinfo-me-v1-831cb09d-cc10-4772-8ed5-8a6b72ec8e01/docs#operation/getAccountsForCustomerUser) APIs. | ||
|
|
||
| > This component is based on [base-card](./src/base-card.ts). See `fds-card` documentation for more details. | ||
| [](https://www.npmjs.com/package/@finastra/account-card) | ||
| [](https://bundlephobia.com/result?p=@finastra/account-card') | ||
| [](https://finastra.github.io/finastra-design-system/?path=/story/components-account-card--default) | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Import | ||
|
|
||
| ``` | ||
| npm i @finastra/account-card | ||
| ``` | ||
|
|
||
| ```ts | ||
| import '@finastra/account-card'; | ||
| ... | ||
| <fds-account-card name="France" balance="50000" currency="EUR" number="DE89 3704 0044 0532 0130 00"></fds-account-card> | ||
| ``` | ||
|
|
||
| ### Pure HTML pages | ||
|
|
||
| ```html | ||
| <script type="module" src="https://unpkg.com/@finastra/account-card@latest/dist/src/account-card.js?module"></script> | ||
|
|
||
| <fds-account-card name="France" balance="50000" currency="EUR" number="DE89 3704 0044 0532 0130 00"></fds-account-card> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <script type="module" src="node_modules/@finastra/account-card/dist/src/account-card.js"></script> | ||
|
|
||
| <div style="display: flex; flex-direction: column; gap: 16px;"> | ||
| <fds-account-card name="France" balance="50000" currency="EUR" number="DE89 3704 0044 0532 0130 00"></fds-account-card> | ||
|
|
||
| <fds-account-card name="France" balance="50000" currency="EUR" number="DE89 3704 0044 0532 0130 00" selectable></fds-account-card> | ||
|
|
||
| <fds-account-card name="France" balance="50000" currency="EUR" number="DE89 3704 0044 0532 0130 00" disabled></fds-account-card> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| { | ||
| "name": "@finastra/account-card", | ||
| "displayName": "AccountCard", | ||
| "version": "1.0.0", | ||
| "description": "AccountCard Web Component", | ||
| "keywords": [ | ||
| "Finastra Design System", | ||
| "Web Components", | ||
| "AccountCard" | ||
| ], | ||
| "license": "MIT", | ||
| "main": "dist/src/account-card.js", | ||
| "module": "dist/src/account-card.js", | ||
| "scripts": { | ||
| "build:style": "node ../../../scripts/sass-to-lit-css/index.js src/styles.scss" | ||
| }, | ||
| "dependencies": { | ||
| "lit": "^2.0.0", | ||
| "tslib": "^2.0.1", | ||
| "@finastra/divider": "^0.0.34", | ||
| "@material/mwc-icon": "^0.26.1" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { BaseCard } from "@finastra/card"; | ||
| import '@finastra/divider'; | ||
| import { html } from 'lit'; | ||
| import { customElement, property } from 'lit/decorators.js'; | ||
| import { styles } from './styles.css'; | ||
|
|
||
| /** | ||
| * @attr {string} [name='Account'] - Account Name. | ||
| * @attr {number} [balance=0] - Account balance. | ||
| * @attr {string} [currency='USD'] - Account currency ISO format. | ||
| * @attr {string} [number='XXXX XXXX XXXX XXXX XXXX XX'] - Account number. | ||
| * @attr {string} [icon=credit_card] - Change card icon. | ||
| * @attr {boolean} [iconAriaLabel='Credit Card'] - Change the card icon aria label. | ||
| * @attr {boolean} [selectable=false] - Change the card style to an action card. | ||
| * @attr {boolean} [disabled=false] - Disabled style of the card. | ||
| */ | ||
|
|
||
| @customElement('fds-account-card') | ||
| export class AccountCard extends BaseCard { | ||
| static styles = styles; | ||
|
|
||
| @property({ type: String }) name = 'Account'; | ||
| @property({ type: Number }) balance = 0; | ||
| @property({ type: String }) currency = 'USD'; | ||
| @property({ type: String }) number = 'XXXX XXXX XXXX XXXX XXXX XX'; | ||
| @property({ type: String }) icon = 'credit_card'; | ||
| @property({ type: String }) iconAriaLabel = 'Credit Card'; | ||
|
|
||
|
|
||
|
|
||
| renderCardContent() { | ||
| return html` | ||
| <fds-card-content class="account-content"> | ||
| <div class="account-icon"> | ||
| <mwc-icon aria-label="${this.iconAriaLabel}">${this.icon}</mwc-icon> | ||
| </div> | ||
| <div> | ||
| <div class="account-name">${this.name}</div> | ||
| <div class="account-balance">${this.renderBalance()}</div> | ||
| </div> | ||
| </fds-card-content> | ||
| <fds-card-footer> | ||
| <fds-divider></fds-divider> | ||
| <div class="account-number">${this.number}</div> | ||
| </fds-card-footer> | ||
| `; | ||
| } | ||
|
|
||
| renderBalance() { | ||
| const dollarUSLocale = Intl.NumberFormat('en-US', { | ||
| style: 'currency', | ||
| currency: this.currency, | ||
| }); | ||
| return dollarUSLocale.format(this.balance); | ||
| } | ||
| } | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'fds-account-card': AccountCard; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| @use "@finastra/card/src" as base-card; | ||
| @use '@finastra/fds-theme' as fds; | ||
|
|
||
| :host { | ||
| min-width: 230px; | ||
| @include base-card.core-styles(); | ||
|
|
||
| .account-content { | ||
| display: flex; | ||
| gap: var(--fds-spacing-2, 8px); | ||
| } | ||
|
|
||
| .account-icon { | ||
| @include fds.margin(1, top); | ||
| border-radius: 50%; | ||
| width: 38px; | ||
| height: 38px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| @include fds.bg-color(primary-lighter); | ||
|
|
||
| mwc-icon { | ||
| @include fds.text-color(primary); | ||
| } | ||
| } | ||
|
|
||
| .account-name { | ||
| @include fds.typography(body-1); | ||
| @include fds.text-color(on-surface); | ||
| } | ||
|
|
||
| .account-balance { | ||
| @include fds.typography(headline-5); | ||
| @include fds.text-color(on-surface); | ||
| @include fds.margin(4, top); | ||
| } | ||
|
|
||
| .account-number { | ||
| @include fds.typography(body-3); | ||
| @include fds.text-color(on-surface-medium); | ||
| @include fds.padding(2, top, bottom); | ||
| @include fds.padding(3, right, left); | ||
| } | ||
|
|
||
| .mdc-card--disabled .account-name, | ||
| .mdc-card--disabled .account-balance, | ||
| .mdc-card--disabled .account-number { | ||
| @include fds.text-color(on-surface-disabled); | ||
| } | ||
|
|
||
| .mdc-card--disabled .account-icon { | ||
| @include fds.bg-color(surface-disabled); | ||
|
|
||
| mwc-icon { | ||
| @include fds.text-color(on-surface-disabled); | ||
| } | ||
| } | ||
| } |
50 changes: 50 additions & 0 deletions
50
libs/web-components/account-card/stories/account-card.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| const README = require('../README.md'); | ||
| import '@finastra/account-card'; | ||
| import type { AccountCard } from '@finastra/account-card'; | ||
| import { Meta, Story } from '@storybook/web-components'; | ||
| import { html } from 'lit-html'; | ||
| import { argTypes, cssprops } from './sb-generated/fds-account-card.json'; | ||
|
|
||
| export default { | ||
| title: 'DATA DISPLAY/Cards/Account Card', | ||
| component: 'fds-account-card', | ||
| argTypes, | ||
| args: { | ||
| name: 'France', | ||
| balance: 50000, | ||
| currency: "EUR", | ||
| number: "DE89 3704 0044 0532 0130 00" | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| description: { component: README } | ||
| }, | ||
| design: { | ||
| type: 'figma', | ||
| url: 'https://www.figma.com/file/6BBm9XAsO9lQZQ4xBM4cGr/Patterns-%26-apps?node-id=407%3A17290' | ||
| }, | ||
| cssprops | ||
| }, | ||
| decorators: [] | ||
| } as Meta; | ||
|
|
||
| const Template: Story<AccountCard> = ({ name, balance, currency, number, icon, iconAriaLabel, outlined, selectable, disabled}) => { | ||
| return html`<fds-account-card name=${name} balance=${balance} currency=${currency} number=${number} icon=${icon} iconAriaLabel=${iconAriaLabel} ?outlined=${outlined} ?selectable=${selectable} ?disabled=${disabled}></fsd-account-card>`; | ||
| }; | ||
|
|
||
| export const Default: Story<AccountCard> = Template.bind({}); | ||
|
|
||
| export const Selectable: Story<AccountCard> = Template.bind({}); | ||
| Selectable.args = { | ||
| selectable: true | ||
| }; | ||
|
|
||
| export const Outlined: Story<AccountCard> = Template.bind({}); | ||
| Outlined.args = { | ||
| outlined: true | ||
| }; | ||
|
|
||
| export const Disabled: Story<AccountCard> = Template.bind({}); | ||
| Disabled.args = { | ||
| disabled: true | ||
| }; |
12 changes: 12 additions & 0 deletions
12
libs/web-components/account-card/test/account-card.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { html, fixture, expect, elementUpdated } from '@open-wc/testing'; | ||
| import { AccountCard } from '../src/account-card.js'; | ||
| import '../src/account-card.js'; | ||
|
|
||
| describe('AccountCard', () => { | ||
| it('loads accessibly', async () => { | ||
| const el: AccountCard = await fixture(html`<fds-account-card></fds-account-card>`); | ||
|
|
||
| await elementUpdated(el); | ||
| await expect(el).to.be.accessible(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| { | ||
| "extends": "../tsconfig.json", | ||
| "compilerOptions": { | ||
| "composite": true, | ||
| "rootDir": "./", | ||
| "outDir": "./dist", | ||
| "tsBuildInfoFile": "./dist/.tsbuildinfo" | ||
| }, | ||
| "include": ["src/**/*.ts", "test/**/*.ts"] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.