Release/v0.1.0-develop.0 #100
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* 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
* 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
* 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.
* 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 * 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
* 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: 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
* 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.
* 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: remove old darkmode toggle addon * chore: add styling addon for storybook with light/dark theme and scss support
* 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
* 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>
* 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
* 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)
* 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
* 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: 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: 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
* 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.
* 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
* Add controls to segmented button stories * Updated generateButtons() and added `selected` key to object.
* 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 * chore: dry up divider classes
* 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
* 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 * 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
* 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 hover color including dark mode * fix: tertiary card action border issue * fix: active class appears when clicking disabled button
* 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: 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: 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
* 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
* code formatting * Made some tweaks to the reset.css * Added missing variants and anchor buttons to button component * deleted commented code
* 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
* 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>
* 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
* Get story wrapper/decorator working and tweak HTML addon settings to clean up the displayed HTML markup * Remove `cbp-app` from individual stories
Fix/update packages
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What's this PR do?
Release v0.1.0-develop.0