Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: add gitignore * chore: set up styles package as vanilla vite project * chore: added extra scripts for linting * chore: change README for development instructions * chore: change README instructions * chore: add file and edit package.json * Feature/accordion story (#5) * Installed storybook 6.x * Reparented and created stories for banner and accordion * Fixed scripts not running in storybook (reqiures rebuild of dist) * Removed script tag from banner story * Remove banner story from this branch/PR * Trim down accordion story to barebones * Update static assets for storybook * Update storybook HTML tab settings * Remove nvm from dependencies * remove ../dist and ../assets from storybook assets * Reparented js files into subdirectories for storybook (#6) * chore: create empty story files and move folders (#7) * Fix/root font size (#8) * fix: remove root pseudo-class * chore: modify style dictionary config file for font size tokens * fix: use font size token in accordion scss * fix: naming of font size variables * Feature/font awesome6 package (#9) * Add font awesome 6 and static file copy plugin for Vite, update to copy SVG icons to assets dir. * Updated assets path to fonts in SCSS, fixing vite build errors. * Feature/storybook settings (#10) * chore: initial sb settings * feat: initial baseline theme including adding viewports for grid sizes * chore: add badges, chips and tags to sb * chore: add banner to sb * fix: file structure of badges in export default title * chore: move breadcrumbs to stories * chore: move button to stories * chore: move drawer to stories * chore: move dropdown to stories * chore: move expand to stories * chore: move file upload to stories * chore: move footer to stories * chore: move headers to stories * chore: move links and overflow menu to stories * chore: move toggleand slider to stories * chore: add modals to stories * chore: move form fields to stories * chore: consolidate modals into one story file * chore: consolidate banner to single story * chore: consolidate badges, chips and tags into single story file * chore: consolidate file upload into single story * chore: consolidate headers to single story file * chore: consolidate overflow menu to single story and delete extra story file from header * fix: remove @storybook/addons and @storybook/theme from package.json and move vite-plugin-static-copy to devDependencies * Removed font awesome 6 from dependencies and build (#11) * Removed font awesome 6 from dependencies and build * Removed vite static plugin from package.json and re-ran npm install to update package-lock.json after removing packages. * removed vite static copy and re-ran npm install * Feature/univ header story (#12) * fix: markup and styling in univ header * feat: set up controls, argTypes and parameters for univ header also removed certain addons * chore: change brand text at small breakpoint to match spec and removed zoom from storybook toolbar * chore: rebuild tokens * chore: remove comments and unnecessary js commented out * chore: added dark mode toggle addon for storybook (using data attributes) * chore: remove more comments * fix: add proper alt text to img tag for cbp logo * Feat/implement dark mode (#13) * feat: initial dark mode toggle js and prefers-color-scheme media query * chore: remove css variables test from _core.scss * fix: dark mode bootstrap in index.js * chore: clean up import in index.js * fix: use data attribute in _core.scss and refactor darkMode.js * chore: add script to run 'styles' package storybook from root directory and update readme * Created Typography story for testing styles of plain HTML (#14) * Feature/token css variables (#15) * Reorganize design tokens and build as CSS variables. * Updated token naming and added elevation and breakpoints * Updated tokens with `use` attributes and added animation and breakpoint tokens. Added space token for testing. * More design token updates based on discussion/documentation * Design Token updates based on last meeting * Added branding colors and base prefix * Updated shadow tokens * Remove g key and fix references in branding colors. * Rename looser to loosest * Updated Style dictionary config to output CSS vars as a SCSS file * Add CSS variables and remove old CSS resets from SASS build. * Replace all SASS color variables with CSS variables, fix some bugs during testing. * Fix space token use attribute * Fix SVG Footer issue in reset.scss * Delete deprecated scss generated filess files and regenerate from tokens. * Fix header display by removing bullets, refactor CSS and add design t… (#16) * Fix header display by removing bullets, refactor CSS and add design tokens/variables. * Delete old normalize.scss file * Removed comment about @media nesting after verifying it works. * Bugfix/switch css (#17) * Updated the Border-pill token to the proper, tested value * Fixed Toggle CSS breakage due to border-box sizing and replaced values with token/CSS vars * Remove extraneous wrapper and noted techdebt about the HTML structure of the toggle story. * Chore/styling addon (#18) * chore: remove old darkmode toggle addon * chore: add styling addon for storybook with light/dark theme and scss support * Feat/decision card story (#19) * chore: delete previous card scss and create its own folder, unminify scss and add base card style * feat: decision card story * feat: create map for spacing tokens and utility classes for margin css property * chore: add utility classes for padding and font-weight * chore: bring in flag css from other card branch for danger modifier and update story control description * chore: dark mode stylings for decision card content and .cbp-text-body class * chore: add styling for danger modifier in dark mode for decision cards * fix: review commments for decision cards. * add max-width to cards instead of min-width * added border-radius token '--cbp-border-radius-softest' * fix card action button radius craziness * remove height property from _button.scss and add padding to button and decision card buttons * feat: add general card styles and made decision cards a modifier class of .cbp-card * feat: dark theme styling for general cards and fix decision card border issue in dark theme * fix: remove decorator from general card stories and add flex utility for display: flex * fix: add cbp-card__img-top/left classes and replace icons * Bugfix/app header (#20) * Updated the Application Header story, added the Drawer, updated both with proper semantic elements. * Refactor application header CSS to handle links and according to specs. * Create baseline requirements for app header in markdown (not all implemented) * Add application header JS to interface with the drawer and make sure the component is bootstrapped * Simplify Drawer JS * Update drawer CSS to handle links properly * Fix order of statements in application header code * Set focus when opening drawer and use hidden attribute to make sure drawer is inaccessible when hidden. * Remove console.log and format w prettier. * Removed role=dialog from drawer (causes modal positioning; revisit later) --------- Co-authored-by: Doug Gibson <Douglas.E.Gibson@associates.cbp.dhs.gov> * Feat/expand component stories (#21) * chore: clean up cssin expand component * chore: clean up expand js and css * chore: aria test * fix: add aria attributes for expand pattern and md for expand doc * fix: add aria-controls attribute and id to expand component * fix: set aria attribute and IDs in expand.js and replace css w/ tokens * chore: change function for generate id in expand * Bugfix/segmented button (#22) * Broke out segmented button group CSS into its own file and refactored/simplified * Wrote requirements * Created component class and bootstrapped it. * Updated stories * Created a new story for readonly pattern with disabled buttons * Minor update for selected button in readonly pattern * Removed "readonly" code and story (while still validating disabled buttons look correct) * Refactor/footer stories (#23) * chore: delete previous footer scss files and clean up css * feat: external footer css * chore: change class names to distinguish external footer and delete unnecessary css/html * chore: add external links and fix negative margin for ntas logo * chore: change utilitiy class name * chore: change seal and re-order external links * chore: clean up html and adjust icon margin in links * fix: review comments * Feature/interactive chips (#24) * Broke up combined story file into 3, added controls, and simplied markup * Update/simplify CSS for simplified markup * Add chip interactivity * Updated docs and custom event name * Replaced magic nunbers with CSS variables/tokens * Updated stories based on feedback * Fix/consolidate buttons links (#26) * fix: link css, delete disabled link stylings and remove old link imports in other scss files * fix: link pattern pseudo class order and added dark mode stylings * fix: clean up button css and re-organize stories * fix: add color property in segment buttons * chore: update vite-builder npm package so MDX works, remove Canvas and Docs from storybook tool bar and added Introduction MDX * chore: button font color and add aria-label to story * fix: review comments for spell check, color/fill, type and aria controls * fix: issue with aria-label showing undefined and bump builder-vite package * fix: remove font weight change in hover and focus for buttons, adjust CTA button padding for height * fix: use token for letter spacing * fix: height issue with padding/border-width * fix: border colors in pseudo classes and variants, add variant control * fix: buttons in card were affected by btn changes * fix: cta button height and float action z-index/position * Chore/more cleanup (#27) * chore: remove img/svg that are not in use * chore: addon-a11y for storybook * chore: add vite-plugin-static-copy to copy assets to dist folder during build * chore: change tokens for theme colors * Bugfix/banner (#25) * Update USA banner code to match styles and functionality of USWDS (motly) * Minor tweaks to the story and uswds banner * CSS tweaks to banner * Removed bottom margin that was causing a gap despite margin collapsing. * Replace h6 tags, which should not be misused for visual styling * Remove USWDS styling and match sketch specs * Bold key words in the content per USWDS and discussion w/ Jeremy * Minor updates per feedback. * Fix/input groups (#28) * chore: update package lock file * chore: move inputs that do not have attached controls or buttons together * chore: move input group css and remove unneeded css * chore: move text input files * fix: removed and combined stories, deleted mixin, fixed numeric switch input and css cleanup * fix: add attributes and control descriptions, change hashed field to obfuscated field * chore: add disabled, required, and readonly attribute controls * chore: remove phone number css until dropdown patterns are refactored * fix: add readonly parameter to stories and empty doc markdown file * chore: add inputName for search field story * fix: add aria attributes, remove resize property from textarea css and removed disabled cursor property from css * fix: error from using 'class' instead of 'className' in MDX * fix: move aria-label for obfuscated field to js * chore: change package name to vanilla, update commands and readme (#29) * Bugfix/segmentedbutton misc (#30) * Don't remove the banner from the DOM - hide it when dismissed. * Update dismiss buttons in banner stories * Fix broken hover color on info banner dismiss button * Fix segmented button height * Update footers to greys instead of base-green * Added base css for disabled elements * Fix not-allowed on :read-only CSS, apply pointer cursor to all buttons and links. * Remove redundant cursor:pointer rules * Fix/form control updates (#31) * chore: move checkbox, radio, and slider into its own folders * refactor: checkbox, indeterminate checkbox and radio inputs. Added to main index to bootstrap indeterminate checkbox * chore: clean up story controls and js. fix not-allowed cursor in certain inputs * fix: remove flex from inputs, add vertical align and add display inline control * chore: add disabled and checked attributes and story controls * chore: place disabled attribute on fieldset element, fix attribute selector string in indeterminate.js, and add story for single checkbox * Feature/tabs (#32) * First cut of tabs, no responsive or roving tabindex * Minor cleanup and typography CSS * Cleanup console.logs * Add control for story and consolidate stories into one. * remove unnecessary array.from on nodelists (this was an IE technique) * Fix the name of the custom event * Added tablist role * Update tabs SCSS reference * Fix border width and box sizing on tabs * Removed unused variable * Remove tab name for testing * Comment the [hidden] selector in core CSS * fix: update accordion content and css (#33) * fix: update accordion content and css * fix: changed class names and css * fix: remove accordion margin for last item * Feat/select element (#34) * fix: select element with base story * chore: clean up css and story controls * chore: update components _index.scss for select * fix: review comments for story controls * chore: remove control defaults * Feature/file input (#35) * Some additions to text input docs (not complete still) * Fixed some typos * First cut of updating the file input (and renaming from file upload) * Removed console.logs * Updates to JS, including clearing the file list on new selection * Removed readonly control * Updated CSS with tokens. * Upgrade vanilla sb (#36) * chore: upgrade to sb7 * chore: remove manager-head.html and place in main.cjs * chore: clean up readme * fix: vite vulnerability and disable telemetry * fix: mdx provider error with <p> tag * chore: remove style tag from Introduction.mdx page * fix: re-add manager-head.html, favicon does not apply with managerHead * fix: add proper path to favicon * fix: alignment of readme for heading and seal image (#37) * Refactor/banner cards (#38) * fix: banner card styles * chore: replace css variables * chore: add story controls to banner cards * chore: add story controls for general cards * fix: story control for default option and border css * chore: remove base colors and replace with another color token for now * chore: change modifier to variant in story * chore: add all icons to stories and add margin bottom utility class * Bugfix/update tokens june23 (#41) * Updates to badges, chips, and tags CSS * Update shadow and focus color tokens and regenerate CSS * Fix focus colors, which were inverted * Feature/menu refactor (#40) * Accessibility tweaks to File Input * Rename the "overflow menu" component to Menu and add docs and functionality * Remove Console.logs * Add menu positioning to story and fix in CSS * Updated global script and removed from index.js * Updated requirements * Added responsive display for menu * Final pass at updating tokens in CSS * Cleaned up and commented Menu CSS * Fix hover overriding focus state * Close menu when tabbing away from it (off control) * Uncomment the SCSS import * Removed console.log * Fixed button focus styles when input is focused * Minor cleanup per PR feedback * Refactor/modal (#39) * fix: initial modal styles * fix: modal description css and button icon spacing issue in modal controls * chore: edit vanilla package.json with description, remove private field and add LICENSE file to vanilla package * chore: update attributes to dialog and button elements * chore: add README to vanilla package and update package.json * chore: separate modal examples from main modal story and add story controls to all * chore: add homepage attribute to vanilla package.json * chore: clean up js for modal * chore: change modal title to modal heading * chore: missed replacements of title/heading * fix: code level review comments * fix: add aria-haspop to controls that open modals * feat: add modal close on backdrop click js * fix: add alertDialog control for default modal story * Bugfix/a11y-updates-July2023 (#42) * Fix selected file remove buttons for file input: semantics and focus style * Accessibility improvements to card stories * Add card requirements * Add labels to icon buttons in Drawer story * Remove whitespace from button labels * Clean up drawer story and markup. More to do. * Added missing heading `id` to story * Updated all color-interactive-neutral tokens and CSS variables to color-interactive-secondary (#44) * Bugfix/tabs tokens (#45) * Remove spaces between icons and tab labels * Update tabs CSS with new changes * Update cbp-font-size-subhead token and rebuild SASS * Add 11ty ux guidelines (#43) * feat: add ux-guidelines workspace and install 11ty * feat: create base structure for ux guidelines package * feat: add layouts folder and initial about page markdown file * chore: update readmes in root and ux-guidelines * fix: add path to css in base layout file and add foundations folder * Feature/tabs roving tabindex (#46) * Implement roving tabindex and arrow/keys navigation in tabset * Code reordering * Bugfix/button design (#48) * Button CSS bugfixes and updated specs * Update Button CSS per design specs, reorder some CSS for proper cascade * Update erroneous tokens and regenerate SASS files * Fix buttons CSS issues to match design specs * Remove icon sizing as font icons (revisit for SVGs) * Update --cbp-border-radius-softest to softer in component CSS (#49) * chore: upgrade vanilla storybook to 7.2.0 (#50) * Set focus on clicked tab to correct Safari button behavior (#51) * Add react package (#52) * feat: add react-components workspace with vite * feat: add react-components storybook * chore: delete unnecessary files/folders * feat: add initial button component and library mode vite config * chore: run npm audit fix * chore: remove tools from toolbar, add styling addon and set theme * chore: clean up readme * chore: add react-components to package table in root readme * fix: change class to className in markup * Feat/structured list (#47) * chore: update package-lock.json * feat: created initial structured list pattern * chore: update package.lock * feat: simple structured list pattern * chore: add story controls * fix: clean up docs and use min-height for structured list header * Feature/button link (#53) * Added aria-label to all link stories * Update button stories and styles to work with links * Updates per feedback * Feat/actions gh pages (#54) * chore: create npm scripts for .public build for gh-pages * feat: action to deploy design system to gh-pages * Feature/panel (#55) * First cut of panel component * Remove letter spacing and update line heights with token values in general heading SCSS * Address PR feedback * Bugfix/accordion css (#56) * Clicking accordion contents should not collapse the item * Replace "base" colors with proper tokens and restrict transition/animation to only the chevron icon. * Fix button-styled anchors' width by making them inline-flex. (#57) * Bugfix/expand (#58) * Fix .cbp-text-body class - had wrong font size, should inherit body color. * Add bottom margin to expand component for stacking context in app directory, clean up stories * Feat/pagination css (#59) * feat: initial pagination pattern * chore: add right padding to select element css for caret and more css for pagination pattern * chore: update css and class names for pagination pattern * fix: review comments and doc * fix: caret direction in select * Bugfix/drawer (#60) * Refactor drawer to use token, fix bugs * Updated "selected/active" behavior and story * Simplify aria-current selector to be consistent with the other. * Created requirements document * Bugfix/universal header (#61) * chore: clean up css in universal header * chore: edit requirements doc * chore: edit story for universal header * chore: removing button/link padding from smaller viewport size to correct button/link size * Feat/container utility class (#62) * feat: initial container class * chore: extend container css to internal/external footer * chore: extend container padding to universal header css * Bugfix/banner refactor2 (#63) * Created banner requirement docs * Add controls to banner stories * Refactored banner CSS to use design tokens/variables * Updated banners to use responsive spacing(padding) * Updates per feedback * chore: update root package.json description, author and bump engines field (#64) * Fix/usa banner padding (#65) * chore: add container padding to usa banner * fix: usa banner heights with container query for larger viewports * fix: use token * fix: use relative unit in container query * Feat/util class doc (#66) * feat: initial utilities doc * chore: deleted _z-index.scss utlities file * chore: reorder spacing utlities docs * chore: remove /demo from scss folder * chore: add margin utilities class table as docs * chore: delete utilities doc.mdx * chore: add missing margin utility classes * fix: removed important's from margin/padding utility classes * chore: replace margin-top in correct table * fix: px value for half-x * Bugfix/use square buttons (#67) * Use .cbp-btn-square for icon-buttons in stories * Deprecate hamburger mixin and remove CSS that is duplicated with square buttons * Chore/update pkg json (#68) * chore: bump babel packages throwing error in react-components package * chore: add 'exports' field to vanilla package.json * fix: imported img asset needs to come from /dist/ in @cbpds/vanilla node module with updated 'exports' field in vanilla package.json in workspaces * fix: re-order modules for utlity classes in main.scss and breakdown padding css for fluid-container (#69) * Feat/axis spacing utilities (#70) * feat: add x and y axis spacing to margin/padding * feat: add padding utility classes to storybook docs * chore: add anchor link to spacing doc * Fix/container spacing (#71) * fix: fluid-container padding size on mobile * fix: replace values in _application.scss with variables * fix: remove upper limit in _container.scss media query * Bugfix/component-init (#72) * encapsulate initialization into a function, refactor to use native qs and class notation * Add commented script for manually initializing the components. * Fix/drawer nav content (#73) * fix: remove unnecessary css for ul/ol tags in drawer content * chore: remove drawer content nav menu and replace when a general nav menu for drawer is created * fix: remove placeholder and switch drawer content element * fix: color for interactive-focus-dark is blue-warm-70 (#75) * Updates to square button and use in segmented buttons (#76) * Refactor/decision card updates (#77) * feat: added tertiary button to card actions css * fix: primary button hover background color * chore: change card danger title to text-darker and clean up css in cards * chore: add actions(buttons) object storybook control to change button text, type and ability to disable button * fix: remove bottom margin from card content :last-child and cleanup css * fix: code updates from code review * Fix dropdown issues mostly around e.target errors, updated chip in multi-select (#78) * Add controls to segmented button stories (#79) * Add controls to segmented button stories * Updated generateButtons() and added `selected` key to object. * Bugfix/footer nav (#80) * Added the button class to internal footer nav links to give them proper letter spacing and remove dupe CSS. * Remove duplicate CSS and fix vertical padding * Remove btn class on footer nav * Add btn CSS props back to footer nav links, with letter spacing * Remove a couple more cases of links turning bold on hover, causing jumpiness. * feat: text and fill divider classes (#81) * feat: text and fill divider classes * chore: dry up divider classes * Chore/react pkg re org (#82) * chore: re-organize react package folder structure. Keep components in components, keep stories in stories. * fix: remove duplicate eslint package in react-components package and fix eslint config in root package.json * chore: add typescript to the react-components package * feat: add first pass of typescript configs and settings * fix: remove prop-types package and run npm audit fix * fix: npm audit for babel vulnerability * React sb netlify (#83) * chore: update .nvmrc to use node 18 lts version * chore: update react-components intro story and add react svg icon * chore: update node version in github pages workflow file * chore: add staticDirs for assets to storybook config * First cut at normalizing input patterns (#84) * First cut at normalizing input patterns * Update textarea story `p` tags with `div` tags * Replace some hardcoded CSS values with relative tokens in Dropdown css. * One more CSS replacement * Fixed search button by making it a proper overlay. * Fixed connecting borders on button overlays * Bugfix/inputs 508 (#87) * Added aria-describedby to text inputs and textareas * Fix accessibility issues with dropdowns * Added `aria-describedby` and removed `multiple` references from file input * Removed instance of `multiple` * Fix/link and card (#86) * fix: link hover color including dark mode * fix: tertiary card action border issue * fix: active class appears when clicking disabled button * Feature/create stencil project (#89) * Installed Stencil * Install SASS plugin * Storybook install for HTML and Vite * Migrate Storybook config from vanilla to web-components so they look the same. * Deleted test code in preview body * Add scripts to top level package,json * Swapped @storybook/addon-styling (deprecated) with @storybook/addon-themes, ran `npm update` * Fix/general card (#88) * fix: remove small general card story * chore: add warning variant to general card * chore: add storybook control to show/hide icon in general card header * chore: add body text control in storybook * fix: card title single line for extra space issue * Fix/banner cards (#90) * fix: update package.lock and banner card heading issues * fix: banner card border colors matches title background color * chore: add warning variant to banner card * chore: add body text storybook control and change success title background color * Feature/stencil updates1 (#91) * Add some utilities * Delete canned stories that came with Storybook install * Remove and ignore some generated files * Create a cbp-app component to wrap and app and hold CSS (and more later) * First cut at a button component (square and cta not yet implemented) * Scaffolded a card component * More updates to scripts and storybook * Fixed `accessibilityText` contol - we need to use attributes in HTML, not camelCase Property names. * Add event emitter to button * formatting * Add control for `sx` and output in story to verify it works. * Update to Stencil 4.7 * Update story control text * Fixed loader errors on new install (#92) * Bugfix/button variants and anchor (#93) * code formatting * Made some tweaks to the reset.css * Added missing variants and anchor buttons to button component * deleted commented code * Feat/webc card (#94) * feat: initial cbp-card web component * chore: re-ordered slots and border for card-body * chore: added general, banner, and decision card stories and scss * chore: add storybook control for actions layout in decision card * chore: add aria-describedby to card actions * chore: move renderAction function and format * chore: remove default prop for card color * fix: add banner card colors for color prop * fix: change slot and class names * fix: add sx control to card story * Feature/react output target setup (#95) * WIP react output target * chore: remove original react-components package * chore: setup webc-react-components workspace * chore: stencil generated react package configuration * chore: re-add react package build command * chore: update stencil config to build react wrapped web components in react-components package * Clear up package naming/references for react output target builds * chore: update package-lock and react-components package.json * chore: create react-components readme with example usage --------- Co-authored-by: Doug Gibson <email@dgibson.net> * Feature/container (#96) * Added logo file for universal header and copy command to build * Added SASS variables and responsive spacing CSS variable to core CSS file * Extended the button CSS API to accomodate universal header needs. * First cut at container component * First cut at universal header component * Put card and button stories under "components" * Updated the SASS globals integration properly * Removed @use as no longer needed * Replaced @use in cbp-app.scss with @import to work around compilation error complaining because @use isn't "first" in the overall compile order now (due to globalInjection probably) * Fixes per code review feedback * fix: import wrong addon in storybook preview.js for theme (#97) * chore: update package.json information for npm publishing * Feature/story decorators (#98) * Get story wrapper/decorator working and tweak HTML addon settings to clean up the displayed HTML markup * Remove `cbp-app` from individual stories * fix: remove npm package from web-components * chore: bump versions for vanilla, react-components, and web-components * chore: update ux-guidelines package.json to be private --------- Co-authored-by: Doug Gibson <email@dgibson.net>
- Loading branch information
1 parent
3f8d9f2
commit 7b34d58