@mrshmllw/smores-react 13.1.4 → 13.1.6
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.
- package/dist/Chip/Chip.js +12 -12
- package/dist/Chip/Chip.js.map +1 -1
- package/dist/Datepicker/Datepicker.js +6 -6
- package/dist/Datepicker/Datepicker.js.map +1 -1
- package/dist/Datepicker/DatesList.js +5 -5
- package/dist/Datepicker/DatesList.js.map +1 -1
- package/dist/fontStyle.js +25 -0
- package/dist/fontStyle.js.map +1 -1
- package/package.json +1 -1
package/dist/Chip/Chip.js
CHANGED
|
@@ -3,20 +3,19 @@ import styled, { css } from 'styled-components';
|
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { Icon as IconComponent } from '../Icon';
|
|
5
5
|
import { Loader } from '../Loader';
|
|
6
|
-
import { theme } from '../theme';
|
|
7
6
|
import { focusOutline } from '../utils/focusOutline';
|
|
8
7
|
export const Chip = forwardRef(({ children, handleClick, primary = false, secondary = false, disabled = false, loading = false, icon, ...props }, ref) => (React.createElement(Container, { forwardedAs: "button", "$primary": primary, "$secondary": secondary, disabled: disabled || loading, "$loading": loading, onClick: handleClick, "$icon": icon, ...props, ref: ref, "aria-label": "chip-button" }, loading ? (React.createElement(Loader, { color: primary ? 'liquorice' : 'cream', height: "16" })) : (React.createElement(React.Fragment, null,
|
|
9
8
|
icon && (React.createElement(IconComponent, { render: icon, size: 16, color: primary ? 'liquorice' : 'cream' })),
|
|
10
9
|
React.createElement(ChildrenContainer, null, children))))));
|
|
11
10
|
Chip.displayName = 'Chip';
|
|
12
|
-
const Container = styled(Box)(({ $primary, $secondary, $icon, $loading, disabled }) => css `
|
|
11
|
+
const Container = styled(Box)(({ $primary, $secondary, $icon, $loading, disabled, theme }) => css `
|
|
13
12
|
${focusOutline()}
|
|
14
13
|
|
|
15
14
|
align-items: center;
|
|
16
|
-
background-color: ${theme.
|
|
15
|
+
background-color: ${theme.color.surface.base[300]};
|
|
17
16
|
border-radius: 100px;
|
|
18
|
-
border: 2px solid ${theme.
|
|
19
|
-
color: ${theme.
|
|
17
|
+
border: 2px solid ${theme.color.surface.base[300]};
|
|
18
|
+
color: ${theme.color.text.base};
|
|
20
19
|
display: flex;
|
|
21
20
|
font-size: 16px;
|
|
22
21
|
justify-content: ${$icon ? 'space-evenly' : 'center'};
|
|
@@ -31,19 +30,20 @@ const Container = styled(Box)(({ $primary, $secondary, $icon, $loading, disabled
|
|
|
31
30
|
css `
|
|
32
31
|
&:hover {
|
|
33
32
|
border: ${!(disabled || $loading) &&
|
|
34
|
-
`2px solid ${theme.
|
|
35
|
-
background-color: ${!(disabled || $loading) &&
|
|
33
|
+
`2px solid ${theme.color.background[200]}`};
|
|
34
|
+
background-color: ${!(disabled || $loading) &&
|
|
35
|
+
theme.color.background[200]};
|
|
36
36
|
}
|
|
37
37
|
`}
|
|
38
38
|
${$secondary &&
|
|
39
39
|
css `
|
|
40
|
-
color: ${theme.
|
|
41
|
-
background-color: ${theme.
|
|
42
|
-
border: 2px solid ${theme.
|
|
40
|
+
color: ${theme.color.text['on-dark']};
|
|
41
|
+
background-color: ${theme.color.surface.base[900]};
|
|
42
|
+
border: 2px solid ${theme.color.surface.base[900]};
|
|
43
43
|
&:hover {
|
|
44
44
|
border: ${!(disabled || $loading) &&
|
|
45
|
-
`2px solid ${theme.
|
|
46
|
-
background-color: ${!(disabled || $loading) && theme.
|
|
45
|
+
`2px solid ${theme.color.text.subtle}`};
|
|
46
|
+
background-color: ${!(disabled || $loading) && theme.color.text.subtle};
|
|
47
47
|
}
|
|
48
48
|
`};
|
|
49
49
|
`);
|
package/dist/Chip/Chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAuBpD,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAC3C,CACE,EACE,QAAQ,EACR,WAAW,EACX,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,IAAI,EACJ,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE,CAAC,CACH,oBAAC,SAAS,IACR,WAAW,EAAC,QAAQ,cACV,OAAO,gBACL,SAAS,EACrB,QAAQ,EAAE,QAAQ,IAAI,OAAO,cACnB,OAAO,EACjB,OAAO,EAAE,WAAW,WACb,IAAI,KACP,KAAK,EACT,GAAG,EAAE,GAAG,gBACG,aAAa,IAEvB,OAAO,CAAC,CAAC,CAAC,CACT,oBAAC,MAAM,IAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,EAAE,MAAM,EAAC,IAAI,GAAG,CAC/D,CAAC,CAAC,CAAC,CACF;IACG,IAAI,IAAI,CACP,oBAAC,aAAa,IACZ,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,GACtC,CACH;IACD,oBAAC,iBAAiB,QAAE,QAAQ,CAAqB,CAChD,CACJ,CACS,CACb,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MAC/D,YAAY,EAAE;;;wBAGI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;wBAE7B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;aACxC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;;;uBAGX,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ;;4BAE5B,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;;;cAGpC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;eAC/C,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;;MAE/B,QAAQ;IACV,GAAG,CAAA;;kBAEW,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;QACjC,aAAa,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;4BACtB,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;QAC3C,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;;KAE9B;MACC,UAAU;IACZ,GAAG,CAAA;eACQ,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;0BAChB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;0BAC7B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;kBAErC,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;QACjC,aAAa,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE;4BAClB,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;KAEzE;GACF,CACF,CAAA;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEnC,CAAA","sourcesContent":["import React, { ButtonHTMLAttributes, FC, ReactNode, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon as IconComponent } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Loader } from '../Loader'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ninterface IButton {\n $primary: boolean\n $secondary: boolean\n $icon?: Icons\n $loading: boolean\n disabled: boolean\n}\n\ntype Props = {\n children: ReactNode\n handleClick: (e: React.FormEvent<HTMLButtonElement>) => void\n primary?: boolean\n secondary?: boolean\n icon?: Icons\n disabled?: boolean\n loading?: boolean\n} & MarginProps\n\nexport type ChipProps = Props & ButtonHTMLAttributes<HTMLButtonElement>\n\nexport const Chip: FC<ChipProps> = forwardRef<HTMLButtonElement, ChipProps>(\n (\n {\n children,\n handleClick,\n primary = false,\n secondary = false,\n disabled = false,\n loading = false,\n icon,\n ...props\n },\n ref,\n ) => (\n <Container\n forwardedAs=\"button\"\n $primary={primary}\n $secondary={secondary}\n disabled={disabled || loading}\n $loading={loading}\n onClick={handleClick}\n $icon={icon}\n {...props}\n ref={ref}\n aria-label=\"chip-button\"\n >\n {loading ? (\n <Loader color={primary ? 'liquorice' : 'cream'} height=\"16\" />\n ) : (\n <>\n {icon && (\n <IconComponent\n render={icon}\n size={16}\n color={primary ? 'liquorice' : 'cream'}\n />\n )}\n <ChildrenContainer>{children}</ChildrenContainer>\n </>\n )}\n </Container>\n ),\n)\n\nChip.displayName = 'Chip'\n\nconst Container = styled(Box)<IButton>(\n ({ $primary, $secondary, $icon, $loading, disabled, theme }) => css`\n ${focusOutline()}\n\n align-items: center;\n background-color: ${theme.color.surface.base[300]};\n border-radius: 100px;\n border: 2px solid ${theme.color.surface.base[300]};\n color: ${theme.color.text.base};\n display: flex;\n font-size: 16px;\n justify-content: ${$icon ? 'space-evenly' : 'center'};\n line-height: 100%;\n padding: 8px 16px 8px ${$icon ? '8px' : '16px'};\n min-width: 98px;\n min-height: 40px;\n cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n opacity: ${disabled ? '0.5' : '1'};\n\n ${$primary &&\n css`\n &:hover {\n border: ${!(disabled || $loading) &&\n `2px solid ${theme.color.background[200]}`};\n background-color: ${!(disabled || $loading) &&\n theme.color.background[200]};\n }\n `}\n ${$secondary &&\n css`\n color: ${theme.color.text['on-dark']};\n background-color: ${theme.color.surface.base[900]};\n border: 2px solid ${theme.color.surface.base[900]};\n &:hover {\n border: ${!(disabled || $loading) &&\n `2px solid ${theme.color.text.subtle}`};\n background-color: ${!(disabled || $loading) && theme.color.text.subtle};\n }\n `};\n `,\n)\n\nconst ChildrenContainer = styled.div`\n flex-grow: 1;\n`\n"]}
|
|
@@ -85,21 +85,21 @@ const Container = styled(Box) `
|
|
|
85
85
|
outline: none;
|
|
86
86
|
border-radius: 16px;
|
|
87
87
|
|
|
88
|
-
${({ $fallbackStyle }) => {
|
|
88
|
+
${({ $fallbackStyle, theme }) => {
|
|
89
89
|
return $fallbackStyle
|
|
90
90
|
? css `
|
|
91
|
-
background-color: ${theme.
|
|
91
|
+
background-color: ${theme.color.surface.base['000']};
|
|
92
92
|
`
|
|
93
93
|
: css `
|
|
94
|
-
background-color: ${theme.
|
|
94
|
+
background-color: ${theme.color.surface.base[300]};
|
|
95
95
|
`;
|
|
96
96
|
}}
|
|
97
97
|
`;
|
|
98
98
|
const Header = styled(Box) `
|
|
99
|
-
color: ${theme.
|
|
99
|
+
color: ${({ theme }) => theme.color.text.base};
|
|
100
100
|
user-select: none;
|
|
101
101
|
padding: 16px;
|
|
102
|
-
border-bottom: 1px solid ${theme.
|
|
102
|
+
border-bottom: 1px solid ${({ theme }) => theme.color.border.subtle};
|
|
103
103
|
|
|
104
104
|
span {
|
|
105
105
|
font-size: 16px;
|
|
@@ -112,7 +112,7 @@ const Heading = styled(Text) `
|
|
|
112
112
|
font-weight: ${theme.font.weight.medium};
|
|
113
113
|
`;
|
|
114
114
|
const Circle = styled.button `
|
|
115
|
-
background-color: ${theme.
|
|
115
|
+
background-color: ${({ theme }) => theme.color.surface.base[900]};
|
|
116
116
|
height: 32px;
|
|
117
117
|
width: 32px;
|
|
118
118
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Datepicker.js","sourceRoot":"","sources":["../../src/Datepicker/Datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n addDays,\n eachMonthOfInterval,\n format,\n getDaysInMonth,\n getMonth,\n getYear,\n isSameDay,\n isSameMonth,\n isWeekend,\n isWithinInterval,\n} from 'date-fns'\nimport React, { FC, useState } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { theme } from '../theme'\n\nimport { convertToUkDate } from '../utils/date'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { useControllableState } from '../utils/useControlledState'\nimport { DatesList } from './DatesList'\n\nconst getAvailableMonths = (startDate: Date, endDate: Date) => {\n const monthList = eachMonthOfInterval({\n start: startDate,\n end: endDate,\n })\n\n return monthList.map((monthDate) => ({\n date: monthDate,\n label: format(monthDate, 'MMMM'),\n }))\n}\n\nexport type DatepickerProps = {\n showDayLabels?: boolean\n disableWeekend?: boolean\n fromDate?: Date\n endingDate?: Date\n showYear?: boolean\n showSelectedDate?: boolean\n range?: number\n onDateSelect: (date: string) => void\n onChange?: (value: Date) => void\n value?: Date\n /** Disables all dates, defaults to false */\n disabled?: boolean\n fallbackStyle?: boolean\n} & MarginProps\n\nexport const Datepicker: FC<DatepickerProps> = ({\n showDayLabels = false,\n disableWeekend = true,\n range = 14,\n fromDate = new Date(),\n endingDate,\n showYear = false,\n showSelectedDate = false,\n onDateSelect,\n onChange,\n value,\n disabled,\n fallbackStyle = false,\n ...marginProps\n}) => {\n // We want to make sure that the date is in the UK timezone,\n // this might need to be revisit when opening up to new countries\n const startDate = convertToUkDate(fromDate)\n const endDate = endingDate ? endingDate : addDays(startDate, range)\n const availableMonths = getAvailableMonths(startDate, endDate)\n\n const selectedDate = value ?? new Date()\n\n const [activeDay, setActiveDay] = useControllableState({\n initialState: undefined,\n stateProp: value,\n })\n const [activeMonthIndex, setActiveMonth] = useState(\n showSelectedDate\n ? availableMonths.findIndex((month) =>\n isSameMonth(month.date, selectedDate),\n )\n : 0,\n )\n\n const handleSelectEvent = (date: Date) => {\n setActiveDay(date)\n onChange?.(date)\n onDateSelect(format(date, 'yyyy-MM-dd'))\n }\n\n const generateDaysForMonth = (monthDate: Date) => {\n const daysInMonth = getDaysInMonth(monthDate)\n const month = getMonth(monthDate)\n const year = getYear(monthDate)\n const filteredDays = []\n\n for (let i = 1; i <= daysInMonth; i += 1) {\n const date = new Date(year, month, i)\n\n filteredDays.push({\n date,\n label: format(date, 'dd'),\n active: activeDay ? isSameDay(date, activeDay) : false,\n disabled: disabled\n ? true\n : !isWithinInterval(date, { start: startDate, end: endDate }) ||\n (disableWeekend && isWeekend(date)),\n })\n }\n\n return filteredDays\n }\n\n return (\n <Container id=\"datepicker\" {...marginProps} $fallbackStyle={fallbackStyle}>\n <Header\n flex\n alignItems=\"center\"\n justifyContent=\"space-between\"\n direction=\"row\"\n >\n <Circle\n aria-label=\"previous-month\"\n type=\"button\"\n data-testid=\"last-month\"\n disabled={activeMonthIndex === 0}\n onClick={() => setActiveMonth(activeMonthIndex - 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n setActiveMonth(activeMonthIndex - 1)\n }\n }}\n >\n <Icon render=\"caret\" color=\"cream\" size={18} rotate={90} />\n </Circle>\n\n <Heading tag=\"h4\" typo=\"body-regular\">\n {availableMonths[activeMonthIndex]?.label}{' '}\n {showYear && `- ${getYear(availableMonths[activeMonthIndex]?.date)}`}\n </Heading>\n\n <Circle\n aria-label=\"next-month\"\n type=\"button\"\n data-testid=\"next-month\"\n disabled={activeMonthIndex === availableMonths.length - 1}\n onClick={() => setActiveMonth(activeMonthIndex + 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n setActiveMonth(activeMonthIndex + 1)\n }\n }}\n >\n <Icon render=\"caret\" color=\"cream\" size={18} rotate={-90} />\n </Circle>\n </Header>\n\n <Box flex alignItems=\"center\" justifyContent=\"center\">\n <DatesList\n items={generateDaysForMonth(availableMonths[activeMonthIndex]?.date)}\n showDayLabels={showDayLabels}\n handleDateSelect={handleSelectEvent}\n />\n </Box>\n </Container>\n )\n}\n\nconst Container = styled(Box)<{ $fallbackStyle: boolean }>`\n font-family: ${theme.font.system};\n display: inline-block;\n box-sizing: border-box;\n outline: none;\n border-radius: 16px;\n\n ${({ $fallbackStyle }) => {\n return $fallbackStyle\n ? css`\n background-color: ${theme.colors.cream};\n `\n : css`\n background-color: ${theme.colors.custard};\n `\n }}\n`\n\nconst Header = styled(Box)`\n color: ${theme.colors.liquorice};\n user-select: none;\n padding: 16px;\n border-bottom: 1px solid ${theme.colors.oatmeal};\n\n span {\n font-size: 16px;\n line-height: 1;\n }\n`\n\nconst Heading = styled(Text)`\n position: relative;\n top: 2px;\n font-weight: ${theme.font.weight.medium};\n`\n\nconst Circle = styled.button`\n background-color: ${theme.colors.liquorice};\n height: 32px;\n width: 32px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n border: none;\n padding: 0 !important;\n cursor: pointer;\n\n :disabled {\n opacity: 0.5;\n cursor: default;\n }\n\n ${focusOutlineStyle}\n`\n"]}
|
|
1
|
+
{"version":3,"file":"Datepicker.js","sourceRoot":"","sources":["../../src/Datepicker/Datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n addDays,\n eachMonthOfInterval,\n format,\n getDaysInMonth,\n getMonth,\n getYear,\n isSameDay,\n isSameMonth,\n isWeekend,\n isWithinInterval,\n} from 'date-fns'\nimport React, { FC, useState } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { theme } from '../theme'\n\nimport { convertToUkDate } from '../utils/date'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { useControllableState } from '../utils/useControlledState'\nimport { DatesList } from './DatesList'\n\nconst getAvailableMonths = (startDate: Date, endDate: Date) => {\n const monthList = eachMonthOfInterval({\n start: startDate,\n end: endDate,\n })\n\n return monthList.map((monthDate) => ({\n date: monthDate,\n label: format(monthDate, 'MMMM'),\n }))\n}\n\nexport type DatepickerProps = {\n showDayLabels?: boolean\n disableWeekend?: boolean\n fromDate?: Date\n endingDate?: Date\n showYear?: boolean\n showSelectedDate?: boolean\n range?: number\n onDateSelect: (date: string) => void\n onChange?: (value: Date) => void\n value?: Date\n /** Disables all dates, defaults to false */\n disabled?: boolean\n fallbackStyle?: boolean\n} & MarginProps\n\nexport const Datepicker: FC<DatepickerProps> = ({\n showDayLabels = false,\n disableWeekend = true,\n range = 14,\n fromDate = new Date(),\n endingDate,\n showYear = false,\n showSelectedDate = false,\n onDateSelect,\n onChange,\n value,\n disabled,\n fallbackStyle = false,\n ...marginProps\n}) => {\n // We want to make sure that the date is in the UK timezone,\n // this might need to be revisit when opening up to new countries\n const startDate = convertToUkDate(fromDate)\n const endDate = endingDate ? endingDate : addDays(startDate, range)\n const availableMonths = getAvailableMonths(startDate, endDate)\n\n const selectedDate = value ?? new Date()\n\n const [activeDay, setActiveDay] = useControllableState({\n initialState: undefined,\n stateProp: value,\n })\n const [activeMonthIndex, setActiveMonth] = useState(\n showSelectedDate\n ? availableMonths.findIndex((month) =>\n isSameMonth(month.date, selectedDate),\n )\n : 0,\n )\n\n const handleSelectEvent = (date: Date) => {\n setActiveDay(date)\n onChange?.(date)\n onDateSelect(format(date, 'yyyy-MM-dd'))\n }\n\n const generateDaysForMonth = (monthDate: Date) => {\n const daysInMonth = getDaysInMonth(monthDate)\n const month = getMonth(monthDate)\n const year = getYear(monthDate)\n const filteredDays = []\n\n for (let i = 1; i <= daysInMonth; i += 1) {\n const date = new Date(year, month, i)\n\n filteredDays.push({\n date,\n label: format(date, 'dd'),\n active: activeDay ? isSameDay(date, activeDay) : false,\n disabled: disabled\n ? true\n : !isWithinInterval(date, { start: startDate, end: endDate }) ||\n (disableWeekend && isWeekend(date)),\n })\n }\n\n return filteredDays\n }\n\n return (\n <Container id=\"datepicker\" {...marginProps} $fallbackStyle={fallbackStyle}>\n <Header\n flex\n alignItems=\"center\"\n justifyContent=\"space-between\"\n direction=\"row\"\n >\n <Circle\n aria-label=\"previous-month\"\n type=\"button\"\n data-testid=\"last-month\"\n disabled={activeMonthIndex === 0}\n onClick={() => setActiveMonth(activeMonthIndex - 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n setActiveMonth(activeMonthIndex - 1)\n }\n }}\n >\n <Icon render=\"caret\" color=\"cream\" size={18} rotate={90} />\n </Circle>\n\n <Heading tag=\"h4\" typo=\"body-regular\">\n {availableMonths[activeMonthIndex]?.label}{' '}\n {showYear && `- ${getYear(availableMonths[activeMonthIndex]?.date)}`}\n </Heading>\n\n <Circle\n aria-label=\"next-month\"\n type=\"button\"\n data-testid=\"next-month\"\n disabled={activeMonthIndex === availableMonths.length - 1}\n onClick={() => setActiveMonth(activeMonthIndex + 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n setActiveMonth(activeMonthIndex + 1)\n }\n }}\n >\n <Icon render=\"caret\" color=\"cream\" size={18} rotate={-90} />\n </Circle>\n </Header>\n\n <Box flex alignItems=\"center\" justifyContent=\"center\">\n <DatesList\n items={generateDaysForMonth(availableMonths[activeMonthIndex]?.date)}\n showDayLabels={showDayLabels}\n handleDateSelect={handleSelectEvent}\n />\n </Box>\n </Container>\n )\n}\n\nconst Container = styled(Box)<{ $fallbackStyle: boolean }>`\n font-family: ${theme.font.system};\n display: inline-block;\n box-sizing: border-box;\n outline: none;\n border-radius: 16px;\n\n ${({ $fallbackStyle, theme }) => {\n return $fallbackStyle\n ? css`\n background-color: ${theme.color.surface.base['000']};\n `\n : css`\n background-color: ${theme.color.surface.base[300]};\n `\n }}\n`\n\nconst Header = styled(Box)`\n color: ${({ theme }) => theme.color.text.base};\n user-select: none;\n padding: 16px;\n border-bottom: 1px solid ${({ theme }) => theme.color.border.subtle};\n\n span {\n font-size: 16px;\n line-height: 1;\n }\n`\n\nconst Heading = styled(Text)`\n position: relative;\n top: 2px;\n font-weight: ${theme.font.weight.medium};\n`\n\nconst Circle = styled.button`\n background-color: ${({ theme }) => theme.color.surface.base[900]};\n height: 32px;\n width: 32px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n border: none;\n padding: 0 !important;\n cursor: pointer;\n\n :disabled {\n opacity: 0.5;\n cursor: default;\n }\n\n ${focusOutlineStyle}\n`\n"]}
|
|
@@ -55,20 +55,20 @@ const ListButton = styled.button `
|
|
|
55
55
|
font-weight: ${theme.font.weight.medium};
|
|
56
56
|
font-size: 14px;
|
|
57
57
|
line-height: 15px;
|
|
58
|
-
color: ${theme.
|
|
58
|
+
color: ${({ theme }) => theme.color.text.base};
|
|
59
59
|
background-color: transparent;
|
|
60
60
|
pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
|
|
61
61
|
opacity: ${({ disabled }) => (disabled ? '0.2' : '1')};
|
|
62
62
|
cursor: pointer;
|
|
63
63
|
|
|
64
64
|
&:hover:not(.active) {
|
|
65
|
-
color: ${theme.
|
|
66
|
-
background-color: ${theme.
|
|
65
|
+
color: ${({ theme }) => theme.color.text['on-dark']};
|
|
66
|
+
background-color: ${({ theme }) => theme.color.surface.base[900]};
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
&.active {
|
|
70
|
-
color: ${theme.
|
|
71
|
-
background-color: ${theme.
|
|
70
|
+
color: ${({ theme }) => theme.color.text['on-dark']};
|
|
71
|
+
background-color: ${({ theme }) => theme.color.surface.base[900]};
|
|
72
72
|
cursor: default;
|
|
73
73
|
}
|
|
74
74
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatesList.js","sourceRoot":"","sources":["../../src/Datepicker/DatesList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"DatesList.js","sourceRoot":"","sources":["../../src/Datepicker/DatesList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getISODay } from 'date-fns'\nimport React, { FC } from 'react'\nimport styled from 'styled-components'\n\nimport { theme } from '../theme'\nimport { Text } from '../Text'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { Day } from './types'\n\ntype Props = {\n items: Day[]\n showDayLabels: boolean\n handleDateSelect: (date: Date) => void\n}\n\nconst getBlankDaysCount = (firstDayOfTheMonth: Date) => {\n if (!firstDayOfTheMonth) return\n const dayOfTheWeek = getISODay(firstDayOfTheMonth)\n return dayOfTheWeek - 1\n}\n\nconst daysOfTheWeek = ['mon', 'tues', 'wed', 'thurs', 'fri', 'sat', 'sun']\n\nexport const DatesList: FC<Props> = ({\n items,\n handleDateSelect,\n showDayLabels,\n}) => {\n return (\n <Container>\n {showDayLabels &&\n daysOfTheWeek.map((day) => {\n return (\n <Text key={day} color=\"sesame\" typo=\"label\" mb=\"24px\">\n {day}\n </Text>\n )\n })}\n {Array(getBlankDaysCount(items[0]?.date))\n .fill(null)\n .map((_, index) => (\n <ListButton\n aria-label={`${index}-unselectable-date`}\n key={`blankItem-${index}`}\n disabled\n />\n ))}\n {items.map((item: Day, i) => (\n <ListButton\n key={i}\n type=\"button\"\n disabled={item.disabled}\n className={`ListButton ${item.active ? 'active' : ''}`}\n onClick={() => handleDateSelect(item.date)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleDateSelect(item.date)\n }\n }}\n data-testid={item.label}\n >\n {item.label}\n </ListButton>\n ))}\n </Container>\n )\n}\n\nconst Container = styled.div`\n justify-items: center;\n display: grid;\n grid-column-gap: 4px;\n grid-row-gap: 8px;\n grid-template-columns: repeat(7, 1fr);\n padding: 8px;\n\n @media (min-width: 360px) {\n grid-gap: 8px;\n padding: 16px;\n }\n\n @media (min-width: 768px) {\n grid-column-gap: 16px;\n padding: 32px;\n }\n`\n\ninterface IListButton {\n disabled?: boolean\n}\n\nconst ListButton = styled.button<IListButton>`\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n width: 32px;\n height: 32px;\n border: 1px solid transparent;\n font-weight: ${theme.font.weight.medium};\n font-size: 14px;\n line-height: 15px;\n color: ${({ theme }) => theme.color.text.base};\n background-color: transparent;\n pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};\n opacity: ${({ disabled }) => (disabled ? '0.2' : '1')};\n cursor: pointer;\n\n &:hover:not(.active) {\n color: ${({ theme }) => theme.color.text['on-dark']};\n background-color: ${({ theme }) => theme.color.surface.base[900]};\n }\n\n &.active {\n color: ${({ theme }) => theme.color.text['on-dark']};\n background-color: ${({ theme }) => theme.color.surface.base[900]};\n cursor: default;\n }\n\n ${focusOutlineStyle}\n`\n"]}
|
package/dist/fontStyle.js
CHANGED
|
@@ -31,5 +31,30 @@ export const FontStyle = createGlobalStyle `
|
|
|
31
31
|
font-weight: ${theme.font.weight.bold};
|
|
32
32
|
font-style: normal;
|
|
33
33
|
}
|
|
34
|
+
|
|
35
|
+
@font-face {
|
|
36
|
+
font-family: 'CircularXX';
|
|
37
|
+
src: url('https://assets.marshmallow.com/fonts/CircularXXSub-RegularSubset.woff2') format('woff2');
|
|
38
|
+
font-weight: ${theme.font.weight.normal};
|
|
39
|
+
font-style: normal;
|
|
40
|
+
font-display: swap;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@font-face {
|
|
44
|
+
font-family: 'CircularXX';
|
|
45
|
+
src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Medium.woff2') format('woff2');
|
|
46
|
+
font-weight: ${theme.font.weight.medium};
|
|
47
|
+
font-style: normal;
|
|
48
|
+
font-display: swap;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@font-face {
|
|
52
|
+
font-family: 'CircularXX';
|
|
53
|
+
src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Bold.woff2') format('woff2');
|
|
54
|
+
font-weight: ${theme.font.weight.bold};
|
|
55
|
+
font-style: normal;
|
|
56
|
+
font-display: swap;
|
|
57
|
+
}
|
|
58
|
+
|
|
34
59
|
`;
|
|
35
60
|
//# sourceMappingURL=fontStyle.js.map
|
package/dist/fontStyle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fontStyle.js","sourceRoot":"","sources":["../src/fontStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,iBAAiB,CAAA;;;;mBAIvB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;;mBAQtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI
|
|
1
|
+
{"version":3,"file":"fontStyle.js","sourceRoot":"","sources":["../src/fontStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,iBAAiB,CAAA;;;;mBAIvB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;;mBAQtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;mBAOtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;CAKxC,CAAA","sourcesContent":["import { createGlobalStyle } from 'styled-components'\nimport { theme } from './theme'\n\nexport const FontStyle = createGlobalStyle`\n @font-face {\n font-family: 'Circular';\n src: url('https://assets.marshmallow.com/fonts/CircularXXSub-RegularSubset.woff2') format('woff2');\n font-weight: ${theme.font.weight.normal};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'Circular';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Medium.woff2') format('woff2');\n font-weight: ${theme.font.weight.medium};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'Circular';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Bold.woff2') format('woff2');\n font-weight: ${theme.font.weight.bold};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'MarshmallowYouth';\n src: url('https://assets.marshmallow.com/fonts/MarshmallowYouth-Bold.woff2') format('woff2');\n font-weight: ${theme.font.weight.bold};\n font-style: normal;\n }\n\n\t@font-face {\n font-family: 'CircularXX';\n src: url('https://assets.marshmallow.com/fonts/CircularXXSub-RegularSubset.woff2') format('woff2');\n font-weight: ${theme.font.weight.normal};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'CircularXX';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Medium.woff2') format('woff2');\n font-weight: ${theme.font.weight.medium};\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'CircularXX';\n src: url('https://assets.marshmallow.com/fonts/CircularXXWeb-Bold.woff2') format('woff2');\n font-weight: ${theme.font.weight.bold};\n font-style: normal;\n font-display: swap;\n }\n\n`\n"]}
|