@nycds/button 0.4.0 → 0.5.0-prerelease.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nycds/button
 
+## 0.5.0-prerelease.0
+
+### Minor Changes
+
+- 6052344: Add export maps to all packages
+- ddd68c2: Feat: Add TS types export
+
+### Patch Changes
+
+- aa61601: Limit published files to dist, src and CHANGELOG.md
+- Updated dependencies [aa61601]
+  - @nycds/config@0.2.1-prerelease.0
+
 ## 0.4.0
 
 ### Minor Changes

package/README.org

@@ -6,7 +6,7 @@ Buttons encourage users to take an action. They use text or icons to communicate
 
 The primary button can be utilized with a ~button~ or ~a~ element, with the following:
 - *Class*: ~nyc-button~
-- *Attribute*: ~data-variant="primary"~
+- *Attribute* (optional): ~data-variant="primary"~. Primary is the default style, so ~nyc-button~ on its own is a primary button.
 
 #+results: primary-button-example
 
@@ -41,7 +41,7 @@ The secondary button can be utilized with a ~button~ or ~a~ element, with the fo
 The icon button can be utilized with a ~button~ or ~a~ element, with the following attributes:
 - *Class*: ~nyc-button~
 - *Attribute*: ~data-variant="icon"~
-- *Icon element*: An icon element should be placed inside the button or link, using an icon font class enabled in the icons package (The package draws from the [[https://icon-sets.iconify.design/ph/][Iconify: Phosphor Iconset]]).
+- *Icon element*: An icon element should be placed inside the button or link, using an icon class from the icons package (The package draws from the [[https://icon-sets.iconify.design/ph/][Iconify: Phosphor Iconset]]). Give the button an ~aria-label~, since it has no visible text.
 
 #+results: icon-button-example
 

package/dist/button.d.ts

@@ -0,0 +1,15 @@
+declare class NYCBackToTop extends HTMLElement {
+    static define(name?: string): void;
+    isLongPage: boolean;
+    isScrolledEnough: boolean;
+    isScrollTick: boolean;
+    button: Element;
+    dynamicContainer: Element;
+    resizeObserver: ResizeObserver;
+    queuedHeightCheck: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    #private;
+}
+
+export { NYCBackToTop };

package/package.json

@@ -1,16 +1,37 @@
 {
   "name": "@nycds/button",
-  "version": "0.4.0",
+  "version": "0.5.0-prerelease.0",
   "type": "module",
   "main": "src/js/index.js",
+  "types": "dist/button.d.ts",
   "style": "dist/button.css",
   "dependencies": {
-    "@nycds/config": "^0.2.0"
+    "@nycds/config": "^0.2.1-prerelease.0"
   },
+  "exports": {
+    ".": {
+      "types": "./dist/button.d.ts",
+      "style": "./dist/button.css",
+      "import": "./src/js/index.js",
+      "default": "./src/js/index.js"
+    },
+    "./style": "./dist/button.css",
+    "./style.min": "./dist/button.min.css",
+    "./style/aem": "./dist/button-aem.css",
+    "./style/aem.min": "./dist/button-aem.min.css",
+    "./source/css": "./src/css/index.css",
+    "./*": "./*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG.md"
+  ],
   "scripts": {
     "clean": "rimraf ./dist",
     "build:css:default": "postcss src/css/index.css -o dist/button.css",
     "build:css:aem": "postcss src/css/aem/index.css -o dist/button-aem.css",
-    "minify:css": "postcss dist/*.css --use cssnano --ext .min.css --dir dist --no-map"
+    "minify:css": "postcss dist/*.css --use cssnano --ext .min.css --dir dist --no-map",
+    "build:types": "node ../../../scripts/build-types.js"
   }
 }

package/css.org

@@ -1,344 +0,0 @@
-#+title: Button
-
-Buttons encourage users to take an action. They use text or icons to communicate  what will happen after the user engages with the button. They are one of two action components, along with links.
-
-** Examples
-
-#+results: button-basic-example
-
-#+name: button-basic-example
-#+begin_src html :exports both :results replace html
-  <a href="#" class="button">Default button</a>
-  <a href="#" class="button" data-variant="primary">Primary button</a>
-  <a href="#" class="button">
-    <span>Button with icon</span>
-    <i class="i-ri:arrow-right-line"></i>
-  </a>
-
-#+end_src
-
-** Custom properties
-
-Use these custom properties in your theme to override default styling
-
-| Property                      | Default      |
-|-------------------------------+--------------|
-| --nyc-cmp-button-color        | currentColor |
-| --nyc-cmp-button-background   | white        |
-| --nyc-cmp-button-border-width | 2px          |
-| --nyc-cmp-button-border-color | grey         |
-| --nyc-cmp-button-shadow       | none         |
-| --nyc-cmp-button-padding      | .75rem       |
-
-** Base styles
-
-The =button= CSS class implements the custom properties and other
-default styles.
-
-*** Mixin
-
-#+begin_src css :noweb-ref mixins-base
-  @define-mixin button {
-    --_background: var(--nyc-cmp-button-background, hsl(0 0% 100%));
-    --_background-hover: var(--nyc-cmp-button-background-hover, hsl(0 0% 100%));
-    --_border-color: var(--nyc-cmp-button-border-color, hsl(0 0% 93%));
-    --_border-color-hover: var(--nyc-cmp-button-border-color-hover, currentColor);
-    --_border-width: var(--nyc-cmp-button-border-width, 2px);
-    --_border-radius: var(--nyc-cmp-button-border-radius, 0);
-    --_color: var(--nyc-cmp-button-color, hsl(0 0% 0%));
-    --_color-hover: var(--nyc-cmp-button-color-hover, hsl(0 0% 0%));
-    --_font-weight: var(--nyc-cmp-button-font-weight, 500);
-    --_font-size: var(--nyc-cmp-button-font-size, 1rem);
-    --_shadow: var(--nyc-cmp-button-shadow, none);
-    --_padding-block: var(--nyc-cmp-button-padding-block, 0.75rem);
-    --_padding-inline: var(--nyc-cmp-button-padding-inline, 0.75rem);
-    --_outline-color: var(--nyc-cmp-button-outline-color, inherit);
-    --_gap: var(--nyc-cmp-button-gap, 0.5rem);
-
-    appearance: none;
-    background-color: var(--_background);
-    border-color: var(--_border-color);
-    border-width: var(--_border-width);
-    border-style: solid;
-    border-radius: var(--_border-radius);
-    color: var(--_color);
-    padding: var(--_padding-block) var(--_padding-inline);
-    box-shadow: var(--_shadow);
-    text-decoration: none;
-    cursor: pointer;
-    font-weight: var(--_font-weight);
-    font-size: var(--_font-size);
-    line-height: inherit;
-    display: inline-flex;
-    justify-content: center;
-    gap: var(--_gap);
-    align-items: center;
-    transition: all 0.3s ease;
-    text-align: center;
-
-    /* & > :first-child:not(i) { */
-    /*   flex-grow: 1; */
-    /*   width: max-content; */
-    /* } */
-
-    /* & > i:last-child { */
-    /*   flex-shrink: 0; */
-    /*   margin-block: auto; */
-    /*   font-size: 1.5rem; */
-
-    /*   margin-inline-start: .5em; */
-    /* } */
-
-    &:hover {
-      background: var(--_background-hover);
-      color: var(--_color-hover);
-      border-color: var(--_border-color-hover);
-      text-decoration: none;
-    }
-
-    &:focus-visible {
-      outline: 3px solid var(--_outline-color);
-      outline-offset: 0;
-    }
-
-    &[disabled] {
-      --nyc-cmp-button-color: var(--nyc-sys-color-on-disabled) !important;
-      --nyc-cmp-button-background: var(--nyc-sys-color-disabled) !important;
-      --nyc-cmp-button-border-color: var(--nyc-sys-color-on-disabled) !important;
-    }
-
-    /* @media (width > 768px) { */
-    /*   --_font-size: var(--nyc-cmp-button-font-size-max, 1rem); */
-    /* } */
-  }
-#+end_src
-
-*** Default class
-
-#+begin_src css :noweb-ref default-base
-  .button,
-  .button:link,
-  .button:visited {
-    @mixin button;
-  }
-  #+end_src
-
-*** AEM class
-
-#+begin_src css :noweb-ref aem-base
-  .cmp-button,
-  .cmp-button:link,
-  .cmp-button:visited {
-    @mixin button;
-  }
-#+end_src
-
-** Variants
-
-*** Primary
-
-**** Mixin
-
-#+begin_src css :noweb-ref mixins-primary
-  @define-mixin button-primary {
-    --nyc-cmp-button-background: var(--nyc-sys-color-primary);
-    --nyc-cmp-button-color: var(--nyc-sys-color-on-primary);
-    --nyc-cmp-button-border-color: var(--nyc-sys-color-primary);
-    --nyc-cmp-button-shadow: none;
-    &:hover {
-      --nyc-cmp-button-color-hover: var(--nyc-cmp-button-color);
-      --nyc-cmp-button-background-hover: var(--nyc-sys-color-primary-hover);
-      --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-primary-hover);
-    }
-  }
-#+end_src
-
-**** Default class
-
-#+begin_src css :noweb-ref default-primary
-  .button[data-variant='primary'] {
-    @mixin button-primary;
-  }
-#+end_src
-
-**** AEM class
-
-#+begin_src css :noweb-ref aem-primary
-  .cmp-button--primary .cmp-button {
-    @mixin button-primary;
-  }
-#+end_src
-
-*** Secondary
-
-**** Mixin
-
-#+begin_src css :noweb-ref mixins-secondary
-  @define-mixin button-secondary {
-    --nyc-cmp-button-background: var(--nyc-sys-color-secondary);
-    --nyc-cmp-button-color: var(--nyc-sys-color-on-secondary);
-    --nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
-    --nyc-cmp-button-shadow: none;
-    &:hover {
-      --nyc-cmp-button-color-hover: var(--nyc-sys-color-on-secondary-hover);
-      --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base);
-    }
-  }
-#+end_src
-
-**** Default class
-
-#+begin_src css :noweb-ref default-secondary
-  .button[data-variant='secondary'] {
-    @mixin button-secondary;
-  }
-#+end_src
-
-**** AEM class
-
-#+begin_src css :noweb-ref aem-secondary
-  .cmp-button--secondary .cmp-button {
-    @mixin button-secondary;
-  }
-#+end_src
-
-*** Icon
-
-**** Mixin
-
-#+begin_src css :noweb-ref mixins-icon
-  @define-mixin button-icon {
-    --nyc-cmp-button-background: var(--nyc-sys-color-primary);
-    --nyc-cmp-button-color: var(--nyc-sys-color-on-primary);
-    --nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
-    --nyc-cmp-button-shadow: none;
-    --nyc-cmp-button-padding-inline: var(--nyc-cmp-button-padding-block);
-    &:hover {
-      --nyc-cmp-button-color-hover: var(--nyc-sys-color-on-primary-hover);
-      --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base);
-    }
-
-    &[disabled] {
-      --nyc-cmp-button-color: var(--nyc-sys-color-on-disabled);
-      --nyc-cmp-button-background: var(--nyc-sys-color-disabled);
-      --nyc-cmp-button-border-color: var(--nyc-sys-color-on-disabled);
-    }
-  }
-#+end_src
-
-**** Default class
-
-#+begin_src css :noweb-ref default-icon
-  .button[data-variant='icon'] {
-    @mixin button-icon;
-  }
-#+end_src
-
-**** AEM class
-
-#+begin_src css :noweb-ref aem-icon
-  .cmp-button--icon .cmp-button {
-    @mixin button-icon;
-  }
-#+end_src
-
-
-*** Full width
-
-**** Mixin
-
-#+begin_src css :noweb-ref full-width
-  @define-mixin button-full-width {
-    @media (max-width: 768px) {
-      &:first-child {
-        width: 100%;
-      }
-    }
-  }
-#+end_src
-
-**** Default class
-
-#+begin_src css :noweb-ref default-full-width
-  .button[data-variant='button-full-width'] {
-    @mixin button-full-width;
-  }
-#+end_src
-
-**** AEM class
-
-#+begin_src css :noweb-ref aem-full-width
-  .cmp-button--full-width .cmp-button {
-    @mixin button-full-width;
-  }
-#+end_src
-
-
-*** Sizes
-
-**** Mixin
-
-#+begin_src css :noweb-ref mixins-sizes
-  @define-mixin button-sm {
-    --nyc-cmp-button-border-radius: var(--nyc-sys-radius-lg);
-    --nyc-cmp-button-padding-block: var(--nyc-sys-space-2xs);
-    --nyc-cmp-button-padding-inline: var(--nyc-sys-space-2xs);
-    --nyc-cmp-button-font-size: var(--nyc-sys-size-body-base);
-    --nyc-cmp-button-font-weight: 600;
-  }
-#+end_src
-
-**** Default class
-
-#+begin_src css :noweb-ref default-sizes
-  .button[data-size='sm'] {
-    @mixin button-sm;
-  }
-#+end_src
-
-**** AEM class
-
-#+begin_src css :noweb-ref aem-sizes
-  .cmp-button--sm .cmp-button {
-    @mixin button-sm;
-  }
-#+end_src
-
-** File exports :noexport:
-
-*** Mixins
-
-#+begin_src css :noweb yes
-  /* Generated from README.org - do not edit directly */
-  <<mixins-base>>
-  <<mixins-primary>>
-  <<mixins-secondary>>
-  <<mixins-icon>>
-  <<mixins-sizes>>
-#+end_src
-
-*** Default
-
-#+begin_src css :noweb yes
-  /* Generated from README.org - do not edit directly */
-  @import './mixins.css';
-
-  <<default-base>>
-  <<default-primary>>
-  <<default-secondary>>
-  <<default-icon>>
-  <<default-sizes>>
-#+end_src
-
-*** AEM
-
-#+begin_src css :noweb yes
-  /* Generated from README.org - do not edit directly */
-  @import '../mixins.css';
-
-  <<aem-base>>
-  <<aem-primary>>
-  <<aem-secondary>>
-  <<aem-icon>>
-  <<aem-sizes>>
-#+end_src

package/postcss.config.js

@@ -1 +0,0 @@
-export { default } from '@nycds/config'

package/tests/back-to-top.spec.js

@@ -1,16 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Back To Top', () => {
-  test.describe('NYCBackToTop component', () => {
-    let component;
-    test.beforeEach(async ({ page }) => {
-      await page.goto('/packages/components/button/tests/index.html')
-      component = page.locator('nyc-back-to-top')
-    })
-
-    test('Back to top enabled at scroll point', async ({page, browserName }) => {
-      await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight / 2))
-      await expect(component).toContainClass('enabled')
-    })
-  })
-})

package/tests/index.html

@@ -1,20 +0,0 @@
-<html>
-  <head>
-    <link href="../../../core/dist/nycds-core.css" rel="stylesheet" />
-  </head>
-  <body>
-
-    <div style="height: 500vh" class="backtotop-observe">
-    </div>
-    <nyc-back-to-top>
-      <button id="back-to-top" class="nyc-button" data-variant="back-to-top" aria-label="Back to top">
-        <span>Back to top</span>
-      </button>
-    </nyc-back-to-top>
-
-    <script type="module">
-     import { NYCBackToTop } from '../src/js/index.js'
-     NYCBackToTop.define()
-    </script>
-  </body>
-</html>