odaptos_design_system 2.0.5 → 2.0.7

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 Odaptos
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2023 Odaptos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,112 +1,112 @@
-# Odaptos Design System
-
-## Commands
-
-TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
-
-The recommended workflow is to run TSDX in one terminal:
-
-```bash
-npm start # or yarn start
-```
-
-This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
-
-Then run either Storybook or the example playground:
-
-### Storybook
-
-Run inside another terminal:
-
-```bash
-yarn storybook
-```
-
-This loads the stories from `./stories`.
-
-> NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.
-
-### Example
-
-Then run the example inside another:
-
-```bash
-cd example
-npm i # or yarn to install dependencies
-npm start # or yarn start
-```
-
-The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
-
-To do a one-off build, use `npm run build` or `yarn build`.
-
-To run tests, use `npm test` or `yarn test`.
-
-### Bundle analysis
-
-Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
-
-#### Setup Files
-
-This is the folder structure we set up for you:
-
-```txt
-/example
-  index.html
-  index.tsx       # test your component here in a demo app
-  package.json
-  tsconfig.json
-/src
-  index.tsx       # EDIT THIS
-/test
-  blah.test.tsx   # EDIT THIS
-/stories
-  Thing.stories.tsx # EDIT THIS
-/.storybook
-  main.js
-  preview.js
-.gitignore
-package.json
-README.md         # EDIT THIS
-tsconfig.json
-```
-
-### TypeScript
-
-`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
-
-## Named Exports
-
-Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
-
-## Publishing to NPM
-
-Are you connected to npm locally? Go directly to the next step.
-
-1/ To connect to npm from a terminal, follow these steps:
-
-Install Node.js and npm: If you haven't already installed Node.js, download and install the latest version from the official Node.js website. npm is usually installed automatically with Node.js.
-
-Open a terminal
-
-Login to npm: Use the following command to login to npm:
-
-`npm login`
-
-You will be prompted to enter your username, password and e-mail address. Be sure to use the correct credentials associated with your npm account.
-
-Once you've followed these steps, you should be connected to npm via your terminal. You can now publish packages, install packages from the npm registry, or perform other npm-related operations.
-
-2/ Publish the package
-`npm version minor / major / patch` -> For the moment, we're only using the 'patch'.
-`git push`
-`npm publish`
-
-For the moment, only m.trambert@odaptos.com & l.obriot@odaptos can publish the package.
-
-## How to use this package ?
-
-`npm install odaptos_design_system`
-And next just import the component like :
-`import { Button } from 'odaptos_design_system';`
-`<Button>Hello</Button>`
+# Odaptos Design System
+
+## Commands
+
+TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
+
+The recommended workflow is to run TSDX in one terminal:
+
+```bash
+npm start # or yarn start
+```
+
+This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
+
+Then run either Storybook or the example playground:
+
+### Storybook
+
+Run inside another terminal:
+
+```bash
+yarn storybook
+```
+
+This loads the stories from `./stories`.
+
+> NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.
+
+### Example
+
+Then run the example inside another:
+
+```bash
+cd example
+npm i # or yarn to install dependencies
+npm start # or yarn start
+```
+
+The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
+
+To do a one-off build, use `npm run build` or `yarn build`.
+
+To run tests, use `npm test` or `yarn test`.
+
+### Bundle analysis
+
+Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
+
+#### Setup Files
+
+This is the folder structure we set up for you:
+
+```txt
+/example
+  index.html
+  index.tsx       # test your component here in a demo app
+  package.json
+  tsconfig.json
+/src
+  index.tsx       # EDIT THIS
+/test
+  blah.test.tsx   # EDIT THIS
+/stories
+  Thing.stories.tsx # EDIT THIS
+/.storybook
+  main.js
+  preview.js
+.gitignore
+package.json
+README.md         # EDIT THIS
+tsconfig.json
+```
+
+### TypeScript
+
+`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
+
+## Named Exports
+
+Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
+
+## Publishing to NPM
+
+Are you connected to npm locally? Go directly to the next step.
+
+1/ To connect to npm from a terminal, follow these steps:
+
+Install Node.js and npm: If you haven't already installed Node.js, download and install the latest version from the official Node.js website. npm is usually installed automatically with Node.js.
+
+Open a terminal
+
+Login to npm: Use the following command to login to npm:
+
+`npm login`
+
+You will be prompted to enter your username, password and e-mail address. Be sure to use the correct credentials associated with your npm account.
+
+Once you've followed these steps, you should be connected to npm via your terminal. You can now publish packages, install packages from the npm registry, or perform other npm-related operations.
+
+2/ Publish the package
+`npm version minor / major / patch` -> For the moment, we're only using the 'patch'.
+`git push`
+`npm publish`
+
+For the moment, only m.trambert@odaptos.com & l.obriot@odaptos can publish the package.
+
+## How to use this package ?
+
+`npm install odaptos_design_system`
+And next just import the component like :
+`import { Button } from 'odaptos_design_system';`
+`<Button>Hello</Button>`

package/dist/odaptos_design_system.cjs.development.js

@@ -67,35 +67,6 @@ var css_248z = ".Accordion-modules_accordion__dz3L5{align-items:flex-start;backg
 var styles = {"accordion":"Accordion-modules_accordion__dz3L5","accordion_header":"Accordion-modules_accordion_header__lU2yY"};
 styleInject(css_248z);
 
-/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2760-23794&mode=dev  */
-const Accordion = ({
-  title,
-  children,
-  className,
-  icon,
-  ...props
-}) => {
-  const [isAccordionOpen, setIsAccordionOpen] = React.useState(false);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
-    className: `${styles.accordion} ${className ?? ''}`
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: styles.accordion_header,
-    onClick: () => setIsAccordionOpen(prev => !prev)
-  }, /*#__PURE__*/React__default.createElement(Text, {
-    size: "base",
-    text: title,
-    weight: "bold"
-  }), /*#__PURE__*/React__default.createElement(IconButton, {
-    variant: "tertiary",
-    icon: icon ? icon : /*#__PURE__*/React__default.createElement(ArrowLineDowIcon, {
-      style: {
-        transform: isAccordionOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-        transition: 'all 0.2s linear'
-      }
-    })
-  })), isAccordionOpen && /*#__PURE__*/React__default.createElement("div", null, children));
-};
-
 var css_248z$1 = ".Avatar-module_initialAvatar__RogI7{background:#e5f1ff}.Avatar-module_imgAvatar__9BC7p,.Avatar-module_initialAvatar__RogI7{align-items:center;border-radius:2.5rem;display:flex;height:2.5rem;justify-content:center;width:2.5rem}.Avatar-module_imgAvatar__9BC7p{background:transparent}.Avatar-module_imgAvatar__9BC7p img{border-radius:100%;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.Avatar-module_avatar_xs__6KODe{border-radius:1.5rem;height:1.5rem;max-height:1.5rem;max-width:1.5rem;min-height:1.5rem;min-width:1.5rem;width:1.5rem}.Avatar-module_avatar_sm__rGyel{border-radius:2rem;height:2rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;width:2rem}.Avatar-module_avatar_base__CetnR{border-radius:2.5rem;height:2.5rem;max-height:2.5rem;min-height:2.5rem;min-width:2.5rem;width:2.5rem}.Avatar-module_avatar_lg__WXo1U{border-radius:3rem;height:3rem;max-height:3rem;max-width:3rem;min-height:3rem;min-width:3rem;width:3rem}.Avatar-module_avatar_xl__i-QST{border-radius:3.5rem;height:3.5rem;max-height:3.5rem;max-width:3.5rem;min-height:3.5rem;min-width:3.5rem;width:3.5rem}";
 var styles$1 = {"initialAvatar":"Avatar-module_initialAvatar__RogI7","imgAvatar":"Avatar-module_imgAvatar__9BC7p","avatar_xs":"Avatar-module_avatar_xs__6KODe","avatar_sm":"Avatar-module_avatar_sm__rGyel","avatar_base":"Avatar-module_avatar_base__CetnR","avatar_lg":"Avatar-module_avatar_lg__WXo1U","avatar_xl":"Avatar-module_avatar_xl__i-QST"};
 styleInject(css_248z$1);
@@ -11913,6 +11884,7 @@ const ControlsBar = ({
     onClick: () => endInterview(),
     icon: /*#__PURE__*/React__default.createElement(HangUpIcon, null)
   }), !isInterviewer && screenShareText && enableScreenSharing && /*#__PURE__*/React__default.createElement(InterviewButton, {
+    id: "odaptos_screen_share",
     text: screenShareText,
     variant: "screenshare",
     icon: /*#__PURE__*/React__default.createElement(TvFlatScreenIcon, null),
@@ -14883,7 +14855,8 @@ const TabsUnderline = ({
         textTransform: 'none'
       },
       label: /*#__PURE__*/React__default.createElement("div", {
-        className: styles$M.tab_label_content
+        className: styles$M.tab_label_content,
+        id: item.id
       }, /*#__PURE__*/React__default.createElement(Title, {
         text: item.label,
         weight: value === index ? 'semi-bold' : 'regular',
@@ -14897,7 +14870,8 @@ const TabsUnderline = ({
     });
     if (item.disabled) {
       renderTab = /*#__PURE__*/React__default.createElement("div", {
-        className: styles$M.tab_label_content
+        className: styles$M.tab_label_content,
+        id: item.id
       }, /*#__PURE__*/React__default.createElement(Title, {
         key: `tab#${index}`,
         className: `${!isArrowIconDisplay ? styles$M.tab_label_replacement : styles$M.tab_label_replacement_icon} ${styles$M.disabled}`,
@@ -14919,6 +14893,7 @@ const TabsUnderline = ({
         placement: item.tooltipPlacement,
         arrow: true
       }, /*#__PURE__*/React__default.createElement("div", {
+        id: item.id,
         style: {
           width: 'fit-content',
           display: 'flex',
@@ -16439,6 +16414,35 @@ const UserIndicator = ({
   }));
 };
 
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2760-23794&mode=dev  */
+const Accordion = ({
+  title,
+  children,
+  className,
+  icon,
+  ...props
+}) => {
+  const [isAccordionOpen, setIsAccordionOpen] = React.useState(false);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    className: `${styles.accordion} ${className ?? ''}`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: styles.accordion_header,
+    onClick: () => setIsAccordionOpen(prev => !prev)
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    size: "base",
+    text: title,
+    weight: "bold"
+  }), /*#__PURE__*/React__default.createElement(IconButton, {
+    variant: "tertiary",
+    icon: icon ? icon : /*#__PURE__*/React__default.createElement(ArrowLineDowIcon, {
+      style: {
+        transform: isAccordionOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+        transition: 'all 0.2s linear'
+      }
+    })
+  })), isAccordionOpen && /*#__PURE__*/React__default.createElement("div", null, children));
+};
+
 exports.AI_UserTest = AI_UserTest;
 exports.Accordion = Accordion;
 exports.AccountIcon = AccountIcon;