@pexip/components 16.9.0 → 16.11.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 16.11.0
+
+### Minor Changes
+
+- 3353033: Move `isDisabled` from `MultiselectOption` to `Option`.
+
+### Patch Changes
+
+- acd55a9: Allow ExpanderCell to take textVariant prop.
+- 267898b: adds onPointerDownCapture prop to Menu component, which is passed to
+  the dropdown list
+- c3f46b6: add missing breakout-rooms-16 icon
+- 3353033: Fix Checkbox color for indeterminate state.
+- Updated dependencies [bcfa59f]
+  - @pexip/signal@16.6.0
+  - @pexip/hooks@16.4.2
+
+## 16.10.0
+
+### Minor Changes
+
+- 7f59a752: Adds `data-testid` attributes to `BreakoutRoom`-related components.
+- dfd80cb1: Update color palette of `Button` variant "bordered" in light theme
+- fe6ce452: - Simplifies css class hierarchy of `Divider` component
+  - Adds `onPointerMoveExtra` prop to `Draggable`. A callback to be ran on
+    `pointermove` event.
+- 8b6184da: Export TextProps type.
+- 237ed011: Support `withScrollbars` prop in `Modal`.
+
 ## 16.9.0
 
 ### Minor Changes

package/README.md

@@ -1,15 +1,10 @@
-# @pexip/components
+# `@pexip/components`
 
 Shared UI component library based on Pexip's design system.
 
-Current style guide:
-[Figma - Style guide](https://www.figma.com/file/opMo7dh4FO56qqGsozGzv2/Pexip-prototype?node-id=43%3A403)
+## Install
 
-## Storybook
-
-Current state is published to
-
-### [https://main--5f6dd462e70810002208a2c9.chromatic.com/](https://main--5f6dd462e70810002208a2c9.chromatic.com/)
+`npm install @pexip/components`
 
 ## Usage
 
@@ -29,113 +24,3 @@ import '@pexip/components/src/fonts.css';
 // Import other global styles
 import '@pexip/components/dist/index.css';
 ```
-
-## Development
-
-When developing new components for this library, please run Storybook to view
-the components.
-
-[See the documentation here](../storybook/README.md).
-
-### Creating new components
-
-Create new components in the `/src/components` folder and add it to the correct
-category.
-[See the documentation about the folders in Storybook](https://main--5f6dd462e70810002208a2c9.chromatic.com/?path=/story/overview-getting-started--page#development).
-
-```
-src
- |__components
-     |__elements
-         |__Component
-              |__Component.tsx
-              |__Component.module.scss
-              |__Component.tokens.scss
-              |__stories
-                   |__Component.stories.tsx
-     |__foundation
-     |__modules
-```
-
-#### Setting up a new component
-
-Create a `*.tsx` file to write the component in React/JSX format. Read about the
-repo's [best practices for React](../../docs/react.md).
-
-**Component.tsx**
-
-```tsx
-import React from 'react';
-
-export const Button: React.FC<{text: string}> = ({text}) => (
-  <button>{text}</button>
-);
-```
-
-To view and test the component, create a `*.stories.tsx` file under the
-`stories` folder in that component's folder and it should appear in Storybook
-given the correct title, e.g. `Elements/Component` appears under the Elements
-tab.
-
-#### Styling
-
-For styling, the project uses the CSS modules. To add styling to the components,
-create a `*.module.scss` file to be used in the `.tsx` file, and a
-`*.tokens.scss` file for generating CSS variables.
-
-**Component.tokens.scss**
-
-```scss
-@import '../../../../design-tokens/variables.scss';
-
-:root {
-  // Creates a global variable --button-size
-  @include create-token(button-size, 40px);
-}
-```
-
-**Component.module.scss**
-
-```scss
-// Relative path to the exported variables.scss
-@import '../../../../design-tokens/variables.scss';
-
-.button {
-  border: 0;
-  background: 0;
-
-  // Rewritten as a CSS variable `height: var(--button-size)`
-  height: get-token(button-size);
-}
-```
-
-**Component.tsx**
-
-```tsx
-import React from 'react';
-
-import styles from './Component.module.scss';
-
-export const Button: React.FC<{text: string}> = ({text}) => (
-  <button
-    /*
-     * Property is derived from the CSS class
-     * defined in Components.modules.scss
-     */
-    className={styles.button}
-  >
-    {text}
-  </button>
-);
-```
-
-### Exporting the new component
-
-Add the newly created component in `/src/index.ts` folder so that it may be used
-from the library.
-
-```ts
-export {Component} from './components/elements/Component/Component';
-```
-
-The component should now be usable from the `@pexip/components` library.

package/design-tokens/base/palette.variables.scss

@@ -20,6 +20,17 @@ $secondary-color-800: color-hex('deep-blue-80');
 $secondary-color-900: color-hex('deep-blue-90');
 $secondary-color-1000: color-hex('deep-blue-100');
 
+$bordered-color-100: color-hex('white');
+$bordered-color-200: color-hex('neutral-10');
+$bordered-color-300: color-hex('neutral-20');
+$bordered-color-400: color-hex('neutral-30');
+$bordered-color-500: color-hex('neutral-40');
+$bordered-color-600: color-hex('neutral-50');
+$bordered-color-700: color-hex('neutral-60');
+$bordered-color-800: color-hex('neutral-80');
+$bordered-color-900: color-hex('neutral-90');
+$bordered-color-1000: color-hex('neutral-100');
+
 $error-bg-color: color-hex('signal-red');
 $error-bg-color-hover: color-hex('signal-red-hover');
 $error-text-color: color-hex('white');

package/design-tokens/generated/Icons.ts

@@ -38,6 +38,7 @@ import IconBilling_16 from './icons/billing-16.svg';
 import IconBilling_24 from './icons/billing-24.svg';
 import IconBlock_16 from './icons/block-16.svg';
 import IconBlock_24 from './icons/block-24.svg';
+import IconBreakoutRooms_16 from './icons/breakout-rooms-16.svg';
 import IconBreakoutRooms_24 from './icons/breakout-rooms-24.svg';
 import IconCalendar_16 from './icons/calendar-16.svg';
 import IconCalendar_24 from './icons/calendar-24.svg';
@@ -339,7 +340,7 @@ const collection: IconCollection = {
     IconBilling: {size16: IconBilling_16, size24: IconBilling_24},
     IconBlock: {size16: IconBlock_16, size24: IconBlock_24},
     IconBreakoutRooms: {
-        size16: IconBreakoutRooms_24,
+        size16: IconBreakoutRooms_16,
         size24: IconBreakoutRooms_24,
     },
     IconCalendar: {size16: IconCalendar_16, size24: IconCalendar_24},

package/design-tokens/generated/icons/breakout-rooms-16.json

@@ -0,0 +1,7 @@
+{
+  "iconName": "breakout-rooms-16",
+  "name": "16px-breakout-rooms",
+  "pascalName": "IconBreakoutRooms_16",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/672bac1d-8c73-4cea-a50b-71c68dce5ec1",
+  "graphic": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.4545 3H3.54545C2.13909 3 1 4.20481 1 5.69231V11.0769C1 12.5644 2.13909 13.7692 3.54545 13.7692H12.4545C13.8609 13.7692 15 12.5644 15 11.0769V5.69231C15 4.20481 13.8609 3 12.4545 3ZM3 5H7V8H3V5ZM7 9H3V12H7V9ZM9 5H13V8H9V5ZM13 9H9V12H13V9Z\" fill=\"white\"/>\n</svg>\n"
+}

package/design-tokens/generated/icons/breakout-rooms-16.svg

@@ -0,0 +1,16 @@
+<!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    data-token-name="IconBreakoutRooms_16"
+    viewBox="0 0 16 16"
+    aria-hidden="true"
+>
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M12.454 3H3.545C2.14 3 1 4.205 1 5.692v5.385c0 1.487 1.14 2.692 2.545 2.692h8.91c1.406 0 2.545-1.205 2.545-2.692V5.692C15 4.205 13.86 3 12.454 3ZM3 5h4v3H3V5Zm4 4H3v3h4V9Zm2-4h4v3H9V5Zm4 4H9v3h4V9Z"
+        clip-rule="evenodd"
+    />
+</svg>

package/design-tokens/generated/icons/breakout-rooms-16.svg.d.ts

@@ -0,0 +1,5 @@
+// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE
+
+import type React from 'react';
+const icon: React.FC<React.ComponentProps<'svg'>>;
+export default icon;

package/design-tokens/tokens/zIndex.tokens.scss

@@ -0,0 +1,22 @@
+@import '../variables.scss';
+
+:root {
+    @include create-token(components-z-index-draggable-dragging, 10000);
+    @include create-token(components-z-index-toast, 9999);
+    @include create-token(components-z-index-fullscreen-overlay, 9998);
+    @include create-token(
+        components-z-index-context-menu-position-adjuster,
+        9999
+    );
+    @include create-token(components-z-index-context-menu-click-catcher, 9998);
+    @include create-token(components-z-index-modal-mask, 999);
+    @include create-token(components-z-index-modal-positioned, 999);
+    @include create-token(components-z-index-sheet-wrapper, 999);
+    @include create-token(components-z-index-badge-counter, 500);
+    @include create-token(components-z-index-drop-content, 99);
+    @include create-token(components-z-index-scrim-top, 5);
+    @include create-token(components-z-index-tooltip, 1);
+    @include create-token(components-z-index-line-heading-text, 1);
+    @include create-token(components-z-index-line-heading-visual-line, 0);
+    @include create-token(components-z-index-file-upload-input, -1);
+}

package/design-tokens/tokens.scss

@@ -4,6 +4,7 @@
 @import './tokens/all-sizes.tokens.scss';
 @import './tokens/circle-sizes.tokens.scss';
 @import './tokens/border-radius.tokens.scss';
+@import './tokens/zIndex.tokens.scss';
 
 /*FOUNDATION*/
 @import '../src/components/foundation/FullSizeWindow/FullSizeWindow.tokens.scss';