diff --git a/addons/rose/.eslintignore b/addons/rose/.eslintignore index cb434021d..4fdcb4533 100644 --- a/addons/rose/.eslintignore +++ b/addons/rose/.eslintignore @@ -5,7 +5,6 @@ # compiled output /dist/ /tmp/ -/storybook-static/ # dependencies /bower_components/ diff --git a/addons/rose/.storybook/main.js b/addons/rose/.storybook/main.js deleted file mode 100644 index 4d807b503..000000000 --- a/addons/rose/.storybook/main.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -const namedBlockPolyfill = require('ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin'); - -module.exports = { - framework: { - name: '@storybook/ember', - options: { - polyfills: [namedBlockPolyfill], - }, - }, - stories: [ - '../addon/components/**/*.stories.@(js|mdx)', - '../stories/**/*.stories.mdx', - ], - addons: [ - '@storybook/addon-docs', - '@storybook/addon-a11y', - '@storybook/addon-actions', - '@storybook/addon-controls', - ], - features: { - postcss: false, - }, - staticDirs: ['../dist'], -}; diff --git a/addons/rose/.storybook/preview.js b/addons/rose/.storybook/preview.js deleted file mode 100644 index 942e771e9..000000000 --- a/addons/rose/.storybook/preview.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; -import handlebars from 'react-syntax-highlighter/dist/esm/languages/prism/handlebars'; -import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss'; - -// Registers and enables language support -SyntaxHighlighter.registerLanguage('handlebars', handlebars); -SyntaxHighlighter.registerLanguage('scss', scss); diff --git a/addons/rose/README.md b/addons/rose/README.md index a17a811b5..ffe6161c2 100644 --- a/addons/rose/README.md +++ b/addons/rose/README.md @@ -5,7 +5,8 @@ Boundary UIs. -**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* + +**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_ - [Add Styles to an App](#add-styles-to-an-app) - [Installation](#installation) @@ -24,7 +25,7 @@ Boundary UIs. ## Add Styles to an App Add this addon to an Ember application's `devDependencies` as: -`"rose": "*"`, for applications included in this monorepo. Application's +`"rose": "*"`, for applications included in this monorepo. Application's may then import rose styles by adding `@import 'rose';` to their stylesheets. ## Installation @@ -33,70 +34,67 @@ See monorepo README for installation instructions. ## Yarn Commands -List of available project commands. `yarn run ` +List of available project commands. `yarn run ` -| Command | Description | -| ------- | ----------- | -| build:development | Builds the dummy app in development mode. | -| build | Builds the dummy app for production. | -| lint | Runs all lint commands. | -| lint:fix | Runs automatic lint fixes for all files. | -| lint:hbs | Lints template `hbs` files. | -| lint:hbs:fix | Runs automatic lint fixes for `hbs` files. | -| lint:js | Lints `js` files. | -| lint:js:fix | Runs automatic lint fixes for `js` files. | -| lint:sass | Lints `scss` files. | -| format | Runs all auto-formatters. | -| format:js | Auto-formats `js` files using Prettier. | -| format:hbs | Auto-formats `hbs` files using Prettier. | -| format:sass | Auto-formats `scss` files using Prettier. | -| start | Runs the dummy app local server. | -| storybook | Runs the Storybook local server on port 6006. Be sure to start the standard server (see above) in a separate terminal. | -| test | Runs all tests. | -| test:ember-compatibility | Runs tests across multiple Ember versions with ember-try. | -| precommit | Runs all lint, format and tests. | -| doc:toc | Automatically generates a table of contents for this README file. | +| Command | Description | +| ------------------------ | ----------------------------------------------------------------- | +| build:development | Builds the dummy app in development mode. | +| build | Builds the dummy app for production. | +| lint | Runs all lint commands. | +| lint:fix | Runs automatic lint fixes for all files. | +| lint:hbs | Lints template `hbs` files. | +| lint:hbs:fix | Runs automatic lint fixes for `hbs` files. | +| lint:js | Lints `js` files. | +| lint:js:fix | Runs automatic lint fixes for `js` files. | +| lint:sass | Lints `scss` files. | +| format | Runs all auto-formatters. | +| format:js | Auto-formats `js` files using Prettier. | +| format:hbs | Auto-formats `hbs` files using Prettier. | +| format:sass | Auto-formats `scss` files using Prettier. | +| start | Runs the dummy app local server. | +| test | Runs all tests. | +| test:ember-compatibility | Runs tests across multiple Ember versions with ember-try. | +| precommit | Runs all lint, format and tests. | +| doc:toc | Automatically generates a table of contents for this README file. | Additional commands in the monorepo package may affect this projects. ## Linting -* `yarn lint:hbs` -* `yarn lint:js` -* `yarn lint:js --fix` +- `yarn lint:hbs` +- `yarn lint:js` +- `yarn lint:js --fix` ## Formatting Before submitting your work, be sure to run auto-formatters -(see commands above). This helps to ensure consistency among authors. +(see commands above). This helps to ensure consistency among authors. -* `yarn format` +- `yarn format` ## Building Components To build a new component, start by generating it on the command line with -`ember g component rose/component-name`. Then manually add a Storybook story in -`component-name.stories.mdx`. Use the Storybook UI during component -development (see Yarn commands). +`ember g component rose/component-name`. ## Using Components A few of the components have additional ember package dependencies that need to be installed before usage. -| Component | Dependency | -| --------- | ---------- | +| Component | Dependency | +| -------------- | -------------- | | Rose::Dropdown | ember-modifier | ## Running tests -* `yarn test` – Runs the test suite on the current Ember version -* `yarn test --server` – Runs the test suite in "watch mode" -* `yarn test:all` – Runs the test suite against multiple Ember versions +- `yarn test` – Runs the test suite on the current Ember version +- `yarn test --server` – Runs the test suite in "watch mode" +- `yarn test:all` – Runs the test suite against multiple Ember versions ## Running the dummy application -* `yarn start` -* Visit the dummy application at [http://localhost:4200](http://localhost:4200). +- `yarn start` +- Visit the dummy application at [http://localhost:4200](http://localhost:4200). ## Contributing @@ -105,5 +103,5 @@ See monorepo README for more contribution instructions. ### Building ToC To autogenerate a ToC (table of contents) for this README, -run `yarn doc:toc`. Please update the ToC whenever editing the structure +run `yarn doc:toc`. Please update the ToC whenever editing the structure of README. diff --git a/addons/rose/addon/components/rose/anonymous/index.stories.mdx b/addons/rose/addon/components/rose/anonymous/index.stories.mdx deleted file mode 100644 index b9fa76ebd..000000000 --- a/addons/rose/addon/components/rose/anonymous/index.stories.mdx +++ /dev/null @@ -1,30 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Anonymous - -The anonymous component is a simple `
` with no attributes of its own. -It is used by other components that need to yield contextual components. -This component should not be instantiated directly. - -For example, layout components may yield an anonymous component to configure -various layout regions: - -```handlebars -
- {{yield - (hash - header=(component - 'rose/anonymous' tagName='header' class='rose-layout-global-header' - ) - sidebar=(component - 'rose/anonymous' tagName='aside' class='rose-layout-global-sidebar' - ) - body=(component - 'rose/anonymous' tagName='main' class='rose-layout-global-body' - ) - ) - }} -
-``` diff --git a/addons/rose/addon/components/rose/badge/index.stories.mdx b/addons/rose/addon/components/rose/badge/index.stories.mdx deleted file mode 100644 index 672c5711f..000000000 --- a/addons/rose/addon/components/rose/badge/index.stories.mdx +++ /dev/null @@ -1,38 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs'; -import { hbs } from 'ember-cli-htmlbars'; - - - -# Rose Badge (Removed) - -Rose/Badge has been removed in favor of [HDS::Badge](https://design-system-components-hashicorp.vercel.app/components/badge) - -```handlebars - -``` - -Refer to the [HDS Badge documentation](https://design-system-components-hashicorp.vercel.app/components/badge) for a complete overview - -export const HDSTemplate = (args) => ({ - template: hbs``, - context: args, -}); - - - - {HDSTemplate.bind({})} - - diff --git a/addons/rose/addon/components/rose/button/index.stories.mdx b/addons/rose/addon/components/rose/button/index.stories.mdx deleted file mode 100644 index b2dd16ab0..000000000 --- a/addons/rose/addon/components/rose/button/index.stories.mdx +++ /dev/null @@ -1,106 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs'; -import { hbs } from 'ember-cli-htmlbars'; - - - -# Button - -A simple button component that renders an HTML `