@equinor/eds-core-react 0.17.0 → 0.18.0-envis.1

package/README.md

@@ -3,7 +3,7 @@
 Available components to help style your React application as an Equinor application. We publish new components regularly so make sure to check back often!
 
 Make sure to check out our [Storybook](https://eds-storybook-react.azurewebsites.net/) for more examples!
-Read the [changelog](https://github.com/equinor/design-system/blob/develop/libraries/core-react/CHANGELOG.md) for details on specific releases.
+Read the [changelog](https://github.com/equinor/design-system/blob/develop/packages/eds-core-react/CHANGELOG.md) for details on specific releases.
 
 ## Installation
 

package/dist/{core-react.cjs.js → eds-core-react.cjs.js}

@@ -83,20 +83,29 @@ const {
 } = edsTokens.tokens;
 const button = {
   background: 'transparent',
-  height: buttonHeight,
+  // height: buttonHeight,
   typography: { ...buttonTypography,
-    textAlign: 'center'
+    textAlign: 'center',
+    fontSize: '0.875rem' // 14px - 14/16
+
   },
   border: {
     type: 'border',
     width: '1px',
     color: 'transparent',
-    radius: buttonBorderRadius$2,
+    //radius: buttonBorderRadius,
+    radius: '0.2857em',
+    // 4px - 4/14
     style: 'solid'
   },
   spacings: {
-    left: medium$6,
-    right: medium$6
+    top: 'calc(0.7142em - 1px)',
+    // calc(10px - 1px) - 10/14 (line-height er 1.143em = 16.002px)
+    bottom: 'calc(0.7142em - 1px)',
+    left: '1.1428em',
+    right: '1.1428em' // left: medium,
+    // right: medium,
+
   },
   clickbound: {
     height: clicboundHeight$1,
@@ -118,7 +127,9 @@ const button = {
         type: 'border',
         width: '1px',
         color: 'transparent',
-        radius: buttonBorderRadius$2,
+        //radius: buttonBorderRadius,
+        radius: '0.2857em',
+        // 4px - 4/14
         style: 'solid'
       }
     },
@@ -147,7 +158,13 @@ const button = {
   },
   modes: {
     compact: {
-      height: compactButtonHeight,
+      minHeight: '1.7142em',
+      // 24px
+      spacings: {
+        top: 'calc(0.2857em - 1px)',
+        // calc(4px - 1px) - 4/14
+        bottom: 'calc(0.2857em - 1px)'
+      },
       clickbound: {
         height: compactClickboundHeight$1,
         width: '100%',
@@ -1147,7 +1164,7 @@ const FullWidthCenterContent = styled__default['default'].span.withConfig({
 const FullWidthInner = styled__default['default'].span.withConfig({
   displayName: "InnerFullWidth__FullWidthInner",
   componentId: "sc-qeawkb-1"
-})(["height:100%;display:flex;align-items:center;> img:first-child,> svg:first-child{margin-right:8px;}> img:last-child,> svg:last-child{margin-left:8px;}> img:only-child,> svg:only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:32px;}> span:last-child{margin-right:32px;}> span:only-child{margin-right:0;margin-left:0;}"]);
+})(["height:100%;display:flex;align-items:center;>:is(svg,img){margin-top:-4px;margin-bottom:-4px;}>:is(svg,img):first-child{margin-right:0.5714em;}>:is(svg,img):last-child{margin-left:0.5714em;}>:is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:2.2857em;}> span:last-child{margin-right:2.2857em;}> span:only-child{margin-right:0;margin-left:0;}"]);
 const InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth({
   children
 }, ref) {
@@ -1226,7 +1243,7 @@ const getToken$1 = (variant, color) => {
 const Inner = styled__default['default'].span.withConfig({
   displayName: "Button__Inner",
   componentId: "sc-1hs0myn-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;height:100%;justify-content:center;"]);
+})(["display:grid;grid-gap:0.5714em;grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& >:is(svg,img){margin-top:-4px;margin-bottom:-4px;}"]);
 const ButtonBase = styled__default['default'].button.withConfig({
   displayName: "Button__ButtonBase",
   componentId: "sc-1hs0myn-1"
@@ -9386,6 +9403,7 @@ exports.Menu = Menu;
 exports.MultiSelect = MultiSelect;
 exports.NativeSelect = NativeSelect;
 exports.Pagination = Pagination;
+exports.Paper = Paper;
 exports.Popover = Popover;
 exports.Progress = Progress;
 exports.Radio = Radio;

package/dist/esm/components/Button/Button.js

@@ -43,7 +43,7 @@ const getToken = (variant, color) => {
 const Inner = styled.span.withConfig({
   displayName: "Button__Inner",
   componentId: "sc-1hs0myn-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;height:100%;justify-content:center;"]);
+})(["display:grid;grid-gap:0.5714em;grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& >:is(svg,img){margin-top:-4px;margin-bottom:-4px;}"]);
 const ButtonBase = styled.button.withConfig({
   displayName: "Button__ButtonBase",
   componentId: "sc-1hs0myn-1"

package/dist/esm/components/Button/InnerFullWidth.js

@@ -9,7 +9,7 @@ const FullWidthCenterContent = styled.span.withConfig({
 const FullWidthInner = styled.span.withConfig({
   displayName: "InnerFullWidth__FullWidthInner",
   componentId: "sc-qeawkb-1"
-})(["height:100%;display:flex;align-items:center;> img:first-child,> svg:first-child{margin-right:8px;}> img:last-child,> svg:last-child{margin-left:8px;}> img:only-child,> svg:only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:32px;}> span:last-child{margin-right:32px;}> span:only-child{margin-right:0;margin-left:0;}"]);
+})(["height:100%;display:flex;align-items:center;>:is(svg,img){margin-top:-4px;margin-bottom:-4px;}>:is(svg,img):first-child{margin-right:0.5714em;}>:is(svg,img):last-child{margin-left:0.5714em;}>:is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:2.2857em;}> span:last-child{margin-right:2.2857em;}> span:only-child{margin-right:0;margin-left:0;}"]);
 const InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth({
   children
 }, ref) {

package/dist/esm/components/Button/tokens/button.js

@@ -47,20 +47,29 @@ const {
 } = tokens;
 const button = {
   background: 'transparent',
-  height: buttonHeight,
+  // height: buttonHeight,
   typography: { ...buttonTypography,
-    textAlign: 'center'
+    textAlign: 'center',
+    fontSize: '0.875rem' // 14px - 14/16
+
   },
   border: {
     type: 'border',
     width: '1px',
     color: 'transparent',
-    radius: buttonBorderRadius,
+    //radius: buttonBorderRadius,
+    radius: '0.2857em',
+    // 4px - 4/14
     style: 'solid'
   },
   spacings: {
-    left: medium,
-    right: medium
+    top: 'calc(0.7142em - 1px)',
+    // calc(10px - 1px) - 10/14 (line-height er 1.143em = 16.002px)
+    bottom: 'calc(0.7142em - 1px)',
+    left: '1.1428em',
+    right: '1.1428em' // left: medium,
+    // right: medium,
+
   },
   clickbound: {
     height: clicboundHeight,
@@ -82,7 +91,9 @@ const button = {
         type: 'border',
         width: '1px',
         color: 'transparent',
-        radius: buttonBorderRadius,
+        //radius: buttonBorderRadius,
+        radius: '0.2857em',
+        // 4px - 4/14
         style: 'solid'
       }
     },
@@ -111,7 +122,13 @@ const button = {
   },
   modes: {
     compact: {
-      height: compactButtonHeight,
+      minHeight: '1.7142em',
+      // 24px
+      spacings: {
+        top: 'calc(0.2857em - 1px)',
+        // calc(4px - 1px) - 4/14
+        bottom: 'calc(0.2857em - 1px)'
+      },
       clickbound: {
         height: compactClickboundHeight,
         width: '100%',

package/dist/esm/index.js

@@ -38,3 +38,4 @@ export { Checkbox } from './components/Checkbox/Checkbox.js';
 export { Radio } from './components/Radio/Radio.js';
 export { Switch } from './components/Switch/Switch.js';
 export { EdsProvider, useEds } from './components/EdsProvider/eds.context.js';
+export { Paper } from './components/Paper/Paper.js';

package/dist/types/index.d.ts

@@ -32,3 +32,4 @@ export * from './components/Checkbox';
 export * from './components/Radio';
 export * from './components/Switch';
 export * from './components/EdsProvider';
+export * from './components/Paper';

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.17.0",
+  "version": "0.18.0-envis.1",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
   ],
-  "main": "dist/core-react.cjs.js",
+  "main": "dist/eds-core-react.cjs.js",
   "publishConfig": {
-    "main": "dist/core-react.cjs.js",
+    "main": "dist/eds-core-react.cjs.js",
     "module": "dist/esm/index.js"
   },
   "types": "dist/types/index.d.ts",
@@ -20,7 +20,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/equinor/design-system",
-    "directory": "libraries/core-react"
+    "directory": "packages/eds-core-react"
   },
   "bugs": {
     "url": "https://github.com/equinor/design-system/issues"
@@ -64,8 +64,8 @@
     "jest": "^27.0.6",
     "jest-styled-components": "^7.0.5",
     "js-file-download": "^0.4.12",
-    "ramda": "^0.27.1",
     "postcss": "^8.4.4",
+    "ramda": "^0.27.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.11.1",
@@ -104,5 +104,5 @@
     "build:storybook": "build-storybook -o storybook-build"
   },
   "module": "dist/esm/index.js",
-  "readme": "# @equinor/eds-core-react\n\nAvailable components to help style your React application as an Equinor application. We publish new components regularly so make sure to check back often!\n\nMake sure to check out our [Storybook](https://eds-storybook-react.azurewebsites.net/) for more examples!\nRead the [changelog](https://github.com/equinor/design-system/blob/develop/libraries/core-react/CHANGELOG.md) for details on specific releases.\n\n## Installation\n\n```sh\nnpm install @equinor/eds-core-react styled-components\n```\nIf you use Typescript, make sure you have typescript >= 3.8 as a devDependency:\n```sh\nnpm install typescript --save-dev\n```\n\n## Usage\n\n```jsx\nimport * as React from 'react'\nimport { render } from 'react-dom'\nimport { Button, Typography } from '@equinor/eds-core-react'\n\nconst App = () => (\n  <>\n    <Typography variant=\"h1\" bold>Buttons</Typography>\n\n    <Typography variant=\"h2\">Contained (default)</Typography>\n\n    <Button>Primary</Button>\n    <Button color=\"secondary\">Secondary</Button>\n    <Button color=\"danger\">Danger</Button>\n    <Button disabled>Disabled</Button>\n\n    <Typography variant=\"h2\">Outlined</Typography>\n\n    <Button variant=\"outlined\">Primary</Button>\n    <Button variant=\"outlined\" color=\"secondary\">Secondary</Button>\n    <Button variant=\"outlined\" color=\"danger\">Danger</Button>\n    <Button variant=\"outlined\" disabled>Disabled</Button>\n\n    <Typography variant=\"h2\">Ghost</Typography>\n\n    <Button variant=\"ghost\">Primary</Button>\n    <Button variant=\"ghost\" color=\"secondary\">Secondary</Button>\n    <Button variant=\"ghost\" color=\"danger\">Danger</Button>\n    <Button variant=\"ghost\" disabled>Disabled</Button>\n  </>\n)\n\nrender(<App />, document.getElementById('root'))\n```\n\n\n## Components\n\n### Available ✅\n\n- Accordion\n- Banner\n- Breadcrumbs\n- Button\n- Cards\n- Chips\n- Dialog\n- Divider\n- Icon\n- List\n- Menu\n- Pagination\n- Popover\n- Progress indicators\n- Scrim\n- Search\n- Select (Native Select)\n- Single Select\n- Multi Select\n- Selection Controls\n- Side Sheet\n- Slider\n- Snackbar\n- Table\n- Table of contents\n- Tabs\n- TextField\n- Tooltip\n- TopBar\n- Typography\n\n### In progress 👷‍♀️\n\n- Navigation Drawer\n\n### TODO 🛠️\n\n- App launcher\n- Stepper\n\n"
+  "readme": "# @equinor/eds-core-react\n\nAvailable components to help style your React application as an Equinor application. We publish new components regularly so make sure to check back often!\n\nMake sure to check out our [Storybook](https://eds-storybook-react.azurewebsites.net/) for more examples!\nRead the [changelog](https://github.com/equinor/design-system/blob/develop/packages/eds-core-react/CHANGELOG.md) for details on specific releases.\n\n## Installation\n\n```sh\nnpm install @equinor/eds-core-react styled-components\n```\nIf you use Typescript, make sure you have typescript >= 3.8 as a devDependency:\n```sh\nnpm install typescript --save-dev\n```\n\n## Usage\n\n```jsx\nimport * as React from 'react'\nimport { render } from 'react-dom'\nimport { Button, Typography } from '@equinor/eds-core-react'\n\nconst App = () => (\n  <>\n    <Typography variant=\"h1\" bold>Buttons</Typography>\n\n    <Typography variant=\"h2\">Contained (default)</Typography>\n\n    <Button>Primary</Button>\n    <Button color=\"secondary\">Secondary</Button>\n    <Button color=\"danger\">Danger</Button>\n    <Button disabled>Disabled</Button>\n\n    <Typography variant=\"h2\">Outlined</Typography>\n\n    <Button variant=\"outlined\">Primary</Button>\n    <Button variant=\"outlined\" color=\"secondary\">Secondary</Button>\n    <Button variant=\"outlined\" color=\"danger\">Danger</Button>\n    <Button variant=\"outlined\" disabled>Disabled</Button>\n\n    <Typography variant=\"h2\">Ghost</Typography>\n\n    <Button variant=\"ghost\">Primary</Button>\n    <Button variant=\"ghost\" color=\"secondary\">Secondary</Button>\n    <Button variant=\"ghost\" color=\"danger\">Danger</Button>\n    <Button variant=\"ghost\" disabled>Disabled</Button>\n  </>\n)\n\nrender(<App />, document.getElementById('root'))\n```\n\n\n## Components\n\n### Available ✅\n\n- Accordion\n- Banner\n- Breadcrumbs\n- Button\n- Cards\n- Chips\n- Dialog\n- Divider\n- Icon\n- List\n- Menu\n- Pagination\n- Popover\n- Progress indicators\n- Scrim\n- Search\n- Select (Native Select)\n- Single Select\n- Multi Select\n- Selection Controls\n- Side Sheet\n- Slider\n- Snackbar\n- Table\n- Table of contents\n- Tabs\n- TextField\n- Tooltip\n- TopBar\n- Typography\n\n### In progress 👷‍♀️\n\n- Navigation Drawer\n\n### TODO 🛠️\n\n- App launcher\n- Stepper\n\n"
 }

package/dist/types/components/Combobox/Combobox.d.ts

@@ -1,55 +0,0 @@
-import { SelectHTMLAttributes } from 'react';
-export declare type ComboboxChanges = {
-    selectedItems: string[];
-    inputValue: string;
-};
-export declare type ComboboxProps = {
-    /** List of options to choose from */
-    items: string[];
-    /** Label for the select element */
-    label: string;
-    /** Array of initial selected items */
-    initialSelectedItems?: string[];
-    /** Meta text, for instance unit */
-    meta?: string;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Read Only */
-    readOnly?: boolean;
-    /** If this prop is used, the select will become a controlled component. Use an empty
-     * array [] if there will be no initial selected items
-     * Note that this prop replaces the need for ```initialSelectedItems```
-     * The items that should be selected. */
-    selectedOptions?: string[];
-    /** Callback for the selected item change
-     * changes.selectedItem gives the selected item
-     */
-    handleSelectedItemsChange?: (changes: ComboboxChanges) => void;
-    /** Enable multiselect */
-    multiple?: boolean;
-} & SelectHTMLAttributes<HTMLSelectElement>;
-export declare const Combobox: import("react").ForwardRefExoticComponent<{
-    /** List of options to choose from */
-    items: string[];
-    /** Label for the select element */
-    label: string;
-    /** Array of initial selected items */
-    initialSelectedItems?: string[];
-    /** Meta text, for instance unit */
-    meta?: string;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Read Only */
-    readOnly?: boolean;
-    /** If this prop is used, the select will become a controlled component. Use an empty
-     * array [] if there will be no initial selected items
-     * Note that this prop replaces the need for ```initialSelectedItems```
-     * The items that should be selected. */
-    selectedOptions?: string[];
-    /** Callback for the selected item change
-     * changes.selectedItem gives the selected item
-     */
-    handleSelectedItemsChange?: (changes: ComboboxChanges) => void;
-    /** Enable multiselect */
-    multiple?: boolean;
-} & SelectHTMLAttributes<HTMLSelectElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Combobox/Combobox.tokens.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentToken } from '@equinor/eds-tokens';
-export declare const selectTokens: ComponentToken;
-export declare const multiSelect: ComponentToken;

package/dist/types/components/Combobox/index.d.ts

@@ -1 +0,0 @@
-export * from './Combobox';