Merge pull request #6 from RedHat-UX/chore/improve-build-ci-cd

chore: improve build and CI/CD

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/release-v1.md

@@ -0,0 +1,7 @@
+---
+"@rhds/icons": major
+---
+
+✨ Added Official Red Hat Brand Icons
+
+848 icons, in 4 sets:  Microns, Social, Standard, and UI.

.github/workflows/release.yml

@@ -0,0 +1,34 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    # Prevents changesets action from creating a PR on forks
+    if: github.repository == 'RedHat-UX/red-hat-icons'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+
+      - run: npm ci --prefer-offline
+      - run: npm run build
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: npx changeset publish
+          commit: "chore: prepare release"
+          title: "chore: prepare release"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+

.gitignore

@@ -5,4 +5,6 @@ node_modules
 *.jpg
 dist
 _site
-.DS_Store
+.DS_Store
+
+.wireit

.nvmrc

@@ -0,0 +1 @@
+v20.14.0

CONTRIBUTING.md

@@ -0,0 +1,58 @@
+# Contributing
+
+## New Icon requests or contributions
+
+To contribute new icons or request new icons please reach out to [[email protected]](mailto:[email protected]) 
+
+## Documentation
+To work on this project's documentation first install the project on your local machine:
+
+1. [Node Version Manager's](https://github.com/nvm-sh/nvm) for your system.
+2. Navigate to your project folder
+  ```bash
+  cd red-hat-icons
+  ```
+3. Run [Node Version Manager's](https://github.com/nvm-sh/nvm) `use` command to switch to the projects [Node](https://nodejs.org/en) version.
+  ```bash
+  nvm use
+  ```
+  If prompted, follow the instructions for installing specific version of Node used by this project on your system, which will look similar to the following:
+
+  `You need to run "nvm install v20.10.0" to install it before using it.`
+
+4. Install project dependencies, run `npm ci`
+  ```bash
+  npm ci
+  ```
+5. Start the development server
+  ```bash
+  npm run serve
+  ```
+6. Make your changes and [commit](#commit-changes)
+
+## Adding Icons
+To add new icons, first obtain approval from [[email protected]](mailto:[email protected]) 
+
+1. Setup the project locally, steps 1-4 above.
+2. Once your project setup make changes to the files then run a build
+  ```bash
+  npm run build
+  ```
+  Your svg files will then be compressed and optimized, new artifacts will be generated in `./dist`
+3. Check your work in the demo
+  ```bash
+  npm run serve
+  ```
+4. [Commit](#commit-changes) your changes.
+
+## Commit Changes 
+1. Commit your changes using [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) style.
+2. Add a [changeset](https://github.com/changesets/changesets) 
+  ```bash
+  npx changeset
+  ```
+  For more information about changesets and how to use them please read the [changeset documentation](https://github.com/changesets/changesets?tab=readme-ov-file#documentation). 
+3. Open a new PR and request team members for review.
+
+
+

LICENSE.md

@@ -0,0 +1,19 @@
+Copyright 2022 Red Hat, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,25 @@
 # Red Hat Icons
+
 Official Red Hat Brand Icons
+
+## Demo
+
+1. Visit the [Demo](https://red-hat-icons.netlify.app/)
+2. Copy the `rh-icon` html markup for the desired icon
+3. Paste that icon as well as the dependencies needed from the [rh-icon](https://ux.redhat.com/elements/icon/) documentation
+
+
+## Quickstart
+
+```bash
+npm install @rhds/icons
+```
+
+## Contributing
+
+Please read the [contributing guide](./CONTRIBUTING.md) for more information.
+
+
+## Licensing
+
+The software and icons contained and produced by build are covered by two separate licenses. A [MIT license](./LICENSE) covers the JS modules, build scripts and configuration, and the [Creative Commons 4.0 License](#creative-commons-40) covers the icons.

build.js

@@ -1,20 +1,28 @@
 import { sep, basename } from 'node:path';
 import { globby } from 'globby';
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import * as htmlMinify from 'html-minifier';
 
+/* options for minification of the svg files */
+const minifyOptions = {
+  collapseWhitespace: true
+}
 
-// const getContent = (name: string, { height, width, path, xOffset = 0, yOffset = 0 }: IconSpec) =>
-//   `import{svg}from'lit';export default svg\`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="${name}" height="${height}" width="${width}" viewBox="${[xOffset, yOffset, width, height].join(' ')}"><path d="${path}" /></svg>\`;`;
+const license = 'Red Hat, Inc. CC-BY-4.0';
+const getSVG = (svg) => 
+  htmlMinify.minify(`<!-- © ${license} licensed -->${svg}`, minifyOptions);
 
 const getContent = content =>
-  `const t = document.createElement('template');t.innerHTML=\`${content}\`;export default t.content.cloneNode(true);`;
+  `const t = document.createElement('template');t.innerHTML=\`${getSVG(content)}\`;export default t.content.cloneNode(true);`;
 
 for (const path of await globby('src/**/*.svg')) {
   const [filename, category] = path.split(sep).reverse();
   await mkdir(new URL(`dist/${category}`, import.meta.url), { recursive: true });
+  const svg = await readFile(new URL(path, import.meta.url), 'utf8');
+  await writeFile(new URL(`dist/${category}/${filename}`, import.meta.url), getSVG(svg), 'utf8');
   await writeFile(
     new URL(`dist/${category}/${filename.replace(/\.svg$/, '.js')}`, import.meta.url),
-    getContent(await readFile(new URL(path, import.meta.url), 'utf8')),
+    getContent(svg),
     'utf8'
   );
 }

docs/index.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Red Hat Icons</title>
+    <link rel="stylesheet" href="styles/styles.css">
+     <script type="importmap">
+    {
+      "imports": {
+        "@patternfly/icons/far/copy.js": "https://ga.jspm.io/npm:@patternfly/[email protected]/far/copy.js",
+        "@patternfly/elements/pf-icon/pf-icon.js": "https://ga.jspm.io/npm:@patternfly/[email protected]/pf-icon/pf-icon.js",
+        "@rhds/elements/rh-button/rh-button.js": "https://ga.jspm.io/npm:@rhds/[email protected]/elements/rh-button/rh-button.js",
+        "@rhds/elements/rh-tooltip/rh-tooltip.js": "https://ga.jspm.io/npm:@rhds/[email protected]/elements/rh-tooltip/rh-tooltip.js",
+        "@rhds/elements/rh-alert/rh-alert.js": "https://ga.jspm.io/npm:@rhds/[email protected]/elements/rh-alert/rh-alert.js",
+        "@rhds/elements/rh-surface/rh-surface.js": "https://ga.jspm.io/npm:@rhds/[email protected]/elements/rh-surface/rh-surface.js"
+      },
+      "scopes": {
+        "https://ga.jspm.io/": {
+          "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/[email protected]/dist/floating-ui.core.mjs",
+          "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/[email protected]/dist/floating-ui.dom.mjs",
+          "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/[email protected]/dist/floating-ui.utils.mjs",
+          "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/[email protected]/dist/floating-ui.utils.dom.mjs",
+          "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/[email protected]/development/reactive-element.js",
+          "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/[email protected]/development/decorators/",
+          "@patternfly/pfe-core/controllers/": "https://ga.jspm.io/npm:@patternfly/[email protected]/controllers/",
+          "lit": "https://ga.jspm.io/npm:[email protected]/index.js",
+          "lit-element/lit-element.js": "https://ga.jspm.io/npm:[email protected]/development/lit-element.js",
+          "lit-html": "https://ga.jspm.io/npm:[email protected]/development/lit-html.js",
+          "lit-html/": "https://ga.jspm.io/npm:[email protected]/development/",
+          "lit/": "https://ga.jspm.io/npm:[email protected]/",
+          "tslib": "https://ga.jspm.io/npm:[email protected]/tslib.es6.mjs"
+        }
+      }
+    }
+    </script>
+    <script type="module">
+      import '@patternfly/elements/pf-icon/pf-icon.js';
+      import '@rhds/elements/rh-tooltip/rh-tooltip.js';
+      import '@rhds/elements/rh-surface/rh-surface.js';
+      import '@rhds/elements/rh-button/rh-button.js';
+      import '@rhds/elements/rh-alert/rh-alert.js';
+    </script>
+
+    <script type="module">
+      import Toast from './javascript/toast.js';
+
+      async function copy(html) {
+        await navigator.clipboard.writeText(html)
+      }
+
+      const tooltips = document.querySelectorAll('rh-tooltip');
+      tooltips.forEach(tip => {
+        const tipButton = tip.querySelector('rh-button');
+        tipButton.addEventListener('click', async (event) => {
+          const { html, icon } = event.target.dataset;
+          console.log(event.target.dataset);
+          copy(html); 
+          await Toast(`Copied ${icon}`);
+        });
+      })
+    </script>    
+  </head>
+  <body>
+    <header><h1>Red Hat Icons</h1></header>
+    <main>
+      {% for set in iconSets %}
+      {% set id = set.set | lower %}
+
+      {% if set.set === "ui" %}
+        {% set section = set.set | upper %} 
+      {% else %}
+        {% set section = set.set | capitalize %}
+      {% endif %}
+
+      <section class="{{ set.set }}" aria-labelledby="{{ id }}">
+        <h2 id="{{ id }}">{{ section }}</h2>
+        {% for icon in set.icons %}
+        <figure>
+          {% include set.dir + '/' + icon + '.svg' %}
+          <figcaption>
+            {{ icon }}
+             <rh-tooltip position="bottom">
+              <rh-button name="toast" variant="link" data-html='<rh-icon set="{{ set.set }}" icon="{{ icon }}"></rh-icon>' data-icon="{{icon}}">
+                <pf-icon set="far" icon="copy" size="md" loading="eager"></pf-icon>
+                Copy <span class="sr-only">{{icon}}</span>
+              </rh-button>
+              <pre slot="content"><code>&lt;rh-icon set="{{ set.set }}" icon="{{ icon }}"&gt;&lt;/rh-icon&gt;</code></pre>
+             </rh-tooltip>  
+          </figcaption>
+        </figure>
+        {% endfor %}
+      </section>{% endfor %}
+    </main>
+    <template id="toast">
+      <rh-alert state="success">
+        <h3 slot="header">Success</h3>
+        <p class="text"></p>
+      </rh-alert>
+    </template>
+    <footer><small>© Red Hat 2023</small></footer>
+  </body>
+</html>

docs/javascript/toast.js

@@ -0,0 +1,80 @@
+/**
+ * Modified: Adam Argyle's Gui Challenges Toast
+ * https://github.com/argyleink/gui-challenges/blob/main/toast/toast.js
+ * Apache License https://github.com/argyleink/gui-challenges/blob/main/LICENSE
+ */
+
+const init = () => {
+  const node = document.createElement('section')
+  node.classList.add('gui-toast-group')
+
+  document.body.insertAdjacentElement("beforeend",node);
+  return node
+}
+
+const createToast = text => {
+  const node = document.createElement('output')
+  const toast = document.querySelector('#toast').content.cloneNode(true);
+  toast.querySelector('p.text').innerText = text;
+  // node.innerText = text
+  node.appendChild(toast);
+  node.classList.add('gui-toast')
+  node.setAttribute('role', 'status')
+  node.setAttribute('aria-live', 'polite')
+
+  return node
+}
+
+const addToast = toast => {
+  const { matches:motionOK } = window.matchMedia(
+    '(prefers-reduced-motion: no-preference)'
+  )
+
+  Toaster.children.length && motionOK
+    ? flipToast(toast)
+    : Toaster.appendChild(toast)
+}
+
+const Toast = text => {
+  let toast = createToast(text)
+  addToast(toast)
+
+  return new Promise(async (resolve, reject) => {
+    await Promise.allSettled(
+      toast.getAnimations().map(animation => 
+        animation.finished
+      )
+    )
+    Toaster.removeChild(toast)
+    resolve() 
+  })
+}
+
+// https://aerotwist.com/blog/flip-your-animations/
+const flipToast = toast => {
+  // FIRST
+  const first = Toaster.offsetHeight
+
+  // add new child to change container size
+  Toaster.appendChild(toast)
+
+  // LAST
+  const last = Toaster.offsetHeight
+
+  // INVERT
+  const invert = last - first
+
+  // PLAY
+  const animation = Toaster.animate([
+    { transform: `translateY(${invert}px)` },
+    { transform: 'translateY(0)' }
+  ], {
+    duration: 150,
+    easing: 'ease-out',
+  })
+
+  animation.startTime = document.timeline.currentTime
+}
+
+const Toaster = init()
+export default Toast