@pexip/components 16.16.0 → 17.0.0

package/CHANGELOG.md

@@ -1,5 +1,172 @@
 # Changelog
 
+## 17.0.0
+
+### Major Changes
+
+- 15f9674: - Adds `none` size to `Modal` size modifier which skips `width`
+  styles
+  - `useMobileDevice` considers
+    `${TOUCH_DEVICE} and ${LANDSCAPE} and ${mediaBreakpointDown('lg')}` a mobile
+    device in addition to
+    `${TOUCH_DEVICE} and ${PORTRAIT} and ${mediaBreakpointDown('md')}`.
+  - added two new mixins `mobile-portrait` and `mobile-landscape`, with `mobile`
+    mixin including these both
+- fcacb46: - removes `buttonTooltip`, `buttonTooltipPosition` from
+  `AriaMenuProps`, type `button` a generic `ReactElement` so we can pass any
+  interactive element as the `AriaMenu` trigger component.
+- eba25c0: Introduce new pexip colors to the components library. Provide
+  `theme-legacy` as a fallback.
+
+  Components library now supports new Pexip colors based on our design system.
+  You can still use our legacy theme:
+
+  ```tsx
+  <ThemeProvider colorScheme={colorScheme} theme="theme-legacy">
+    {children}
+  </ThemeProvider>
+  ```
+
+  Sync up design tokens from figma and export it in `variables.css` and
+  `variables.ts`.
+
+### Minor Changes
+
+- f9f2867: Introduces `pointerCaptureTarget` prop for `Draggable`. It specifies
+  which element will be the pointer capture target if `pointerCapture` is set to
+  `true`.
+- 3d72739: Turn off box shadow for `StatCardBox`. Accept div props for
+  `StatCardRow`.
+- 3aaa924: Support `figureClassName` and `captionClassName` in `StatCard`.
+- bb6297c: Allow `PreferenceWrapper` to also take `div` props.
+- bb6297c: Export `ThemeContext`.
+- 3d72739: Add `textStyle` and `textClassName` to `TextLink`.
+- 6267a3e: @pexip/components
+
+  Add ellipsis-multiline mixin, allows ellipsis on text with multiple lines
+
+  Give Box component headerContentBelowDivider prop, allows rendering of React
+  Element below the Box header's divider/bottom border
+
+  Give Scrollbars component's scrolling div a data-testid value
+
+  Create CondensedTabs components
+
+- eda3361: Adds `useMobileDeviceLandscape` and `useMobileDevicePortrait` hooks.
+- bb6297c: Add `overflow.scss` with related utility classes.
+- f025402: Flip show password-icon for `PasswordInput`. Take translations as
+  props.
+- 8f35a13: Adds `b-none` helper class for `border: 0`.
+- b79c1a5: - `Panel`: Now a `forwardRef` component. Renders scrollbars only if
+  there are any children.
+  - `Box`: Renders children wrapper only if there are any.
+- 3d72739: Hover effect in `StatCard` placed behind `withHover` prop.
+
+### Patch Changes
+
+- 0932c52: Make tooltip markup semantically correct.
+- 56cc914: Add role="complementary" to AriaMenu
+- a99c099: added refresh-step-name action to `multistepIndicatorReducer`,
+  enabling it to reflect translated step name in `MultistepIndicator` on ad-hoc
+  language changes
+- 262122d: Add `colorScheme` to `ThemeProvider`. This makes it possible to
+  access the css custom properties by just using the ThemeProvider.
+- f025402: Add some padding to `PasswordInput` icon.
+- 1965f23: Add back `color-brand` overrides for buttons
+- 6663887: Draggable calls `releasePointerCapture` on `pointerup`.
+- 2b3afb0: Cancel drag changes if `Draggable` sideEffect re-renders whilst
+  dragging.
+- 1b9bc12: Removes `-webkit-appearance` and `appearance` styles for button-like
+  elements
+- 9b42c7a: Import new `Authenticated` and `NotAuthenticated` icons and use it in
+  Participant panel
+- 8282958: Use @react-aria/tooltip with CustomTooltip component
+- 2a48655: Adjusts `InnerAriaMenuItem` hover & active styles.
+- 0f2c13e: prevent default `onPointerUp` event to prevent unexpected aria menu
+  item selection when the menu is opened by mouse click
+- Updated dependencies [164a3e2]
+- Updated dependencies [b13010c]
+- Updated dependencies [10fdb9d]
+- Updated dependencies [66a8f72]
+- Updated dependencies [d8f7f78]
+  - @pexip/utils@16.13.0
+  - @pexip/hooks@19.0.1
+  - @pexip/signal@16.7.1
+
+## 16.17.0
+
+### Minor Changes
+
+- 60db2da: Add more flex classes for `justify-content`, `justify-items`,
+  `align-content` and `align-items`.
+- c891aed: Add required props `ariaLabelDecrement` and `ariaLabelIncrement` to
+  component `NumberStepInput`
+- 744cdb4: Add optional `scrollElementClassname` property to the `Panel`
+  component
+- 60db2da: Add `topEnd` and `bottomEnd` tooltip positions. Add `defaultOpen` in
+  `Tooltip`. Use in stories.
+- 60db2da: Extract `StatCardBox` from `StatCard`.
+- 893f3c1: `AriaMenu`: Add optional tooltip to menu trigger button
+- 9fde123: - `BadgeCounter`: Add optional `badgeClassName` property to allow
+  custom style of the badge
+  - `AriaMenu`: Add optional `menuClassName` property to allow custom style of
+    the menu, and some default styling updates on the component
+- 60db2da: Pass `StatCardBox` props through `StatCard`.
+- 60db2da: Support `offset` and `crossOffset` in `Tooltip`.
+- 0cd9ec0: - Update stories for `PreferenceInput` and `PreferenceWrapper`. Add
+  more stories.
+  - Only set minimum height for `PreferenceWrapper`.
+  - Remove automatic padding for `PreferenceInput`.
+- a2ab4d9: Don't automatically use label as title for Tag.
+- 9e050cf: Introduce `scrollable` prop for `Box` which allows content inside the
+  box to be scrollable
+- 60db2da: Add d-none class.
+
+### Patch Changes
+
+- 6fb1adb: Syntax updates for Storybook components
+- 7d719e1: added step value property to NumberStepInput
+- 56bdd94: Emit open state of AriaMenu through signal
+- d98fe9d: Move to module type.
+- c0427ff: Defaults `BadgeCounter`'s `number` property to 0.
+- cbebfea: Add `build:watch` command.
+- 4efc2ec: BoxFooter can take individual padding sizes. Panel can control
+  scrolling of Scrollbars component
+- 5b593f7: `CircleCountDown`: Refactoring due to CSS syntax updates
+- a4acb0b: Puts `input` element of `Checkbox` on top of the checkmark `span` via
+  z-index.
+- acd7aba: Moves `jest` to individual packages, enabling them to have their own
+  individual config.
+- ebba026: Introduced `useModal` hook to manage aria-hidden attributes in
+  specific cases. It is used in `Sheet` component and `DeviceSelectionStep` view
+  Refactored `useFocusForm` hook to allow specific focus on element without
+  bluring it right after focus Added property propagation to `Announcer`
+  component. It is used to mark the `Announcer` as excluded from
+  aria-hidden="true" logic e.g.
+- 9e97e2a: Left align Menu component list item button text
+- 18dd095: Extended components by an Announcer that offers ARIA live regions
+  feature.
+- 9e53576: `Checkbox`: Set `aria-labelledby` property by default based on `name`
+  property
+- 60db2da: Rename `StatCardRow` type to `StatCardRowData`. `StatCardRow`
+  component supports `position` prop.
+- 2375b52: `Menu` sets `role="menu"` by default and `DropContent` removes to set
+  `role="menu"` by default
+- 60db2da: `StatIndicator` takes div props.
+- 1672449: Update icons
+- b2d6c0a: Refactoring of Storybook stories showcasing the components
+- 1b1a926: Integrated Announcer component (aria-live region feature) with Select
+  and Toast components
+- d583549: `AriaMenu`: Omit ignored properties for trigger button
+- c0ff33a: Add `CustomTooltip` position variants story.
+- 55137c7: Give AriaMenu optional headerContent prop which gives the possibility
+  to add content above menu items
+- Updated dependencies [d98fe9d]
+- Updated dependencies [56bdd94]
+  - @pexip/signal@16.7.1
+  - @pexip/hooks@19.0.0
+  - @pexip/utils@16.12.1
+
 ## 16.16.0
 
 ### Minor Changes

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

@@ -9,16 +9,17 @@ $base-button-variants: (
     'primary',
     'secondary',
     'tertiary',
-    'neutral',
     'translucent',
-    'bordered',
-    'transparent',
-    'transparentAlternative',
     'text',
     'danger',
     'dangerBordered',
     'success',
-    'obvious'
+    // FIXME: variants below are used for call controls, we need to probably find a better naming,
+    // but currently there is only one variant in the design system called `call` so I sticked to what we have for now,
+    // but we should probably rename it or implement call controls as separate component
+    'neutral',
+    'transparent',
+    'transparentAlternative'
 );
 $base-text-variants: (
     'standard',

package/design-tokens/border.scss

@@ -0,0 +1,5 @@
+.b {
+    &-zero {
+        border: 0 !important;
+    }
+}

package/design-tokens/build-scripts/constants.mjs

@@ -1,6 +1,7 @@
 export const API_URL = 'https://api.figma.com/v1/';
 export const FRAME_ID = '88rQRQU5LaIUIzesjpdt1j';
 export const ICONS_FRAME_ID = 'hE9toOmPYV61a1ysNMTSbG';
+export const VARIABLES_FRAME_ID = 'Z2GR4oIYL20ZgbQ3YvYFKw';
 export const RESOURCES_IDS = {
     COLORS: '5433:21000',
     ICONS: '2052:20',

package/design-tokens/build-scripts/index.mjs

@@ -3,15 +3,16 @@ import {getIcons} from './icons.mjs';
 import {getFonts, syncFonts} from './fonts.mjs';
 import {getBreakpoints, syncBreakpoints} from './breakpoints.mjs';
 import {RESOURCES_IDS} from './constants.mjs';
+import {exportVariables, getVariables} from './variables.mjs';
 
 if (!process.env.ACCESS_TOKEN) {
-    throw new Error('Provide access token');
+    throw new Error('Provide figma ACCESS_TOKEN environment variable.');
 }
 
 async function buildTokens() {
-    const types = (process.argv[2] ?? 'colors,icons,fonts,breakpoints').split(
-        ',',
-    );
+    const types = (
+        process.argv[2] ?? 'colors,icons,fonts,breakpoints,variables'
+    ).split(',');
     try {
         console.log('Starting...');
         if (types.includes('colors')) {
@@ -44,6 +45,12 @@ async function buildTokens() {
             console.log(breakpoints);
             console.log('Breakpoints generated');
         }
+        if (types.includes('variables')) {
+            const variables = await getVariables();
+            exportVariables(variables);
+            console.log(variables);
+            console.log('Variables generated');
+        }
         console.log('All done');
     } catch (e) {
         console.error('Build tokens failed', e);

package/design-tokens/build-scripts/variables.mjs

@@ -0,0 +1,117 @@
+import fs from 'fs';
+import path from 'path';
+import {camelCase, paramCase} from 'change-case';
+
+import {fetchWithAccessToken} from './fetchWithAccessToken.mjs';
+import {VARIABLES_FRAME_ID} from './constants.mjs';
+import {Content} from './content.mjs';
+
+const VARIABLE_ALIAS = 'VARIABLE_ALIAS';
+const MAPPED_DEFAULTS = 'Mapped';
+
+const getHexCode = num => {
+    const hex = Math.round(num * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+};
+
+const getColor = ({r, g, b, a}) =>
+    `#${getHexCode(r)}${getHexCode(g)}${getHexCode(b)}${a === 1 ? '' : getHexCode(a)}`;
+
+const getFloat = value => (value > 0 ? `${value}px` : value);
+
+const getValue = (valueRef, type) => {
+    switch (type) {
+        case 'COLOR':
+            return getColor(valueRef);
+        case 'FLOAT':
+            return getFloat(valueRef);
+        default:
+            return valueRef;
+    }
+};
+
+export const getVariables = async () => {
+    const res = await fetchWithAccessToken(
+        `files/${VARIABLES_FRAME_ID}/variables/local`,
+    );
+
+    const getVariable = id => {
+        const variable = res.meta.variables[id];
+        const collection =
+            res.meta.variableCollections[variable.variableCollectionId];
+        const modes = collection.modes;
+
+        for (const mode of modes) {
+            const valueRef = res.meta.variables[id].valuesByMode[mode.modeId];
+            return valueRef.type === VARIABLE_ALIAS
+                ? getVariable(valueRef.id)
+                : getValue(valueRef, variable.resolvedType);
+        }
+    };
+
+    const variables = {};
+    for (const collection of Object.values(res.meta.variableCollections)) {
+        console.log(collection.name);
+        if (collection.name !== MAPPED_DEFAULTS) {
+            continue;
+        }
+
+        const variableIds = collection.variableIds.sort((idA, idB) => {
+            const nameA = res.meta.variables[idA]?.name ?? '';
+            const nameB = res.meta.variables[idB]?.name ?? '';
+            return nameA.localeCompare(nameB);
+        });
+
+        for (const mode of collection.modes) {
+            const modeName = camelCase(mode.name);
+            variables[modeName] = {};
+
+            variableIds.forEach(variableId => {
+                const variable = res.meta.variables[variableId];
+                const valueRef =
+                    res.meta.variables[variableId].valuesByMode[mode.modeId];
+                const value =
+                    valueRef.type === VARIABLE_ALIAS
+                        ? getVariable(valueRef.id)
+                        : getValue(valueRef, variable.resolvedType);
+
+                variables[modeName][variable.name] = value;
+            });
+        }
+    }
+
+    return variables;
+};
+
+const getFileHeader = ext =>
+    `/* FILE GENERATED BY packages/components/design-tokens/build-scripts/variables.${ext} DO NOT CHANGE */`;
+
+const exportTsVariables = async variables => {
+    const content = new Content(getFileHeader('ts'));
+    content.push('export const variables = ');
+    content.push(JSON.stringify(variables, null, 2) + ';');
+    fs.writeFileSync(
+        path.resolve('..', 'generated', 'variables.ts'),
+        await content.print('typescript'),
+    );
+};
+
+const exportCssVariables = async cssVariables => {
+    const content = new Content(getFileHeader('css'));
+    for (const [colorScheme, v] of Object.entries(cssVariables)) {
+        content.push(`.${paramCase(colorScheme)} {`);
+        for (const [key, value] of Object.entries(v)) {
+            content.push(`  --${paramCase(key)}: ${value};`);
+        }
+        content.push('}\n');
+    }
+    fs.writeFileSync(
+        path.resolve('..', 'generated', 'variables.css'),
+        await content.print('css'),
+    );
+};
+
+export const exportVariables = variables => {
+    exportTsVariables(variables);
+    exportCssVariables(variables);
+};

package/design-tokens/display.scss

@@ -1,21 +1,10 @@
 .d {
-    &-block {
-        display: block !important;
-    }
-
-    &-inline {
-        display: inline !important;
-    }
-
-    &-inline-block {
-        display: inline-block !important;
-    }
-
-    &-inline-flex {
-        display: inline-flex !important;
-    }
-
-    &-flex {
-        display: flex !important;
+    @each $display in block, inline, inline-block, flex, inline-flex, grid,
+        inline-grid, flow-root, none, contents, table, table-row, list-item,
+        inherit, initial, revert, revert-layer, unset
+    {
+        &-#{$display} {
+            display: $display !important;
+        }
     }
 }

package/design-tokens/flex.scss

@@ -51,22 +51,26 @@
         justify-content: flex-start !important;
     }
 
-    &-center {
-        justify-content: center !important;
-    }
-
     &-end {
         justify-content: flex-end !important;
     }
 
-    &-space-between {
-        justify-content: space-between !important;
+    @each $prop in center, left, normal, right, space-around, space-between,
+        space-evenly, stretch
+    {
+        &-#{$prop} {
+            justify-content: $prop !important;
+        }
     }
 }
 
 .justify-items {
-    &-center {
-        justify-items: center !important;
+    @each $prop in center, end, left, normal, right, self-end, self-start, start,
+        stretch
+    {
+        &-#{$prop} {
+            justify-items: $prop !important;
+        }
     }
 }
 
@@ -75,13 +79,17 @@
         align-content: flex-start !important;
     }
 
-    &-center {
-        align-content: center !important;
-    }
-
     &-end {
         align-content: flex-end !important;
     }
+
+    @each $prop in center, left, normal, right, space-around, space-between,
+        space-evenly, stretch
+    {
+        &-#{$prop} {
+            align-content: $prop !important;
+        }
+    }
 }
 
 .align-items {
@@ -89,11 +97,13 @@
         align-items: flex-start !important;
     }
 
-    &-center {
-        align-items: center !important;
-    }
-
     &-end {
         align-items: flex-end !important;
     }
+
+    @each $prop in center, normal, self-start, self-end, stretch {
+        &-#{$prop} {
+            align-items: $prop !important;
+        }
+    }
 }