orfium / orfium-ictinus Goto Github PK

When each PR is being merged in master branch a check for all tests must again run to ensure that the master branch is always safe to use.

Introduce new icons to the icon components based on our icon bucket.

Check the designs for reference

The new data type should have one of the following structures:

data=[{
    label: "Breadcrumb level 1", 
    options: { 
     1: { label: 'Level 1 Item 1', data: {} }, 
     2: { label: 'Level 1 Item 2', data: {} } 
    }
  },
 {
    label: "Breadcrumb level 2", 
    options: { 
     1: { label: 'Level 2 - Item 1', data: {} }, 
     2: { label: 'Level 2 - Item 2, data: {} } 
 }
}]

or

data=[{
    label: "Breadcrumb level 1", 
    options: [ 
     { label: 'Level 1 Item 1', data: {}, id: 1 }, 
     { label: 'Level 1 Item 2', data: {}, id: 2 } 
    ]
  },
 {
    label: "Breadcrumb level 2", 
    options: [ 
     { label: 'Level 2 - Item 1', data: {}, id: 1 }, 
     { label: 'Level 2 - Item 2, data: {}, id: 2 } 
 ]
}]

The select options container should have a high z-index so that it does not get hidden under elements that exist below and have even a z-index: 1

This is NOT for now but it is discussed to be introduced in the future.

We need to define a drawer inside the page maybe to pass content to it and show/hide it on demand.

Issue description underneath edited by @kouloumos

Implementation

All the categories must have a transparent background underneath their icon that will be rounded. Only selected category will fill this circle with the branded1 color.
The icon when the branded1 color exists must be the color from the swatches based on that color
The subcategories will not have that rounded bg. Only Icons.
Subcategory when selected will have a bacgkround color (lighter gray).

Design

The design can be found here

Description

Create a new component for showing a line chart in our design system. This component will provide both single line and multiple line chart.

Design

The VH project design that will implement these components

Implementation

Need to use the recharts library to implement the line chart as show above in the screenshots. recharts github

• Line chart must take data for a line that will demonstrate X and Y axis
• Line chart component must take multiple lines (data).
• Each line must have a unique color either defined or randomly picked from our palette
• Line chart will have the option to show the titles of the lines at the bottom left. e.g () Hidden () Claimed
• On Point hover/click a popup must show with a description of that point if provided
• On Multiple Line Point hover/click a popup must show with a description of that point if provided and the point of other lines

Tests

• X, Y axis are shown correctly
• Count lines based on data passed
• Hover/Click on points works

Description

We will introduce the new size of the TextField Component. This new size will update the logic of padding that we currently have.

Based on #55

Design

You can find the designs here
Specifically the new size is at the lower end of that screen

case of colored TextField

Implementation

You will update the current component

• Add a new prop size which will take two options md | sm
• • normal will be the default
• • padding are different for each size
• check and update the previous padding logic with icons based on the design
• change color based on what is passed
• remove type from input e.g no primary etc

Testing

• Check that the size updates the component accordingly

• Introduce the new states in TextField (filled - outlined - elevated) ( Issue: #78 )
• Add a new style when focused ( Issue: #78 )
• Support a smaller input size based on design ( Issue: #126 )
• TextField prop to define start or end decorator - icon or text

Error Handling ( Issue: #73 )

• New indicators for success and error of the fields
• Add error message component
• On Error label colour must change as well

New Decorators ( Issue: #77 )

• Add decorators in TextField (see with parameters column in designs)
• Update color of left icon on error

Multiline Support

• Add multiline support on text field
• Support both single line as simple multiline text field and
• double line that would be with a floating label

States
filled - outlined - elevated
Design can be found here
simple - left icon - right - indicator - icon and indicator

TextField component
Design can be found here

TextField error handling
Design can be found here

TextField decorators
Design can be found here

TextField Multiline
Design can be found here

When the design team decides on the palette gray colors we need to revisit the palette creation and maybe change some components to match the new palette.

This issue is a replica of New Decorators section of issue #55

• Add decorators in TextField (see with parameters column in designs)
• Update color of left icon on error

Designs on Abstract: here

Description

This will change the menu component and add additional functionalities for custom icons (left/right) and introduce a new sizing prop to define the size of the component

Design

Component will be based on the select design and can be found here

Implementation

We need to update the current implementation based on the select designs but there will be no label option

• add prop to pass a new component at the left
• update prop to pass the component at the right (maybe will be a different icon than dots)
• update the old padding logic with icon based on the new design flow
• Add avatar component for left icon
• change color based on what is passed

StoryShots plugin is not able to generate a snapshot file for DatePicker.

The reason is that it cannot map the imported CSS module (import 'react-day-picker/lib/style.css') as a valid module.
Based on the jest's documentation, the solution is simple and can be found here.

Although, following the above solution, jest will throw an exception regarding the emotion's css keyword.

Jest Exception: TypeError: Cannot convert a Symbol value to a string.

Steps to reproduce issue:

1. add the following property to moduleNameMapper property of jest.config.js file
   '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
2. run the command yarn test:run to execute tests.

Outcome: Resolve the described issue above and generate a storyshot for the DatePicker component.

Describe the bug
When the latest version of @emotion/styled is used, the theme is not passed in the children components

To Reproduce
Steps to reproduce the behavior:

1. Use @emotion/styled: "^11.0.0" and @orfium/ictinus": "^1.5.0"
2. Wrap your app with the ictinus theme provider <IctinusThemeProvider > ... </IctinusThemeProvider>
3. Try to use the Ictinus theme in a styled component eg fill: ${props => props.theme.utils.getColor("mint", 400)};
4. You will get an error since theme is an empty object.

Expected behavior
We should be able to use the Ictinus theme in a styled component since we pass it through the ictinus theme provider.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser: Google Chrome Version 87.0.4280.88 (Official Build) (64-bit)

Additional context
It works properly with "@emotion/styled": "^10.0.27" because the theme is visible in the styled components.

We need the support of the time picker on all the datepickers of ictinus

Design can be found here

We need to pass a new prop in ClickAwayListener component for accessibility reasons.

The issue:
Wrapping a list item with the current hoc:
<ClickAwayListener onClick={handler}><li>Item</li></ClickAwayListener>
will cause an unexpected DOM structure in the browser:

<ul>
        <div>
               <li>Item</li>
        </div>
</ul>

Outcome:
Introduce a solution that will give us the ability to have the expected DOM structure in the browser.

Description

There is a need for a new Card in the system that will be a placeholder for anything to wrap in. Basically this will be a styled wrapper for children.

Design

The cards

Implementation

The card should have one prop - elevated that should take 01,02,03,04 as options.

The options will be based on the below which you can find also here
Elevation must be calculated base on a function that will be globally accessable from others as this will be applied to other components if needed

Testing

Unit test on function to return the correct elvation
Snapshot Testing for the component

The file src/globals.d.ts is not included in the build files.

Reproduce steps

• Run yarn add @orfium/ictinus in a project with TS (right now this will install 0.5.3)
• Go to node_modules/@orfium/ictinus/dist/components/ThemeProvider/ThemeProvider.d.ts
• You will see that DeepPartial is red, meaning it's not defined. (Alt clicking will take you to the `src/globals.d.ts and will seem like it works, but this is not the correct behaviour)
  

Further comments

This needs to be resolved before #64 gets merged, because after that PR only the dist directory is included in the distributed package

Description

This ticket will apply the elevation to buttons and textfields. You can find the util after the #116 is done

Elevation will be applied only on cards, buttons and textfields so this is the last step that we will take to implement it in the project

Design

Buttons design of elevation
Textfield design of elevation

Implementation

There will be a new prop on each component to define the elevation of each from 01-04.
The type must be defined in the util that is already done in the #116

The elevation comes with no outlines aka borders so you must make sure that it will not show them in this case as you can see in the designs as well

Tests

• Snapshot test
• when elevation is selected the rendering is correct based on the specific shadow
• when elevation is none there is no shadow at all

This will be a component in order to show the navigation to the user. It will be consisted by 3 types of breadcrumb, simple, simple with options and advanced

All dropdowns, spacings and buttons that are going to used are going to be from the design system.

See reference below:

There is currently an issue where when you install ictinus to a project, it will enforce its own version of jest on the project.

As a result tests are failing completely.

Table must expand to available space and scroll all the content that is inside it without affecting anything else.

Introduce expand / collapse functionality like the sidebar that we have in every project.

This can be a component or a helper.

Issue Description:
Extending a component's props with HTMLInputElement will result on listing all the HTMLInputElement props in the docs file of the storybook.

example:
Component's props

• id
• label
• style
  HTMLInputElement
• onClick
• onFocus
• onChange
  etc..

The consumer should be agnostic of the HTMLInputElement prop types. We would like to ignore these props from displaying them in the docs section of the storybook.

Introduce an initial Readme file to explain how you can do basic stuff.

Basic processes to cover:

• Build for npm
• Build for storybook
• Write tests
• Basic structure

WIP

Description

This ticket will introduce a mechanism that will detect when to change the text color based on the background passed

Design

The design can be found here

Implementation

Create a new util function that will folow the design pattern
So basically whether to show white or dark text color for components that are taking freely a color from our palette

Testing

Test various colors that are returning the correct color

like the way material allows full customisation over all of the components they have.

If we are to leave it like this and not have some kind of manipulating/changing some values we should ask for the hierarchy of the components according to the importance they have and style them accordingly. So at least, when they are on the same level, they will display properly with no overlaps.

(This is not something to be implemented on this specific PR. Maybe discuss this further on an issue?)

Originally posted by @Christos-Zacharopoulos in #34

Notifications will handle two actions if found in props
Will support close functionality
Will not handle when it will show - this will be handled by the user, component will remain dummy

Designs can be found here for all notifications

• inline - would be a component that would not be absolute positioned so that the user can show it as inline everywehre
• banner - will be an absolute positioned component with top|bottom - right|left position
• toast - will be a absolute positioned component with top|bottom - right|left position - Also toggled functionality
• modals - will be a floating component with centered position

Implement Date Picker and Date Range Picker for our library.

This library will consist also by some options to preselect some ranges

Design can be found here

Description

This will be a brand new component that will be used in inner DS component but outside DS as well

Design

The design can be found here

Implementation

This will be a new simple component.

• It could take as color any color from the flat palette
• Outline property that will be only bordered
• Any children will be rendered inside.
• Two sizes will be provided small and normal (props) - check button for reference
• left icon - a component to define something on the left
• right icon - >>
• right icon, left icon click handlers
• There will be a border property eg bordered when filled - border rule

fill color: 100-400 
border color: fill color darken by 50%
fill color 500-700
border color: fill color lighten by 50%

Testing

• Test that children are rendering
• Test color is rendering correctly
• Test handlers are being called when icons are clicked
• Test that color type is rendering correctly

Description

This will implement the new state of the radio buttons which will be the outlined.

Design

Design can be found here

Implementation

Based on the already build component we will implement a new property called filled. The default value will be true.

Tests

• Test new property that renders different cases filled vs non filled

Introduce a component to handle pagination of any list or table data.

This will be based on the zeplin design of any screen

An example can be found here

This issue is a replica of Error Handling section of issue #55

• New indicators for success and error of the fields
• Add error message component
• On Error label colour must change as well

Designs on Abstract: here

Tests must start guard our library now that the design is in place.
That's why we must make snapshot tests and unit/integration tests on the components that we will not update in v1.

Components for tests

• checkbox
• breadcrumb
• pagination
• radio
• radiogroup

• states of the button to support are hover, focused, pressed, disabled
• global color states for the buttons (filled - outlined - elevated)

This issue refers to the 1st bullet of issue #55

We need to enhance the TextField component with the following styles:

• Filled
• Outlined
• Elevated

We also need to modify the styling of all mentioned styles above for focus state

Designs on Abstract: here

#64 (comment)

• add support for the new states of (filled - outline - elevated)

Error Handling

• New indicators for success and error of the fields
• Add error message component
• add support for left icon inside

New Size

• support a new smaller size of input

Multilevel

• support grouping data
• Add support for nested menu in options

Introduce keyboard support to DatePicker component for all of his states (day pick, range pick and time)

Keyboard support must also apply to time picker (future feature) and date options on the left of the overlay.

All components should be navigateable via keyboard

Unfortunately the autofix option has been intentionally removed since v2.4 of the plugin (see facebook/react#18235 (comment) )

This means dependency arrays will have to be reviewed and fixed manually

We need to enhance the DatePicker component with the following styles:

• Filled
• Outlined
• Elevated

We also need to modify the styling of all mentioned styles above for focus state

Designs on Abstract: here
Note: The designs provided are for TextField, but DatePicker should be updated like this as well.

Description

Depends on #126 #127 to finish
Create a new component for top bar that will hold basic functionality for all the projects

Design

Cases of the navbar are demonstrated in this design

Implementation

The navbar component will have several implementations. The weird and difficult part here is that the components that its using are almost the component in the system but not quite. So we will not use the internal components here. We will build something new that will be used only by navbar. These components will be

• custom search input
• custom drop down with selections
• custom drop down with selection (user)

For more reference check Video Hunter project.

Need to implement

• Background color for navbar defined as prop
• Burger Button on the left that will trigger a callback passed by the parent (to open a menu maybe)
• Create a logo placeholder
• Search Input will be the component based on #126
• • This will have a onChange callback to notify the parent of any change
• The client dropdown will be a custom component area that the dev could use to show anything
• Dropdown (Menu) - the component will be based on #127
• • callback to notify onChange
• • dropdown with label, Icon and options (1 or many options) - User Case

Tests

• Search input callback is being called once - onClick
• Burger Button is being called once - onClick
• dropdown shown
• • all values shown correctly (labelm icon, options) based on the data passed
• dropdown selection triggered parent callback

What I mean is that when ictinus is used in another project, whenever a new dependency is installed, ictinus reruns it's postinstall script which is huge.

• make it so that the postinstall script is not run (either remove it completely or somehow configure it to not run when it's an npm package)
• slim down the postinstall script, if that's possible

On Contribution documents we should explain better how we use conventional commits and what is going to happen with each commit type.

Right now there is a specific format on the input of the datepicker. We must allow the user to define this format e.g dd/mm/yyyy

We must remove useTheme for internal css functions since each css function returns the theme property.

Check that all functions are calculated through css prop and not style like an example in Button.tsx

Description

This will implement the new state of the checkbox which will be the outlined.

Design

Design can be found here

Implementation

Based on the already build component we will implement a new property called filled. The default value will be true.
For more info check button component

Tests

• Test new property that renders different cases filled vs non filled

Comparing Abstract Icons Index and the Icons Gallery on Design System some Icons have A) the same name and different .svg file or B) the same .svg file and different name:

A) alert, hourglass
B) {named in Abstract} - same as {named in Design System}

• arrow - same as fatArrow
• analytics Videos - same as linked
• checkMarkLarge - same as check
• checkMarkSmall - same as checkMark
• claimList - same as income
• claimerAnalytics - same as financialChart
• errorLarge - same as error
• errorSmall - same as closeTag
• inactiveClaims - same as timeOut
• globalReviewl - same as globalItem
• leadGeneration - same as youtube
• potentialClaim - same as percentage
• reviewHistory - same as restore
• settings - same as auto (already inserted)
• systemManagement - same as processManagement
• videoConfirmation - same as stamp
• warning - same as alert