@phase2/outline-docs
Advanced tools
Comparing version 0.0.9 to 0.0.10
@@ -1,3 +0,2 @@ | ||
declare const _default: {}; | ||
export default _default; | ||
export declare const outlineStories: string[]; | ||
//# sourceMappingURL=index.d.ts.map |
@@ -1,2 +0,2 @@ | ||
"use strict";(()=>{var e={};})(); | ||
"use strict";(()=>{var e=[`${__dirname}/src/guides/welcome.mdx`,`${__dirname}/src/guides/development/component-development/**/*.mdx`,`${__dirname}/src/guides/consumers/**/*.mdx`,`${__dirname}/src/guides/qa-uat/**/*.mdx`,`${__dirname}/src/guides/tooling/**/*.mdx`];})(); | ||
//# sourceMappingURL=index.js.map |
13
index.ts
@@ -1,1 +0,12 @@ | ||
export default {}; | ||
export const outlineStories = [ | ||
// Intentionally ordering welcome page first. | ||
`${__dirname}/src/guides/welcome.mdx`, | ||
// Component development guides. | ||
`${__dirname}/src/guides/development/component-development/**/*.mdx`, | ||
// Component usage guides. | ||
`${__dirname}/src/guides/consumers/**/*.mdx`, | ||
// QA/UAT usage guides. | ||
`${__dirname}/src/guides/qa-uat/**/*.mdx`, | ||
// Tooling usage guides. | ||
`${__dirname}/src/guides/tooling/**/*.mdx`, | ||
]; |
{ | ||
"name": "@phase2/outline-docs", | ||
"version": "0.0.9", | ||
"version": "0.0.10", | ||
"description": "Outline Documentation", | ||
@@ -26,3 +26,3 @@ "keywords": [ | ||
"scripts": { | ||
"build": "node ../../scripts/build.js", | ||
"build": "node ../../scripts/build.js && cp -r src dist", | ||
"package": "yarn publish" | ||
@@ -29,0 +29,0 @@ }, |
@@ -1,70 +0,33 @@ | ||
# outline-dropdown | ||
# outline-docs | ||
## Properties | ||
This provides a base set of documentation about Outline for projects to include in their storybook instances. | ||
| Property | Attribute | Type | Default | Description | | ||
|---------------------|-------------------|----------------------------|----------------------------------|--------------------------------------------------| | ||
| `containingElement` | | `HTMLElement \| undefined` | | The dropdown will close when the user interacts outside of this element (e.g. clicking). | | ||
| `hasDropdown` | | `boolean` | | | | ||
| `hasFooter` | | `boolean` | | | | ||
| `hasHeader` | | `boolean` | | | | ||
| `isDisabled` | `is-disabled` | `boolean` | false | Disables the dropdown so the panel will not open. | | ||
| `isLink` | | `boolean` | false | Determines if the dropdown trigger is a link or not. | | ||
| `isOpen` | `is-open` | `boolean` | false | Indicates whether or not the dropdown is open.<br />You can use this in lieu of the show/hide methods. | | ||
| `panel` | | `HTMLElement` | | | | ||
| `slots` | | `SlotController` | "new SlotController(this, true)" | | | ||
| `trigger` | | `HTMLElement` | | | | ||
| `triggerLabel` | `trigger-label` | `string` | | ARIA label attribute to pass down to the resulting button or a<br />element. This is required for accessibility if we use a button<br />with an icon only. | | ||
| `triggerTarget` | `trigger-target` | `LinkTargetType` | | The target to use for a link, used in conjunction with the url attribute. | | ||
| `triggerText` | `trigger-text` | `string` | | Visible text for the button/link of the trigger element. | | ||
| `triggerUrl` | `trigger-url` | `string` | | The url to use for a link. This will render an anchor element.<br />Do not set this prop if you want to render a button element. | | ||
| `triggerVariant` | `trigger-variant` | `ButtonVariant` | "link" | The button style variant to use. | | ||
The following shows a very minimal sample of how to get the included stories into your Storybook instance. | ||
## Methods | ||
Use it as a guide to modify your `src/.storybook/main.js` file or wherever your project is defining config for storybook. | ||
| Method | Type | Description | | ||
|---------------------------|--------------------------------------------------|----------------------------------------------| | ||
| `buttonTemplate` | `(): TemplateResult<ResultType> \| null` | Template partial for the "button" rendering. | | ||
| `dropdownTemplate` | `(): TemplateResult<ResultType> \| null` | Template partial for the dropdown rendering. | | ||
| `focusOnTrigger` | `(): void` | | | ||
| `footerTemplate` | `(): TemplateResult<ResultType> \| null` | Template partial for the footer rendering. | | ||
| `handleButtonTrigger` | `(event: KeyboardEvent): void` | | | ||
| `handleDocumentMouseDown` | `(event: MouseEvent): void` | | | ||
| `handleEnterKeyDown` | `(event: KeyboardEvent, isIcon?: boolean): void` | | | ||
| `handleEscKeyDown` | `(event: KeyboardEvent): void` | | | ||
| `handleFocusChange` | `(): void` | | | ||
| `handleHoverStyles` | `(): void` | | | ||
| `handleIconClick` | `(event: MouseEvent): void` | | | ||
| `handleIconTrigger` | `(event: KeyboardEvent): void` | | | ||
| `handleOpenChange` | `(): Promise<void>` | | | ||
| `handlePanelKeystrokes` | `(event: KeyboardEvent): void` | | | ||
| `headerTemplate` | `(): TemplateResult<ResultType> \| null` | Template partial for the header rendering. | | ||
| `hide` | `(): Promise<void>` | Hides the dropdown panel. | | ||
| `iconTemplate` | `(): TemplateResult<ResultType> \| null` | Template partial for the icon rendering. | | ||
| `iconWrapperTemplate` | `(): TemplateResult<ResultType> \| null` | Template partial for the icon rendering. | | ||
| `show` | `(): Promise<void>` | Shows the dropdown panel. | | ||
```js | ||
import {outlineStories} from '@phase2/outline-docs'; | ||
## Events | ||
| Event | Description | | ||
|----------------------|--------------------------------------------------| | ||
| `outline-after-hide` | Emitted after the dropdown closes and all animations are complete. | | ||
| `outline-after-show` | Emitted after the dropdown opens and all animations are complete. | | ||
| `outline-hide` | Emitted when the dropdown closes. | | ||
| `outline-show` | Emitted when the dropdown opens. | | ||
## Slots | ||
| Name | Description | | ||
|------------|--------------------------------------------------| | ||
| `dropdown` | Content to be rendered in the dropdown. | | ||
| `footer` | Content to be rendered in the footer of the dropdown. | | ||
| `header` | Content to be rendered in the header of the dropdown. | | ||
## CSS Shadow Parts | ||
| Part | Description | | ||
|-----------|--------------------------------------------------| | ||
| `base` | The component's base wrapper. | | ||
| `panel` | The panel that gets shown when the dropdown is open. | | ||
| `trigger` | The container that wraps the trigger. | | ||
module exports { | ||
features: { | ||
storyStoreV7: true, | ||
postcss: false, | ||
buildStoriesJson: true, | ||
modernInlineRender: true, | ||
}, | ||
framework: { | ||
name: '@storybook/web-components-vite', | ||
options: {}, | ||
}, | ||
docs: { | ||
autodocs: true, | ||
defaultName: 'Full Documentation', // set to change the name of generated docs entries | ||
}, | ||
stories: [ | ||
...outlineStories, | ||
'../components/**/*.stories.@(js|ts|mdx)', | ||
'./stories/!(guides|tokens|demonstration|examples)**/*.stories.@(js|jsx|ts|tsx|mdx)', | ||
], | ||
} | ||
``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Trivial Package
Supply chain riskPackages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.
Found 1 instance in 1 package
404136
36
16
0
34