paris 0.8.16 → 0.8.18

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # paris
 
+## 0.8.18
+
+### Patch Changes
+
+- 3a29baf: Menu: update category
+- e9d24cf: Icon: fix typings for `as` prop
+- e9d24cf: StyledLink: fix typings for `as` prop
+- 9b29f1d: Table: update docs to mention `cells` instead of `nodes` for `rowRenderFn`
+
+## 0.8.17
+
+### Patch Changes
+
+- c1fd99a: feat(Tag): Add new Tag styling
+- c1fd99a: feat: Update menu component to support new feature styling
+- c1fd99a: chore: Update README typo
+- c1fd99a: feat(Button): Add notification dot support
+
 ## 0.8.16
 
 ### Patch Changes

package/README.md

@@ -4,7 +4,7 @@ Paris is Slingshot's React design system, meant to work universally across serve
 
 Currently, Paris is provided as a set of *unbundled* `.tsx` components styled with SCSS modules. This means that you can import only the components you need, and you can use your own bundler to optimize your bundle size. As a result, Paris works best with frameworks like Next.js that have built-in support for TypeScript and SCSS modules.
 
-Paris 1.x styling is heavily inspired by Uber's [Base Web](https://baseweb.design), which we previously used in our production apps. We built Paris because to move away from Styletron and CSS-in-JS, since we're now largely working with React 18, RSC, and the Next.js `app` directory.
+Paris 1.x styling is heavily inspired by Uber's [Base Web](https://baseweb.design), which we previously used in our production apps. We built Paris to move away from Styletron and CSS-in-JS, since we're now largely working with React 18, RSC, and the Next.js `app` directory.
 
 <br />
 

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.8.16",
+  "version": "0.8.18",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/button/Button.tsx

@@ -13,6 +13,7 @@ import type { Enhancer } from '../../types/Enhancer';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import { pvar } from '../theme';
 import { Spinner } from '../icon';
+import { NotificationDot } from '../icon/NotificationDot';
 
 const EnhancerSizes = {
     large: 13,
@@ -104,6 +105,8 @@ export type ButtonProps = {
      * This should be text. When Button shape is `circle` or `square`, the action description should still be passed here for screen readers.
      */
     children?: ReactNode | ReactNode[];
+
+    displayNotificationDot?: boolean;
 } & Omit<AriaButtonProps, 'children' | 'disabled' | 'onClick'>;
 
 /**
@@ -133,6 +136,7 @@ export const Button: FC<ButtonProps> = ({
     disabled,
     loading,
     href,
+    displayNotificationDot = false,
     ...props
 }) => (
     <AriaButton
@@ -145,6 +149,7 @@ export const Button: FC<ButtonProps> = ({
             '--pte-colors-backgroundTertiary': theme ? ButtonThemes[theme].secondary : colors?.secondary,
         } as CSSProperties : {}}
         className={clsx(
+            'relative',
             styles.button,
             styles[kind],
             styles[shape],
@@ -189,5 +194,10 @@ export const Button: FC<ButtonProps> = ({
                 size={EnhancerSizes[size]}
             />
         )}
+        {!!displayNotificationDot && (
+            <div className="absolute top-0 right-0">
+                <NotificationDot size={8} />
+            </div>
+        )}
     </AriaButton>
 );

package/src/stories/icon/Icon.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, NamedExoticComponent } from 'react';
+import type { ComponentPropsWithoutRef, ElementType, NamedExoticComponent } from 'react';
 import { createElement, memo } from 'react';
 
 export type IconDefinitionProps = {
@@ -9,7 +9,7 @@ export type IconDefinitionProps = {
 };
 export type IconDefinition = NamedExoticComponent<IconDefinitionProps>;
 
-export type IconProps<T extends keyof JSX.IntrinsicElements = 'span'> = IconDefinitionProps & {
+export type IconProps<T extends ElementType = 'span'> = IconDefinitionProps & {
     icon: IconDefinition;
     as?: T;
     overrides?: {
@@ -31,7 +31,7 @@ export type IconProps<T extends keyof JSX.IntrinsicElements = 'span'> = IconDefi
 * ```
 * @constructor
 */
-export const Icon = memo<IconProps>(({
+export const Icon = memo<IconProps<ElementType>>(({
     as = 'span',
     icon,
     size,

package/src/stories/icon/NotificationDot.tsx

@@ -0,0 +1,8 @@
+import { memo } from 'react';
+import type { IconDefinition } from './Icon';
+
+export const NotificationDot: IconDefinition = memo(({ size }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 8 8" fill="none">
+        <circle cx="4" cy="4" r="3.5" fill="#1DEECD" stroke="#8EF7E6" />
+    </svg>
+));

package/src/stories/menu/Menu.module.scss

@@ -49,4 +49,25 @@
     &:hover {
         background-color: var(--pte-colors-backgroundSecondary);
     }
+    
+    @keyframes gradientFlow {
+        0% {
+            background-position: 0%;
+        }
+        100% {
+            background-position: 125%;
+        }
+    }
+}
+
+.newItem {
+    background: radial-gradient(circle, rgba(20,239,172,0.2) 0%, rgba(38,237,237,0.05) 75%);
+    background-size: 150% 100%;
+    animation: gradientFlow 2.5s ease-in-out infinite alternate;
+    background-position: 0%;
+
+    &:hover {
+        background-color: unset;
+        animation-play-state: paused;
+    }
 }

package/src/stories/menu/Menu.stories.tsx

@@ -6,7 +6,7 @@ import { Button } from '../button';
 import { ChevronRight, Ellipsis } from '../icon';
 
 const meta: Meta<typeof Menu> = {
-    title: 'Uncategorized/Menu',
+    title: 'Surfaces/Menu',
     component: Menu,
     tags: ['autodocs'],
 };

package/src/stories/menu/Menu.tsx

@@ -31,9 +31,11 @@ export const Menu: FC<MenuProps<React.ElementType>> & {
     Items: FC<MenuItemsProps<React.ElementType> & {
         position?: 'left' | 'right';
     }>;
-    Item: FC<MenuItemProps<React.ElementType>>;
+    Item: FC<MenuItemProps<React.ElementType> & {
+        isNew?: boolean;
+    }>;
 } = ({ className, children, ...props }) => (
-    <HeadlessMenu as="div" className={clsx(className, styles.menu)} {...props}>
+    <HeadlessMenu as="div" className={clsx(styles.menu, className)} {...props}>
         {children}
     </HeadlessMenu>
 );
@@ -44,7 +46,7 @@ export const Menu: FC<MenuProps<React.ElementType>> & {
  * Should be used inside a `Menu` component to serve as the toggle for `MenuItems`.
  */
 Menu.Button = ({ className, children, ...props }) => (
-    <HeadlessMenu.Button className={clsx(className, styles.menuButton)} {...props}>
+    <HeadlessMenu.Button className={clsx(styles.menuButton, className)} {...props}>
         {children}
     </HeadlessMenu.Button>
 );
@@ -59,7 +61,7 @@ Menu.Button = ({ className, children, ...props }) => (
 Menu.Items = ({
     className, children, position = 'left', ...props
 }) => (
-    <HeadlessMenu.Items className={clsx(className, styles.menuItems, position === 'left' && styles.leftPosition, position === 'right' && styles.rightPosition)} {...props}>
+    <HeadlessMenu.Items className={clsx(styles.menuItems, position === 'left' && styles.leftPosition, position === 'right' && styles.rightPosition, className)} {...props}>
         {children}
     </HeadlessMenu.Items>
 );
@@ -69,9 +71,12 @@ Menu.Items = ({
  *
  * Should be used inside `MenuItems` to represent selectable options in the menu.
  *
+ * @param isNew - Whether the menu items should be styled as new items.
  */
-Menu.Item = ({ className, children, ...props }) => (
-    <HeadlessMenu.Item className={clsx(className, styles.menuItem)} {...props}>
+Menu.Item = ({
+    className, children, isNew = false, ...props
+}) => (
+    <HeadlessMenu.Item className={clsx(styles.menuItem, isNew && styles.newItem, className)} {...props}>
         {children}
     </HeadlessMenu.Item>
 );

package/src/stories/styledlink/StyledLink.stories.ts

@@ -12,12 +12,17 @@ type Story = StoryObj<typeof StyledLink>;
 
 export const Default: Story = {
     args: {
-        children: 'Hello world! This is a new StyledLink component.',
+        href: 'https://slingshot.fm',
+        target: '_blank',
+        children: 'Hello world! This is a styled link.',
     },
 };
 
-export const Secondary: Story = {
+export const AsButton: Story = {
     args: {
-        children: 'Hello world! This is a secondary component.',
+        as: 'button',
+        // eslint-disable-next-line no-alert
+        onClick: () => alert('Hello world!'),
+        children: 'Hello world! This is a StyledLink rendered as a button.',
     },
 };

package/src/stories/styledlink/StyledLink.tsx

@@ -24,7 +24,7 @@ export type StyledLinkProps<T extends ElementType = 'a'> = {
  * ```
  * @constructor
  */
-export const StyledLink: FC<StyledLinkProps> = ({
+export const StyledLink: FC<StyledLinkProps<ElementType>> = ({
     as = 'a',
     children,
     className,

package/src/stories/table/Table.tsx

@@ -42,7 +42,7 @@ export type TableProps<
      *
      * The function should return an object containing a property named `key` for the row's React key (should be a unique id), and a property named `nodes` containing an array of React nodes to be rendered as cells in the row.
      * @param row - The data for the row being rendered.
-     * @returns An object containing a property named `key` for the row's React key (should be a unique id), and a property named `nodes` containing an array of React nodes to be rendered as cells in the row.
+     * @returns An object containing a property named `key` for the row's React key (should be a unique id), and a property named `cells` containing an array of React nodes to be rendered as cells in the row.
      * @see RowRenderData
      */
     rowRenderFn?: (row: RowData[number]) => RowRenderData;

package/src/stories/tag/Tag.module.scss

@@ -16,6 +16,10 @@
     }
 }
 
+.new {
+    padding: 4px 10px;
+}
+
 .default {
     background-color: var(--pte-colors-backgroundTertiary);
     color: var(--pte-colors-contentTertiary);