braid-design-system 31.0.0 → 31.1.0

package/.nvmrc

@@ -1 +1 @@
-12.14.1
+16.13.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # braid-design-system
 
+## 31.1.0
+
+### Minor Changes
+
+- **IconTip:** Add tip icon ([#1040](https://github.com/seek-oss/braid-design-system/pull/1040))
+
+- **IconZoomIn, IconZoomOut:** Add zoom in/out icons ([#1035](https://github.com/seek-oss/braid-design-system/pull/1035))
+
 ## 31.0.0
 
 ### Major Changes

package/lib/components/Box/Box.playroom.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react';
+import { atoms, Atoms } from '../../css/atoms/atoms';
+import { sprinkles } from '../../css/atoms/sprinkles.css';
+import { Box as BraidBox, BoxProps } from './Box';
+
+export const Box = forwardRef<HTMLElement, BoxProps>((props, ref) => {
+  const sprinklesProps: Record<string, unknown> = {};
+  const otherProps: Record<string, unknown> = {};
+
+  for (const key in props) {
+    if (sprinkles.properties.has(key as keyof Omit<Atoms, 'reset'>)) {
+      const value = props[key as keyof typeof props];
+      try {
+        // Try passing to atoms, if sprinkle property but value is not
+        // valid, property will be left out until value is valid.
+        atoms({ [key]: value });
+        sprinklesProps[key] = value;
+      } catch (e) {
+        if (key === 'background' && /^customDark|customLight$/.test(value)) {
+          sprinklesProps[key] = value;
+        }
+      }
+    } else {
+      otherProps[key] = props[key as keyof typeof props];
+    }
+  }
+
+  return <BraidBox ref={ref} {...sprinklesProps} {...otherProps} />;
+});
+
+Box.displayName = 'Box';

package/lib/components/FieldLabel/FieldLabel.docs.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import source from '../../utils/source.macro';
 import { ComponentDocs } from '../../../site/src/types';
 import {
@@ -13,7 +14,6 @@ import {
   Notice,
 } from '../';
 import { Placeholder } from '../../playroom/components';
-import { ReactNode } from 'markdown-to-jsx/node_modules/@types/react';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <Box maxWidth="xsmall">{children}</Box>

package/lib/components/Toggle/Toggle.css.ts

@@ -21,12 +21,12 @@ export const root = style({
   },
 });
 
-export const realField = style({
-  height: hitArea,
-  selectors: {
-    ...debugTouchable(),
+export const realField = style([
+  {
+    height: hitArea,
   },
-});
+  debugTouchable(),
+]);
 
 export const realFieldPosition = styleVariants(sizes, (size) => ({
   top: calc(hitArea)

package/lib/components/icons/IconTip/IconTip.docs.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentDocs } from '../../../../site/src/types';
+import source from '../../../utils/source.macro';
+import { IconTip, Heading, Stack } from '../../';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  migrationGuide: true,
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconTip />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+};
+
+export default docs;

package/lib/components/icons/IconTip/IconTip.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '../../Box/Box';
+import useIcon, { UseIconProps } from '../../../hooks/useIcon';
+import { IconTipSvg } from './IconTipSvg';
+
+export type IconTipProps = UseIconProps;
+
+export const IconTip = (props: IconTipProps) => {
+  const iconProps = useIcon(props);
+
+  return <Box component={IconTipSvg} {...iconProps} />;
+};

package/lib/components/icons/IconTip/IconTipSvg.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import type { SVGProps } from '../SVGTypes';
+
+export const IconTipSvg = ({ title, titleId, ...props }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    focusable="false"
+    fill="currentColor"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M9 18.957a1 1 0 0 1-1-1V16a8.96 8.96 0 0 0-1.485-2.633l-.277-.391a7 7 0 1 1 11.524 0l-.277.391A8.96 8.96 0 0 0 16 16v1.932a1 1 0 0 1-2 0V16c0-1.095.878-2.419 1.856-3.793l.261-.368a5 5 0 1 0-8.234 0l.26.368C9.124 13.581 10 14.905 10 16v1.957a1 1 0 0 1-1 1z" />
+    <path d="M13.286 22h-2.572A2.761 2.761 0 0 1 8 19.2V17a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2.2a2.761 2.761 0 0 1-2.714 2.8zM10 18v1.2a.761.761 0 0 0 .714.8h2.572a.761.761 0 0 0 .714-.8V18zm13-8h-2a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm-1.475 5.5a.994.994 0 0 1-.499-.134l-1.732-1a1 1 0 1 1 1-1.732l1.732 1a1 1 0 0 1-.5 1.866zm-1.73-10a1 1 0 0 1-.501-1.866l1.732-1a1 1 0 1 1 1 1.732l-1.732 1a.994.994 0 0 1-.5.134zM3 10H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm-.525 5.5a1 1 0 0 1-.501-1.866l1.732-1a1 1 0 1 1 1 1.732l-1.732 1a.994.994 0 0 1-.5.134zm1.73-10a.994.994 0 0 1-.499-.134l-1.732-1a1 1 0 0 1 1-1.732l1.732 1a1 1 0 0 1-.5 1.866zM15 10a1 1 0 0 1-1-1 2.003 2.003 0 0 0-2-2 1 1 0 0 1 0-2 4.004 4.004 0 0 1 4 4 1 1 0 0 1-1 1z" />
+    <path d="M14 21a2 2 0 0 1-4 0" />
+  </svg>
+);

package/lib/components/icons/IconZoomIn/IconZoomIn.docs.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentDocs } from '../../../../site/src/types';
+import source from '../../../utils/source.macro';
+import { IconZoomIn, Heading, Stack } from '../../';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  migrationGuide: true,
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconZoomIn />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+};
+
+export default docs;

package/lib/components/icons/IconZoomIn/IconZoomIn.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '../../Box/Box';
+import useIcon, { UseIconProps } from '../../../hooks/useIcon';
+import { IconZoomInSvg } from './IconZoomInSvg';
+
+export type IconZoomInProps = UseIconProps;
+
+export const IconZoomIn = (props: IconZoomInProps) => {
+  const iconProps = useIcon(props);
+
+  return <Box component={IconZoomInSvg} {...iconProps} />;
+};

package/lib/components/icons/IconZoomIn/IconZoomInSvg.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import type { SVGProps } from '../SVGTypes';
+
+export const IconZoomInSvg = ({ title, titleId, ...props }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    focusable="false"
+    fill="currentColor"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="m21.707 20.293-3.682-3.682a9.022 9.022 0 1 0-1.414 1.414l3.682 3.682a1 1 0 0 0 1.414-1.414zM4 11a7 7 0 1 1 11.962 4.93c-.006.006-.013.008-.019.013s-.007.013-.012.02A6.995 6.995 0 0 1 4 11z" />
+    <path d="M14 10h-2V8a1 1 0 0 0-2 0v2H8a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2z" />
+  </svg>
+);

package/lib/components/icons/IconZoomOut/IconZoomOut.docs.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentDocs } from '../../../../site/src/types';
+import source from '../../../utils/source.macro';
+import { IconZoomOut, Heading, Stack } from '../../';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  migrationGuide: true,
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconZoomOut />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+};
+
+export default docs;

package/lib/components/icons/IconZoomOut/IconZoomOut.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '../../Box/Box';
+import useIcon, { UseIconProps } from '../../../hooks/useIcon';
+import { IconZoomOutSvg } from './IconZoomOutSvg';
+
+export type IconZoomOutProps = UseIconProps;
+
+export const IconZoomOut = (props: IconZoomOutProps) => {
+  const iconProps = useIcon(props);
+
+  return <Box component={IconZoomOutSvg} {...iconProps} />;
+};

package/lib/components/icons/IconZoomOut/IconZoomOutSvg.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import type { SVGProps } from '../SVGTypes';
+
+export const IconZoomOutSvg = ({ title, titleId, ...props }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    focusable="false"
+    fill="currentColor"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="m21.707 20.293-3.682-3.682a9.022 9.022 0 1 0-1.414 1.414l3.682 3.682a1 1 0 0 0 1.414-1.414zM4 11a7 7 0 1 1 11.962 4.93c-.006.006-.013.008-.019.013s-.007.013-.012.02A6.995 6.995 0 0 1 4 11z" />
+    <path d="M14 10H8a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2z" />
+  </svg>
+);

package/lib/components/icons/index.ts

@@ -69,7 +69,10 @@ export { IconTag } from './IconTag/IconTag';
 export { IconThumb } from './IconThumb/IconThumb';
 export { IconTick } from './IconTick/IconTick';
 export { IconTime } from './IconTime/IconTime';
+export { IconTip } from './IconTip/IconTip';
 export { IconUpload } from './IconUpload/IconUpload';
 export { IconVideo } from './IconVideo/IconVideo';
 export { IconVisibility } from './IconVisibility/IconVisibility';
 export { IconWorkExperience } from './IconWorkExperience/IconWorkExperience';
+export { IconZoomIn } from './IconZoomIn/IconZoomIn';
+export { IconZoomOut } from './IconZoomOut/IconZoomOut';

package/lib/components/private/InlineField/InlineField.css.ts

@@ -19,13 +19,13 @@ export const root = style({
   },
 });
 
-export const realField = style({
-  width: hitArea,
-  height: hitArea,
-  selectors: {
-    ...debugTouchable(),
+export const realField = style([
+  {
+    width: hitArea,
+    height: hitArea,
   },
-});
+  debugTouchable(),
+]);
 
 export const realFieldPosition = styleVariants(sizes, (size: Size) => {
   const offset = calc(hitArea)

package/lib/components/private/touchable/debugTouchable.ts

@@ -1,13 +1,13 @@
-import { Style } from 'sku/treat';
+import type { StyleRule } from '@vanilla-extract/css';
 
-type SelectorMap = Style['selectors'];
-
-export const debugTouchable = ({ after = false } = {}): SelectorMap =>
+export const debugTouchable = ({ after = false } = {}): StyleRule =>
   process.env.NODE_ENV === 'production'
     ? {}
     : {
-        [`[data-braid-debug] &${after ? ':after' : ''}`]: {
-          background: 'red',
-          opacity: 0.2,
+        selectors: {
+          [`[data-braid-debug] &${after ? ':after' : ''}`]: {
+            background: 'red',
+            opacity: 0.2,
+          },
         },
       };

package/lib/components/private/touchable/virtualTouchable.css.ts

@@ -3,19 +3,19 @@ import { style } from '@vanilla-extract/css';
 import { debugTouchable } from './debugTouchable';
 import { virtualTouchableRules } from './virtualTouchableRules';
 
-export const virtualTouchable = style({
-  position: 'relative',
-  ':after': {
-    content: '""',
-    position: 'absolute',
-    left: -10,
-    right: -10,
-    ...virtualTouchableRules,
-  },
-  selectors: {
-    ...debugTouchable({ after: true }),
+export const virtualTouchable = style([
+  {
+    position: 'relative',
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      left: -10,
+      right: -10,
+      ...virtualTouchableRules,
+    },
   },
-});
+  debugTouchable({ after: true }),
+]);
 
 export const yAxisOnly = style({
   ':after': {

package/lib/playroom/components.ts

@@ -6,6 +6,7 @@ export { AccordionItem } from '../components/Accordion/AccordionItem.playroom';
 export { Alert } from '../components/Alert/Alert.playroom';
 export { Autosuggest } from '../components/Autosuggest/Autosuggest.playroom';
 export { Badge } from '../components/Badge/Badge.playroom';
+export { Box } from '../components/Box/Box.playroom';
 export { Button } from '../components/Button/Button.playroom';
 export { ButtonLink } from '../components/ButtonLink/ButtonLink.playroom';
 export { Card } from '../components/Card/Card.playroom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "31.0.0",
+  "version": "31.1.0",
   "description": "Themeable design system for the SEEK Group",
   "main": "lib/components/index.ts",
   "sideEffects": [