Skip to content

Commit

Permalink
Release/0.8 (#528)
Browse files Browse the repository at this point in the history
* [Design-System-FormSelect] Build the design system for the FormSelect component (#421)

* feat: add design system

* feat: fix conflicts

* feat: final push

* feat: final push

* feat: revert some bad merge

* feat: revert some bad merge

* feat: add chromatic build

* Feature/sb 0.7 (#474)

* feat: migrating sb to 7

* feat: add the Button stories

* feat: add charactercount to v7

* feat: add checkboxgroup to v7

* feat: add radiogroup to v7

* feat: add radiogroup to v7

* feat: add toggle to v7

* feat: add tooltip to v7

* feat: add range to v7

* feat: add multiUpload to v7

* feat: add select to v7

* feat: add multiselect to v7

* feat: add input to v7

* feat: add inputMask to v7

* feat: autocomplete to v7

* feat: autocomplete to v7

* feat: tabs to v7

* feat: details to v7

* feat: table to v7

* feat: fix live edit version (#476)

* feat: cleanup example deps (#478)

* Bug/autocomplete keydown scroll (#472)

* BugFix: Autocomplete doesn't auto scroll for filtered list on keydown

* Fixed Linting and test issues

* Added Test and Refactered

* feat: fix the documentation

* feat: fix the documentation

---------

Co-authored-by: Zurico.Daniele_DEFRA <[email protected]>

* feat: remove controls (#481)

* Feature/heading (#482)

* Implement <Heading> component

* lint fixes

* give better description to what Header component does in docs

* refactor Heading Component to make less verbose

* refactor ClassBased and create Headings for all levels

* add specific testing

* lint fix

* make className and id optional

* Update src/heading/Heading.tsx

Co-authored-by: Isaac Babalola <[email protected]>

* Update src/heading/__test__/Heading.test.tsx

* Update src/heading/__test__/Heading.test.tsx

* fix: resolving heading issues

* fix: resolving heading issues

* update docs

---------

Co-authored-by: aismaelcap <[email protected]>
Co-authored-by: Daniele Zurico <[email protected]>
Co-authored-by: Isaac Babalola <[email protected]>
Co-authored-by: Isaac Babalola <[email protected]>

* fix: heading component (#489)

* Feature/label (#483)

* Button demo test

* Created Label component

* added return statement

* dcx-label embeded class updated

* removed return statement

* resolved all issues and added classbased stories

* dcx-label, value mandatory field, govuk-label

* added Typography for stories

* Add new properties to the button component developer specified class name and a variant (#490)

* Add new properties to the button component developer specified class name and a variant

* resolve PR comment to cover developer specifiedclass name

* Update src/button/Button.tsx

Co-authored-by: Isaac Babalola <[email protected]>

* feat: make the code more dynamic

* feat: add in the doc

* feat: add in the doc

* feat: add in the doc

* resolve PR comment to simplify code and get it more readable

---------

Co-authored-by: Berhane Yohannes <[email protected]>
Co-authored-by: Daniele Zurico <[email protected]>
Co-authored-by: Isaac Babalola <[email protected]>

* feat: remove duplicated story (#493)

* Feature/link (#494)

* created link component

* Link component demo and stories

* added new test case, added govuk-link css

* added styles for link component

* InsertTextComponent (#491)

* InsertTextComponent

* resolved pr comments

* InsertTextComponent

* resolved pr comments

* resolved changes

* feat: improve documentation

* feat: improve documentation

---------

Co-authored-by: kavithakurella-dev <[email protected]>
Co-authored-by: Zurico.Daniele_DEFRA <[email protected]>

* Feature/autocomplete update value (#496)

* fix: {{ Autocomplete component - changing defaultValue prop has no affect }}

* test: {{When defaultValue prop is changed, Autocomplete component updates. }}

* test: {{Test updated with dom manipulation rather than re-rendering and fix has been commented out to intentionally see test failing}}

* test: {{Now, uncommented the fix and verify that the test passes as intended}}

* Feature/paragraph (#479)

* feature/paragraph

* paragraph doc and test

* Update src/paragraph/Paragraph.tsx

Co-authored-by: Daniele Zurico <[email protected]>

* adressing pr comments.

* update stories.

* added more attribute.

* new comments has been resolved.

* paragraph live has been also updated.

* files has been updated.

* feat: update test for Heading

* feat: update story

---------

Co-authored-by: Daniele Zurico <[email protected]>

* KeyboardInput Component (#504)

* KeyboardInput Component

* KeyboardInput

* KeyboardInput

* Commponent

* KeyboardInput

* feat: minor fix

---------

Co-authored-by: kavithakurella-dev <[email protected]>
Co-authored-by: Zurico.Daniele_DEFRA <[email protected]>

* feature/blockquote (#505)

* feature/blockquote

* some more changes.

* block quote component update.

* update previewjs

* intendation.

* test file name test

* test file

* tsx

* blockquote file

* delete quote file

* blockquote file.

* delete blockquotelive

* blockquoutelive

* some comments has been fixed.

* footer type has been made optional.

* props type has been changed.

* test has been updated.

* documentation fix and styled class based component

* deleted unstyled class based story.

* styled with classname

* feat: upgrade storybook and minor refactor

---------

Co-authored-by: Zurico.Daniele_DEFRA <[email protected]>

* create a list component (#495)

* folder structure and test case scenarios added

* files named changed from listitem to list

* Added required test cases

* added comments and updated code

* code improvements

* List compo mandatory for ListItem compo

* code modifications

* code improvements

* feat: add value

* feat: add value

* feat: refactor list

* feat: refactor list

* added 3 new props

* feat: fix props

* feat: fix props

* new test cases and stories added

* added styling

* code improvements

* MarkerTypes seperated

* added new style file for classbased.stories

---------

Co-authored-by: Zurico.Daniele_DEFRA <[email protected]>

* expose and document the hook useHydrated  (#510)

* expose the function clientOnly for client side rendering

* document the function clientOnly for client side rendering

* document useHydrated and create its own unit test file

---------

Co-authored-by: Berhane Yohannes <[email protected]>

* Highlight Component (#509)

* feat: {{ Highlight component }}

* test: {{ Adding unit tests for Highlight component }}

* feat: {{ Tweaking Highlight component and test }}

* feat: {{ Fixing storybook preview }}

* feat: {{ Adding Demo, Storybook docs and live demo for Highlight Component }}

* feat: {{ Tweaking  Demo, Storybook docs and live demo }}

* feat: {{ Tidy up }}

* feat: {{ Modify to allow <Highlight>highlighted text </Highlight> usage without text prop }}

* feat: {{ Removing commented out }}

* feat: {{ Replacing HTMLQuoteElement with HTMLElement }}

* feat: {{ Simplfying rendered function in class based stories and adding custom styling }}

* feature/abbreviate (#512)

* PreformattedText component (#511)

* PreformattedText component

* PreformattedText

* PreformattedText comments

* Resolved

* setting.json resolved

---------

Co-authored-by: kavithakurella-dev <[email protected]>

* Breadcrumbs components (#508)

* Breadcrumbs components

* Added stories

* Added official govuk style file

* selected item

* added separator functionality

* improved separator

* final

* storybook order

* feature/code (#507)

* feature/code

* text replaced with value.

* code componets has been resolved as suggested.

* Fix: CharacterCount component not resetting red error text after valid input (#471)

* fix: charactercount component not resetting red error text after valid input

* fix: the character count component error message returns to default after the text area is cleared

---------

Co-authored-by: Nikki Algar <[email protected]>
Co-authored-by: Berhane Yohannes <[email protected]>

* Label Design System (#515)

* Label Design System

* Playground

* comments resolved and added accessible page

* Proper css for Label added and Dark theme added

* feat: improve label color contrast on accesible and dark theme

---------

Co-authored-by: mmirca <[email protected]>

* Feature/ds-paragraph (#514)

* feature/ds-paragraph

---------

Co-authored-by: mmirca <[email protected]>

* feat: Tabs are now non-js compliant (#506)

* feat: Tabs are now non-js compliant
---------

Co-authored-by: Zurico.Daniele_DEFRA <[email protected]>

* Insert designing (#516)

* Design InsertText
---------

Co-authored-by: kavithakurella-dev <[email protected]>
Co-authored-by: mmirca <[email protected]>

* feat: add button tokens (#520)

* feat: add list item design system styles (#519)

* feat: add heading design system styles (#521)

* Feature/bot upgrade libs (#525)

* feat: upgrade libraries

* Feature/release notes (#527)

* feat: update release notes

* feat: update release notes

* feat: upgrade to 0.8.0

---------

Co-authored-by: peter-uzor-capgem <[email protected]>
Co-authored-by: aismaelcap <[email protected]>
Co-authored-by: aismaelcap <[email protected]>
Co-authored-by: Isaac Babalola <[email protected]>
Co-authored-by: Isaac Babalola <[email protected]>
Co-authored-by: JadhavJeet <[email protected]>
Co-authored-by: Berhane Yohannes <[email protected]>
Co-authored-by: Berhane Yohannes <[email protected]>
Co-authored-by: KavithaKurella <[email protected]>
Co-authored-by: kavithakurella-dev <[email protected]>
Co-authored-by: Ahmet <[email protected]>
Co-authored-by: Yunus FIRAT <[email protected]>
Co-authored-by: Nikki Algar <[email protected]>
Co-authored-by: Nikki Algar <[email protected]>
Co-authored-by: mmirca <[email protected]>
Co-authored-by: Sri Viswanathan <[email protected]>
Co-authored-by: jgonza16 <[email protected]>
Co-authored-by: SOUNDAR-A <[email protected]>
  • Loading branch information
19 people authored Sep 15, 2023
1 parent 1579a81 commit bbb7778
Show file tree
Hide file tree
Showing 385 changed files with 35,006 additions and 18,529 deletions.
16 changes: 16 additions & 0 deletions .babelrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"sourceType": "unambiguous",
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": 100
}
}
],
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": []
}
1 change: 0 additions & 1 deletion .storybook/capgeminiTheme.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ export default create({
appContentBg: 'white',
appBorderColor: '#2b0a3d',
appBorderRadius: 4,

// Text colors
textColor: '#0070ad',
fontWeight: 'bold',
Expand Down
24 changes: 19 additions & 5 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,28 @@
module.exports = {
core: {
builder: 'webpack5',
},
stories: ['../stories/**/*.stories.@(mdx)'],
process.env.DESIGN_TOKEN_GLOB = "**/tokens.css";
const config = {
stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-docs',
'@storybook/addon-controls',
'storybook-css-modules-preset',
'@storybook/addon-a11y',
{
name: "storybook-design-token",
options: {
preserveCSSVars: false
},
docs: {
autodocs: "tag",
},
},
'@storybook/addon-mdx-gfm'
],
framework: {
name: '@storybook/react-webpack5',
options: {}
},
};

export default config;
17 changes: 15 additions & 2 deletions .storybook/manager-head.html
Original file line number Diff line number Diff line change
@@ -1,2 +1,15 @@
<link rel="shortcut icon" href="https://www.capgemini.com/wp-content/themes/capgemini-komposite/assets/images/favicon.ico">
<link rel="icon" type="image/png" href="/storybook.png" sizes="192x192">
<link rel="shortcut icon"
href="https://www.capgemini.com/wp-content/themes/capgemini-komposite/assets/images/favicon.ico">
<link rel="icon" type="image/png" href="/storybook.png" sizes="192x192">
<!-- TODO-DS: we'll remove this one when we'll decide to release the design tokens-->
<script defer>
if (location.hostname !== 'localhost') {
const $hideDesignSystemFromSidebar = document.createElement('style');
$hideDesignSystemFromSidebar.innerText = `
button[data-item-id*="design-system"] {
display: none !important;
}
`;
document.head.appendChild($hideDesignSystemFromSidebar);
}
</script>
145 changes: 142 additions & 3 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,148 @@
// https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
import '../stories/govUkStyle.css';
import '../stories/govUkStyleOfficial.css';
import '../stories/liveEdit/style.css';
import {
Title,
Subtitle,
Description,
Primary,
Controls,
Stories,
} from '@storybook/blocks';

export const parameters = {
options: {
storySort: {
order: ['DCXLibrary', ['Introduction','Utils', 'Form', 'CopyToClipboard', 'Details', 'Tabs', 'Table', 'Changelog']]
order: [
'DCXLibrary',
[
'Introduction',
'Utils',
'Form',
[
'Autocomplete',
['Documentation', 'Live', 'Without style', 'Class based'],
'Button',
['Documentation', 'Live', 'Without style', 'Class based'],
'CharacterCount',
['Documentation', 'Live', 'Without style', 'Class based'],
'Checkbox',
['Documentation', 'Live', 'Without style', 'Class based'],
'CheckboxGroup',
['Documentation', 'Live', 'Without style', 'Class based'],
'RadioGroup',
['Documentation', 'Live', 'Without style', 'Class based'],
'Input',
['Documentation', 'Live', 'Without style', 'Class based'],
'InputMasked',
['Documentation', 'Live', 'Without style', 'Class based'],
'Select',
[
'Documentation',
'Live',
'Without style',
'Class based',
'Design system',
[
'Playground',
'Default',
'Accessible',
'Dark',
'Material',
'Floating',
],
],
'MultiSelect',
['Documentation', 'Live', 'Without style', 'Class based'],
'Date',
['Documentation', 'Live', 'Without style', 'Class based'],
'MultiUpload',
['Documentation', 'Live', 'Without style', 'Class based'],
'Progress',
['Documentation', 'Live', 'Without style', 'Class based'],
'Range',
['Documentation', 'Live', 'Without style', 'Class based'],
'Toggle',
['Documentation', 'Live', 'Without style', 'Class based'],
'Tooltip',
['Documentation', 'Live', 'Class based'],
],
'Breadcrumb',
['Documentation', 'Live', 'Without style', 'Class based'],
'CopyToClipboard',
['Documentation', 'Live', 'Without style', 'Class based'],
'Details',
['Documentation', 'Live', 'Without style', 'Class based'],
'Tabs',
['Documentation', 'Live', 'Without style', 'Class based'],
'Table',
['Documentation', 'Live', 'Without style', 'Class based'],
'Typography',
[
'Abbreviate',
['Documentation', 'Live', 'Without style', 'Class based'],
'Blockquote',
['Documentation', 'Live', 'Without style', 'Class based'],
'Heading',
['Documentation', 'Live', 'Without style', 'Class based'],
'Paragraph',
['Documentation', 'Live', 'Without style', 'Class based'],
'Blockquote',
['Documentation', 'Live', 'Without style', 'Class based'],
'CodeSnippet',
['Documentation', 'Live', 'Without style', 'Class based'],
'Label',
['Documentation', 'Live', 'Without style', 'Class based'],
'Link',
['Documentation', 'Live', 'Without style', 'Class based'],
'InsertText',
['Documentation', 'Live', 'Without style', 'Class based'],
'KeyboardInput',
['Documentation', 'Live', 'Without style', 'Class based'],
'Highlight',
['Documentation', 'Live', 'Without style', 'Class based'],
'List',
['Documentation', 'Live', 'Without style', 'Class based'],
],
'Changelog',
],
],
},
},
};
//with this custom configuration we removed the <Controls/> (the properties table) from the page. By default it sits between Primary and Stories
docs: {
page: () => (
<>
<Title />
<Subtitle />
<Description />
<Primary />
<Stories includePrimary={false} />
</>
),
},
};

//It will allow to refresh the iframe all the time you move from one story to another - https://github.com/storybookjs/storybook/issues/16016
let storyId;
let storyTitle;
export const decorators = [
(storyFn, context) => {
console.log('context.title:', context.title);
console.log('storyTitle:', storyTitle);
if (storyTitle && context.title !== storyTitle) {
document.location.reload();
console.log('first');
} else if (
storyId &&
context.id !== storyId &&
context.title !== storyTitle
) {
document.location.reload();
console.log('second');
}
storyId = context.id;
storyTitle = context.title;
return storyFn();
},
];
17 changes: 12 additions & 5 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
{
"window.zoomLevel": 0,
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true
"window.zoomLevel": 0,
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"stylelint.validate": [
"css",
"scss"
],
"files.associations": {
"*.css": "postcss"
}
}
37 changes: 37 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,40 @@
## 0.8.0 (15/09/2023)

<a name="0.8.0"></a>

[Autocomplete - changing defaultValue prop has no affect](https://github.com/Capgemini/dcx-react-library/issues/455)
[Autocomplete - doesn't auto scroll for filtered list on keydown](https://github.com/Capgemini/dcx-react-library/issues/470)
[Button - add new properties](https://github.com/Capgemini/dcx-react-library/issues/466)
[Tabs - non-js compliant](https://github.com/Capgemini/dcx-react-library/issues/283)

**New components**
[Code Snippet](https://github.com/Capgemini/dcx-react-library/issues/500)
[Breadcrumbs](https://github.com/Capgemini/dcx-react-library/issues/415)
[Preformatted Text](https://github.com/Capgemini/dcx-react-library/issues/503)
[Abbreviate](https://github.com/Capgemini/dcx-react-library/issues/497)
[Highlight](https://github.com/Capgemini/dcx-react-library/issues/498)
[List item](https://github.com/Capgemini/dcx-react-library/issues/453)
[Blockquote](https://github.com/Capgemini/dcx-react-library/issues/499)
[Keyboard Shortcut](https://github.com/Capgemini/dcx-react-library/issues/501)
[Paragraph](https://github.com/Capgemini/dcx-react-library/issues/455)
[Insert Text](https://github.com/Capgemini/dcx-react-library/issues/452)
[Link](https://github.com/Capgemini/dcx-react-library/issues/467)
[Label](https://github.com/Capgemini/dcx-react-library/issues/466)
[Heading](https://github.com/Capgemini/dcx-react-library/issues/450)

**Documentation**
[clientOnly](https://github.com/Capgemini/dcx-react-library/issues/459)
[Storybook - v7](https://github.com/Capgemini/dcx-react-library/issues/473)

**Design system - not publicly available yet... stay tuned ;)**
[Button](https://github.com/Capgemini/dcx-react-library/issues/468)
[Select](https://github.com/Capgemini/dcx-react-library/issues/469)
[List Item](https://github.com/Capgemini/dcx-react-library/issues/487)
[Heading](https://github.com/Capgemini/dcx-react-library/issues/484)
[Insert Text](https://github.com/Capgemini/dcx-react-library/issues/486)
[Paragraph](https://github.com/Capgemini/dcx-react-library/issues/488)
[Label](https://github.com/Capgemini/dcx-react-library/issues/485)

## 0.7.0 (27/03/2023)

<a name="0.7.0"></a>
Expand Down
1 change: 1 addition & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ To create a new component the following must be satisfied before adding
4. create the test under `__tests__` within the component-name folder
5. create or edit a demo in the `example/src`
6. create or edit the story in the `stories`
7. in case you create a new component update the `./storybook/preview,js` file adding your component (follow the style of the other items already present)

Example folder structure with component `SnackBar`:

Expand Down
Loading

0 comments on commit bbb7778

Please sign in to comment.