@cardstack/boxel-cli 0.2.0-unstable.448 → 0.3.0-unstable.13

package/bundled-types/boxel-ui/components/button/usage.gts

@@ -0,0 +1,334 @@
+import { array, fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import cn from '../../helpers/cn.ts';
+import { eq } from '../../helpers/truth-helpers.ts';
+import BoxelButton, {
+  type BoxelButtonKind,
+  type BoxelButtonSize,
+  buttonKindOptions,
+  buttonSizeOptions,
+} from './index.gts';
+
+export default class ButtonUsage extends Component {
+  sizeVariants = buttonSizeOptions;
+  kindVariants = buttonKindOptions;
+
+  // base button arguments
+  @tracked as = 'button';
+  @tracked size?: BoxelButtonSize;
+  @tracked kind?: BoxelButtonKind;
+  @tracked disabled?: boolean;
+  @tracked loading?: boolean;
+  @tracked rectangular?: boolean;
+
+  // for @as === 'anchor'
+  @tracked href = '#';
+
+  // for @as === 'link-to'
+  @tracked route = 'index';
+  // @model and @query seem hard to use here so leaving them aside for now
+
+  @action
+  alert(): void {
+    if (this.loading) {
+      return;
+    }
+    alert('Hey! You clicked the button.');
+  }
+
+  <template>
+    <FreestyleUsage @name='Button' class='boxel-button-usage'>
+      <:example>
+        <div
+          class={{cn
+            'usage-button-centers-component'
+            usage-button-dark-mode-background=(eq this.kind 'secondary-dark')
+          }}
+        >
+          <BoxelButton
+            @as={{this.as}}
+            @kind={{this.kind}}
+            @size={{this.size}}
+            @disabled={{this.disabled}}
+            @loading={{this.loading}}
+            @href={{this.href}}
+            @route={{this.route}}
+            @rectangular={{this.rectangular}}
+            {{on 'click' this.alert}}
+          >
+            Sample CTA
+          </BoxelButton>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='as'
+          @optional={{true}}
+          @value={{this.as}}
+          @options={{array 'button' 'anchor' 'link-to'}}
+          @description="Determines the component/tag that is used to render the element. 'button' renders a 'button', 'anchor' renders an 'a', and 'link-to' renders a 'LinkTo'. Note that for accessibility purposes, you should be careful about adding aria/other attributes to a disabled link."
+          @onInput={{fn (mut this.as)}}
+        />
+        <Args.String
+          @name='route'
+          @optional={{true}}
+          @description='The route argument for LinkTo'
+          @onInput={{fn (mut this.route)}}
+          @value={{this.route}}
+        />
+        <Args.Object
+          @name='models'
+          @description='The models argument for LinkTo'
+          @optional={{true}}
+          @defaultValue='[]'
+        />
+        <Args.String
+          @name='query'
+          @description='The query argument for LinkTo'
+          @optional={{true}}
+        />
+        <Args.String
+          @name='href'
+          @optional={{true}}
+          @description='A url that the button can lead to'
+          @onInput={{fn (mut this.href)}}
+          @value={{this.href}}
+        />
+        <Args.String
+          @name='kind'
+          @optional={{true}}
+          @description='Controls the colors of the button'
+          @defaultValue='secondary'
+          @options={{this.kindVariants}}
+          @onInput={{fn (mut this.kind)}}
+          @value={{this.kind}}
+        />
+        <Args.String
+          @name='size'
+          @optional={{true}}
+          @description='Controls the size of the button'
+          @defaultValue='base'
+          @options={{this.sizeVariants}}
+          @onInput={{fn (mut this.size)}}
+          @value={{this.size}}
+        />
+        <Args.Bool
+          @name='rectangular'
+          @optional={{true}}
+          @description='Changes the level of border-radius roundness'
+          @onInput={{fn (mut this.rectangular)}}
+          @value={{this.rectangular}}
+          @defaultValue={{false}}
+        />
+        <Args.Bool
+          @name='disabled'
+          @optional={{true}}
+          @description='Controls whether the button is disabled'
+          @onInput={{fn (mut this.disabled)}}
+          @value={{this.disabled}}
+        />
+        <Args.Bool
+          @name='loading'
+          @optional={{true}}
+          @description='Controls whether the button is loading'
+          @onInput={{fn (mut this.loading)}}
+          @value={{this.loading}}
+        />
+        <Args.Yield @description='Contents of the button' />
+      </:api>
+      <:description>
+        Depending on the value of
+        <code>@as</code>, the button will accept different arguments.
+        <table class='usage-button-explanation'>
+          <tbody>
+            <tr>
+              <td>
+                <code>
+                  @as
+                </code>
+              </td>
+              <td>
+                Accepted arguments
+              </td>
+              <td>
+                Used for
+              </td>
+            </tr>
+            <tr>
+              <td>
+                button
+              </td>
+              <td>
+                <ul>
+                  <li><code>@size</code></li>
+                  <li><code>@kind</code></li>
+                  <li><code>@disabled</code></li>
+                  <li><code>@loading</code></li>
+                </ul>
+              </td>
+              <td>
+                Actions
+              </td>
+            </tr>
+            <tr>
+              <td>
+                anchor
+              </td>
+              <td>
+                <ul>
+                  <li><code>@size</code></li>
+                  <li><code>@kind</code></li>
+                  <li><code>@disabled</code></li>
+                  <li><code>@href</code></li>
+                </ul>
+              </td>
+              <td>
+                Any navigation, e.g. external CTA
+              </td>
+            </tr>
+            <tr>
+              <td>
+                link-to
+              </td>
+              <td>
+                <ul>
+                  <li><code>@size</code></li>
+                  <li><code>@kind</code></li>
+                  <li><code>@disabled</code></li>
+                  <li><code>@route</code></li>
+                  <li><code>@models</code></li>
+                  <li><code>@query</code></li>
+                </ul>
+                <br />
+                <code>@route, @models,</code>
+                and
+                <code>@query</code>
+                are passed to
+                <code>LinkTo</code>
+                directly
+              </td>
+              <td>
+                Navigation within the app
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <p>Note: All css-variables below can be set at the top-level element.</p>
+      </:description>
+      <:cssVars as |Css|>
+        <Css.Basic @name='--boxel-button-text-color' @type='color' />
+        <Css.Basic @name='--boxel-button-color' @type='background-color' />
+        <Css.Basic
+          @name='--boxel-button-border'
+          @type='border'
+          @description='(css shorthand property)'
+        />
+        <Css.Basic @name='--boxel-button-border-radius' @type='border-radius' />
+        <Css.Basic
+          @name='--boxel-button-font'
+          @type='font'
+          @description='(css shorthand property)'
+        />
+        <Css.Basic
+          @name='--boxel-button-letter-spacing'
+          @type='letter-spacing'
+        />
+        <Css.Basic
+          @name='--boxel-button-transition'
+          @type='transition'
+          @description='(css shorthand property)'
+        />
+        <Css.Basic @name='--boxel-button-min-height' @type='min-height' />
+        <Css.Basic @name='--boxel-button-min-width' @type='min-width' />
+        <Css.Basic @name='--boxel-button-padding' @type='padding' />
+        <Css.Basic @name='--boxel-button-box-shadow' @type='box-shadow' />
+        <Css.Basic
+          @name='--boxel-button-loading-icon-size'
+          @type='width, height'
+          @description='loading-indicator size'
+        />
+        <Css.Basic
+          @name='--boxel-button-loading-indicator-gap'
+          @type='margin-right'
+          @description='for loading-indicator icon'
+        />
+      </:cssVars>
+    </FreestyleUsage>
+
+    <FreestyleUsage
+      @name='LinkTo button'
+      @description='This button links you to the index page'
+      class='boxel-button-usage'
+    >
+      <:example>
+        <div
+          class={{cn
+            'usage-button-centers-component'
+            usage-button-dark-mode-background=(eq this.kind 'secondary-dark')
+          }}
+        >
+          <BoxelButton
+            @as='link-to'
+            @kind={{this.kind}}
+            @size={{this.size}}
+            @route='index'
+            @query=''
+          >
+            Link CTA
+          </BoxelButton>
+        </div>
+      </:example>
+    </FreestyleUsage>
+    <style scoped>
+      .boxel-button-usage {
+        --boxel-border-radius: 100px;
+      }
+      :deep(.FreestyleUsage-preview) {
+        border-radius: 10px;
+      }
+
+      .usage-button-container {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .usage-button-explanation {
+        border: 1px solid black;
+        border-collapse: collapse;
+        margin-top: 1rem;
+      }
+
+      .usage-button-explanation td {
+        border: 1px solid black;
+        padding: 0.25rem;
+      }
+
+      .usage-button-centers-component {
+        flex-basis: 0;
+        flex-grow: 99;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100%;
+        padding: 2rem;
+        background-color: var(--background, var(--boxel-light));
+        color: var(--foreground, var(--boxel-dark));
+      }
+
+      .usage-button-dark-mode-background {
+        background-color: var(--foreground, var(--boxel-700));
+        color: var(--background, var(--boxel-light));
+      }
+
+      :deep(.FreestyleUsageCssVar input) {
+        display: none;
+      }
+    </style>
+  </template>
+}

package/bundled-types/boxel-ui/components/card-container/index.gts

@@ -0,0 +1,251 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import cn from '../../helpers/cn.ts';
+import element from '../../helpers/element.ts';
+import { sanitizeHtml } from '../../helpers/sanitize-html.ts';
+
+interface Signature {
+  Args: {
+    cssImports?: string[];
+    displayBoundaries?: boolean;
+    isThemed?: boolean;
+    tag?: keyof HTMLElementTagNameMap;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
+const CardContainer: TemplateOnlyComponent<Signature> = <template>
+  {{#let (element @tag) as |Tag|}}
+    <Tag
+      class={{cn
+        'boxel-card-container'
+        boxel-card-container--boundaries=@displayBoundaries
+        boxel-card-container--themed=@isThemed
+      }}
+      data-boxel-card-container
+      data-test-boxel-card-container
+      ...attributes
+    >
+      {{yield}}
+      {{#if @cssImports.length}}
+        {{! template-lint-disable require-scoped-style  }}
+        <style>
+          {{#each @cssImports as |url|}}
+            @import url('{{sanitizeHtml url}}');
+          {{/each}}
+        </style>
+        {{! template-lint-enable require-scoped-style  }}
+      {{/if}}
+    </Tag>
+  {{/let}}
+
+  {{! Note: styles for this component use :global to avoid issues with
+      cached HTML if this component changes. This is important because it
+      ends up in nearly every card's prerendered HTML
+  }}
+  <style scoped>
+    :global(.boxel-card-container) {
+      position: relative;
+      background-color: var(--background, var(--boxel-light));
+      border-radius: var(--_boxel-radius);
+      color: var(--foreground, var(--boxel-dark));
+      transition:
+        max-width var(--boxel-transition),
+        box-shadow var(--boxel-transition);
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+      z-index: 0;
+    }
+    :global(.boxel-card-container--boundaries:not(.hide-boundaries)) {
+      box-shadow: 0 0 0 1px var(--border, var(--boxel-border-color));
+    }
+
+    :global(.boxel-card-container--themed) {
+      /* setting boxel base css variable overrides, with boxel defaults as fallback */
+      --_boxel-scale: var(--theme-scale, var(--boxel-ratio));
+      --theme-spacing: calc(var(--spacing) * 4);
+      --boxel-spacing: var(--theme-spacing, var(--_boxel-spacing));
+      --boxel-font-size: var(
+        --theme-font-size,
+        var(--theme-body-font-size, var(--_boxel-font-size))
+      );
+      --boxel-radius: var(--radius, var(--_boxel-radius));
+      --_boxel-ff: var(--font-sans, var(--boxel-font-family));
+
+      /*** code below this line is from "variables.css". values will be recalculated based on theming variable values ***/
+      /* font-sizes */
+      --boxel-font-size-2xl: calc(var(--boxel-font-size) * 2.25);
+      --boxel-font-size-xl: calc(var(--boxel-font-size) * 2);
+      --boxel-font-size-lg: calc(var(--boxel-font-size) * 1.375);
+      --boxel-font-size-md: calc(var(--boxel-font-size) * 1.25);
+      --boxel-font-size-sm: calc(var(--boxel-font-size) * 0.875);
+      --boxel-font-size-xs: calc(var(--boxel-font-size) * 0.75);
+      --boxel-font-size-2xs: calc(var(--boxel-font-size) * 0.6875);
+
+      /* font-size options based on font-scale */
+      --boxel-fs-2xl: calc(var(--boxel-fs-xl) * var(--_boxel-scale)); /* h1 */
+      --boxel-fs-xl: calc(var(--boxel-fs-lg) * var(--_boxel-scale)); /* h2 */
+      --boxel-fs-lg: calc(var(--boxel-fs-md) * var(--_boxel-scale)); /* h3 */
+      --boxel-fs-md: calc(var(--boxel-fs) * var(--_boxel-scale)); /* h4 */
+      --boxel-fs: var(--boxel-font-size); /* p */
+      --boxel-fs-sm: calc(var(--boxel-fs) / var(--_boxel-scale));
+      --boxel-fs-xs: calc(var(--boxel-fs-sm) / var(--_boxel-scale));
+      --boxel-fs-2xs: calc(var(--boxel-fs-xs) / var(--_boxel-scale));
+
+      /* spacing */
+      --boxel-sp-6xs: calc(var(--boxel-sp-5xs) / var(--_boxel-scale));
+      --boxel-sp-5xs: calc(var(--boxel-sp-4xs) / var(--_boxel-scale));
+      --boxel-sp-4xs: calc(var(--boxel-sp-3xs) / var(--_boxel-scale));
+      --boxel-sp-3xs: calc(var(--boxel-sp-2xs) / var(--_boxel-scale));
+      --boxel-sp-2xs: calc(var(--boxel-sp-xs) / var(--_boxel-scale));
+      --boxel-sp-xs: calc(var(--boxel-sp-sm) / var(--_boxel-scale));
+      --boxel-sp-sm: calc(var(--boxel-sp) / var(--_boxel-scale));
+      --boxel-sp: var(--boxel-spacing); /* base */
+      --boxel-sp-lg: calc(var(--boxel-sp) * var(--_boxel-scale));
+      --boxel-sp-xl: calc(var(--boxel-sp-lg) * var(--_boxel-scale));
+      --boxel-sp-2xl: calc(var(--boxel-sp-xl) * var(--_boxel-scale));
+      --boxel-sp-3xl: calc(var(--boxel-sp-2xl) * var(--_boxel-scale));
+      --boxel-sp-4xl: calc(var(--boxel-sp-3xl) * var(--_boxel-scale));
+      --boxel-sp-5xl: calc(var(--boxel-sp-4xl) * var(--_boxel-scale));
+      --boxel-sp-6xl: calc(var(--boxel-sp-5xl) * var(--_boxel-scale));
+
+      /* border-radius */
+      --boxel-border-radius-xxs: calc(var(--boxel-border-radius-xs) - 2.5px);
+      --boxel-border-radius-xs: calc(var(--boxel-border-radius-sm) - 3px);
+      --boxel-border-radius-sm: calc(var(--boxel-border-radius) - 3px);
+      --boxel-border-radius: var(--boxel-radius); /* base */
+      --boxel-border-radius-lg: calc(var(--boxel-border-radius) + 2px);
+      --boxel-border-radius-xl: calc(var(--boxel-border-radius-lg) + 3px);
+      --boxel-border-radius-xxl: calc(var(--boxel-border-radius-xl) + 5px);
+      --boxel-form-control-border-radius: var(--boxel-border-radius);
+
+      /* h1 */
+      --boxel-heading-font-family: var(
+        --theme-heading-font-family,
+        var(--_boxel-ff)
+      );
+      --boxel-heading-font-size: var(
+        --theme-heading-font-size,
+        var(--boxel-font-size-lg)
+      );
+      --boxel-heading-line-height: var(
+        --theme-heading-line-height,
+        var(--boxel-line-height-lg)
+      );
+      --boxel-heading-font-weight: var(--theme-heading-font-weight, 700);
+
+      /* h2 */
+      --boxel-section-heading-font-family: var(
+        --theme-section-heading-font-family,
+        var(--boxel-heading-font-family)
+      );
+      --boxel-section-heading-font-size: var(
+        --theme-section-heading-font-size,
+        var(--boxel-font-size-md)
+      );
+      --boxel-section-heading-line-height: var(
+        --theme-section-heading-line-height,
+        var(--boxel-heading-line-height)
+      );
+      --boxel-section-heading-font-weight: var(
+        --theme-section-heading-font-weight,
+        var(--boxel-heading-font-weight, 500)
+      );
+
+      /* h3 */
+      --boxel-subheading-font-family: var(
+        --theme-subheading-font-family,
+        var(--boxel-heading-font-family)
+      );
+      --boxel-subheading-font-size: var(
+        --theme-subheading-font-size,
+        var(--boxel-font-size)
+      );
+      --boxel-subheading-line-height: var(
+        --theme-subheading-line-height,
+        var(--boxel-heading-line-height)
+      );
+      --boxel-subheading-font-weight: var(--theme-subheading-font-weight, 500);
+
+      /* base */
+      --boxel-body-font-family: var(--theme-body-font-family, var(--_boxel-ff));
+      --boxel-body-font-size: var(
+        --theme-body-font-size,
+        var(--boxel-font-size-sm)
+      );
+      --boxel-body-line-height: var(
+        --theme-body-line-height,
+        var(--boxel-line-height-sm)
+      );
+      --boxel-body-font-weight: var(--theme-body-font-weight, 400);
+
+      /* small text */
+      --boxel-caption-font-family: var(
+        --theme-caption-font-family,
+        var(--boxel-body-font-family)
+      );
+      --boxel-caption-font-size: var(
+        --theme-caption-font-size,
+        var(--boxel-font-size-xs)
+      );
+      --boxel-caption-line-height: var(
+        --theme-caption-line-height,
+        var(--boxel-line-height-xs)
+      );
+      --boxel-caption-font-weight: var(--theme-caption-font-weight, 500);
+
+      font-family: var(--boxel-body-font-family);
+      font-size: var(--boxel-body-font-size);
+      font-weight: var(--boxel-body-font-weight);
+      letter-spacing: var(--tracking-normal);
+      line-height: var(--boxel-body-line-height);
+    }
+
+    @layer reset {
+      :global(h1),
+      :global(h2),
+      :global(h3),
+      :global(h4),
+      :global(h5),
+      :global(h6),
+      :global(p) {
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+        margin-block-start: 0;
+        margin-block-end: 0;
+      }
+
+      :global(h1) {
+        font-family: var(--boxel-heading-font-family);
+        font-size: var(--boxel-heading-font-size);
+        font-weight: var(--boxel-heading-font-weight);
+        line-height: var(--boxel-heading-line-height);
+      }
+      :global(h2) {
+        font-family: var(--boxel-section-heading-font-family);
+        font-size: var(--boxel-section-heading-font-size);
+        font-weight: var(--boxel-section-heading-font-weight);
+        line-height: var(--boxel-section-heading-line-height);
+      }
+      :global(h3) {
+        font-family: var(--boxel-subheading-font-family);
+        font-size: var(--boxel-subheading-font-size);
+        font-weight: var(--boxel-subheading-font-weight);
+        line-height: var(--boxel-subheading-line-height);
+      }
+      :global(h4, h5, h6) {
+        font-size: inherit;
+      }
+      :global(small) {
+        font-size: var(--boxel-caption-font-size);
+        line-height: var(--boxel-caption-line-height);
+      }
+    }
+  </style>
+</template>;
+
+export default CardContainer;

package/bundled-types/boxel-ui/components/card-container/usage.gts

@@ -0,0 +1,53 @@
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import BoxelHeader from '../header/index.gts';
+import BoxelCardContainer from './index.gts';
+
+export default class CardContainerUsage extends Component {
+  @tracked displayBoundaries = true;
+
+  <template>
+    {{! template-lint-disable no-inline-styles }}
+    <FreestyleUsage @name='CardContainer'>
+      <:description>
+        A wrapper container for a card.
+      </:description>
+      <:example>
+        <BoxelCardContainer @displayBoundaries={{this.displayBoundaries}}>
+          {{! Usage with BoxelHeader component }}
+          <BoxelHeader @size='large' @title='Card' />
+          <div>Card Here</div>
+        </BoxelCardContainer>
+      </:example>
+      <:api as |Args|>
+        <Args.Bool
+          @name='displayBoundaries'
+          @description='(styling) Displays card boundary'
+          @defaultValue={{false}}
+          @value={{this.displayBoundaries}}
+          @onInput={{fn (mut this.displayBoundaries)}}
+        />
+        <Args.Yield
+          @description='Unstyled area for custom card content and fields'
+        />
+      </:api>
+    </FreestyleUsage>
+
+    <FreestyleUsage @name='CardContainer layout example'>
+      <:example>
+        <BoxelCardContainer @displayBoundaries={{true}}>
+          <div style='display:grid; grid-template-rows: 5rem;'>
+            <div style='margin: auto'>
+              One strategy to consider is using a root element with
+              <code>display: grid</code>
+              to layout the contents of your card.
+            </div>
+          </div>
+        </BoxelCardContainer>
+      </:example>
+    </FreestyleUsage>
+  </template>
+}