diff --git a/README.md b/README.md index 7fd1955d7..fa2b9eefe 100644 --- a/README.md +++ b/README.md @@ -248,7 +248,6 @@ Removing is slightly more difficult than adding, because there are multiple comp - Form Caption - Icon - Icon Button -- Icon Link - Number Input - Select - TabBar diff --git a/packages/ui-library/.storybook/.pa11yci b/packages/ui-library/.storybook/.pa11yci index f072a2b57..1761aa5ba 100644 --- a/packages/ui-library/.storybook/.pa11yci +++ b/packages/ui-library/.storybook/.pa11yci @@ -11,7 +11,6 @@ }, "urls": [ "http://localhost:1337/iframe.html?id=blriconbutton--blr-icon-button&viewMode=story", - "http://localhost:1337/iframe.html?id=blriconlink--blr-icon-link&viewMode=story", "http://localhost:1337/iframe.html?id=blricon--blr-icon&viewMode=story", "http://localhost:1337/iframe.html?id=blrloader--blr-loader&viewMode=story", "http://localhost:1337/iframe.html?id=blrradio--blr-radio-group&viewMode=story", @@ -21,4 +20,4 @@ "http://localhost:1337/iframe.html?id=blrtextinput--blr-text-input&viewMode=story", "http://localhost:1337/iframe.html?id=blrtextbutton--blr-text-button&args=icon:boilerChevronDownGreen&viewMode=story" ] -} \ No newline at end of file +} diff --git a/packages/ui-library/src/components/icon-link/index.css.ts b/packages/ui-library/src/components/icon-link/index.css.ts deleted file mode 100644 index 4ea5f2e85..000000000 --- a/packages/ui-library/src/components/icon-link/index.css.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals"; - -export const styleCustom = typeSafeNestedCss` - .blr-icon-link { - align-items: center; - justify-content: center; - display: inline-flex; - cursor: pointer; - padding-right: 3px; - padding-left: 3px; - } - - .blr-icon-button:focus { - ${ - /* Component Tokens for Outline are missing */ - /* Need to make sure we meet AA requirements with this custom outline */ - "" - } - outline: 2px solid black; - } -`; diff --git a/packages/ui-library/src/components/icon-link/index.stories.ts b/packages/ui-library/src/components/icon-link/index.stories.ts deleted file mode 100644 index a25bb72ad..000000000 --- a/packages/ui-library/src/components/icon-link/index.stories.ts +++ /dev/null @@ -1,58 +0,0 @@ -/* eslint-disable no-console */ -import { BlrIconLinkType } from './index'; -import { BlrIconLinkRenderFunction } from './renderFunction'; -import { PureIconKeys } from '@boiler/icons/icons-optimized'; -// this loads the all components instances and registers their html tags -import '../../index'; -import { Themes } from '../../foundation/_tokens-generated/index.themes'; -import { ActionSizes, ActionVariants } from '../../globals/constants'; - -export default { - title: 'Components/Icon Link', - argTypes: { - icon: { - options: [undefined, ...PureIconKeys], - control: { type: 'select' }, - }, - size: { - options: ActionSizes, - control: { type: 'select' }, - }, - variant: { - options: ActionVariants, - control: { type: 'select' }, - }, - theme: { - options: Themes, - control: { type: 'select' }, - }, - }, - parameters: { - badges: ['Draft'], - design: { - type: 'figma', - url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A106388&mode=dev', - }, - viewMode: 'docs', - }, -}; - -export const BlrIconLink = (params: BlrIconLinkType) => BlrIconLinkRenderFunction(params); - -BlrIconLink.storyName = 'Icon Link'; - -const args: BlrIconLinkType = { - theme: 'Light', - arialabel: 'Button', - onClick: () => console.log('onClick'), - onBlur: () => console.log('onBlur'), - loading: false, - icon: 'blr360', - linkId: 'link-id', - variant: 'cta', - size: 'md', - href: '#', - target: '_self', -}; - -BlrIconLink.args = args; diff --git a/packages/ui-library/src/components/icon-link/index.test.ts b/packages/ui-library/src/components/icon-link/index.test.ts deleted file mode 100644 index 12500a073..000000000 --- a/packages/ui-library/src/components/icon-link/index.test.ts +++ /dev/null @@ -1,47 +0,0 @@ -import '@boiler/ui-library/dist/'; - -import { BlrIconLinkRenderFunction } from './renderFunction'; - -import { fixture, expect } from '@open-wc/testing'; -import { querySelectorDeep } from 'query-selector-shadow-dom'; -import type { BlrIconLinkType } from '.'; - -const sampleParams: BlrIconLinkType = { - arialabel: 'Button', - loading: false, - icon: 'blr360', - linkId: 'link-id', - variant: 'cta', - href: '#', - target: '_self', - theme: 'Light', -}; - -describe('blr-icon-link', () => { - it('is having a a containing the right className', async () => { - const element = await fixture(BlrIconLinkRenderFunction(sampleParams)); - - const a = querySelectorDeep('a', element.getRootNode() as HTMLElement); - const className = a?.className; - - expect(className).to.contain('blr-icon-link'); - }); - - it('has a size md by default', async () => { - const element = await fixture(BlrIconLinkRenderFunction(sampleParams)); - - const a = querySelectorDeep('a', element.getRootNode() as HTMLElement); - const className = a?.className; - - expect(className).to.contain('md'); - }); - - it('has a size sm when "size" is set to "sm" ', async () => { - const element = await fixture(BlrIconLinkRenderFunction({ ...sampleParams, size: 'sm' })); - - const a = querySelectorDeep('a', element.getRootNode() as HTMLElement); - const className = a?.className; - - expect(className).to.contain('sm'); - }); -}); diff --git a/packages/ui-library/src/components/icon-link/index.ts b/packages/ui-library/src/components/icon-link/index.ts index 38b8d831b..e69de29bb 100644 --- a/packages/ui-library/src/components/icon-link/index.ts +++ b/packages/ui-library/src/components/icon-link/index.ts @@ -1,96 +0,0 @@ -import { LitElement, html, nothing } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; -import { property } from 'lit/decorators.js'; -import { SizelessIconType } from '@boiler/icons'; -import { styleCustom as iconLinkStyleCustom } from './index.css'; -import { styleCustom as iconButtonStyleCustom } from '../icon-button/index.css'; -import { ThemeType } from '../../foundation/_tokens-generated/index.themes'; -import { actionLight, actionDark } from '../../foundation/semantic-tokens/action.css'; -import { ActionVariantType, ActionSizesType, FormSizesType, SizesType } from '../../globals/types'; -import { calculateIconName } from '../../utils/calculate-icon-name'; -import { determineLoaderVariant } from '../../utils/determine-loader-variant'; -import { getComponentConfigToken } from '../../utils/get-component-config-token'; -import { BlrIconRenderFunction } from '../icon/renderFunction'; -import { BlrLoaderRenderFunction } from '../loader/renderFunction'; -import { TAG_NAME } from './renderFunction'; - -// -export class BlrIconLink extends LitElement { - static styles = [iconLinkStyleCustom, iconButtonStyleCustom]; - - @property() arialabel?: string; - @property() icon?: SizelessIconType; - @property() href?: string; - @property() target?: string; - @property() onClick?: HTMLLinkElement['onclick']; - @property() onBlur?: HTMLLinkElement['onblur']; - @property() linkId?: string; - @property() variant: ActionVariantType = 'primary'; - @property() size?: ActionSizesType = 'md'; - @property() loading!: boolean; - @property() theme: ThemeType = 'Light'; - - protected render() { - if (this.size) { - const classes = classMap({ - [`${this.variant}`]: this.variant, - [`${this.size}`]: this.size, - }); - - const dynamicStyles = this.theme === 'Light' ? [actionLight] : [actionDark]; - const loaderVariant = determineLoaderVariant(this.variant); - - const loaderSize = getComponentConfigToken([ - 'sem', - 'buttons', - 'loader', - 'sizevariant', - this.size, - ]).toLowerCase() as FormSizesType; - - const iconSizeVariant = getComponentConfigToken([ - 'cmp', - 'IconButton', - 'Icon', - 'SizeVariant', - this.size.toUpperCase(), - ]).toLowerCase() as SizesType; - - return html` - - ${this.loading - ? BlrLoaderRenderFunction({ - sizeVariant: loaderSize, - variant: loaderVariant, - theme: this.theme, - }) - : BlrIconRenderFunction( - { - icon: calculateIconName(this.icon, iconSizeVariant), - sizeVariant: iconSizeVariant, - }, - { - 'aria-hidden': true, - } - )} - `; - } - } -} - -if (!customElements.get(TAG_NAME)) { - customElements.define(TAG_NAME, BlrIconLink); -} - -export type BlrIconLinkType = Omit; diff --git a/packages/ui-library/src/components/icon-link/indexReact.ts b/packages/ui-library/src/components/icon-link/indexReact.ts deleted file mode 100644 index 3099d7a1b..000000000 --- a/packages/ui-library/src/components/icon-link/indexReact.ts +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { createComponent, EventName } from '@lit-labs/react'; - -import { BlrIconLink } from '.'; - -export const BlrIconLinkReact = createComponent({ - tagName: 'blr-icon-link', - elementClass: BlrIconLink, - react: React, - events: { - onClick: 'pointerdown' as EventName, - }, -}); diff --git a/packages/ui-library/src/components/icon-link/renderFunction.ts b/packages/ui-library/src/components/icon-link/renderFunction.ts deleted file mode 100644 index fdce19cac..000000000 --- a/packages/ui-library/src/components/icon-link/renderFunction.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { BlrIconLinkType } from '.'; -import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer'; - -export const TAG_NAME = 'blr-icon-link'; - -export const BlrIconLinkRenderFunction = (params: BlrIconLinkType) => - genericBlrComponentRenderer(TAG_NAME, { ...params }); diff --git a/packages/ui-library/src/components/icon/index.stories.ts b/packages/ui-library/src/components/icon/index.stories.ts index 572e1a11f..680f710d5 100644 --- a/packages/ui-library/src/components/icon/index.stories.ts +++ b/packages/ui-library/src/components/icon/index.stories.ts @@ -80,7 +80,6 @@ export default { - [**Text Input**](?path=/docs/components-text-input--docs) - [**Toggle Switch**](?path=/docs/components-toggle-switch--docs) - [**Tab Bar**](?path=/docs/components-tabbar--docs) - - [**Icon Link**](?path=/docs/components-icon-link--docs) - [**Number Input**](?path=/docs/components-number-input--docs) It is not intended to use the Icon directly when creating new applications. diff --git a/packages/ui-library/src/index.ts b/packages/ui-library/src/index.ts index f1fd6592f..b1195c172 100644 --- a/packages/ui-library/src/index.ts +++ b/packages/ui-library/src/index.ts @@ -53,5 +53,3 @@ export { BlrButtonGroup } from './components/button-group'; export { BlrDivider } from './components/divider'; export { BlrIcon } from './components/icon'; - -export { BlrIconLink } from './components/icon-link';