@ithaka/[email protected]

Patch Changes

• #277 915eda6 Thanks @Niznikr! - check href prop for rendering links

• Updated dependencies [915eda6]:

  • @ithaka/[email protected]

@ithaka/[email protected]

Minor Changes

• #274 03f222f Thanks @satya-achanta-venkata! - Added button that looks like link

@ithaka/[email protected]

Minor Changes

• #268 ffb2f63 Thanks @Niznikr! - Add register utility:

  • Update PharosElement to set [data-pharos-component] with constructor.name

  • Update PharosComponentMixin to set [data-pharos-component] with base class name

  • Add register utility to simplify component registration and ensure trivial classes are used for custom elements:

    import { PharosAlert, PharosButton, PharosIcon } from '@ithaka/pharos';
    import registerComponents from '@ithaka/pharos/lib/utils/registerComponents';
    
    registerComponents('{prefix}', [PharosAlert, PharosButton, PharosIcon]);

  • Add a React Pharos context provider for consumers to indicate prefix used for registration:

    import { PharosContext } from '@ithaka/pharos/lib/utils/PharosContext';
    
    const context = { prefix: 'homepage' };
    
    <PharosContext.Provider value={context}>...app code</PharosContext.Provider>;

Patch Changes

• #262 c0ee52f Thanks @Niznikr! - use request name for dynamic import chunks

• #269 de1938b Thanks @Niznikr! - adjust modal footer slotted content spacing

• #264 988881d Thanks @Niznikr! - update dependencies

@ithaka/[email protected]

Minor Changes

• #268 ffb2f63 Thanks @Niznikr! - Add register utility:

  • Update PharosElement to set [data-pharos-component] with constructor.name

  • Update PharosComponentMixin to set [data-pharos-component] with base class name

  • Add register utility to simplify component registration and ensure trivial classes are used for custom elements:

    import { PharosAlert, PharosButton, PharosIcon } from '@ithaka/pharos';
    import registerComponents from '@ithaka/pharos/lib/utils/registerComponents';
    
    registerComponents('{prefix}', [PharosAlert, PharosButton, PharosIcon]);

  • Add a React Pharos context provider for consumers to indicate prefix used for registration:

    import { PharosContext } from '@ithaka/pharos/lib/utils/PharosContext';
    
    const context = { prefix: 'homepage' };
    
    <PharosContext.Provider value={context}>...app code</PharosContext.Provider>;

Patch Changes

• #264 988881d Thanks @Niznikr! - update dependencies

• Updated dependencies [c0ee52f, de1938b, 988881d, ffb2f63]:

  • @ithaka/[email protected]

@ithaka/[email protected]

Minor Changes

• #268 ffb2f63 Thanks @Niznikr! - Add register utility:

  • Update PharosElement to set [data-pharos-component] with constructor.name

  • Update PharosComponentMixin to set [data-pharos-component] with base class name

  • Add register utility to simplify component registration and ensure trivial classes are used for custom elements:

    import { PharosAlert, PharosButton, PharosIcon } from '@ithaka/pharos';
    import registerComponents from '@ithaka/pharos/lib/utils/registerComponents';
    
    registerComponents('{prefix}', [PharosAlert, PharosButton, PharosIcon]);

  • Add a React Pharos context provider for consumers to indicate prefix used for registration:

    import { PharosContext } from '@ithaka/pharos/lib/utils/PharosContext';
    
    const context = { prefix: 'homepage' };
    
    <PharosContext.Provider value={context}>...app code</PharosContext.Provider>;

Patch Changes

• #264 988881d Thanks @Niznikr! - update dependencies

@ithaka/[email protected]

Patch Changes

• #260 04a32cc Thanks @Niznikr! - specify package side effects

@ithaka/[email protected]

Patch Changes

• #248 0b79abc Thanks @Niznikr! - correct footer on smaller breakpoints

• Updated dependencies [04a32cc]:

  • @ithaka/[email protected]

@ithaka/[email protected]

Major Changes

• #226 7843568 Thanks @Niznikr! - require manual component registration:

  • Remove component self-registration
  • Scope registries for components composed of other Pharos components using scoped-registry-mixin
  • Update React wrapper to detect defined custom tag name
  • Create PharosElement base class which sets a custom attribute data-pharos-component as a common identifier
  • Set components to extend PharosElement
  • Update documentation

  Migration Guidelines

  1. Remove all individual imports of Pharos web components.

  2. Register them with a custom tag in your app's entrypoint in the form of {app/bundle}-pharos-{component}:

     import { PharosAlert } from '@ithaka/pharos/lib/components/alert/pharos-alert';
     
     customElements.define('homepage-pharos-alert', PharosAlert);

  3. Update templates, queries, unit tests, and integration tests with the newly defined tag names.

  4. Add the scoped custom element registry polyfill to a globally available location in your project.

  5. Update your bundler's production build settings to keep class names unminified:

     Webpack (Terser):

     optimization: {
       minimizer: [
         new TerserPlugin({
           terserOptions: {
             keep_classnames: /^Pharos/,
             keep_fnames: /^Pharos/,
           }
         }),
       ],
     }

     Vite (ESBuild):

     export default defineConfig({
       esbuild: {
         keepNames: true,
       },
     });

  6. Import the JSDOM patch in your Jest setup file if you use Jest for unit testing:

     import '@ithaka/pharos/lib/patches/jsdom';
     import 'your-pharos-component-registration-file';

Patch Changes

• #243 2bc785d Thanks @Niznikr! - update Stylelint:

  • Follow Stylelint migration guidelines
  • Address errors found

• #245 8bb5b8a Thanks @Niznikr! - update to Node 16:

  • Update GitHub actions to use Node 16
  • Update .nvmrc
  • Update React build script

@ithaka/[email protected]

Minor Changes

• #242 9e491fa Thanks @Niznikr! - Update to Gatsby 4 for Pharos site

• #226 7843568 Thanks @Niznikr! - require manual component registration:

  • Remove component self-registration
  • Scope registries for components composed of other Pharos components using scoped-registry-mixin
  • Update React wrapper to detect defined custom tag name
  • Create PharosElement base class which sets a custom attribute data-pharos-component as a common identifier
  • Set components to extend PharosElement
  • Update documentation

  Migration Guidelines

  1. Remove all individual imports of Pharos web components.

  2. Register them with a custom tag in your app's entrypoint in the form of {app/bundle}-pharos-{component}:

     import { PharosAlert } from '@ithaka/pharos/lib/components/alert/pharos-alert';
     
     customElements.define('homepage-pharos-alert', PharosAlert);

  3. Update templates, queries, unit tests, and integration tests with the newly defined tag names.

  4. Add the scoped custom element registry polyfill to a globally available location in your project.

  5. Update your bundler's production build settings to keep class names unminified:

     Webpack (Terser):

     optimization: {
       minimizer: [
         new TerserPlugin({
           terserOptions: {
             keep_classnames: /^Pharos/,
             keep_fnames: /^Pharos/,
           }
         }),
       ],
     }

     Vite (ESBuild):

     export default defineConfig({
       esbuild: {
         keepNames: true,
       },
     });

  6. Import the JSDOM patch in your Jest setup file if you use Jest for unit testing:

     import '@ithaka/pharos/lib/patches/jsdom';
     import 'your-pharos-component-registration-file';

Patch Changes

• #243 2bc785d Thanks @Niznikr! - update Stylelint:

  • Follow Stylelint migration guidelines
  • Address errors found

• Updated dependencies [2bc785d, 7843568, 8bb5b8a]:

  • @ithaka/[email protected]

@ithaka/[email protected]

Minor Changes

• #226 7843568 Thanks @Niznikr! - require manual component registration:

  • Remove component self-registration
  • Scope registries for components composed of other Pharos components using scoped-registry-mixin
  • Update React wrapper to detect defined custom tag name
  • Create PharosElement base class which sets a custom attribute data-pharos-component as a common identifier
  • Set components to extend PharosElement
  • Update documentation

  Migration Guidelines

  1. Remove all individual imports of Pharos web components.

  2. Register them with a custom tag in your app's entrypoint in the form of {app/bundle}-pharos-{component}:

     import { PharosAlert } from '@ithaka/pharos/lib/components/alert/pharos-alert';
     
     customElements.define('homepage-pharos-alert', PharosAlert);

  3. Update templates, queries, unit tests, and integration tests with the newly defined tag names.

  4. Add the scoped custom element registry polyfill to a globally available location in your project.

  5. Update your bundler's production build settings to keep class names unminified:

     Webpack (Terser):

     optimization: {
       minimizer: [
         new TerserPlugin({
           terserOptions: {
             keep_classnames: /^Pharos/,
             keep_fnames: /^Pharos/,
           }
         }),
       ],
     }

     Vite (ESBuild):

     export default defineConfig({
       esbuild: {
         keepNames: true,
       },
     });

  6. Import the JSDOM patch in your Jest setup file if you use Jest for unit testing:

     import '@ithaka/pharos/lib/patches/jsdom';
     import 'your-pharos-component-registration-file';