Issue #3320781 by brianperry: gdwc-icon-button (d2be21da) · Commits · project / gdwc

gdwc-icon-button/gdwc-icon-button.js

0 → 100644

+55 −0

Original line number	Diff line number	Diff line
		import { LitElement, html, css } from 'lit';
		import { ifDefined } from 'lit/directives/if-defined.js';

		import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
		import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';

		import normalize from '../styles/normalize.css.js';
		import theme from '../styles/theme.css.js';

		setBasePath('../../node_modules/@shoelace-style/shoelace/dist');

		export class GdwcIconButton extends LitElement {
		static get properties() {
		return {
		/**
		* Icon name
		*/
		name: { type: String },
		/**
		* Href converts the button to a link
		*/
		href: { type: String },
		/**
		* Display button as disabled
		*/
		disabled: { type: Boolean },
		};
		}

		static get styles() {
		return [
		normalize,
		theme,
		css`
		:host {
		color: var(--gdwc-icon-color, var(--gdwc-text-1));
		font-size: var(--gdwc-icon-font-size);
		}
		`,
		];
		}

		render() {
		return html`
		<div class="gdwc-icon-button">
		<sl-icon-button
		name="${this.name}"
		href=${ifDefined(this.href)}
		disabled=${ifDefined(this.disabled)}
		>
		</sl-icon-button>
		</div>
		`;
		}
		}

gdwc-icon-button/gdwc-icon-button.stories.js

0 → 100644

+92 −0

Original line number	Diff line number	Diff line
		import { html } from 'lit';
		import { ifDefined } from 'lit/directives/if-defined.js';

		import { controls } from '../stories/fixtures/controls.js';

		import '../icon-button.js';
		import '../stories/components/gdwc-theme.js';

		export default {
		title: 'Elements/Icon Button',
		component: 'Icon Button',
		description: 'An icon that can act as a button and handle onclick events',
		parameters: {
		docs: {
		description: {
		component: 'An icon that can act as a button and handle onclick events',
		},
		},
		},
		argTypes: {
		name: {
		description:
		'Any valid bootstrap icon value https://icons.getbootstrap.com/',
		table: {
		category: 'properties',
		},
		},
		href: {
		description: 'Use the href attribute to convert the button to a link.',
		table: {
		category: 'properties',
		},
		},
		disabled: {
		description: 'Display the button as disabled',
		control: 'boolean',
		table: {
		category: 'properties',
		},
		},
		gdwcText1: controls.colors,
		gdwcIconColor: {
		description: 'Icon color. Falls back to --gdwc-text-1 if not set.',
		options: controls.colors.options,
		control: controls.colors.control,
		table: {
		category: 'css variables',
		},
		},
		gdwcIconFontSize: {
		description: 'Font size of icon',
		options: controls.sizes.options,
		control: controls.sizes.control,
		table: {
		category: 'css variables',
		},
		},
		},
		};

		const Template = args => {
		const { name, gdwcIconColor, gdwcIconFontSize, href, disabled } = args;
		return html` <style>
		gdwc-icon-button {
		--gdwc-icon-color: var(${gdwcIconColor});
		--gdwc-icon-font-size: var(${gdwcIconFontSize});
		}
		</style>
		<gdwc-theme args=${JSON.stringify(args)}>
		<gdwc-icon-button name=${name} href=${ifDefined(
		href
		)} disabled=${ifDefined(disabled)}></gdwc-icon>
		</gdwc-theme>`;
		};

		export const Primary = Template.bind({});
		Primary.args = {
		name: 'emoji-sunglasses-fill',
		gdwcIconFontSize: '--size-8',
		};

		export const LinkButton = Template.bind({});
		LinkButton.args = {
		...Primary.args,
		href: 'https://drupal.org',
		};

		export const Disabled = Template.bind({});
		Disabled.args = {
		...Primary.args,
		disabled: 'true',
		};

gdwc-icon/gdwc-icon.js

+2 −1

Original line number	Diff line number	Diff line
		@@ -11,10 +11,11 @@ export class GdwcIcon extends LitElement {
		static get properties() {
		return {
		/**
		* Example property
		* Icon name
		*/
		name: { type: String },
		};
		// Todo - add label prop
		}

		static get styles() {

icon-button.js

0 → 100644

+5 −0

Original line number	Diff line number	Diff line
		import { GdwcIconButton } from './gdwc-icon-button/gdwc-icon-button.js';

		if (!customElements.get('gdwc-icon-button')) {
		customElements.define('gdwc-icon-button', GdwcIconButton);
		}

index.js

+1 −0

Original line number	Diff line number	Diff line
		import './icon-button.js';
		import './icon.js';
		import './button.js';
		import './card.js';