-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(rich-tooltip): add new component (#698)
- Loading branch information
1 parent
9fa4ba8
commit 192b380
Showing
11 changed files
with
538 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 0 additions & 1 deletion
1
packages/core/src/components/badge/stories/badge.core.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
packages/core/src/components/rich-tooltip/rich-tooltip.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| :host { | ||
| ::part(tooltip) { | ||
| background: var(--color-neutral-light-5); | ||
| border-radius: var(--border-radius); | ||
| box-shadow: var(--elevation-4); | ||
| color: var(--color-neutral-regular); | ||
| filter: drop-shadow(var(--elevation-3)); | ||
| max-width: 100%; | ||
| padding: var(--spacing-small); | ||
| padding-bottom: var(--spacing-medium); | ||
| padding-top: var(--spacing-xlarge); | ||
| transition: all 0.15s ease-in-out; | ||
| transition-property: opacity, transform, visibility; | ||
| width: 252px; | ||
| } | ||
|
|
||
| .title { | ||
| font: var(--text-body-small); | ||
| font-weight: var(--font-weight-bold); | ||
| letter-spacing: var(--text-body-small-letter); | ||
| margin: 0; | ||
| margin-bottom: var(--spacing-xsmall); | ||
| } | ||
|
|
||
| .text { | ||
| font: var(--text-body-small); | ||
| font-weight: var(--font-weight-regular); | ||
| letter-spacing: var(--text-body-small-letter); | ||
| margin: 0; | ||
| } | ||
|
|
||
| .action { | ||
| background: none; | ||
| border: none; | ||
| color: var(--color-brand-secondary-regular); | ||
| cursor: pointer; | ||
| font: var(--button-medium); | ||
| letter-spacing: var(--button-medium-letter); | ||
| margin: 0; | ||
| margin-top: var(--spacing-xsmall); | ||
| } | ||
| } |
46 changes: 46 additions & 0 deletions
46
packages/core/src/components/rich-tooltip/rich-tooltip.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { newSpecPage } from '@stencil/core/testing' | ||
|
|
||
| import { AtomRichTooltip } from './rich-tooltip' | ||
|
|
||
| describe('AtomRichTooltip', () => { | ||
| const createTooltip = ( | ||
| id: string, | ||
| action: AtomRichTooltip['action'] = 'hover', | ||
| open = false | ||
| ) => ` | ||
| <button id="${id}" aria-describedby="${id}--tooltip">Hover</button> | ||
| <atom-rich-tooltip id="${id}--tooltip" element="${id}" open="${open}" action="${action}" label="Test Title" actiontext="Click me">Tooltip content</atom-rich-tooltip> | ||
| ` | ||
|
|
||
| it('should render correctly', async () => { | ||
| const page = await newSpecPage({ | ||
| components: [AtomRichTooltip], | ||
| html: createTooltip('test-element'), | ||
| }) | ||
|
|
||
| expect(page.root).toEqualHtml(` | ||
| <atom-rich-tooltip id="test-element--tooltip" element="test-element" open="false" action="hover" label="Test Title" actiontext="Click me" role="tooltip"> | ||
| <mock:shadow-root> | ||
| <atom-tooltip element="test-element" placement="top" action="hover" class="rich-tooltip"> | ||
| <div class="rich-tooltip__content"> | ||
| <h1 class="title">Test Title</h1> | ||
| <p class="text"> | ||
| <slot></slot> | ||
| </p> | ||
| </div> | ||
| </atom-tooltip> | ||
| </mock:shadow-root> | ||
| Tooltip content | ||
| </atom-rich-tooltip> | ||
| `) | ||
| }) | ||
|
|
||
| it('should not display action text when action is hover', async () => { | ||
| const page = await newSpecPage({ | ||
| components: [AtomRichTooltip], | ||
| html: createTooltip('test-element', 'hover'), | ||
| }) | ||
|
|
||
| expect(page.root?.shadowRoot?.querySelector('.action')).toBeNull() | ||
| }) | ||
| }) |
61 changes: 61 additions & 0 deletions
61
packages/core/src/components/rich-tooltip/rich-tooltip.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { | ||
| Component, | ||
| Element, | ||
| Event, | ||
| EventEmitter, | ||
| h, | ||
| Host, | ||
| Prop, | ||
| } from '@stencil/core' | ||
|
|
||
| @Component({ | ||
| tag: 'atom-rich-tooltip', | ||
| styleUrl: 'rich-tooltip.scss', | ||
| shadow: true, | ||
| }) | ||
| export class AtomRichTooltip { | ||
| @Element() el: HTMLElement | ||
|
|
||
| @Prop() element: string | ||
| @Prop() placement: | ||
| | 'top' | ||
| | 'top-start' | ||
| | 'top-end' | ||
| | 'bottom' | ||
| | 'bottom-start' | ||
| | 'bottom-end' | ||
| | 'right' | ||
| | 'left' = 'top' | ||
| @Prop() action: 'hover' | 'click' = 'hover' | ||
| @Prop() label?: string | ||
| @Prop() actionText?: string | ||
| @Prop({ mutable: true }) open = false | ||
|
|
||
| @Event() buttonAction?: EventEmitter<void> | ||
|
|
||
| render() { | ||
| return ( | ||
| <Host role='tooltip'> | ||
| <atom-tooltip | ||
| element={this.element} | ||
| placement={this.placement} | ||
| action={this.action} | ||
| open={this.open} | ||
| class='rich-tooltip' | ||
| > | ||
| <div class='rich-tooltip__content'> | ||
| {this.label && <h1 class='title'>{this.label}</h1>} | ||
| <p class='text'> | ||
| <slot /> | ||
| </p> | ||
| {this.action === 'click' && this.actionText && ( | ||
| <button class='action' onClick={() => this.buttonAction.emit()}> | ||
| {this.actionText} | ||
| </button> | ||
| )} | ||
| </div> | ||
| </atom-tooltip> | ||
| </Host> | ||
| ) | ||
| } | ||
| } |
114 changes: 114 additions & 0 deletions
114
packages/core/src/components/rich-tooltip/stories/rich-tooltip.args.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import { Category } from '@atomium/storybook-utils/enums/table' | ||
| import { withActions } from '@storybook/addon-actions/decorator' | ||
|
|
||
| export const RichTooltipStoryArgs = { | ||
| parameters: { | ||
| actions: { | ||
| handles: ['atomOpen', 'atomClose'], | ||
| }, | ||
| decorators: [withActions], | ||
| docs: { | ||
| description: { | ||
| component: | ||
| 'Rich Tooltip is a component that provides more information to the user and allows them to perform quick actions within the context of the problem.', | ||
| }, | ||
| }, | ||
| layout: 'centered', | ||
| }, | ||
| argTypes: { | ||
| placement: { | ||
| control: 'select', | ||
| defaultValue: { summary: 'top' }, | ||
| options: [ | ||
| 'top', | ||
| 'top-start', | ||
| 'top-end', | ||
| 'bottom', | ||
| 'bottom-start', | ||
| 'bottom-end', | ||
| 'right', | ||
| 'left', | ||
| ], | ||
| description: 'Determines placement for tooltip', | ||
| table: { | ||
| category: Category.PROPERTIES, | ||
| }, | ||
| }, | ||
| action: { | ||
| control: 'select', | ||
| defaultValue: { summary: 'hover' }, | ||
| options: ['hover', 'click'], | ||
| description: | ||
| 'Determines the trigger action for the tooltip: `hover` or `click`.', | ||
| table: { | ||
| category: Category.PROPERTIES, | ||
| }, | ||
| }, | ||
| element: { | ||
| control: 'text', | ||
| description: | ||
| 'Specifies the element responsible for opening/closing the tooltip.', | ||
| table: { | ||
| category: Category.PROPERTIES, | ||
| }, | ||
| }, | ||
| open: { | ||
| control: 'boolean', | ||
| description: 'Controls whether the tooltip is open or closed.', | ||
| table: { | ||
| category: Category.PROPERTIES, | ||
| }, | ||
| }, | ||
| label: { | ||
| control: 'text', | ||
| description: 'Determines a title for tooltip.', | ||
| table: { | ||
| category: Category.PROPERTIES, | ||
| }, | ||
| }, | ||
| text: { | ||
| control: 'text', | ||
| description: 'Determines a text for tooltip.', | ||
| table: { | ||
| category: Category.PROPERTIES, | ||
| }, | ||
| }, | ||
| actionText: { | ||
| control: 'text', | ||
| description: 'Determines a text for action button.', | ||
| table: { | ||
| category: Category.PROPERTIES, | ||
| }, | ||
| }, | ||
| buttonAction: { | ||
| description: | ||
| 'Event emitted when the action button is clicked. Action needs to be click to show the button.', | ||
| table: { | ||
| category: Category.EVENTS, | ||
| }, | ||
| }, | ||
| atomOpen: { | ||
| description: | ||
| 'Event emitted when hover element, but for mobile when click in element.', | ||
| table: { | ||
| category: Category.EVENTS, | ||
| }, | ||
| }, | ||
| atomClose: { | ||
| description: 'Event emitted when the tooltip is closed.', | ||
| table: { | ||
| category: Category.EVENTS, | ||
| }, | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| export const RichTooltipComponentArgs = { | ||
| element: 'atomium-element', | ||
| placement: 'top', | ||
| text: 'Supporting line text lorem ipsum dolor sit amet, consectetur', | ||
| action: 'hover', | ||
| label: 'Title', | ||
| actionText: 'Action Button', | ||
| open: false, | ||
| } |
Oops, something went wrong.