Skip to content

Commit

Permalink
Merge branch 'master' into dependabot/npm_and_yarn/sharp-0.30.6
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tom-paqtcom
Tom-paqtcom authored Jul 31, 2023
2 parents 99650ea + 33567cd commit 594b82e
Show file tree
Hide file tree
Showing 9 changed files with 421 additions and 16 deletions.
13 changes: 7 additions & 6 deletions src/_includes/layouts/base.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,17 @@
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@graphiteds/core@1.8.1/css/graphite.bundle.css"
integrity="sha256-Maq0H86dB7RsnWif+qVcjQTCDWf91cqcF+kokcsZ8m0="
href="https://cdn.jsdelivr.net/npm/@graphiteds/core@1.9.14/css/graphite.bundle.css"
integrity="sha256-gFHf9tmgozxinafVf1kRA43fM6cmXpQecxRncZdH3NI="
crossorigin="anonymous"
/>
>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@graphiteds/core@1.8.1/dist/core/core.esm.js"
integrity="sha256-ZgEAIlF82yxuNWEeIbGr4hy2yHoNcBET/AZCKlDJnzc="
src="https://cdn.jsdelivr.net/npm/@graphiteds/core@1.9.14/dist/core/core.esm.js"
integrity="sha256-8ph50v2KqMxBJmUsDYFpGBwbpIM70HbtRF4fQjvRd6I="
crossorigin="anonymous"
></script>

<% if (locals.tags == "posts") { %>
<meta property="og:type" content="article" />
<meta property="article:published_time" content="<%= date.toISOString() %>" />
Expand Down Expand Up @@ -81,7 +82,7 @@
<div id="search" class="lg:w-full"></div>
</div>
<div class="lg:w-1/5 flex items-center pr-4 lg:pr-8 justify-end">
<span class="font-semibold leading-none text-dark text-base mr-4">v1.8.1</span>
<span class="font-semibold leading-none text-dark text-base mr-4">v1.9.14</span>
<div class="flex items-center">
<a
href="https://github.com/paqtcom/graphite-design-system"
Expand Down
3 changes: 3 additions & 0 deletions src/_includes/menu.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@
<a href="/components/radio-group" <%- page.url == '/components/radio-group/' ? 'class="active" aria-current="page"' : '' %>>Radio group</a>
<a href="/components/select" <%- page.url == '/components/select/' ? 'class="active" aria-current="page"' : '' %>>Select</a>
<a href="/components/spinner" <%- page.url == '/components/spinner/' ? 'class="active" aria-current="page"' : '' %>>Spinner</a>
<a href="/components/tab" <%- page.url=='/components/tab/' ? 'class="active" aria-current="page"' : '' %>>Tab</a>
<a href="/components/tab-group" <%- page.url=='/components/tab-group/' ? 'class="active" aria-current="page"' : '' %>>Tab group</a>
<a href="/components/tab-panel" <%- page.url=='/components/tab-panel/' ? 'class="active" aria-current="page"' : '' %>>Tab panel</a>
<a href="/components/tag" <%- page.url == '/components/tag/' ? 'class="active" aria-current="page"' : '' %>>Tag</a>
<a href="/components/textarea" <%- page.url == '/components/textarea/' ? 'class="active" aria-current="page"' : '' %>>Textarea</a>
<div class="header">Design tokens</div>
Expand Down
44 changes: 44 additions & 0 deletions src/components/date-picker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,49 @@ Below is an example how you can implement a date range using the date picker:
</script>
```

### Custom localization

The localization translations of the date picker can be customized using the `localization` attribute. This value is specified in a object.

Below is an example how you can implement custom localization translations:

```html
<gr-date-picker :localization="customLocalizationTranslations"></gr-date-picker>
```

```javascript
const customLocalizationTranslations = {
buttonLabel: 'Choose date',
placeholder: '',
helpText: 'Custom Format: dd-mm-yyyy',
selectedDateMessage: 'Selected date is',
prevMonthLabel: 'Previous month',
nextMonthLabel: 'Next month',
monthSelectLabel: 'Month',
yearSelectLabel: 'Year',
closeLabel: 'Close window',
calendarHeading: 'Choose a date',
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
monthNames: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
monthNamesShort: ['Jan2', 'Feb2', 'Mar2', 'Apr2', 'May2', 'Jun2', 'Jul2', 'Aug2', 'Sep2', 'Oct2', 'Nov2', 'Dec2'],
locale: 'en-GB',
}

```

### Opening the calendar modal progammatically

Use the `show()` method to show the calendar modal, moving focus to the calendar inside.
Expand Down Expand Up @@ -614,6 +657,7 @@ Invalid text should be written in 1-2 short, complete sentences and in a clear a
| `invalidText` | `invalid-text` | The date picker's invalid text. Alternatively, you can use the invalid-text slot. | `string` | `''` |
| `isDateDisabled` | -- | Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends. | `(date: Date) => boolean` | `() => false` |
| `label` | `label` | The date picker's label. Alternatively, you can use the label slot. | `string` | `''` |
| `localization` | `localization` | The date picker's custom localization. | `object` | Users browser language or default 'EN' when not supported |
| `max` | `max` | Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property. | `string` | `''` |
| `min` | `min` | Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property. | `string` | `''` |
| `name` | `name` | Name of the date picker input. | `string` | `''` |
Expand Down
17 changes: 17 additions & 0 deletions src/components/input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,22 @@ When you add the `invalid` attribute, the invalid text will be shown. When an in
></gr-input>
```

### Pattern

Add a pattern to specify a regular expression that the input value should match.

<div class="example-block">
<gr-input label="Country code" help-text="Fill in a valid three letter country code" pattern="[A-Za-z]{3}"></gr-input>
</div>

```html
<gr-input
label="Country code"
help-text="Fill in a valid three letter country code"
pattern="[A-Za-z]{3}"
></gr-input>
```

## Usage guidelines

### Include a label
Expand Down Expand Up @@ -490,6 +506,7 @@ Invalid text should be written in 1-2 short, complete sentences and in a clear a
| `maxlength` | `maxlength` | Specifies how many characters are allowed. | `number` | `undefined` |
| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `string` | `undefined` |
| `name` | `name` | The input's name. | `string` | `''` |
| `pattern` | `pattern` | The input's pattern. | `string` | `''` |
| `pill` | `pill` | Set to true to draw a pill-style input with rounded edges. | `boolean` | `false` |
| `placeholder` | `placeholder` | The input's placeholder text. | `string` | `''` |
| `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` |
Expand Down
Loading

0 comments on commit 594b82e

Please sign in to comment.