@ulu/frontend 0.1.0-beta.7 → 0.1.0-beta.71

package/CHANGELOG.md

@@ -1,9 +1,490 @@
 # Change Log
 
+## 0.1.0-beta.71
+
+- **scss/element**
+  - Add mixin "hide-focus-ring" which implements hidden focus ring unless it's needed (via :focus-visible)
+- **scss/components/tabs**
+  - Hide focus ring on tabs when clicking
+
+## 0.1.0-beta.70
+
+- **scss/components/accordion**
+  - Change defaults (add background color to summary) so that demo shows how no-border modifier is used
+  - Add borderless-margin-between 
+  - Change modifier "no-border" to "borderless"
+- **scss/components/tabs**
+  - Tweak defaults so that tab color hover matches "selected" color
+  - Add transitions to the indicator bar, and add setting to adjust it
+
+## 0.1.0-beta.69
+
+- **scss/components/accordion**
+  - Set width on .accordion__summary so it works when using button element (when not details)
+  - Fixed minor things (missing selectors, etc)
+
+## 0.1.0-beta.68
+
+- **scss/components/badge**
+  - Fix default config (so that default size is smaller than large)
+  - Add default sizes (small and large)
+  - Add font family option
+
+## 0.1.0-beta.67
+
+- **scss/components/counter-list**
+  - Add extra-selector option to allow class wrapper which styles all ol's inside container.
+
+## 0.1.0-beta.66
+
+- **scss/components/data-grid**
+  - Add missing row gutter breakpoint modifiers (so row gutters use breakpoint sizes)
+  - Add missing row gutter at breakpoint work with extra scales 
+
+## 0.1.0-beta.65
+
+- **scss/element**
+  - Add backdrop-filter-blur mixin
+  
+## 0.1.0-beta.64
+
+- **scss/components/counter-list**
+  - Fix mistake in "item-margin" property default value 
+    - (should be space separated list or single number was comma separated)
+
+## 0.1.0-beta.63
+
+- **js/ui/scrollpoints** 
+  - Fixed error using for syncedElements option (Missing getElement, was moved to utils)
+
+
+## Versions 0.1.0-beta.59, 0.1.0-beta.60, 0.1.0-beta.61, 0.1.0-beta.62
+
+- Update @ulu/utils dependency to latest
+
+## Version 0.1.0-beta.58
+
+- **js/ui/slider**
+  - Change slider swipe to be on slides
+  - Add options for swipeOptions to configure ["swipe-listener"](https://www.npmjs.com/package/swipe-listener) library (see it's documentation for options)
+    - Adding preventScroll by default
+
+## Version 0.1.0-beta.57
+
+- **js/ui/slider**
+  - Setup swipe listener and add option for swipeEnabled (true by default)
+
+## Version 0.1.0-beta.56
+
+- **scss/components/counter-list**
+  - Add counter (font-family, font-weight)
+
+## Version 0.1.0-beta.55
+
+- **scss/components/counter-list**
+  - Fix selector (was nested if using .counter-list__item), Updates for API for $config
+
+## Version 0.1.0-beta.54
+
+- **js/ui/modal-builder**
+  - Add option for titleClass
+  - Fill in jsdoc documentation for defaults 
+
+## Version 0.1.0-beta.53
+
+- **scss/components/slider**
+  - Remove "button-height" option not setup in styles
+  - Change "button-icon-offset-x/y" to "button-offset-x/y" since it only controls the button offsets not related to an icon
+
+## Version 0.1.0-beta.52
+
+- **scss/components/slider**
+  - Remove "button-size" option (was never hooked up)
+  - Change "dot-" prefixed options to "nav-" so it's not describing it visually
+  - Change "margin-bottom" and "margin-top" to singular margin rule
+
+## Version 0.1.0-beta.51
+
+- **scss/components/slider**
+  - Add "dot-gap" and "nav-margin" options
+
+## Version 0.1.0-beta.50
+
+- **scss/components/slider**
+  - Remove "dot-border-color-hover" option not setup in styles
+
+## Version 0.1.0-beta.49
+
+- **scss/color**
+  - Allow color.get() to passthrough colors that are "color-mix()"
+  
+## Version 0.1.0-beta.48
+
+- **scss/color**
+  - **css-tint, css-shade** Make sure colors (base white/black) use color.get()
+
+## Version 0.1.0-beta.47
+
+- **scss/components/card**
+  - Add card--fill modifier (expands to fit whatever element it's within). This was intended for use with data-grid but could be used this way for many layouts.
+
+## Version 0.1.0-beta.46
+
+- **scss/color**
+  - **css-tint, css-shade** Add two new functions for tinting/shading in the browser (to support custom properties). In the future these may replace sass only tint/shade functions once they are more widely supported.
+
+## Version 0.1.0-beta.45
+
+- **scss/units > set()**
+  - Adjust to use map-merge so you can configure how the map is merged (ie. overwrite for example)
+- **scss/element > set-rule-margins()**
+  - Adjust to use map-merge so you can configure how the map is merged (ie. overwrite for example)
+
+## Version 0.1.0-beta.44
+
+- **scss/components/card**
+  - Fix card body from shrinking when max-width is larger than body content
+  - Add card--horizontal-center modifier to center body of card
+
+## Version 0.1.0-beta.43
+
+- **scss/components/card**
+  - Document all new aside configuration properties change toggle-aside-rule to aside-rule
+
+## Version 0.1.0-beta.42
+
+- **scss/components/card**
+  - Adjusted defaults for new aside element (rule and background color) to match standard defaults (initial testing values were there before)
+
+## Version 0.1.0-beta.41
+
+- **js/utils/dom**
+  - **addScrollbarProperty** - Change arguments to object, Add argument for "propertyElement" and make this function add property to html element by default (so it can be used with other custom properties in CSS :root selector)
+- **scss/components/card.scss**
+  - card aside defaults changed ("aside-background-color" : transparent, "aside-rule-color": "rule",)
+
+## Version 0.1.0-beta.40
+
+- **scss/components/counter-list**
+  - Add counter-list component and demo page
+- **js/ui/dialog**
+  - Add option for triggers (preventScrollShift) which will add padding to the body when dialog with preventScroll is opened (so layout doesn't shift). Note this will not fix fixed position elements relative to the viewport jumping.
+
+## Version 0.1.0-beta.39
+
+- **js/ui/scrollpoint.js**
+  - Fix attribute name for state to have ulu prefix (ie. data-scrollpoint-state is now data-ulu-scrollpoint-state)
+  
+## Version 0.1.0-beta.38
+
+- **scss/**
+  - **helpers/display**
+    - remove clearfix class styling
+  - **helpers/utilities, helpers/print, helpers/display**
+    - Add selector class replacing and prefixing
+
+## Version 0.1.0-beta.37
+
+- **js/ui/slider.js**
+  - Implement classAccessiblyHidden option to allow users to customize its styling. Will still default to "hidden-visually." 
+
+## Version 0.1.0-beta.36
+
+- **scss/**
+  - **components/button-verbose**
+    - Add "border-width" and "border-color" options with ability to fallback to button defaults for each. No borders are added by default. Options descriptions added to sass api docs.
+  - **components/modal**
+    - Add fullscreen size modifier 
+  - **components/data-grid**
+    - Create option "rule-fade-duration" which when enabled (can be disabled by passing false) will hide the rules for the grid until the grid's initialization script has finished (which gives positioning information about the column arrangement so the appropriate rules can be shown per column/row). 
+- **js**
+  - **settings**
+    - Update "wrapSettingString" function to have second argument for "transform" allowing default settings strings that can also be transformed. This was used in breakpoint module so user can match "cssvarPrefix" to create a default value of "--PREFIX-breakpoint" for example, where PREFIX is dynamic at time of string is used
+    - Add "cssvarPrefix" to match scss cssvar module's prefix value
+  - **ui/breakpoint**
+    - Fix all typos (options and methods) of "psuedo" to "pseudo" (valueFromPseudo, pseudoSelector)
+    - Bring in new setting (from settings.js) for "cssvarPrefix" for the breakpoint customProperty default value
+    - Create test for this in demos
+  - **ui/collapsibles**
+    - Fix bug with "focusoutCloses" check collapsible content for focus before closing (so only close if focusout led outside the content) which is the intended behavior. Note this is mechanism used to control popover's so it fixes the bug there as well
+  - **ui/modal-builder**
+    - Update all templates options (templateCloseIcon, templateResizerIcon, template) to include new option for "baseClass" so that base BEM selector can easily be changed (ie. .namespace-modal for example)
+  - **utils/css.js**
+    - Add new module to hold utility functions related to CSS, currently just new function getCustomProperty which is used in ui/breakpoints module
+
+## Version 0.1.0-beta.35
+
+- **scss/**
+  - **components/card**
+    - add *card__aside* styling to enable sidebars
+      - added *card__main* wrapper to *card__title* and *card__content* to separate it from the *card__aside*
+      - added config options for *card__aside*
+        - toggle-aside-rule : toggles rule separating aside from main,
+        - aside-rule-width
+        - aside-background-color
+        - aside-rule-color
+    - remove padding from *card__image--icon*
+      - This was adding additional space on bottom of horizontal card. Most noticeably when using an aside background color and no footer.
+  - **elements/rule**
+    - Added "display: inline-block;" to short rule
+      - Note: user can use the old style by adding utility class "display-block"
+- **js/**
+  - ui/scroll-slider
+    - Fix typo that introduced error in last update controls-context to control-context
+
+## Version 0.1.0-beta.34
+
+- **scss/**
+  - **element**
+    - Add mixins for element.cap() and element.cap-appearance() which are used internally but can be used by users to add end caps to an element
+  - **utils**
+    - Add ensure-map(), units-match(), is-end(), is-side() functions
+  - **components/callout**
+    - Minor visual breaking change for those using cap
+    - Update how left-cap works (all properties have changed) now accepts common cap settings (see config)
+    - Caps can be set on any side now
+    - Callout styles map (for variations/modifiers of callout) will no longer output "border" configuration
+      - Use "border-width" or "border-color" to affect border appearance
+  - **components/button-verbose**
+    - Minor visual breaking change for those using cap
+    - left cap has changed to cap and accepts common cap options (see config)
+  - **components/accordion**
+    - remove static margin-bottom added to "--no-borders" modifier (was 4rem)
+    - Fix calc for accordion + accordion to be based on border-width setting (was static 1px)
+  - **components/slider**
+    - remove unused config options "button-background-color" and "button-background-color-hover"
+  - **components/accordion**
+    - Remove margin-bottom
+  - **components/data-table**
+    - Add config option "footer-color" to enable users to customize footer text color. Footer still defaults to "color" config option.
+- **js/**
+  - **ui** (remove setup functions, using component initializer class now)
+  - **ui/slider**
+    - update createNavButton function to pass whole slide rather than just slide number. Update getNavContent to still print slide number as accessibility text by default.
+  - **ui/dialog**
+    - Added option preventScroll (defaults to true), used only for modal dialogs (ignored if nonModal)
+  - **ui/tooltip**
+    - Fix missing init attribute
+  - **ui/flipcard**
+    - Fix typo in method name "setVisiblity" to "setVisibility"
+  - **ui/tabs**
+    - Fix issue with initial click of a tab when using "openWithUrlHash" option
+      - Equal height checking was setting hidden attribute but aria-tablist library explicitly checks for hidden="hidden"
+
+## Version 0.1.0-beta.33
+
+- scss
+  - Add layout.absolute-fill throughout components/styles so that CSS is printed the same way for compression
+  - Add layout.absolute-fill throughout components/styles so that CSS is printed the same way for compression
+- scss/components/callout
+- scss/components/button-verbose
+  - Add left-cap-match-radius to have the left cap style match the border radius of the parent container
+  - 
+## Version 0.1.0-beta.32
+
+- scss/components/button-verbose
+  - Add left-cap-match-radius to have the left cap style match the border radius of the parent container
+
+## Version 0.1.0-beta.31
+
+- scss/components/button-verbose
+  - Change left-cap default to false off (like it was before the change in 0.1.0-beta.29)
+
+## Version 0.1.0-beta.30
+
+- scss/components/button-verbose
+  - Add button-verbose__body element
+  - Allow title-margin to work if body is before title
+- scss/component/popover
+  - Change new config property "arrow-mask" to "arrow-box-shadow", remove "arrow-mask-" properties as they are no longer needed. When "arrow-box-shadow" is enabled the popovers box-shadow will be used on the arrow along with a mask that has an overlap based on the box-shadow's size.
+- scss/utils
+  - Add (is-list, is-map, is-number, is-string, is-color) functions to reduce logic based on type (ie. `if(utils.is-list($value), $something, $something-else))`
+  - Add is-even, and is-odd functions
+
+## Version 0.1.0-beta.29
+
+- scss/components/button-verbose
+  - Setup optional selector changing (class base name)
+  - Add end cap option
+  - Adjust default options
+  - Make inline modifier remove margin right if last child
+- scss/components/card
+  - Add cursor pointer to card__title-link and move default title hover styles from card__title to card__title-link
+  - Change default size of icon image max-width (from 30rem to 8rem)
+  - Remove transparent on card__image--icon (will have normal default background for image area now)
+- scss/components/form-theme
+  - Add "description-line-height" option defaulting to typography line-height dense
+
+## Version 0.1.0-beta.28
+
+- scss/components/popover
+  - Remove options (footer-box-shadow, footer-box-shadow-color) as it interferes with main popover box shadow and arrow box shadow. 
+  - Added "footer-border-top" to separate footer from content (useful for showing overflow)
+
+## Version 0.1.0-beta.27
+
+- scss/components/popover
+  - Add popover's content box-shadow to arrow (using the other pseudo to mask the shadow)
+- scss/components/utils
+  - Fix number-info function, and add errors option
+  - Add function add-unit() to add unit to a number
+  - Add function hypotenuse() which returns hypotenuse of triangle
+
+## Version 0.1.0-beta.26
+
+- scss/components/card
+  - Make modifier card--no-image, which is used to inform layout in the card when it doesn't have an image, now hides the image as well (with CSS)
+  
+## Version 0.1.0-beta.25
+
+- scss/components/accordion
+  - Make normal summary (when used without icon) flexbox for older browser support (uses :has() selector)
+- scss/components/card
+  - Change how horizontal cards display when in horizontal
+    - Body and footer stack to the side of image
+    - Image fills height
+  - add card--image-fit modifier to all images to properly be contained in cards regardless of card size
+
+## Version 0.1.0-beta.24
+
+- Minor, remove debug statement
+
+## Version 0.1.0-beta.23
+
+- scss/component/sticky-list.scss
+  - Adjusts to new component (property name changes)
+
+## Version 0.1.0-beta.22
+
+- scss/component/sticky-list.scss **new**
+  - Added basic CSS sticky list component
+
+## Version 0.1.0-beta.21
+
+- scss/components/tabs.scss
+  - Minor: fix margin output (space separated list vs comma)
+  - Remove scrollbar in tablist
+
+## Version 0.1.0-beta.20
+
+- scss/components/basic-hero **new**
+  - Added component for handling simple hero or header styling with text and media in container
+- js/ui/theme-toggle.js (refactored to allow)
+  - Inverted the default icons so that the icon reflects the theme it will trigger
+  - Multiple instances of theme toggles
+  - Remote theme toggles (other toggles buttons that follow/match main toggle)
+    - If the toggle button is used in more than one place in UI
+    - Toggle and remote linked via 'group' option
+  - Allow targeting multiple containers to toggle theme on
+  - New options/API structure
+    - Now accepts themes object with settings on what it should toggle
+  - Allow callback for customizing behavior when changing state
+  - Add demo/tests
+- js/utils/dom.js
+  - Add getElements() (matches getElement) but for multiple elements
+  - Add resolveClasses() to allow class options to be string or array form
+    - So that scripts using can easily resolve classes to consistent type for use in element.classList, etc
+- js/ui/details-group.js
+  - Fix error in event pageModified (caused by passing event object to setup)
+
+## Version 0.1.0-beta.19
+
+- js/ui/details-group.js
+  - Added new module to manage groups of details (just one open at time right now)
+
+## Version 0.1.0-beta.18
+
+- scss/components/_button-verbose.scss
+  - Add text align left
+  
+## Version 0.1.0-beta.17
+
+- js/ui/programmatic-modal.js 
+  - Add "classes" option to createAndOpen, to match legacy module's API
+
+## Version 0.1.0-beta.16
+
+- js/ui/programmatic-modal.js 
+  - Change createAndOpen config option "selector" to ambiguous name "element" to allow passing both selector or element (using getElement())
+
+## Version 0.1.0-beta.15
+
+- JS
+  - Settings.js 
+    - Setup new shared setting module (currently holds icon string settings)
+    - Setup common methods for dealing with settings
+    - Setup wrapped string get method for use in configuring defaults for other modules
+      - So we don't need to refactor for after runtime settings changes
+  - utils/font-awesome.js - Includes helper method for setting font-awesome icons (configureIcons)
+  - ui/modal-builder.js - Adjust to use settings to get icon defaults
+  - ui/overflow-scroller.js and js/ui/slider.js
+    - Change `iconClassesPrevious` and `iconClassesNext` to non array settings `iconClassPrevious` and iconClassNext
+    - Change the above defaults to pull from settings.js
+  - js/ui/slider.js
+    - Fix selector .Slider__control-icon was on .Slider__control-button is now moved to icon
+- SCSS
+  - components/_slider.scss
+    - Fix incorrect selector .Slider__control-icon which was actually targeting the control-button
+
+## Version 0.1.0-beta.14
+
+- SCSS > Components > Nav Strip
+  - Add remove-scrollbar() CSS to nav strip list
+
+## Version 0.1.0-beta.13
+
+- SCSS > Components > Menu Stack
+  - Add options for line-height for link and label
+  - Change rule color to light by default
+
+## Version 0.1.0-beta.12
+
+- SCSS > Components > Menu Stack
+  - Refactor menu-stack__checkbox selector to menu-stack__selectable so it works for both radio/checkbox layouts
+  - Added other selectors if needed menu-stack__selectable-[input/label], but it still works with native element selectors (ie. [type="checkbox"])
+  - Change config (checkbox-area-width to selectable-input-width)
+
+## Version 0.1.0-beta.11
+
+- SCSS
+  - Components
+    - Card
+      - Set config options for settings that were hardcoded in
+    - Form Theme: 
+      - Change config item "input-margin-y" to "item-margin-y" since that's what it affects. 
+      - Add config options to hardcoded options in fieldset
+      - Remove fieldset span styling
+      - Replaced config defaults using color.get("error") to now use color.get("danger")
+    - Menu Stack
+      - Remove padding on container when set to hanging (incorrect)
+    - Data Table
+      - Add header-color option for thead th
+    - Callout
+      - Adjustments to left cap styling
+        - Left-cap height and horizontal positioning now include the border-width
+        - Left-cap mixin is now a private mixin
+      - **replaced "border" config option with "border-color" and "border-width"**
+  - Color
+    - New color options and adjusted colors error and warning.
+
+## Version 0.1.0-beta.10
+
+- "scss/component/modal" - Add "width-left-right" for sidebar style width setting
+- "scss/component/css-icons" - Add "drag-gap-multiplier" to adjust the gap between strokes
+- "js/ui/modal-builder" - Fix css-icon class for resizer (to css-icon--drag-x)
+
+## Version 0.1.0-beta.9
+
+- Updates to "scss/component/card" - Fix card overlay border-radius (body and footer), fix card border being conditional on interactive (proxy-click)
+
+## Version 0.1.0-beta.8
+
+- Update "scss/components/data-table" to have border and no margin on caption by default, add caption config properties (caption-text-align, caption-background-color)
+
 ## Version 0.1.0-beta.7
 
-- Add "list-inline" component
-- Update "list-lines" component to have adjustable base selector
+- Add "scss/components/list-inline" component
+- Update "scss/components/list-lines" component to have adjustable base selector
 
 ## Version 0.1.0-beta.6
 

package/README.dev.md

@@ -8,9 +8,9 @@
 
 ## Docs
 
-## Updatiing SCSS
+## Updating SCSS
 
-- Udpate sassdocs markdown by `npm run docs:update:scss`
+- Update sassdocs markdown by `npm run docs:update:scss`
 
 ## Updating JS Docs
 
@@ -19,4 +19,4 @@
 
 ## Building/Deploying
 
-- Use `npm run docs:build`
+- Use `npm run docs:build`

package/README.md

@@ -1,10 +1,20 @@
-# Frontend Library
+# @ulu/frontend
 
-Front end development library (SCSS, JS)
+Versatile frontend toolkit designed for a variety of web development scenarios.
+
+[Full Documentation](https://jscherbe.github.io/frontend/)
+
+## key Features
+
+- **Target Environment:** The JavaScript "UI" modules are specifically tailored for traditional sites, such as static websites and CMS-driven platforms. However, the comprehensive SCSS modules are fully compatible and can be utilized in modern JavaScript applications built with frameworks like React or Vue.
+- **Configuration & Consistency:** The system's main goal is to allow for highly flexible, per-site configuration while maintaining a consistent set of accessible and high-quality components.
+- **Flexible Usage:** This library is designed as a toolkit, offering the flexibility to be used as a complete stylesheet solution or to pick and choose individual SCSS modules and components as needed.
+- **Integration Adaptability:** All SCSS base selectors (for components, utilities, etc.) can be easily adjusted, making it highly adaptable for seamless integration into pre-existing systems and diverse development environments.
+- API Documentation for both SCSS and JS with examples
+
+## Related Links
 
 - [Documentation](https://jscherbe.github.io/frontend/)
 - [Change Log](CHANGELOG.md)
 - [Development Notes](README.dev.md)
 
-
-