Added Error State for Timeline, SelectionCard Component (#105)

react/css/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.2-beta.15] - 2024-07-30
+### Added
+- Added Error State for Timeline, SelectionCard Component
+
 ## [0.0.2-beta.13] - 2024-07-16
 ### Added
 - Added styles for sidebar and hamburger

react/css/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@egovernments/digit-ui-components-css",
- "version": "0.0.2-beta.14",
+ "version": "0.0.2-beta.15",
  "license": "MIT",
  "main": "dist/index.css",
  "author": "Jagankumar <[email protected]>",

react/css/src/digitv2/components/actionbarV2.scss

@@ -144,6 +144,24 @@
  justify-content: space-between;
  flex-wrap: wrap;
 
+ &.toRight{
+ margin-left: auto;
+ }
+
+ &.toLeft{
+ justify-content: unset;
+ }
+
+ .action-bar-individual-action-field{
+ button{
+ flex: 1;
+ }
+ }
+
+ &:not(.toRight){
+ width: 100%;
+ }
+
  @media (min-width: 48rem) {
  gap: theme(digitv2.spacers.spacer6);
  }
@@ -155,6 +173,7 @@
  @media (max-width: 30rem) {
  gap: theme(digitv2.spacers.spacer4);
  flex-direction: column;
+ width: 100%;
 
  .action-bar-individual-action-field{
  button{
@@ -163,24 +182,6 @@
  }
  }
  }
-
- &.toRight{
- margin-left: auto;
- }
-
- &.toLeft{
- justify-content: unset;
- }
-
- .action-bar-individual-action-field{
- button{
- flex: 1;
- }
- }
-
- &:not(.toRight){
- width: 100%;
- }
  }
 
  .digit-dropdown-select-wrap,

react/css/src/digitv2/components/selectionCardV2.scss

@@ -0,0 +1,73 @@
+.selection-card-container {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .selection-card {
+ display: flex;
+ flex-wrap: wrap;
+ gap: theme(digitv2.spacers.spacer6);
+ padding: theme(digitv2.spacers.spacer6);
+ border: 0.063rem solid #d6d5d4; 
+ border-radius: theme(digitv2.spacers.spacer1);
+ background-color: theme(digitv2.lightTheme.paper-secondary); 
+ width: fit-content;
+ }
+
+ .selection-card.error {
+ border-color: theme(digitv2.lightTheme.alert-error); 
+ }
+
+ .option {
+ display: flex;
+ align-items: center;
+ padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer4);
+ border: 0.063rem solid #d6d5d4; 
+ border-radius: theme(digitv2.spacers.spacer1);
+ background-color: theme(digitv2.lightTheme.paper-primary); 
+ cursor: pointer;
+ height: theme(digitv2.spacers.spacer10);
+ gap:theme(digitv2.spacers.spacer2);
+ color: theme(digitv2.lightTheme.text-primary);
+ font-family: theme(digitv2.fontFamily.sans);
+ font-style: theme(digitv2.fontStyle.normal);
+ font-weight: theme(digitv2.fontWeight.regular);
+ line-height: theme(digitv2.lineHeight.lineheight2);
+
+ @media (max-aspect-ratio: 9/16) {
+ /* Media query for mobile */
+ font-size: theme(digitv2.fontSize.body-l.mobile);
+ }
+
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+ /* Media query for tablets */
+ font-size: theme(digitv2.fontSize.body-l.tablet);
+ }
+
+ @media (min-aspect-ratio: 3/4) {
+ /* Media query for desktop */
+ font-size: theme(digitv2.fontSize.body-l.desktop);
+ }
+ }
+
+ .option.selected {
+ background-color: theme(digitv2.lightTheme.primary-1); 
+ color: theme(digitv2.lightTheme.paper-primary);
+ font-weight: theme(digitv2.fontWeight.bold);
+ }
+
+ .option .selectioncard-option-label {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+
+ .option .selectioncardicon {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }