@drivy/cobalt 0.20.0 → 0.21.0

package/styles/components/Form/field.scss

@@ -20,7 +20,6 @@ $formfield-maxwidth: 600px;
     margin: spacing(extra-tight) 0 spacing(tight) 0;
 
     min-width: $formfield-minwidth;
-    max-width: $formfield-maxwidth;
 
     justify-content: center;
 
@@ -31,6 +30,10 @@ $formfield-maxwidth: 600px;
 
     font-family: font-family(base);
 
+    &:not(.cobalt-FormField--fullWidth) {
+      max-width: $formfield-maxwidth;
+    }
+
     > .cobalt-FormField__Label {
       display: inline-block;
 

package/types/components/Form/Autocomplete/index.d.ts

@@ -25,6 +25,7 @@ declare const wrappedComponent: React.ComponentClass<{
     label?: string | undefined;
     hint?: string | undefined;
     fieldClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
 }, any> & {
     Raw: React.ComponentType<{
         icon?: "map" | "filter" | "search" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filters" | "flag" | "fourByFour" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "performance" | "phoneLink" | "phone" | "photos" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;

package/types/components/Form/CheckablePill.d.ts

@@ -25,6 +25,7 @@ export declare const CheckablePillsGroup: React.ComponentClass<CheckablePillsGro
     label?: string | undefined;
     hint?: string | undefined;
     fieldClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
 } & FormElement, any> & {
     Raw: React.ComponentType<CheckablePillsGroupProps>;
 };

package/types/components/Form/Checkmark.d.ts

@@ -21,6 +21,7 @@ declare const wrappedChoiceList: React.ComponentClass<ChoiceListProps & {
     label?: string | undefined;
     hint?: string | undefined;
     fieldClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
 } & FormElement, any> & {
     Raw: React.ComponentType<ChoiceListProps>;
 };

package/types/components/Form/ComposedField.d.ts

@@ -8,6 +8,7 @@ declare const wrappedComponent: React.ComponentClass<{
     label?: string | undefined;
     hint?: string | undefined;
     fieldClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
 }, any> & {
     Raw: React.ComponentType<{
         id?: string | undefined;

package/types/components/Form/Select.d.ts

@@ -8,6 +8,7 @@ declare const wrappedComponent: React.ComponentClass<{
     label?: string | undefined;
     hint?: string | undefined;
     fieldClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
 }, any> & {
     Raw: React.ComponentType<{
         children: any;

package/types/components/Form/Slider.d.ts

@@ -82,6 +82,7 @@ declare const wrappedComponent: React.ComponentClass<{
     label?: string | undefined;
     hint?: string | undefined;
     fieldClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
 }, any> & {
     Raw: React.ComponentType<{
         /**
@@ -120,9 +121,7 @@ declare const wrappedComponent: React.ComponentClass<{
         onTouchMove?: ReachSliderProps["onTouchMove"];
         onTouchEnd?: ReachSliderProps["onTouchEnd"];
         onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
-    } & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, NativeEventType | "css" | "enterKeyHint">>; /**
-     * maximum selectable value (default is 100)
-     */
+    } & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, NativeEventType | "css" | "enterKeyHint">>;
 };
 export default wrappedComponent;
 declare type SliderValueMetaProps = {

package/types/components/Form/Stepper.d.ts

@@ -24,6 +24,7 @@ declare const wrappedComponent: React.ComponentClass<{
     label?: string | undefined;
     hint?: string | undefined;
     fieldClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
 }, any> & {
     Raw: React.ComponentType<Props>;
 };

package/types/components/Form/TextArea.d.ts

@@ -18,6 +18,7 @@ declare const wrappedComponent: React.ComponentClass<{
     label?: string | undefined;
     hint?: string | undefined;
     fieldClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
 }, any> & {
     Raw: React.ComponentType<Props>;
 };

package/types/components/Form/TextInput.d.ts

@@ -16,6 +16,7 @@ declare const wrappedComponent: React.ComponentClass<{
     label?: string | undefined;
     hint?: string | undefined;
     fieldClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
 }, any> & {
     Raw: React.ComponentType<{
         type?: TextInputType | undefined;

package/types/components/Form/field.d.ts

@@ -5,12 +5,14 @@ declare type InjectedProps = {
     label?: string;
     hint?: string;
     fieldClassName?: string;
+    fullWidth?: boolean;
 } & FormElement;
 export declare const withFieldLabelAndHint: <OriginalProps>(WrappedComponent: React.ComponentType<OriginalProps>) => React.ComponentClass<OriginalProps & {
     id?: string | undefined;
     label?: string | undefined;
     hint?: string | undefined;
     fieldClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
 } & FormElement, any> & {
     Raw: React.ComponentType<OriginalProps>;
 };