+
- undefined}
value={props.value}
diff --git a/packages/_helpers/expand-transition.tsx b/packages/_helpers/expand-transition.tsx
index 4a70c0f6..d601a2dc 100644
--- a/packages/_helpers/expand-transition.tsx
+++ b/packages/_helpers/expand-transition.tsx
@@ -1,10 +1,8 @@
import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
+
import { collapse, expand } from 'element-collapse';
-export function ExpandTransition({
- show,
- children,
-}: PropsWithChildren<{ show?: Boolean }>) {
+export function ExpandTransition({ show, children }: PropsWithChildren<{ show?: Boolean }>) {
const [removeElement, setRemoveElement] = useState(!show);
const expandableRef = useRef
(null);
const isMounted = useRef(false);
@@ -42,11 +40,7 @@ export function ExpandTransition({
const initialStyle = !initialShow.current ? 'overflow-hidden h-0' : undefined;
return (
-
+ ) {
+import { ExpandTransition } from '../../_helpers/index.js';
+
+import type { AlertProps } from './props.js';
+
+export function Alert({ show, type, role = 'alert', children, ...props }: PropsWithChildren) {
const variantClasses = ccAlert[type];
const iconVariantClasses = ccAlert[`${type}Icon`];
return (
-
{removeElement ? null : children}
);
diff --git a/packages/_helpers/unstyled-heading.tsx b/packages/_helpers/unstyled-heading.tsx
index 170d1c1d..718c25ba 100644
--- a/packages/_helpers/unstyled-heading.tsx
+++ b/packages/_helpers/unstyled-heading.tsx
@@ -1,4 +1,5 @@
import React, { PropsWithChildren } from 'react';
+
import { HeadingLevel } from './props.js';
export const UnstyledHeading = ({
@@ -23,8 +24,7 @@ export const UnstyledHeading = ({
fontSize: 'unset',
lineHeight: 'unset',
}}
- {...attrs}
- >
+ {...attrs}>
{children}
);
diff --git a/packages/alert/src/component.tsx b/packages/alert/src/component.tsx
index 4eb046d1..0420d7f0 100644
--- a/packages/alert/src/component.tsx
+++ b/packages/alert/src/component.tsx
@@ -1,36 +1,24 @@
-import { classNames } from "@chbphone55/classnames";
-import React, { PropsWithChildren, ReactElement } from "react";
-import { alert as ccAlert } from "@warp-ds/css/component-classes";
-import { AlertProps } from "./props.js";
-import { ExpandTransition } from "../../_helpers/index.js";
+import React, { PropsWithChildren, ReactElement } from 'react';
+
+import { classNames } from '@chbphone55/classnames';
+import { alert as ccAlert } from '@warp-ds/css/component-classes';
import IconError16 from '@warp-ds/icons/react/error-16';
import IconInfo16 from '@warp-ds/icons/react/info-16';
import IconSuccess16 from '@warp-ds/icons/react/success-16';
import IconWarning16 from '@warp-ds/icons/react/warning-16';
-export function Alert({
- show,
- type,
- role = "alert",
- children,
- ...props
-}: PropsWithChildren
- ) => (
+const InteractiveContent = ({ type }: Pick) => (
<>
-
);
-}
+};
export const WithOverriddenRole = () => {
const [show, setShow] = React.useState(true);
@@ -142,10 +144,11 @@ export const WithOverriddenRole = () => {
className="mb-16"
small
primary
- onClick={() => {setShow(!show)}}
+ onClick={() => {
+ setShow(!show);
+ }}
aria-controls="overriden-role-example-alert"
- aria-expanded={show}
- >
+ aria-expanded={show}>
{show ? 'Hide warning alert' : 'Show warning alert'}
@@ -161,4 +164,4 @@ NegativeAlertTask.args = { ...Default.args };
NegativeAlertTask.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
await expect(canvas.getByRole('alert')).toBeInTheDocument();
-};
\ No newline at end of file
+};
diff --git a/packages/attention/src/component.tsx b/packages/attention/src/component.tsx
index 0eecd9b6..b793702d 100644
--- a/packages/attention/src/component.tsx
+++ b/packages/attention/src/component.tsx
@@ -1,20 +1,18 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
-import { classNames } from '@chbphone55/classnames'
-import {
- opposites,
- autoUpdatePosition,
- arrowDirectionClassname,
- useRecompute as recompute,
-} from '@warp-ds/core/attention'
-import { attention as ccAttention } from '@warp-ds/css/component-classes'
-import { ArrowProps, AttentionProps } from './props.js'
-import { i18n } from '@lingui/core'
-import { messages as nbMessages } from './locales/nb/messages.mjs'
-import { messages as enMessages } from './locales/en/messages.mjs'
-import { messages as fiMessages } from './locales/fi/messages.mjs'
-import { activateI18n } from '../../i18n.js'
-import IconClose16 from '@warp-ds/icons/react/close-16'
-import { activeAttentionType, getVariant, pointingAtDirection, useAutoUpdatePosition } from '../../_helpers/attention.js'
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+
+import { classNames } from '@chbphone55/classnames';
+import { i18n } from '@lingui/core';
+import { arrowDirectionClassname, opposites, useRecompute as recompute } from '@warp-ds/core/attention';
+import { attention as ccAttention } from '@warp-ds/css/component-classes';
+import IconClose16 from '@warp-ds/icons/react/close-16';
+
+import { activeAttentionType, getVariant, pointingAtDirection, useAutoUpdatePosition } from '../../_helpers/attention.js';
+import { activateI18n } from '../../i18n.js';
+
+import { messages as enMessages } from './locales/en/messages.mjs';
+import { messages as fiMessages } from './locales/fi/messages.mjs';
+import { messages as nbMessages } from './locales/nb/messages.mjs';
+import type { ArrowProps, AttentionProps } from './props.js';
const variantClasses = {
callout: {
@@ -33,7 +31,7 @@ const variantClasses = {
wrapper: ccAttention.popover,
arrow: ccAttention.arrowPopover,
},
-}
+};
export function Attention(props: AttentionProps) {
let {
@@ -53,156 +51,157 @@ export function Attention(props: AttentionProps) {
crossAxis = false,
fallbackPlacements,
...rest
- } = props
+ } = props;
- activateI18n(enMessages, nbMessages, fiMessages)
+ activateI18n(enMessages, nbMessages, fiMessages);
- const wrapperClasses = classNames(
- ccAttention.base,
- variantClasses[getVariant(rest, variantClasses)].wrapper
- )
+ const wrapperClasses = classNames(ccAttention.base, variantClasses[getVariant(rest, variantClasses)].wrapper);
- const [actualDirection, setActualDirection] = useState(placement)
+ const [actualDirection, setActualDirection] = useState(placement);
// Don't show attention element before its position is computed on first render
- const [isVisible, setIsVisible] = useState(false)
-
- const isMounted = useRef(true)
- const attentionEl = useRef(null)
- const arrowEl = useRef(null)
-
- const attentionState = {
- get isShowing() {
- return isShowing
- },
- get isCallout() {
- return rest.callout
- },
- get actualDirection() {
- return actualDirection
- },
- set actualDirection(v) {
- setActualDirection(v)
- },
- get directionName() {
- return placement
- },
- get arrowEl() {
- return arrowEl.current
- },
- get attentionEl() {
- return attentionEl.current
- },
- set attentionEl(v) {
- attentionEl.current = v
- },
- get targetEl() {
- return targetEl?.current
- },
- get noArrow() {
- return props.noArrow
- },
- get distance() {
- return distance
- },
- get skidding() {
- return skidding
- },
- get flip() {
- return flip
- },
- get crossAxis() {
- return crossAxis
- },
- get fallbackPlacements() {
- return fallbackPlacements
- },
- }
-
- const defaultAriaLabel = () => {
- return `${activeAttentionType(props)} ${!props.noArrow ? pointingAtDirection(actualDirection) : ''}`
- }
+ const [isVisible, setIsVisible] = useState(false);
+
+ const isMounted = useRef(true);
+ const attentionEl = useRef(null);
+ const arrowEl = useRef(null);
+
+ const attentionState = useMemo(
+ () => ({
+ get isShowing() {
+ return isShowing;
+ },
+ get isCallout() {
+ return rest.callout;
+ },
+ get actualDirection() {
+ return actualDirection;
+ },
+ set actualDirection(v) {
+ setActualDirection(v);
+ },
+ get directionName() {
+ return placement;
+ },
+ get arrowEl() {
+ return arrowEl.current;
+ },
+ get attentionEl() {
+ return attentionEl.current;
+ },
+ set attentionEl(v) {
+ attentionEl.current = v;
+ },
+ get targetEl() {
+ return targetEl?.current;
+ },
+ get noArrow() {
+ return props.noArrow;
+ },
+ get distance() {
+ return distance;
+ },
+ get skidding() {
+ return skidding;
+ },
+ get flip() {
+ return flip;
+ },
+ get crossAxis() {
+ return crossAxis;
+ },
+ get fallbackPlacements() {
+ return fallbackPlacements;
+ },
+ }),
+ [
+ isShowing,
+ rest.callout,
+ actualDirection,
+ placement,
+ arrowEl,
+ attentionEl,
+ targetEl,
+ props.noArrow,
+ distance,
+ skidding,
+ flip,
+ crossAxis,
+ fallbackPlacements,
+ ],
+ );
+
+ const defaultAriaLabel = () => `${activeAttentionType(props)} ${!props.noArrow ? pointingAtDirection(actualDirection) : ''}`;
useEffect(() => {
- recompute(attentionState)
- }, [attentionState])
+ recompute(attentionState);
+ }, [attentionState]);
useEffect(() => {
if (isMounted.current) {
- isMounted.current = false
+ isMounted.current = false;
// update attention's visibility after first render if showing by default or it's of type callout
if (isShowing || props.callout) {
- setIsVisible(isShowing)
+ setIsVisible(isShowing);
}
} else {
- setIsVisible(isShowing)
+ setIsVisible(isShowing);
}
- }, [isShowing, props.callout])
+ }, [isShowing, props.callout]);
+
+ useAutoUpdatePosition(targetEl, isShowing, attentionEl, attentionState);
- useAutoUpdatePosition(targetEl, isShowing, attentionEl, autoUpdatePosition, attentionState)
-
- return (
- (!props.callout && props.targetEl === undefined) ? null : (
+ return !props.callout && props.targetEl === undefined ? null : (
(
- ({ direction, ...rest }, ref) => {
- const arrowDirection = opposites[direction]
- const arrowClasses = classNames(
- ccAttention.arrowBase,
- ccAttention[`arrowDirection${arrowDirectionClassname(arrowDirection)}`],
- variantClasses[getVariant(rest, variantClasses)].arrow
- )
-
- return
- }
-)
+const Arrow = forwardRef(({ direction, ...rest }, ref) => {
+ const arrowDirection = opposites[direction];
+ const arrowClasses = classNames(
+ ccAttention.arrowBase,
+ ccAttention[`arrowDirection${arrowDirectionClassname(arrowDirection)}`],
+ variantClasses[getVariant(rest, variantClasses)].arrow,
+ );
+
+ return ;
+});
diff --git a/packages/attention/src/props.ts b/packages/attention/src/props.ts
index a2a0e9e3..d29aa450 100644
--- a/packages/attention/src/props.ts
+++ b/packages/attention/src/props.ts
@@ -1,9 +1,10 @@
import { MutableRefObject } from 'react';
-import { Directions } from '@warp-ds/core/attention'
-export type VirtualElement = {getBoundingClientRect: () => ClientRect | DOMRect, contextElement?: Element};
+import type { Directions } from '@warp-ds/core/attention';
-export type ReferenceElement = Element | VirtualElement
+export type VirtualElement = { getBoundingClientRect: () => ClientRect | DOMRect; contextElement?: Element };
+
+export type ReferenceElement = Element | VirtualElement;
export type AttentionVariants = {
/**
@@ -25,7 +26,7 @@ export type AttentionVariants = {
* Render highlight
*/
highlight?: boolean;
-}
+};
export type ArrowProps = {
/**
@@ -55,17 +56,17 @@ export type AttentionProps = {
* Elements inside of the Attention component
*/
children?: JSX.Element[] | JSX.Element;
-
- /**
+
+ /**
* Sets the aria-label attribute for the Attention component
*/
- 'aria-label'?: string;
-
- /**
+ 'aria-label'?: string;
+
+ /**
* Sets the role attribute for the Attention component
*/
- role?: string;
-
+ role?: string;
+
/**
* Placement according to the target element
* Arrow would be on the opposite side of this position
@@ -100,22 +101,21 @@ export type AttentionProps = {
/**
* The distance from which to offset the attentionEl from the targetEl vertically
*/
-distance?: number;
- /**
+ distance?: number;
+ /**
* The distance from which to offset the attentionEl along its targetEl horizontally
*/
- skidding?: number;
- /**
+ skidding?: number;
+ /**
* Whether Attention element should flip its placement in order to keep it in view
*/
-flip?: boolean;
+ flip?: boolean;
/**
* Whether Attention element should ignore cross axis overflow when flip is enabled
*/
crossAxis?: boolean;
-/**
- * Choose which preferred placements the Attention element should flip to
- */
-fallbackPlacements?: Directions[];
-
+ /**
+ * Choose which preferred placements the Attention element should flip to
+ */
+ fallbackPlacements?: Directions[];
} & AttentionVariants;
diff --git a/packages/attention/stories/Attention.stories.tsx b/packages/attention/stories/Attention.stories.tsx
index 104e084e..97a55fb4 100644
--- a/packages/attention/stories/Attention.stories.tsx
+++ b/packages/attention/stories/Attention.stories.tsx
@@ -1,62 +1,56 @@
-import React from 'react'
-import { Attention } from '../src'
-import { Box } from '../../box/src'
-import { Button } from '../../button/src'
+import React from 'react';
+
import IconInfo16 from '@warp-ds/icons/react/info-16';
-const metadata = { title: 'Overlays/Attention' }
-export default metadata
+import { Box } from '../../box/src';
+import { Button } from '../../button/src';
+import { Attention } from '../src';
+
+const metadata = { title: 'Overlays/Attention' };
+export default metadata;
export function Callout() {
return (
-
- {iconMap[type]}
-
+
+
@@ -38,7 +26,8 @@ export function Alert({
}
const iconMap: {
- [key in AlertProps["type"]]: ReactElement;
+ // eslint-disable-next-line
+ [key in AlertProps['type']]: ReactElement;
} = {
negative: {iconMap[type]}
{children}
This is {type} variant of the alert component
With an additional description
@@ -83,7 +84,7 @@ export const WithInteractiveContent = () => (Negative
@@ -95,13 +96,13 @@ export const WithInteractiveContent = () => (
-
-
@@ -114,15 +115,16 @@ export const WithDefaultRole = () => {
<>
Warning
Info
Example with default role="alert"
+ className="mb-16" + small + primary + onClick={() => { + setShow(!show); + }} + aria-controls="negative-alert" + aria-expanded={show}> + {show ? 'Hide negative alert' : 'Show negative alert'} +This is "negative" variant of the alert component
@@ -130,7 +132,7 @@ export const WithDefaultRole = () => {
+ ref={attentionEl}>
- )
- )
+ );
}
-const Arrow = forwardRef
- {!props.noArrow && (
-
{props.children}
{canClose && (
)}
+
-
-
-
- )
+ );
}
export function CalloutResettingRoleAndAriaLabel() {
return (
-
I am a box full of info
+I am a box full of info
+
I'm a callout because that box over there is new or something
+
-
-
-
- )
+ );
}
export function Highlight() {
- const [show, setShow] = React.useState(false)
- const targetEl = React.useRef(null)
+ const [show, setShow] = React.useState(false);
+ const targetEl = React.useRef(null);
return (
- (null)
+ const [show, setShow] = React.useState(false);
+ const targetEl = React.useRef(null);
return (
-
I am a box full of info
+I am a box full of info
- I'm a callout speech bubble with resetted role and aria-label
- attributes pointing left.
+
+ I'm a callout speech bubble with resetted role and aria-label attributes pointing left.
+
-
- )
+ );
}
export function DismissibleHighlight() {
- const [show, setShow] = React.useState(false)
- const targetEl = React.useRef
@@ -65,37 +59,33 @@ export function Highlight() {
- I am a box full with lots of info to show you how the attention element is positioned on the right-top corner.
- I'm a highlight because that box over there is new or something and I need to have a lot of text! -
+ id="highlight-attention-example" + className="max-w-[359px]"> +I'm a highlight because that box over there is new or something and I need to have a lot of text!
+
- )
+ );
}
export function Tooltip() {
- const [show, setShow] = React.useState(false)
- const targetEl = React.useRef(null)
+ const [show, setShow] = React.useState(false);
+ const targetEl = React.useRef(null);
return (
(null)
+ const [show, setShow] = React.useState(false);
+ const containerRef = React.useRef(null);
const targetEl = React.useRef(null);
React.useEffect(() => {
function onBlurHandler(e) {
if (containerRef.current && !containerRef.current.contains(e.target)) {
- setShow(false)
+ setShow(false);
}
}
- document.addEventListener('mousedown', onBlurHandler)
+ document.addEventListener('mousedown', onBlurHandler);
return () => {
- document.removeEventListener('mousedown', onBlurHandler)
- }
- })
+ document.removeEventListener('mousedown', onBlurHandler);
+ };
+ });
return (
-
@@ -108,168 +98,131 @@ export function DismissibleHighlight() {
highlight
canClose
onDismiss={() => setShow(false)}
- placement='bottom'
+ placement="bottom"
isShowing={show}
targetEl={targetEl}
flip={true}
crossAxis={true}
fallbackPlacements={['right', 'top']}
- id='highlight-attention-example'
- >
-
- I'm a highlight that can dismiss itself -
+ id="highlight-attention-example"> +I'm a highlight that can dismiss itself
-
+
- )
+ );
}
export function Popover() {
- const [show, setShow] = React.useState(false)
- const containerRef = React.useRef
+
-
- lol i am a tooltip
+
+ lol i am a tooltip
lol i am a tooltip
+lol i am a tooltip
- (null)
+ const [show, setShow] = React.useState(false);
+ const containerRef = React.useRef(null);
const targetEl = React.useRef(null);
React.useEffect(() => {
function onBlurHandler(e) {
if (containerRef.current && !containerRef.current.contains(e.target)) {
- setShow(false)
+ setShow(false);
}
}
- document.addEventListener('mousedown', onBlurHandler)
+ document.addEventListener('mousedown', onBlurHandler);
return () => {
- document.removeEventListener('mousedown', onBlurHandler)
- }
- })
+ document.removeEventListener('mousedown', onBlurHandler);
+ };
+ });
return (
-
-
-
-
+
- )
+ );
}
export function PopoverIconAsTargetEl() {
- const [show, setShow] = React.useState(false)
- const containerRef = React.useRef-
-
- - Hello - -
- - World - -
+
-
+
+
+
+
-
+
- Hello +
- World +
-
- A badge without variant or position
-
-);
+export const Default = () => A badge without variant or position ;
export const Variants = () => (
-
-
-
+
- )
+ );
}
diff --git a/packages/badge/src/component.tsx b/packages/badge/src/component.tsx
index 18f35cbc..d570707a 100644
--- a/packages/badge/src/component.tsx
+++ b/packages/badge/src/component.tsx
@@ -1,16 +1,12 @@
+import React from 'react';
+
import { classNames } from '@chbphone55/classnames';
import { badge as ccBadge } from '@warp-ds/css/component-classes';
-import React from 'react';
+
import { BadgeProps } from './props.js';
export function Badge(props: BadgeProps) {
- const {
- children,
- as = 'div',
- variant = 'neutral',
- position,
- ...rest
- } = props;
+ const { children, as = 'div', variant = 'neutral', position, ...rest } = props;
return React.createElement(
as,
@@ -20,11 +16,11 @@ export function Badge(props: BadgeProps) {
ccBadge.base,
ccBadge[variant],
{
- [ccBadge.positionBase]: !!position,
- [ccBadge.positionTL]: position === 'top-left',
- [ccBadge.positionTR]: position === 'top-right',
- [ccBadge.positionBR]: position === 'bottom-right',
- [ccBadge.positionBL]: position === 'bottom-left',
+ [ccBadge.positionBase]: !!position,
+ [ccBadge.positionTL]: position === 'top-left',
+ [ccBadge.positionTR]: position === 'top-right',
+ [ccBadge.positionBR]: position === 'bottom-right',
+ [ccBadge.positionBL]: position === 'bottom-left',
},
props.className,
),
diff --git a/packages/badge/src/props.tsx b/packages/badge/src/props.tsx
index 70ff4f25..b4c62b02 100644
--- a/packages/badge/src/props.tsx
+++ b/packages/badge/src/props.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+
export interface BadgeProps {
/**
* Expand element children
@@ -25,7 +26,7 @@ export interface BadgeProps {
* Type of badge
@default neutral
*/
- variant?: 'neutral' | 'info' | 'positive' | 'warning' |'negative' | 'disabled' | 'notification' | 'price';
+ variant?: 'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'notification' | 'price';
/**
* Position of badge
diff --git a/packages/badge/stories/Badge.stories.tsx b/packages/badge/stories/Badge.stories.tsx
index 6bb276de..eabd6ee0 100644
--- a/packages/badge/stories/Badge.stories.tsx
+++ b/packages/badge/stories/Badge.stories.tsx
@@ -1,14 +1,11 @@
import React from 'react';
+
import { Badge } from '../src';
const metadata = { title: 'Layout/Badge' };
export default metadata;
-export const Default = () => (
- -
-
- - Hello - -
- - World - -
+
-
+
+
+
+
-
+
- Hello +
- World +
-
@@ -43,25 +40,29 @@ export const Positions = () => (
-
-
-
-