diff --git a/src/components/atoms/Clickable/Clickable.css b/src/components/atoms/Clickable/Clickable.css new file mode 100644 index 00000000..9e97985d --- /dev/null +++ b/src/components/atoms/Clickable/Clickable.css @@ -0,0 +1,4 @@ +.btn { + --bs-btn-padding-x: 0; + --bs-btn-padding-y: 0; +} diff --git a/src/components/atoms/Clickable/Clickable.js b/src/components/atoms/Clickable/Clickable.js new file mode 100644 index 00000000..b44611ce --- /dev/null +++ b/src/components/atoms/Clickable/Clickable.js @@ -0,0 +1,61 @@ +import styles from '!!raw-loader!./Clickable.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); + +// A space for some clickable content. +template.innerHTML = ` + +`; + +export default class Clickable extends HTMLElement { + constructor() { + // Always call super constructor. + super(); + + // Create a shadow root. + this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + this.shadowRoot.addEventListener('slotchange', (ev) => { + const elements = ev.target.assignedElements(); + elements.forEach((element) => { + if (typeof element.setIsClickable === 'function') { + const btnColor = this.getAttribute('data-btn-color'); + element.setIsClickable(true, btnColor); + } + }); + this.clickable.append(...elements); + }); + + // Create component. + this.clickable = document.createElement('a'); + + // Add styles. + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + this.shadowRoot.appendChild(bootStyles); + this.shadowRoot.appendChild(variableStyles); + this.shadowRoot.appendChild(itemStyles); + + // Set attributes on node. + const href = this.getAttribute('href'); + this.clickable.setAttribute('href', href); + const target = this.getAttribute('target'); + this.clickable.setAttribute('target', target); + + // Set bootstrap classes. + const btnColor = this.getAttribute('data-btn-color'); + this.clickable.classList.add('btn', btnColor); + + // Add slot to clickable area. + this.clickable.appendChild(template.content.cloneNode(true)); + this.shadowRoot.appendChild(this.clickable); + } +} diff --git a/src/components/atoms/Clickable/cod-clickable.js b/src/components/atoms/Clickable/cod-clickable.js new file mode 100644 index 00000000..5581b310 --- /dev/null +++ b/src/components/atoms/Clickable/cod-clickable.js @@ -0,0 +1,3 @@ +import Clickable from './Clickable'; + +customElements.define('cod-clickable', Clickable); diff --git a/src/components/organisms/Card/Card.css b/src/components/organisms/Card/Card.css index e69de29b..2f79d29d 100644 --- a/src/components/organisms/Card/Card.css +++ b/src/components/organisms/Card/Card.css @@ -0,0 +1,3 @@ +.top-icon { + margin-top: 1em; +} diff --git a/src/components/organisms/Card/Card.js b/src/components/organisms/Card/Card.js index 29eef75e..60e8ef52 100644 --- a/src/components/organisms/Card/Card.js +++ b/src/components/organisms/Card/Card.js @@ -98,12 +98,21 @@ export default class Card extends HTMLElement { const id = this.getAttribute('data-id'); const extraClasses = this.getAttribute('data-extra-classes'); const cardClasses = ['card']; - extraClasses !== null ? cardClasses.push(extraClasses) : 0; + extraClasses !== null ? cardClasses.push(extraClasses.split(' ')) : 0; width !== null ? (this.card.style.width = width) : 0; id !== null ? (this.card.id = id) : 0; - this.card.className = cardClasses.join(' '); + // Include any existing classes from the element. + this.card.classList.add(...cardClasses); if (!this.shadowRoot.querySelector('div')) { this.shadowRoot.appendChild(this.card); } } + + setIsClickable(isClickable = true, color = null) { + if (isClickable) { + this.card.classList.add('btn', color); + } else { + this.card.classList.remove('btn', color); + } + } } diff --git a/src/stories/clickable.stories.js b/src/stories/clickable.stories.js new file mode 100644 index 00000000..df5f515b --- /dev/null +++ b/src/stories/clickable.stories.js @@ -0,0 +1,43 @@ +import { html } from 'lit-html'; +import '../components/atoms/Clickable/cod-clickable'; +import '../components/organisms/Card/cod-card'; +import '../components/atoms/Icon/cod-icon'; +import '../components/atoms/CardBody/cod-card-body'; + +export default { + title: 'Components/Atoms/Clickable', +}; + +export const ActionButton = () => html` + + +
+ +
+ +
Do Something
+

Like click on this card.

+
+
+ +`; + +export const ActionButtonSuccess = () => html` + + +
+ +
+ +
Do Something
+

Like click on this card.

+
+
+ +`;