diff --git a/angular.json b/angular.json index 7ba1dc534..df83cee11 100644 --- a/angular.json +++ b/angular.json @@ -277,18 +277,6 @@ }, "tags": [] }, - "wc:breadcrumb": { - "root": "libs/web-components/breadcrumb", - "architect": { - "lint": { - "builder": "@nrwl/linter:eslint", - "options": { - "lintFilePatterns": ["libs/web-components/breadcrumb/src/**/*.ts"] - } - } - }, - "tags": ["web-components"] - }, "button-toggle": { "$schema": "../../../node_modules/nx/schemas/project-schema.json", "root": "libs/web-components/button-toggle", @@ -1520,6 +1508,18 @@ }, "tags": [] }, + "wc-account-card": { + "root": "libs/web-components/account-card", + "architect": { + "lint": { + "builder": "@nrwl/linter:eslint", + "options": { + "lintFilePatterns": ["libs/web-components/account-card/src/**/*.ts"] + } + } + }, + "tags": ["web-components"] + }, "wc-avatar": { "$schema": "../../../node_modules/nx/schemas/project-schema.json", "root": "libs/web-components/avatar", @@ -1594,6 +1594,18 @@ }, "tags": ["web-components"] }, + "wc:breadcrumb": { + "root": "libs/web-components/breadcrumb", + "architect": { + "lint": { + "builder": "@nrwl/linter:eslint", + "options": { + "lintFilePatterns": ["libs/web-components/breadcrumb/src/**/*.ts"] + } + } + }, + "tags": ["web-components"] + }, "wizard": { "$schema": "../../../node_modules/nx/schemas/project-schema.json", "projectType": "library", diff --git a/libs/web-components/account-card/.eslintrc.json b/libs/web-components/account-card/.eslintrc.json new file mode 100644 index 000000000..0ab8d1b94 --- /dev/null +++ b/libs/web-components/account-card/.eslintrc.json @@ -0,0 +1,17 @@ +{ + "extends": ["../../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "parserOptions": { + "project": ["libs/web-components/account-card/tsconfig.*?.json"] + }, + "rules": {} + }, + { + "files": ["*.html"], + "rules": {} + } + ] +} diff --git a/libs/web-components/account-card/.npmignore b/libs/web-components/account-card/.npmignore new file mode 100644 index 000000000..83ebb4f4c --- /dev/null +++ b/libs/web-components/account-card/.npmignore @@ -0,0 +1,8 @@ +.tsbuildinfo +tsconfig.json +.eslintignore +*.tgz +images/* +test/* +*.ts +!*.d.ts diff --git a/libs/web-components/account-card/README.md b/libs/web-components/account-card/README.md new file mode 100644 index 000000000..dd965e180 --- /dev/null +++ b/libs/web-components/account-card/README.md @@ -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. + +[![See it on NPM!](https://img.shields.io/npm/v/@finastra/account-card?style=for-the-badge)](https://www.npmjs.com/package/@finastra/account-card) +[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/account-card?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/account-card') +[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](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'; +... + +``` + +### Pure HTML pages + +```html + + + +``` diff --git a/libs/web-components/account-card/demo/index.html b/libs/web-components/account-card/demo/index.html new file mode 100644 index 000000000..acf08a2b8 --- /dev/null +++ b/libs/web-components/account-card/demo/index.html @@ -0,0 +1,9 @@ + + +
+ + + + + +
diff --git a/libs/web-components/account-card/package.json b/libs/web-components/account-card/package.json new file mode 100644 index 000000000..0524bb99b --- /dev/null +++ b/libs/web-components/account-card/package.json @@ -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" + } +} diff --git a/libs/web-components/account-card/src/account-card.ts b/libs/web-components/account-card/src/account-card.ts new file mode 100644 index 000000000..7e3773eb0 --- /dev/null +++ b/libs/web-components/account-card/src/account-card.ts @@ -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` + +
+ ${this.icon} +
+
+ + +
+ + + +
${this.number}
+ + `; + } + + 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; + } +} diff --git a/libs/web-components/account-card/src/styles.scss b/libs/web-components/account-card/src/styles.scss new file mode 100644 index 000000000..ba02c0bbb --- /dev/null +++ b/libs/web-components/account-card/src/styles.scss @@ -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); + } + } +} diff --git a/libs/web-components/account-card/stories/account-card.stories.ts b/libs/web-components/account-card/stories/account-card.stories.ts new file mode 100644 index 000000000..41d42a718 --- /dev/null +++ b/libs/web-components/account-card/stories/account-card.stories.ts @@ -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 = ({ name, balance, currency, number, icon, iconAriaLabel, outlined, selectable, disabled}) => { + return html``; +}; + +export const Default: Story = Template.bind({}); + +export const Selectable: Story = Template.bind({}); +Selectable.args = { + selectable: true +}; + +export const Outlined: Story = Template.bind({}); +Outlined.args = { + outlined: true +}; + +export const Disabled: Story = Template.bind({}); +Disabled.args = { + disabled: true +}; diff --git a/libs/web-components/account-card/test/account-card.test.ts b/libs/web-components/account-card/test/account-card.test.ts new file mode 100644 index 000000000..3ca924d19 --- /dev/null +++ b/libs/web-components/account-card/test/account-card.test.ts @@ -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``); + + await elementUpdated(el); + await expect(el).to.be.accessible(); + }); +}); diff --git a/libs/web-components/account-card/tsconfig.json b/libs/web-components/account-card/tsconfig.json new file mode 100644 index 000000000..f63d15656 --- /dev/null +++ b/libs/web-components/account-card/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "composite": true, + "rootDir": "./", + "outDir": "./dist", + "tsBuildInfoFile": "./dist/.tsbuildinfo" + }, + "include": ["src/**/*.ts", "test/**/*.ts"] +} diff --git a/libs/web-components/tsconfig.json b/libs/web-components/tsconfig.json index 7e4362a35..417f00f43 100644 --- a/libs/web-components/tsconfig.json +++ b/libs/web-components/tsconfig.json @@ -134,7 +134,7 @@ "path": "fab" }, { - "path": "icon-button" + "path": "icon-button" }, { "path": "expansion-panel" @@ -142,7 +142,7 @@ { "path": "badge" }, - { + { "path": "menu" }, { @@ -150,6 +150,9 @@ }, { "path": "breadcrumb" + }, + { + "path": "account-card" } ] } diff --git a/package-lock.json b/package-lock.json index fc244acc9..9fdacee96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -173,6 +173,33 @@ "npm": "^8" } }, + "libs/web-components/account-card": { + "name": "@finastra/account-card", + "version": "1.0.0", + "license": "MIT", + "dependencies": { + "@finastra/divider": "^0.0.34", + "@material/mwc-icon": "^0.26.1", + "lit": "^2.0.0", + "tslib": "^2.0.1" + } + }, + "libs/web-components/account-card/node_modules/@finastra/divider": { + "version": "0.0.34", + "license": "MIT", + "dependencies": { + "lit": "^2.0.0", + "tslib": "^2.0.1" + } + }, + "libs/web-components/account-card/node_modules/@material/mwc-icon": { + "version": "0.26.1", + "license": "Apache-2.0", + "dependencies": { + "lit": "^2.0.0", + "tslib": "^2.0.1" + } + }, "libs/web-components/app-bar": { "name": "@finastra/app-bar", "version": "0.0.36", @@ -4232,6 +4259,10 @@ "react": "^16.14.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@finastra/account-card": { + "resolved": "libs/web-components/account-card", + "link": true + }, "node_modules/@finastra/angular-theme": { "resolved": "themes/angular-theme", "link": true @@ -60658,6 +60689,31 @@ "@lit-labs/react": "^1.0.2" } }, + "@finastra/account-card": { + "version": "file:libs/web-components/account-card", + "requires": { + "@finastra/divider": "^0.0.34", + "@material/mwc-icon": "^0.26.1", + "lit": "^2.0.0", + "tslib": "^2.0.1" + }, + "dependencies": { + "@finastra/divider": { + "version": "0.0.34", + "requires": { + "lit": "^2.0.0", + "tslib": "^2.0.1" + } + }, + "@material/mwc-icon": { + "version": "0.26.1", + "requires": { + "lit": "^2.0.0", + "tslib": "^2.0.1" + } + } + } + }, "@finastra/angular-theme": { "version": "file:themes/angular-theme", "requires": {}