mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-15 05:02:24 +08:00
Merge remote-tracking branch 'origin/next' into tom/sb-706-migrate-stories-and-delete-preact
This commit is contained in:
Tom Coleman
commit
cd3e6506af
@ -10,7 +10,7 @@ executors:
|
||||
default: 'medium'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: cimg/node:14.19
|
||||
- image: cimg/node:16.17.1
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=3076
|
||||
resource_class: <<parameters.class>>
|
||||
@ -23,7 +23,7 @@ executors:
|
||||
default: 'medium'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: cimg/node:14.19-browsers
|
||||
- image: cimg/node:16.17.1-browsers
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=3076
|
||||
resource_class: <<parameters.class>>
|
||||
@ -75,6 +75,22 @@ commands:
|
||||
fi
|
||||
|
||||
jobs:
|
||||
check:
|
||||
executor:
|
||||
class: xlarge
|
||||
name: sb_node_14_classic
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
- restore_cache:
|
||||
name: Restore Yarn cache
|
||||
keys:
|
||||
- build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
|
||||
- run:
|
||||
name: Compile
|
||||
command: |
|
||||
yarn task --task check --start-from=auto --no-link --debug
|
||||
git diff --exit-code
|
||||
build:
|
||||
executor:
|
||||
class: xlarge
|
||||
@ -410,6 +426,9 @@ workflows:
|
||||
- lint:
|
||||
requires:
|
||||
- build
|
||||
- check:
|
||||
requires:
|
||||
- build
|
||||
- examples:
|
||||
requires:
|
||||
- build
|
||||
@ -439,9 +458,9 @@ workflows:
|
||||
- create-sandboxes:
|
||||
requires:
|
||||
- publish
|
||||
- smoke-test-sandboxes:
|
||||
requires:
|
||||
- create-sandboxes
|
||||
# - smoke-test-sandboxes: # disabled for now
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
- build-sandboxes:
|
||||
requires:
|
||||
- create-sandboxes
|
||||
|
||||
25
.github/autolabeler.yml
vendored
25
.github/autolabeler.yml
vendored
@ -1,25 +0,0 @@
|
||||
'addon: a11y': ['addons/a11y/**']
|
||||
'addon: actions': ['addons/actions/**']
|
||||
'addon: backgrounds': ['addons/backgrounds/**']
|
||||
'addon: events ': ['addons/events/**']
|
||||
'addon: graphql ': ['addons/graphql/**']
|
||||
'addon: info': ['addons/info/**']
|
||||
'addon: jest': ['addons/jest/**']
|
||||
'addon: knobs': ['addons/knobs/**']
|
||||
'addon: links': ['addons/links/**']
|
||||
'addon: notes': ['addons/notes/**']
|
||||
'addon: options': ['addons/options/**']
|
||||
'addon: storyshots': ['addons/storyshots/**']
|
||||
'addon: viewport': ['addons/viewport/**']
|
||||
'app: angular': ['app/angular/**']
|
||||
'app: preact': ['app/preact/**']
|
||||
'app: rax': ['app/rax/**']
|
||||
'app: react': ['app/react/**']
|
||||
'app: vue': ['app/vue/**']
|
||||
'app: svelte': ['app/svelte/**']
|
||||
'app: mithril': ['app/mithril/**']
|
||||
'babel / webpack': ['webpack', 'babel']
|
||||
'cli': ['lib/cli/**']
|
||||
'compatibility with other tools': []
|
||||
'documentation': ['docs', '*.md']
|
||||
'ui': ['lib/ui']
|
||||
2
.github/workflows/danger-js.yml
vendored
2
.github/workflows/danger-js.yml
vendored
@ -10,7 +10,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: '14'
|
||||
node-version: '16'
|
||||
- uses: actions/checkout@master
|
||||
- name: Danger JS
|
||||
uses: danger/danger-js@10.9.0
|
||||
|
||||
4
.github/workflows/generate-repros-next.yml
vendored
4
.github/workflows/generate-repros-next.yml
vendored
@ -17,7 +17,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 14
|
||||
node-version: 16
|
||||
- uses: actions/checkout@v2
|
||||
- name: Setup git user
|
||||
run: |
|
||||
@ -25,7 +25,7 @@ jobs:
|
||||
git config --global user.email "bot@storybook.js.org"
|
||||
- name: Install dependencies
|
||||
run: node ./scripts/check-dependencies.js
|
||||
- name: Bootstrap Storybook libraries
|
||||
- name: Compile Storybook libraries
|
||||
run: yarn task --task publish --start-from=auto --no-link
|
||||
- name: Generate repros
|
||||
run: yarn generate-repros-next --local-registry
|
||||
|
||||
2
.github/workflows/generate-repros.yml
vendored
2
.github/workflows/generate-repros.yml
vendored
@ -17,7 +17,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 14
|
||||
node-version: 16
|
||||
- uses: actions/checkout@v2
|
||||
- name: Setup git user
|
||||
run: |
|
||||
|
||||
2
.github/workflows/tests-unit.yml
vendored
2
.github/workflows/tests-unit.yml
vendored
@ -15,7 +15,7 @@ jobs:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
os: [ubuntu-latest]
|
||||
node_version: [14, 16]
|
||||
node_version: [16]
|
||||
include:
|
||||
- os: macos-latest
|
||||
node_version: 16
|
||||
|
||||
@ -106,7 +106,7 @@ export const A11YPanel: React.FC = () => {
|
||||
'Rerun tests'
|
||||
) : (
|
||||
<>
|
||||
<Icon inline icon="check" /> Tests completed
|
||||
<Icon icon="check" /> Tests completed
|
||||
</>
|
||||
),
|
||||
onClick: handleManual,
|
||||
@ -162,8 +162,7 @@ export const A11YPanel: React.FC = () => {
|
||||
)}
|
||||
{status === 'running' && (
|
||||
<Centered>
|
||||
<RotatingIcon inline icon="sync" /> Please wait while the accessibility scan is running
|
||||
...
|
||||
<RotatingIcon icon="sync" /> Please wait while the accessibility scan is running ...
|
||||
</Centered>
|
||||
)}
|
||||
{(status === 'ready' || status === 'ran') && (
|
||||
|
||||
@ -4,11 +4,13 @@ import userEvent from '@testing-library/user-event';
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
import { VisionSimulator, baseList } from './VisionSimulator';
|
||||
|
||||
const getOptionByNameAndPercentage = (option: string, percentage: number) =>
|
||||
const getOptionByNameAndPercentage = (option: string, percentage?: number) =>
|
||||
screen.getByText(
|
||||
(content, element) =>
|
||||
content !== '' &&
|
||||
// @ts-expect-error (TODO)
|
||||
element.textContent === option &&
|
||||
// @ts-expect-error (TODO)
|
||||
(percentage === undefined || element.nextSibling.textContent === `${percentage}% of users`)
|
||||
);
|
||||
|
||||
@ -60,9 +62,11 @@ describe('Vision Simulator', () => {
|
||||
.filter(({ cssRules }) => cssRules)
|
||||
.map(({ cssRules }) => Object.values(cssRules))
|
||||
.flat()
|
||||
// @ts-expect-error (TODO)
|
||||
.find((cssRule: CSSRule) => cssRule.selectorText === '#storybook-preview-iframe');
|
||||
|
||||
expect(rule).toBeDefined();
|
||||
// @ts-expect-error (TODO)
|
||||
expect(rule.style.filter).toBe('blur(2px)');
|
||||
});
|
||||
});
|
||||
|
||||
@ -35,7 +35,7 @@ describe('A11yManager', () => {
|
||||
registrationImpl(api as unknown as api.API);
|
||||
const title = mockedAddons.add.mock.calls
|
||||
.map(([_, def]) => def)
|
||||
.find(({ type }) => type === 'panel').title as Function;
|
||||
.find(({ type }) => type === 'panel')?.title as Function;
|
||||
|
||||
// when / then
|
||||
expect(title()).toBe('Accessibility');
|
||||
@ -47,7 +47,7 @@ describe('A11yManager', () => {
|
||||
registrationImpl(mockedApi);
|
||||
const title = mockedAddons.add.mock.calls
|
||||
.map(([_, def]) => def)
|
||||
.find(({ type }) => type === 'panel').title as Function;
|
||||
.find(({ type }) => type === 'panel')?.title as Function;
|
||||
|
||||
// when / then
|
||||
expect(title()).toBe('Accessibility (3)');
|
||||
|
||||
@ -29,7 +29,7 @@ export const Options = {
|
||||
|
||||
export const Config = {
|
||||
args: {
|
||||
contents:
|
||||
content:
|
||||
'<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
|
||||
},
|
||||
parameters: {
|
||||
@ -45,7 +45,7 @@ export const Config = {
|
||||
|
||||
export const Targetted = {
|
||||
args: {
|
||||
contents: '<button class="custom-target">Click Me!</button>',
|
||||
content: '<button class="custom-target">Click Me!</button>',
|
||||
},
|
||||
parameters: {
|
||||
a11y: {
|
||||
|
||||
@ -1,15 +1,8 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"types": ["jest", "@testing-library/jest-dom"],
|
||||
"strict": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": [
|
||||
"src/**/*.test.*",
|
||||
"src/**/tests/**/*",
|
||||
"src/**/__tests__/**/*",
|
||||
"src/**/*.stories.*",
|
||||
"src/**/*.mockdata.*",
|
||||
"src/**/__testfixtures__/**"
|
||||
]
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
"devDependencies": {
|
||||
"@storybook/jest": "^0.0.10",
|
||||
"@storybook/testing-library": "0.0.14-next.0",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/node": "^16.0.0",
|
||||
"formik": "^2.2.9",
|
||||
"typescript": "~4.6.3"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable jest/no-standalone-expect */
|
||||
import React from 'react';
|
||||
import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
|
||||
import type { StoryObj, Meta } from '@storybook/react';
|
||||
import { CallStates } from '@storybook/instrumenter';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { userEvent, within, waitFor } from '@storybook/testing-library';
|
||||
@ -25,7 +25,7 @@ const StyledWrapper = styled.div(({ theme }) => ({
|
||||
|
||||
const interactions = getInteractions(CallStates.DONE);
|
||||
|
||||
export default {
|
||||
const meta = {
|
||||
title: 'Addons/Interactions/InteractionsPanel',
|
||||
component: InteractionsPanel,
|
||||
decorators: [
|
||||
@ -52,9 +52,11 @@ export default {
|
||||
// prop for the AddonPanel used as wrapper of Panel
|
||||
active: true,
|
||||
},
|
||||
} as ComponentMeta<typeof InteractionsPanel>;
|
||||
} as Meta<typeof InteractionsPanel>;
|
||||
|
||||
type Story = ComponentStoryObj<typeof InteractionsPanel>;
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Passing: Story = {
|
||||
args: {
|
||||
|
||||
@ -139,4 +139,10 @@ export const getCalls = (finalStatus: CallStates) => {
|
||||
export const getInteractions = (finalStatus: CallStates) =>
|
||||
getCalls(finalStatus)
|
||||
.filter((call) => call.interceptable)
|
||||
.map((call) => ({ ...call, childCallIds: [], isCollapsed: false, toggleCollapsed: () => {} }));
|
||||
.map((call) => ({
|
||||
...call,
|
||||
childCallIds: [],
|
||||
isCollapsed: false,
|
||||
isHidden: false,
|
||||
toggleCollapsed: () => {},
|
||||
}));
|
||||
|
||||
@ -246,8 +246,6 @@ Default.parameters = {
|
||||
};
|
||||
```
|
||||
|
||||
##### Example [here](https://github.com/storybookjs/storybook/tree/main/examples/angular-cli)
|
||||
|
||||
## Available options
|
||||
|
||||
- **options.results**: OBJECT jest output results. _mandatory_
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
# Editor configuration, see http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
@ -1 +0,0 @@
|
||||
STORYBOOK_EXAMPLE_APP=true
|
||||
@ -1 +0,0 @@
|
||||
addon-jest.testresults.json
|
||||
@ -1,15 +0,0 @@
|
||||
const ignore = 0;
|
||||
|
||||
module.exports = {
|
||||
overrides: [
|
||||
{
|
||||
files: ['./src/stories/addon-jest.stories.ts'],
|
||||
rules: {
|
||||
'import/no-useless-path-segments': ignore,
|
||||
},
|
||||
settings: {
|
||||
'import/core-modules': ['../../addon-jest.testresults.json'],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
43
code/examples/angular-cli/.gitignore
vendored
43
code/examples/angular-cli/.gitignore
vendored
@ -1,43 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
documentation.json
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@ -1,41 +0,0 @@
|
||||
const mainConfig: import('@storybook/angular').StorybookConfig = {
|
||||
stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
|
||||
logLevel: 'debug',
|
||||
addons: [
|
||||
'@storybook/addon-docs',
|
||||
'@storybook/addon-controls',
|
||||
'@storybook/addon-storysource',
|
||||
'@storybook/addon-actions',
|
||||
'@storybook/addon-viewport',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-jest',
|
||||
'@storybook/addon-backgrounds',
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-toolbars',
|
||||
'@storybook/addon-highlight',
|
||||
],
|
||||
core: {
|
||||
channelOptions: { allowFunction: false, maxDepth: 10 },
|
||||
disableTelemetry: true,
|
||||
},
|
||||
staticDirs: [
|
||||
'../src/assets',
|
||||
// reproduction of https://github.com/storybookjs/storybook/issues/16732
|
||||
{ from: '../src/assets/a', to: 'assets' },
|
||||
{ from: '../src/assets/b', to: 'assets/b' },
|
||||
],
|
||||
features: {
|
||||
buildStoriesJson: false,
|
||||
breakingChangesV7: false,
|
||||
storyStoreV7: false,
|
||||
},
|
||||
framework: {
|
||||
name: '@storybook/angular',
|
||||
options: {
|
||||
enableIvy: true,
|
||||
enableNgcc: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
module.exports = mainConfig;
|
||||
@ -1,55 +0,0 @@
|
||||
/* eslint-disable import/extensions, import/no-unresolved */
|
||||
import { setCompodocJson } from '@storybook/addon-docs/angular';
|
||||
import addCssWarning from '../src/cssWarning';
|
||||
|
||||
import docJson from '../documentation.json';
|
||||
// remove ButtonComponent to test #12009
|
||||
const filtered = !docJson?.components
|
||||
? docJson
|
||||
: {
|
||||
...docJson,
|
||||
components: docJson.components.filter((c) => c.name !== 'ButtonComponent'),
|
||||
};
|
||||
setCompodocJson(filtered);
|
||||
|
||||
addCssWarning();
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
},
|
||||
options: {
|
||||
storySort: {
|
||||
order: ['Welcome', 'Core ', 'Addons ', 'Basics '],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const globalTypes = {
|
||||
theme: {
|
||||
name: 'Theme',
|
||||
description: 'Global theme for components',
|
||||
defaultValue: 'light',
|
||||
toolbar: {
|
||||
icon: 'paintbrush',
|
||||
items: [
|
||||
{ value: 'light', title: 'Light theme' },
|
||||
{ value: 'dark', title: 'Dark theme' },
|
||||
],
|
||||
},
|
||||
},
|
||||
locale: {
|
||||
name: 'Locale',
|
||||
description: 'Internationalization locale',
|
||||
defaultValue: 'en',
|
||||
toolbar: {
|
||||
icon: 'globe',
|
||||
items: [
|
||||
{ value: 'en', right: '🇺🇸', title: 'English' },
|
||||
{ value: 'es', right: '🇪🇸', title: 'Español' },
|
||||
{ value: 'zh', right: '🇨🇳', title: '中文' },
|
||||
{ value: 'kr', right: '🇰🇷', title: '한국어' },
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"extends": "../tsconfig.app.json",
|
||||
"exclude": ["../src/karma.ts", "../src/**/*.spec.ts"],
|
||||
"include": ["../src/**/*", "preview.ts"],
|
||||
"compilerOptions": {
|
||||
"types": ["@testing-library/jest-dom"]
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
# AngularCli
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.0.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Jest](https://facebook.github.io/jest/).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
||||
@ -1,134 +0,0 @@
|
||||
{
|
||||
/* angular.json can have comments */
|
||||
// angular.json can have comments
|
||||
"$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"angular-cli": {
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"prefix": "app",
|
||||
"schematics": {},
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/angular-cli",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"assets": ["src/favicon.ico", "src/assets"],
|
||||
"styles": ["src/styles.css", "src/styles.scss"],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": ["src/commons"]
|
||||
},
|
||||
"scripts": [],
|
||||
"aot": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"buildOptimizer": false,
|
||||
"sourceMap": true,
|
||||
"optimization": false,
|
||||
"namedChunks": true
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": ""
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "angular-cli:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "angular-cli:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "angular-cli:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/karma.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.spec.json",
|
||||
"karmaConfig": "src/karma.conf.js",
|
||||
"styles": ["styles.css"],
|
||||
"scripts": [],
|
||||
"assets": ["src/favicon.ico", "src/assets"]
|
||||
}
|
||||
},
|
||||
"storybook": {
|
||||
"builder": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
"browserTarget": "angular-cli:build",
|
||||
"port": 4400
|
||||
}
|
||||
},
|
||||
"build-storybook": {
|
||||
"builder": "@storybook/angular:build-storybook",
|
||||
"options": {
|
||||
"browserTarget": "angular-cli:build"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"angular-cli-e2e": {
|
||||
"root": "e2e/",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "angular-cli:serve"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"without-browser-target": {
|
||||
"root": "",
|
||||
"projectType": "library",
|
||||
"architect": {
|
||||
"storybook": {
|
||||
"builder": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
"tsConfig": "tsconfig.app.json"
|
||||
}
|
||||
},
|
||||
"build-storybook": {
|
||||
"builder": "@storybook/angular:build-storybook",
|
||||
"options": {
|
||||
"tsConfig": "tsconfig.app.json"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "angular-cli"
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import path from 'path';
|
||||
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
|
||||
|
||||
jest.mock('./addon-jest.testresults.json', () => ({}), { virtual: true });
|
||||
jest.mock('./documentation.json', () => ({}), { virtual: true });
|
||||
jest.mock('./environments/environment', () => ({}), { virtual: true });
|
||||
|
||||
initStoryshots({
|
||||
framework: 'angular',
|
||||
integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },
|
||||
configPath: path.join(__dirname, '.storybook'),
|
||||
test: multiSnapshotWithOptions(),
|
||||
});
|
||||
@ -1,16 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import { AppPage } from './app.po';
|
||||
import 'jasmine';
|
||||
|
||||
describe('ng5test App', () => {
|
||||
let page: AppPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new AppPage();
|
||||
});
|
||||
|
||||
it('should display welcome message', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText() as any).toEqual('Welcome to app!');
|
||||
});
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
import { browser, by, element } from 'protractor';
|
||||
|
||||
export class AppPage {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getParagraphText() {
|
||||
return element(by.css('storybook-app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"baseUrl": "./",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": ["jasmine", "jasminewd2", "node"]
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
/* eslint-disable no-return-assign */
|
||||
const mock = () => {
|
||||
let storage = {};
|
||||
return {
|
||||
getItem: (key) => (key in storage ? storage[key] : null),
|
||||
setItem: (key, value) => (storage[key] = value || ''),
|
||||
removeItem: (key) => delete storage[key],
|
||||
clear: () => (storage = {}),
|
||||
};
|
||||
};
|
||||
Object.defineProperty(window, 'localStorage', {
|
||||
value: mock(),
|
||||
});
|
||||
Object.defineProperty(window, 'sessionStorage', {
|
||||
value: mock(),
|
||||
});
|
||||
Object.defineProperty(window, 'getComputedStyle', {
|
||||
value: () => ['-webkit-appearance'],
|
||||
});
|
||||
@ -1,4 +0,0 @@
|
||||
import 'jest-preset-angular/setup-jest';
|
||||
import './globalMocks';
|
||||
|
||||
require('@storybook/babel-plugin-require-context-hook/register')();
|
||||
@ -1,7 +0,0 @@
|
||||
/* eslint-disable import/extensions */
|
||||
const base = require('./jest.config.js');
|
||||
|
||||
module.exports = {
|
||||
...base,
|
||||
testPathIgnorePatterns: ['/node_modules/', '/storybook-static/', 'angularshots.test.js', 'dist'],
|
||||
};
|
||||
@ -1,35 +0,0 @@
|
||||
const path = require('path');
|
||||
const config = require('../../jest.config');
|
||||
|
||||
const projectDir = path.join(__dirname, '../../');
|
||||
|
||||
module.exports = {
|
||||
preset: 'jest-preset-angular',
|
||||
globals: {
|
||||
'ts-jest': {
|
||||
tsconfig: path.join(__dirname, 'src/tsconfig.spec.json'),
|
||||
stringifyContentPathRegex: '\\.html$',
|
||||
astTransformers: {
|
||||
before: [
|
||||
'jest-preset-angular/build/InlineFilesTransformer',
|
||||
'jest-preset-angular/build/StripStylesTransformer',
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
roots: [__dirname],
|
||||
transform: {
|
||||
'^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
|
||||
'^.+\\.(ts|html)$': 'ts-jest',
|
||||
'^.+\\.jsx?$': path.join(projectDir, '../scripts/utils/jest-transform-js.js'),
|
||||
'^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
|
||||
},
|
||||
moduleFileExtensions: [...config.moduleFileExtensions, 'html'],
|
||||
snapshotSerializers: [
|
||||
'jest-preset-angular/build/serializers/html-comment',
|
||||
'jest-preset-angular/build/serializers/ng-snapshot',
|
||||
'jest-preset-angular/build/serializers/no-ng-attributes',
|
||||
],
|
||||
setupFilesAfterEnv: ['./jest-config/setup.ts'],
|
||||
testPathIgnorePatterns: ['app.component.spec.ts'],
|
||||
};
|
||||
@ -1,84 +0,0 @@
|
||||
{
|
||||
"name": "angular-cli",
|
||||
"version": "7.0.0-alpha.37",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"workspaces": {
|
||||
"nohoist": [
|
||||
"**"
|
||||
]
|
||||
},
|
||||
"scripts": {
|
||||
"build": "ng build",
|
||||
"build-storybook": "yarn storybook-prebuild && ng run angular-cli:build-storybook",
|
||||
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
|
||||
"e2e": "ng e2e",
|
||||
"postinstall": "ngcc --source ../../node_modules",
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"storybook": "yarn storybook-prebuild && ng run angular-cli:storybook",
|
||||
"storybook-prebuild": "yarn test:generate-output",
|
||||
"test": "jest",
|
||||
"test:coverage": "jest --coverage",
|
||||
"test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true",
|
||||
"test:watch": "jest --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/common": "^13.3.6",
|
||||
"@angular/compiler": "^13.3.6",
|
||||
"@angular/core": "^13.3.6",
|
||||
"@angular/forms": "^13.3.6",
|
||||
"@angular/platform-browser": "^13.3.6",
|
||||
"@angular/platform-browser-dynamic": "^13.3.6",
|
||||
"@ngrx/store": "^13.2.0",
|
||||
"rxjs": "^6.6.7",
|
||||
"sass": "^1.43.4",
|
||||
"telejson": "^6.0.8",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^13.3.5",
|
||||
"@angular-devkit/core": "^13.3.5",
|
||||
"@angular/cli": "^13.3.5",
|
||||
"@angular/compiler-cli": "^13.3.6",
|
||||
"@angular/elements": "^13.3.6",
|
||||
"@compodoc/compodoc": "^1.1.18",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.37",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.37",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.37",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.37",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.37",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.37",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.37",
|
||||
"@storybook/addon-jest": "7.0.0-alpha.37",
|
||||
"@storybook/addon-links": "7.0.0-alpha.37",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.37",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.37",
|
||||
"@storybook/addons": "7.0.0-alpha.37",
|
||||
"@storybook/angular": "7.0.0-alpha.37",
|
||||
"@storybook/babel-plugin-require-context-hook": "1.0.1",
|
||||
"@storybook/jest": "^0.0.10",
|
||||
"@storybook/source-loader": "7.0.0-alpha.37",
|
||||
"@storybook/testing-library": "0.0.14-next.0",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/node": "^14.14.20 || ^16.0.0",
|
||||
"@types/sass": "^1",
|
||||
"@webcomponents/custom-elements": "^1.4.3",
|
||||
"global": "^4.4.0",
|
||||
"jasmine-core": "~3.6.0",
|
||||
"jasmine-spec-reporter": "~5.0.2",
|
||||
"jest": "^26.6.3",
|
||||
"jest-preset-angular": "^8.3.2",
|
||||
"protractor": "~7.0.0",
|
||||
"storybook": "7.0.0-alpha.37",
|
||||
"storybook-addon-angular-ivy": "^0.0.1",
|
||||
"ts-jest": "^26.4.4",
|
||||
"ts-node": "^10.4.0",
|
||||
"typescript": "~4.6.3"
|
||||
},
|
||||
"storybook": {
|
||||
"chromatic": {
|
||||
"projectToken": "tl92yzsj6w"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
/*eslint-disable*/
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: ['./e2e/**/*.e2e-spec.ts'],
|
||||
capabilities: {
|
||||
browserName: 'chrome',
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print() {},
|
||||
},
|
||||
onPrepare() {
|
||||
require('ts-node').register({
|
||||
project: 'e2e/tsconfig.e2e.json',
|
||||
});
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
},
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
<!--The content below is only a placeholder and can be replaced.-->
|
||||
<div class="hide" style="color: red; font-size: 30px; text-align: center">
|
||||
This should be hidden, if not - scss is not loaded as needed.
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
<h1>Welcome to {{ title }}!</h1>
|
||||
<img
|
||||
width="300"
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
||||
/>
|
||||
</div>
|
||||
<h2>Here are some links to help you start:</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2>
|
||||
<a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a>
|
||||
</h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a target="_blank" href="https://blog.angular.io//">Angular blog</a></h2>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1,5 +0,0 @@
|
||||
$display: none;
|
||||
|
||||
.hide {
|
||||
display: $display;
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
import { TestBed, waitForAsync } from '@angular/core/testing';
|
||||
import { BrowserTestingModule } from '@angular/platform-browser/testing';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [BrowserTestingModule],
|
||||
declarations: [AppComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', waitForAsync(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
}));
|
||||
|
||||
it(`should have as title 'app'`, waitForAsync(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('app');
|
||||
}));
|
||||
|
||||
it('should render title in a h1 tag', waitForAsync(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
|
||||
}));
|
||||
});
|
||||
@ -1,13 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'storybook-app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss'],
|
||||
})
|
||||
export class AppComponent {
|
||||
/**
|
||||
* The name of your app
|
||||
*/
|
||||
title = 'app';
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AppComponent],
|
||||
imports: [BrowserModule],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
@ -1 +0,0 @@
|
||||
$color: green;
|
||||
@ -1,12 +0,0 @@
|
||||
import global from 'global';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
export default function addCssWarning() {
|
||||
const warning = document.createElement('h1');
|
||||
warning.textContent = 'CSS rules are not configured as needed';
|
||||
warning.className = 'css-rules-warning';
|
||||
warning.style.color = 'red';
|
||||
|
||||
document.body.insertBefore(warning, document.body.firstChild);
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
// The file contents for the current environment will overwrite these during build.
|
||||
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
|
||||
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
|
||||
// The list of which env maps to which file can be found in `.angular-cli.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
};
|
||||
@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Ng5test</title>
|
||||
<base href="/" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<storybook-app-root></storybook-app-root>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/dist/long-stack-trace-zone';
|
||||
// eslint-disable-next-line import/extensions
|
||||
import 'zone.js/dist/proxy.js';
|
||||
import 'zone.js/dist/sync-test';
|
||||
import 'zone.js/dist/jasmine-patch';
|
||||
import 'zone.js/dist/async-test';
|
||||
import 'zone.js/dist/fake-async-test';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting,
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
declare const __karma__: any;
|
||||
declare const require: any;
|
||||
|
||||
// Prevent Karma from running prematurely.
|
||||
__karma__.loaded = () => {};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
// Finally, start Karma to run the tests.
|
||||
__karma__.start();
|
||||
@ -1,14 +0,0 @@
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic()
|
||||
.bootstrapModule(AppModule)
|
||||
// eslint-disable-next-line
|
||||
.catch((err) => console.error(err));
|
||||
@ -1,52 +0,0 @@
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
||||
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/** *************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/** *************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
/** *************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
@ -1,61 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Welcome/ To Angular To Angular 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-app-root>
|
||||
<div
|
||||
class="hide"
|
||||
style="color: red; font-size: 30px; text-align: center;"
|
||||
>
|
||||
This should be hidden, if not - scss is not loaded as needed.
|
||||
|
||||
</div>
|
||||
<div
|
||||
style="text-align: center;"
|
||||
>
|
||||
<h1>
|
||||
Welcome to app!
|
||||
</h1>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
||||
width="300"
|
||||
/>
|
||||
</div>
|
||||
<h2>
|
||||
Here are some links to help you start:
|
||||
</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h2>
|
||||
<a
|
||||
href="https://angular.io/tutorial"
|
||||
target="_blank"
|
||||
>
|
||||
Tour of Heroes
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2>
|
||||
<a
|
||||
href="https://github.com/angular/angular-cli/wiki"
|
||||
target="_blank"
|
||||
>
|
||||
CLI Documentation
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2>
|
||||
<a
|
||||
href="https://blog.angular.io//"
|
||||
target="_blank"
|
||||
>
|
||||
Angular blog
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
</ul>
|
||||
</storybook-app-root>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,92 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-welcome-component>
|
||||
<main>
|
||||
<h1>
|
||||
Welcome to storybook
|
||||
</h1>
|
||||
<p>
|
||||
This is a UI component dev environment for your app.
|
||||
</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<span
|
||||
class="inline-code"
|
||||
>
|
||||
src/stories
|
||||
</span>
|
||||
directory.
|
||||
<br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you want.
|
||||
<br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<a
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
stories
|
||||
</a>
|
||||
for a component called
|
||||
<span
|
||||
class="inline-code"
|
||||
>
|
||||
Button
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories.
|
||||
<br />
|
||||
You can also edit those components and see changes right away.
|
||||
<br />
|
||||
(Try editing the
|
||||
<span
|
||||
class="inline-code"
|
||||
>
|
||||
Button
|
||||
</span>
|
||||
stories located at
|
||||
<span
|
||||
class="inline-code"
|
||||
>
|
||||
src/stories/index.js
|
||||
</span>
|
||||
.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.
|
||||
<br />
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p
|
||||
class="note"
|
||||
>
|
||||
<b>
|
||||
NOTE:
|
||||
</b>
|
||||
<br />
|
||||
Have a look at the
|
||||
<span
|
||||
class="inline-code"
|
||||
>
|
||||
.storybook/webpack.config.js
|
||||
</span>
|
||||
to add webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</main>
|
||||
</storybook-welcome-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,7 +0,0 @@
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="Addons / Readme" />
|
||||
|
||||
# Examples for Storybook addons
|
||||
|
||||
These examples can be used to check the correct operation of addons requiring a particular configuration for angular
|
||||
@ -1,896 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addons/Interactions Filled 1`] = `
|
||||
<storybook-wrapper>
|
||||
<hero-form>
|
||||
<div
|
||||
class="container"
|
||||
>
|
||||
<div>
|
||||
<h1>
|
||||
Hero Form
|
||||
</h1>
|
||||
<form
|
||||
class="ng-untouched ng-pristine ng-valid"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="name"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="name"
|
||||
name="name"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="name"
|
||||
ng-reflect-required=""
|
||||
required=""
|
||||
type="text"
|
||||
/>
|
||||
<div
|
||||
class="alert alert-danger"
|
||||
hidden=""
|
||||
>
|
||||
Name is required
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="alterEgo"
|
||||
>
|
||||
Alter Ego
|
||||
</label>
|
||||
<input
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="alterEgo"
|
||||
name="alterEgo"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="alterEgo"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="power"
|
||||
>
|
||||
Hero Power
|
||||
</label>
|
||||
<select
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="power"
|
||||
name="power"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="power"
|
||||
ng-reflect-required=""
|
||||
required=""
|
||||
>
|
||||
<option />
|
||||
<option
|
||||
ng-reflect-value="Really Smart"
|
||||
value="Really Smart"
|
||||
>
|
||||
Really Smart
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Super Flexible"
|
||||
value="Super Flexible"
|
||||
>
|
||||
Super Flexible
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Super Hot"
|
||||
value="Super Hot"
|
||||
>
|
||||
Super Hot
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Weather Changer"
|
||||
value="Weather Changer"
|
||||
>
|
||||
Weather Changer
|
||||
</option>
|
||||
|
||||
</select>
|
||||
<div
|
||||
class="alert alert-danger"
|
||||
hidden=""
|
||||
>
|
||||
Power is required
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-success"
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
hidden=""
|
||||
>
|
||||
<h2>
|
||||
You submitted the following:
|
||||
</h2>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Name
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-name"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Alter Ego
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-alterego"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Power
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-power"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</hero-form>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons/Interactions Invalid Fields 1`] = `
|
||||
<storybook-wrapper>
|
||||
<hero-form>
|
||||
<div
|
||||
class="container"
|
||||
>
|
||||
<div>
|
||||
<h1>
|
||||
Hero Form
|
||||
</h1>
|
||||
<form
|
||||
class="ng-untouched ng-pristine ng-valid"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="name"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="name"
|
||||
name="name"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="name"
|
||||
ng-reflect-required=""
|
||||
required=""
|
||||
type="text"
|
||||
/>
|
||||
<div
|
||||
class="alert alert-danger"
|
||||
hidden=""
|
||||
>
|
||||
Name is required
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="alterEgo"
|
||||
>
|
||||
Alter Ego
|
||||
</label>
|
||||
<input
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="alterEgo"
|
||||
name="alterEgo"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="alterEgo"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="power"
|
||||
>
|
||||
Hero Power
|
||||
</label>
|
||||
<select
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="power"
|
||||
name="power"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="power"
|
||||
ng-reflect-required=""
|
||||
required=""
|
||||
>
|
||||
<option />
|
||||
<option
|
||||
ng-reflect-value="Really Smart"
|
||||
value="Really Smart"
|
||||
>
|
||||
Really Smart
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Super Flexible"
|
||||
value="Super Flexible"
|
||||
>
|
||||
Super Flexible
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Super Hot"
|
||||
value="Super Hot"
|
||||
>
|
||||
Super Hot
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Weather Changer"
|
||||
value="Weather Changer"
|
||||
>
|
||||
Weather Changer
|
||||
</option>
|
||||
|
||||
</select>
|
||||
<div
|
||||
class="alert alert-danger"
|
||||
hidden=""
|
||||
>
|
||||
Power is required
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-success"
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
hidden=""
|
||||
>
|
||||
<h2>
|
||||
You submitted the following:
|
||||
</h2>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Name
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-name"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Alter Ego
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-alterego"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Power
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-power"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</hero-form>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons/Interactions Standard 1`] = `
|
||||
<storybook-wrapper>
|
||||
<hero-form>
|
||||
<div
|
||||
class="container"
|
||||
>
|
||||
<div>
|
||||
<h1>
|
||||
Hero Form
|
||||
</h1>
|
||||
<form
|
||||
class="ng-untouched ng-pristine ng-valid"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="name"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="name"
|
||||
name="name"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="name"
|
||||
ng-reflect-required=""
|
||||
required=""
|
||||
type="text"
|
||||
/>
|
||||
<div
|
||||
class="alert alert-danger"
|
||||
hidden=""
|
||||
>
|
||||
Name is required
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="alterEgo"
|
||||
>
|
||||
Alter Ego
|
||||
</label>
|
||||
<input
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="alterEgo"
|
||||
name="alterEgo"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="alterEgo"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="power"
|
||||
>
|
||||
Hero Power
|
||||
</label>
|
||||
<select
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="power"
|
||||
name="power"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="power"
|
||||
ng-reflect-required=""
|
||||
required=""
|
||||
>
|
||||
<option />
|
||||
<option
|
||||
ng-reflect-value="Really Smart"
|
||||
value="Really Smart"
|
||||
>
|
||||
Really Smart
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Super Flexible"
|
||||
value="Super Flexible"
|
||||
>
|
||||
Super Flexible
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Super Hot"
|
||||
value="Super Hot"
|
||||
>
|
||||
Super Hot
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Weather Changer"
|
||||
value="Weather Changer"
|
||||
>
|
||||
Weather Changer
|
||||
</option>
|
||||
|
||||
</select>
|
||||
<div
|
||||
class="alert alert-danger"
|
||||
hidden=""
|
||||
>
|
||||
Power is required
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-success"
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
hidden=""
|
||||
>
|
||||
<h2>
|
||||
You submitted the following:
|
||||
</h2>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Name
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-name"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Alter Ego
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-alterego"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Power
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-power"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</hero-form>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons/Interactions Submitted 1`] = `
|
||||
<storybook-wrapper>
|
||||
<hero-form>
|
||||
<div
|
||||
class="container"
|
||||
>
|
||||
<div>
|
||||
<h1>
|
||||
Hero Form
|
||||
</h1>
|
||||
<form
|
||||
class="ng-untouched ng-pristine ng-valid"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="name"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="name"
|
||||
name="name"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="name"
|
||||
ng-reflect-required=""
|
||||
required=""
|
||||
type="text"
|
||||
/>
|
||||
<div
|
||||
class="alert alert-danger"
|
||||
hidden=""
|
||||
>
|
||||
Name is required
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="alterEgo"
|
||||
>
|
||||
Alter Ego
|
||||
</label>
|
||||
<input
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="alterEgo"
|
||||
name="alterEgo"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="alterEgo"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="power"
|
||||
>
|
||||
Hero Power
|
||||
</label>
|
||||
<select
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="power"
|
||||
name="power"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="power"
|
||||
ng-reflect-required=""
|
||||
required=""
|
||||
>
|
||||
<option />
|
||||
<option
|
||||
ng-reflect-value="Really Smart"
|
||||
value="Really Smart"
|
||||
>
|
||||
Really Smart
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Super Flexible"
|
||||
value="Super Flexible"
|
||||
>
|
||||
Super Flexible
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Super Hot"
|
||||
value="Super Hot"
|
||||
>
|
||||
Super Hot
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Weather Changer"
|
||||
value="Weather Changer"
|
||||
>
|
||||
Weather Changer
|
||||
</option>
|
||||
|
||||
</select>
|
||||
<div
|
||||
class="alert alert-danger"
|
||||
hidden=""
|
||||
>
|
||||
Power is required
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-success"
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
hidden=""
|
||||
>
|
||||
<h2>
|
||||
You submitted the following:
|
||||
</h2>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Name
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-name"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Alter Ego
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-alterego"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Power
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-power"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</hero-form>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addons/Interactions Submitted And Edited After 1`] = `
|
||||
<storybook-wrapper>
|
||||
<hero-form>
|
||||
<div
|
||||
class="container"
|
||||
>
|
||||
<div>
|
||||
<h1>
|
||||
Hero Form
|
||||
</h1>
|
||||
<form
|
||||
class="ng-untouched ng-pristine ng-valid"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="name"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="name"
|
||||
name="name"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="name"
|
||||
ng-reflect-required=""
|
||||
required=""
|
||||
type="text"
|
||||
/>
|
||||
<div
|
||||
class="alert alert-danger"
|
||||
hidden=""
|
||||
>
|
||||
Name is required
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="alterEgo"
|
||||
>
|
||||
Alter Ego
|
||||
</label>
|
||||
<input
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="alterEgo"
|
||||
name="alterEgo"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="alterEgo"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="form-group"
|
||||
>
|
||||
<label
|
||||
for="power"
|
||||
>
|
||||
Hero Power
|
||||
</label>
|
||||
<select
|
||||
class="form-control ng-untouched ng-pristine ng-valid"
|
||||
id="power"
|
||||
name="power"
|
||||
ng-reflect-model=""
|
||||
ng-reflect-name="power"
|
||||
ng-reflect-required=""
|
||||
required=""
|
||||
>
|
||||
<option />
|
||||
<option
|
||||
ng-reflect-value="Really Smart"
|
||||
value="Really Smart"
|
||||
>
|
||||
Really Smart
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Super Flexible"
|
||||
value="Super Flexible"
|
||||
>
|
||||
Super Flexible
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Super Hot"
|
||||
value="Super Hot"
|
||||
>
|
||||
Super Hot
|
||||
</option>
|
||||
<option
|
||||
ng-reflect-value="Weather Changer"
|
||||
value="Weather Changer"
|
||||
>
|
||||
Weather Changer
|
||||
</option>
|
||||
|
||||
</select>
|
||||
<div
|
||||
class="alert alert-danger"
|
||||
hidden=""
|
||||
>
|
||||
Power is required
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-success"
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
hidden=""
|
||||
>
|
||||
<h2>
|
||||
You submitted the following:
|
||||
</h2>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Name
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-name"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Alter Ego
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-alterego"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="col-sm-3 font-weight-bold"
|
||||
>
|
||||
Power
|
||||
</div>
|
||||
<div
|
||||
class="col-sm-9"
|
||||
data-testid="hero-power"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</hero-form>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,112 +0,0 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
|
||||
import { expect } from '@storybook/jest';
|
||||
import { within, userEvent, waitFor } from '@storybook/testing-library';
|
||||
|
||||
import { HeroForm } from './hero-form/hero-form.component';
|
||||
|
||||
export default {
|
||||
title: 'Addons/Interactions',
|
||||
component: HeroForm,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CommonModule, FormsModule],
|
||||
}),
|
||||
],
|
||||
} as Meta<HeroForm>;
|
||||
|
||||
const Template: StoryFn<HeroForm> = (args) => ({
|
||||
props: args,
|
||||
});
|
||||
|
||||
export const Standard: StoryFn<HeroForm> = Template.bind({});
|
||||
|
||||
export const Filled: StoryFn<HeroForm> = Template.bind({});
|
||||
Filled.play = async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const heroName = canvas.getByRole('textbox', {
|
||||
name: /name/i,
|
||||
});
|
||||
await userEvent.type(heroName, 'Storm');
|
||||
|
||||
const alterEgo = canvas.getByRole('textbox', {
|
||||
name: /alter ego/i,
|
||||
});
|
||||
await userEvent.type(alterEgo, 'Ororo Munroe');
|
||||
|
||||
const heroPower = canvas.getByRole('combobox', { name: /hero power/i });
|
||||
await userEvent.selectOptions(heroPower, 'Weather Changer');
|
||||
};
|
||||
|
||||
export const InvalidFields: StoryFn<HeroForm> = Template.bind({});
|
||||
InvalidFields.play = async (context) => {
|
||||
await Filled.play(context);
|
||||
|
||||
const canvas = within(context.canvasElement);
|
||||
await userEvent.clear(
|
||||
canvas.getByRole('textbox', {
|
||||
name: /name/i,
|
||||
})
|
||||
);
|
||||
await userEvent.clear(
|
||||
canvas.getByRole('textbox', {
|
||||
name: /alter ego/i,
|
||||
})
|
||||
);
|
||||
|
||||
const heroPower = canvas.getByRole('combobox', { name: /hero power/i });
|
||||
await userEvent.selectOptions(heroPower, '');
|
||||
};
|
||||
|
||||
export const Submitted: StoryFn<HeroForm> = Template.bind({});
|
||||
Submitted.play = async (context) => {
|
||||
await Filled.play(context);
|
||||
|
||||
const canvas = within(context.canvasElement);
|
||||
await userEvent.click(canvas.getByText('Submit'));
|
||||
|
||||
await waitFor(
|
||||
async () => {
|
||||
await expect(
|
||||
canvas.getByRole('heading', {
|
||||
name: /you submitted the following:/i,
|
||||
})
|
||||
).toBeInTheDocument();
|
||||
await expect(canvas.getByTestId('hero-name').textContent).toEqual('Storm');
|
||||
await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe');
|
||||
await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer');
|
||||
},
|
||||
{ timeout: 2000 }
|
||||
);
|
||||
};
|
||||
|
||||
export const SubmittedAndEditedAfter: StoryFn<HeroForm> = Template.bind({});
|
||||
SubmittedAndEditedAfter.play = async (context) => {
|
||||
await Submitted.play(context);
|
||||
|
||||
const canvas = within(context.canvasElement);
|
||||
await userEvent.click(canvas.getByText('Edit'));
|
||||
|
||||
const heroName = canvas.getByRole('textbox', {
|
||||
name: /name/i,
|
||||
});
|
||||
await userEvent.clear(heroName);
|
||||
await userEvent.type(heroName, 'Wakanda Queen');
|
||||
|
||||
await userEvent.click(canvas.getByText('Submit'));
|
||||
|
||||
await waitFor(async () => {
|
||||
await expect(
|
||||
canvas.getByRole('heading', {
|
||||
name: /you submitted the following:/i,
|
||||
})
|
||||
).toBeInTheDocument();
|
||||
// new value
|
||||
await expect(canvas.getByTestId('hero-name').textContent).toEqual('Wakanda Queen');
|
||||
|
||||
// previous values
|
||||
await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe');
|
||||
await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer');
|
||||
});
|
||||
};
|
||||
@ -1,270 +0,0 @@
|
||||
.ng-valid[required],
|
||||
.ng-valid.required {
|
||||
border-left: 5px solid #42a948;
|
||||
}
|
||||
|
||||
.ng-invalid:not(form) {
|
||||
border-left: 5px solid #a94442;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.container,
|
||||
.container-sm {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: calc(1.5em + 0.75rem + 2px);
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
.form-control:focus {
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border-color: #80bdff;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.alert {
|
||||
position: relative;
|
||||
padding: 0.75rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: #721c24;
|
||||
background-color: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.25rem;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
|
||||
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn.disabled,
|
||||
.btn:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
color: #fff;
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-success.disabled,
|
||||
.btn-success:disabled {
|
||||
color: #fff;
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
}
|
||||
.btn-primary {
|
||||
margin-top: 0.37rem;
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
}
|
||||
.spinner-border {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: text-bottom;
|
||||
border: 0.25em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: spinner-border 0.75s linear infinite;
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
}
|
||||
.spinner-border-sm {
|
||||
margin-left: 0.5rem !important;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-width: 0.2em;
|
||||
}
|
||||
@keyframes spinner-border {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.font-weight-bold {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
.col,
|
||||
.col-1,
|
||||
.col-10,
|
||||
.col-11,
|
||||
.col-12,
|
||||
.col-2,
|
||||
.col-3,
|
||||
.col-4,
|
||||
.col-5,
|
||||
.col-6,
|
||||
.col-7,
|
||||
.col-8,
|
||||
.col-9,
|
||||
.col-auto,
|
||||
.col-lg,
|
||||
.col-lg-1,
|
||||
.col-lg-10,
|
||||
.col-lg-11,
|
||||
.col-lg-12,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
.col-lg-4,
|
||||
.col-lg-5,
|
||||
.col-lg-6,
|
||||
.col-lg-7,
|
||||
.col-lg-8,
|
||||
.col-lg-9,
|
||||
.col-lg-auto,
|
||||
.col-md,
|
||||
.col-md-1,
|
||||
.col-md-10,
|
||||
.col-md-11,
|
||||
.col-md-12,
|
||||
.col-md-2,
|
||||
.col-md-3,
|
||||
.col-md-4,
|
||||
.col-md-5,
|
||||
.col-md-6,
|
||||
.col-md-7,
|
||||
.col-md-8,
|
||||
.col-md-9,
|
||||
.col-md-auto,
|
||||
.col-sm,
|
||||
.col-sm-1,
|
||||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
.col-sm-4,
|
||||
.col-sm-5,
|
||||
.col-sm-6,
|
||||
.col-sm-7,
|
||||
.col-sm-8,
|
||||
.col-sm-9,
|
||||
.col-sm-auto,
|
||||
.col-xl,
|
||||
.col-xl-1,
|
||||
.col-xl-10,
|
||||
.col-xl-11,
|
||||
.col-xl-12,
|
||||
.col-xl-2,
|
||||
.col-xl-3,
|
||||
.col-xl-4,
|
||||
.col-xl-5,
|
||||
.col-xl-6,
|
||||
.col-xl-7,
|
||||
.col-xl-8,
|
||||
.col-xl-9,
|
||||
.col-xl-auto {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-sm-3 {
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-sm-9 {
|
||||
-ms-flex: 0 0 75%;
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
}
|
||||
@ -1,79 +0,0 @@
|
||||
<div class="container">
|
||||
<div [hidden]="submitted">
|
||||
<h1>Hero Form</h1>
|
||||
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="name"
|
||||
required
|
||||
[(ngModel)]="model.name"
|
||||
name="name"
|
||||
#name="ngModel"
|
||||
/>
|
||||
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
|
||||
Name is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="alterEgo"
|
||||
[(ngModel)]="model.alterEgo"
|
||||
name="alterEgo"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select
|
||||
class="form-control"
|
||||
id="power"
|
||||
required
|
||||
[(ngModel)]="model.power"
|
||||
name="power"
|
||||
#power="ngModel"
|
||||
>
|
||||
<option></option>
|
||||
<option *ngFor="let pow of powers" [value]="pow">{{ pow }}</option>
|
||||
</select>
|
||||
|
||||
<div [hidden]="power.valid || power.pristine" class="alert alert-danger">
|
||||
Power is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">
|
||||
Submit
|
||||
<span
|
||||
*ngIf="submitting"
|
||||
class="spinner-border spinner-border-sm ml-2"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div [hidden]="!submitted">
|
||||
<h2>You submitted the following:</h2>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 font-weight-bold">Name</div>
|
||||
<div class="col-sm-9" data-testid="hero-name">{{ model.name }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 font-weight-bold">Alter Ego</div>
|
||||
<div class="col-sm-9" data-testid="hero-alterego">{{ model.alterEgo }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 font-weight-bold">Power</div>
|
||||
<div class="col-sm-9" data-testid="hero-power">{{ model.power }}</div>
|
||||
</div>
|
||||
<br />
|
||||
<button class="btn btn-primary" (click)="submitted = false">Edit</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,51 +0,0 @@
|
||||
import { Component, NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
class Hero {
|
||||
// eslint-disable-next-line no-useless-constructor
|
||||
constructor(
|
||||
public id: number,
|
||||
public name: string,
|
||||
public power: string,
|
||||
public alterEgo?: string
|
||||
) {}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'hero-form',
|
||||
templateUrl: './hero-form.component.html',
|
||||
styleUrls: ['./hero-form.component.css'],
|
||||
})
|
||||
export class HeroForm {
|
||||
/**
|
||||
* This does not work on addon-controls as it is turned into a string
|
||||
* @ignore
|
||||
*/
|
||||
model = new Hero(0, '', '', '');
|
||||
|
||||
/**
|
||||
* This does not work on addon-controls as it is turned into a string
|
||||
* @ignore
|
||||
*/
|
||||
powers = ['Really Smart', 'Super Flexible', 'Super Hot', 'Weather Changer'];
|
||||
|
||||
submitting = false;
|
||||
|
||||
submitted = false;
|
||||
|
||||
onSubmit() {
|
||||
this.submitting = true;
|
||||
setTimeout(() => {
|
||||
this.submitted = true;
|
||||
this.submitting = false;
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
declarations: [HeroForm],
|
||||
exports: [HeroForm],
|
||||
imports: [CommonModule, FormsModule],
|
||||
})
|
||||
export class HeroFormModule {}
|
||||
@ -1,61 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addons/Jest app.component with jest tests 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-app-root>
|
||||
<div
|
||||
class="hide"
|
||||
style="color: red; font-size: 30px; text-align: center;"
|
||||
>
|
||||
This should be hidden, if not - scss is not loaded as needed.
|
||||
|
||||
</div>
|
||||
<div
|
||||
style="text-align: center;"
|
||||
>
|
||||
<h1>
|
||||
Welcome to app!
|
||||
</h1>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
|
||||
width="300"
|
||||
/>
|
||||
</div>
|
||||
<h2>
|
||||
Here are some links to help you start:
|
||||
</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h2>
|
||||
<a
|
||||
href="https://angular.io/tutorial"
|
||||
target="_blank"
|
||||
>
|
||||
Tour of Heroes
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2>
|
||||
<a
|
||||
href="https://github.com/angular/angular-cli/wiki"
|
||||
target="_blank"
|
||||
>
|
||||
CLI Documentation
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2>
|
||||
<a
|
||||
href="https://blog.angular.io//"
|
||||
target="_blank"
|
||||
>
|
||||
Angular blog
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
</ul>
|
||||
</storybook-app-root>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,26 +0,0 @@
|
||||
/* eslint-disable import/extensions, import/no-unresolved */
|
||||
import { withTests } from '@storybook/addon-jest';
|
||||
|
||||
import { AppComponent } from '../../../app/app.component';
|
||||
import * as results from '../../../../addon-jest.testresults.json';
|
||||
|
||||
export default {
|
||||
title: 'Addons/Jest',
|
||||
component: AppComponent,
|
||||
decorators: [
|
||||
withTests({
|
||||
results,
|
||||
filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$',
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
export const AppComponentWithJestTests = () => ({
|
||||
props: {},
|
||||
});
|
||||
|
||||
AppComponentWithJestTests.storyName = 'app.component with jest tests';
|
||||
|
||||
AppComponentWithJestTests.parameters = {
|
||||
jest: 'app.component',
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Addons/Links button with link to another story 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Go to Welcome Story"
|
||||
>
|
||||
<button>
|
||||
Go to Welcome Story
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,15 +0,0 @@
|
||||
import { Button } from '../../angular-demo';
|
||||
|
||||
export default {
|
||||
component: Button,
|
||||
title: 'Addons/Links',
|
||||
};
|
||||
|
||||
export const ButtonWithLinkToAnotherStory = () => ({
|
||||
props: {
|
||||
text: 'Go to Welcome Story',
|
||||
onClick: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
|
||||
@ -1,4 +0,0 @@
|
||||
import Welcome from './welcome.component';
|
||||
import Button from './button.component';
|
||||
|
||||
export { Welcome, Button };
|
||||
@ -1,81 +0,0 @@
|
||||
import { Component, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'storybook-welcome-component',
|
||||
template: `
|
||||
<main>
|
||||
<h1>Welcome to storybook</h1>
|
||||
<p>This is a UI component dev environment for your app.</p>
|
||||
<p>
|
||||
We've added some basic stories inside the
|
||||
<span class="inline-code">src/stories</span> directory. <br />
|
||||
A story is a single state of one or more UI components. You can have as many stories as you
|
||||
want. <br />
|
||||
(Basically a story is like a visual test case.)
|
||||
</p>
|
||||
<p>
|
||||
See these sample
|
||||
<a (click)="showApp.emit($event)" role="button" tabIndex="0">stories</a> for a component
|
||||
called <span class="inline-code">Button</span> .
|
||||
</p>
|
||||
<p>
|
||||
Just like that, you can add your own components as stories. <br />
|
||||
You can also edit those components and see changes right away. <br />
|
||||
(Try editing the <span class="inline-code">Button</span> stories located at
|
||||
<span class="inline-code">src/stories/index.js</span>.)
|
||||
</p>
|
||||
<p>
|
||||
Usually we create stories with smaller UI components in the app.<br />
|
||||
Have a look at the
|
||||
<a
|
||||
href="https://storybook.js.org/basics/writing-stories"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Writing Stories
|
||||
</a>
|
||||
section in our documentation.
|
||||
</p>
|
||||
<p class="note">
|
||||
<b>NOTE:</b> <br />
|
||||
Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add
|
||||
webpack loaders and plugins you are using in this project.
|
||||
</p>
|
||||
</main>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
main {
|
||||
padding: 15px;
|
||||
line-height: 1.4;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.note {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.inline-code {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 4px;
|
||||
background-color: #f3f2f2;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1474f3;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #1474f3;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
`,
|
||||
],
|
||||
})
|
||||
export default class WelcomeComponent {
|
||||
@Output()
|
||||
showApp = new EventEmitter<any>();
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Angular forms / ControlValueAccessor Simple input 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-custom-cva-component>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<input
|
||||
class="ng-untouched ng-pristine ng-valid"
|
||||
type="text"
|
||||
/>
|
||||
</storybook-custom-cva-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,57 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With Complex Selectors attribute selectors 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-attribute-selector
|
||||
foo="bar"
|
||||
>
|
||||
<h3>
|
||||
Attribute selector
|
||||
</h3>
|
||||
Selector: storybook-attribute-selector[foo="bar"]
|
||||
<br />
|
||||
Generated template: <storybook-attribute-selector foo="bar"></storybook-attribute-selector>
|
||||
</storybook-attribute-selector>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Complex Selectors class selectors 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-class-selector
|
||||
class="foo"
|
||||
>
|
||||
<h3>
|
||||
Class selector
|
||||
</h3>
|
||||
Selector: storybook-class-selector.foo,storybook-class-selector.bar
|
||||
<br />
|
||||
Generated template: <storybook-class-selector class="foo"></storybook-class-selector>
|
||||
</storybook-class-selector>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Complex Selectors multiple class selectors 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button>
|
||||
<h3>
|
||||
Multiple selector
|
||||
</h3>
|
||||
Selector: storybook-button,button[foo],[foo].button,button[baz]
|
||||
<br />
|
||||
Generated template: <storybook-button></storybook-button>
|
||||
</storybook-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Complex Selectors multiple selectors 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-multiple-selector>
|
||||
<h3>
|
||||
Multiple selector
|
||||
</h3>
|
||||
Selector: storybook-button,button[foo],[foo].button,button[baz]
|
||||
<br />
|
||||
Generated template: <storybook-multiple-selector></storybook-multiple-selector>
|
||||
</storybook-multiple-selector>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,30 +0,0 @@
|
||||
import {
|
||||
MultipleClassSelectorComponent,
|
||||
MultipleSelectorComponent,
|
||||
} from './multiple-selector.component';
|
||||
import { AttributeSelectorComponent } from './attribute-selector.component';
|
||||
import { ClassSelectorComponent } from './class-selector.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / With Complex Selectors',
|
||||
};
|
||||
|
||||
export const MultipleSelectors = () => ({
|
||||
component: MultipleSelectorComponent,
|
||||
});
|
||||
MultipleSelectors.storyName = 'multiple selectors';
|
||||
|
||||
export const AttributeSelectors = () => ({
|
||||
component: AttributeSelectorComponent,
|
||||
});
|
||||
AttributeSelectors.storyName = 'attribute selectors';
|
||||
|
||||
export const ClassSelectors = () => ({
|
||||
component: ClassSelectorComponent,
|
||||
});
|
||||
ClassSelectors.storyName = 'class selectors';
|
||||
|
||||
export const MultipleClassSelectors = () => ({
|
||||
component: MultipleClassSelectorComponent,
|
||||
});
|
||||
MultipleClassSelectors.storyName = 'multiple class selectors';
|
||||
@ -1,35 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With Enum Types Basic 1`] = `
|
||||
<storybook-wrapper>
|
||||
<app-enums
|
||||
ng-reflect-aliased-union-type="Type Alias 1"
|
||||
ng-reflect-enum-alias="0"
|
||||
ng-reflect-enum-numeric="0"
|
||||
ng-reflect-enum-numeric-initial="1"
|
||||
ng-reflect-enum-strings="PRIMARY"
|
||||
ng-reflect-union-type="union a"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
unionType: union a
|
||||
</div>
|
||||
<div>
|
||||
aliasedUnionType: Type Alias 1
|
||||
</div>
|
||||
<div>
|
||||
enumNumeric: 0
|
||||
</div>
|
||||
<div>
|
||||
enumNumericInitial: 1
|
||||
</div>
|
||||
<div>
|
||||
enumStrings: PRIMARY
|
||||
</div>
|
||||
<div>
|
||||
enumAlias: 0
|
||||
</div>
|
||||
</div>
|
||||
</app-enums>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,26 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With Inheritance base button 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-base-button
|
||||
ng-reflect-label="this is label"
|
||||
>
|
||||
<button>
|
||||
this is label
|
||||
</button>
|
||||
</storybook-base-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Inheritance icon button 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-icon-button
|
||||
ng-reflect-icon="this is icon"
|
||||
ng-reflect-label="this is label"
|
||||
>
|
||||
<button>
|
||||
this is label - this is icon
|
||||
</button>
|
||||
</storybook-icon-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,25 +0,0 @@
|
||||
import { IconButtonComponent } from './icon-button.component';
|
||||
import { BaseButtonComponent } from './base-button.component';
|
||||
|
||||
export default {
|
||||
title: 'Basics / Component / With Inheritance',
|
||||
};
|
||||
|
||||
export const IconButton = () => ({
|
||||
component: IconButtonComponent,
|
||||
props: {
|
||||
icon: 'this is icon',
|
||||
label: 'this is label',
|
||||
},
|
||||
});
|
||||
|
||||
IconButton.storyName = 'icon button';
|
||||
|
||||
export const BaseButton = () => ({
|
||||
component: BaseButtonComponent,
|
||||
props: {
|
||||
label: 'this is label',
|
||||
},
|
||||
});
|
||||
|
||||
BaseButton.storyName = 'base button';
|
||||
@ -1,74 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents Always Define Template Or Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button>
|
||||
<sb-button>
|
||||
<button
|
||||
style="background-color: rgb(94, 173, 245);"
|
||||
/>
|
||||
</sb-button>
|
||||
|
||||
</button>
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents Empty Button 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button />
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents In <h1> 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button>
|
||||
<h1>
|
||||
My button in h1
|
||||
</h1>
|
||||
</button>
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button>
|
||||
<sb-emoji>
|
||||
👾
|
||||
</sb-emoji>
|
||||
|
||||
</button>
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Component And Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button>
|
||||
<sb-emoji
|
||||
ng-reflect-emoji="🌵"
|
||||
>
|
||||
🌵
|
||||
</sb-emoji>
|
||||
|
||||
</button>
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Dynamic Content And Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<sb-button>
|
||||
<button>
|
||||
My button text
|
||||
</button>
|
||||
</sb-button>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,42 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Simple Default 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-with-ng-content>
|
||||
Content value:
|
||||
<div
|
||||
style="color: #1e88e5;"
|
||||
>
|
||||
<h1>
|
||||
This is rendered in ng-content
|
||||
</h1>
|
||||
</div>
|
||||
</storybook-with-ng-content>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Simple Only Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-with-ng-content>
|
||||
Content value:
|
||||
<div
|
||||
style="color: #1e88e5;"
|
||||
/>
|
||||
</storybook-with-ng-content>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With ng-content / Simple With Dynamic Content And Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-with-ng-content>
|
||||
Content value:
|
||||
<div
|
||||
style="color: #1e88e5;"
|
||||
>
|
||||
<h1>
|
||||
Default content
|
||||
</h1>
|
||||
</div>
|
||||
</storybook-with-ng-content>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,13 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With OnPush strategy Class-specified component with OnPush and Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-on-push-box
|
||||
ng-reflect-bg-color="#FFF000"
|
||||
ng-reflect-word="The text"
|
||||
style="background-color: rgb(255, 240, 0);"
|
||||
>
|
||||
Word of the day: The text
|
||||
</storybook-on-push-box>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,25 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With Pipes Simple 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-with-pipe
|
||||
ng-reflect-field="foobar"
|
||||
>
|
||||
<h1>
|
||||
CustomPipe: foobar
|
||||
</h1>
|
||||
</storybook-with-pipe>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Pipes With args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-with-pipe
|
||||
ng-reflect-field="Foo Bar"
|
||||
>
|
||||
<h1>
|
||||
CustomPipe: Foo Bar
|
||||
</h1>
|
||||
</storybook-with-pipe>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,59 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With Provider inputs and inject dependencies 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-di-component
|
||||
ng-reflect-title="Component dependencies"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
All dependencies are defined: true
|
||||
</div>
|
||||
<div>
|
||||
Title: Component dependencies
|
||||
</div>
|
||||
<div>
|
||||
Injector: function NodeInjector(_tNode, _lView) {
|
||||
this._tNode = _tNode;
|
||||
this._lView = _lView;
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}}
|
||||
</div>
|
||||
<div>
|
||||
TestToken: 123
|
||||
</div>
|
||||
</div>
|
||||
</storybook-di-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / With Provider inputs and inject dependencies with args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-di-component
|
||||
ng-reflect-title="Component dependencies"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
All dependencies are defined: true
|
||||
</div>
|
||||
<div>
|
||||
Title: Component dependencies
|
||||
</div>
|
||||
<div>
|
||||
Injector: function NodeInjector(_tNode, _lView) {
|
||||
this._tNode = _tNode;
|
||||
this._lView = _lView;
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}}
|
||||
</div>
|
||||
<div>
|
||||
TestToken: 123
|
||||
</div>
|
||||
</div>
|
||||
</storybook-di-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,25 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / With StyleUrls Component with styles 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-styled-component>
|
||||
<div>
|
||||
<p
|
||||
class="red-color"
|
||||
>
|
||||
Styled with scoped CSS
|
||||
</p>
|
||||
<p
|
||||
class="blue-color"
|
||||
>
|
||||
Styled with scoped SCSS
|
||||
</p>
|
||||
<p
|
||||
class="green-color"
|
||||
>
|
||||
Styled with global CSS
|
||||
</p>
|
||||
</div>
|
||||
</storybook-styled-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,23 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / without selector / Custom wrapper *NgComponentOutlet Custom wrapper *NgComponentOutlet 1`] = `
|
||||
<storybook-wrapper>
|
||||
<ng-component-outlet-wrapper
|
||||
ng-reflect-color="green"
|
||||
ng-reflect-component-outlet="function WithoutSelectorCompon"
|
||||
ng-reflect-name="Dixie Normous"
|
||||
>
|
||||
<ng-component>
|
||||
My name in color :
|
||||
<div
|
||||
style="color: green;"
|
||||
>
|
||||
Dixie Normous
|
||||
</div>
|
||||
Ng-content : Inspired by
|
||||
https://angular.io/api/common/NgComponentOutlet
|
||||
</ng-component>
|
||||
|
||||
</ng-component-outlet-wrapper>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,17 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / without selector / Custom wrapper ComponentFactoryResolver Custom wrapper ComponentFactoryResolver 1`] = `
|
||||
<storybook-wrapper>
|
||||
<component-factory-wrapper
|
||||
ng-reflect-args="[object Object]"
|
||||
ng-reflect-component-outlet="function WithoutSelectorCompon"
|
||||
/><ng-component>
|
||||
My name in color :
|
||||
<div
|
||||
style="color: chartreuse;"
|
||||
>
|
||||
Dixie Normous
|
||||
</div>
|
||||
</ng-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,27 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / Component / without selector Simple Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
<ng-component>
|
||||
My name in color :
|
||||
<div
|
||||
style="color: rgb(30, 136, 229);"
|
||||
>
|
||||
Joe Bar
|
||||
</div>
|
||||
</ng-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / Component / without selector With Injection Token And Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<ng-component>
|
||||
My name in color :
|
||||
<div
|
||||
style="color: red;"
|
||||
>
|
||||
Dixie Normous
|
||||
</div>
|
||||
</ng-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,113 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-chips-group
|
||||
ng-reflect-chips="[object Object],[object Object"
|
||||
>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 1"
|
||||
style="background-color: rgb(255, 84, 84);"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 1
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 2"
|
||||
style="background-color: rgb(255, 84, 84);"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 2
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
|
||||
<div
|
||||
class="remove-all"
|
||||
>
|
||||
Remove All
|
||||
</div>
|
||||
|
||||
</storybook-chips-group>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group with overridden provider 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-chips-group
|
||||
ng-reflect-chips="[object Object],[object Object"
|
||||
>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 1"
|
||||
style="background-color: yellow;"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 1
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 2"
|
||||
style="background-color: yellow;"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 2
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
|
||||
<div
|
||||
class="remove-all"
|
||||
>
|
||||
Remove All
|
||||
</div>
|
||||
|
||||
</storybook-chips-group>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,81 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Basics / NgModule / Module with multiple component Chip 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-chip
|
||||
ng-reflect-display-text="Chip"
|
||||
style="background-color: rgb(238, 238, 238);"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Basics / NgModule / Module with multiple component Chips Group 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-chips-group
|
||||
ng-reflect-chips="[object Object],[object Object"
|
||||
>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 1"
|
||||
style="background-color: rgb(238, 238, 238);"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 1
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
<storybook-chip
|
||||
class="chip"
|
||||
ng-reflect-display-text="Chip 2"
|
||||
style="background-color: rgb(238, 238, 238);"
|
||||
>
|
||||
<span
|
||||
class="text"
|
||||
>
|
||||
Chíp 2
|
||||
</span>
|
||||
<div
|
||||
class="remove"
|
||||
>
|
||||
<span
|
||||
class="x"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</div>
|
||||
</storybook-chip>
|
||||
|
||||
<div
|
||||
class="remove-all"
|
||||
>
|
||||
Remove All
|
||||
</div>
|
||||
|
||||
</storybook-chips-group>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,213 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator Angular Legacy Rendering 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
Custom Decorator
|
||||
<div
|
||||
style="margin: 3em;"
|
||||
>
|
||||
Child Template
|
||||
</div>
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<child-component
|
||||
ng-reflect-child-text="Child text"
|
||||
>
|
||||
Child
|
||||
<br />
|
||||
Input text: Child text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
Private text: Child private text
|
||||
<br />
|
||||
</child-component>
|
||||
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<parent-component>
|
||||
Parent
|
||||
<br />
|
||||
Input text:
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
<div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<child-component
|
||||
ng-reflect-child-text="Child text"
|
||||
>
|
||||
Child
|
||||
<br />
|
||||
Input text: Child text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
Private text: Child private text
|
||||
<br />
|
||||
</child-component>
|
||||
|
||||
</div>
|
||||
</parent-component>
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<parent-component>
|
||||
Parent
|
||||
<br />
|
||||
Input text:
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
<div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<child-component
|
||||
ng-reflect-child-text="Child text"
|
||||
>
|
||||
Child
|
||||
<br />
|
||||
Input text: Child text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
Private text: Child private text
|
||||
<br />
|
||||
</child-component>
|
||||
|
||||
</div>
|
||||
</parent-component>
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Props 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<parent-component
|
||||
ng-reflect-parent-text="Parent text"
|
||||
>
|
||||
Parent
|
||||
<br />
|
||||
Input text: Parent text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
<div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<child-component
|
||||
ng-reflect-child-text="Child text"
|
||||
>
|
||||
Child
|
||||
<br />
|
||||
Input text: Child text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
Private text: Child private text
|
||||
<br />
|
||||
</child-component>
|
||||
|
||||
</div>
|
||||
</parent-component>
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Custom Decorator 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
Custom Decorator
|
||||
<div
|
||||
style="margin: 3em;"
|
||||
>
|
||||
Child Template
|
||||
</div>
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Legacy Component 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
<child-component
|
||||
ng-reflect-child-text="Child text"
|
||||
>
|
||||
Child
|
||||
<br />
|
||||
Input text: Child text
|
||||
<br />
|
||||
Output :
|
||||
<button>
|
||||
Click here !
|
||||
</button>
|
||||
<br />
|
||||
Private text: Child private text
|
||||
<br />
|
||||
</child-component>
|
||||
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Template 1`] = `
|
||||
<storybook-wrapper>
|
||||
Grandparent<br /><div
|
||||
style="margin: 3em; border: solid;"
|
||||
>
|
||||
Child Template
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,117 +0,0 @@
|
||||
// your-component.stories.ts
|
||||
|
||||
import { componentWrapperDecorator, Meta, moduleMetadata } from '@storybook/angular';
|
||||
import ChildComponent from './child.component';
|
||||
import ParentComponent from './parent.component';
|
||||
|
||||
export default {
|
||||
title: 'Core / Decorators / ComponentWrapperDecorator',
|
||||
component: ChildComponent,
|
||||
decorators: [
|
||||
componentWrapperDecorator(
|
||||
(story) => `Grandparent<br><div style="margin: 3em; border:solid;">${story}</div>`
|
||||
),
|
||||
],
|
||||
args: { childText: 'Child text', childPrivateText: 'Child private text' },
|
||||
argTypes: { onClickChild: { action: 'onClickChild' } },
|
||||
} as Meta;
|
||||
|
||||
export const WithTemplate = (args) => ({
|
||||
template: `Child Template`,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
|
||||
export const WithComponent = (args) => ({
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
|
||||
export const WithLegacyComponent = (args) => ({
|
||||
component: ChildComponent,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
|
||||
export const WithComponentWrapperDecorator = (args) => ({
|
||||
component: ChildComponent,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
WithComponentWrapperDecorator.decorators = [
|
||||
moduleMetadata({ declarations: [ParentComponent] }),
|
||||
componentWrapperDecorator(ParentComponent),
|
||||
];
|
||||
|
||||
export const WithComponentWrapperDecoratorAndProps = (args) => ({
|
||||
component: ChildComponent,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
WithComponentWrapperDecoratorAndProps.decorators = [
|
||||
moduleMetadata({ declarations: [ParentComponent] }),
|
||||
componentWrapperDecorator(ParentComponent, {
|
||||
parentText: 'Parent text',
|
||||
onClickParent: () => {
|
||||
console.log('onClickParent');
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
export const WithComponentWrapperDecoratorAndArgs = (args) => ({
|
||||
component: ChildComponent,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
WithComponentWrapperDecoratorAndArgs.argTypes = {
|
||||
parentText: { control: { type: 'text' } },
|
||||
onClickParent: { action: 'onClickParent' },
|
||||
};
|
||||
WithComponentWrapperDecoratorAndArgs.decorators = [
|
||||
moduleMetadata({ declarations: [ParentComponent] }),
|
||||
componentWrapperDecorator(ParentComponent, ({ args }) => ({
|
||||
parentText: args.parentText,
|
||||
onClickParent: args.onClickParent,
|
||||
})),
|
||||
];
|
||||
|
||||
export const WithCustomDecorator = (args) => ({
|
||||
template: `Child Template`,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
WithCustomDecorator.decorators = [
|
||||
(storyFunc) => {
|
||||
const story = storyFunc();
|
||||
|
||||
return {
|
||||
...story,
|
||||
template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
|
||||
};
|
||||
},
|
||||
];
|
||||
|
||||
export const AngularLegacyRendering = (args) => ({
|
||||
template: `Child Template`,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
AngularLegacyRendering.parameters = { angularLegacyRendering: true };
|
||||
AngularLegacyRendering.decorators = [
|
||||
(storyFunc) => {
|
||||
const story = storyFunc();
|
||||
|
||||
return {
|
||||
...story,
|
||||
template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
|
||||
};
|
||||
},
|
||||
];
|
||||
@ -1,11 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Decorators / Theme Decorators Base 1`] = `
|
||||
<storybook-wrapper>
|
||||
<div
|
||||
class="light-theme"
|
||||
>
|
||||
Change theme with the brush in toolbar
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,18 +0,0 @@
|
||||
import { componentWrapperDecorator, Meta } from '@storybook/angular';
|
||||
|
||||
export default {
|
||||
title: 'Core / Decorators / Theme Decorators',
|
||||
decorators: [
|
||||
componentWrapperDecorator(
|
||||
(story) => `<div [class]="myTheme">${story}</div>`,
|
||||
({ globals }) => ({ myTheme: `${globals.theme}-theme` })
|
||||
),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
export const Base = (args) => ({
|
||||
template: 'Change theme with the brush in toolbar',
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
@ -1,47 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / ModuleMetadata / In export default with decorator Story 1 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-simple-token-component
|
||||
ng-reflect-name="Prop Name"
|
||||
>
|
||||
<h3>
|
||||
Prop Name
|
||||
</h3>
|
||||
<p>
|
||||
Items:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Joe
|
||||
</li>
|
||||
<li>
|
||||
Jane
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</storybook-simple-token-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / ModuleMetadata / In export default with decorator Story 2 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-simple-token-component>
|
||||
<h3>
|
||||
Provider Name
|
||||
</h3>
|
||||
<p>
|
||||
Items:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Joe
|
||||
</li>
|
||||
<li>
|
||||
Jane
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</storybook-simple-token-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,47 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / ModuleMetadata / In stories Individual 1 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-simple-token-component
|
||||
ng-reflect-name="Prop Name"
|
||||
>
|
||||
<h3>
|
||||
Prop Name
|
||||
</h3>
|
||||
<p>
|
||||
Items:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Joe
|
||||
</li>
|
||||
<li>
|
||||
Jane
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</storybook-simple-token-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / ModuleMetadata / In stories Individual 2 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-simple-token-component>
|
||||
<h3>
|
||||
Provider Name
|
||||
</h3>
|
||||
<p>
|
||||
Items:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Jim
|
||||
</li>
|
||||
<li>
|
||||
Jill
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</storybook-simple-token-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,25 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / ModuleMetadata / Merge default and story Merge with default ModuleMetadata 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-simple-token-component
|
||||
ng-reflect-name="CustomPipe: Prop Name"
|
||||
>
|
||||
<h3>
|
||||
CustomPipe: Prop Name
|
||||
</h3>
|
||||
<p>
|
||||
Items:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Joe
|
||||
</li>
|
||||
<li>
|
||||
Jane
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</storybook-simple-token-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,34 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Parameters / All parameters All parameters passed to story 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Parameters are {
|
||||
\\"docs\\": {
|
||||
"
|
||||
>
|
||||
<button>
|
||||
Parameters are {
|
||||
"docs": {
|
||||
"inlineStories": true
|
||||
},
|
||||
"options": {
|
||||
"storySort": {
|
||||
"order": [
|
||||
"Welcome",
|
||||
"Core ",
|
||||
"Addons ",
|
||||
"Basics "
|
||||
]
|
||||
}
|
||||
},
|
||||
"framework": "angular",
|
||||
"globalParameter": "globalParameter",
|
||||
"chapterParameter": "chapterParameter",
|
||||
"storyParameter": "storyParameter",
|
||||
"__isArgsStory": true
|
||||
}
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,13 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Parameters / With Bootstrap Options With Preserve Whitespaces 1`] = `
|
||||
<storybook-wrapper>
|
||||
<component-with-whitespace>
|
||||
<div>
|
||||
<p>
|
||||
Some content
|
||||
</p>
|
||||
</div>
|
||||
</component-with-whitespace>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,67 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Parameters / Layout Centered 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Parameters / Layout Default 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = `
|
||||
<storybook-wrapper>
|
||||
<div
|
||||
style="background-color: yellow;"
|
||||
>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
|
||||
</div>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Parameters / Layout None 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Parameters / Layout Padded 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Button"
|
||||
>
|
||||
<button>
|
||||
Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,31 +0,0 @@
|
||||
import type { Meta, StoryFn } from '@storybook/angular';
|
||||
import { Button } from '../../angular-demo';
|
||||
|
||||
export default {
|
||||
title: 'Core / Parameters / Layout',
|
||||
component: Button,
|
||||
} as Meta;
|
||||
|
||||
export const Default: StoryFn = () => ({
|
||||
props: { text: 'Button' },
|
||||
});
|
||||
|
||||
export const Fullscreen: StoryFn = () => ({
|
||||
template: `<div style="background-color: yellow;"><storybook-button-component text="Button"></storybook-button-component></div>`,
|
||||
});
|
||||
Fullscreen.parameters = { layout: 'fullscreen' };
|
||||
|
||||
export const Centered: StoryFn = () => ({
|
||||
props: { text: 'Button' },
|
||||
});
|
||||
Centered.parameters = { layout: 'centered' };
|
||||
|
||||
export const Padded: StoryFn = () => ({
|
||||
props: { text: 'Button' },
|
||||
});
|
||||
Padded.parameters = { layout: 'padded' };
|
||||
|
||||
export const None: StoryFn = () => ({
|
||||
props: { text: 'Button' },
|
||||
});
|
||||
None.parameters = { layout: 'none' };
|
||||
@ -1,27 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core / Story host styles With Args 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
_ngcontent-a-c160=""
|
||||
ng-reflect-text="Button with custom styles"
|
||||
>
|
||||
<button>
|
||||
Button with custom styles
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Core / Story host styles With story template 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
_ngcontent-a-c159=""
|
||||
ng-reflect-text="Button with custom styles"
|
||||
>
|
||||
<button>
|
||||
Button with custom styles
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
@ -1,43 +0,0 @@
|
||||
import type { Meta, StoryFn } from '@storybook/angular';
|
||||
import Button from './button.component';
|
||||
|
||||
// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
|
||||
export default {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
// More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
|
||||
const Template: StoryFn<Button> = (args: Button) => {
|
||||
return {
|
||||
props: { backgroundColor: null, ...args },
|
||||
};
|
||||
};
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
// More on args: https://storybook.js.org/docs/angular/writing-stories/args
|
||||
Primary.args = {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Secondary = Template.bind({});
|
||||
Secondary.args = {
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Large = Template.bind({});
|
||||
Large.args = {
|
||||
size: 'large',
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Small = Template.bind({});
|
||||
Small.args = {
|
||||
size: 'small',
|
||||
label: 'Button',
|
||||
};
|
||||
@ -1,53 +0,0 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'storybook-button',
|
||||
template: ` <button
|
||||
type="button"
|
||||
(click)="onClick.emit($event)"
|
||||
[ngClass]="classes"
|
||||
[ngStyle]="{ 'background-color': backgroundColor }"
|
||||
>
|
||||
{{ label }}
|
||||
</button>`,
|
||||
styleUrls: ['./button.css'],
|
||||
})
|
||||
export default class MyButtonComponent {
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
@Input()
|
||||
primary = false;
|
||||
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
@Input()
|
||||
backgroundColor?: string;
|
||||
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
@Input()
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
|
||||
/**
|
||||
* Button contents
|
||||
*
|
||||
* @required
|
||||
*/
|
||||
@Input()
|
||||
label = 'Button';
|
||||
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
@Output()
|
||||
onClick = new EventEmitter<Event>();
|
||||
|
||||
public get classes(): string[] {
|
||||
const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
||||
|
||||
return ['storybook-button', `storybook-button--${this.size || 'medium'}`, mode];
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
.storybook-button {
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
border: 0;
|
||||
border-radius: 3em;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.storybook-button--primary {
|
||||
color: white;
|
||||
background-color: #1ea7fd;
|
||||
}
|
||||
.storybook-button--secondary {
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
||||
}
|
||||
.storybook-button--small {
|
||||
font-size: 12px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.storybook-button--medium {
|
||||
font-size: 14px;
|
||||
padding: 11px 20px;
|
||||
}
|
||||
.storybook-button--large {
|
||||
font-size: 16px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import { Meta } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="Legacy / Readme" />
|
||||
|
||||
# Legacy examples
|
||||
|
||||
Example of story still supported by storybook but no longer recommended or deprecated
|
||||
@ -1,13 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Legacy / Component in Story Basic 1`] = `
|
||||
<storybook-wrapper>
|
||||
<storybook-button-component
|
||||
ng-reflect-text="Hello Button"
|
||||
>
|
||||
<button>
|
||||
Hello Button
|
||||
</button>
|
||||
</storybook-button-component>
|
||||
</storybook-wrapper>
|
||||
`;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user