Skip to content

Commit

Permalink
Refactor(web-twig): Refactor Twig components and update their readme,…
Browse files Browse the repository at this point in the history 
… api not changed (refs #DS-249)
  • Loading branch information
@crishpeen @literat
crishpeen authored and literat committed Jul 30, 2022
1 parent 1e43b05 commit 6dcbcbe
Show file tree
Hide file tree
Showing 63 changed files with 905 additions and 528 deletions.
1 change: 1 addition & 0 deletions packages/web-twig/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
- Bugfix `isRequired` functionality in `TextField` component
- Introduce `Pill` component
- Introduce `Tabs` component
- Refactor components and update their readme

## 1.7.0 - 2022-05-09
- Add Svg twig extension for optimal loading of svg files as inline
Expand Down
50 changes: 27 additions & 23 deletions packages/web-twig/docs/Alert.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,25 @@

This is Twig implementation of the [Alert] component.

## Examples
pure implementation:
```twig
{% embed "@spirit/alert.twig" %}
{% block content %}
Alert
{% endblock %}
{% endembed %}
Basic example usage:

```html
<Alert>
Alert
</Alert>
```

Advanced example usage:

```html
<Alert color="danger" elementType="span">
Danger Alert
</Alert>
```

Without lexer:

```twig
{% embed "@spirit/alert.twig" with { props: {
color: 'danger'
elementType: 'span'
Expand All @@ -21,21 +31,15 @@ pure implementation:
{% endembed %}
```

With Html syntax lexer (enabled by default):
```twig
<Alert>
Alert
</Alert>
<Alert color="danger" elementType="span">
Danger Alert
</Alert>
```
## API

## Available props
| Prop name | Type | Default | Required | Description |
|---------------|---------------------|-----------|----------|--------------------|
| `class` | `string` | `null` | no | Custom CSS class |
| `color` | `success`, `danger` | `success` | no | Color variant |
| `elementType` | `string` | `div` | no | HTML tag to render |

| Name | Type | Description |
|---------------|---------------------|-----------------------------------|
| `color` | `success`, `danger` | Color variant of the Alert |
| `elementType` | HTML element | Element type to use for the Alert |
You can add `id`, `data-*` or `aria-*` attributes to further extend component's
descriptiveness and accessibility.

[Alert]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Alert
[Alert]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Alert
55 changes: 34 additions & 21 deletions packages/web-twig/docs/Button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,49 @@

This is Twig implementation of the [Button] component.

## Examples
pure implementation:
Basic example usage:

```html
<Button>Primary button</Button>
```

Advanced example usage:

```html
<Button
color="primary"
isBlock
type="submit"
>
Primary block submit button
</Button>
```

Without lexer:

```twig
{% embed "@spirit/button.twig" with { props: {
color: 'primary'
}} %}
{% block content %}
Primary buttom
Primary button
{% endblock %}
{% endembed %}
```

With Html syntax lexer (enabled by default):
```twig
<Button color="primary">Primary buttom</Button>
```

## Available props
## API

| name | type | default value | description |
|------------|-----------|---------------|-------------------------------------------------|
| color | `string` | primary | its possible to use all theme colors |
| isBlock | `boolean` | false | span the full width of a parent |
| isSquare | `boolean` | false | if the button only has an icon |
| isDisabled | `boolean` | false | it specifies that the button should be disabled | |
| type | `string` | button | type of button (submit or button) |
| ariaLabel | `string` | undefined | accessible Rich Internet Applications label |
| onClick | `string` | undefined | execute a JavaScript when a button is clicked |
| class | `string` | undefined | adds additional classes |
| Prop name | Type | Default | Required | Description |
|--------------|----------------------------------------------------------|-----------|----------|------------------------------------------------------|
| `class` | `string` | `null` | no | Custom CSS class |
| `color` | `primary`, `secondary`, `tertiary`, `inverted`, `danger` | `primary` | no | Color variant |
| `isBlock` | `bool` | `false` | no | Span the element to the full width of its parent |
| `isDisabled` | `bool` | `false` | no | If true, Button is disabled |
| `isSquare` | `bool` | `false` | no | If true, Button is square, usually only with an icon |
| `onClick` | `string` | `null` | no | JS function to call on click |
| `type` | `string` | `button` | no | Type of the Button |

On this component it's possible to insert property `id`, `data-*` and `aria-*` properties.
You can add `id`, `data-*` or `aria-*` attributes to further extend component's
descriptiveness and accessibility.

[Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Button
[Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button
57 changes: 35 additions & 22 deletions packages/web-twig/docs/ButtonLink.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,26 @@

This is Twig implementation of the [ButtonLink] component.

## Examples
pure implementation:
Basic example usage:

```html
<ButtonLink href="#">Primary ButtonLink</ButtonLink>
```

Advanced example usage:

```html
<ButtonLink
color="primary"
href="#"
isBlock
>
Primary block ButtonLink
</ButtonLink>
```

Without lexer:

```twig
{% embed "@spirit/buttonLink.twig" with { props: {
color: 'primary',
Expand All @@ -15,26 +33,21 @@ pure implementation:
{% endembed %}
```

With Html syntax lexer (enabled by default):
```twig
<ButtonLink href="#" color="primary">Primary ButtonLink</ButtonLink>
```

## Available props
## API

| name | type | default value | description |
|------------|-----------|---------------|---------------------------------------------|
| color | `string` | primary | its possible to use all theme colors |
| href | `string` | # | anchor href link |
| title | `string` | undefined | anchor link title |
| target | `string` | __self | anchor target |
| isBlock | `boolean` | false | span the full width of a parent |
| isSquare | `boolean` | false | if the button only has an icon |
| isDisabled | `boolean` | false | |
| ariaLabel | `string` | undefined | Accessible Rich Internet Applications label |
| onClick | `string` | undefined | execute a JavaScript when a link is clicked |
| class | `string` | undefined | property to extend with custom classes |
| Prop name | Type | Default | Required | Description |
|--------------|----------------------------------------------------------|-----------|----------|----------------------------------------------------------|
| `class` | `string` | `null` | no | Custom CSS class |
| `color` | `primary`, `secondary`, `tertiary`, `inverted`, `danger` | `primary` | no | Color variant |
| `href` | `string` | — | yes | Link URL |
| `isBlock` | `bool` | `false` | no | Span the element to the full width of its parent |
| `isDisabled` | `bool` | `false` | no | If true, ButtonLink is disabled |
| `isSquare` | `bool` | `false` | no | If true, ButtonLink is square, usually only with an icon |
| `onClick` | `string` | `null` | no | JS function to call on click |
| `target` | `string` | `null` | no | Link target |
| `title` | `string` | `null` | no | Optional title to display on hover |

On this component it's possible to insert property `id`, `data-*` and `aria-*` properties.
You can add `id`, `data-*` or `aria-*` attributes to further extend component's
descriptiveness and accessibility.

[Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/ButtonLink
[Button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button
70 changes: 47 additions & 23 deletions packages/web-twig/docs/CheckboxField.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,33 @@

This is Twig implementation of the [CheckboxField] component.

## Examples
pure implementation:
Basic example usage:

```html
<CheckboxField
id="example"
label="Label"
name="example"
/>

```

Advanced example usage:

```html
<CheckboxField
id="example2"
isChecked
isRequired
messsage="validation failed"
name="example2"
validationState="error"
/>

```

Without lexer:

```twig
{% include "@spirit/checkboxField.twig" with { props: {
id: "example",
Expand All @@ -15,25 +40,24 @@ pure implementation:
}} %}
```

With Html syntax lexer (enabled by default):
```twig
<CheckboxField id="example" name="example" isRequired isChecked validationState="error" messsage="validation failed" />
```
## API

| Prop name | Type | Default | Required | Description |
|-------------------|-------------------------------|-----------|----------|--------------------------------|
| `class` | `string` | `null` | no | Custom CSS class |
| `id` | `string` | `null` | no | Input and label identification |
| `isChecked` | `bool` | `false` | no | If true, input is checked |
| `isDisabled` | `bool` | `false` | no | If true, input is disabled |
| `isLabelHidden` | `bool` | `false` | no | If true, label is hidden |
| `isRequired` | `bool` | `false` | no | If true, input is required |
| `label` | `string` | — | yes | Label text |
| `message` | `string` | `null` | no | Validation or help message |
| `name` | `string` | `null` | no | Input name |
| `validationState` | `success`, `warning`, `error` | `null` | no | Type of validation state |
| `value` | `string` | `null` | no | Input value |

On top of the API options, you can add `data-*` or `aria-*` attributes to
further extend component's descriptiveness and accessibility. These attributes
will be passed to the topmost HTML element of the component.

## Available props

| Name | Type | Description |
|-------------------|-----------|--------------------------------|
| `id` | string | Input and label identification |
| `name` | string | Input name |
| `label` | string | Label text |
| `value` | string | Input value |
| `message` | string | Validation or help message |
| `isDisabled` | boolean | Whether is field disabled |
| `isRequired` | boolean | Whether is field required |
| `isChecked` | boolean | Whether is field checked |
| `validationState` | `error` | Type of validation state |
| `isLabelHidden` | boolean | Whether is label hidden |
| `class` | string | Additional class name |

[CheckboxField]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/CheckboxField
[CheckboxField]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/CheckboxField
26 changes: 19 additions & 7 deletions packages/web-twig/docs/Container.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,16 @@

This is Twig implementation of the [Container] component.

## Examples
pure implementation:
Basic example usage:

```html
<Container>
Content
</Container>
```

Without lexer:

```twig
{% embed "@spirit/container.twig" %}
{% block content %}
Expand All @@ -12,9 +20,13 @@ pure implementation:
{% endembed %}
```

With Html syntax lexer (enabled by default):
```twig
<Container>Content</Container>
```
## API

| Prop name | Type | Default | Required | Description |
|---------------|----------------|-----------|----------|---------------------|
| `class` | `string` | `null` | no | Custom CSS class |

You can add `id`, `data-*` or `aria-*` attributes to further extend component's
descriptiveness and accessibility.

[Container]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Container
[Container]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Container
Loading

0 comments on commit 6dcbcbe

Please sign in to comment.