paris 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # paris
 
+## 0.13.0
+
+### Minor Changes
+
+- 60c9428: InformationalTooltip: new component, tooltip with a heading and body text
+- 60c9428: Select: added new `segmented` kind and `segmentedHeight` prop
+- 60c9428: Accordion: added new `card` kind and `size` prop
+
+### Patch Changes
+
+- 60c9428: Icon: new `info` icon
+- 60c9428: Theme: new blue400 and blue500 tokens, with contentLink variable
+- 60c9428: Select: hover color appears above selected color
+
 ## 0.12.0
 
 ### Minor Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -41,6 +41,7 @@
     "./drawer": "./src/stories/drawer/index.ts",
     "./field": "./src/stories/field/index.ts",
     "./icon": "./src/stories/icon/index.ts",
+    "./informationaltooltip": "./src/stories/informationaltooltip/index.ts",
     "./input": "./src/stories/input/index.ts",
     "./menu": "./src/stories/menu/index.ts",
     "./pagination": "./src/stories/pagination/index.ts",
@@ -65,6 +66,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.14",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "clsx": "^1.2.1",
     "font-color-contrast": "^11.1.0",
     "framer-motion": "^10.16.4",

package/src/stories/accordion/Accordion.module.scss

@@ -1,4 +1,4 @@
-.container {
+.default {
     color: var(--pte-new-colors-contentPrimary);
     border-bottom: 1px solid var(--pte-new-colors-borderMedium);
     cursor: pointer;
@@ -51,3 +51,68 @@
         background-color: var(--pte-new-colors-overlaySubtle);
     }
 }
+
+.card {
+    color: var(--pte-new-colors-contentPrimary);
+    border: 1px solid var(--pte-new-colors-borderStrong);
+    border-radius: var(--pte-new-borders-radius-roundedMedium);
+    background: var(--pte-new-colors-surfacePrimary);
+    cursor: pointer;
+    transition: var(--pte-animations-interaction);
+
+    &.open {
+        border-color: var(--pte-new-colors-borderUltrastrong);
+    }
+
+    .title {
+        padding: 10px 12px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 10px;
+        background-color: var(--pte-new-colors-overlayWhiteSubtle);
+
+        border-bottom: 1px solid transparent;
+        transition: var(--pte-animations-interaction);
+
+        &.large {
+            padding: 14px 16px;
+        }
+
+        &.open {
+            background-color: var(--pte-new-colors-overlayMedium);
+            border-bottom-color: var(--pte-new-colors-borderStrong);
+        }
+
+        &:hover {
+            background-color: var(--pte-new-colors-overlayStrong);
+        }
+    }
+
+    .chevron {
+        transition: transform var(--pte-animations-duration-gradual) var(--pte-animations-timing-easeInOutExpo);
+        transform: rotate(90deg);
+
+        &.open {
+            transform: rotate(-90deg);
+        }
+    }
+
+    .dropdown {
+        overflow: hidden;
+        cursor: auto;
+    }
+
+    .dropdownContent {
+        padding: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        background-color: var(--pte-new-colors-overlayWhiteSubtle);
+
+        &.large {
+            padding: 16px;
+            gap: 16px;
+        }
+    }
+}

package/src/stories/accordion/Accordion.stories.ts

@@ -16,3 +16,20 @@ export const Default: Story = {
         children: 'In an alleyway, drinking champagne.',
     },
 };
+
+export const Card: Story = {
+    args: {
+        title: 'Where were we?',
+        children: 'In an alleyway, drinking champagne.',
+        kind: 'card',
+    },
+};
+
+export const CardLarge: Story = {
+    args: {
+        title: 'Where were we?',
+        children: 'In an alleyway, drinking champagne.',
+        kind: 'card',
+        size: 'large',
+    },
+};

package/src/stories/accordion/Accordion.tsx

@@ -6,10 +6,21 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import clsx from 'clsx';
 import styles from './Accordion.module.scss';
 import { TextWhenString } from '../utility';
+import { ChevronRight, Icon } from '../icon';
 
 export type AccordionProps = {
     /** The title of the Accordion. */
     title?: ReactNode;
+    /**
+     * The style of the Accordion.
+     * @default default
+     */
+    kind?: 'default' | 'card';
+    /**
+     * The size of the Accordion. Only affects kind="card".
+     * @default small
+     */
+    size?: 'small' | 'large';
     /** Whether the Accordion is open. If provided, the Accordion will be a controlled component. */
     isOpen?: boolean;
     /** A handler for when the Accordion state changes. */
@@ -32,6 +43,8 @@ export type AccordionProps = {
  */
 export const Accordion: FC<AccordionProps> = ({
     title,
+    kind = 'default',
+    size = 'small',
     isOpen,
     onOpenChange,
     children,
@@ -40,10 +53,10 @@ export const Accordion: FC<AccordionProps> = ({
 
     return (
         <div
-            className={styles.container}
+            className={clsx(styles[kind], open && styles.open)}
         >
             <div
-                className={clsx(styles.title, open && styles.open)}
+                className={clsx(styles.title, styles[size], open && styles.open)}
                 onClick={() => setOpen((o) => !o)}
                 onKeyDown={(e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
@@ -60,12 +73,21 @@ export const Accordion: FC<AccordionProps> = ({
                         {title}
                     </TextWhenString>
                 </div>
-                <div className={styles.plusIcon}>
-                    <FontAwesomeIcon
-                        icon={faPlus}
-                        className={clsx(open && styles.open)}
+                {kind === 'default' && (
+                    <div className={styles.plusIcon}>
+                        <FontAwesomeIcon
+                            icon={faPlus}
+                            className={clsx(open && styles.open)}
+                        />
+                    </div>
+                )}
+                {kind === 'card' && (
+                    <Icon
+                        icon={ChevronRight}
+                        size={16}
+                        className={clsx(styles.chevron, open && styles.open)}
                     />
-                </div>
+                )}
             </div>
             <AnimatePresence>
                 {open && (
@@ -84,7 +106,7 @@ export const Accordion: FC<AccordionProps> = ({
                             ease: [0.87, 0, 0.13, 1],
                         }}
                     >
-                        <div className={styles.dropdownContent}>
+                        <div className={clsx(styles.dropdownContent, styles[size])}>
                             <TextWhenString kind="paragraphXSmall">
                                 {children}
                             </TextWhenString>

package/src/stories/icon/Info.tsx

@@ -0,0 +1,8 @@
+import { memo } from 'react';
+import type { IconDefinition } from './Icon';
+
+export const Info: IconDefinition = memo(({ size }) => (
+    <svg width={size} height={size} viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" fill="currentColor" />
+    </svg>
+));

package/src/stories/icon/index.ts

@@ -7,3 +7,4 @@ export { Spinner } from './Spinner';
 export { NotificationDot } from './NotificationDot';
 export { Check } from './Check';
 export { ArrowRight } from './ArrowRight';
+export { Info } from './Info';

package/src/stories/informationaltooltip/InformationalTooltip.module.scss

@@ -0,0 +1,24 @@
+.tooltip {
+    background-color: var(--pte-new-colors-surfacePrimary);
+    border-radius: var(--pte-new-borders-radius-rounded);
+    box-shadow: var(--pte-new-lighting-deepBelow);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 6px;
+    width: 280px;
+    padding: 12px;
+    color: var(--pte-new-colors-contentTertiary);
+
+    &.medium {
+        width: 240px;
+    }
+}
+
+.heading {
+    color: var(--pte-new-colors-contentSecondary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-left: 1px;
+}

package/src/stories/informationaltooltip/InformationalTooltip.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { createElement } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { InformationalTooltip } from './InformationalTooltip';
+
+const meta: Meta<typeof InformationalTooltip> = {
+    title: 'Surfaces/InformationalTooltip',
+    component: InformationalTooltip,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof InformationalTooltip>;
+
+const render: Story['render'] = (args) =>
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    createElement('div', {
+        style: { minHeight: '200px' },
+    }, createElement(InformationalTooltip, {
+        ...args,
+    }));
+
+export const Default: Story = {
+    args: {
+        children: 'If you are being payed on 1099s (through transfer outs) you need to pay taxes quarterly. The amount you pay each quarter is a portion of your estimated tax burden for the year, based on your anticipated income amount. If you over/underpay, you will be refunded/owe the difference at the end of the year. ',
+        heading: 'Quarterly taxes',
+    },
+    render,
+};
+
+export const Medium: Story = {
+    args: {
+        children: 'This is a medium tooltip with no heading',
+        size: 'medium',
+    },
+    render,
+};
+
+export const CustomTrigger: Story = {
+    args: {
+        children: 'With some text below',
+        heading: 'Another info tooltip',
+        size: 'medium',
+        trigger: (
+            <div>
+                This is a custom trigger
+            </div>
+        ),
+    },
+    render,
+};
+
+export const Open: Story = {
+    args: {
+        children: 'Open boolean set to true',
+        size: 'medium',
+        open: true,
+    },
+    render,
+};
+
+export const CustomAlign: Story = {
+    args: {
+        children: 'With some text below',
+        heading: 'Another info tooltip',
+        size: 'medium',
+        align: 'end',
+        trigger: (
+            <div>
+                This tooltip below is set to align = `end`
+            </div>
+        ),
+    },
+    render,
+};
+
+export const HeadingIcon: Story = {
+    args: {
+        children: 'This is a medium tooltip with a heading',
+        size: 'medium',
+        headingIcon: (createElement(FontAwesomeIcon, {
+            icon: faPlus,
+            width: '14px',
+        })),
+        heading: 'Custom icon',
+    },
+    render,
+};
+
+export const NullIcon: Story = {
+    args: {
+        children: 'But the headingIcon is null',
+        size: 'medium',
+        headingIcon: null,
+        heading: 'This has a heading',
+    },
+    render,
+};

package/src/stories/informationaltooltip/InformationalTooltip.tsx

@@ -0,0 +1,124 @@
+import type { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { motion } from 'framer-motion';
+import styles from './InformationalTooltip.module.scss';
+import { TextWhenString } from '../utility';
+import { Icon, Info } from '../icon';
+
+export type InformationalTooltipProps = {
+    /**
+     * The size of the tooltip.
+     *
+     * @default 'large'
+     */
+    size?: 'medium' | 'large';
+    /** The element that toggles the tooltip. If none provided, it will default to an info icon */
+    trigger?: ReactNode;
+    /** The heading text in the tooltip. If null, the heading will be hidden. */
+    heading?: string | null;
+    /** The heading icon in the tooltip. If undefined, will show info icon. If pass in an element, it will display in the heading. If set to null, will hide icon. */
+    headingIcon?: ReactNode | null | undefined;
+    /** The contents of the tooltip. */
+    children?: ReactNode;
+    /**
+     * The side of the trigger that will render the tooltip, though is able to move to avoid collisions.
+     *
+     * @default 'bottom'
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Distance in pixels from the trigger
+     *
+     * @default '6'
+     */
+    sideOffset?: number;
+    /**
+     * The alignment against the trigger, if there are no collisions
+     *
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * The tooltip's open state.
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state of the tooltip changes.
+     *
+     * @param value {boolean} - The new open state of the tooltip.
+     */
+    onOpenChange?: (value: boolean) => void | Promise<void>;
+};
+
+/**
+ * An InformationalTooltip component, based on [`radix-ui/react-tooltip`](https://www.radix-ui.com/primitives/docs/components/tooltip).
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { InformationalTooltip } from 'paris/informationaltooltip';
+ * ```
+ * @constructor
+ */
+export const InformationalTooltip: FC<InformationalTooltipProps> = ({
+    size = 'large',
+    trigger,
+    heading,
+    headingIcon,
+    children,
+    side = 'bottom',
+    sideOffset = 6,
+    align = 'start',
+    open,
+    onOpenChange,
+}) => (
+    <RadixTooltip.Provider
+        delayDuration={150}
+    >
+        <RadixTooltip.Root
+            open={open}
+            onOpenChange={onOpenChange}
+        >
+            <RadixTooltip.Trigger>
+                {!trigger ? (
+                    <Icon icon={Info} size={14} className={styles.icon} />
+                ) : (
+                    <>
+                        {trigger}
+                    </>
+                )}
+            </RadixTooltip.Trigger>
+            <RadixTooltip.Portal>
+                <RadixTooltip.Content
+                    side={side}
+                    sideOffset={sideOffset}
+                    align={align}
+                >
+                    <motion.div
+                        initial={{ opacity: 0, y: 3 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className={clsx(styles.tooltip, styles[size])}
+                    >
+                        {heading && (
+                            <div className={styles.heading}>
+                                {headingIcon === null ? null : headingIcon || (
+                                    <Icon icon={Info} size={14} className={styles.icon} />
+                                )}
+                                <TextWhenString as="p" kind="paragraphXSmall" weight="medium">
+                                    {heading}
+                                </TextWhenString>
+                            </div>
+                        )}
+                        <TextWhenString as="p" kind="paragraphXSmall">
+                            {children}
+                        </TextWhenString>
+                    </motion.div>
+                </RadixTooltip.Content>
+            </RadixTooltip.Portal>
+        </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+);

package/src/stories/informationaltooltip/index.ts

@@ -0,0 +1 @@
+export * from './InformationalTooltip';

package/src/stories/select/Select.module.scss

@@ -71,14 +71,14 @@
 
     transition: var(--pte-animations-interaction);
 
-    &:hover, &[data-headlessui-state="active"] {
-        background-color: var(--pte-new-colors-overlayMedium);
-    }
-
     &[data-selected=true] {
         background-color: var(--pte-new-colors-overlaySubtle);
     }
 
+    &:hover, &[data-headlessui-state="active"] {
+        background-color: var(--pte-new-colors-overlayMedium);
+    }
+
     &[data-status="disabled"], &[data-headlessui-state~="disabled"] {
         pointer-events: none;
         cursor: default;
@@ -239,3 +239,71 @@
         padding: 4px 10px;
     }
 }
+
+.segmentedContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--pte-new-colors-surfaceTertiary);
+    border-radius: var(--pte-new-borders-radius-roundedMedium);
+    padding: 4px;
+    gap: 2px;
+}
+
+.segmentedOption {
+    padding: 3px 20px;
+    border-radius: var(--pte-new-borders-radius-roundedSmall);
+    width: 100%;
+    color: var(--pte-new-colors-contentTertiary);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    transition: var(--pte-animations-interaction);
+
+    &.tall {
+        padding: 6px 20px;
+    }
+
+    &[data-headlessui-state~="active"] {
+
+    }
+
+    &[data-status="disabled"], &[data-headlessui-state~="disabled"] {
+        pointer-events: none;
+        cursor: default;
+
+        &, & * {
+            color: var(--pte-new-colors-contentDisabled);
+        }
+
+        //.cardSurface {
+        //    background-color: var(--pte-new-colors-overlayWhiteSubtle);
+        //    border-color: var(--pte-new-colors-borderStrong);
+        //}
+    }
+
+    &:hover {
+        background-color: var(--pte-new-colors-surfaceSecondary);
+        color: var(--pte-new-colors-contentSecondary);
+    }
+
+    &[data-headlessui-state~="checked"] {
+        color: var(--pte-new-colors-contentPrimary);
+    }
+}
+
+.segmentedBackground {
+    position: absolute;
+    height: 100%;
+    left: 0;
+    right: 0;
+    background-color: var(--pte-new-colors-surfaceQuaternary);
+    border-radius: var(--pte-new-borders-radius-roundedSmall);
+}
+
+.segmentedText {
+    z-index: 1;
+}

package/src/stories/select/Select.stories.ts

@@ -111,3 +111,17 @@ export const Card: Story = {
     },
     render,
 };
+
+export const Segmented: Story = {
+    args: {
+        label: 'Donation',
+        description: 'Select the frequency of your donation.',
+        kind: 'segmented',
+        options: [
+            { id: '1', node: 'One Time' },
+            { id: '2', node: 'Monthly' },
+            { id: '3', node: 'Quarterly' },
+        ],
+    },
+    render,
+};

package/src/stories/select/Select.tsx

@@ -10,6 +10,7 @@ import { Listbox, RadioGroup, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { motion } from 'framer-motion';
 import inputStyles from '../input/Input.module.scss';
 import dropdownStyles from '../utility/Dropdown.module.scss';
 import styles from './Select.module.scss';
@@ -48,10 +49,10 @@ export type SelectProps<T = Record<string, any>> = {
      */
     onChange?: (value: Option<T>['id'] | null) => void | Promise<void>;
     /**
-     * The visual variant of the Select. `listbox` will render as a dropdown menu, `radio` will render as a radio group, and `card` will render as selectable cards.
+     * The visual variant of the Select. `listbox` will render as a dropdown menu, `radio` will render as a radio group, `card` will render as selectable cards, and `segmented` will render as a segmented control.
      * @default listbox
      */
-    kind?: 'listbox' | 'radio' | 'card';
+    kind?: 'listbox' | 'radio' | 'card' | 'segmented';
     /**
      * The size of the options dropdown, in pixels. Only applicable to kind="listbox".
      */
@@ -61,6 +62,11 @@ export type SelectProps<T = Record<string, any>> = {
      * @default false
      */
     hasOptionBorder?: boolean;
+    /**
+     * Controls the height of the segment control. Only applicable to kind="segmented".
+     * @default compact
+     */
+    segmentedHeight?: 'compact' | 'tall';
 
     /**
      * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
@@ -106,6 +112,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
     kind = 'listbox',
     maxHeight = 320,
     hasOptionBorder = false,
+    segmentedHeight = 'compact',
     overrides,
 }: SelectProps<T>, ref: ForwardedRef<any>) {
     const inputID = useId();
@@ -263,6 +270,37 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                     ))}
                 </RadioGroup>
             )}
+            {kind === 'segmented' && (
+                <RadioGroup ref={ref} as="div" className={styles.segmentedContainer} value={value || options[0].id} onChange={onChange}>
+                    {options.map((option) => (
+                        <RadioGroup.Option
+                            as="div"
+                            className={clsx(
+                                styles.segmentedOption,
+                                styles[segmentedHeight],
+                            )}
+                            key={option.id}
+                            value={option.id}
+                            disabled={option.disabled || false}
+                            data-status={disabled ? 'disabled' : (status || 'default')}
+                        >
+                            {(option.id === value || (!value && option.id === options[0].id)) && (
+                                <motion.div
+                                    className={styles.segmentedBackground}
+                                    layoutId={`${inputID}-segmented-selected`}
+                                    transition={{
+                                        ease: [0.42, 0.0, 0.58, 1.0],
+                                        duration: 0.25,
+                                    }}
+                                />
+                            )}
+                            <TextWhenString kind="paragraphXSmall" weight="medium" className={styles.segmentedText}>
+                                {option.node}
+                            </TextWhenString>
+                        </RadioGroup.Option>
+                    ))}
+                </RadioGroup>
+            )}
         </Field>
     );
 });

package/src/stories/theme/themes.ts

@@ -106,6 +106,7 @@ export type Theme = {
             contentNegative: CSSColor,
             contentWarning: CSSColor,
             contentPositive: CSSColor,
+            contentLink: CSSColor,
 
             // Content Inverse
             contentInversePrimary: CSSColor,
@@ -671,6 +672,7 @@ export const LightTheme: Theme = {
             contentNegative: T.new.colors.red400,
             contentWarning: T.new.colors.yellow500,
             contentPositive: T.new.colors.green400,
+            contentLink: T.new.colors.blue500,
 
             // Content Inverse
             contentInversePrimary: T.new.colors.white,
@@ -1318,6 +1320,7 @@ export const DarkTheme: Theme = merge(LightTheme, {
             contentSecondary: T.new.colors.grey800,
             contentTertiary: T.new.colors.grey1000,
             contentDisabled: T.new.colors.grey1300,
+            contentLink: T.new.colors.blue400,
 
             contentInversePrimary: T.new.colors.grey2400,
             contentInverseSecondary: T.new.colors.grey1600,

package/src/stories/theme/tokens.ts

@@ -125,6 +125,9 @@ export const ColorsNew = {
     teal700: '#004137',
     teal800: '#002620',
 
+    blue400: '#7a96fc',
+    blue500: '#3760f5',
+
     gradientTeal: 'linear-gradient(95.14deg, #26EDED 0%, #14EFAC 100%)',
     gradientOrange: 'linear-gradient(95.14deg, #FF814A 0%, #FFA800 100%)',
     gradientPink: 'linear-gradient(90deg, #FF4BED 0%, #F6418D 100%)',