@hashicorp/design-system-components 3.5.0 → 4.0.0

package/blueprints/hds-component/files/addon/components/hds/__name__/index.js

@@ -1,28 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class Hds<%= classifiedModuleName %>IndexComponent extends Component {
-  // UNCOMMENT THIS IF YOU NEED A CONSTRUCTOR
-  // constructor() {
-  //   super(...arguments);
-  //   // ADD YOUR ASSERTIONS HERE
-  // }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-<%= kebabizedModuleName %>'];
-
-    // add a class based on the @xxx argument
-    // classes.push(`hds-<%= kebabizedModuleName %>--[variant]-${this.xxx}`);
-
-    return classes.join(' ');
-  }
-}

package/blueprints/hds-component/files/app/components/hds/__name__/index.js

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-export { default } from '@hashicorp/design-system-components/components/hds/<%= dasherizedModuleName %>/index';

package/blueprints/hds-component/files/app/styles/components/__name__.scss

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-//
-// <%= folderizedModuleName %>
-//
-
-.hds-<%= kebabizedModuleName %> {
-  // add the component styles here
-}

package/blueprints/hds-component/index.js

@@ -1,65 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-/* eslint-disable ember/no-string-prototype-extensions */
-/* eslint-disable node/no-extraneous-require */
-'use strict';
-
-const stringUtil = require('ember-cli-string-utils');
-const fs = require('fs');
-
-module.exports = {
-  description: 'Generates all files for an HDS component',
-
-  locals(options) {
-    return {
-      columnizedModuleName: options.entity.name
-        .split('/')
-        .map((part) => stringUtil.classify(part))
-        .join('::'),
-      kebabizedModuleName: options.entity.name
-        .split('/')
-        .map((part) => stringUtil.dasherize(part))
-        .join('-'),
-      folderizedModuleName: options.entity.name
-        .split('/')
-        .map((part) => stringUtil.dasherize(part).toUpperCase())
-        .join(' > '),
-    };
-  },
-
-  afterInstall(options) {
-    updateHDSComponentsCSS.call(this, options);
-  },
-};
-
-const updateHDSComponentsCSS = (options) => {
-  const name = options.entity.name;
-  const cssFilePath = `${options.project.root}/app/styles/@hashicorp/design-system-components.scss`;
-  const source = fs.readFileSync(cssFilePath, 'utf-8');
-  const oldLinesArray = source.split(/\r?\n/);
-  const firstComponentImportIndex =
-    oldLinesArray.findIndex((line) =>
-      line.match(/^\/\/ START COMPONENTS CSS FILES IMPORTS/)
-    ) + 1;
-  const lastComponentImportIndex =
-    oldLinesArray.findIndex((line) =>
-      line.match(/^\/\/ END COMPONENT CSS FILES IMPORTS/)
-    ) - 1;
-  const importLinesArray = oldLinesArray.slice(
-    firstComponentImportIndex,
-    lastComponentImportIndex + 1
-  );
-  importLinesArray.push(`@use "../components/${name}";`);
-  const newImportLinesArray = importLinesArray
-    .filter((line, index, self) => self.indexOf(line) === index)
-    .sort();
-  const newLinesArray = [].concat(
-    oldLinesArray.slice(0, firstComponentImportIndex),
-    newImportLinesArray,
-    oldLinesArray.slice(lastComponentImportIndex + 1)
-  );
-  fs.writeFileSync(cssFilePath, newLinesArray.join('\n'));
-};

package/blueprints/hds-component-test/files/tests/acceptance/components/hds/__name__.js

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { visit } from '@ember/test-helpers';
-import { setupApplicationTest } from 'dummy/tests/helpers';
-import { a11yAudit } from 'ember-a11y-testing/test-support';
-
-module('Acceptance | components/<%= dasherizedModuleName %>', function (hooks) {
-  setupApplicationTest(hooks);
-
-  test('Components/<%= dasherizedModuleName %> page passes automated a11y checks', async function (assert) {
-    await visit('/components/<%= dasherizedModuleName %>');
-
-    await a11yAudit();
-
-    assert.ok(true, 'a11y automation audit passed');
-  });
-});

package/blueprints/hds-component-test/files/tests/dummy/app/routes/components/__name__.js

@@ -1,8 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Route from '@ember/routing/route';
-
-export default class Components<%= classifiedModuleName %>Route extends Route {}

package/blueprints/hds-component-test/files/tests/dummy/app/styles/showcase-pages/__dummyCSSFileName__.scss

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-// <%= folderizedModuleName %>

package/blueprints/hds-component-test/files/tests/dummy/app/templates/components/__name__.hbs

@@ -1,17 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-{{page-title "<%= columnizedModuleName %> Component"}}
-
-<Shw::Text::H1><%= columnizedModuleName %></Shw::Text::H1>
-
-<section data-test-percy>
-
-  {{! ADD YOUR CONTENT HERE }}
-
-  {{! This below is just an example of invocation, to get started }}
-  <Hds::<%= columnizedModuleName %>>This is the Hds::<%= columnizedModuleName %> component </Hds::<%= columnizedModuleName %>>
-
-</section>

package/blueprints/hds-component-test/files/tests/integration/components/hds/__name__/index-test.js

@@ -1,25 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module(
-  'Integration | Component | hds/<%= dasherizedModuleName %>/index',
-  function (hooks) {
-    setupRenderingTest(hooks);
-
-    test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await render(
-        hbs`<Hds::<%= columnizedModuleName %> id="test-<%= kebabizedModuleName %>" />`
-      );
-      assert
-        .dom('#test-<%= kebabizedModuleName %>')
-        .hasClass('hds-<%= kebabizedModuleName %>');
-    });
-  }
-);

package/blueprints/hds-component-test/index.js

@@ -1,151 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-/* eslint-disable ember/no-string-prototype-extensions */
-/* eslint-disable node/no-extraneous-require */
-'use strict';
-
-const stringUtil = require('ember-cli-string-utils');
-const EmberRouterGenerator = require('ember-router-generator');
-const fs = require('fs');
-
-module.exports = {
-  description: 'Generates tests for an HDS component',
-
-  locals(options) {
-    return {
-      columnizedModuleName: getColumnizedModuleName(options.entity.name),
-      kebabizedModuleName: getKebabizedModuleName(options.entity.name),
-      folderizedModuleName: getFolderizedModuleName(options.entity.name),
-    };
-  },
-
-  fileMapTokens() {
-    return {
-      // prepend `db-` to the file name
-      __dummyCSSFileName__(options) {
-        return getDummyCSSFileName(options.dasherizedModuleName);
-      },
-    };
-  },
-
-  afterInstall(options) {
-    updateDummyAppRouter.call(this, options);
-    updateDummyAppCSS.call(this, options);
-    updateDummyAppIndexHBS.call(this, options);
-    updatePercyTest.call(this, options);
-  },
-};
-
-const updateDummyAppRouter = (options) => {
-  const newRouteToAdd = `components/${options.entity.name}`; // we prefix all the component routes with "components"
-  const routerFilePath = `${options.project.root}/tests/dummy/app/router.js`;
-  const source = fs.readFileSync(routerFilePath, 'utf-8');
-  let oldRoutes = new EmberRouterGenerator(source);
-  let newRoutes = oldRoutes['add'](newRouteToAdd, options);
-  fs.writeFileSync(routerFilePath, newRoutes.code());
-};
-
-const updateDummyAppCSS = (options) => {
-  const name = options.entity.name;
-  const cssFilePath = `${options.project.root}/tests/dummy/app/styles/app.scss`;
-  const source = fs.readFileSync(cssFilePath, 'utf-8');
-  const oldLinesArray = source.split(/\r?\n/);
-  const firstComponentImportIndex =
-    oldLinesArray.findIndex((line) =>
-      line.match(/^\/\/ START COMPONENT PAGES IMPORTS/)
-    ) + 1;
-  const lastComponentImportIndex =
-    oldLinesArray.findIndex((line) =>
-      line.match(/^\/\/ END COMPONENT PAGES IMPORTS/)
-    ) - 1;
-  const importLinesArray = oldLinesArray.slice(
-    firstComponentImportIndex,
-    lastComponentImportIndex + 1
-  );
-  importLinesArray.push(
-    `@import "./showcase-pages/${getDummyCSSFileName(name)}";`
-  );
-  const newImportLinesArray = importLinesArray
-    .filter((line, index, self) => self.indexOf(line) === index)
-    .sort();
-  const newLinesArray = [].concat(
-    oldLinesArray.slice(0, firstComponentImportIndex),
-    newImportLinesArray,
-    oldLinesArray.slice(lastComponentImportIndex + 1)
-  );
-  fs.writeFileSync(cssFilePath, newLinesArray.join('\n'));
-};
-
-const updateDummyAppIndexHBS = (options) => {
-  const name = options.entity.name;
-  const hbsFilePath = `${options.project.root}/tests/dummy/app/templates/index.hbs`;
-  let newListItemHTML = '';
-  newListItemHTML += '<!-- MOVE THIS HTML BLOCK IN THE RIGHT POSITION -->\n';
-  newListItemHTML += '<!-- (adjust component name & route if necessary) -->\n';
-  newListItemHTML += '<li>\n';
-  newListItemHTML += `  <LinkTo @route="components.${getRoutedModuleName(
-    name
-  )}">\n`;
-  newListItemHTML += `    ${getColumnizedModuleName(name)}\n`;
-  newListItemHTML += '  </LinkTo>\n';
-  newListItemHTML += '</li>\n';
-  fs.appendFileSync(hbsFilePath, `\n\n${newListItemHTML}\n`);
-};
-
-const updatePercyTest = (options) => {
-  const name = options.entity.name;
-  const percyTestFilePath = `${options.project.root}/tests/acceptance/percy-test.js`;
-
-  let newSnapshot = `    await visit('/components/${getKebabizedModuleName(
-    name
-  )}');\n`;
-  newSnapshot += `    await percySnapshot('${stringUtil.classify(name)}');\n`;
-
-  let source = fs.readFileSync(percyTestFilePath, 'utf-8');
-  source = source.replace(
-    '    // DO NOT REMOVE – PERCY SNAPSHOTS END',
-    `    // MOVE THIS BLOCK IN THE RIGHT POSITION\n${newSnapshot}\n    // DO NOT REMOVE – PERCY SNAPSHOTS END`
-  );
-  fs.writeFileSync(percyTestFilePath, source);
-};
-
-const getColumnizedModuleName = (name) => {
-  const columnizedModuleName = name
-    .split('/')
-    .map((part) => stringUtil.classify(part))
-    .join('::');
-  return columnizedModuleName;
-};
-
-const getKebabizedModuleName = (name) => {
-  const kebabizedModuleName = name
-    .split('/')
-    .map((part) => stringUtil.dasherize(part))
-    .join('-');
-  return kebabizedModuleName;
-};
-
-const getFolderizedModuleName = (name) => {
-  const folderizedModuleName = name
-    .split('/')
-    .map((part) => stringUtil.dasherize(part).toUpperCase())
-    .join(' > ');
-  return folderizedModuleName;
-};
-
-const getRoutedModuleName = (name) => {
-  const routedModuleName = name
-    .split('/')
-    .map((part) => stringUtil.dasherize(part))
-    .join('.');
-  return routedModuleName;
-};
-
-const getDummyCSSFileName = (name) => {
-  const parts = name.split('/');
-  const fileName = `${parts.pop()}`;
-  return `${parts.concat([fileName]).join('/')}`;
-};

package/config/environment.js

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-'use strict';
-
-module.exports = function (/* environment, appConfig */) {
-  return {};
-};

package/index.js

@@ -1,32 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-'use strict';
-
-module.exports = {
-  name: require('./package').name,
-
-  isDevelopingAddon() {
-    return true;
-  },
-
-  included: function (/* app */) {
-    this._super.included.apply(this, arguments);
-  },
-
-  options: {
-    babel: {
-      plugins: [require.resolve('ember-auto-import/babel-plugin')],
-    },
-    autoImport: {
-      alias: {
-        'dialog-polyfill-css': 'dialog-polyfill/dist/dialog-polyfill.css',
-      },
-    },
-    'ember-cli-babel': {
-      enableTypeScriptTransform: true,
-    },
-  },
-};

package/tsconfig.declarations.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "declarationDir": "declarations",
-    "emitDeclarationOnly": true,
-    "noEmit": false,
-    "rootDir": "."
-  },
-  "include": ["addon", "addon-test-support"]
-}

package/tsconfig.json

@@ -1,47 +0,0 @@
-{
-  "extends": "@tsconfig/ember/tsconfig.json",
-  "compilerOptions": {
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    // The combination of `baseUrl` with `paths` allows Ember's classic package
-    // layout, which is not resolvable with the Node resolution algorithm, to
-    // work with TypeScript.
-    "baseUrl": ".",
-    "skipLibCheck": true,
-    "paths": {
-      "dummy/tests/*": [
-        "tests/*"
-      ],
-      "dummy/*": [
-        "tests/dummy/app/*",
-        "app/*"
-      ],
-      "@hashicorp/design-system-components": [
-        "addon"
-      ],
-      "@hashicorp/design-system-components/*": [
-        "addon/*"
-      ],
-      "@hashicorp/design-system-components/test-support": [
-        "addon-test-support"
-      ],
-      "@hashicorp/design-system-components/test-support/*": [
-        "addon-test-support/*"
-      ],
-      "*": [
-        "types/*"
-      ]
-    }
-  },
-  "include": [
-    "app/**/*",
-    "addon/**/*",
-    "tests/**/*",
-    "types/**/*",
-    "test-support/**/*",
-    "addon-test-support/**/*"
-  ],
-  "glint": {
-    "environment": "ember-loose"
-  }
-}

package/types/dummy/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import 'ember-source/types';
-import '@glint/environment-ember-loose';

package/types/global.d.ts

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-// Types for compiled templates
-declare module '@hashicorp/design-system-components/templates/*' {
-  import { TemplateFactory } from 'ember-cli-htmlbars';
-
-  const tmpl: TemplateFactory;
-  export default tmpl;
-}

package/vercel.json

@@ -1,13 +0,0 @@
-{
-  "headers": [
-    {
-      "source": "/(.*)",
-      "headers" : [
-        {
-          "key" : "X-Robots-Tag",
-          "value" : "none"
-        }
-      ]
-    }
-  ]
-}