@veeqo/ui 0.1.23 → 0.1.25

package/README.md

@@ -2,26 +2,27 @@
 
 ## Intro
 
-The frontend component library for reusable components in Veeqo which aim to reflect the [Veeqo Design System](https://www.figma.com/file/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?type=design&node-id=8067-38719&mode=design&t=v1hqIzanCtyYARwt-0). When possible we should aim to re-use components in this library all over the frontend and reduce the amount of custom components we create to reduce bundle size.
+The frontend component library for reusable components in Veeqo which aim to reflect the [Veeqo Design System](https://www.figma.com/file/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?type=design&node-id=8067-38719&mode=design&t=v1hqIzanCtyYARwt-0). When possible we should aim to re-use components in this library all over the frontend and reduce the amount of custom components we create.
 
-This library has been re-written and refactored with the aims of enable tree-shaking which will allow us to reduce our bundle size and decrease page load times while also simplifying the library making it easier to work with and develop.
+**Performance**: This library has been re-written and refactored with the aims of enable tree-shaking which will allow us to reduce our bundle size and decrease page load times while also simplifying the library making it easier to work with and develop.
 
-Icons and Integrations **WILL** been moved:
+In the longer term Icons and Integrations **WILL** be moved to their own library, but currently live in [veeqo-frontend](https://github.com/veeqo/veeqo-frontend/). _For now please use individual icons to preserve tree shaking, while downstream uses can use the old component library Glyph component if needed (not tree shakable, huge size)._
 
-- Icons now live in [@veeqo/icons](https://www.npmjs.com/package/@veeqo/icons).
-- Our Integrations now live in [@veeqo/integrations](https://www.npmjs.com/package/@veeqo/integrations).
+### Links ⚓️
 
-_For now please use individual icons to preserve tree shaking, while downstream uses can use the old component library Glyph component if needed (not tree shakable, huge size)._
+**This Library**: [Storybook 📋](https://www.ui.veeqo.amazon.dev/?path=/docs/get-started-how-to-install--docs) | [Playroom 🛝](https://www.ui.veeqo.amazon.dev/playroom/)
+
+**Old Library**: [Storybook 📋](https://master.d1cz47hw90nvy2.amplifyapp.com/) | [Playroom 🛝](https://master.d1cz47hw90nvy2.amplifyapp.com/playroom)
 
 ## Getting Started
 
 Setup should be simple, clone the repo and use npm to install all dependencies.
 
-### Testing
+Start storybook with `npm run storybook`, and Playroom (including the storybook playroom integration) in a seperate terminal use `npm run playroom:start`.
 
-With this new library we aim to improve the quality of the code, and would like good test coverage of our components covering its main behaviour.
+### Testing
 
-Note:
+With this new library we aim to improve the quality of the code, and would like good test coverage of our components covering its main behaviour. Note:
 
 - We use [React testing library](https://testing-library.com/docs/react-testing-library/intro/).
 - Run tests with `npm run test`
@@ -29,61 +30,25 @@ Note:
 
 ### Prettier Setup
 
-Everything should mostly be setup already, if prettier isn't automatically formatting please check your `.vscode/settings.json` and adjust if needed (and remove from git).
+Everything should mostly be setup already, if prettier isn't automatically formatting please check your `.vscode/settings.json` and adjust if needed (don't push to git).
 
 You will need to install [ESlint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) VSCode Extensions, if you haven't already.
 
 ## Publishing to NPM
 
-_We currently deploy to NPM, which is an automated process once you merge._
+_We currently deploy to NPM, which is an **automated process** once you merge._
 
 ### Publishing
 
 Versioning will happen on the `package.json` version number, and is for the library as a whole instead of per component for simplicity.
 
-When have made a change you want published, use `npm run patch` or `npm run minor` or `npm run major` depending on your changes:
+**After** you have made your changes, use `npm run patch` or `npm run minor` or `npm run major` according to the update size:
 
 - This create update the version number by the amount specified in the command you entered above.
 - **Create a git tag** for that version, making the version history straightward to look back on.
 - Update the changelog based on your commits.
 - Push this readme change upstream
 
-After this is done, merge your PR and GitHub actions will do the rest! If your version hasn't deployed within a few mins ([check here](https://www.npmjs.com/package/@veeqo/ui?activeTab=versions)), please reach out on slack.
-
-<details>
-  <summary>To publish beta versions...</summary>
-
-### Getting NPM Access
-
-#### 1. Register NPM and request package access
-
-In order to make sure you're not a random stranger to do the publish, you need to register your amazon account (email ending with @amazon.com) on [npm](https://www.npmjs.com/). And then create a ticket in this [system](https://t.corp.amazon.com/create) to request you permission to access Veeqo-FE package, using the following options to create this access request ticket.
-
-```
-Category (C)
-Veeqo
-
-Type (T)
-Access Provisioning
+**If you run the script more than once** we will have duplicate tags, which will ruin the changelog (easy to spot) and stop us using those versions in the future. Please use `npm tags:remove v<yourversion>` to remove the tag.
 
-Item (I)
-Access Requests
-```
-
-Ps: feel free to PM your manager about your access request too as sometimes they may miss the emails
-
-#### 2. Authenticate
-
-Once you've granted the access to Veeqo-FE package, make sure you have authenticated NPM and logged in with your account on your local machine.
-
-An easy way to do this is to run:
-
-```
-npm login
-```
-
-### Creating
-
-Publish off your branch, don't merge to master. Adjust the package.lock version number yourself before publishing and make sure to publish with a tag (to not update `latest`).
-
-</details>
+After this is done, merge your PR and GitHub actions will do the rest! If your version hasn't deployed within a few mins ([check here](https://www.npmjs.com/package/@veeqo/ui?activeTab=versions)), please reach out on slack.

package/dist/components/Accordion/Accordion.d.ts

@@ -6,7 +6,6 @@ export interface AccordionProps {
     glyphColor?: string;
     className?: string;
     timeout?: number;
-    transitionClassnames?: string;
     description?: string;
     shouldOpenOnMount?: boolean;
 }

package/dist/components/Accordion/styled.d.ts

@@ -4,11 +4,22 @@ declare const Left: import("styled-components").StyledComponent<"div", any, {
     glyphColor: string;
 }, never>;
 declare const Right: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
-declare const TapBar: import("styled-components").StyledComponent<"div", any, {
-    shouldOpen: boolean;
-}, never>;
+/**
+ * Due to unique behaviour observed in Safari, we override the outline property when
+ * the accordion is focussed.
+ */
+declare const AccordionSummary: import("styled-components").StyledComponent<"summary", any, {}, never>;
 declare const Top: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const Arrow: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
 declare const Description: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
-declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { Content, TapBar, Top, Text, Arrow, Left, Right, Description };
+declare const AccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}>, any, {}, never>;
+declare const AccordionDetails: import("styled-components").StyledComponent<"details", any, {}, never>;
+export { AccordionSummary, Top, Text, Left, Right, Description, AccordionDetails, AccordionContent, };