ember-freestyle 0.13.0 → 0.13.2

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn compile-styles
+git add ./vendor/ember-freestyle.css

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.13.2](https://github.com/chrislopresto/ember-freestyle/compare/v0.13.1...v0.13.2) (2021-11-21)
+
+### [0.13.1](https://github.com/chrislopresto/ember-freestyle/compare/v0.13.0...v0.13.1) (2021-11-21)
+
+
+### Features
+
+* remove dependency on `ember-cli-sass` and `sass` ([5482db1](https://github.com/chrislopresto/ember-freestyle/commit/5482db1b11332526e6916f2147e59216120b5fd2))
+
+
+### Bug Fixes
+
+* pass down [@hide](https://github.com/hide)Controls argument ([c8eac40](https://github.com/chrislopresto/ember-freestyle/commit/c8eac406cc1e59b99f659b68fed7af5b4722d5d4))
+
 ## [0.13.0](https://github.com/chrislopresto/ember-freestyle/compare/v0.12.11...v0.13.0) (2021-10-29)
 
 

package/README.md

@@ -58,12 +58,41 @@ You can even use the constituent components like `freestyle-usage` on their own.
 Hopefully the installation instructions got you off to a smooth, seamless start.
 If you have any problems, feel free to chat with us in the [Ember Community Discord](https://discord.gg/emberjs) or [open an issue](https://github.com/chrislopresto/ember-freestyle/issues/new). As always, PRs are welcome!
 
-## Removing Ember Freestyle from Your Production Build
+## Excluding Ember Freestyle's Styles
+
+If you want to exclude Ember Freestyle's styles, you can set the `includeStyles`
+option to `false` in your `ember-cli-build.js` file:
+
+```js
+// ember-cli-build.js
+
+module.exports = function (defaults) {
+  const app = new EmberApp(defaults, {
+    'ember-freestyle': {
+      includeStyles: false,
+    },
+  };
+};
+```
+
+This might be useful in case you want to define your own styles _or_ if you are
+using `ember-cli-sass` and want to import Ember Freestyle's styles explicitly:
+
+```scss
+$FreestyleGuide-color--primary: #C70039;
+$FreestyleGuide-color--accent: #DAF7A6;
+
+@import 'ember-freestyle';
+```
+
+## Excluding Ember Freestyle from Your Production Build
 
 We recommend excluding Ember Freestyle from production builds using Ember CLI's
 `addons.blacklist` option.
 
 ```js
+// ember-cli-build.js
+
 const environment = process.env.EMBER_ENV;
 const addonsToExclude = environment === 'production' ? ['ember-freestyle'] : [];
 

package/addon/components/freestyle/usage/array/index.hbs

@@ -5,6 +5,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   {{#each @items key=@identity as |item index|}}
     <div class="FreestyleUsageArray-item">

package/addon/components/freestyle/usage/bool/index.hbs

@@ -4,6 +4,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::Bool::Control
     @value={{@value}}

package/addon/components/freestyle/usage/number/index.hbs

@@ -4,6 +4,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::Number::Control
     @value={{@value}}

package/addon/components/freestyle/usage/object/index.hbs

@@ -4,6 +4,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::Object::Control
     @value={{@value}}

package/addon/components/freestyle/usage/string/index.hbs

@@ -5,6 +5,7 @@
   @required={{@required}}
   @array={{@array}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::String::Control
     @options={{@options}}

package/index.js

@@ -1,5 +1,9 @@
 'use strict';
 
+const DEFAULT_OPTIONS = {
+  includeStyles: true,
+};
+
 module.exports = {
   name: require('./package').name,
 
@@ -11,10 +15,20 @@ module.exports = {
     this._super.included.apply(this, arguments);
     // support for nested addon
     // see: https://github.com/ember-cli/ember-cli/issues/3718
-    var target = parentAddon || app;
+    const target = parentAddon || app;
+
     if (!this.app && target.app) {
       this.app = target.app;
     }
+
+    const options = {
+      ...DEFAULT_OPTIONS,
+      ...this.app.options[this.name],
+    };
+
+    if (options.includeStyles === true) {
+      this.app.import('vendor/ember-freestyle.css');
+    }
   },
 
   setupPreprocessorRegistry(type, registry) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-freestyle",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "description": "Create a living styleguide for your Ember app.",
   "keywords": [
     "ember-addon"
@@ -14,6 +14,7 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
+    "compile-styles": "node ./script/compile-styles.js",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
     "lint:css": "stylelint \"./**/*.scss\"",
     "lint:css:fix": "stylelint \"./**/*.scss\" --fix",
@@ -22,6 +23,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "prepare": "husky install",
     "start": "ember serve",
     "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
@@ -39,29 +41,28 @@
     "ember-auto-import": "^1.11.3",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^6.0.0",
-    "ember-cli-sass": "^10.0.0",
     "ember-modifier": "^2.1.2",
     "ember-named-blocks-polyfill": "^0.2.4",
     "ember-truth-helpers": "^3.0.0",
     "json-formatter-js": "^2.3.4",
     "macro-decorators": "^0.1.2",
-    "sass": "^1.43.3",
     "strip-indent": "^3.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.5.0",
-    "@embroider/test-setup": "^0.47.0",
+    "@ember/test-helpers": "^2.6.0",
+    "@embroider/test-setup": "^0.47.2",
     "all-contributors-cli": "^6.14.1",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.28.3",
+    "ember-cli": "~3.28.4",
     "ember-cli-autoprefixer": "^1.0.3",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-deploy": "^1.0.2",
     "ember-cli-deploy-build": "^2.0.0",
     "ember-cli-deploy-git": "^1.3.4",
     "ember-cli-inject-live-reload": "^2.1.0",
+    "ember-cli-sass": "^10.0.0",
     "ember-cli-showdown": "^6.0.0",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-terser": "^4.0.2",
@@ -69,13 +70,13 @@
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^1.0.0",
-    "ember-page-title": "^6.2.2",
+    "ember-page-title": "^7.0.0",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
-    "ember-source": "~3.28.4",
+    "ember-source": "~3.28.6",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^3.10.0",
-    "ember-try": "^1.4.0",
+    "ember-template-lint": "^3.13.0",
+    "ember-try": "^2.0.0",
     "eslint": "^7.32.0",
     "eslint-config-ember": "0.3.0",
     "eslint-config-prettier": "^8.3.0",
@@ -83,12 +84,14 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-qunit": "^7.0.0",
+    "husky": "^7.0.4",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.2",
     "qunit": "^2.16.0",
     "qunit-dom": "^2.0.0",
     "remarkable": "^2.0.0",
+    "sass": "^1.43.4",
     "standard-version": "^9.3.2",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^9.0.3",

package/vendor/ember-freestyle.css

@@ -0,0 +1,523 @@
+.FreestyleGuide {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100vh;
+  min-width: 320px;
+}
+.FreestyleGuide-header, .FreestyleGuide-footer {
+  display: flex;
+  flex: none;
+}
+.FreestyleGuide-header {
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: solid 1px #b6b6b6;
+  padding: 0.5rem 1rem;
+}
+.FreestyleGuide-cta {
+  cursor: pointer;
+  display: inline-block;
+  flex-basis: 20px;
+  font-size: 1.4rem;
+  text-align: center;
+}
+.FreestyleGuide-ctaIcon:hover {
+  fill: #00bcd4;
+}
+.FreestyleGuide-titleContainer {
+  padding: 0 1rem;
+  text-align: center;
+}
+.FreestyleGuide-title {
+  font-size: 1.4rem;
+  font-weight: bold;
+}
+@media (min-width: 600px) {
+  .FreestyleGuide-title {
+    font-size: 1.9rem;
+  }
+}
+.FreestyleGuide-subtitle {
+  margin: 0 auto;
+}
+.FreestyleGuide-body {
+  background-color: #fff;
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+}
+@media (min-width: 600px) {
+  .FreestyleGuide-body {
+    flex-direction: row;
+  }
+}
+.FreestyleGuide-content {
+  margin-top: 1.5rem;
+  overflow: auto;
+}
+@media (min-width: 600px) {
+  .FreestyleGuide-content {
+    flex: 1;
+    margin: 0;
+  }
+}
+.FreestyleGuide-nav {
+  background-color: #fff;
+  order: -1;
+  padding: 1rem;
+}
+@media (min-width: 600px) {
+  .FreestyleGuide-nav {
+    border-right: solid 1px #b6b6b6;
+    flex: 0 0 18rem;
+  }
+}
+.FreestyleGuide-aside {
+  background: #fff;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  margin-right: 0.5rem;
+  order: -2;
+  position: fixed;
+  right: 0.5rem;
+}
+@media (min-width: 600px) {
+  .FreestyleGuide-aside {
+    border-left: solid 1px #b6b6b6;
+    order: 1;
+  }
+}
+.FreestyleGuide-chooseSectionMessage {
+  display: flex;
+  height: 100%;
+  font-size: 1.4rem;
+}
+.FreestyleGuide-chooseSectionMessage > span {
+  margin: auto;
+}
+
+.FreestyleCollection {
+  max-width: 1200px;
+}
+.FreestyleCollection-title {
+  font-weight: bold;
+  padding: 1rem 1rem 0;
+  text-transform: uppercase;
+}
+.FreestyleCollection-variantList {
+  background-color: #fff;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  color: #212121;
+  display: flex;
+  height: 48px;
+  list-style-type: none;
+  margin: 1rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0;
+  position: relative;
+  white-space: nowrap;
+}
+.FreestyleCollection-variantListItem {
+  cursor: pointer;
+  display: block;
+  flex-grow: 1;
+  float: left;
+  font-size: 14px;
+  height: 48px;
+  letter-spacing: 0.8px;
+  line-height: 48px;
+  margin: 0;
+  min-width: 120px;
+  overflow: hidden;
+  padding: 0;
+  text-align: center;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  width: 15%;
+}
+.FreestyleCollection-variantListItem:hover, .FreestyleCollection-variantListItem--active {
+  border-bottom: solid 3px #00bcd4;
+  color: #00bcd4;
+}
+
+.FreestyleDynamic-input {
+  margin-bottom: 10px;
+}
+.FreestyleDynamic-input input[type=text],
+.FreestyleDynamic-input textarea {
+  display: block;
+}
+.FreestyleDynamic-inputDescription {
+  display: block;
+}
+
+.FreestyleVariant--inline {
+  display: inline-block;
+}
+
+.FreestyleAnnotation {
+  font-size: 0.9rem;
+  padding: 0 1rem;
+}
+
+.FreestyleUsageControls {
+  background: #fff;
+  font-size: 0.9rem;
+  padding: 1rem;
+  text-align: left;
+  width: 200px;
+}
+.FreestyleUsageControls-header {
+  color: #00bcd4;
+  font-weight: bold;
+  margin-bottom: 0.3rem;
+  text-transform: uppercase;
+}
+.FreestyleUsageControls-item {
+  align-items: baseline;
+  display: flex;
+}
+.FreestyleUsageControls-item--focus {
+  padding-top: 0.6rem;
+}
+.FreestyleUsageControls-itemControl {
+  cursor: pointer;
+  padding-right: 0.1rem;
+}
+.FreestyleUsageControls-itemLabel {
+  font-size: 0.8rem;
+}
+.FreestyleUsageControls-input--focus {
+  margin-bottom: 0.2rem;
+}
+.FreestyleUsageControls-button {
+  background-color: #00bcd4;
+  border: 0;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  color: #fff;
+  cursor: pointer;
+  font-size: 0.6rem;
+  padding: 0.4rem 1rem;
+  text-transform: uppercase;
+}
+
+.FreestylePalette-title {
+  font-size: 1.4rem;
+  font-weight: bold;
+  padding-bottom: 2px;
+  padding-top: 10px;
+}
+.FreestylePalette-description {
+  font-size: 0.8rem;
+  padding-bottom: 5px;
+}
+
+/* BEGIN-FREESTYLE-USAGE fpi--notes
+# Markdown Notes In SCSS!
+
+Hey look... these are `markdown` notes:
+
+- coming from scss
+- looking nice
+
+END-FREESTYLE-USAGE */
+.FreestylePaletteItem {
+  border: solid 1px #cecece;
+  display: inline-block;
+  margin: 0 5px 5px 0;
+}
+.FreestylePaletteItem-color {
+  height: 90px;
+  width: 160px;
+}
+.FreestylePaletteItem-info {
+  background-color: #fff;
+  border-top: solid 1px #cecece;
+  padding: 5px;
+}
+.FreestylePaletteItem-hex {
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 0;
+}
+.FreestylePaletteItem-name {
+  color: #2f4f4f;
+  font-size: 11px;
+  margin-top: 0;
+}
+
+.FreestyleUsage {
+  max-width: 1200px;
+}
+.FreestyleUsage-title {
+  font-weight: bold;
+  padding: 1rem 1rem 0;
+  text-transform: uppercase;
+}
+.FreestyleUsage-rendered {
+  padding: 1rem;
+}
+.FreestyleUsage-usage {
+  padding-bottom: 10px;
+}
+.FreestyleUsage-sourceContainer pre {
+  font-size: 0.8rem;
+  margin-top: 0;
+}
+.FreestyleUsage-sourceContainer pre.hljs {
+  padding: 0.5rem 1rem;
+}
+.FreestyleUsage--inline {
+  border-bottom: 0;
+  display: inline-block;
+  margin-bottom: 0;
+  padding-bottom: 0;
+  width: 100%;
+}
+@media (min-width: 600px) {
+  .FreestyleUsage--inline {
+    max-width: inherit;
+    width: auto;
+  }
+}
+.FreestyleUsage-focusCta {
+  cursor: pointer;
+  fill: #b6b6b6;
+  position: relative;
+  top: 1px;
+}
+.FreestyleUsage-focusCta:hover {
+  fill: #00bcd4;
+}
+
+.FreestyleSection-name {
+  border-bottom: solid 1px #ccc;
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin: 0 1rem;
+  max-width: calc(1200px - 1rem);
+  padding: 1rem 0 0.4rem;
+  text-transform: uppercase;
+}
+.FreestyleSection--hidden {
+  display: none;
+}
+
+.FreestyleSubsection.is-hidden {
+  display: none;
+}
+.FreestyleSubsection-name {
+  font-size: 1.3rem;
+  margin: 0 1rem;
+  padding: 0.8rem 0 0.4rem;
+  text-transform: uppercase;
+}
+
+.FreestyleMenu {
+  font-size: 14px;
+  list-style: none;
+  padding-left: 1rem;
+}
+.FreestyleMenu-item, .FreestyleMenu-submenuItem {
+  padding-top: 0.6rem;
+  text-transform: uppercase;
+}
+.FreestyleMenu-itemLink, .FreestyleMenu-submenuItemLink {
+  color: #212121;
+  text-decoration: none;
+}
+.FreestyleMenu-itemLink.active, .FreestyleMenu-submenuItemLink.active {
+  color: #00bcd4;
+  text-decoration: none;
+}
+.FreestyleMenu-itemLink:hover, .FreestyleMenu-submenuItemLink:hover {
+  color: #ffc107;
+  text-decoration: none;
+}
+.FreestyleMenu-submenu {
+  list-style: none;
+  padding-left: 1rem;
+}
+
+.FreestyleSource-title {
+  font-size: 0.7rem;
+  font-weight: bold;
+  padding: 0.5rem 1rem 0.2rem;
+  text-transform: uppercase;
+}
+
+.FreestyleTypeface-previewHero, .FreestyleTypeface-previewSample {
+  font-family: inherit;
+}
+.FreestyleTypeface-previewHero {
+  font-size: 140px;
+  line-height: 1.05;
+}
+.FreestyleTypeface-previewSample {
+  font-size: 15px;
+  margin: 0;
+}
+
+.FreestyleUsage {
+  --radius: 4px;
+  --border-color: #eee;
+  padding: 0 1rem 1rem;
+  margin-bottom: 1rem;
+  max-width: 1200px;
+}
+.FreestyleUsage:last-child {
+  border-bottom: 1px solid #ccc;
+}
+.FreestyleUsage-name {
+  color: #333;
+  margin-top: 1.5rem;
+}
+.FreestyleUsage-description {
+  margin: 0.5rem 0;
+  font-size: 1.1rem;
+  color: #666;
+}
+.FreestyleUsage-apiTitle {
+  font-size: 0.9rem;
+  font-weight: bold;
+  margin: 0;
+}
+.FreestyleUsage-standaloneFocusCta {
+  float: right;
+  margin-right: 1rem;
+}
+.FreestyleUsage-preview {
+  padding: 1.5rem;
+  margin: 1rem 0;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  position: relative;
+}
+.FreestyleUsage-preview:after {
+  content: "Preview";
+  font-size: 0.7rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: #eee;
+  color: #777;
+  padding: 2px 8px;
+  display: block;
+  border-radius: 0 0 0 var(--radius);
+}
+.FreestyleUsage-sourceContainer, .FreestyleUsage-apiTable {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+.FreestyleUsage-apiTable {
+  width: 100%;
+  padding: 0.5rem 0 0.2rem;
+  border-collapse: collapse;
+}
+.FreestyleUsage-apiTable th {
+  text-align: left;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #777;
+}
+.FreestyleUsage-apiTable tr {
+  border-bottom: 1px solid var(--border-color);
+  vertical-align: top;
+}
+.FreestyleUsage-apiTable tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+.FreestyleUsage-apiTable th,
+.FreestyleUsage-apiTable td {
+  padding: 0.5rem 1rem;
+}
+.FreestyleUsage-sourceContainer {
+  margin-top: 1rem;
+}
+
+/*
+  FreestyleUsageArgument
+*/
+.FreestyleUsageArgument {
+  font-size: 0.8rem;
+}
+.FreestyleUsageArgument-name {
+  font-weight: bold;
+  width: 20%;
+}
+.FreestyleUsageArgument-description {
+  width: 40%;
+}
+.FreestyleUsageArgument-required {
+  color: #d81c38;
+  font-style: oblique;
+}
+.FreestyleUsageArgument-default {
+  font-family: monospace;
+}
+.FreestyleUsageArgument-jsonViewer {
+  background-color: #222;
+  min-width: 300px;
+  padding: 1rem;
+}
+
+.FreestyleUsageBoolean {
+  position: relative;
+  display: flex;
+}
+.FreestyleUsageBoolean:after {
+  content: "False";
+  display: block;
+  position: absolute;
+  top: 2px;
+  left: 27px;
+  font-family: monospace;
+  color: #999;
+}
+.FreestyleUsageBoolean.is-checked:after {
+  content: "True";
+  color: #333;
+  font-weight: 700;
+}
+
+.FreestyleUsageArray-item {
+  margin: 0 0 0.5em 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.FreestyleUsageArray-removeItem, .FreestyleUsageArray-addItem {
+  background: transparent;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  padding: 2px 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: 0.8em;
+  border-radius: 4px;
+}
+.FreestyleUsageArray-removeItem {
+  color: #999;
+  opacity: 0.5;
+}
+.FreestyleUsageArray-addItem {
+  font-weight: 700;
+  padding: 3px 8px;
+  color: #666;
+  background: #ddd;
+}
+.FreestyleUsageArray-item:hover .FreestyleUsageArray-removeItem {
+  opacity: 1;
+}
+
+.u-codePill {
+  background-color: #eee;
+  border-radius: 2px;
+  color: #777;
+  display: inline-block;
+  font-family: monospace;
+  margin-right: 0.2em;
+  padding: 1px 7px;
+}