diff --git a/README.md b/README.md index 764eea6862..bc82d22717 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ [![Coverage Status](https://coveralls.io/repos/github/emdgroup-liquid/liquid/badge.svg?branch=main)](https://coveralls.io/github/emdgroup-liquid/liquid?branch=main) [![Open in GitHub Codespaces](https://img.shields.io/badge/Open%20in-GitHub%20Codespaces-black?style=flat&color=24292F)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=344421806&machine=standardLinux32gb&location=WestEurope) -Liquid is a UI component library based on the [Liquid Design System](), focusing on accessibility and interoperability. It is built with [Stencil.js](https://stenciljs.com) and contains, inter alia, CSS Components and Web Components, bundled in several bundle formats, which you can use in a wide veriaty of plattforms and projects. +Liquid is a UI component library based on the [Liquid Design System](), focusing on accessibility and interoperability. It is built with [Stencil.js](https://stenciljs.com) and contains, inter alia, CSS Components and Web Components, bundled in several bundle formats, which you can use in a wide variety of platforms and projects. ## Links diff --git a/src/docs/components/docs-deprecation-banner/docs-deprecation-banner.tsx b/src/docs/components/docs-deprecation-banner/docs-deprecation-banner.tsx index bae9b61bac..4271b1e991 100644 --- a/src/docs/components/docs-deprecation-banner/docs-deprecation-banner.tsx +++ b/src/docs/components/docs-deprecation-banner/docs-deprecation-banner.tsx @@ -133,7 +133,7 @@ export class DocsDeprecationBanner {
- Liquid Oxygen will shortly be depreciated. Please use Liquid Carbon + Liquid Oxygen will shortly be deprecated. Please use Liquid Carbon from now on.
Go to Liquid Carbon diff --git a/src/docs/pages/global/typography.md b/src/docs/pages/global/typography.md index f2d3765963..012089818d 100644 --- a/src/docs/pages/global/typography.md +++ b/src/docs/pages/global/typography.md @@ -9,7 +9,7 @@ permalink: global/typography/ # Typography -The typography globals consist of CSS custom properties, which you can use to either apply a `font-family` or a `font` value (combining `font-size`, `line-height` and `font-familily`) and a text-rendering setting. +The typography globals consist of CSS custom properties, which you can use to either apply a `font-family` or a `font` value (combining `font-size`, `line-height` and `font-family`) and a text-rendering setting. text-rendering is set to geometricPrecision by default. If you run into performance issues on text-heavy pages, set the CSS custom property --ld-text-rendering to auto on the body tag. diff --git a/src/docs/pages/guides/css-vs-web-components.md b/src/docs/pages/guides/css-vs-web-components.md index 73855ed327..027362f8b1 100644 --- a/src/docs/pages/guides/css-vs-web-components.md +++ b/src/docs/pages/guides/css-vs-web-components.md @@ -23,7 +23,7 @@ Both look the same, so which one should you use? ## When to use what -There are a few points to concider, when deciding on one of the two options or a mix of both: +There are a few points to consider, when deciding on one of the two options or a mix of both: - **Convenience**: Most Liquid Web Components are much more "compact" when it comes to the amount of code that you have to write than with their CSS counterparts. Your code becomes more readable. Additionally, you may benefit from [type checking and intellisense](guides/type-checking-and-intellisense/). @@ -33,7 +33,7 @@ There are a few points to concider, when deciding on one of the two options or a - **Functionality / feature set**: We always try to offer both, a Web Component and an equivalent CSS Component, but it is not always possible to achieve the same feature set when not having JavaScript to our disposal. CSS can do only so much. Therefore, some more complex components offer more features as Web Components, while coming with a lighweight / less feature rich CSS Component fallback. -- **Performance**: Web Components always come with a performance cost, because they require JavaScript to load and execute in the browser. If you are experiencing performance issues because you are using lots of Web Components on one single page (i.e. rendering a long list / table with components in each row and cell), you may concider either re-thinking your UI or using CSS Components. +- **Performance**: Web Components always come with a performance cost, because they require JavaScript to load and execute in the browser. If you are experiencing performance issues because you are using lots of Web Components on one single page (i.e. rendering a long list / table with components in each row and cell), you may consider either re-thinking your UI or using CSS Components. With all that in mind, you'll need to make a choice case by case. diff --git a/src/docs/pages/guides/troubleshooting/popped-out-element-is-rendered-in-wrong-container.md b/src/docs/pages/guides/troubleshooting/popped-out-element-is-rendered-in-wrong-container.md index aaf74523c6..5f8e190ae2 100644 --- a/src/docs/pages/guides/troubleshooting/popped-out-element-is-rendered-in-wrong-container.md +++ b/src/docs/pages/guides/troubleshooting/popped-out-element-is-rendered-in-wrong-container.md @@ -60,7 +60,7 @@ export default function App() { open={open} ref={modalRef} > - We make a fruit salat! + We make a fruit salad! Property 'ld-button' does not exist on type 'JSX.IntrinsicElements' -In order to let Typescript “know about” Liquid Web Components, you'll have to decalare a JSX namespace including all Liquid components: +In order to let Typescript “know about” Liquid Web Components, you'll have to declare a JSX namespace including all Liquid components: ```ts import { JSX as LocalJSX } from '@emdgroup-liquid/liquid/dist/loader' @@ -59,7 +59,7 @@ Type checking is not yet supported in vanilla HTML, but intellisense can be enab } ``` -The format of the referenced JSON file, which includes type information about each Web Component, doesn't follow a common standard, but is Visual Studio Code specific. Discussions on a standard, which eventually will lead to support in more editors, is (at the time of writing) [still ongoing](https://github.com/WICG/webcomponents/issues/776). Probably due to the fact that there is no standard yet, VS Code extensions are not yet making use of the custom data feature. Hense intellisense is not yet working in Vue templates, Svelte markup etc. +The format of the referenced JSON file, which includes type information about each Web Component, doesn't follow a common standard, but is Visual Studio Code specific. Discussions on a standard, which eventually will lead to support in more editors, is (at the time of writing) [still ongoing](https://github.com/WICG/webcomponents/issues/776). Probably due to the fact that there is no standard yet, VS Code extensions are not yet making use of the custom data feature. Hence intellisense is not yet working in Vue templates, Svelte markup etc. [Some efforts](https://youtrack.jetbrains.com/issue/WEB-39620) are also being made to enable intellisense for Web Components in Intellij editors, but we are not there yet. diff --git a/src/docs/pages/introduction/why-liquid-oxygen.md b/src/docs/pages/introduction/why-liquid-oxygen.md index 254d3455aa..80efa860df 100644 --- a/src/docs/pages/introduction/why-liquid-oxygen.md +++ b/src/docs/pages/introduction/why-liquid-oxygen.md @@ -14,7 +14,7 @@ We are working hard to make Liquid Oxygen a reliable and easy to use component l ## 1. Design Compliance -All Liquid Oxygen components follow the Liquid Design Guidelines and are build in close coorperation with the Liquid Design Team. Therefore, Liquid Oxygen is the easiest way to make sure your project is compliant with the Liquid Design System. +All Liquid Oxygen components follow the Liquid Design Guidelines and are built in close cooperation with the Liquid Design Team. Therefore, Liquid Oxygen is the easiest way to make sure your project is compliant with the Liquid Design System. ## 2. Accessibility diff --git a/src/liquid/components/ld-button/readme.md b/src/liquid/components/ld-button/readme.md index 7536cd5528..7a7f3cfe48 100644 --- a/src/liquid/components/ld-button/readme.md +++ b/src/liquid/components/ld-button/readme.md @@ -500,7 +500,7 @@ To give a button a custom width, simply assign the `width` or `min-width` CSS pr You shouldn't use a button with too much text in it! Instead, put the description in a label outside the button. -You can align the text inside the button using the `align-text` propperty. +You can align the text inside the button using the `align-text` property. {% example %} diff --git a/src/liquid/components/ld-checkbox/readme.md b/src/liquid/components/ld-checkbox/readme.md index 0b9d51e46e..ec47f6adba 100644 --- a/src/liquid/components/ld-checkbox/readme.md +++ b/src/liquid/components/ld-checkbox/readme.md @@ -404,7 +404,7 @@ The checkbox in mode "danger" looks and behaves the same as a checkbox with the {% endexample %} -Please reffer to the [ld-label](components/ld-label/) docs for more information on the label component. +Please refer to the [ld-label](components/ld-label/) docs for more information on the label component. ### With label and input message diff --git a/src/liquid/components/ld-input-message/readme.md b/src/liquid/components/ld-input-message/readme.md index 1612663abb..70a43b029f 100644 --- a/src/liquid/components/ld-input-message/readme.md +++ b/src/liquid/components/ld-input-message/readme.md @@ -12,7 +12,7 @@ permalink: components/ld-input-message/ -This component is meant to be used in conjunction with the [`ld-input`](components/ld-input/) and the [`ld-label`](components/ld-label/) component. Please reffer to the [`ld-input`](components/ld-input/) docs for further usage examples. +This component is meant to be used in conjunction with the [`ld-input`](components/ld-input/) and the [`ld-label`](components/ld-label/) component. Please refer to the [`ld-input`](components/ld-input/) docs for further usage examples. The ld-input-message with a mode other than "info" is supposed to be used on white background only, as on other backgrounds the color contrast of the text is insufficient against the background. diff --git a/src/liquid/components/ld-input/readme.md b/src/liquid/components/ld-input/readme.md index 1f2977ec23..82e9a647e9 100644 --- a/src/liquid/components/ld-input/readme.md +++ b/src/liquid/components/ld-input/readme.md @@ -15,7 +15,7 @@ permalink: components/ld-input/ # ld-input -The `ld-input` component can be used in forms to accept data from the user. While the [native HTML input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) supports a wide variety of types of input data and offers different control widgets, depending on the user agent, this component supports only a subset of the types available in the native HTML input element. All officially supported types of `ld-input` are documented here. Other form input widgets either have been implemented as separate components or may eventually be concidered for implementation in the future. +The `ld-input` component can be used in forms to accept data from the user. While the [native HTML input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) supports a wide variety of types of input data and offers different control widgets, depending on the user agent, this component supports only a subset of the types available in the native HTML input element. All officially supported types of `ld-input` are documented here. Other form input widgets either have been implemented as separate components or may eventually be considered for implementation in the future. This component can be used in conjunction with the [`ld-label`](components/ld-label/) and the [`ld-input-message`](components/ld-input-message/) component. @@ -185,7 +185,7 @@ By default, the `ld-input` component is of [type `text`](https://developer.mozil ### Type email -Triggerts associated keyboard in supporting browsers and devices with dynamic keyboards. +Triggers associated keyboard in supporting browsers and devices with dynamic keyboards. {% example %} @@ -382,7 +382,7 @@ Triggers a telephone keypad in some devices with dynamic keypads. ### Type url -Triggerts associated keyboard in supporting browsers and devices with dynamic keyboards. +Triggers associated keyboard in supporting browsers and devices with dynamic keyboards. {% example %} @@ -499,7 +499,7 @@ You can change the way how the multiline input element can be resized by the use {% endexample %} -Please reffer to the [ld-label](components/ld-label/) docs for more information on the label component. +Please refer to the [ld-label](components/ld-label/) docs for more information on the label component. ### With label and input message diff --git a/src/liquid/components/ld-link/readme.md b/src/liquid/components/ld-link/readme.md index 1b4d010fca..c96e68eb1c 100644 --- a/src/liquid/components/ld-link/readme.md +++ b/src/liquid/components/ld-link/readme.md @@ -13,7 +13,7 @@ permalink: components/ld-link/ -This component is meant to be used in conjunction with the [`ld-icon`](components/ld-icon/). Please reffer to the [`ld-icon`](components/ld-icon/) docs for further usage examples. +This component is meant to be used in conjunction with the [`ld-icon`](components/ld-icon/). Please refer to the [`ld-icon`](components/ld-icon/) docs for further usage examples. ## Examples diff --git a/src/liquid/components/ld-notice/readme.md b/src/liquid/components/ld-notice/readme.md index 32ba13608c..e1fa6ebdae 100644 --- a/src/liquid/components/ld-notice/readme.md +++ b/src/liquid/components/ld-notice/readme.md @@ -15,7 +15,7 @@ tags: -This component is meant to be used in conjunction with the [`ld-input`](components/ld-input/) and the [`ld-label`](components/ld-label/) component. Please reffer to the [`ld-input`](components/ld-input/) docs for further usage examples. +This component is meant to be used in conjunction with the [`ld-input`](components/ld-input/) and the [`ld-label`](components/ld-label/) component. Please refer to the [`ld-input`](components/ld-input/) docs for further usage examples. ## Examples diff --git a/src/liquid/components/ld-radio/readme.md b/src/liquid/components/ld-radio/readme.md index e3d9d26d23..3df90c3f59 100644 --- a/src/liquid/components/ld-radio/readme.md +++ b/src/liquid/components/ld-radio/readme.md @@ -274,7 +274,7 @@ The radio button in mode "danger" looks and behaves the same as a radio button w {% endexample %} -Please reffer to the [ld-label](components/ld-label/) docs for more information on the label component. +Please refer to the [ld-label](components/ld-label/) docs for more information on the label component. ### With label and input message