diff --git a/cypress/apps/cra/package-lock.json b/cypress/apps/cra/package-lock.json index bb678169..269a5d70 100644 --- a/cypress/apps/cra/package-lock.json +++ b/cypress/apps/cra/package-lock.json @@ -8,7 +8,7 @@ "name": "create-react-app", "version": "0.1.0", "dependencies": { - "@govtechsg/sgds": "^2.1.1", + "@govtechsg/sgds": "^2.3.5", "@govtechsg/sgds-react": "file:../../../dist", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", @@ -2491,11 +2491,12 @@ "dev": true }, "node_modules/@govtechsg/sgds": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@govtechsg/sgds/-/sgds-2.1.1.tgz", - "integrity": "sha512-iznmnpmzx3yuUv9pZ93GUCYtFukcLf4a9bDd0ZKvbUm6wqnncMOBHVP0FZ/ZeY6uOLXqUpDExM/0RVJJzP3lAw==", + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@govtechsg/sgds/-/sgds-2.3.5.tgz", + "integrity": "sha512-5DffyGeYZL0j/EPXcillfUR4T+ml13aVenqlf1ZsUJTQhDY/Pb/Qp1p59oR2J6FZC7pSvS6H6EyH8yaVghb/6Q==", + "license": "MIT", "dependencies": { - "bootstrap": "5.1.3" + "bootstrap": "~5.2.0" } }, "node_modules/@govtechsg/sgds-masthead-react": { @@ -5890,15 +5891,22 @@ "dev": true }, "node_modules/bootstrap": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", - "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - }, + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", "peerDependencies": { - "@popperjs/core": "^2.10.2" + "@popperjs/core": "^2.11.6" } }, "node_modules/bootstrap-icons": { @@ -20980,11 +20988,11 @@ } }, "@govtechsg/sgds": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@govtechsg/sgds/-/sgds-2.1.1.tgz", - "integrity": "sha512-iznmnpmzx3yuUv9pZ93GUCYtFukcLf4a9bDd0ZKvbUm6wqnncMOBHVP0FZ/ZeY6uOLXqUpDExM/0RVJJzP3lAw==", + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@govtechsg/sgds/-/sgds-2.3.5.tgz", + "integrity": "sha512-5DffyGeYZL0j/EPXcillfUR4T+ml13aVenqlf1ZsUJTQhDY/Pb/Qp1p59oR2J6FZC7pSvS6H6EyH8yaVghb/6Q==", "requires": { - "bootstrap": "5.1.3" + "bootstrap": "~5.2.0" } }, "@govtechsg/sgds-masthead-react": { @@ -23544,9 +23552,9 @@ "dev": true }, "bootstrap": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", - "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", "requires": {} }, "bootstrap-icons": { diff --git a/cypress/apps/cra/package.json b/cypress/apps/cra/package.json index 6cb47293..98bea8dc 100644 --- a/cypress/apps/cra/package.json +++ b/cypress/apps/cra/package.json @@ -4,7 +4,7 @@ "private": true, "homepage": "https://govtechsg.github.io/sgds-govtech-react/", "dependencies": { - "@govtechsg/sgds": "^2.1.1", + "@govtechsg/sgds": "^2.3.5", "@govtechsg/sgds-react": "file:../../../dist", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", diff --git a/cypress/apps/cra/src/App.js b/cypress/apps/cra/src/App.js index d6b7c84b..100b9ac0 100644 --- a/cypress/apps/cra/src/App.js +++ b/cypress/apps/cra/src/App.js @@ -25,11 +25,15 @@ import { ToastCom, TooltipCom, } from './components'; +import { Nav } from '@govtechsg/sgds-react'; function App() { return (
+ diff --git a/cypress/apps/cra/src/index.scss b/cypress/apps/cra/src/index.scss index 0a69a88d..f58a3976 100644 --- a/cypress/apps/cra/src/index.scss +++ b/cypress/apps/cra/src/index.scss @@ -1,12 +1,6 @@ // Configuration - -@import '@govtechsg/sgds/sass/functions'; -@import '@govtechsg/sgds/sass/variables'; -@import '@govtechsg/sgds/sass/mixins'; -@import '@govtechsg/sgds/sass/utilities'; -$enable-cssgrid: true; $primary: #3fb247; -$progress-bar-bg: $primary; +// $sidenav-color: #3fb247; $primarys: ( 'primary-100': #52e85c, 'primary-200': #4dd956, @@ -18,42 +12,64 @@ $primarys: ( 'primary-800': #0f2b11, 'primary-900': #020502, ); -$custom-secondarys: ( - 'primary-100': rgb(170, 170, 235), - 'primary-200': rgb(111, 111, 241), - 'primary-300': rgb(91, 91, 239), - 'primary-400': rgb(42, 42, 216), - 'primary-500': blue, - 'primary-600': rgb(14, 14, 192), - 'primary-700': rgb(9, 9, 104), - 'primary-800': rgb(1, 1, 44), - 'primary-900': rgb(0, 0, 4), -); +// $accordion-button-active-color: red; +// @import '@govtechsg/sgds/sass/sgds'; +// @import '@govtechsg/sgds/sass/functions'; +// @import '@govtechsg/sgds/sass/variables'; +// @import '@govtechsg/sgds/sass/mixins'; +// @import '@govtechsg/sgds/sass/maps'; +// @import '@govtechsg/sgds/sass/utilities'; +$enable-cssgrid: true; +// $primary: #3fb247; +// // $sidenav-color: #3fb247; +// $progress-bar-bg: $primary; +// $primarys: ( +// 'primary-100': #52e85c, +// 'primary-200': #4dd956, +// 'primary-300': #39a340, +// 'primary-400': #3ba442, +// 'primary-500': #3fb247, +// 'primary-600': #308636, +// 'primary-700': #1b4a1e, +// 'primary-800': #0f2b11, +// 'primary-900': #020502, +// ); +// $custom-secondarys: ( +// 'primary-100': rgb(170, 170, 235), +// 'primary-200': rgb(111, 111, 241), +// 'primary-300': rgb(91, 91, 239), +// 'primary-400': rgb(42, 42, 216), +// 'primary-500': blue, +// 'primary-600': rgb(14, 14, 192), +// 'primary-700': rgb(9, 9, 104), +// 'primary-800': rgb(1, 1, 44), +// 'primary-900': rgb(0, 0, 4), +// ); -$secondarys: map-merge($secondarys, $custom-secondarys); +// $secondarys: map-merge($secondarys, $custom-secondarys); -$theme-colors: map-merge( - $theme-colors, - ( - 'primary': $primary, - ) -); -$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value'); -$theme-colors-set: map-merge( - $theme-colors-set, - ( - 'primary': $primarys, - 'secondary': $secondarys, - ) -); +// $theme-colors: map-merge( +// $theme-colors, +// ( +// 'primary': $primary, +// ) +// ); +// $theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value'); +// $theme-colors-set: map-merge( +// $theme-colors-set, +// ( +// 'primary': $primarys, +// 'secondary': $secondarys, +// ) +// ); -$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb); -$utilities-text-colors: map-loop( - $utilities-colors, - rgba-css-var, - '$key', - 'text' -); -$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, '$key', 'bg'); +// $utilities-colors: map-merge($utilities-colors, $theme-colors-rgb); +// $utilities-text-colors: map-loop( +// $utilities-colors, +// rgba-css-var, +// '$key', +// 'text' +// ); +// $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, '$key', 'bg'); @import '@govtechsg/sgds/sass/sgds'; diff --git a/package-lock.json b/package-lock.json index b960d1fa..ca6fc19b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "@babel/core": "^7.16.5", "@commitlint/cli": "^17.0.3", "@commitlint/config-conventional": "^17.0.3", - "@govtechsg/sgds": "latest", + "@govtechsg/sgds": "^2.3.5", "@govtechsg/sgds-web-component": "^1.2.2", "@rollup/plugin-commonjs": "^21.0.2", "@rollup/plugin-node-resolve": "^13.1.3", @@ -2839,12 +2839,13 @@ "dev": true }, "node_modules/@govtechsg/sgds": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@govtechsg/sgds/-/sgds-2.3.1.tgz", - "integrity": "sha512-g95Qbg2L/7Fso77p6JRfZ3H7XW6VoQla051KftDg25/F+xigBd9+LMGaujOF0SOTJS0zaCUJP5VBzVqmJOjb5Q==", + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@govtechsg/sgds/-/sgds-2.3.5.tgz", + "integrity": "sha512-5DffyGeYZL0j/EPXcillfUR4T+ml13aVenqlf1ZsUJTQhDY/Pb/Qp1p59oR2J6FZC7pSvS6H6EyH8yaVghb/6Q==", "dev": true, + "license": "MIT", "dependencies": { - "bootstrap": "5.1.3" + "bootstrap": "~5.2.0" } }, "node_modules/@govtechsg/sgds-web-component": { @@ -2864,16 +2865,23 @@ } }, "node_modules/@govtechsg/sgds/node_modules/bootstrap": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", - "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - }, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", "peerDependencies": { - "@popperjs/core": "^2.10.2" + "@popperjs/core": "^2.11.6" } }, "node_modules/@hypnosphi/create-react-context": { @@ -35060,18 +35068,18 @@ "dev": true }, "@govtechsg/sgds": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@govtechsg/sgds/-/sgds-2.3.1.tgz", - "integrity": "sha512-g95Qbg2L/7Fso77p6JRfZ3H7XW6VoQla051KftDg25/F+xigBd9+LMGaujOF0SOTJS0zaCUJP5VBzVqmJOjb5Q==", + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@govtechsg/sgds/-/sgds-2.3.5.tgz", + "integrity": "sha512-5DffyGeYZL0j/EPXcillfUR4T+ml13aVenqlf1ZsUJTQhDY/Pb/Qp1p59oR2J6FZC7pSvS6H6EyH8yaVghb/6Q==", "dev": true, "requires": { - "bootstrap": "5.1.3" + "bootstrap": "~5.2.0" }, "dependencies": { "bootstrap": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", - "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", "dev": true, "requires": {} } diff --git a/package.json b/package.json index 7876c89f..2f1bc4bf 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "@babel/core": "^7.16.5", "@commitlint/cli": "^17.0.3", "@commitlint/config-conventional": "^17.0.3", - "@govtechsg/sgds": "latest", + "@govtechsg/sgds": "^2.3.5", "@govtechsg/sgds-web-component": "^1.2.2", "@rollup/plugin-commonjs": "^21.0.2", "@rollup/plugin-node-resolve": "^13.1.3", diff --git a/src/Nav/Nav.tsx b/src/Nav/Nav.tsx index d417956b..be8ccc90 100644 --- a/src/Nav/Nav.tsx +++ b/src/Nav/Nav.tsx @@ -19,9 +19,9 @@ import { export interface NavProps extends BsPrefixProps, BaseNavProps { /** - * The visual variant of the nav items. + * The visual variant of the nav items. Used in 'Tabs component. To enable bootstrap default nav tabs use 'bs-tabs' */ - variant?: 'tabs-basic-toggle' | 'tabs-info-toggle'; + variant?: 'tabs-basic-toggle' | 'tabs-info-toggle' | 'bs-tabs'; /** * Enable vertical scrolling within the toggleable contents of a collapsed Navbar. */ @@ -46,7 +46,7 @@ const propTypes = { /** * The visual variant of the nav items. * - * @type {('tabs-basic-toggle' | 'tabs-info-toggle')} + * @type {('tabs-basic-toggle' | 'tabs-info-toggle' | 'bs-tabs')} */ variant: PropTypes.string, @@ -134,7 +134,7 @@ const Nav: BsPrefixRefForwardingComponent<'ul', NavProps> = React.forwardRef< [`${navbarContext?.bsPrefix}-nav-scroll`]: navbarContext && navbarScroll, ['sgds']: !navbarContext, - ['nav-tabs']: !navbarContext, + ['nav-tabs']: props.variant === 'bs-tabs', })} {...props} /> diff --git a/stories/getting-started/usage/sass.md b/stories/getting-started/usage/sass.md index eb383e77..5e8d38a6 100644 --- a/stories/getting-started/usage/sass.md +++ b/stories/getting-started/usage/sass.md @@ -14,7 +14,18 @@ Basic customisation involves overriding of variables that consist of a simple pr // In styles/app.scss // Step 1: Override SGDS defaults -$primary: rgb(8, 11, 56); +$primary: #3fb247; +$primarys: ( + 'primary-100': #52e85c, + 'primary-200': #4dd956, + 'primary-300': #39a340, + 'primary-400': #3ba442, + 'primary-500': #3fb247, + 'primary-600': #308636, + 'primary-700': #1b4a1e, + 'primary-800': #0f2b11, + 'primary-900': #020502, +); $secondary: #ff8c00; $warning: rgb(134, 37, 37); $enable-cssgrid: true; @@ -33,70 +44,4 @@ import './styles/app.scss'; export default function App() { return
...
; } -``` - -## Advanced customisation - -### Example: Change SGDS primary colour - -In this example, we want to replace the all of the primary colour of SGDS. We do that via overriding the `$primary` and `$primarys` !default variables. To ensure any downstream dependencies related to `$primary`and `$primarys` also follow the same colour(s), we will update the following as well: - -1. `$theme-colors`, -2. `$theme-colors-rgb`, -3. `$theme-colors-set`, -4. `$utilities-color`, -5. `$utilities-text-colors`, -6. `$utilities-bg-colors` - -```css -// Step 1: Include functions, variables ,mixins and utilities as you will likely need to use them for customisation -@import '@govtechsg/sgds/sass/functions'; -@import '@govtechsg/sgds/sass/variables'; -@import '@govtechsg/sgds/sass/mixins'; -@import '@govtechsg/sgds/sass/utilities'; - -// Step 2: Override the !default variables here. -$primary: #3fb247; -$primarys: ( - 'primary-100': #52e85c, - 'primary-200': #4dd956, - 'primary-300': #39a340, - 'primary-400': #3ba442, - 'primary-500': #3fb247, - 'primary-600': #308636, - 'primary-700': #1b4a1e, - 'primary-800': #0f2b11, - 'primary-900': #020502, -); - -// Step 3: Update related downstream dependencies -$theme-colors: map-merge( - $theme-colors, - ( - 'primary': $primary, - ) -); -$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value'); -$theme-colors-set: map-merge( - $theme-colors-set, - ( - 'primary': $primarys, - ) -); - -$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb); -$utilities-text-colors: map-loop( - $utilities-colors, - rgba-css-var, - '$key', - 'text' -); -$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, '$key', 'bg'); - -// Step 3: Update components that you want to follow the $primary colour changes -$progress-bar-bg: $primary; -... - -//Step 4: Import all of sgds styles -@import '@govtechsg/sgds/sass/sgds'; -``` +``` \ No newline at end of file diff --git a/tests/Nav/Nav.test.jsx b/tests/Nav/Nav.test.jsx index 4af622fb..f3e235d4 100644 --- a/tests/Nav/Nav.test.jsx +++ b/tests/Nav/Nav.test.jsx @@ -22,6 +22,12 @@ describe('