Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add an Icons Package #46

Closed
7 tasks done
DanielvanVliet opened this issue Feb 20, 2021 · 1 comment · Fixed by #158
Closed
7 tasks done

Add an Icons Package #46

DanielvanVliet opened this issue Feb 20, 2021 · 1 comment · Fixed by #158
Assignees
@GewoonMaarten
Labels
enhancement New feature or request high Priority

Comments

@DanielvanVliet
Copy link
Contributor

DanielvanVliet commented Feb 20, 2021 •
edited by GewoonMaarten
Loading

Currently we have no ideal solution for using Icons in the PWA.
One approach we use is to generate a React component from an svg.
This does not integrate with our other MUI-based components as nicely as it could.

MUI uses the SvgIcon component to create its icons. Using this in the PWA requires a dependency on MUI core and is not recommended.

If we expose an Icon package in the component library that uses SvgIcon internally we avoid alot of styling problems

Tasks

  • Add an icons package
  • Wrap the SvgIcon component
  • For each icon in the design system, create an Icon Component.
  • Storybook stories to demonstrate how to use the icons (show all icons in one story/page)

Acceptance criteria

  • Components use SvgIcon
  • SvgIcon component can be used separately
  • All icons from the PWA prototype are supported
@DanielvanVliet DanielvanVliet added enhancement New feature or request triage Needs to get a priority needs refinement This story needs more information or needs to be scored labels Feb 20, 2021
@DanielvanVliet DanielvanVliet mentioned this issue Feb 20, 2021
Merged
@bddjong
Copy link
Contributor

bddjong commented Mar 31, 2021

This story has a lot of uncertainty:

  • Do we provide all the icons in the component library (perhaps under an icons package), or do we simply export a generic SvgIcon component that allows end-users to implement their own icons
  • Some of our components have an icon in them, such as the Card. Would a user importing our card component also get a whole load of icons they don't need? Or does the card itself include a single icon implementation, instead of relying on an entire Icons package

@bddjong bddjong added 3 Story points and removed needs refinement This story needs more information or needs to be scored triage Needs to get a priority labels Mar 31, 2021
@GewoonMaarten GewoonMaarten added the high Priority label Apr 28, 2021
@GewoonMaarten GewoonMaarten self-assigned this Apr 28, 2021
GewoonMaarten added a commit that referenced this issue May 1, 2021
@GewoonMaarten
Merge branch 'development' into feature/#46-icons
7a3da14
@GewoonMaarten GewoonMaarten linked a pull request May 5, 2021 that will close this issue
Feature/#46 icons #158
Merged
GewoonMaarten added a commit that referenced this issue May 5, 2021
@GewoonMaarten
Feature/#46 icons (#158)
767573d 
* add boilerplate project

* add the ability for storybook to include svg files

* wrap svgIcon

* move svg icon file

* add default story

* add type support for svg files

* add all svg icons from figma

* update svg type

* wrap all icons

* forward props

* display all icons in storybook

* replace all fill and stroke values with "currentColor"

* fix icon fill

* update shapeRendering to be enum

* add single icon story

* install svgo and add to build script

optimize all the svgs!

* Update README with contributing info

* update show code for single icon

* replace material icons with our own in storybook stories

* replace x with *

* remove @material-ui/icons as dependency
joostvanviegen pushed a commit that referenced this issue May 8, 2021
@GewoonMaarten @joostvanviegen
Feature/#46 icons (#158)
3137cb5 
* add boilerplate project

* add the ability for storybook to include svg files

* wrap svgIcon

* move svg icon file

* add default story

* add type support for svg files

* add all svg icons from figma

* update svg type

* wrap all icons

* forward props

* display all icons in storybook

* replace all fill and stroke values with "currentColor"

* fix icon fill

* update shapeRendering to be enum

* add single icon story

* install svgo and add to build script

optimize all the svgs!

* Update README with contributing info

* update show code for single icon

* replace material icons with our own in storybook stories

* replace x with *

* remove @material-ui/icons as dependency
@bddjong bddjong removed the 3 Story points label May 26, 2021
@bddjong bddjong closed this as completed May 26, 2021
DanielvanVliet added a commit that referenced this issue Jun 19, 2021
@joostvanviegen @mjcarsjens
@GewoonMaarten @bddjong @MCarsjensGX @DanielvanVliet @ogjtech
Feature/#79 cards case (#134)
9d5d545 
* Only allow lerna publish from master

* Publish

 - @gemeente-denhaag/accordionactions@0.1.7
 - @gemeente-denhaag/accordiondetails@0.1.7
 - @gemeente-denhaag/accordionsummary@0.1.7
 - @gemeente-denhaag/accordion@0.1.7
 - @gemeente-denhaag/appbar@0.1.7
 - @gemeente-denhaag/avatargroup@0.1.7
 - @gemeente-denhaag/avatar@0.1.7
 - @gemeente-denhaag/badge@0.1.7
 - @gemeente-denhaag/basedatadisplayprops@0.1.7
 - @gemeente-denhaag/baselayoutprops@0.1.7
 - @gemeente-denhaag/baseprops@0.1.7
 - @gemeente-denhaag/box@0.1.7
 - @gemeente-denhaag/buttongroup@0.1.7
 - @gemeente-denhaag/button@0.1.7
 - @gemeente-denhaag/cardactions@0.1.7
 - @gemeente-denhaag/cardcontent@0.1.7
 - @gemeente-denhaag/cardheader@0.1.7
 - @gemeente-denhaag/card@0.1.7
 - @gemeente-denhaag/checkbox@0.1.7
 - @gemeente-denhaag/container@0.1.7
 - @gemeente-denhaag/divider@0.1.7
 - @gemeente-denhaag/drawer@0.1.7
 - @gemeente-denhaag/formcontrollabel@0.1.7
 - @gemeente-denhaag/formcontrol@0.1.7
 - @gemeente-denhaag/formgroup@0.1.7
 - @gemeente-denhaag/gridlisttilebar@0.1.7
 - @gemeente-denhaag/gridlisttile@0.1.7
 - @gemeente-denhaag/gridlist@0.1.7
 - @gemeente-denhaag/grid@0.1.7
 - @gemeente-denhaag/hidden@0.1.7
 - @gemeente-denhaag/iconbutton@0.1.7
 - @gemeente-denhaag/inputlabel@0.1.7
 - @gemeente-denhaag/link@0.0.2
 - @gemeente-denhaag/listitemavatar@0.1.7
 - @gemeente-denhaag/listitemicon@0.1.7
 - @gemeente-denhaag/listitemsecondaryaction@0.1.7
 - @gemeente-denhaag/listitemtext@0.1.7
 - @gemeente-denhaag/listitem@0.1.7
 - @gemeente-denhaag/listsubheader@0.1.7
 - @gemeente-denhaag/list@0.1.7
 - @gemeente-denhaag/menuitem@0.1.7
 - @gemeente-denhaag/menulist@0.1.7
 - @gemeente-denhaag/menu@0.1.7
 - @gemeente-denhaag/mobilestepper@0.1.7
 - @gemeente-denhaag/paper@0.1.7
 - @gemeente-denhaag/pickersutilsprovider@0.1.10
 - @gemeente-denhaag/pickers@0.1.14
 - @gemeente-denhaag/popover@0.1.7
 - @gemeente-denhaag/popper@0.1.7
 - @gemeente-denhaag/radiogroup@0.1.7
 - @gemeente-denhaag/radio@0.1.7
 - @gemeente-denhaag/select@0.1.7
 - @gemeente-denhaag/stepbutton@0.1.7
 - @gemeente-denhaag/stepconnector@0.1.7
 - @gemeente-denhaag/stepcontent@0.1.7
 - @gemeente-denhaag/stepicon@0.1.7
 - @gemeente-denhaag/steplabel@0.1.7
 - @gemeente-denhaag/step@0.1.7
 - @gemeente-denhaag/stepper@0.1.7
 - @gemeente-denhaag/swipeabledrawer@0.1.7
 - @gemeente-denhaag/switch@0.1.7
 - @gemeente-denhaag/tabcontext@0.1.7
 - @gemeente-denhaag/tablist@0.1.7
 - @gemeente-denhaag/tabpanel@0.1.7
 - @gemeente-denhaag/tabscrollbutton@0.1.7
 - @gemeente-denhaag/tab@0.1.7
 - @gemeente-denhaag/tabs@0.1.7
 - @gemeente-denhaag/textfield@0.1.7
 - @gemeente-denhaag/toolbar@0.1.7
 - @gemeente-denhaag/typography@0.1.7
 - @gemeente-denhaag/datadisplay@0.1.5
 - @gemeente-denhaag/denhaag-component-library@0.1.14
 - @gemeente-denhaag/input@0.1.12
 - @gemeente-denhaag/layout@0.1.5
 - @gemeente-denhaag/navigation@0.1.5
 - @gemeente-denhaag/surfaces@0.1.5

* Added initial version of card and cardheader styling

* Applied styling to Card and changed card's hex values to hsl

* switching cardstyle based on the variant.

* Added color to card case and padding to the top of card

* WIP:Including multiple components in Card
Including multiple components in card to adhere to the designs.

* Removed padding from cardcontent

* Moved cards story to reflect the way cards are represented in the designs

* Fixed arrow position and text color

* Fixed border of Case / card
Added font weight to title and subtitle
Sorted css file by property / design token names

* Added paper svg file to case / card

* Added title, subtitle and date properties to card

* Correctly padded date on left side

* Correctly positioned the date and arrow on cards

Co-authored-by: Daniel van Vliet <Danielvvliet@hotmail.com>

* Suggested changes to Card to show properly as folder and changed around class names to be conform BEM standards

* Added correct borders to card/case

Co-authored-by: Daniel van Vliet <Danielvvliet@hotmail.com>

* Added on-hover perspective change to card/case

* Remove merge conflicts and reduce amount of design tokens for Button

* Made text darker on hover

* WIP: focus border color title and subtitle

* Add base styles package

* Add css as default export

* Change tsx in basestyles/package.json to ts

* Changed colour hex values to hsl
(Hue Saturation Luminesence)

* Fix incorrect HSL value for --denhaag-green-1

* Changed hsl values to modern notation
also reverted change in stylelint config to change color notation to modern.

* Update README.md

* Storybook show code fix (#117)

* Show code showing actual code in layout Storybook.

* Show code showing actual code in navigation Storybook.

* Show code showing actual code in surfaces Storybook.

* Show code showing actual code in data display Storybook.

* Show code showing actual code in input Storybook.

* Experimental commit, providing different types of code docs per component to properly display its implementation.

* Redefined code examples of components based on best possible overview

* Experimental commit: Show possibility of providing custom code documentation for each component variant in Storybook

* Experimental commit: custom code docs per component.

* Applied per-component docs specification for input components.

* Applied per-component code doc specs to layout components.

* Applied per-component code doc specs to navigation components.

* Applied per-component code doc specs to surface components.

* Shortened import

* Defined custom code in separate variable to fix indentation

* Defined custom code in separate variable to fix indentation for input components.

* Defined custom code in separate variable to fix indentation for navigation components.

* Defined custom code in separate variable to fix indentation for navigation (yes, twice) components.

* Defined custom code in separate variable to fix indentation for surface components.

* Fixed indendation for surfaces.. Again...

* Fixed indendation for navigation.. Again...

* Fixed indendation for layout.. Again...

* Fixed indendation for input.. Again...

* Fixed indendation for datadisplay.. Again...

* Prettifier go brrr

* Prettifier go brrr and also fixed indentation again because Checkboxes decided to be selfish pricks.

Co-authored-by: Maarten Carsjens <maarten.carsjens@gxsoftware.com>

* Fix/#42 fix installation files (#137)

* add script to bulk update package.json files

* Renamed and moved source files

Renamed all files to index.tsx and moved into src directory. This is to be inline with conventions.

* Update fields in package.json

* fix bug in update script

* sorted package.json files

* fix build

* Only allow lerna publish from master

* add dependency to steplabel

* updated package.json jsx flag

* add production key to microbundle

* added peerdependency on react, fixed imports

* picker potential fix

* pickers index cleanup

* pickerutilsprovider fix

* removed duplicate export of defaults

* use tsc instead of microbundler

* Merge branch 'fix/#42-fix-installation-files' of https://github.com/Gemeente-DenHaag/denhaag-component-library into fix/#42-fix-installation-files

* fix dependencies and add npmignore

* remove files field from package.json

* Fixing imports in storybook stories

* Moved stories to component directory

Co-authored-by: Maarten <GewoonMaarten@users.noreply.github.com>

* remove old paths

* update files field in package.json

* add build config to meta-packages

* remove module field from tsconfig

* update clean script

* remove deprecated script

* fixing compatibility of yarn clean for windows & linux

* update tsconfig path and remove npmignore

* update clean script

* update steplabel command

* upgraded dependencies of react and storybook, fixed stories

* merge fix

* update react and storybook

* upgraded storybook dependencies

* yarn lock update

* fix textfield import

* remove src from imports

* add doc for install packages locally to contributing.md

* remove trailing comma

* make incremental build actually work

* remove commented code

Co-authored-by: Maarten Carsjens <mjcarsjens@gmail.com>
Co-authored-by: bdjong <bryandejong99@gmail.com>
Co-authored-by: Maarten Carsjens <maarten.carsjens@gxsoftware.com>
Co-authored-by: DanielvanVliet <danielvvliet@hotmail.com>

* Hot fix (#149)

* fix incorrect git merge in IconButton

* add compiler options for root tsconfig.json

Appearantly this tsconfig.json is used by storybook. It doesn't show the controls if the compiler options are not included

* update paths for linters

* make husky scripts executable

* Eslint storybook warning fixes

* More eslint warnings in storybook files fixed

Co-authored-by: DanielvanVliet <danielvvliet@hotmail.com>

* Feature/#46 icons (#158)

* add boilerplate project

* add the ability for storybook to include svg files

* wrap svgIcon

* move svg icon file

* add default story

* add type support for svg files

* add all svg icons from figma

* update svg type

* wrap all icons

* forward props

* display all icons in storybook

* replace all fill and stroke values with "currentColor"

* fix icon fill

* update shapeRendering to be enum

* add single icon story

* install svgo and add to build script

optimize all the svgs!

* Update README with contributing info

* update show code for single icon

* replace material icons with our own in storybook stories

* replace x with *

* remove @material-ui/icons as dependency

* Move basestyles to styles subfolder

* Split design tokens and brand tokens

* Add styles folder to workspaces

* Use den haag brand tokens in storybook

* Fixed visibility of focus border

* Made card focussable

* merge changes

* Removed include of card story in tsconfig cardactions

* Add css files to dist directories of Card, CardHeader, CardContent

* Fixed style of card/case on focus

* Fixed story book args to map to interface

* Removed unused raised property from card

* Moved card /case design tokens into Basestyles Package

* Use builtin fontsizes

* Fixed some design token references in Card/Case

* Increased height on background::before to remove gap

* Compensate padding of border text with focus

* Added workaround because of chrome focus state

* Changed font size token to point to correct css variable

* Updated the Card because of new styling packages

* Move css to .css files instead of  .module.css to fix clean react project issues

* change css variable names to adhere correct naming scheme

* Changed naming of some css variables

* Changed focusborder of text to outline and added outline to arrow of
Card/Case

* Added onclick and tabindex as properties

* NewLines

* Fix spelling errors secundary -> secondary

* Remove commented code

* Simplified border radiu of card--case

* Remove obsolete tokens files

* Use React event for onclick

* Fixed bem classnames

* Added time html5 tag around the date in card

* Fixed the input of time html5 tag

* Renamed CardActions file and reduced exports of Card

* Fix MouseEvent type

* Move some remaiing tokens to tokens-card

* Sorted all properties alphabetically

* card-header bem naming

* Remove cardcasefocusclasses from bem mapping

* Rename card__text wrapper to card-text-wrapper

* Move cardactions styling token to tokens-card

* Cleanup properties of actions and content

* Removed obsolete cardheader component

* added --hover and --focus to selectors and formatted the selectors better

* Correctly fix bem naming of the text wrapper

* Fixed some inconsistencies in card.css

* Added stylelint ignore line descending specifity
In order to ignore descending specifity for one line which would
otherwise result in duplicated css just for testing purposes.

* Clearer naming of wrapper padding

* Change override of cardcontent: use start and end

* Added focus border around all arrow card variants

* split title padding tokens

* removed tabindex from card/case and changed the title to an anchor tag. Fixed focus styles to work with these changes.

* replaced padding inline and block properties by their start and end counterparts

Co-authored-by: Daniel van Vliet <Danielvvliet@hotmail.com>

* Ran prettier to fix some minor issues

* Fixed CSS token naming

* removed typography component

Co-authored-by: Maarten Carsjens <mjcarsjens@gmail.com>
Co-authored-by: Maarten <GewoonMaarten@users.noreply.github.com>
Co-authored-by: bdjong <bryandejong99@gmail.com>
Co-authored-by: Maarten Carsjens <maarten.carsjens@gxsoftware.com>
Co-authored-by: Daniel van Vliet <Danielvvliet@hotmail.com>
Co-authored-by: Bryan de Jong <bryan.dejong@denhaag.nl>
Co-authored-by: Jeroen de Klerk <jtech.work@protonmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@GewoonMaarten GewoonMaarten

Labels
enhancement New feature or request high Priority
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Feature/#46 icons nl-design-system/denhaag
3 participants
@GewoonMaarten @DanielvanVliet @bddjong