@speakapbv/dough-component-library 10.9.1 → 10.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/form-elements/date-time/date-time.d.ts +1 -0
  2. package/dist/components/texts/texts.d.ts +4 -0
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.es.js +12 -9
  5. package/dist/index.js +12 -8
  6. package/dist/node_modules/@speakapbv/dough-component-library-tokens/index.d.ts +1 -0
  7. package/package.json +2 -2
package/dist/components/form-elements/date-time/date-time.d.ts CHANGED
@@ -27,6 +27,7 @@ export interface DateTimeProps {
27
27
  type?: DoughDateInput;
28
28
  onChange(value: DateRangeValue): void;
29
29
  value?: DateRangeValue;
30
+ twoMonthRangePicker?: boolean;
30
31
  }
31
32
  export declare const DateTime: {
32
33
  (props: DateTimeProps): JSX.Element;
package/dist/components/texts/texts.d.ts CHANGED
@@ -26,6 +26,10 @@ export interface TypoProps {
26
26
  color?: string;
27
27
  component?: string;
28
28
  }
29
+ export declare const Hero: {
30
+ (props: TypoProps): JSX.Element;
31
+ displayName: string;
32
+ };
29
33
  export declare const H1: {
30
34
  (props: TypoProps): JSX.Element;
31
35
  displayName: string;
package/dist/index.d.ts CHANGED
@@ -11,7 +11,7 @@ export { LayoutFlexBox } from "./components/layout-comp/layout-flex-box";
11
11
  export { Header } from "./components/containers/card/header";
12
12
  export { Footer } from "./components/containers/card/footer";
13
13
  export { DropMenu, DoughDropMenuRef } from "./components/drop-menu/drop-menu";
14
- export { H1, H2, H3, H4, H5, H6, H7, Subtitle, Text, Paragraph, TextAlignment, DoughListItem, UnorderedList, } from "./components/texts/texts";
14
+ export { H1, H2, H3, H4, H5, H6, H7, Subtitle, Text, Paragraph, TextAlignment, DoughListItem, UnorderedList, Hero, } from "./components/texts/texts";
15
15
  export { InputWrapper } from "./components/form-elements/input-wrapper/input-wrapper";
16
16
  export { TextInput } from "./components/form-elements/text-inputs/text-input";
17
17
  export { DateTime, DoughDateInput, } from "./components/form-elements/date-time/date-time";
package/dist/index.es.js CHANGED
@@ -874,7 +874,7 @@ var LayoutFlexBox = function (props) {
874
874
  };
875
875
  LayoutFlexBox.displayName = "LayoutFlexBox";
876
876
 
877
- var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5;\n box-sizing: border-box;\n margin: 0;\n user-select: text;\n position: relative;\n}\n.dough-typo.dough-text-nowrap {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dough-typo.dough-text-word-break {\n word-break: break-word;\n}\n.dough-typo.dough-text-ellipsis {\n text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n text-align: left;\n}\n.dough-typo.dough-text-align-right {\n text-align: right;\n}\n.dough-typo.dough-text-align-center {\n text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n text-align: justify;\n}\n.dough-typo.dough-text {\n line-height: 1.3rem;\n}\n.dough-typo.dough-text-h1 {\n font-size: 1.625rem;\n line-height: 1.875rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n font-size: 1.625rem !important;\n font-weight: 700 !important;\n top: 0.40625rem;\n}\n.dough-typo.dough-text-h1.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h2 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n font-size: 1.5rem !important;\n font-weight: 700 !important;\n top: 0.375rem;\n}\n.dough-typo.dough-text-h2.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h3 {\n font-size: 1.25rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n font-size: 1.25rem !important;\n font-weight: 700 !important;\n top: 0.3125rem;\n}\n.dough-typo.dough-text-h3.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h4 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n font-size: 1.125rem !important;\n font-weight: 700 !important;\n top: 0.28125rem;\n}\n.dough-typo.dough-text-h4.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h5 {\n font-size: 1rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n font-size: 1rem !important;\n font-weight: 700 !important;\n top: 0.25rem;\n}\n.dough-typo.dough-text-h5.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h6 {\n font-size: 0.875rem;\n line-height: 1.3rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n font-size: 0.875rem !important;\n font-weight: 700 !important;\n top: 0.21875rem;\n}\n.dough-typo.dough-text-h6.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h7 {\n font-size: 0.8125rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n font-size: 0.8125rem !important;\n font-weight: 700 !important;\n top: 0.203125rem;\n}\n.dough-typo.dough-text-h7.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-subtitle {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-weight: 400;\n font-size: 0.8125rem;\n line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n line-height: 0.94rem;\n font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n line-height: 0.8rem;\n font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n line-height: 0.6875rem;\n font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n text-decoration: line-through;\n}";
877
+ var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5;\n box-sizing: border-box;\n margin: 0;\n user-select: text;\n position: relative;\n}\n.dough-typo.dough-text-nowrap {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dough-typo.dough-text-word-break {\n word-break: break-word;\n}\n.dough-typo.dough-text-ellipsis {\n text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n text-align: left;\n}\n.dough-typo.dough-text-align-right {\n text-align: right;\n}\n.dough-typo.dough-text-align-center {\n text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n text-align: justify;\n}\n.dough-typo.dough-text {\n line-height: 1.3rem;\n}\n.dough-typo.dough-text-hero {\n font-size: 2rem;\n line-height: 2.344rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-hero input[type=text],\n.dough-typo.dough-text-hero .dough-fe-label {\n font-size: 2rem !important;\n font-weight: 700 !important;\n top: 0.5rem;\n}\n.dough-typo.dough-text-hero.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h1 {\n font-size: 1.625rem;\n line-height: 1.875rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n font-size: 1.625rem !important;\n font-weight: 700 !important;\n top: 0.40625rem;\n}\n.dough-typo.dough-text-h1.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h2 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n font-size: 1.5rem !important;\n font-weight: 700 !important;\n top: 0.375rem;\n}\n.dough-typo.dough-text-h2.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h3 {\n font-size: 1.25rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n font-size: 1.25rem !important;\n font-weight: 700 !important;\n top: 0.3125rem;\n}\n.dough-typo.dough-text-h3.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h4 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n font-size: 1.125rem !important;\n font-weight: 700 !important;\n top: 0.28125rem;\n}\n.dough-typo.dough-text-h4.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h5 {\n font-size: 1rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n font-size: 1rem !important;\n font-weight: 700 !important;\n top: 0.25rem;\n}\n.dough-typo.dough-text-h5.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h6 {\n font-size: 0.875rem;\n line-height: 1.3rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n font-size: 0.875rem !important;\n font-weight: 700 !important;\n top: 0.21875rem;\n}\n.dough-typo.dough-text-h6.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h7 {\n font-size: 0.8125rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n font-size: 0.8125rem !important;\n font-weight: 700 !important;\n top: 0.203125rem;\n}\n.dough-typo.dough-text-h7.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-subtitle {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-weight: 400;\n font-size: 0.8125rem;\n line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n line-height: 0.94rem;\n font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n line-height: 0.8rem;\n font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n line-height: 0.6875rem;\n font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n text-decoration: line-through;\n}";
878
878
  styleInject(css_248z$6);
879
879
 
880
880
  var TextAlignment;
@@ -903,6 +903,8 @@ var TextElement = function (props) {
903
903
  var HeaderElement = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, {
904
904
  "dough-header-regular": props.bold === false,
905
905
  }) }))); };
906
+ var Hero = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-hero"), component: props.component ? props.component : "h1" }))); };
907
+ Hero.displayName = "Hero";
906
908
  var H1 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h1"), component: props.component ? props.component : "h1" }))); };
907
909
  H1.displayName = "H1";
908
910
  var H2 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h2"), component: props.component ? props.component : "h2" }))); };
@@ -2468,17 +2470,17 @@ var isRange = function (props) {
2468
2470
  };
2469
2471
  var DateTime = function (props) {
2470
2472
  var _a, _b, _c, _d, _e, _f;
2471
- var _g = props.locale, locale = _g === void 0 ? doughDefaultLocale : _g, _h = props.disabled, disabled = _h === void 0 ? false : _h, _j = props.readOnly, readOnly = _j === void 0 ? false : _j, _k = props.type, type = _k === void 0 ? DoughDateInput.DATE : _k;
2473
+ var _g = props.locale, locale = _g === void 0 ? doughDefaultLocale : _g, _h = props.disabled, disabled = _h === void 0 ? false : _h, _j = props.readOnly, readOnly = _j === void 0 ? false : _j, _k = props.type, type = _k === void 0 ? DoughDateInput.DATE : _k, _l = props.twoMonthRangePicker, twoMonthRangePicker = _l === void 0 ? true : _l;
2472
2474
  var isTime = function () {
2473
2475
  return type === DoughDateInput.DATETIME ||
2474
2476
  type === DoughDateInput.DATETIMERANGE;
2475
2477
  };
2476
- var _l = useState(props.value && props.value[0] ? props.value[0] : new Date()), visibleRange = _l[0], setVisibleRange = _l[1];
2477
- var _m = useState(MONTH_YEAR_SELECTION_TYPES.hidden), monthYearSelectionType = _m[0], setMonthYearSelectionType = _m[1];
2478
- var _o = useState({
2478
+ var _m = useState(props.value && props.value[0] ? props.value[0] : new Date()), visibleRange = _m[0], setVisibleRange = _m[1];
2479
+ var _o = useState(MONTH_YEAR_SELECTION_TYPES.hidden), monthYearSelectionType = _o[0], setMonthYearSelectionType = _o[1];
2480
+ var _p = useState({
2479
2481
  from: undefined,
2480
2482
  to: undefined,
2481
- }), range = _o[0], setRange = _o[1];
2483
+ }), range = _p[0], setRange = _p[1];
2482
2484
  var openYearsView = function () {
2483
2485
  setMonthYearSelectionType(MONTH_YEAR_SELECTION_TYPES.year);
2484
2486
  };
@@ -2615,7 +2617,7 @@ var DateTime = function (props) {
2615
2617
  React.createElement(LayoutFlexBox, { autoFit: false, className: "dough-date-time-field" },
2616
2618
  React.createElement(LayoutContainer, { layoutType: Direction.VERTICAL },
2617
2619
  React.createElement(LayoutFlexBox, { autoFit: false },
2618
- React.createElement(DateTimeHeader, { locale: locale, multiple: isRange(props), onChange: function (date) {
2620
+ React.createElement(DateTimeHeader, { locale: locale, multiple: isRange(props) && twoMonthRangePicker, onChange: function (date) {
2619
2621
  setVisibleRange(date);
2620
2622
  }, onMonthClicked: openMonthsView, onYearClicked: openYearsView, value: visibleRange })),
2621
2623
  React.createElement(LayoutFlexBox, null,
@@ -2631,7 +2633,7 @@ var DateTime = function (props) {
2631
2633
  .startMinutes,
2632
2634
  }
2633
2635
  : undefined })))))),
2634
- React.createElement(React.Fragment, null, isRange(props) && (React.createElement(BreakpointViewer, { breakpointSize: [
2636
+ React.createElement(React.Fragment, null, isRange(props) && twoMonthRangePicker && (React.createElement(BreakpointViewer, { breakpointSize: [
2635
2637
  BreakpointViewportSizes.XL,
2636
2638
  BreakpointViewportSizes.LARGE,
2637
2639
  BreakpointViewportSizes.MEDIUM,
@@ -4630,6 +4632,7 @@ var DesignTokens = {
4630
4632
  textH3: "1.25rem",
4631
4633
  textH2: "1.5rem",
4632
4634
  textH1: "1.625rem",
4635
+ textHero: "2rem",
4633
4636
  textTiny: "0.6875rem",
4634
4637
  lineHeightHeading: "1.25",
4635
4638
  lineHeightBody: "1.5",
@@ -5729,4 +5732,4 @@ GridItem.displayName = "GridItem";
5729
5732
 
5730
5733
  injectRobotoFont();
5731
5734
 
5732
- export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, CardColors, Carousel, CheckBox, CheckBoxAlignment, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DividerDecorator, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, MultiProgressBar, Notification, NumericInput, Overlay, OverlayVariant, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, isStandardColor, setBreakpointSizeManually };
5735
+ export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, CardColors, Carousel, CheckBox, CheckBoxAlignment, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DividerDecorator, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, Hero, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, MultiProgressBar, Notification, NumericInput, Overlay, OverlayVariant, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, isStandardColor, setBreakpointSizeManually };
package/dist/index.js CHANGED
@@ -867,7 +867,7 @@ var LayoutFlexBox = function (props) {
867
867
  };
868
868
  LayoutFlexBox.displayName = "LayoutFlexBox";
869
869
 
870
- var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5;\n box-sizing: border-box;\n margin: 0;\n user-select: text;\n position: relative;\n}\n.dough-typo.dough-text-nowrap {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dough-typo.dough-text-word-break {\n word-break: break-word;\n}\n.dough-typo.dough-text-ellipsis {\n text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n text-align: left;\n}\n.dough-typo.dough-text-align-right {\n text-align: right;\n}\n.dough-typo.dough-text-align-center {\n text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n text-align: justify;\n}\n.dough-typo.dough-text {\n line-height: 1.3rem;\n}\n.dough-typo.dough-text-h1 {\n font-size: 1.625rem;\n line-height: 1.875rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n font-size: 1.625rem !important;\n font-weight: 700 !important;\n top: 0.40625rem;\n}\n.dough-typo.dough-text-h1.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h2 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n font-size: 1.5rem !important;\n font-weight: 700 !important;\n top: 0.375rem;\n}\n.dough-typo.dough-text-h2.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h3 {\n font-size: 1.25rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n font-size: 1.25rem !important;\n font-weight: 700 !important;\n top: 0.3125rem;\n}\n.dough-typo.dough-text-h3.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h4 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n font-size: 1.125rem !important;\n font-weight: 700 !important;\n top: 0.28125rem;\n}\n.dough-typo.dough-text-h4.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h5 {\n font-size: 1rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n font-size: 1rem !important;\n font-weight: 700 !important;\n top: 0.25rem;\n}\n.dough-typo.dough-text-h5.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h6 {\n font-size: 0.875rem;\n line-height: 1.3rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n font-size: 0.875rem !important;\n font-weight: 700 !important;\n top: 0.21875rem;\n}\n.dough-typo.dough-text-h6.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h7 {\n font-size: 0.8125rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n font-size: 0.8125rem !important;\n font-weight: 700 !important;\n top: 0.203125rem;\n}\n.dough-typo.dough-text-h7.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-subtitle {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-weight: 400;\n font-size: 0.8125rem;\n line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n line-height: 0.94rem;\n font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n line-height: 0.8rem;\n font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n line-height: 0.6875rem;\n font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n text-decoration: line-through;\n}";
870
+ var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5;\n box-sizing: border-box;\n margin: 0;\n user-select: text;\n position: relative;\n}\n.dough-typo.dough-text-nowrap {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dough-typo.dough-text-word-break {\n word-break: break-word;\n}\n.dough-typo.dough-text-ellipsis {\n text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n text-align: left;\n}\n.dough-typo.dough-text-align-right {\n text-align: right;\n}\n.dough-typo.dough-text-align-center {\n text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n text-align: justify;\n}\n.dough-typo.dough-text {\n line-height: 1.3rem;\n}\n.dough-typo.dough-text-hero {\n font-size: 2rem;\n line-height: 2.344rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-hero input[type=text],\n.dough-typo.dough-text-hero .dough-fe-label {\n font-size: 2rem !important;\n font-weight: 700 !important;\n top: 0.5rem;\n}\n.dough-typo.dough-text-hero.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h1 {\n font-size: 1.625rem;\n line-height: 1.875rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n font-size: 1.625rem !important;\n font-weight: 700 !important;\n top: 0.40625rem;\n}\n.dough-typo.dough-text-h1.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h2 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n font-size: 1.5rem !important;\n font-weight: 700 !important;\n top: 0.375rem;\n}\n.dough-typo.dough-text-h2.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h3 {\n font-size: 1.25rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n font-size: 1.25rem !important;\n font-weight: 700 !important;\n top: 0.3125rem;\n}\n.dough-typo.dough-text-h3.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h4 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n font-size: 1.125rem !important;\n font-weight: 700 !important;\n top: 0.28125rem;\n}\n.dough-typo.dough-text-h4.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h5 {\n font-size: 1rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n font-size: 1rem !important;\n font-weight: 700 !important;\n top: 0.25rem;\n}\n.dough-typo.dough-text-h5.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h6 {\n font-size: 0.875rem;\n line-height: 1.3rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n font-size: 0.875rem !important;\n font-weight: 700 !important;\n top: 0.21875rem;\n}\n.dough-typo.dough-text-h6.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h7 {\n font-size: 0.8125rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n font-size: 0.8125rem !important;\n font-weight: 700 !important;\n top: 0.203125rem;\n}\n.dough-typo.dough-text-h7.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-subtitle {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-weight: 400;\n font-size: 0.8125rem;\n line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n line-height: 0.94rem;\n font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n line-height: 0.8rem;\n font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n line-height: 0.6875rem;\n font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n text-decoration: line-through;\n}";
871
871
  styleInject(css_248z$6);
872
872
 
873
873
  (function (TextAlignment) {
@@ -895,6 +895,8 @@ var TextElement = function (props) {
895
895
  var HeaderElement = function (props) { return (React__default.createElement(TextElement, tslib.__assign({}, props, { className: cn(props.className, {
896
896
  "dough-header-regular": props.bold === false,
897
897
  }) }))); };
898
+ var Hero = function (props) { return (React__default.createElement(HeaderElement, tslib.__assign({}, props, { className: cn(props.className, "dough-text-hero"), component: props.component ? props.component : "h1" }))); };
899
+ Hero.displayName = "Hero";
898
900
  var H1 = function (props) { return (React__default.createElement(HeaderElement, tslib.__assign({}, props, { className: cn(props.className, "dough-text-h1"), component: props.component ? props.component : "h1" }))); };
899
901
  H1.displayName = "H1";
900
902
  var H2 = function (props) { return (React__default.createElement(HeaderElement, tslib.__assign({}, props, { className: cn(props.className, "dough-text-h2"), component: props.component ? props.component : "h2" }))); };
@@ -2451,17 +2453,17 @@ var isRange = function (props) {
2451
2453
  };
2452
2454
  var DateTime = function (props) {
2453
2455
  var _a, _b, _c, _d, _e, _f;
2454
- var _g = props.locale, locale = _g === void 0 ? doughDefaultLocale : _g, _h = props.disabled, disabled = _h === void 0 ? false : _h, _j = props.readOnly, readOnly = _j === void 0 ? false : _j, _k = props.type, type = _k === void 0 ? exports.DoughDateInput.DATE : _k;
2456
+ var _g = props.locale, locale = _g === void 0 ? doughDefaultLocale : _g, _h = props.disabled, disabled = _h === void 0 ? false : _h, _j = props.readOnly, readOnly = _j === void 0 ? false : _j, _k = props.type, type = _k === void 0 ? exports.DoughDateInput.DATE : _k, _l = props.twoMonthRangePicker, twoMonthRangePicker = _l === void 0 ? true : _l;
2455
2457
  var isTime = function () {
2456
2458
  return type === exports.DoughDateInput.DATETIME ||
2457
2459
  type === exports.DoughDateInput.DATETIMERANGE;
2458
2460
  };
2459
- var _l = React.useState(props.value && props.value[0] ? props.value[0] : new Date()), visibleRange = _l[0], setVisibleRange = _l[1];
2460
- var _m = React.useState(MONTH_YEAR_SELECTION_TYPES.hidden), monthYearSelectionType = _m[0], setMonthYearSelectionType = _m[1];
2461
- var _o = React.useState({
2461
+ var _m = React.useState(props.value && props.value[0] ? props.value[0] : new Date()), visibleRange = _m[0], setVisibleRange = _m[1];
2462
+ var _o = React.useState(MONTH_YEAR_SELECTION_TYPES.hidden), monthYearSelectionType = _o[0], setMonthYearSelectionType = _o[1];
2463
+ var _p = React.useState({
2462
2464
  from: undefined,
2463
2465
  to: undefined,
2464
- }), range = _o[0], setRange = _o[1];
2466
+ }), range = _p[0], setRange = _p[1];
2465
2467
  var openYearsView = function () {
2466
2468
  setMonthYearSelectionType(MONTH_YEAR_SELECTION_TYPES.year);
2467
2469
  };
@@ -2598,7 +2600,7 @@ var DateTime = function (props) {
2598
2600
  React__default.createElement(LayoutFlexBox, { autoFit: false, className: "dough-date-time-field" },
2599
2601
  React__default.createElement(LayoutContainer, { layoutType: exports.Direction.VERTICAL },
2600
2602
  React__default.createElement(LayoutFlexBox, { autoFit: false },
2601
- React__default.createElement(DateTimeHeader, { locale: locale, multiple: isRange(props), onChange: function (date) {
2603
+ React__default.createElement(DateTimeHeader, { locale: locale, multiple: isRange(props) && twoMonthRangePicker, onChange: function (date) {
2602
2604
  setVisibleRange(date);
2603
2605
  }, onMonthClicked: openMonthsView, onYearClicked: openYearsView, value: visibleRange })),
2604
2606
  React__default.createElement(LayoutFlexBox, null,
@@ -2614,7 +2616,7 @@ var DateTime = function (props) {
2614
2616
  .startMinutes,
2615
2617
  }
2616
2618
  : undefined })))))),
2617
- React__default.createElement(React__default.Fragment, null, isRange(props) && (React__default.createElement(BreakpointViewer, { breakpointSize: [
2619
+ React__default.createElement(React__default.Fragment, null, isRange(props) && twoMonthRangePicker && (React__default.createElement(BreakpointViewer, { breakpointSize: [
2618
2620
  exports.BreakpointViewportSizes.XL,
2619
2621
  exports.BreakpointViewportSizes.LARGE,
2620
2622
  exports.BreakpointViewportSizes.MEDIUM,
@@ -4611,6 +4613,7 @@ var DesignTokens = {
4611
4613
  textH3: "1.25rem",
4612
4614
  textH2: "1.5rem",
4613
4615
  textH1: "1.625rem",
4616
+ textHero: "2rem",
4614
4617
  textTiny: "0.6875rem",
4615
4618
  lineHeightHeading: "1.25",
4616
4619
  lineHeightBody: "1.5",
@@ -5742,6 +5745,7 @@ exports.H5 = H5;
5742
5745
  exports.H6 = H6;
5743
5746
  exports.H7 = H7;
5744
5747
  exports.Header = Header;
5748
+ exports.Hero = Hero;
5745
5749
  exports.HorizontalListSlider = HorizontalListSlider;
5746
5750
  exports.Image = Image;
5747
5751
  exports.ImageCarousel = ImageCarousel;
package/dist/node_modules/@speakapbv/dough-component-library-tokens/index.d.ts CHANGED
@@ -54,6 +54,7 @@ declare const _default: {
54
54
  textH3: string;
55
55
  textH2: string;
56
56
  textH1: string;
57
+ textHero: string;
57
58
  textTiny: string;
58
59
  lineHeightHeading: string;
59
60
  lineHeightBody: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@speakapbv/dough-component-library",
3
- "version": "10.9.1",
3
+ "version": "10.11.0",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",
@@ -96,7 +96,7 @@
96
96
  "dist"
97
97
  ],
98
98
  "dependencies": {
99
- "@speakapbv/dough-component-library-tokens": "1.7.2",
99
+ "@speakapbv/dough-component-library-tokens": "1.8.0",
100
100
  "tslib": "^2.6.2"
101
101
  },
102
102
  "publishConfig": {