Skip to content

Commit

Permalink
refactor(ld-bg-cells): add mtrust cells
Browse files Browse the repository at this point in the history
leabarth committed Oct 8, 2024

Verified

This commit was signed with the committer’s verified signature.
leabarth Lea Barth
1 parent a27a7ec commit 7f39a4d
Showing 17 changed files with 173 additions and 39 deletions.
3 changes: 3 additions & 0 deletions src/liquid/components/ld-bg-cells/assets/mtrust-cell.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/liquid/components/ld-bg-cells/ld-bg-cells.css
Original file line number Diff line number Diff line change
@@ -173,6 +173,14 @@
--ld-bg-cells-layer-size: 420%;
}

:host(&--mtrust),
&--mtrust {
--ld-bg-cells-base-size-factor: 0.6;
--ld-bg-cells-layer-translation-x: 315%;
--ld-bg-cells-layer-translation-y: 315%;
--ld-bg-cells-layer-size: 140%;
}

:host(&--o),
&--o {
--ld-bg-cells-base-size-factor: 0.33;
1 change: 1 addition & 0 deletions src/liquid/components/ld-bg-cells/ld-bg-cells.tsx
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ export type CellType =
| 'mdo'
| 'millipore'
| 'milliq'
| 'mtrust'
| 'o' // Organic
| 'organic'
| 'plastic'
86 changes: 47 additions & 39 deletions src/liquid/components/ld-bg-cells/readme.md
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ A background pattern with the Merck cells as additional visual element.
<!-- React component -->

<LdBgCells style={ {
aspectRaio: '16/9'
aspectRaio: '16/9'
} } />

<!-- CSS component -->
@@ -131,6 +131,19 @@ A background pattern with the Merck cells as additional visual element.
</div>
{% endexample %}

### M-Trust

{% example '{ "hasPadding": false, "hasBorder": false }' %}
<ld-bg-cells type="mtrust"></ld-bg-cells>

<!-- React component -->

<LdBgCells type="mtrust" />

<!-- CSS component -->

{% endexample %}

### Supelco

{% example '{ "hasPadding": false, "hasBorder": false }' %}
@@ -302,13 +315,13 @@ A background pattern with the Merck cells as additional visual element.
<!-- React component -->

<LdBgCells
style={ {
'--ld-bg-cells-layer-translation-x': '26%',
'--ld-bg-cells-layer-translation-y': '-5%',
'--ld-bg-cells-layer-size': '195%',
aspectRatio: 1,
} }
/>
style={ {
'--ld-bg-cells-layer-translation-x': '26%',
'--ld-bg-cells-layer-translation-y': '-5%',
'--ld-bg-cells-layer-size': '195%',
aspectRatio: 1,
} }
/>

<!-- CSS component -->

@@ -337,10 +350,10 @@ A background pattern with the Merck cells as additional visual element.
<!-- React component -->

<LdBgCells
style={ {
'--ld-bg-cells-layer-col': 'var(--ld-col-rr)',
'--ld-bg-cells-bg-col': 'var(--ld-col-vy)',
} }
style={ {
'--ld-bg-cells-layer-col': 'var(--ld-col-rr)',
'--ld-bg-cells-bg-col': 'var(--ld-col-vy)',
} }
/>

<!-- CSS component -->
@@ -415,37 +428,33 @@ It is also recommended to only use the property for three layer background cells

{% endexample %}


## CSS Variables

| Variable | Description | Default |
| ------------------------------------------------ | ------------------------------------------------------------- | ------------------------------------ |
| `--ld-bg-cells-bg-col` | Color of background / lowest layer | Theme Secondary Color |
| `--ld-bg-cells-layer-col` | Color of pattern layer | Theme Primary Color |
| `--ld-bg-cells-layer-size` | Size / Scale of pattern layer (in %) | Individual per cell type |
| `--ld-bg-cells-layer-translation-x` | Translation on x-axis of pattern layer (in %) | Individual per cell type |
| `--ld-bg-cells-layer-translation-y` | Translation on y-axis of pattern layer (in %) | Individual per cell type |
| `--ld-bg-cells-layer-rotation` | Rotation of pattern layer (in deg) | `0deg` |
| `--ld-bg-cells-secondary-layer-col` | Color of secondary pattern layer | `transparent` |
| `--ld-bg-cells-secondary-layer-size` | Size / Scale of secondary pattern layer (in %) | `150%` |
| `--ld-bg-cells-secondary-layer-translation-x` | Translation on x-axis of secondary pattern layer (in %) | `0` |
| `--ld-bg-cells-secondary-layer-translation-y` | Translation on y-axis of secondary pattern layer (in %) | `0` |
| `--ld-bg-cells-secondary-layer-rotation` | Rotation of secondary pattern layer (in deg) | `0deg` |

| Variable | Description | Default |
| --------------------------------------------- | ------------------------------------------------------- | ------------------------ |
| `--ld-bg-cells-bg-col` | Color of background / lowest layer | Theme Secondary Color |
| `--ld-bg-cells-layer-col` | Color of pattern layer | Theme Primary Color |
| `--ld-bg-cells-layer-size` | Size / Scale of pattern layer (in %) | Individual per cell type |
| `--ld-bg-cells-layer-translation-x` | Translation on x-axis of pattern layer (in %) | Individual per cell type |
| `--ld-bg-cells-layer-translation-y` | Translation on y-axis of pattern layer (in %) | Individual per cell type |
| `--ld-bg-cells-layer-rotation` | Rotation of pattern layer (in deg) | `0deg` |
| `--ld-bg-cells-secondary-layer-col` | Color of secondary pattern layer | `transparent` |
| `--ld-bg-cells-secondary-layer-size` | Size / Scale of secondary pattern layer (in %) | `150%` |
| `--ld-bg-cells-secondary-layer-translation-x` | Translation on x-axis of secondary pattern layer (in %) | `0` |
| `--ld-bg-cells-secondary-layer-translation-y` | Translation on y-axis of secondary pattern layer (in %) | `0` |
| `--ld-bg-cells-secondary-layer-rotation` | Rotation of secondary pattern layer (in deg) | `0deg` |

<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | Animate the pattern | `boolean` | `false` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `threeLayers` | `three-layers` | Use 3 color layers | `boolean` | `false` |
| `type` | `type` | Cells pattern | `"bioreliance" \| "f" \| "functional" \| "hexagon" \| "mdo" \| "millipore" \| "milliq" \| "o" \| "organic" \| "plastic" \| "qa-x2f-qc" \| "safc" \| "sigma-aldrich" \| "supelco" \| "synthetic" \| "t" \| "technical" \| "tile"` | `'hexagon'` |

| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | Animate the pattern | `boolean` | `false` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `threeLayers` | `three-layers` | Use 3 color layers | `boolean` | `false` |
| `type` | `type` | Cells pattern | `"bioreliance" \| "f" \| "functional" \| "hexagon" \| "mdo" \| "millipore" \| "milliq" \| "mtrust" \| "o" \| "organic" \| "plastic" \| "qa-x2f-qc" \| "safc" \| "sigma-aldrich" \| "supelco" \| "synthetic" \| "t" \| "technical" \| "tile"` | `'hexagon'` |

## Shadow Parts

@@ -454,7 +463,6 @@ It is also recommended to only use the property for three layer background cells
| `"layer"` | the primary cell layer |
| `"secondary-layer"` | the secondary cell layer |

---

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
_Built with [StencilJS](https://stenciljs.com/)_
8 changes: 8 additions & 0 deletions src/liquid/components/ld-button/readme.md
Original file line number Diff line number Diff line change
@@ -683,6 +683,10 @@ Type: `Promise<void>`

### Used by

- docs-copy-to-cb
- docs-page-nav
- docs-toggle-code
- docs-view-on-figma
- [ld-cookie-consent](../ld-cookie-consent)
- [ld-menuitem](../ld-context-menu/ld-menuitem)
- [ld-pagination](../ld-pagination)
@@ -692,6 +696,10 @@ Type: `Promise<void>`
### Graph
```mermaid
graph TD;
docs-copy-to-cb --> ld-button
docs-page-nav --> ld-button
docs-toggle-code --> ld-button
docs-view-on-figma --> ld-button
ld-cookie-consent --> ld-button
ld-menuitem --> ld-button
ld-pagination --> ld-button
5 changes: 5 additions & 0 deletions src/liquid/components/ld-context-menu/ld-menuitem/readme.md
Original file line number Diff line number Diff line change
@@ -156,6 +156,10 @@ Type: `Promise<void>`

## Dependencies

### Used by

- docs-icon

### Depends on

- [ld-button](../../ld-button)
@@ -164,6 +168,7 @@ Type: `Promise<void>`
```mermaid
graph TD;
ld-menuitem --> ld-button
docs-icon --> ld-menuitem
style ld-menuitem fill:#f9f,stroke:#333,stroke-width:4px
```

5 changes: 5 additions & 0 deletions src/liquid/components/ld-context-menu/readme.md
Original file line number Diff line number Diff line change
@@ -287,6 +287,10 @@ Type: `Promise<void>`

## Dependencies

### Used by

- docs-icon

### Depends on

- [ld-tooltip](../ld-tooltip)
@@ -299,6 +303,7 @@ graph TD;
ld-context-menu --> ld-menu
ld-tooltip --> ld-sr-only
ld-tooltip --> ld-tooltip-popper
docs-icon --> ld-context-menu
style ld-context-menu fill:#f9f,stroke:#333,stroke-width:4px
```

5 changes: 5 additions & 0 deletions src/liquid/components/ld-header/readme.md
Original file line number Diff line number Diff line change
@@ -334,6 +334,10 @@ If you want the header to hide (slide up behind the top of the window) when the

## Dependencies

### Used by

- docs-topbar

### Depends on

- [ld-icon](../ld-icon)
@@ -344,6 +348,7 @@ If you want the header to hide (slide up behind the top of the window) when the
graph TD;
ld-header --> ld-icon
ld-header --> ld-typo
docs-topbar --> ld-header
style ld-header fill:#f9f,stroke:#333,stroke-width:4px
```

16 changes: 16 additions & 0 deletions src/liquid/components/ld-icon/readme.md
Original file line number Diff line number Diff line change
@@ -368,6 +368,14 @@ Right-click an icon below to download its SVG file. To download all icons at onc

### Used by

- docs-copy-to-cb
- docs-edit-on-github
- docs-example
- docs-figma-access-notice
- docs-icon
- docs-pick-theme
- docs-toggle-code
- docs-view-on-figma
- [ld-accordion-toggle](../ld-accordion/ld-accordion-toggle)
- [ld-badge](../ld-badge)
- [ld-cookie-consent](../ld-cookie-consent)
@@ -385,6 +393,14 @@ Right-click an icon below to download its SVG file. To download all icons at onc
### Graph
```mermaid
graph TD;
docs-copy-to-cb --> ld-icon
docs-edit-on-github --> ld-icon
docs-example --> ld-icon
docs-figma-access-notice --> ld-icon
docs-icon --> ld-icon
docs-pick-theme --> ld-icon
docs-toggle-code --> ld-icon
docs-view-on-figma --> ld-icon
ld-accordion-toggle --> ld-icon
ld-badge --> ld-icon
ld-cookie-consent --> ld-icon
13 changes: 13 additions & 0 deletions src/liquid/components/ld-input/readme.md
Original file line number Diff line number Diff line change
@@ -988,6 +988,19 @@ Type: `Promise<void>`
| `"placeholder"` | Placeholder rendered for input type "file" |


## Dependencies

### Used by

- docs-search

### Graph
```mermaid
graph TD;
docs-search --> ld-input
style ld-input fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
13 changes: 13 additions & 0 deletions src/liquid/components/ld-select/ld-option/readme.md
Original file line number Diff line number Diff line change
@@ -30,6 +30,19 @@ Please refer to the [`ld-select` documentation](components/ld-select) for usage
| `value` | `value` | The content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element. | `string` | `undefined` |


## Dependencies

### Used by

- docs-pick-theme

### Graph
```mermaid
graph TD;
docs-pick-theme --> ld-option
style ld-option fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
5 changes: 5 additions & 0 deletions src/liquid/components/ld-select/readme.md
Original file line number Diff line number Diff line change
@@ -2374,6 +2374,10 @@ Type: `Promise<void>`

## Dependencies

### Used by

- docs-pick-theme

### Depends on

- ld-select-popper
@@ -2384,6 +2388,7 @@ graph TD;
ld-select --> ld-select-popper
ld-select-popper --> ld-button
ld-select-popper --> ld-icon
docs-pick-theme --> ld-select
style ld-select fill:#f9f,stroke:#333,stroke-width:4px
```

6 changes: 6 additions & 0 deletions src/liquid/components/ld-sr-only/readme.md
Original file line number Diff line number Diff line change
@@ -47,6 +47,9 @@ The CSS class `ld-sr-only` works the same way as its Web Component counterpart,

### Used by

- docs-copy-to-cb
- docs-pick-theme
- docs-toggle-code
- [ld-sidenav-header](../ld-sidenav/ld-sidenav-header)
- [ld-sidenav-toggle-outside](../ld-sidenav/ld-sidenav-toggle-outside)
- [ld-slider](../ld-slider)
@@ -58,6 +61,9 @@ The CSS class `ld-sr-only` works the same way as its Web Component counterpart,
### Graph
```mermaid
graph TD;
docs-copy-to-cb --> ld-sr-only
docs-pick-theme --> ld-sr-only
docs-toggle-code --> ld-sr-only
ld-sidenav-header --> ld-sr-only
ld-sidenav-toggle-outside --> ld-sr-only
ld-slider --> ld-sr-only
13 changes: 13 additions & 0 deletions src/liquid/components/ld-switch/ld-switch-item/readme.md
Original file line number Diff line number Diff line change
@@ -52,6 +52,19 @@ Type: `Promise<void>`
| `"label-element"` | wrapping label element |


## Dependencies

### Used by

- docs-example

### Graph
```mermaid
graph TD;
docs-example --> ld-switch-item
style ld-switch-item fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
13 changes: 13 additions & 0 deletions src/liquid/components/ld-switch/readme.md
Original file line number Diff line number Diff line change
@@ -738,6 +738,19 @@ Type: `Promise<void>`
| `"legend"` | The legend element |


## Dependencies

### Used by

- docs-example

### Graph
```mermaid
graph TD;
docs-example --> ld-switch
style ld-switch fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
4 changes: 4 additions & 0 deletions src/liquid/components/ld-tooltip/readme.md
Original file line number Diff line number Diff line change
@@ -490,6 +490,8 @@ Type: `Promise<void>`

### Used by

- docs-topbar
- docs-view-on-figma
- [ld-context-menu](../ld-context-menu)
- [ld-sidenav-header](../ld-sidenav/ld-sidenav-header)
- [ld-sidenav-navitem](../ld-sidenav/ld-sidenav-navitem)
@@ -505,6 +507,8 @@ Type: `Promise<void>`
graph TD;
ld-tooltip --> ld-sr-only
ld-tooltip --> ld-tooltip-popper
docs-topbar --> ld-tooltip
docs-view-on-figma --> ld-tooltip
ld-context-menu --> ld-tooltip
ld-sidenav-header --> ld-tooltip
ld-sidenav-navitem --> ld-tooltip
8 changes: 8 additions & 0 deletions src/liquid/components/ld-typo/readme.md
Original file line number Diff line number Diff line change
@@ -584,6 +584,10 @@ Here are some examples on how you can apply different colors on headings:

### Used by

- docs-contributors
- docs-figma-access-notice
- docs-icon
- docs-icon-group
- [ld-cookie-consent](../ld-cookie-consent)
- [ld-header](../ld-header)
- [ld-notice](../ld-notice)
@@ -595,6 +599,10 @@ Here are some examples on how you can apply different colors on headings:
### Graph
```mermaid
graph TD;
docs-contributors --> ld-typo
docs-figma-access-notice --> ld-typo
docs-icon --> ld-typo
docs-icon-group --> ld-typo
ld-cookie-consent --> ld-typo
ld-header --> ld-typo
ld-notice --> ld-typo

0 comments on commit 7f39a4d

Please sign in to comment.