paris 0.8.17 → 0.8.18

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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

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

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/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/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;