Skip to content

Commit

Permalink
feat(website): Showing custom properties hovering on color name in we…
Browse files Browse the repository at this point in the history
…bsite showcase - FRONT-4703
  • Loading branch information
planctus committed Dec 19, 2024
1 parent b161870 commit f33457a
Show file tree
Hide file tree
Showing 10 changed files with 99 additions and 227 deletions.
1 change: 1 addition & 0 deletions src/themes/ec/_custom-properties.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
--ecl-color-stroke: color-mix(in srgb, var(--c-p) 50%, transparent);
--ecl-color-overlay-light: color-mix(in srgb, var(--c-d) 70%, transparent);
--ecl-color-overlay-dark: color-mix(in srgb, var(--c-d) 90%, transparent);
--ecl-color-white: #{map.get($color, 'white')};
--ecl-color-neutral: #{map.get($color, 'neutral-100')};
--ecl-color-neutral-180: #{map.get($color, 'neutral-180')};
--ecl-color-neutral-160: #{map.get($color, 'neutral-160')};
Expand Down
1 change: 0 additions & 1 deletion src/website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
"@mdx-js/mdx": "3.1.0",
"@mdx-js/react": "3.1.0",
"classnames": "2.5.1",
"clipboard": "2.0.11",
"core-js": "3.39.0",
"deepmerge": "4.3.1",
"html-entities": "2.5.2",
Expand Down
1 change: 0 additions & 1 deletion src/website/src/pages/ec/guidelines/colours/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ order: 2
---

import {
ColorCard,
ColorLayout,
ColorPalette,
ColorPaletteItem,
Expand Down
1 change: 0 additions & 1 deletion src/website/src/pages/eu/guidelines/colours/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ order: 2
---

import {
ColorCard,
ColorLayout,
ColorPalette,
ColorPaletteItem,
Expand Down
66 changes: 0 additions & 66 deletions src/website/src/website-components/Color/Card.jsx

This file was deleted.

99 changes: 0 additions & 99 deletions src/website/src/website-components/Color/Card.scss

This file was deleted.

49 changes: 33 additions & 16 deletions src/website/src/website-components/Color/PaletteItem.jsx
Original file line number Diff line number Diff line change
@@ -1,54 +1,71 @@
import React, { PureComponent } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import ClipboardJS from 'clipboard';

import styles from './PaletteItem.scss';

class PaletteItem extends PureComponent {
constructor(props) {
super(props);
this.element = React.createRef();
this.clipboard = null;

const { name, id, value, ui, main } = props;
this.color = { name, id, value, ui, main };
}

componentDidMount() {
const { name, id } = this.color;
this.clipboard = new ClipboardJS(`#${id || name.toLowerCase()}`);
}
const sanitizedName = name.replace(/\s*\([^)]*\)/g, '').trim();
this.customProperty = `--ecl-color-${sanitizedName.toLowerCase()}`;

componentWillUnmount() {
if (this.clipboard) this.clipboard.destroy();
// State to manage tooltip visibility
this.state = {
tooltipVisible: false,
};
}

handleCopy = (text) => {
navigator.clipboard.writeText(text);
this.setState({ tooltipVisible: true });

// Hide tooltip after 1 second
setTimeout(() => {
this.setState({ tooltipVisible: false });
}, 1000);
};

render() {
const { name, id, value, ui, main } = this.color;
const { tooltipVisible } = this.state;

return (
<li
className={classnames(
styles.item,
{
[styles[`item--${ui}`]]: true,
},
{ [styles[`item--${ui}`]]: true },
{ [styles['item--main']]: main },
)}
style={{ backgroundColor: value, color: value }}
>
<h3 className={styles.title}>{name}</h3>
<div className={styles.nameWrapper}>
<button
type="button"
className={styles.title}
onClick={() => this.handleCopy(this.customProperty)}
>
<span className={styles.nameHoverHidden}>{name}</span>
<span className={styles.nameHoverOnly}>{this.customProperty}</span>
</button>

{tooltipVisible && <div className={styles.tooltip}>Copied!</div>}
</div>

<button
type="button"
id={id || name.toLowerCase()}
data-clipboard-text={value.toUpperCase()}
className={styles.button}
>
<span className={styles['button-hover-hidden']}>
<span className={styles.buttonHoverHidden}>
{value.toUpperCase()}
</span>
<span className={styles['button-hover-only']}>COPY</span>
<span className={styles.buttonHoverOnly}>COPY</span>
</button>
</li>
);
Expand Down
Loading

0 comments on commit f33457a

Please sign in to comment.