@pexip/components 16.13.0 → 16.15.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 16.15.0
+
+### Minor Changes
+
+- 9bd40c5: Changes to the Input to only have one label to be compliant with wcag
+
+## 16.14.0
+
+### Minor Changes
+
+- ae7b35d: Adds `share` icon.
+- 4db949e: `AriaMenu`: Add props for placement and offset of the popover
+- bae1125: Always group page buttons when using `PaginationNavGrouped`
+- bae1125: Optional `totalPagesCount` (previously `pageLength`) in
+  `TablePagination`.
+- b3497ad: Introduces `BadgeCounter` variants - `info` and `notification`.
+
+  Default is `notification`
+
+- bae1125: Rename `pageLength` to `totalPageCount` for `TablePaginationNav`
+
+### Patch Changes
+
+- 9046f9d: `NumberStepInput` uses `name` prop to build testid.
+- f087818: Replaced title attribute of UserMenuDropContent by tooltip component
+  Added translation for settings button tooltip and settings button aria label
+  Added "endBottom" position to Tooltip
+- 53d90af: Introduced new drop down menu component based on React Aria
+  (https://react-spectrum.adobe.com/react-aria)
+- e2b4da2: @pexip/components Make Video component ref handle focus on video
+  element
+- ec6dac2: Update placholder text color
+- Updated dependencies [bfb8058]
+  - @pexip/utils@16.11.0
+  - @pexip/hooks@17.1.1
+  - @pexip/signal@16.7.0
+
 ## 16.13.0
 
 ### Minor Changes

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

@@ -31,3 +31,4 @@ $base-text-variants: (
     'hidden',
     'warning'
 );
+$base-badge-counter-variants: ('info', 'notification');

package/design-tokens/generated/Icons.ts

@@ -193,6 +193,8 @@ import IconSettings_16 from './icons/settings-16.svg';
 import IconSettings_24 from './icons/settings-24.svg';
 import IconSettingsMeeting_16 from './icons/settings-meeting-16.svg';
 import IconSettingsMeeting_24 from './icons/settings-meeting-24.svg';
+import IconShare_16 from './icons/share-16.svg';
+import IconShare_24 from './icons/share-24.svg';
 import IconShield_16 from './icons/shield-16.svg';
 import IconShield_24 from './icons/shield-24.svg';
 import IconShuffle_16 from './icons/shuffle-16.svg';
@@ -337,6 +339,7 @@ export interface IconCollection {
     IconSend: IconSource;
     IconSettings: IconSource;
     IconSettingsMeeting: IconSource;
+    IconShare: IconSource;
     IconShield: IconSource;
     IconShuffle: IconSource;
     IconSpeakerDisabled: IconSource;
@@ -789,6 +792,11 @@ const collection: IconCollection = {
         size24: IconSettingsMeeting_24,
         size32: IconSettingsMeeting_24,
     },
+    IconShare: {
+        size16: IconShare_16,
+        size24: IconShare_24,
+        size32: IconShare_24,
+    },
     IconShield: {
         size16: IconShield_16,
         size24: IconShield_24,

package/design-tokens/generated/icons/share-16.json

@@ -0,0 +1,7 @@
+{
+  "iconName": "share-16",
+  "name": "16px-share",
+  "pascalName": "IconShare_16",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/3e1427d8-e097-4646-9af2-7fe8fd6981ab",
+  "graphic": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4 2C2.34315 2 1 3.34315 1 5V10C1 11.6569 2.34315 13 4 13H7.8249V7.57123L5.38376 8.96908C5.19257 9.08048 4.95764 9.01327 4.83234 8.81162C4.70704 8.60997 4.72649 8.33364 4.87879 8.15875L8.18946 4.34237C8.35364 4.15254 8.64582 4.15254 8.81 4.34237L12.1212 8.15875C12.2735 8.33364 12.293 8.60997 12.1677 8.81162C12.0434 9.01078 11.8101 9.07986 11.6162 8.96908L9.1751 7.57123V13H13C14.6569 13 16 11.6569 16 10V5C16 3.34315 14.6569 2 13 2H4Z\" fill=\"white\"/>\n</svg>\n"
+}

package/design-tokens/generated/icons/share-16.svg

@@ -0,0 +1,14 @@
+<!-- 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="IconShare_16"
+    viewBox="0 0 16 16"
+    aria-hidden="true"
+>
+    <path
+        fill="currentColor"
+        d="M4 2a3 3 0 0 0-3 3v5a3 3 0 0 0 3 3h3.825V7.571L5.384 8.97c-.191.111-.426.044-.552-.157a.56.56 0 0 1 .047-.653l3.31-3.817a.41.41 0 0 1 .621 0l3.311 3.817a.56.56 0 0 1 .047.653c-.125.199-.358.268-.552.157l-2.44-1.398V13H13a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3z"
+    />
+</svg>

package/design-tokens/generated/icons/share-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/generated/icons/share-24.json

@@ -0,0 +1,7 @@
+{
+  "iconName": "share-24",
+  "name": "24px-share",
+  "pascalName": "IconShare_24",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5313e66a-a84e-49e3-9ee8-81c90a9de66d",
+  "graphic": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.8 3C2.14903 3 0 5.14903 0 7.8V16.2C0 18.851 2.14903 21 4.8 21H10.9198V12.1166L7.01401 14.4039C6.70811 14.5862 6.33222 14.4763 6.13174 14.1463C5.93127 13.8163 5.96238 13.3641 6.20606 13.078L11.5031 6.83297C11.7658 6.52235 12.2333 6.52235 12.496 6.83297L17.7939 13.078C18.0376 13.3641 18.0687 13.8163 17.8683 14.1463C17.6695 14.4722 17.2962 14.5852 16.986 14.4039L13.0802 12.1166V21H19.2C21.851 21 24 18.851 24 16.2V7.8C24 5.14903 21.851 3 19.2 3H4.8Z\" fill=\"white\"/>\n</svg>\n"
+}

package/design-tokens/generated/icons/share-24.svg

@@ -0,0 +1,14 @@
+<!-- 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="IconShare_24"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+>
+    <path
+        fill="currentColor"
+        d="M4.8 3A4.8 4.8 0 0 0 0 7.8v8.4A4.8 4.8 0 0 0 4.8 21h6.12v-8.883l-3.906 2.287c-.306.182-.682.072-.882-.258a.94.94 0 0 1 .074-1.068l5.297-6.245c.263-.31.73-.31.993 0l5.298 6.245a.94.94 0 0 1 .074 1.068c-.198.326-.572.44-.882.258l-3.906-2.287V21h6.12a4.8 4.8 0 0 0 4.8-4.8V7.8A4.8 4.8 0 0 0 19.2 3z"
+    />
+</svg>

package/design-tokens/generated/icons/share-24.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/mixins/_focus.scss

@@ -0,0 +1,55 @@
+@use 'sass:map';
+@import '../variables.scss';
+
+@mixin box-shadow-focus($paramMap: ()) {
+    $defaults: (
+        color-scheme: 'dark',
+        is-inset: true,
+        additional-selector: null,
+    );
+    $opts: map-merge($defaults, $paramMap);
+    $color-scheme: map.get($opts, 'color-scheme');
+    $is-inset: map.get($opts, 'is-inset');
+    $additional-selector: map.get($opts, 'additional-selector');
+
+    @include create-token(
+        dark-box-shadow-focus,
+        rgba(color-hex('green-40'), 0.3)
+    );
+    @include create-token(dark-box-shadow-focus-border, color('green-100'));
+
+    @include create-token(light-box-shadow-focus, color('green-40'));
+    @include create-token(light-box-shadow-focus-border, color('green-100'));
+
+    &,
+    &:focus {
+        transition: box-shadow 0.3s;
+        outline: transparent;
+    }
+
+    &[data-focus-visible-added],
+    #{$additional-selector} {
+        @if $is-inset {
+            box-shadow:
+                0
+                    0
+                    0
+                    1px
+                    inset
+                    get-token(#{$color-scheme}-box-shadow-focus-border),
+                0
+                    0
+                    0
+                    3px
+                    get-token(#{$color-scheme}-box-shadow-focus) !important;
+        } @else {
+            box-shadow:
+                0 0 0 1px get-token(#{$color-scheme}-box-shadow-focus-border),
+                0
+                    0
+                    0
+                    4px
+                    get-token(#{$color-scheme}-box-shadow-focus) !important;
+        }
+    }
+}