braid-design-system 31.2.2 → 31.4.0

package/lib/components/MenuRenderer/MenuRenderer.gallery.tsx

@@ -7,6 +7,7 @@ import {
   MenuItemLink,
   Text,
   IconChevron,
+  Inline,
 } from '..';
 import source from '../../utils/source.macro';
 
@@ -15,68 +16,74 @@ export const galleryItems: ComponentExample[] = [
     label: 'Default',
     Example: () =>
       source(
-        <MenuRenderer
-          trigger={(triggerProps, { open }) => (
-            <Box userSelect="none" cursor="pointer" {...triggerProps}>
-              <Text>
-                Menu{' '}
-                <IconChevron
-                  direction={open ? 'up' : 'down'}
-                  alignY="lowercase"
-                />
-              </Text>
-            </Box>
-          )}
-        >
-          <MenuItem onClick={() => {}}>Button</MenuItem>
-          <MenuItemLink href="#">Link</MenuItemLink>
-        </MenuRenderer>,
+        <Inline space="none">
+          <MenuRenderer
+            trigger={(triggerProps, { open }) => (
+              <Box userSelect="none" cursor="pointer" {...triggerProps}>
+                <Text>
+                  Menu{' '}
+                  <IconChevron
+                    direction={open ? 'up' : 'down'}
+                    alignY="lowercase"
+                  />
+                </Text>
+              </Box>
+            )}
+          >
+            <MenuItem onClick={() => {}}>Button</MenuItem>
+            <MenuItemLink href="#">Link</MenuItemLink>
+          </MenuRenderer>
+        </Inline>,
       ),
   },
   {
     label: 'Right aligned',
     Example: () =>
       source(
-        <MenuRenderer
-          align="right"
-          trigger={(triggerProps, { open }) => (
-            <Box userSelect="none" cursor="pointer" {...triggerProps}>
-              <Text>
-                Menu{' '}
-                <IconChevron
-                  direction={open ? 'up' : 'down'}
-                  alignY="lowercase"
-                />
-              </Text>
-            </Box>
-          )}
-        >
-          <MenuItem onClick={() => {}}>Button</MenuItem>
-          <MenuItemLink href="#">Link</MenuItemLink>
-        </MenuRenderer>,
+        <Inline space="none">
+          <MenuRenderer
+            align="right"
+            trigger={(triggerProps, { open }) => (
+              <Box userSelect="none" cursor="pointer" {...triggerProps}>
+                <Text>
+                  Right aligned menu{' '}
+                  <IconChevron
+                    direction={open ? 'up' : 'down'}
+                    alignY="lowercase"
+                  />
+                </Text>
+              </Box>
+            )}
+          >
+            <MenuItem onClick={() => {}}>Button</MenuItem>
+            <MenuItemLink href="#">Link</MenuItemLink>
+          </MenuRenderer>
+        </Inline>,
       ),
   },
   {
     label: 'Offset space for menu',
     Example: () =>
       source(
-        <MenuRenderer
-          offsetSpace={{ mobile: 'none', tablet: 'small' }}
-          trigger={(triggerProps, { open }) => (
-            <Box userSelect="none" cursor="pointer" {...triggerProps}>
-              <Text>
-                Menu{' '}
-                <IconChevron
-                  direction={open ? 'up' : 'down'}
-                  alignY="lowercase"
-                />
-              </Text>
-            </Box>
-          )}
-        >
-          <MenuItem onClick={() => {}}>Button</MenuItem>
-          <MenuItemLink href="#">Link</MenuItemLink>
-        </MenuRenderer>,
+        <Inline space="none">
+          <MenuRenderer
+            offsetSpace={{ mobile: 'none', tablet: 'small' }}
+            trigger={(triggerProps, { open }) => (
+              <Box userSelect="none" cursor="pointer" {...triggerProps}>
+                <Text>
+                  Menu{' '}
+                  <IconChevron
+                    direction={open ? 'up' : 'down'}
+                    alignY="lowercase"
+                  />
+                </Text>
+              </Box>
+            )}
+          >
+            <MenuItem onClick={() => {}}>Button</MenuItem>
+            <MenuItemLink href="#">Link</MenuItemLink>
+          </MenuRenderer>
+        </Inline>,
       ),
   },
 ];

package/lib/components/MenuRenderer/MenuRenderer.screenshots.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ComponentScreenshot } from '../../../site/src/types';
+import { Box, MenuRenderer, MenuItem, MenuItemLink } from '../';
+import { Placeholder } from '../private/Placeholder/Placeholder';
+
+export const screenshots: ComponentScreenshot = {
+  screenshotWidths: [320],
+  examples: [
+    {
+      label: 'Default',
+      Example: () => (
+        <Box style={{ maxWidth: '150px' }}>
+          <MenuRenderer
+            offsetSpace="small"
+            trigger={(triggerProps) => (
+              <Box userSelect="none" cursor="pointer" {...triggerProps}>
+                <Placeholder height={44} label="Menu trigger" />
+              </Box>
+            )}
+          >
+            <MenuItem onClick={() => {}}>Button</MenuItem>
+            <MenuItemLink href="#">Link</MenuItemLink>
+          </MenuRenderer>
+        </Box>
+      ),
+    },
+    {
+      label: 'Right aligned',
+      Example: () => (
+        <Box style={{ maxWidth: '150px' }}>
+          <MenuRenderer
+            align="right"
+            offsetSpace="small"
+            trigger={(triggerProps) => (
+              <Box userSelect="none" cursor="pointer" {...triggerProps}>
+                <Placeholder height={44} label="Menu trigger" />
+              </Box>
+            )}
+          >
+            <MenuItem onClick={() => {}}>Button</MenuItem>
+            <MenuItemLink href="#">Link</MenuItemLink>
+          </MenuRenderer>
+        </Box>
+      ),
+    },
+    {
+      label: 'Trigger grows to parent layout',
+      Example: () => (
+        <MenuRenderer
+          align="right"
+          offsetSpace="small"
+          trigger={(triggerProps) => (
+            <Box userSelect="none" cursor="pointer" {...triggerProps}>
+              <Placeholder height={44} label="Menu trigger" />
+            </Box>
+          )}
+        >
+          <MenuItem onClick={() => {}}>Button</MenuItem>
+          <MenuItemLink href="#">Link</MenuItemLink>
+        </MenuRenderer>
+      ),
+    },
+  ],
+};

package/lib/components/MenuRenderer/MenuRenderer.tsx

@@ -205,7 +205,7 @@ export const MenuRenderer = ({
     // first menu item is not highlighted automatically, but considering
     // space keyboard interactions are optional this is acceptable.
     //   See Firefox bug details: https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
-    //   See WAI-ARIA keyboard iteractions: https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-12
+    //   See WAI-ARIA keyboard iteractions: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
     //
     // Firefox useragent check taken from the `bowser` package:
     // https://github.com/lancedikson/bowser/blob/ea8d9c54271d7b52fecd507ae8b1ba495842bc68/src/parser-browsers.js#L520
@@ -265,11 +265,8 @@ export const MenuRenderer = ({
 
   return (
     <MenuRendererContext.Provider value={true}>
-      <Box
-        className={styles.root}
-        {...(data ? buildDataAttributes(data) : undefined)}
-      >
-        <Box display="inlineBlock" position="relative">
+      <Box {...(data ? buildDataAttributes(data) : undefined)}>
+        <Box position="relative">
           {trigger(triggerProps, { open })}
 
           <Box

package/lib/components/MonthPicker/MonthPicker.docs.tsx

@@ -70,8 +70,8 @@ const docs: ComponentDocs = {
       description: (
         <>
           <Text>
-            Years can be restriced to a range using the <Strong>minYear</Strong>{' '}
-            and <Strong>maxYear</Strong> props.
+            Years can be restricted to a range using the{' '}
+            <Strong>minYear</Strong> and <Strong>maxYear</Strong> props.
           </Text>
           <Text>
             By default, the years are presented in descending order, this can be

package/lib/components/OverflowMenu/OverflowMenu.docs.tsx

@@ -20,7 +20,7 @@ const docs: ComponentDocs = {
   category: 'Content',
   Example: () =>
     source(
-      <Box style={{ paddingLeft: '100px', maxWidth: '200px' }}>
+      <Box style={{ maxWidth: '100px' }}>
         <OverflowMenu label="Options">
           <MenuItem onClick={() => {}}>Button</MenuItem>
           <MenuItemLink href="#" onClick={() => {}}>
@@ -32,7 +32,7 @@ const docs: ComponentDocs = {
   accessibility: (
     <Text>
       Follows the{' '}
-      <TextLink href="https://www.w3.org/TR/wai-aria-practices-1.1/#menu">
+      <TextLink href="https://www.w3.org/TR/wai-aria-practices-1.2/#menu">
         WAI-ARIA Menu Pattern.
       </TextLink>
     </Text>
@@ -54,7 +54,7 @@ const docs: ComponentDocs = {
       Example: ({ id, getState, toggleState, showToast }) =>
         source(
           <>
-            <Box paddingLeft="xxlarge">
+            <Box style={{ maxWidth: '100px' }}>
               <OverflowMenu label="Options">
                 <MenuItem
                   onClick={() => toggleState('confirm')}

package/lib/components/OverflowMenu/OverflowMenu.gallery.tsx

@@ -8,7 +8,7 @@ export const galleryItems: ComponentExample[] = [
     background: 'surface',
     Example: ({ handler }) =>
       source(
-        <Box style={{ paddingLeft: '100px', maxWidth: '200px' }}>
+        <Box style={{ maxWidth: '100px' }}>
           <OverflowMenu label="Options">
             <MenuItem onClick={handler}>Button</MenuItem>
             <MenuItemLink href="#" onClick={handler}>

package/lib/components/OverflowMenu/OverflowMenu.screenshots.tsx

@@ -9,7 +9,7 @@ export const screenshots: ComponentScreenshot = {
       label: 'Default',
       background: 'surface',
       Example: ({ handler }) => (
-        <Box style={{ paddingLeft: '100px', maxWidth: '200px' }}>
+        <Box style={{ maxWidth: '100px' }}>
           <OverflowMenu label="Options">
             <MenuItem onClick={handler}>Button</MenuItem>
             <MenuItemLink href="#" onClick={handler}>

package/lib/components/OverflowMenu/OverflowMenu.tsx

@@ -16,7 +16,11 @@ export const OverflowMenu = ({
 }: OverflowMenuProps) => (
   <MenuRenderer
     trigger={(triggerProps, { open }) => (
-      <Box className={styles.triggerOffset}>
+      <Box
+        display="flex"
+        justifyContent="flexEnd"
+        className={styles.triggerOffset}
+      >
         <OverflowButton label={label} active={open} {...triggerProps} />
       </Box>
     )}

package/lib/components/Tabs/Tab.tsx

@@ -30,7 +30,7 @@ import buildDataAttributes, {
 } from '../private/buildDataAttributes';
 import { TabListContext } from './TabListContext';
 import { Overlay } from '../private/Overlay/Overlay';
-import { BadgeProps, Badge } from '../Badge/Badge';
+import { BadgeProps } from '../Badge/Badge';
 import { Divider } from '../Divider/Divider';
 import { useResponsiveValue } from '../useResponsiveValue/useResponsiveValue';
 import { smoothScroll, smoothScrollIntoView } from '../private/smoothScroll';
@@ -55,7 +55,8 @@ export const Tab = ({ children, data, badge, item }: TabProps) => {
   );
 
   assert(
-    !badge || badge.type === Badge,
+    // @ts-expect-error
+    !badge || badge.type.__isBadge__,
     `Tab badge prop can only be an instance of Badge. e.g. <Tab badge={<Badge>New</Badge>}>`,
   );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "31.2.2",
+  "version": "31.4.0",
   "description": "Themeable design system for the SEEK Group",
   "main": "lib/components/index.ts",
   "sideEffects": [
@@ -11,28 +11,6 @@
     "reset/**/*",
     "*.css.ts"
   ],
-  "scripts": {
-    "test": "SKU_TELEMETRY=false sku test",
-    "start": "SKU_TELEMETRY=false concurrently -n \"docs-site,playroom\" -c \"magenta,greenBright\" \"sku start\" \"playroom start\"",
-    "lint": "SKU_TELEMETRY=false sku lint",
-    "format": "SKU_TELEMETRY=false sku format",
-    "generate-component-docs": "ts-node generate-component-docs",
-    "generate-icons": "node scripts/generateIcons.js",
-    "setup": "SKU_TELEMETRY=false sku configure && concurrently -n \"component-docs,icons\" -c \"blueBright,yellowBright\" \"yarn generate-component-docs\" \"yarn generate-icons\"",
-    "prelint": "yarn setup",
-    "prestart": "yarn setup",
-    "prebuild": "yarn setup",
-    "build-codemod": "node ./codemod/scripts/build",
-    "build": "NODE_ENV=production SKU_TELEMETRY=false concurrently -n \"docs-site,playroom\" -c \"magenta,greenBright\" \"sku build\" \"playroom build\"",
-    "storybook": "SKU_TELEMETRY=false sku storybook",
-    "build-storybook": "SKU_TELEMETRY=false sku build-storybook",
-    "deploy": "node scripts/deploy.js",
-    "deploy-preview": "surge -p ./site/dist",
-    "post-commit-status": "node scripts/postCommitStatus.js",
-    "release": "yarn setup && yarn build-codemod && changeset publish && yarn build && yarn deploy",
-    "version": "changeset version && ts-node scripts/versionComponentUpdates",
-    "prepare": "patch-package"
-  },
   "bin": {
     "braid-upgrade": "./codemod/dist/index.js"
   },
@@ -89,6 +67,7 @@
     "@babel/plugin-syntax-jsx": "^7.14.5",
     "@babel/plugin-syntax-typescript": "^7.14.5",
     "@babel/preset-typescript": "^7.12.7",
+    "@babel/runtime": "^7.16.3",
     "@changesets/cli": "^2.14.0",
     "@changesets/get-github-info": "^0.4.5",
     "@octokit/rest": "^18.0.15",
@@ -131,6 +110,7 @@
     "husky": "^4.3.8",
     "ink": "^3.0.9",
     "js-yaml": "^4.0.0",
+    "mini-css-extract-plugin": "^2.4.5",
     "npm-registry-client": "^8.6.0",
     "panzoom": "^9.4.2",
     "patch-package": "^6.4.7",
@@ -150,7 +130,7 @@
     "recoil": "^0.3.1",
     "renovate-config-seek": "0.4.0",
     "sanitize-html": "^2.3.2",
-    "sku": "^11.0.1",
+    "sku": "^11.2.5",
     "surge": "^0.21.7",
     "svgo": "^2.4.0",
     "title-case": "^3.0.3",
@@ -159,7 +139,23 @@
     "workerpool": "^6.1.5"
   },
   "volta": {
-    "node": "16.13.0",
-    "yarn": "1.21.1"
+    "node": "16.13.0"
+  },
+  "scripts": {
+    "test": "SKU_TELEMETRY=false sku test",
+    "start": "pnpm run setup && SKU_TELEMETRY=false concurrently -n \"docs-site,playroom\" -c \"magenta,greenBright\" \"sku start\" \"playroom start\"",
+    "lint": "pnpm run setup && SKU_TELEMETRY=false sku lint",
+    "format": "SKU_TELEMETRY=false sku format",
+    "generate-component-docs": "ts-node generate-component-docs",
+    "generate-icons": "node scripts/generateIcons.js",
+    "setup": "SKU_TELEMETRY=false sku configure && concurrently -n \"component-docs,icons\" -c \"blueBright,yellowBright\" \"pnpm generate-component-docs\" \"pnpm generate-icons\"",
+    "build-codemod": "node ./codemod/scripts/build",
+    "build": "pnpm run setup && NODE_ENV=production SKU_TELEMETRY=false concurrently -n \"docs-site,playroom\" -c \"magenta,greenBright\" \"sku build\" \"playroom build\"",
+    "storybook": "SKU_TELEMETRY=false sku storybook",
+    "build-storybook": "SKU_TELEMETRY=false sku build-storybook",
+    "deploy": "node scripts/deploy.js",
+    "post-commit-status": "node scripts/postCommitStatus.js",
+    "release": "pnpm run setup && pnpm build-codemod && changeset publish && pnpm build && pnpm deploy",
+    "version": "changeset version && ts-node scripts/versionComponentUpdates"
   }
-}
+}

package/tsconfig.json

@@ -25,9 +25,7 @@
     "/home/runner/work/braid-design-system/braid-design-system/scripts",
     "/home/runner/work/braid-design-system/braid-design-system/generate-component-docs",
     "/home/runner/work/braid-design-system/braid-design-system/reset",
-    "/home/runner/work/braid-design-system/braid-design-system/test"
-  ],
-  "exclude": [
-    "/home/runner/work/braid-design-system/braid-design-system/node_modules"
+    "/home/runner/work/braid-design-system/braid-design-system/test",
+    "/home/runner/work/braid-design-system/braid-design-system/node_modules/.pnpm/sku@11.2.5_291d4f9cd3027be4911977aa20588d0b/node_modules/sku/lib/placeholder.ts"
   ]
 }