@pexip/components 16.9.0 → 16.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 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');