@epilot/base-elements 2.7.11-alpha.0 → 2.7.11

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.7.11](https://gitlab.com/e-pilot/frontend/base/elements/compare/v2.7.8-alpha.0...v2.7.11) (2022-05-19)
+
 ### [2.7.11-alpha.0](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v2.7.10...v2.7.11-alpha.0) (2022-04-28)
 
 ### [2.7.10](https://gitlab.com/e-pilot/product/frontend/base/elements/compare/v2.7.10-alpha.0...v2.7.10) (2022-04-28)

package/README.md

@@ -2,75 +2,67 @@
 
 General purpose React components for epilot UI elements.
 
-Based on [Material UI](https://material-ui.com/)
-
-## Usage
-
-See [Epilot Elements Library Storybook](https://base-elements.dev.epilot.io/?path=/story/welcome-getting-started-guide--page)
-
-## Contributing
-
-This package is shared across multiple epilot frontend projects. Please keep the components simple and general purpose.
-
-Discussion on changes happens on #ui-standards-team.
-
-PRs welcome! Please follow our [code review guideline](https://e-pilot.atlassian.net/wiki/spaces/EO/pages/2445541397/Code+Reviews).
+[base-elements.dev.epilot.io](https://base-elements.dev.epilot.io/)
 
-## Project base
-
-Project is Setup with: 
-
-- https://github.com/formium/tsdx
-- https://github.com/storybookjs/storybook
-
-## Developer instructions
-
-### Requirements
-
-- node.js (12/14 recommended)
-- yarn
+Based on [Material UI](https://material-ui.com/)
 
-### Development
+## Quick start
 
 ```bash
-git clone git@gitlab.com:e-pilot/frontend/base/elements.git
-cd elements
 yarn
-yarn test
+yarn start
 ```
 
-#### Storybook
+## Storybook
 
 ```bash
 yarn run storybook
 yarn run build-storybook
 ```
 
-#### Build / Watch
+## Contributing MDX (markdown documentation)
 
-```bash
-yarn run start # watch changes and rebuild
-yarn run build
-```
+Add a `.stories.mdx` file alongside the story (example: [stories/Progress.design.stories.mdx](stories/Progress.design.stories.mdx))
 
-#### Other Useful Scripts
+Add a `<Meta>` tag as follows:
 
-```bash
-yarn run
+```jsx
+import { Meta } from '@storybook/addon-docs';
+import { Progress } from '../src'
+
+<Meta
+  title="Elements/Feedback/Progress/Design"
+  component={Progress}
+/>
 ```
 
-### New Release
+Pass the `component` you're documenting, as well as a `title` according to where you want your story to show up in navigation:
 
-Create a Tag on master with
+![Example navigation](public/img/navi-example.png)
 
-```bash
-yarn release
-```
+You can then add your documentation with markdown, embedded stories and images, as shown in this [full example](stories/Progress.design.stories.mdx):
 
-### Branch URL Access
+```jsx
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Progress } from '../src'
 
-Every push to feature branches generate a endpoint to access the storybook in our development environment like this:
+<Meta
+  title="Elements/Feedback/Progress/Design"
+  component={Progress}
+/>
 
-- `https://base-elements--<branch_name>.dev.epilot.io`
-    - If your <branch_name> have `/`, just switch for `-`
-    - Example: `feat/somefeature` --> `https://base-elements--feat-somefeature.dev.epilot.io`
+# Progress Indicator
+
+Embedded story
+<Canvas>
+  <Story id="elements-feedback-progress--circular-progress-indeterminade-story" />
+</Canvas>
+
+Here is an image using Markdown:
+
+![My image](/img/progress-image-demo.png)
+
+Here is an image using MDX:
+
+<img src="/img/progress-image-demo.png" alt="My image" />
+```

package/dist/Drawer360/types.d.ts

@@ -1,9 +1,9 @@
 import { DrawerProps as MuiDrawerProps } from '@material-ui/core';
 import React from 'react';
-export declare type Drawer360Props = Omit<MuiDrawerProps, 'anchor' | 'elevation' | 'variant' | 'transitionDuration'> & {
+export declare type Drawer360Props = Omit<MuiDrawerProps, 'anchor' | 'elevation' | 'variant' | 'transitionDuration' | 'title'> & {
     responsive?: boolean;
     size?: 'one-third' | 'two-thirds' | 'max-width';
-    title: string;
+    title?: React.ReactNode;
     unsavedChanges?: boolean;
     onSave?: (_: React.MouseEvent) => void;
     onDiscard?: (_: React.MouseEvent) => void;