From e2fb17c443ed3786263f25da00845d1d17efbcd5 Mon Sep 17 00:00:00 2001 From: Andrew Patton Date: Sat, 18 Nov 2023 10:39:57 -0800 Subject: [PATCH] :book: Create useIsOutOfBounds stories --- packages/docs/stories/Dropdown.css | 2 +- packages/docs/stories/Dropdown.stories.tsx | 23 --- packages/docs/stories/useIsOutOfBounds.css | 16 ++ .../docs/stories/useIsOutOfBounds.stories.tsx | 164 ++++++++++++++++++ 4 files changed, 181 insertions(+), 24 deletions(-) create mode 100644 packages/docs/stories/useIsOutOfBounds.css create mode 100644 packages/docs/stories/useIsOutOfBounds.stories.tsx diff --git a/packages/docs/stories/Dropdown.css b/packages/docs/stories/Dropdown.css index c1b1b209..0ba127fc 100644 --- a/packages/docs/stories/Dropdown.css +++ b/packages/docs/stories/Dropdown.css @@ -121,7 +121,7 @@ .position-right.uktdropdown { position: absolute; - right: 70px; + right: 65px; } .out-of-bounds-example.no-direction-change.uktdropdown { diff --git a/packages/docs/stories/Dropdown.stories.tsx b/packages/docs/stories/Dropdown.stories.tsx index a1dc5a94..4c3e142e 100644 --- a/packages/docs/stories/Dropdown.stories.tsx +++ b/packages/docs/stories/Dropdown.stories.tsx @@ -397,29 +397,6 @@ export const OverlappingDropdown: Story = { }, }; -export const OutOfBoundsAtBottom: Story = { - args: { - children: ( - - ), - className: 'out-of-bounds-example', - isSearchable: true, - name: 'outofboundsatbottom', - placeholder: 'Show above', - }, -}; - export const OutOfBoundsAtRight: Story = { args: { children: ( diff --git a/packages/docs/stories/useIsOutOfBounds.css b/packages/docs/stories/useIsOutOfBounds.css new file mode 100644 index 00000000..213655dc --- /dev/null +++ b/packages/docs/stories/useIsOutOfBounds.css @@ -0,0 +1,16 @@ +.out-of-bounds-example.uktdropdown { + position: absolute; + bottom: 50px; +} +.out-of-bounds-example input { + width: 150px; +} + +.out-of-bounds-example .uktdropdown-body { + width: 250px; +} + +.position-right.uktdropdown { + position: absolute; + right: 70px; +} diff --git a/packages/docs/stories/useIsOutOfBounds.stories.tsx b/packages/docs/stories/useIsOutOfBounds.stories.tsx new file mode 100644 index 00000000..f51d3e35 --- /dev/null +++ b/packages/docs/stories/useIsOutOfBounds.stories.tsx @@ -0,0 +1,164 @@ +import * as React from 'react'; + +import Dropdown from '../../dropdown/src/Dropdown.js'; + +import './Dropdown.css'; +import './useIsOutOfBounds.css'; + +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + argTypes: { + element: { + description: + 'The HTMLElement that will be checked to see if it is out of bounds and in what direction. Can be null or undefined.', + table: { + type: { summary: 'object' }, + }, + }, + }, + component: Dropdown, + parameters: { + controls: { exclude: /.*/g }, + docs: { + description: { + component: `\`useIsOutOfBounds\` is a React hook that returns an object indicating if the +current component is out of the bounds of its nearest ancestor that doesn’t have overflow: visible. +The return value is +\` +type OutOfBounds = { + bottom: boolean; + hasLayout: boolean; + left: boolean; + maxHeight: null | number; + maxWidth: null | number; + right: boolean; + top: boolean; +}; +\` +It is used by in @acusti/dropdown to automatically position the dropdown in the direction +where there is room for it to render, so this story uses \`\` to illustrate that behavior.`, + }, + }, + }, + //https://storybook.js.org/docs/react/writing-docs/autodocs#setup-automated-documentation + tags: ['autodocs'], + title: 'UIKit/Hooks/useIsOutOfBounds', +}; + +export default meta; + +type Story = StoryObj; + +const list = ( +
    +
  • Brunei Darussalam
    • +
  • Cambodia
    • +
  • Indonesia
    • +
  • Laos
    • +
  • Malaysia
    • +
  • Myanmar (Burma)
    • +
  • Philippines
    • +
  • Singapore
    • +
  • Thailand
    • +
  • Timor-Leste (East Timor)
    • +
  • Vietnam
    • +
+); + +export const NotOutOfBounds: Story = { + args: { + children: list, + className: 'not-out-of-bounds-example', + isSearchable: true, + name: 'notoutofbounds', + placeholder: 'Default behavior', + }, +}; + +export const OutOfBoundsAtBottom: Story = { + args: { + children: list, + className: 'out-of-bounds-example', + isSearchable: true, + name: 'outofboundsatbottom', + placeholder: 'Show above', + }, +}; + +export const OutOfBoundsAtRight: Story = { + args: { + children: list, + className: 'out-of-bounds-example position-right', + isSearchable: true, + name: 'outofboundsatright', + placeholder: 'Show above & to the left', + }, +}; + +export const OutOfBoundsTopAndBottom: Story = { + args: { + children: ( +
    +
  • Algeria
    • +
  • Angola
    • +
  • Benin
    • +
  • Botswana
    • +
  • Burkina Faso
    • +
  • Burundi
    • +
  • Cabo Verde
    • +
  • Cameroon
    • +
  • Central African Republic
    • +
  • Chad
    • +
  • Comoros
    • +
  • Congo, Democratic Republic of the
    • +
  • Congo, Republic of the
    • +
  • Cote d’Ivoire
    • +
  • Djibouti
    • +
  • Egypt
    • +
  • Equatorial Guinea
    • +
  • Eritrea
    • +
  • Eswatini
    • +
  • Ethiopia
    • +
  • Gabon
    • +
  • Gambia
    • +
  • Ghana
    • +
  • Guinea
    • +
  • Guinea-Bissau
    • +
  • Kenya
    • +
  • Lesotho
    • +
  • Liberia
    • +
  • Libya
    • +
  • Madagascar
    • +
  • Malawi
    • +
  • Mali
    • +
  • Mauritania
    • +
  • Mauritius
    • +
  • Morocco
    • +
  • Mozambique
    • +
  • Namibia
    • +
  • Niger
    • +
  • Nigeria
    • +
  • Rwanda
    • +
  • Sao Tome and Principe
    • +
  • Senegal
    • +
  • Seychelles
    • +
  • Sierra Leone
    • +
  • Somalia
    • +
  • South Africa
    • +
  • South Sudan
    • +
  • Sudan
    • +
  • Tanzania
    • +
  • Togo
    • +
  • Tunisia
    • +
  • Uganda
    • +
  • Zambia
    • +
  • Zimbabwe
    • +
+ ), + className: 'out-of-bounds-top-and-bottom-example', + isSearchable: true, + name: 'outofboundstopandbottom', + placeholder: 'long list', + }, +};