feat(grid): create grid system [HEYUI-50] #26

mwagdi · 2022-05-23T07:12:03Z

Pull Request

Description

Adds row component
Adds column component

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Documentation change

How do I test this

Add steps to test
in bullet point format
preferably you can add link to the storybook build in the PR

Checklist

Did you remember to take care of the following?

npm i – for new NPM dependencies.
npm run lint - to check for linting issues
npm run test - to run unit tests
npm run test:screenshots - to run snapshot tests

New Feature / Bug Fix

Run unit tests to ensure all existing tests are still passing.
Add new passing unit tests to cover the code introduced by your pr.

Thanks for contributing!

coveralls · 2022-05-23T07:22:17Z

Pull Request Test Coverage Report for Build 2369629900

Details

0 of 0 changed or added relevant lines in 0 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 90.476%

Totals
Change from base Build 2299477253:	0.0%
Covered Lines:	17
Relevant Lines:	17

💛 - Coveralls

github-actions · 2022-05-23T07:22:56Z

Compiled a new version demo.

github-actions · 2022-05-23T07:26:27Z

Coverage report

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	98.45% (-1.55% 🔻)	127/129
🟢	Branches	83.33% (+5.56% 🔼)	30/36
🟢	Functions	100%	12/12
🟢	Lines	100%	113/113

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🟢	`...` / Col.tsx	100%	100%	100%	100%
🟢	`...` / getGridClassNames.ts	90.91%	66.67%	100%	100%
🟢	grid/src/Grid.tsx	100%	100%	100%	100%
🟢	`...` / Row.tsx	100%	100%	100%	100%

Test suite run success

53 tests passing in 8 suites.

Report generated by 🧪jest coverage report action from 3037845

packages/grid/src/components/column/Column.tsx

packages/grid/src/components/column/Column.types.ts

packages/grid/src/docs/Component.stories.mdx

packages/grid/src/components/column/Column.tsx

packages/grid/src/docs/Component.stories.mdx

packages/grid/src/components/row/Row.types.ts

packages/grid/src/components/column/Column.types.ts

github-actions · 2022-05-27T07:35:12Z

Compiled a new version demo.

github-actions · 2022-05-27T07:42:51Z

Compiled a new version demo.

github-actions · 2022-05-31T07:08:33Z

Compiled a new version demo.

github-actions · 2022-05-31T10:30:31Z

Compiled a new version demo.

github-actions · 2022-06-03T08:29:54Z

Compiled a new version demo.

github-actions · 2022-06-07T06:45:36Z

Compiled a new version demo.

github-actions · 2022-06-07T07:18:24Z

Compiled a new version demo.

github-actions · 2022-06-08T07:11:53Z

Compiled a new version demo.

github-actions · 2022-06-08T07:19:41Z

Compiled a new version demo.

derek-heycar

do not forgot add README, just check the example for the button in the main branch.

packages/grid/src/styles/column.module.css

packages/grid/src/components/row/Row.tsx

packages/grid/src/components/column/Column.tsx

packages/grid/package.json

packages/grid/src/__tests__/Grid.screenshots.test.tsx

packages/grid/src/__tests__/Grid.snapshot.test.tsx

packages/grid/src/__tests__/Grid.test.tsx

Added extra media queries: | Name | Value | | ------------- | --------------- | | `--mobile-s` | 320px to 100% | | `--mobile-m` | 375px to 100% | | `--mobile-l` | 412px to 100% | | `--mobile` | 0 to 599px | | `--tablet-s` | 600px to 100% | | `--tablet-m` | 768px to 100% | | `--tablet-l` | 860px to 100% | | `--tablet` | 600px to 1023px | | `--desktop-s` | 1024px to 100% | | `--desktop-m` | 1280px to 100% | | `--desktop-l` | 1440px to 100% | | `--desktop` | 1024px to 100% |

github-actions · 2022-07-01T20:16:45Z

Compiled a new version demo.

github-actions · 2022-07-04T12:55:53Z

Compiled a new version demo.

hcafaq

PR looks good apart from one comment why did we prioritise flex over css grid for these components

hcafaq · 2022-07-13T11:53:58Z

packages/grid/src/components/Col.module.css

+  max-width: 100%;
+  min-height: 1px;
+  flex-basis: 0;
+  flex-grow: 1;


Can we use the short-hand property as used below

The ability of the CSS flex rule is enough for the easy and fast control of the simple grid system.
You can check it out in the investigation ticket: https://heycar.atlassian.net/browse/HEYUI-49

Can we use the short-hand property as used below

I didn't get this comment. could you explain pls ?

flex: [flex-grow] [flex-shrink] [flex-basis]

I see everywhere in the PR shorthands used here I saw flex-grow and basis separately applied.

github-actions · 2022-07-14T15:48:11Z

Compiled a new version demo.

- @heycar-uikit/[email protected] - @heycar-uikit/[email protected] - @heycar-uikit/[email protected] - @heycar-uikit/[email protected] - @heycar-uikit/[email protected] - @heycar-uikit/[email protected]

github-actions · 2022-07-14T15:59:05Z

Compiled a new version demo.

# [1.4.0](v1.3.0...v1.4.0) (2022-07-14) ### Features * **grid:** The first implementation the grid package ([#26](#26)) ([807290a](807290a))

derek-heycar · 2022-07-14T16:13:59Z

🎉 This PR is included in version 1.4.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

mwagdi self-assigned this May 23, 2022

derek-heycar suggested changes May 25, 2022

View reviewed changes

derek-heycar reviewed May 25, 2022

View reviewed changes

packages/grid/src/components/column/Column.tsx Outdated Show resolved Hide resolved

derek-heycar reviewed May 25, 2022

View reviewed changes

packages/grid/src/docs/Component.stories.mdx Outdated Show resolved Hide resolved

derek-heycar reviewed May 25, 2022

View reviewed changes

packages/grid/src/components/row/Row.types.ts Outdated Show resolved Hide resolved

packages/grid/src/components/column/Column.types.ts Outdated Show resolved Hide resolved

mwagdi marked this pull request as ready for review May 31, 2022 10:28

auto-assign bot requested review from derek-heycar and hey-igor May 31, 2022 10:28

mwagdi changed the base branch from develop to main June 3, 2022 08:16

feat(grid): add grid with unit tests

baaccc6

mwagdi force-pushed the feature/HEYUI-50-grid-component branch from ec544ff to baaccc6 Compare June 3, 2022 08:18

chore(grid): delete coverage directory

98a1ac6

test(grid): add snapshot and screenshot tests

6c8916a

test(grid): fix screenshots

97aa421

test(grid): update snapshots

d42c903

chore(grid): update package-lock

f4592d4

derek-heycar suggested changes Jun 8, 2022

View reviewed changes

packages/grid/src/__tests__/Grid.screenshots.test.tsx Show resolved Hide resolved

packages/grid/src/__tests__/Grid.snapshot.test.tsx Outdated Show resolved Hide resolved

packages/grid/src/__tests__/Grid.test.tsx Outdated Show resolved Hide resolved

mwagdi requested a review from derek-heycar June 24, 2022 09:44

derek-heycar added 9 commits July 1, 2022 17:05

remove yarn files

4098c55

downgrade postcss-each

40c6c39

update screenshot artefacts

88c19f5

update snapshot tests artefacts

acaac9e

fix storybook config

5427c4d

update

05da9bb

feat(grid): The first release of the Grid component

100d12f

disable naming-convention for the file

d54d6da

derek-heycar removed request for ahashem, Nazzanuk and hey-igor July 4, 2022 08:45

Merge branch 'main' into feature/HEYUI-50-grid-component

3a85cb4

derek-heycar approved these changes Jul 4, 2022

View reviewed changes

hcafaq reviewed Jul 13, 2022

View reviewed changes

derek-heycar added 2 commits July 14, 2022 17:42

hide control section

c566a41

Merge branch 'main' into feature/HEYUI-50-grid-component

484d7c9

derek-heycar added 3 commits July 14, 2022 17:48

switch button version

34512cd

fixed versions

6a4f3f1

chore: publish

3037845

- @heycar-uikit/[email protected] - @heycar-uikit/[email protected] - @heycar-uikit/[email protected] - @heycar-uikit/[email protected] - @heycar-uikit/[email protected] - @heycar-uikit/[email protected]

derek-heycar merged commit 807290a into main Jul 14, 2022

derek-heycar deleted the feature/HEYUI-50-grid-component branch July 14, 2022 16:09

derek-heycar pushed a commit that referenced this pull request Jul 14, 2022

chore(release): 1.4.0 [skip ci]

8fe9afc

# [1.4.0](v1.3.0...v1.4.0) (2022-07-14) ### Features * **grid:** The first implementation the grid package ([#26](#26)) ([807290a](807290a))

derek-heycar added the released label Jul 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(grid): create grid system [HEYUI-50] #26

feat(grid): create grid system [HEYUI-50] #26

mwagdi commented May 23, 2022 •

edited

Loading

coveralls commented May 23, 2022 •

edited

Loading

github-actions bot commented May 23, 2022

github-actions bot commented May 23, 2022 •

edited

Loading

github-actions bot commented May 27, 2022

github-actions bot commented May 27, 2022

github-actions bot commented May 31, 2022

github-actions bot commented May 31, 2022

github-actions bot commented Jun 3, 2022

github-actions bot commented Jun 7, 2022

github-actions bot commented Jun 7, 2022

github-actions bot commented Jun 8, 2022

github-actions bot commented Jun 8, 2022

derek-heycar left a comment

github-actions bot commented Jul 1, 2022

github-actions bot commented Jul 4, 2022

hcafaq left a comment

hcafaq Jul 13, 2022

derek-heycar Jul 14, 2022

derek-heycar Jul 14, 2022

afaqahmedkhan Jul 14, 2022

github-actions bot commented Jul 14, 2022

github-actions bot commented Jul 14, 2022

derek-heycar commented Jul 14, 2022

feat(grid): create grid system [HEYUI-50] #26

feat(grid): create grid system [HEYUI-50] #26

Conversation

mwagdi commented May 23, 2022 • edited Loading

Pull Request

Description

Type of change

How do I test this

Checklist

Did you remember to take care of the following?

New Feature / Bug Fix

coveralls commented May 23, 2022 • edited Loading

Pull Request Test Coverage Report for Build 2369629900

Details

💛 - Coveralls

github-actions bot commented May 23, 2022

github-actions bot commented May 23, 2022 • edited Loading

Coverage report

Test suite run success

github-actions bot commented May 27, 2022

github-actions bot commented May 27, 2022

github-actions bot commented May 31, 2022

github-actions bot commented May 31, 2022

github-actions bot commented Jun 3, 2022

github-actions bot commented Jun 7, 2022

github-actions bot commented Jun 7, 2022

github-actions bot commented Jun 8, 2022

github-actions bot commented Jun 8, 2022

derek-heycar left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 1, 2022

github-actions bot commented Jul 4, 2022

hcafaq left a comment

Choose a reason for hiding this comment

hcafaq Jul 13, 2022

Choose a reason for hiding this comment

derek-heycar Jul 14, 2022

Choose a reason for hiding this comment

derek-heycar Jul 14, 2022

Choose a reason for hiding this comment

afaqahmedkhan Jul 14, 2022

Choose a reason for hiding this comment

github-actions bot commented Jul 14, 2022

github-actions bot commented Jul 14, 2022

derek-heycar commented Jul 14, 2022

mwagdi commented May 23, 2022 •

edited

Loading

coveralls commented May 23, 2022 •

edited

Loading

github-actions bot commented May 23, 2022 •

edited

Loading