Skip to content

Commit

Permalink
Docs(web,web-twig,web-react): Make use of new GridItem component in…
Browse files Browse the repository at this point in the history
… `Tooltip` placement examples
  • Loading branch information
adamkudrna committed Nov 14, 2023
1 parent 4430fbb commit 81d9952
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 28 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { ChangeEvent, useState } from 'react';
import DocsBox from '../../../../docs/DocsBox';
import { PlacementDictionaryType } from '../../../types';
import { Grid } from '../../Grid';
import { Grid, GridItem } from '../../Grid';
import { Radio } from '../../Radio';
import Tooltip from '../Tooltip';
import TooltipWrapper from '../TooltipWrapper';
Expand All @@ -20,7 +20,7 @@ const TooltipPlacements = () => {
UNSAFE_className="mx-auto"
UNSAFE_style={{ alignItems: 'center', justifyItems: 'center', maxWidth: '30rem' }}
>
<div style={{ gridRow: 1, gridColumn: 2 }}>
<GridItem columnStart={2} rowStart={1}>
<Radio
name="placement"
isChecked={placement === 'top-left'}
Expand Down Expand Up @@ -48,8 +48,8 @@ const TooltipPlacements = () => {
label="top-right"
value="top-right"
/>
</div>
<div style={{ gridRow: 3, gridColumn: 2 }}>
</GridItem>
<GridItem columnStart={2} rowStart={3}>
<Radio
name="placement"
isChecked={placement === 'bottom-left'}
Expand Down Expand Up @@ -77,8 +77,12 @@ const TooltipPlacements = () => {
label="bottom-right"
value="bottom-right"
/>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gridRow: 2, gridColumn: 1, justifySelf: 'start' }}>
</GridItem>
<GridItem
columnStart={1}
rowStart={2}
UNSAFE_style={{ display: 'flex', flexDirection: 'column', justifySelf: 'start' }}
>
<Radio
name="placement"
isChecked={placement === 'left-top'}
Expand Down Expand Up @@ -106,8 +110,12 @@ const TooltipPlacements = () => {
label="left-bottom"
value="left-bottom"
/>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gridRow: 2, gridColumn: 3, justifySelf: 'end' }}>
</GridItem>
<GridItem
columnStart={3}
rowStart={2}
UNSAFE_style={{ display: 'flex', flexDirection: 'column', justifySelf: 'end' }}
>
<Radio
name="placement"
isChecked={placement === 'right-top'}
Expand Down Expand Up @@ -135,16 +143,16 @@ const TooltipPlacements = () => {
label="right-bottom"
value="right-bottom"
/>
</div>
<div style={{ gridRow: 2, gridColumn: 2 }}>
</GridItem>
<GridItem columnStart={2} rowStart={2}>
<TooltipWrapper UNSAFE_style={{ margin: '5rem auto' }}>
<DocsBox UNSAFE_className="px-900 py-900">
Click
<br /> the dots!
</DocsBox>
<Tooltip placement={placement as PlacementDictionaryType}>{placement}</Tooltip>
</TooltipWrapper>
</div>
</GridItem>
</Grid>
</form>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
<form autocomplete="off">
<Grid cols="3" UNSAFE_className="mx-auto" UNSAFE_style="align-items: center; justify-items: center; max-width: 30rem;">
<div style="grid-row: 1; grid-column: 2">
<GridItem columnStart="2" rowStart="1">

<Radio name="placement" isLabelHidden value="topLeft" id="placement_top_left" label="top-left"/>
<Radio name="placement" isLabelHidden value="top" id="placement_top" label="top"/>
<Radio name="placement" isLabelHidden value="topRight" id="placement_top_right" label="top-right"/>

</div>
<div style="grid-row: 3; grid-column: 2">
</GridItem>
<GridItem columnStart="2" rowStart="3">

<Radio name="placement" isLabelHidden value="bottomLeft" id="placement_bottom_left" label="bottom-left"/>
<Radio name="placement" isLabelHidden value="bottom" id="placement_bottom" label="bottom" isChecked/>
<Radio name="placement" isLabelHidden value="bottomRight" id="placement_bottom_right" label="bottom-right"/>

</div>
<div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 1; justify-self: start;">
</GridItem>
<GridItem columnStart="1" rowStart="2" UNSAFE_style="display: flex; flex-direction: column; justify-self: start;">

<Radio name="placement" isLabelHidden value="leftTop" id="placement_left_top" label="left-top"/>
<Radio name="placement" isLabelHidden value="left" id="placement_left" label="left"/>
<Radio name="placement" isLabelHidden value="leftBottom" id="placement_left_bottom" label="left-bottom"/>

</div>
<div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 3; justify-self: end;">
</GridItem>
<GridItem columnStart="3" rowStart="2" UNSAFE_style="display: flex; flex-direction: column; justify-self: end;">

<Radio name="placement" isLabelHidden value="rightTop" id="placement_right_top" label="right-top"/>
<Radio name="placement" isLabelHidden value="right" id="placement_right" label="right"/>
<Radio name="placement" isLabelHidden value="rightBottom" id="placement_right_bottom" label="right-bottom"/>

</div>
<div style="grid-row: 2; grid-column: 2">
</GridItem>
<GridItem columnStart="2" rowStart="2">

<TooltipWrapper UNSAFE_style="margin: 5rem auto">
<DocsBox UNSAFE_className="px-900 py-900">Click<br /> the dots!</DocsBox>
Expand All @@ -37,20 +37,21 @@
</Tooltip>
</TooltipWrapper>

</div>
</GridItem>
</Grid>
</form>

<script>
const radios = document.querySelectorAll('input[type="radio"]');
radios.forEach(radio => {
radio.addEventListener('change', () => {
const placement = radio.value;
const tooltip = document.getElementById('tooltip_placements_example');
const tooltipText = document.getElementById('tooltip_placements_example_text');
const placementText = document.getElementById('tooltip_placements_example_text');
tooltip.classList.replace(tooltip.classList[1], `Tooltip--${placement}`);
tooltipText.textContent = placement.split(/(?=[A-Z])/).join('-').toLowerCase();
placementText.textContent = placement.split(/(?=[A-Z])/).join('-').toLowerCase();
});
});
</script>
28 changes: 23 additions & 5 deletions packages/web/src/scss/components/Tooltip/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ <h2 class="docs-Heading">Placements</h2>

<form autocomplete="off">
<div class="Grid Grid--cols-3 mx-auto" style="align-items: center; justify-items: center; max-width: 30rem;">
<div style="grid-row: 1; grid-column: 2">
<div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 1">

<label for="placement_top_left" class="Radio">
<input type="radio" name="placement" value="topLeft" id="placement_top_left" class="Radio__input" />
Expand All @@ -30,7 +30,7 @@ <h2 class="docs-Heading">Placements</h2>
</label>

</div>
<div style="grid-row: 3; grid-column: 2">
<div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 3">

<label for="placement_bottom_left" class="Radio">
<input type="radio" name="placement" value="bottomLeft" id="placement_bottom_left" class="Radio__input" />
Expand All @@ -52,7 +52,16 @@ <h2 class="docs-Heading">Placements</h2>
</label>

</div>
<div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 1; justify-self: start;">
<div
class="GridItem"
style="
--grid-item-column-start: 1;
--grid-item-row-start: 2;
display: flex;
flex-direction: column;
justify-self: start;
"
>

<label for="placement_left_top" class="Radio">
<input type="radio" name="placement" value="leftTop" id="placement_left_top" class="Radio__input" />
Expand All @@ -74,7 +83,16 @@ <h2 class="docs-Heading">Placements</h2>
</label>

</div>
<div style="display: flex; flex-direction: column; grid-row: 2; grid-column: 3; justify-self: end;">
<div
class="GridItem"
style="
--grid-item-column-start: 3;
--grid-item-row-start: 2;
display: flex;
flex-direction: column;
justify-self: end;
"
>

<label for="placement_right_top" class="Radio">
<input type="radio" name="placement" value="rightTop" id="placement_right_top" class="Radio__input" />
Expand All @@ -96,7 +114,7 @@ <h2 class="docs-Heading">Placements</h2>
</label>

</div>
<div style="grid-row: 2; grid-column: 2">
<div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 2">

<div class="TooltipWrapper" style="margin: 5rem auto">
<div class="docs-Box px-900 py-900">
Expand Down

0 comments on commit 81d9952

Please sign in to comment.